From 74dae9458d118b066cd74b16aab2aa9cafbf3fba Mon Sep 17 00:00:00 2001 From: Lynx Kotoura Date: Wed, 18 Apr 2018 23:52:15 +0900 Subject: [PATCH] Add color variables of texts for better accesibility (#7125) * Add variables for text colors * Change variables in sass files * Apply text color variables for recently added colors * Fix text colors of emoji mart anchors * Fix text colors of search__input * Fix text colors of text area of compose-form * Fix icon colors of privacy dropdown and modal * Inverted icon colors by classname * Change variables in boost.scss * Change action-button-color * Fix text colors of pre-header --- .../features/ui/components/actions_modal.js | 2 +- app/javascript/styles/mastodon/about.scss | 64 ++-- app/javascript/styles/mastodon/accounts.scss | 42 +-- app/javascript/styles/mastodon/admin.scss | 42 +-- app/javascript/styles/mastodon/basics.scss | 2 +- app/javascript/styles/mastodon/boost.scss | 6 +- .../styles/mastodon/compact_header.scss | 4 +- .../styles/mastodon/components.scss | 353 ++++++++---------- .../styles/mastodon/containers.scss | 2 +- .../styles/mastodon/emoji_picker.scss | 16 +- app/javascript/styles/mastodon/footer.scss | 2 +- app/javascript/styles/mastodon/forms.scss | 39 +- .../styles/mastodon/landing_strip.scss | 8 +- .../styles/mastodon/stream_entries.scss | 32 +- app/javascript/styles/mastodon/tables.scss | 4 +- app/javascript/styles/mastodon/variables.scss | 7 +- 16 files changed, 285 insertions(+), 340 deletions(-) diff --git a/app/javascript/mastodon/features/ui/components/actions_modal.js b/app/javascript/mastodon/features/ui/components/actions_modal.js index 79a5a20ef6..9792eba5f7 100644 --- a/app/javascript/mastodon/features/ui/components/actions_modal.js +++ b/app/javascript/mastodon/features/ui/components/actions_modal.js @@ -27,7 +27,7 @@ export default class ActionsModal extends ImmutablePureComponent { return (
  • - {icon && } + {icon && }
    {text}
    {meta}
    diff --git a/app/javascript/styles/mastodon/about.scss b/app/javascript/styles/mastodon/about.scss index 034c35e8a7..0a09a38d24 100644 --- a/app/javascript/styles/mastodon/about.scss +++ b/app/javascript/styles/mastodon/about.scss @@ -169,7 +169,7 @@ $small-breakpoint: 960px; background: $ui-base-color; font-size: 12px; font-weight: 500; - color: $ui-primary-color; + color: $darker-text-color; text-transform: uppercase; position: relative; z-index: 1; @@ -186,10 +186,10 @@ $small-breakpoint: 960px; font-size: 16px; line-height: 30px; margin-bottom: 12px; - color: $ui-primary-color; + color: $darker-text-color; a { - color: $ui-highlight-color; + color: $highlight-text-color; text-decoration: underline; } } @@ -202,11 +202,11 @@ $small-breakpoint: 960px; text-align: center; font-size: 12px; line-height: 18px; - color: $ui-primary-color; + color: $darker-text-color; margin-bottom: 0; a { - color: $ui-highlight-color; + color: $highlight-text-color; text-decoration: underline; } } @@ -225,7 +225,7 @@ $small-breakpoint: 960px; font-family: inherit; font-size: inherit; line-height: inherit; - color: lighten($ui-primary-color, 10%); + color: transparentize($darker-text-color, 0.1); } h1 { @@ -234,14 +234,14 @@ $small-breakpoint: 960px; line-height: 30px; font-weight: 500; margin-bottom: 20px; - color: $ui-secondary-color; + color: $primary-text-color; small { font-family: 'mastodon-font-sans-serif', sans-serif; display: block; font-size: 18px; font-weight: 400; - color: $ui-base-lighter-color; + color: opacify($darker-text-color, 0.1); } } @@ -251,7 +251,7 @@ $small-breakpoint: 960px; line-height: 26px; font-weight: 500; margin-bottom: 20px; - color: $ui-secondary-color; + color: $primary-text-color; } h3 { @@ -260,7 +260,7 @@ $small-breakpoint: 960px; line-height: 24px; font-weight: 500; margin-bottom: 20px; - color: $ui-secondary-color; + color: $primary-text-color; } h4 { @@ -269,7 +269,7 @@ $small-breakpoint: 960px; line-height: 24px; font-weight: 500; margin-bottom: 20px; - color: $ui-secondary-color; + color: $primary-text-color; } h5 { @@ -278,7 +278,7 @@ $small-breakpoint: 960px; line-height: 24px; font-weight: 500; margin-bottom: 20px; - color: $ui-secondary-color; + color: $primary-text-color; } h6 { @@ -287,7 +287,7 @@ $small-breakpoint: 960px; line-height: 24px; font-weight: 500; margin-bottom: 20px; - color: $ui-secondary-color; + color: $primary-text-color; } ul, @@ -354,10 +354,10 @@ $small-breakpoint: 960px; font-weight: 400; font-size: 16px; line-height: 30px; - color: $ui-primary-color; + color: $darker-text-color; a { - color: $ui-highlight-color; + color: $highlight-text-color; text-decoration: underline; } } @@ -405,7 +405,7 @@ $small-breakpoint: 960px; font-size: 14px; &:hover { - color: $ui-secondary-color; + color: $darker-text-color; } } @@ -478,10 +478,10 @@ $small-breakpoint: 960px; font-weight: 400; font-size: 16px; line-height: 30px; - color: $ui-primary-color; + color: $darker-text-color; a { - color: $ui-highlight-color; + color: $highlight-text-color; text-decoration: underline; } } @@ -517,7 +517,7 @@ $small-breakpoint: 960px; span { &:last-child { - color: $ui-secondary-color; + color: $darker-text-color; } } @@ -548,7 +548,7 @@ $small-breakpoint: 960px; font-size: 14px; line-height: 24px; font-weight: 500; - color: $ui-primary-color; + color: $darker-text-color; padding-bottom: 5px; margin-bottom: 15px; border-bottom: 1px solid lighten($ui-base-color, 4%); @@ -559,7 +559,7 @@ $small-breakpoint: 960px; a, span { font-weight: 400; - color: darken($ui-primary-color, 10%); + color: opacify($darker-text-color, 0.1); } a { @@ -602,7 +602,7 @@ $small-breakpoint: 960px; .username { display: block; - color: $ui-primary-color; + color: $darker-text-color; } } } @@ -775,7 +775,7 @@ $small-breakpoint: 960px; } p a { - color: $ui-secondary-color; + color: $darker-text-color; } h1 { @@ -784,10 +784,10 @@ $small-breakpoint: 960px; margin-bottom: 0; small { - color: $ui-primary-color; + color: $darker-text-color; span { - color: $ui-secondary-color; + color: $darker-text-color; } } } @@ -896,7 +896,7 @@ $small-breakpoint: 960px; } a { - color: $ui-secondary-color; + color: $darker-text-color; text-decoration: none; } } @@ -935,7 +935,7 @@ $small-breakpoint: 960px; .fa { display: block; - color: $ui-primary-color; + color: $darker-text-color; font-size: 48px; } } @@ -943,7 +943,7 @@ $small-breakpoint: 960px; .text { font-size: 16px; line-height: 30px; - color: $ui-primary-color; + color: $darker-text-color; h6 { font-size: inherit; @@ -969,10 +969,10 @@ $small-breakpoint: 960px; font-weight: 400; font-size: 16px; line-height: 30px; - color: $ui-primary-color; + color: $darker-text-color; a { - color: $ui-highlight-color; + color: $highlight-text-color; text-decoration: underline; } } @@ -980,7 +980,7 @@ $small-breakpoint: 960px; .footer-links { padding-bottom: 50px; text-align: right; - color: $ui-base-lighter-color; + color: $darker-text-color; p { font-size: 14px; @@ -995,7 +995,7 @@ $small-breakpoint: 960px; &__footer { margin-top: 10px; text-align: center; - color: $ui-base-lighter-color; + color: $darker-text-color; p { font-size: 14px; diff --git a/app/javascript/styles/mastodon/accounts.scss b/app/javascript/styles/mastodon/accounts.scss index 0b49da1ade..f9af6f2888 100644 --- a/app/javascript/styles/mastodon/accounts.scss +++ b/app/javascript/styles/mastodon/accounts.scss @@ -75,7 +75,7 @@ small { display: block; font-size: 14px; - color: $ui-highlight-color; + color: $highlight-text-color; font-weight: 400; overflow: hidden; text-overflow: ellipsis; @@ -113,7 +113,7 @@ width: 33.3%; box-sizing: border-box; flex: 0 0 auto; - color: $ui-primary-color; + color: $darker-text-color; padding: 5px 10px 0; margin-bottom: 10px; border-right: 1px solid lighten($ui-base-color, 4%); @@ -143,7 +143,7 @@ &.active { &::after { - border-bottom: 4px solid $ui-highlight-color; + border-bottom: 4px solid $highlight-text-color; opacity: 1; } } @@ -178,7 +178,7 @@ font-size: 14px; line-height: 18px; padding: 0 15px; - color: $ui-secondary-color; + color: $darker-text-color; } @media screen and (max-width: 480px) { @@ -256,7 +256,7 @@ .current { background: $simple-background-color; border-radius: 100px; - color: $ui-base-color; + color: $lighter-text-color; cursor: default; margin: 0 10px; } @@ -268,7 +268,7 @@ .older, .newer { text-transform: uppercase; - color: $ui-secondary-color; + color: $primary-text-color; } .older { @@ -293,7 +293,7 @@ .disabled { cursor: default; - color: lighten($ui-base-color, 10%); + color: opacify($lighter-text-color, 0.1); } @media screen and (max-width: 700px) { @@ -332,7 +332,7 @@ width: 335px; background: $simple-background-color; border-radius: 4px; - color: $ui-base-color; + color: $lighter-text-color; margin: 0 5px 10px; position: relative; @@ -344,7 +344,7 @@ overflow: hidden; height: 100px; border-radius: 4px 4px 0 0; - background-color: lighten($ui-base-color, 4%); + background-color: opacify($lighter-text-color, 0.04); background-size: cover; background-position: center; position: relative; @@ -392,7 +392,7 @@ a { display: block; - color: $ui-base-color; + color: $inverted-text-color; text-decoration: none; text-overflow: ellipsis; overflow: hidden; @@ -414,7 +414,7 @@ } .username { - color: lighten($ui-base-color, 34%); + color: $lighter-text-color; font-size: 14px; font-weight: 400; } @@ -422,7 +422,7 @@ .account__header__content { padding: 10px 15px; padding-top: 15px; - color: lighten($ui-base-color, 26%); + color: transparentize($lighter-text-color, 0.1); word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; @@ -434,7 +434,7 @@ .nothing-here { width: 100%; display: block; - color: $ui-primary-color; + color: $lighter-text-color; font-size: 14px; font-weight: 500; text-align: center; @@ -493,7 +493,7 @@ span { font-size: 14px; - color: $ui-primary-color; + color: $inverted-text-color; } } @@ -508,7 +508,7 @@ .account__header__content { font-size: 14px; - color: $ui-base-color; + color: $darker-text-color; } } @@ -522,18 +522,18 @@ display: inline-block; padding: 15px; text-decoration: none; - color: $ui-highlight-color; + color: $highlight-text-color; text-transform: uppercase; font-weight: 500; &:hover, &:active, &:focus { - color: lighten($ui-highlight-color, 8%); + color: lighten($highlight-text-color, 8%); } &.active { - color: $ui-base-color; + color: $inverted-text-color; cursor: default; } } @@ -586,19 +586,19 @@ font-weight: 500; text-align: center; width: 94px; - color: $ui-secondary-color; + color: opacify($darker-text-color, 0.1); background: rgba(darken($ui-base-color, 8%), 0.5); } td { - color: $ui-primary-color; + color: $darker-text-color; text-align: center; width: 100%; padding-left: 0; } a { - color: $ui-highlight-color; + color: $highlight-text-color; text-decoration: none; &:hover, diff --git a/app/javascript/styles/mastodon/admin.scss b/app/javascript/styles/mastodon/admin.scss index 6bd6590301..348f72078e 100644 --- a/app/javascript/styles/mastodon/admin.scss +++ b/app/javascript/styles/mastodon/admin.scss @@ -33,7 +33,7 @@ a { display: block; padding: 15px; - color: rgba($primary-text-color, 0.7); + color: $darker-text-color; text-decoration: none; transition: all 200ms linear; border-radius: 4px 0 0 4px; @@ -90,7 +90,7 @@ padding-left: 25px; h2 { - color: $ui-secondary-color; + color: $primary-text-color; font-size: 24px; line-height: 28px; font-weight: 400; @@ -98,7 +98,7 @@ } h3 { - color: $ui-secondary-color; + color: $primary-text-color; font-size: 20px; line-height: 28px; font-weight: 400; @@ -109,7 +109,7 @@ text-transform: uppercase; font-size: 13px; font-weight: 500; - color: $ui-primary-color; + color: $primary-text-color; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid lighten($ui-base-color, 8%); @@ -117,7 +117,7 @@ h6 { font-size: 16px; - color: $ui-secondary-color; + color: $primary-text-color; line-height: 28px; font-weight: 400; } @@ -125,7 +125,7 @@ & > p { font-size: 14px; line-height: 18px; - color: $ui-secondary-color; + color: $darker-text-color; margin-bottom: 20px; strong { @@ -153,10 +153,10 @@ } .muted-hint { - color: $ui-primary-color; + color: $darker-text-color; a { - color: $ui-highlight-color; + color: $highlight-text-color; } } @@ -253,7 +253,7 @@ a { display: inline-block; - color: rgba($primary-text-color, 0.7); + color: $darker-text-color; text-decoration: none; text-transform: uppercase; font-size: 12px; @@ -266,7 +266,7 @@ } &.selected { - color: $ui-highlight-color; + color: $highlight-text-color; border-bottom: 2px solid $ui-highlight-color; } } @@ -291,7 +291,7 @@ font-weight: 500; font-size: 14px; line-height: 18px; - color: $ui-secondary-color; + color: $primary-text-color; @each $lang in $cjk-langs { &:lang(#{$lang}) { @@ -348,7 +348,7 @@ padding: 7px 4px; margin-bottom: 10px; font-size: 16px; - color: $ui-base-color; + color: $inverted-text-color; display: block; width: 100%; outline: 0; @@ -402,7 +402,7 @@ font-size: 14px; a { - color: $classic-highlight-color; + color: $highlight-text-color; text-decoration: none; &:hover { @@ -425,7 +425,7 @@ align-items: center; padding: 10px; background: $ui-base-color; - color: $ui-primary-color; + color: $darker-text-color; border-radius: 4px 4px 0 0; font-size: 14px; position: relative; @@ -452,14 +452,14 @@ } &__timestamp { - color: lighten($ui-base-color, 34%); + color: $darker-text-color; } &__extras { background: lighten($ui-base-color, 6%); border-radius: 0 0 4px 4px; padding: 10px; - color: $ui-primary-color; + color: $darker-text-color; font-family: 'mastodon-font-monospace', monospace; font-size: 12px; word-wrap: break-word; @@ -469,7 +469,7 @@ &__icon { font-size: 28px; margin-right: 10px; - color: lighten($ui-base-color, 34%); + color: $darker-text-color; } &__icon__overlay { @@ -485,7 +485,7 @@ } &.negative { - background: $error-red; + background: lighten($error-red, 12%); } &.neutral { @@ -496,17 +496,17 @@ a, .username, .target { - color: $ui-secondary-color; + color: $primary-text-color; text-decoration: none; font-weight: 500; } .diff-old { - color: $error-red; + color: lighten($error-red, 12%); } .diff-neutral { - color: $ui-secondary-color; + color: $darker-text-color; } .diff-new { diff --git a/app/javascript/styles/mastodon/basics.scss b/app/javascript/styles/mastodon/basics.scss index bec0d4d91a..c52e069be6 100644 --- a/app/javascript/styles/mastodon/basics.scss +++ b/app/javascript/styles/mastodon/basics.scss @@ -75,7 +75,7 @@ body { &.error { position: absolute; text-align: center; - color: $ui-primary-color; + color: $darker-text-color; background: $ui-base-color; width: 100%; height: 100%; diff --git a/app/javascript/styles/mastodon/boost.scss b/app/javascript/styles/mastodon/boost.scss index 31053decce..8e11cb5960 100644 --- a/app/javascript/styles/mastodon/boost.scss +++ b/app/javascript/styles/mastodon/boost.scss @@ -6,13 +6,13 @@ } button.icon-button i.fa-retweet { - background-image: url("data:image/svg+xml;utf8,"); + background-image: url("data:image/svg+xml;utf8,"); &:hover { - background-image: url("data:image/svg+xml;utf8,"); + background-image: url("data:image/svg+xml;utf8,"); } } button.icon-button.disabled i.fa-retweet { - background-image: url("data:image/svg+xml;utf8,"); + background-image: url("data:image/svg+xml;utf8,"); } diff --git a/app/javascript/styles/mastodon/compact_header.scss b/app/javascript/styles/mastodon/compact_header.scss index 90d98cc8c5..83ac7a8d04 100644 --- a/app/javascript/styles/mastodon/compact_header.scss +++ b/app/javascript/styles/mastodon/compact_header.scss @@ -2,7 +2,7 @@ h1 { font-size: 24px; line-height: 28px; - color: $ui-primary-color; + color: $primary-text-color; font-weight: 500; margin-bottom: 20px; padding: 0 10px; @@ -20,7 +20,7 @@ small { font-weight: 400; - color: $ui-secondary-color; + color: $darker-text-color; } img { diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 96112d84a7..cdf3a9daa7 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -4,7 +4,7 @@ } .button { - background-color: darken($ui-highlight-color, 3%); + background-color: $ui-highlight-color; border: 10px none; border-radius: 4px; box-sizing: border-box; @@ -31,7 +31,7 @@ &:active, &:focus, &:hover { - background-color: lighten($ui-highlight-color, 7%); + background-color: lighten($ui-highlight-color, 4%); transition: all 200ms ease-out; } @@ -52,7 +52,7 @@ } &.button-alternative { - color: $ui-base-color; + color: $inverted-text-color; background: $ui-primary-color; &:active, @@ -98,26 +98,10 @@ position: relative; } -.column-icon { - background: lighten($ui-base-color, 4%); - color: $ui-primary-color; - cursor: pointer; - font-size: 16px; - padding: 15px; - position: absolute; - right: 0; - top: -48px; - z-index: 3; - - &:hover { - color: lighten($ui-primary-color, 7%); - } -} - .icon-button { display: inline-block; padding: 0; - color: $ui-base-lighter-color; + color: $action-button-color; border: none; background: transparent; cursor: pointer; @@ -126,17 +110,17 @@ &:hover, &:active, &:focus { - color: lighten($ui-base-color, 33%); + color: lighten($action-button-color, 7%); transition: color 200ms ease-out; } &.disabled { - color: lighten($ui-base-color, 13%); + color: darken($action-button-color, 13%); cursor: default; } &.active { - color: $ui-highlight-color; + color: $highlight-text-color; } &::-moz-focus-inner { @@ -150,23 +134,23 @@ } &.inverted { - color: lighten($ui-base-color, 33%); + color: $lighter-text-color; &:hover, &:active, &:focus { - color: $ui-base-lighter-color; + color: transparentize($lighter-text-color, 0.07); } &.disabled { - color: $ui-primary-color; + color: opacify($lighter-text-color, 0.07); } &.active { - color: $ui-highlight-color; + color: $highlight-text-color; &.disabled { - color: lighten($ui-highlight-color, 13%); + color: opacify($lighter-text-color, 0.13); } } } @@ -185,7 +169,7 @@ } .text-icon-button { - color: lighten($ui-base-color, 33%); + color: $lighter-text-color; border: none; background: transparent; cursor: pointer; @@ -199,17 +183,17 @@ &:hover, &:active, &:focus { - color: $ui-base-lighter-color; + color: opacify($lighter-text-color, 0.07); transition: color 200ms ease-out; } &.disabled { - color: lighten($ui-base-color, 13%); + color: transparentize($lighter-text-color, 0.2); cursor: default; } &.active { - color: $ui-highlight-color; + color: $highlight-text-color; } &::-moz-focus-inner { @@ -228,25 +212,6 @@ transform-origin: 50% 0; } -.dropdown--active .icon-button { - color: $ui-highlight-color; -} - -.dropdown--active::after { - @media screen and (min-width: 631px) { - content: ""; - display: block; - position: absolute; - width: 0; - height: 0; - border-style: solid; - border-width: 0 4.5px 7.8px; - border-color: transparent transparent $ui-secondary-color; - bottom: 8px; - right: 104px; - } -} - .invisible { font-size: 0; line-height: 0; @@ -271,15 +236,11 @@ } } -.lightbox .icon-button { - color: $ui-base-color; -} - .compose-form { padding: 10px; .compose-form__warning { - color: darken($ui-secondary-color, 65%); + color: $inverted-text-color; margin-bottom: 15px; background: $ui-primary-color; box-shadow: 0 2px 6px rgba($base-shadow-color, 0.3); @@ -289,7 +250,7 @@ font-weight: 400; strong { - color: darken($ui-secondary-color, 65%); + color: $inverted-text-color; font-weight: 500; @each $lang in $cjk-langs { @@ -300,7 +261,7 @@ } a { - color: darken($ui-primary-color, 33%); + color: $lighter-text-color; font-weight: 500; text-decoration: underline; @@ -333,7 +294,7 @@ box-sizing: border-box; width: 100%; margin: 0; - color: $ui-base-color; + color: $inverted-text-color; background: $simple-background-color; padding: 10px; font-family: inherit; @@ -378,7 +339,7 @@ box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4); background: $ui-secondary-color; border-radius: 0 0 4px 4px; - color: $ui-base-color; + color: $lighter-text-color; font-size: 14px; padding: 6px; @@ -419,11 +380,11 @@ } .autosuggest-account .display-name__account { - color: lighten($ui-base-color, 36%); + color: $lighter-text-color; } .compose-form__modifiers { - color: $ui-base-color; + color: $inverted-text-color; font-family: inherit; font-size: 14px; background: $simple-background-color; @@ -454,7 +415,7 @@ .icon-button { flex: 0 1 auto; - color: $ui-secondary-color; + color: $action-button-color; font-size: 14px; font-weight: 500; padding: 10px; @@ -463,7 +424,7 @@ &:hover, &:focus, &:active { - color: lighten($ui-secondary-color, 4%); + color: lighten($action-button-color, 7%); } } @@ -486,7 +447,7 @@ input { background: transparent; - color: $ui-secondary-color; + color: $primary-text-color; border: 0; padding: 0; margin: 0; @@ -501,7 +462,7 @@ &::placeholder { opacity: 0.54; - color: $ui-secondary-color; + color: $darker-text-color; } } @@ -563,7 +524,7 @@ font-family: 'mastodon-font-sans-serif', sans-serif; font-size: 14px; font-weight: 600; - color: lighten($ui-base-color, 12%); + color: $lighter-text-color; &.character-counter--over { color: $warning-red; @@ -617,7 +578,7 @@ } .reply-indicator__display-name { - color: $ui-base-color; + color: $lighter-text-color; display: block; max-width: 100%; line-height: 24px; @@ -679,7 +640,7 @@ text-decoration: underline; .fa { - color: lighten($ui-base-color, 40%); + color: lighten($action-button-color, 7%); } } @@ -694,15 +655,15 @@ } .fa { - color: lighten($ui-base-color, 30%); + color: $action-button-color; } } .status__content__spoiler-link { - background: lighten($ui-base-color, 30%); + background: $action-button-color; &:hover { - background: lighten($ui-base-color, 33%); + background: lighten($action-button-color, 7%); text-decoration: none; } } @@ -721,7 +682,7 @@ border-radius: 2px; background: transparent; border: 0; - color: lighten($ui-base-color, 8%); + color: $lighter-text-color; font-weight: 700; font-size: 11px; padding: 0 6px; @@ -784,36 +745,32 @@ &.status-direct { background: lighten($ui-base-color, 8%); - - .icon-button.disabled { - color: lighten($ui-base-color, 16%); - } } &.light { .status__relative-time { - color: $ui-primary-color; + color: $lighter-text-color; } .status__display-name { - color: $ui-base-color; + color: $inverted-text-color; } .display-name { strong { - color: $ui-base-color; + color: $inverted-text-color; } span { - color: $ui-primary-color; + color: $lighter-text-color; } } .status__content { - color: $ui-base-color; + color: $inverted-text-color; a { - color: $ui-highlight-color; + color: $highlight-text-color; } a.status__content__spoiler-link { @@ -833,19 +790,19 @@ background: transparent; .icon-button.disabled { - color: lighten($ui-base-color, 13%); + color: lighten($action-button-color, 13%); } } } .status__relative-time { - color: $ui-base-lighter-color; + color: $darker-text-color; float: right; font-size: 14px; } .status__display-name { - color: $ui-base-lighter-color; + color: $darker-text-color; } .status__info .status__display-name { @@ -896,14 +853,14 @@ .status__prepend { margin-left: 68px; - color: $ui-base-lighter-color; + color: $darker-text-color; padding: 8px 0; padding-bottom: 2px; font-size: 14px; position: relative; .status__display-name strong { - color: $ui-base-lighter-color; + color: $darker-text-color; } > span { @@ -965,7 +922,7 @@ .detailed-status__meta { margin-top: 15px; - color: $ui-base-lighter-color; + color: $darker-text-color; font-size: 14px; line-height: 18px; } @@ -993,11 +950,11 @@ } .reply-indicator__content { - color: $ui-base-color; + color: $inverted-text-color; font-size: 14px; a { - color: lighten($ui-base-color, 20%); + color: $lighter-text-color; } } @@ -1032,7 +989,7 @@ .account__display-name { flex: 1 1 auto; display: block; - color: $ui-primary-color; + color: $darker-text-color; overflow: hidden; text-decoration: none; font-size: 14px; @@ -1102,7 +1059,7 @@ } .account__header__username { - color: $ui-primary-color; + color: $darker-text-color; } } @@ -1112,7 +1069,7 @@ } .account__header__content { - color: $ui-secondary-color; + color: $darker-text-color; } .account__header__display-name { @@ -1127,7 +1084,7 @@ } .account__header__username { - color: $ui-highlight-color; + color: $highlight-text-color; font-size: 14px; font-weight: 400; display: block; @@ -1140,7 +1097,7 @@ .account__disclaimer { padding: 10px; border-top: 1px solid lighten($ui-base-color, 8%); - color: $ui-base-lighter-color; + color: $darker-text-color; strong { font-weight: 500; @@ -1166,7 +1123,7 @@ } .account__header__content { - color: $ui-primary-color; + color: $darker-text-color; font-size: 14px; font-weight: 400; overflow: hidden; @@ -1243,7 +1200,7 @@ display: block; text-transform: uppercase; font-size: 11px; - color: $ui-primary-color; + color: $darker-text-color; } strong { @@ -1258,10 +1215,6 @@ } } } - - abbr { - color: $ui-base-lighter-color; - } } .account__header__avatar { @@ -1331,7 +1284,7 @@ } .detailed-status__display-name { - color: $ui-secondary-color; + color: $darker-text-color; display: block; line-height: 24px; margin-bottom: 15px; @@ -1366,11 +1319,11 @@ .muted { .status__content p, .status__content a { - color: $ui-base-lighter-color; + color: $darker-text-color; } .status__display-name strong { - color: $ui-base-lighter-color; + color: $darker-text-color; } .status__avatar { @@ -1378,11 +1331,11 @@ } a.status__content__spoiler-link { - background: $ui-base-lighter-color; + background: $darker-text-color; color: lighten($ui-base-color, 4%); &:hover { - background: lighten($ui-base-color, 29%); + background: transparentize($darker-text-color, 0.07); text-decoration: none; } } @@ -1398,7 +1351,7 @@ position: relative; .fa { - color: $ui-highlight-color; + color: $highlight-text-color; } > span { @@ -1501,7 +1454,7 @@ display: flex; flex-shrink: 0; cursor: default; - color: $ui-primary-color; + color: $darker-text-color; strong { color: $primary-text-color; @@ -1609,7 +1562,7 @@ box-sizing: border-box; text-decoration: none; background: $ui-secondary-color; - color: $ui-base-color; + color: $inverted-text-color; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -1618,7 +1571,7 @@ &:hover, &:active { background: $ui-highlight-color; - color: $ui-secondary-color; + color: $primary-text-color; outline: 0; } } @@ -1660,7 +1613,7 @@ box-sizing: border-box; text-decoration: none; background: $ui-secondary-color; - color: $ui-base-color; + color: $inverted-text-color; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -1671,7 +1624,7 @@ &:hover { background: $ui-highlight-color; - color: $ui-secondary-color; + color: $primary-text-color; } } } @@ -1683,7 +1636,7 @@ .static-content { padding: 10px; padding-top: 20px; - color: $ui-base-lighter-color; + color: $darker-text-color; h1 { font-size: 16px; @@ -1935,8 +1888,8 @@ } &.active { - border-bottom: 2px solid $ui-highlight-color; - color: $ui-highlight-color; + border-bottom: 2px solid $highlight-text-color; + color: $highlight-text-color; } &:hover, @@ -1991,7 +1944,7 @@ .column-back-button { background: lighten($ui-base-color, 4%); - color: $ui-highlight-color; + color: $highlight-text-color; cursor: pointer; flex: 0 0 auto; font-size: 16px; @@ -2010,7 +1963,7 @@ background: lighten($ui-base-color, 4%); border: 0; font-family: inherit; - color: $ui-highlight-color; + color: $highlight-text-color; cursor: pointer; white-space: nowrap; font-size: 16px; @@ -2182,7 +2135,7 @@ .column-subheading { background: $ui-base-color; - color: $ui-base-lighter-color; + color: $darker-text-color; padding: 8px 20px; font-size: 12px; font-weight: 500; @@ -2205,11 +2158,11 @@ flex: 1 0 auto; p { - color: $ui-secondary-color; + color: $darker-text-color; } a { - color: $ui-base-lighter-color; + color: opacify($darker-text-color, 0.07); } } @@ -2235,7 +2188,7 @@ } .setting-text { - color: $ui-primary-color; + color: $darker-text-color; background: transparent; border: none; border-bottom: 2px solid $ui-primary-color; @@ -2249,23 +2202,12 @@ &:focus, &:active { color: $primary-text-color; - border-bottom-color: $ui-highlight-color; + border-bottom-color: $highlight-text-color; } @media screen and (max-width: 600px) { font-size: 16px; } - - &.light { - color: $ui-base-color; - border-bottom: 2px solid lighten($ui-base-color, 27%); - - &:focus, - &:active { - color: $ui-base-color; - border-bottom-color: $ui-highlight-color; - } - } } .no-reduce-motion button.icon-button i.fa-retweet { @@ -2288,12 +2230,12 @@ } .reduce-motion button.icon-button i.fa-retweet { - color: $ui-base-lighter-color; + color: $action-button-color; transition: color 100ms ease-in; } .reduce-motion button.icon-button.active i.fa-retweet { - color: $ui-highlight-color; + color: $highlight-text-color; } .status-card { @@ -2301,7 +2243,7 @@ font-size: 14px; border: 1px solid lighten($ui-base-color, 8%); border-radius: 4px; - color: $ui-base-lighter-color; + color: $darker-text-color; margin-top: 14px; text-decoration: none; overflow: hidden; @@ -2439,7 +2381,7 @@ a.status-card { .load-more { display: block; - color: $ui-base-lighter-color; + color: $darker-text-color; background-color: transparent; border: 0; font-size: inherit; @@ -2463,7 +2405,7 @@ a.status-card { text-align: center; font-size: 16px; font-weight: 500; - color: lighten($ui-base-color, 16%); + color: opacify($darker-text-color, 0.07); background: $ui-base-color; cursor: default; display: flex; @@ -2503,7 +2445,7 @@ a.status-card { strong { display: block; margin-bottom: 10px; - color: lighten($ui-base-color, 34%); + color: $darker-text-color; } span { @@ -2561,15 +2503,15 @@ a.status-card { } & > .column-header__back-button { - color: $ui-highlight-color; + color: $highlight-text-color; } &.active { - box-shadow: 0 1px 0 rgba($ui-highlight-color, 0.3); + box-shadow: 0 1px 0 rgba($highlight-text-color, 0.3); .column-header__icon { - color: $ui-highlight-color; - text-shadow: 0 0 10px rgba($ui-highlight-color, 0.4); + color: $highlight-text-color; + text-shadow: 0 0 10px rgba($highlight-text-color, 0.4); } } @@ -2615,7 +2557,7 @@ a.status-card { max-height: 70vh; overflow: hidden; overflow-y: auto; - color: $ui-primary-color; + color: $darker-text-color; transition: max-height 150ms ease-in-out, opacity 300ms linear; opacity: 1; @@ -2644,7 +2586,7 @@ a.status-card { .column-header__setting-btn { &:hover { - color: lighten($ui-primary-color, 4%); + color: $darker-text-color; text-decoration: underline; } } @@ -2678,7 +2620,7 @@ a.status-card { } .loading-indicator { - color: lighten($ui-base-color, 26%); + color: $darker-text-color; font-size: 12px; font-weight: 400; text-transform: uppercase; @@ -2763,7 +2705,7 @@ a.status-card { .media-spoiler { background: $base-overlay-background; - color: $ui-primary-color; + color: $darker-text-color; border: 0; padding: 0; width: 100%; @@ -2775,7 +2717,7 @@ a.status-card { &:active, &:focus { padding: 0; - color: lighten($ui-primary-color, 8%); + color: transparentize($darker-text-color, 0.07); } } @@ -2828,7 +2770,7 @@ a.status-card { } .column-settings__section { - color: $ui-primary-color; + color: $darker-text-color; cursor: default; display: block; font-weight: 500; @@ -2886,7 +2828,7 @@ a.status-card { .setting-toggle__label, .setting-meta__label { - color: $ui-primary-color; + color: $darker-text-color; display: inline-block; margin-bottom: 14px; margin-left: 8px; @@ -2894,13 +2836,12 @@ a.status-card { } .setting-meta__label { - color: $ui-primary-color; float: right; } .empty-column-indicator, .error-column { - color: lighten($ui-base-color, 20%); + color: $darker-text-color; background: $ui-base-color; text-align: center; padding: 20px; @@ -2917,7 +2858,7 @@ a.status-card { } a { - color: $ui-highlight-color; + color: $highlight-text-color; text-decoration: none; &:hover { @@ -3102,7 +3043,7 @@ a.status-card { display: flex; align-items: center; justify-content: center; - color: $ui-secondary-color; + color: $primary-text-color; font-size: 18px; font-weight: 500; border: 2px dashed $ui-base-lighter-color; @@ -3111,7 +3052,7 @@ a.status-card { .upload-progress { padding: 10px; - color: $ui-base-lighter-color; + color: $lighter-text-color; overflow: hidden; display: flex; @@ -3200,7 +3141,7 @@ a.status-card { } .privacy-dropdown__option { - color: $ui-base-color; + color: $lighter-text-color; padding: 10px; cursor: pointer; display: flex; @@ -3233,12 +3174,12 @@ a.status-card { .privacy-dropdown__option__content { flex: 1 1 auto; - color: darken($ui-primary-color, 24%); + color: $lighter-text-color; strong { font-weight: 500; display: block; - color: $ui-base-color; + color: $inverted-text-color; @each $lang in $cjk-langs { &:lang(#{$lang}) { @@ -3287,7 +3228,7 @@ a.status-card { padding-right: 30px; font-family: inherit; background: $ui-base-color; - color: $ui-primary-color; + color: $darker-text-color; font-size: 14px; margin: 0; @@ -3344,6 +3285,7 @@ a.status-card { .fa-times-circle { top: 11px; transform: rotate(0deg); + color: $action-button-color; cursor: pointer; &.active { @@ -3351,13 +3293,13 @@ a.status-card { } &:hover { - color: $primary-text-color; + color: lighten($action-button-color, 7%); } } } .search-results__header { - color: $ui-base-lighter-color; + color: $darker-text-color; background: lighten($ui-base-color, 2%); border-bottom: 1px solid darken($ui-base-color, 4%); padding: 15px 10px; @@ -3386,7 +3328,7 @@ a.status-card { span { display: inline-block; background: $ui-base-color; - color: $ui-primary-color; + color: $darker-text-color; font-size: 14px; font-weight: 500; padding: 10px; @@ -3405,13 +3347,13 @@ a.status-card { .search-results__hashtag { display: block; padding: 10px; - color: $ui-secondary-color; + color: darken($primary-text-color, 4%); text-decoration: none; &:hover, &:active, &:focus { - color: lighten($ui-secondary-color, 4%); + color: $primary-text-color; text-decoration: underline; } } @@ -3549,7 +3491,7 @@ a.status-card { } .media-modal__button { - background-color: $white; + background-color: $primary-text-color; height: 12px; width: 12px; border-radius: 6px; @@ -3560,7 +3502,7 @@ a.status-card { } .media-modal__button--active { - background-color: $ui-highlight-color; + background-color: $highlight-text-color; } .media-modal__close { @@ -3574,7 +3516,7 @@ a.status-card { .error-modal, .embed-modal { background: $ui-secondary-color; - color: $ui-base-color; + color: $inverted-text-color; border-radius: 8px; overflow: hidden; display: flex; @@ -3662,7 +3604,7 @@ a.status-card { .onboarding-modal__nav, .error-modal__nav { - color: darken($ui-secondary-color, 34%); + color: $lighter-text-color; border: 0; font-size: 14px; font-weight: 500; @@ -3676,18 +3618,18 @@ a.status-card { &:hover, &:focus, &:active { - color: darken($ui-secondary-color, 38%); + color: transparentize($lighter-text-color, 0.04); background-color: darken($ui-secondary-color, 16%); } &.onboarding-modal__done, &.onboarding-modal__next { - color: $ui-base-color; + color: $inverted-text-color; &:hover, &:focus, &:active { - color: darken($ui-base-color, 4%); + color: lighten($inverted-text-color, 4%); } } } @@ -3739,17 +3681,17 @@ a.status-card { h1 { font-size: 18px; font-weight: 500; - color: $ui-base-color; + color: $inverted-text-color; margin-bottom: 20px; } a { - color: $ui-highlight-color; + color: $highlight-text-color; &:hover, &:focus, &:active { - color: lighten($ui-highlight-color, 4%); + color: lighten($highlight-text-color, 4%); } } @@ -3759,7 +3701,7 @@ a.status-card { p { font-size: 16px; - color: lighten($ui-base-color, 8%); + color: $lighter-text-color; margin-top: 10px; margin-bottom: 10px; @@ -3770,7 +3712,7 @@ a.status-card { strong { font-weight: 500; background: $ui-base-color; - color: $ui-secondary-color; + color: $primary-text-color; border-radius: 4px; font-size: 14px; padding: 3px 6px; @@ -3822,7 +3764,7 @@ a.status-card { &__label { font-weight: 500; - color: $ui-base-color; + color: $inverted-text-color; margin-bottom: 5px; text-transform: uppercase; font-size: 12px; @@ -3830,7 +3772,7 @@ a.status-card { &__case { background: $ui-base-color; - color: $ui-secondary-color; + color: $primary-text-color; font-weight: 500; padding: 10px; border-radius: 4px; @@ -3847,7 +3789,7 @@ a.status-card { .figure { background: darken($ui-base-color, 8%); - color: $ui-secondary-color; + color: $darker-text-color; margin-bottom: 20px; border-radius: 4px; padding: 10px; @@ -3936,7 +3878,7 @@ a.status-card { .actions-modal, .mute-modal { background: lighten($ui-secondary-color, 8%); - color: $ui-base-color; + color: $inverted-text-color; border-radius: 8px; overflow: hidden; max-width: 90vw; @@ -3994,7 +3936,7 @@ a.status-card { & > div { flex: 1 1 auto; text-align: right; - color: lighten($ui-base-color, 33%); + color: $lighter-text-color; padding-right: 10px; } @@ -4081,7 +4023,7 @@ a.status-card { box-sizing: border-box; width: 100%; margin: 0; - color: $ui-base-color; + color: $inverted-text-color; background: $white; padding: 10px; font-family: inherit; @@ -4103,7 +4045,7 @@ a.status-card { margin-bottom: 24px; &__label { - color: $ui-base-color; + color: $inverted-text-color; font-size: 14px; } } @@ -4142,7 +4084,7 @@ a.status-card { li:not(:empty) { a { - color: $ui-base-color; + color: $inverted-text-color; display: flex; padding: 12px 16px; font-size: 15px; @@ -4178,14 +4120,14 @@ a.status-card { .confirmation-modal__cancel-button, .mute-modal__cancel-button { background-color: transparent; - color: darken($ui-secondary-color, 34%); + color: $lighter-text-color; font-size: 14px; font-weight: 500; &:hover, &:focus, &:active { - color: darken($ui-secondary-color, 38%); + color: transparentize($lighter-text-color, 0.04); } } } @@ -4218,7 +4160,7 @@ a.status-card { } .loading-bar { - background-color: $ui-highlight-color; + background-color: $highlight-text-color; height: 3px; position: absolute; top: 0; @@ -4266,7 +4208,7 @@ a.status-card { &__icon { flex: 0 0 auto; - color: $ui-base-lighter-color; + color: $darker-text-color; padding: 8px 18px; cursor: default; border-right: 1px solid lighten($ui-base-color, 8%); @@ -4296,7 +4238,7 @@ a.status-card { a { text-decoration: none; - color: $ui-base-lighter-color; + color: $darker-text-color; font-weight: 500; &:hover { @@ -4315,7 +4257,7 @@ a.status-card { } .fa { - color: $ui-base-lighter-color; + color: $darker-text-color; } } } @@ -4511,7 +4453,7 @@ a.status-card { z-index: 4; border: 0; background: $base-shadow-color; - color: $ui-primary-color; + color: $darker-text-color; transition: none; pointer-events: none; @@ -4522,7 +4464,7 @@ a.status-card { &:hover, &:active, &:focus { - color: lighten($ui-primary-color, 8%); + color: transparentize($darker-text-color, 0.07); } } @@ -4719,7 +4661,7 @@ a.status-card { background-size: cover; background-position: center; position: absolute; - color: $ui-primary-color; + color: $darker-text-color; text-decoration: none; border-radius: 4px; @@ -4727,7 +4669,7 @@ a.status-card { &:active, &:focus { outline: 0; - color: $ui-secondary-color; + color: transparentize($darker-text-color, 0.07); &::before { content: ""; @@ -4758,7 +4700,7 @@ a.status-card { a { display: block; flex: 1 1 auto; - color: $ui-primary-color; + color: $darker-text-color; padding: 15px 0; font-size: 14px; font-weight: 500; @@ -4767,7 +4709,7 @@ a.status-card { position: relative; &.active { - color: $ui-secondary-color; + color: transparentize($darker-text-color, 0.07); &::before, &::after { @@ -4802,12 +4744,12 @@ a.status-card { padding: 10px 14px; padding-bottom: 14px; margin-top: 10px; - color: $ui-primary-color; + color: $lighter-text-color; box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); h4 { text-transform: uppercase; - color: $ui-primary-color; + color: $lighter-text-color; font-size: 13px; font-weight: 500; margin-bottom: 10px; @@ -4823,7 +4765,7 @@ a.status-card { em { font-weight: 500; - color: $ui-base-color; + color: $inverted-text-color; } } @@ -4839,11 +4781,11 @@ noscript { div { font-size: 14px; margin: 30px auto; - color: $ui-secondary-color; + color: $primary-text-color; max-width: 400px; a { - color: $ui-highlight-color; + color: $highlight-text-color; text-decoration: underline; &:hover { @@ -4941,7 +4883,6 @@ noscript { } .embed-modal__html { - color: $ui-secondary-color; outline: 0; box-sizing: border-box; display: block; @@ -4950,7 +4891,7 @@ noscript { padding: 10px; font-family: 'mastodon-font-monospace', monospace; background: $ui-base-color; - color: $ui-primary-color; + color: $primary-text-color; font-size: 14px; margin: 0; margin-bottom: 15px; @@ -4993,7 +4934,7 @@ noscript { &__message { position: relative; margin-left: 58px; - color: $ui-base-lighter-color; + color: $darker-text-color; padding: 8px 0; padding-top: 0; padding-bottom: 4px; @@ -5201,7 +5142,7 @@ noscript { } th { - color: $ui-primary-color; + color: $darker-text-color; background: darken($ui-base-color, 4%); max-width: 120px; font-weight: 500; diff --git a/app/javascript/styles/mastodon/containers.scss b/app/javascript/styles/mastodon/containers.scss index e761f58eb2..8df2902d23 100644 --- a/app/javascript/styles/mastodon/containers.scss +++ b/app/javascript/styles/mastodon/containers.scss @@ -100,7 +100,7 @@ .name { flex: 1 1 auto; - color: $ui-secondary-color; + color: $darker-text-color; width: calc(100% - 88px); .username { diff --git a/app/javascript/styles/mastodon/emoji_picker.scss b/app/javascript/styles/mastodon/emoji_picker.scss index 4161cc0456..3620a6f54d 100644 --- a/app/javascript/styles/mastodon/emoji_picker.scss +++ b/app/javascript/styles/mastodon/emoji_picker.scss @@ -7,7 +7,7 @@ font-size: 13px; display: inline-block; - color: $ui-base-color; + color: $inverted-text-color; .emoji-mart-emoji { padding: 6px; @@ -36,7 +36,7 @@ display: flex; justify-content: space-between; padding: 0 6px; - color: $ui-primary-color; + color: $lighter-text-color; line-height: 0; } @@ -50,15 +50,15 @@ cursor: pointer; &:hover { - color: darken($ui-primary-color, 4%); + color: opacify($lighter-text-color, 0.04); } } .emoji-mart-anchor-selected { - color: darken($ui-highlight-color, 3%); + color: $highlight-text-color; &:hover { - color: darken($ui-highlight-color, 3%); + color: darken($highlight-text-color, 4%); } .emoji-mart-anchor-bar { @@ -72,7 +72,7 @@ left: 0; width: 100%; height: 3px; - background-color: darken($ui-highlight-color, 3%); + background-color: $highlight-text-color; } .emoji-mart-anchors { @@ -115,7 +115,7 @@ display: block; width: 100%; background: rgba($ui-secondary-color, 0.3); - color: $ui-primary-color; + color: $inverted-text-color; border: 1px solid $ui-secondary-color; border-radius: 4px; @@ -184,7 +184,7 @@ font-size: 14px; text-align: center; padding-top: 70px; - color: $ui-primary-color; + color: $lighter-text-color; .emoji-mart-category-label { display: none; diff --git a/app/javascript/styles/mastodon/footer.scss b/app/javascript/styles/mastodon/footer.scss index 2d953b34e7..ba2a06954e 100644 --- a/app/javascript/styles/mastodon/footer.scss +++ b/app/javascript/styles/mastodon/footer.scss @@ -2,7 +2,7 @@ text-align: center; margin-top: 30px; font-size: 12px; - color: darken($ui-secondary-color, 25%); + color: $darker-text-color; .domain { font-weight: 500; diff --git a/app/javascript/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.scss index 945579a9cb..3a3b4c3269 100644 --- a/app/javascript/styles/mastodon/forms.scss +++ b/app/javascript/styles/mastodon/forms.scss @@ -29,14 +29,14 @@ code { span.hint { display: block; - color: $ui-primary-color; + color: $darker-text-color; font-size: 12px; margin-top: 4px; } p.hint { margin-bottom: 15px; - color: $ui-primary-color; + color: $darker-text-color; &.subtle-hint { text-align: center; @@ -44,10 +44,10 @@ code { line-height: 18px; margin-top: 15px; margin-bottom: 0; - color: $ui-primary-color; + color: $darker-text-color; a { - color: $ui-highlight-color; + color: $highlight-text-color; } } } @@ -244,35 +244,35 @@ code { } &:focus:invalid { - border-bottom-color: $error-value-color; + border-bottom-color: lighten($error-red, 12%); } &:required:valid { - border-bottom-color: $valid-value-color; + border-bottom-color: lighten($error-red, 12%); } &:active, &:focus { - border-bottom-color: $ui-highlight-color; + border-bottom-color: $highlight-text-color; background: rgba($base-overlay-background, 0.1); } } .input.field_with_errors { label { - color: $error-value-color; + color: lighten($error-red, 12%); } input[type=text], input[type=email], input[type=password] { - border-bottom-color: $error-value-color; + border-bottom-color: lighten($error-red, 12%); } .error { display: block; font-weight: 500; - color: $error-value-color; + color: lighten($error-red, 12%); margin-top: 4px; } } @@ -356,7 +356,7 @@ code { padding: 7px 4px; padding-bottom: 9px; font-size: 16px; - color: $ui-base-lighter-color; + color: $darker-text-color; font-family: inherit; pointer-events: none; cursor: default; @@ -366,7 +366,7 @@ code { .flash-message { background: lighten($ui-base-color, 8%); - color: $ui-primary-color; + color: $darker-text-color; border-radius: 4px; padding: 15px 10px; margin-bottom: 30px; @@ -378,7 +378,6 @@ code { } .oauth-code { - color: $ui-secondary-color; outline: 0; box-sizing: border-box; display: block; @@ -387,7 +386,7 @@ code { padding: 10px; font-family: 'mastodon-font-monospace', monospace; background: $ui-base-color; - color: $ui-primary-color; + color: $primary-text-color; font-size: 14px; margin: 0; @@ -426,7 +425,7 @@ code { text-align: center; a { - color: $ui-primary-color; + color: $darker-text-color; text-decoration: none; &:hover { @@ -439,7 +438,7 @@ code { .follow-prompt { margin-bottom: 30px; text-align: center; - color: $ui-primary-color; + color: $darker-text-color; h2 { font-size: 16px; @@ -447,7 +446,7 @@ code { } strong { - color: $ui-secondary-color; + color: $primary-text-color; font-weight: 500; @each $lang in $cjk-langs { @@ -484,7 +483,7 @@ code { .qr-alternative { margin-bottom: 20px; - color: $ui-secondary-color; + color: $darker-text-color; flex: 150px; samp { @@ -569,7 +568,7 @@ code { .post-follow-actions { text-align: center; - color: $ui-primary-color; + color: $darker-text-color; div { margin-bottom: 4px; @@ -582,7 +581,7 @@ code { h4 { font-size: 16px; - color: $ui-base-lighter-color; + color: $primary-text-color; text-align: center; margin-bottom: 20px; border: 0; diff --git a/app/javascript/styles/mastodon/landing_strip.scss b/app/javascript/styles/mastodon/landing_strip.scss index ffa1e149da..651c06ced7 100644 --- a/app/javascript/styles/mastodon/landing_strip.scss +++ b/app/javascript/styles/mastodon/landing_strip.scss @@ -1,7 +1,7 @@ .landing-strip, .memoriam-strip { background: rgba(darken($ui-base-color, 7%), 0.8); - color: $ui-primary-color; + color: $darker-text-color; font-weight: 400; padding: 14px; border-radius: 4px; @@ -45,7 +45,7 @@ padding: 14px; border-radius: 4px; background: rgba(darken($ui-base-color, 7%), 0.8); - color: $ui-secondary-color; + color: $darker-text-color; font-weight: 400; margin-bottom: 20px; @@ -88,7 +88,7 @@ .fa { margin-right: 5px; - color: $ui-primary-color; + color: $darker-text-color; } } @@ -103,7 +103,7 @@ text-decoration: none; span { - color: $ui-highlight-color; + color: $highlight-text-color; font-weight: 400; } } diff --git a/app/javascript/styles/mastodon/stream_entries.scss b/app/javascript/styles/mastodon/stream_entries.scss index dfdc48d061..c39163ba8d 100644 --- a/app/javascript/styles/mastodon/stream_entries.scss +++ b/app/javascript/styles/mastodon/stream_entries.scss @@ -84,7 +84,7 @@ font-size: 14px; .status__relative-time { - color: $ui-primary-color; + color: $lighter-text-color; } } } @@ -93,7 +93,7 @@ display: block; max-width: 100%; padding-right: 25px; - color: $ui-base-color; + color: $lighter-text-color; } .status__avatar { @@ -123,7 +123,7 @@ strong { font-weight: 500; - color: $ui-base-color; + color: $inverted-text-color; @each $lang in $cjk-langs { &:lang(#{$lang}) { @@ -134,15 +134,15 @@ span { font-size: 14px; - color: $ui-primary-color; + color: $inverted-text-color; } } .status__content { - color: $ui-base-color; + color: $inverted-text-color; a { - color: $ui-highlight-color; + color: $highlight-text-color; } a.status__content__spoiler-link { @@ -180,7 +180,7 @@ strong { font-weight: 500; - color: $ui-base-color; + color: $inverted-text-color; @each $lang in $cjk-langs { &:lang(#{$lang}) { @@ -191,7 +191,7 @@ span { font-size: 14px; - color: $ui-primary-color; + color: $lighter-text-color; } } } @@ -207,10 +207,10 @@ } .status__content { - color: $ui-base-color; + color: $inverted-text-color; a { - color: $ui-highlight-color; + color: $highlight-text-color; } a.status__content__spoiler-link { @@ -225,7 +225,7 @@ .detailed-status__meta { margin-top: 15px; - color: $ui-primary-color; + color: $lighter-text-color; font-size: 14px; line-height: 18px; @@ -243,7 +243,7 @@ .status-card { border-color: lighten($ui-secondary-color, 4%); - color: darken($ui-primary-color, 4%); + color: $lighter-text-color; &:hover { background: lighten($ui-secondary-color, 4%); @@ -252,7 +252,7 @@ .status-card__title, .status-card__description { - color: $ui-base-color; + color: $inverted-text-color; } .status-card__image { @@ -262,7 +262,7 @@ .media-spoiler { background: $ui-base-color; - color: $ui-primary-color; + color: $darker-text-color; } .pre-header { @@ -270,7 +270,7 @@ padding-left: (48px + 14px * 2); padding-bottom: 0; margin-bottom: -4px; - color: $ui-primary-color; + color: $lighter-text-color; font-size: 14px; position: relative; @@ -280,7 +280,7 @@ } .status__display-name.muted strong { - color: $ui-primary-color; + color: $lighter-text-color; } } diff --git a/app/javascript/styles/mastodon/tables.scss b/app/javascript/styles/mastodon/tables.scss index 92870e6790..c12d84f1c0 100644 --- a/app/javascript/styles/mastodon/tables.scss +++ b/app/javascript/styles/mastodon/tables.scss @@ -30,7 +30,7 @@ } a { - color: $ui-highlight-color; + color: $highlight-text-color; text-decoration: underline; &:hover { @@ -68,7 +68,7 @@ a.table-action-link { display: inline-block; margin-right: 5px; padding: 0 10px; - color: rgba($primary-text-color, 0.7); + color: $darker-text-color; font-weight: 500; &:hover { diff --git a/app/javascript/styles/mastodon/variables.scss b/app/javascript/styles/mastodon/variables.scss index e456c27ee3..dc4e72a2ea 100644 --- a/app/javascript/styles/mastodon/variables.scss +++ b/app/javascript/styles/mastodon/variables.scss @@ -18,6 +18,11 @@ $base-overlay-background: $black !default; $base-border-color: $white !default; $simple-background-color: $white !default; $primary-text-color: $white !default; +$darker-text-color: rgba($primary-text-color, 0.7) !default; +$highlight-text-color: $classic-highlight-color !default; +$inverted-text-color: $black !default; +$lighter-text-color: rgba($inverted-text-color, 0.7) !default; +$action-button-color: #8d9ac2; $valid-value-color: $success-green !default; $error-value-color: $error-red !default; @@ -26,7 +31,7 @@ $ui-base-color: $classic-base-color !default; // Darkest $ui-base-lighter-color: lighten($ui-base-color, 26%) !default; // Lighter darkest $ui-primary-color: $classic-primary-color !default; // Lighter $ui-secondary-color: $classic-secondary-color !default; // Lightest -$ui-highlight-color: $classic-highlight-color !default; // Vibrant +$ui-highlight-color: #2b5fd9; // Language codes that uses CJK fonts $cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;