diff options
author | Starfall <us@starfall.systems> | 2022-06-24 13:31:43 -0500 |
---|---|---|
committer | Starfall <us@starfall.systems> | 2022-06-24 13:31:43 -0500 |
commit | d83f17f6763a1ffb3569eac73330cb09c557acea (patch) | |
tree | 92d392eed60a7d60bbd01e8544202db19a37e3d5 /app/javascript/styles | |
parent | b9c901007b9a5772d2553a5770fa479954eec58f (diff) | |
parent | 63f79874b59b3ba28c0f940b9d36ea7aacb44c93 (diff) |
Merge remote-tracking branch 'glitch/main'
Diffstat (limited to 'app/javascript/styles')
-rw-r--r-- | app/javascript/styles/application.scss | 1 | ||||
-rw-r--r-- | app/javascript/styles/contrast/variables.scss | 8 | ||||
-rw-r--r-- | app/javascript/styles/mastodon-light/variables.scss | 5 | ||||
-rw-r--r-- | app/javascript/styles/mastodon/about.scss | 2 | ||||
-rw-r--r-- | app/javascript/styles/mastodon/admin.scss | 14 | ||||
-rw-r--r-- | app/javascript/styles/mastodon/basics.scss | 12 | ||||
-rw-r--r-- | app/javascript/styles/mastodon/branding.scss | 3 | ||||
-rw-r--r-- | app/javascript/styles/mastodon/components.scss | 33 | ||||
-rw-r--r-- | app/javascript/styles/mastodon/containers.scss | 7 | ||||
-rw-r--r-- | app/javascript/styles/mastodon/dashboard.scss | 4 | ||||
-rw-r--r-- | app/javascript/styles/mastodon/footer.scss | 8 | ||||
-rw-r--r-- | app/javascript/styles/mastodon/forms.scss | 13 | ||||
-rw-r--r-- | app/javascript/styles/mastodon/statuses.scss | 4 | ||||
-rw-r--r-- | app/javascript/styles/mastodon/variables.scss | 4 |
14 files changed, 65 insertions, 53 deletions
diff --git a/app/javascript/styles/application.scss b/app/javascript/styles/application.scss index cb65b9567..bbea06195 100644 --- a/app/javascript/styles/application.scss +++ b/app/javascript/styles/application.scss @@ -6,6 +6,7 @@ @import 'mastodon/reset'; @import 'mastodon/basics'; +@import 'mastodon/branding'; @import 'mastodon/containers'; @import 'mastodon/lists'; @import 'mastodon/footer'; diff --git a/app/javascript/styles/contrast/variables.scss b/app/javascript/styles/contrast/variables.scss index cfe3b21db..9edfd6d8d 100644 --- a/app/javascript/styles/contrast/variables.scss +++ b/app/javascript/styles/contrast/variables.scss @@ -4,19 +4,17 @@ $black: #000000; $classic-base-color: #282c37; $classic-primary-color: #9baec8; $classic-secondary-color: #d9e1e8; -$classic-highlight-color: #2b90d9; +$classic-highlight-color: #6364ff; $ui-base-color: $classic-base-color !default; $ui-primary-color: $classic-primary-color !default; $ui-secondary-color: $classic-secondary-color !default; - -// Differences -$ui-highlight-color: #2b5fd9; +$ui-highlight-color: $classic-highlight-color !default; $darker-text-color: lighten($ui-primary-color, 20%) !default; $dark-text-color: lighten($ui-primary-color, 12%) !default; $secondary-text-color: lighten($ui-secondary-color, 6%) !default; -$highlight-text-color: $classic-highlight-color !default; +$highlight-text-color: lighten($ui-highlight-color, 8%) !default; $action-button-color: #8d9ac2; $inverted-text-color: $black !default; diff --git a/app/javascript/styles/mastodon-light/variables.scss b/app/javascript/styles/mastodon-light/variables.scss index f6bc3ac96..cae065878 100644 --- a/app/javascript/styles/mastodon-light/variables.scss +++ b/app/javascript/styles/mastodon-light/variables.scss @@ -5,7 +5,7 @@ $white: #ffffff; $classic-base-color: #282c37; $classic-primary-color: #9baec8; $classic-secondary-color: #d9e1e8; -$classic-highlight-color: #2b90d9; +$classic-highlight-color: #6364ff; // Differences $success-green: lighten(#3c754d, 8%); @@ -17,10 +17,11 @@ $ui-base-color: $classic-secondary-color !default; $ui-base-lighter-color: #b0c0cf; $ui-primary-color: #9bcbed; $ui-secondary-color: $classic-base-color !default; -$ui-highlight-color: #2b90d9; +$ui-highlight-color: $classic-highlight-color !default; $primary-text-color: $black !default; $darker-text-color: $classic-base-color !default; +$highlight-text-color: darken($ui-highlight-color, 8%) !default; $dark-text-color: #444b5d; $action-button-color: #606984; diff --git a/app/javascript/styles/mastodon/about.scss b/app/javascript/styles/mastodon/about.scss index ac2fdb2c7..c82be742d 100644 --- a/app/javascript/styles/mastodon/about.scss +++ b/app/javascript/styles/mastodon/about.scss @@ -688,7 +688,7 @@ $small-breakpoint: 960px; align-items: center; padding: 50px; - svg { + .logo { fill: $primary-text-color; height: 52px; } diff --git a/app/javascript/styles/mastodon/admin.scss b/app/javascript/styles/mastodon/admin.scss index 26c36c8a7..f4f5bf752 100644 --- a/app/javascript/styles/mastodon/admin.scss +++ b/app/javascript/styles/mastodon/admin.scss @@ -133,12 +133,12 @@ $content-width: 840px; .simple-navigation-active-leaf a { color: $primary-text-color; - background-color: $ui-highlight-color; + background-color: darken($ui-highlight-color, 2%); border-bottom: 0; border-radius: 0; &:hover { - background-color: lighten($ui-highlight-color, 5%); + background-color: $ui-highlight-color; } } } @@ -203,6 +203,14 @@ $content-width: 840px; } } + h2 small { + font-size: 12px; + display: block; + font-weight: 500; + color: $darker-text-color; + line-height: 18px; + } + @media screen and (max-width: $no-columns-breakpoint) { border-bottom: 0; padding-bottom: 0; @@ -893,7 +901,7 @@ a.name-tag, border: 0; a { - color: lighten($ui-highlight-color, 8%); + color: $highlight-text-color; } dl:first-child .verified { diff --git a/app/javascript/styles/mastodon/basics.scss b/app/javascript/styles/mastodon/basics.scss index 391f1fad9..413a1cdd6 100644 --- a/app/javascript/styles/mastodon/basics.scss +++ b/app/javascript/styles/mastodon/basics.scss @@ -256,7 +256,17 @@ button { } .logo-resources { - display: none; + // Not using display: none because of https://bugs.chromium.org/p/chromium/issues/detail?id=258029 + visibility: hidden; + user-select: none; + pointer-events: none; + width: 0; + height: 0; + overflow: hidden; + position: absolute; + top: 0; + left: 0; + z-index: -1000; } // NoScript adds a __ns__pop2top class to the full ancestry of blocked elements, diff --git a/app/javascript/styles/mastodon/branding.scss b/app/javascript/styles/mastodon/branding.scss new file mode 100644 index 000000000..d1bddc68b --- /dev/null +++ b/app/javascript/styles/mastodon/branding.scss @@ -0,0 +1,3 @@ +.logo { + color: $primary-text-color; +} diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 67a91e922..7ae20fbd9 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -42,7 +42,7 @@ } .button { - background-color: $ui-highlight-color; + background-color: darken($ui-highlight-color, 2%); border: 10px none; border-radius: 4px; box-sizing: border-box; @@ -60,20 +60,16 @@ text-align: center; text-decoration: none; text-overflow: ellipsis; - transition: all 100ms ease-in; white-space: nowrap; width: auto; &:active, &:focus, &:hover { - background-color: lighten($ui-highlight-color, 10%); - transition: all 200ms ease-out; + background-color: $ui-highlight-color; } &--destructive { - transition: none; - &:active, &:focus, &:hover { @@ -829,7 +825,7 @@ } a.unhandled-link { - color: lighten($ui-highlight-color, 8%); + color: $highlight-text-color; } .status__content__spoiler-link { @@ -899,7 +895,7 @@ } &.unhandled-link { - color: lighten($ui-highlight-color, 8%); + color: $highlight-text-color; } } } @@ -912,7 +908,7 @@ display: block; font-size: 15px; line-height: 20px; - color: lighten($ui-highlight-color, 8%); + color: $highlight-text-color; border: 0; background: transparent; padding: 0; @@ -2437,7 +2433,7 @@ a.account__display-name { height: 3.9375rem; bottom: 1.3125rem; right: 1.3125rem; - background: darken($ui-highlight-color, 3%); + background: darken($ui-highlight-color, 2%); color: $white; border-radius: 50%; font-size: 21px; @@ -2448,7 +2444,7 @@ a.account__display-name { &:hover, &:focus, &:active { - background: lighten($ui-highlight-color, 7%); + background: $ui-highlight-color; } } @@ -2538,7 +2534,6 @@ a.account__display-name { padding: 40px; .logo { - fill: $primary-text-color; width: 50px; margin: 0 auto; margin-bottom: 40px; @@ -2882,11 +2877,11 @@ a.account__display-name { } .react-toggle--checked .react-toggle-track { - background-color: $ui-highlight-color; + background-color: darken($ui-highlight-color, 2%); } .react-toggle--checked:is(:hover, :focus-within):not(.react-toggle--disabled) .react-toggle-track { - background-color: lighten($ui-highlight-color, 10%); + background-color: $ui-highlight-color; } .react-toggle-track-check { @@ -2975,7 +2970,7 @@ a.account__display-name { } &.active { - color: $ui-highlight-color; + color: $highlight-text-color; } } } @@ -3408,14 +3403,14 @@ a.status-card.compact:hover { } a { - color: lighten($ui-highlight-color, 8%); + color: $highlight-text-color; text-decoration: none; &:hover, &:focus, &:active { text-decoration: underline; - color: lighten($ui-highlight-color, 12%); + color: lighten($highlight-text-color, 4%); } } } @@ -6428,8 +6423,8 @@ a.status-card.compact:hover { vertical-align: middle; &.checked { - border-color: lighten($ui-highlight-color, 8%); - background: lighten($ui-highlight-color, 8%); + border-color: lighten($ui-highlight-color, 4%); + background: lighten($ui-highlight-color, 4%); } } } diff --git a/app/javascript/styles/mastodon/containers.scss b/app/javascript/styles/mastodon/containers.scss index 81459f5ba..5703a64e3 100644 --- a/app/javascript/styles/mastodon/containers.scss +++ b/app/javascript/styles/mastodon/containers.scss @@ -20,8 +20,7 @@ justify-content: center; align-items: center; - svg { - fill: $primary-text-color; + .logo { height: 42px; margin-right: 10px; } @@ -320,7 +319,7 @@ display: block; padding: 15px; - svg { + .logo { display: block; height: 18px; width: auto; @@ -792,7 +791,7 @@ border-top: 0; a { - color: lighten($ui-highlight-color, 8%); + color: $highlight-text-color; } dl:first-child .verified { diff --git a/app/javascript/styles/mastodon/dashboard.scss b/app/javascript/styles/mastodon/dashboard.scss index 7d0e51fde..c21fc9eba 100644 --- a/app/javascript/styles/mastodon/dashboard.scss +++ b/app/javascript/styles/mastodon/dashboard.scss @@ -82,7 +82,7 @@ display: flex; align-items: baseline; border-radius: 4px; - background: $ui-highlight-color; + background: darken($ui-highlight-color, 2%); color: $primary-text-color; transition: all 100ms ease-in; font-size: 14px; @@ -95,7 +95,7 @@ &:active, &:focus, &:hover { - background-color: lighten($ui-highlight-color, 10%); + background-color: $ui-highlight-color; transition: all 200ms ease-out; } diff --git a/app/javascript/styles/mastodon/footer.scss b/app/javascript/styles/mastodon/footer.scss index 073ebda7e..0c3e42033 100644 --- a/app/javascript/styles/mastodon/footer.scss +++ b/app/javascript/styles/mastodon/footer.scss @@ -132,19 +132,19 @@ } .brand { - svg { + .logo { display: block; height: 36px; width: auto; margin: 0 auto; - fill: lighten($ui-base-color, 34%); + color: lighten($ui-base-color, 34%); } &:hover, &:focus, &:active { - svg { - fill: lighten($ui-base-color, 38%); + .logo { + color: lighten($ui-base-color, 38%); } } } diff --git a/app/javascript/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.scss index dd0dc22a5..320fa8fef 100644 --- a/app/javascript/styles/mastodon/forms.scss +++ b/app/javascript/styles/mastodon/forms.scss @@ -457,14 +457,14 @@ code { width: 100%; border: 0; border-radius: 4px; - background: $ui-highlight-color; + background: darken($ui-highlight-color, 2%); color: $primary-text-color; font-size: 18px; line-height: inherit; height: auto; padding: 10px; - text-transform: uppercase; text-decoration: none; + text-transform: uppercase; text-align: center; box-sizing: border-box; cursor: pointer; @@ -477,13 +477,10 @@ code { margin-right: 0; } - &:hover { - background-color: lighten($ui-highlight-color, 5%); - } - &:active, - &:focus { - background-color: darken($ui-highlight-color, 5%); + &:focus, + &:hover { + background-color: $ui-highlight-color; } &:disabled:hover { diff --git a/app/javascript/styles/mastodon/statuses.scss b/app/javascript/styles/mastodon/statuses.scss index a926aff96..a3237a630 100644 --- a/app/javascript/styles/mastodon/statuses.scss +++ b/app/javascript/styles/mastodon/statuses.scss @@ -80,7 +80,7 @@ .button.logo-button { flex: 0 auto; font-size: 14px; - background: $ui-highlight-color; + background: darken($ui-highlight-color, 2%); color: $primary-text-color; text-transform: none; line-height: 1.2; @@ -104,7 +104,7 @@ &:active, &:focus, &:hover { - background: lighten($ui-highlight-color, 10%); + background: $ui-highlight-color; } &:disabled, diff --git a/app/javascript/styles/mastodon/variables.scss b/app/javascript/styles/mastodon/variables.scss index 47d7e6f87..be2c900ea 100644 --- a/app/javascript/styles/mastodon/variables.scss +++ b/app/javascript/styles/mastodon/variables.scss @@ -12,7 +12,7 @@ $red-bookmark: $warning-red; $classic-base-color: #282c37; // Midnight Express $classic-primary-color: #9baec8; // Echo Blue $classic-secondary-color: #d9e1e8; // Pattens Blue -$classic-highlight-color: #2b90d9; // Summer Sky +$classic-highlight-color: #6364ff; // Brand purple // Variables for defaults in UI $base-shadow-color: $black !default; @@ -34,7 +34,7 @@ $primary-text-color: $white !default; $darker-text-color: $ui-primary-color !default; $dark-text-color: $ui-base-lighter-color !default; $secondary-text-color: $ui-secondary-color !default; -$highlight-text-color: $ui-highlight-color !default; +$highlight-text-color: lighten($ui-highlight-color, 8%) !default; $action-button-color: $ui-base-lighter-color !default; $passive-text-color: $gold-star !default; $active-passive-text-color: $success-green !default; |