From 9edc5cafe444f0647c91b086f733903e15093260 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Sat, 5 May 2018 17:43:09 +0200 Subject: [Glitch] Improve styling of closed registrations message Port SCSS changes from 5acd5315f23b4472f31c4a0bb612b7356032defc to glitch-soc --- app/javascript/flavours/glitch/styles/about.scss | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) (limited to 'app/javascript/flavours/glitch') diff --git a/app/javascript/flavours/glitch/styles/about.scss b/app/javascript/flavours/glitch/styles/about.scss index d97e23696..8a7d3412d 100644 --- a/app/javascript/flavours/glitch/styles/about.scss +++ b/app/javascript/flavours/glitch/styles/about.scss @@ -194,6 +194,28 @@ $small-breakpoint: 960px; } } + .closed-registrations-message { + margin-top: 20px; + + &, + p { + text-align: center; + font-size: 12px; + line-height: 18px; + color: $ui-primary-color; + margin-bottom: 0; + + a { + color: $ui-highlight-color; + text-decoration: underline; + } + } + + p:last-child { + margin-bottom: 0; + } + } + em { display: inline; margin: 0; -- cgit From 390cfdef2e81f8d3a58c4a5e1d1656e8484f395d Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Sat, 5 May 2018 17:58:01 +0200 Subject: [Glitch] Update SCSS of admin and setting pages Port the SCSS changes from cb74c0cfe4aa89f9656c054253665ef4965b41df to glitch-soc --- app/javascript/flavours/glitch/styles/admin.scss | 10 ++++++++++ app/javascript/flavours/glitch/styles/forms.scss | 10 ---------- 2 files changed, 10 insertions(+), 10 deletions(-) (limited to 'app/javascript/flavours/glitch') diff --git a/app/javascript/flavours/glitch/styles/admin.scss b/app/javascript/flavours/glitch/styles/admin.scss index 3146a343d..23c9a6742 100644 --- a/app/javascript/flavours/glitch/styles/admin.scss +++ b/app/javascript/flavours/glitch/styles/admin.scss @@ -105,6 +105,16 @@ margin-bottom: 30px; } + h4 { + text-transform: uppercase; + font-size: 13px; + font-weight: 500; + color: $ui-primary-color; + padding-bottom: 8px; + margin-bottom: 8px; + border-bottom: 1px solid lighten($ui-base-color, 8%); + } + h6 { font-size: 16px; color: $ui-secondary-color; diff --git a/app/javascript/flavours/glitch/styles/forms.scss b/app/javascript/flavours/glitch/styles/forms.scss index 2bef53cff..ca6228612 100644 --- a/app/javascript/flavours/glitch/styles/forms.scss +++ b/app/javascript/flavours/glitch/styles/forms.scss @@ -22,16 +22,6 @@ code { margin-top: 4px; } - h4 { - text-transform: uppercase; - font-size: 13px; - font-weight: 500; - color: $ui-primary-color; - padding-bottom: 8px; - margin-bottom: 8px; - border-bottom: 1px solid lighten($ui-base-color, 8%); - } - p.hint { margin-bottom: 15px; color: $ui-primary-color; -- cgit From b3a236637e124f2f2e6f70af099cbedb13895b15 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Sat, 5 May 2018 17:58:46 +0200 Subject: [Glitch] Add color variables of texts for better accesibility Port 74dae9458d118b066cd74b16aab2aa9cafbf3fba and related to glitch-soc --- app/javascript/flavours/glitch/styles/about.scss | 64 +++++++-------- .../flavours/glitch/styles/accounts.scss | 36 ++++---- app/javascript/flavours/glitch/styles/admin.scss | 42 +++++----- app/javascript/flavours/glitch/styles/basics.scss | 2 +- .../flavours/glitch/styles/compact_header.scss | 4 +- .../glitch/styles/components/accounts.scss | 28 +++---- .../flavours/glitch/styles/components/boost.scss | 8 +- .../flavours/glitch/styles/components/columns.scss | 38 +++------ .../glitch/styles/components/composer.scss | 34 ++++---- .../flavours/glitch/styles/components/drawer.scss | 22 ++--- .../glitch/styles/components/emoji_picker.scss | 14 ++-- .../flavours/glitch/styles/components/index.scss | 96 ++++++++-------------- .../flavours/glitch/styles/components/lists.scss | 6 +- .../glitch/styles/components/local_settings.scss | 6 +- .../flavours/glitch/styles/components/media.scss | 8 +- .../glitch/styles/components/metadata.scss | 4 +- .../flavours/glitch/styles/components/modal.scss | 47 ++++++----- .../styles/components/regeneration_indicator.scss | 4 +- .../flavours/glitch/styles/components/search.scss | 10 +-- .../flavours/glitch/styles/components/status.scss | 52 ++++++------ .../flavours/glitch/styles/containers.scss | 2 +- app/javascript/flavours/glitch/styles/footer.scss | 2 +- app/javascript/flavours/glitch/styles/forms.scss | 33 ++++---- .../flavours/glitch/styles/landing_strip.scss | 8 +- .../flavours/glitch/styles/stream_entries.scss | 32 ++++---- app/javascript/flavours/glitch/styles/tables.scss | 4 +- .../flavours/glitch/styles/variables.scss | 15 +++- 27 files changed, 293 insertions(+), 328 deletions(-) (limited to 'app/javascript/flavours/glitch') diff --git a/app/javascript/flavours/glitch/styles/about.scss b/app/javascript/flavours/glitch/styles/about.scss index 8a7d3412d..55f31266f 100644 --- a/app/javascript/flavours/glitch/styles/about.scss +++ b/app/javascript/flavours/glitch/styles/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: lighten($darker-text-color, 10%); } h1 { @@ -234,14 +234,14 @@ $small-breakpoint: 960px; line-height: 30px; font-weight: 500; margin-bottom: 20px; - color: $ui-secondary-color; + color: $secondary-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: lighten($darker-text-color, 10%); } } @@ -251,7 +251,7 @@ $small-breakpoint: 960px; line-height: 26px; font-weight: 500; margin-bottom: 20px; - color: $ui-secondary-color; + color: $secondary-text-color; } h3 { @@ -260,7 +260,7 @@ $small-breakpoint: 960px; line-height: 24px; font-weight: 500; margin-bottom: 20px; - color: $ui-secondary-color; + color: $secondary-text-color; } h4 { @@ -269,7 +269,7 @@ $small-breakpoint: 960px; line-height: 24px; font-weight: 500; margin-bottom: 20px; - color: $ui-secondary-color; + color: $secondary-text-color; } h5 { @@ -278,7 +278,7 @@ $small-breakpoint: 960px; line-height: 24px; font-weight: 500; margin-bottom: 20px; - color: $ui-secondary-color; + color: $secondary-text-color; } h6 { @@ -287,7 +287,7 @@ $small-breakpoint: 960px; line-height: 24px; font-weight: 500; margin-bottom: 20px; - color: $ui-secondary-color; + color: $secondary-text-color; } ul, @@ -349,10 +349,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; } } @@ -400,7 +400,7 @@ $small-breakpoint: 960px; font-size: 14px; &:hover { - color: $ui-secondary-color; + color: $secondary-text-color; } } @@ -473,10 +473,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; } } @@ -512,7 +512,7 @@ $small-breakpoint: 960px; span { &:last-child { - color: $ui-secondary-color; + color: $secondary-text-color; } } @@ -543,7 +543,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%); @@ -554,7 +554,7 @@ $small-breakpoint: 960px; a, span { font-weight: 400; - color: darken($ui-primary-color, 10%); + color: darken($darker-text-color, 10%); } a { @@ -597,7 +597,7 @@ $small-breakpoint: 960px; .username { display: block; - color: $ui-primary-color; + color: $darker-text-color; } } } @@ -722,7 +722,7 @@ $small-breakpoint: 960px; } p a { - color: $ui-secondary-color; + color: $secondary-text-color; } h1 { @@ -731,10 +731,10 @@ $small-breakpoint: 960px; margin-bottom: 0; small { - color: $ui-primary-color; + color: $darker-text-color; span { - color: $ui-secondary-color; + color: $secondary-text-color; } } } @@ -841,7 +841,7 @@ $small-breakpoint: 960px; } a { - color: $ui-secondary-color; + color: $secondary-text-color; text-decoration: none; } } @@ -881,7 +881,7 @@ $small-breakpoint: 960px; .fa { display: block; - color: $ui-primary-color; + color: $darker-text-color; font-size: 48px; } } @@ -889,7 +889,7 @@ $small-breakpoint: 960px; .text { font-size: 16px; line-height: 30px; - color: $ui-primary-color; + color: $darker-text-color; h6 { font-size: inherit; @@ -907,10 +907,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; } } @@ -918,7 +918,7 @@ $small-breakpoint: 960px; .footer-links { padding-bottom: 50px; text-align: right; - color: $ui-base-lighter-color; + color: $dark-text-color; p { font-size: 14px; @@ -933,7 +933,7 @@ $small-breakpoint: 960px; &__footer { margin-top: 10px; text-align: center; - color: $ui-base-lighter-color; + color: $dark-text-color; p { font-size: 14px; diff --git a/app/javascript/flavours/glitch/styles/accounts.scss b/app/javascript/flavours/glitch/styles/accounts.scss index 082867f17..eff964e50 100644 --- a/app/javascript/flavours/glitch/styles/accounts.scss +++ b/app/javascript/flavours/glitch/styles/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; @@ -116,7 +116,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%); @@ -146,7 +146,7 @@ &.active { &::after { - border-bottom: 4px solid $ui-highlight-color; + border-bottom: 4px solid $highlight-text-color; opacity: 1; } } @@ -182,7 +182,7 @@ line-height: 18px; padding: 0 15px; text-align: center; - color: $ui-secondary-color; + color: $secondary-text-color; } @media screen and (max-width: 480px) { @@ -260,7 +260,7 @@ .current { background: $simple-background-color; border-radius: 100px; - color: $ui-base-color; + color: $inverted-text-color; cursor: default; margin: 0 10px; } @@ -272,7 +272,7 @@ .older, .newer { text-transform: uppercase; - color: $ui-secondary-color; + color: $secondary-text-color; } .older { @@ -297,7 +297,7 @@ .disabled { cursor: default; - color: lighten($ui-base-color, 10%); + color: lighten($inverted-text-color, 10%); } @media screen and (max-width: 700px) { @@ -336,7 +336,7 @@ width: 335px; background: $simple-background-color; border-radius: 4px; - color: $ui-base-color; + color: $inverted-text-color; margin: 0 5px 10px; position: relative; @@ -348,7 +348,7 @@ overflow: hidden; height: 100px; border-radius: 4px 4px 0 0; - background-color: lighten($ui-base-color, 4%); + background-color: lighten($inverted-text-color, 4%); background-size: cover; background-position: center; position: relative; @@ -399,7 +399,7 @@ a { display: block; - color: $ui-base-color; + color: $inverted-text-color; text-decoration: none; text-overflow: ellipsis; overflow: hidden; @@ -421,7 +421,7 @@ } .username { - color: lighten($ui-base-color, 34%); + color: $lighter-text-color; font-size: 14px; font-weight: 400; } @@ -429,7 +429,7 @@ .account__header__content { padding: 10px 15px; padding-top: 15px; - color: lighten($ui-base-color, 26%); + color: $lighter-text-color; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; @@ -441,7 +441,7 @@ .nothing-here { width: 100%; display: block; - color: $ui-primary-color; + color: $light-text-color; font-size: 14px; font-weight: 500; text-align: center; @@ -502,7 +502,7 @@ span { font-size: 14px; - color: $ui-primary-color; + color: $light-text-color; } } @@ -517,7 +517,7 @@ .account__header__content { font-size: 14px; - color: $ui-base-color; + color: $inverted-text-color; } } @@ -531,18 +531,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; } } diff --git a/app/javascript/flavours/glitch/styles/admin.scss b/app/javascript/flavours/glitch/styles/admin.scss index 23c9a6742..b077df145 100644 --- a/app/javascript/flavours/glitch/styles/admin.scss +++ b/app/javascript/flavours/glitch/styles/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: $secondary-text-color; font-size: 24px; line-height: 28px; font-weight: 400; @@ -98,7 +98,7 @@ } h3 { - color: $ui-secondary-color; + color: $secondary-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: $darker-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: $secondary-text-color; line-height: 28px; font-weight: 400; } @@ -125,7 +125,7 @@ & > p { font-size: 14px; line-height: 18px; - color: $ui-secondary-color; + color: $secondary-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; } } @@ -307,7 +307,7 @@ font-weight: 500; font-size: 14px; line-height: 18px; - color: $ui-secondary-color; + color: $secondary-text-color; @each $lang in $cjk-langs { &:lang(#{$lang}) { @@ -364,7 +364,7 @@ padding: 7px 4px; margin-bottom: 10px; font-size: 16px; - color: $ui-base-color; + color: $inverted-text-color; display: block; width: 100%; outline: 0; @@ -418,7 +418,7 @@ font-size: 14px; a { - color: $classic-highlight-color; + color: $highlight-text-color; text-decoration: none; &:hover { @@ -441,7 +441,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; @@ -468,14 +468,14 @@ } &__timestamp { - color: lighten($ui-base-color, 34%); + color: $dark-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; @@ -485,7 +485,7 @@ &__icon { font-size: 28px; margin-right: 10px; - color: lighten($ui-base-color, 34%); + color: $dark-text-color; } &__icon__overlay { @@ -501,7 +501,7 @@ } &.negative { - background: $error-red; + background: lighten($error-red, 12%); } &.neutral { @@ -512,17 +512,17 @@ a, .username, .target { - color: $ui-secondary-color; + color: $secondary-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: $secondary-text-color; } .diff-new { diff --git a/app/javascript/flavours/glitch/styles/basics.scss b/app/javascript/flavours/glitch/styles/basics.scss index 15fbb1c89..8e3db2572 100644 --- a/app/javascript/flavours/glitch/styles/basics.scss +++ b/app/javascript/flavours/glitch/styles/basics.scss @@ -71,7 +71,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/flavours/glitch/styles/compact_header.scss b/app/javascript/flavours/glitch/styles/compact_header.scss index 90d98cc8c..4980ab5f1 100644 --- a/app/javascript/flavours/glitch/styles/compact_header.scss +++ b/app/javascript/flavours/glitch/styles/compact_header.scss @@ -2,7 +2,7 @@ h1 { font-size: 24px; line-height: 28px; - color: $ui-primary-color; + color: $darker-text-color; font-weight: 500; margin-bottom: 20px; padding: 0 10px; @@ -20,7 +20,7 @@ small { font-weight: 400; - color: $ui-secondary-color; + color: $secondary-text-color; } img { diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss index a86120e08..84d3f6ade 100644 --- a/app/javascript/flavours/glitch/styles/components/accounts.scss +++ b/app/javascript/flavours/glitch/styles/components/accounts.scss @@ -7,7 +7,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; @@ -102,7 +102,7 @@ } .account__header__username { - color: $ui-primary-color; + color: $secondary-text-color; } } @@ -112,7 +112,7 @@ } .account__header__content { - color: $ui-secondary-color; + color: $secondary-text-color; } .account__header__display-name { @@ -127,7 +127,7 @@ } .account__header__username { - color: $ui-highlight-color; + color: $highlight-text-color; font-size: 14px; font-weight: 400; display: block; @@ -140,7 +140,7 @@ .account__disclaimer { padding: 10px; border-top: 1px solid lighten($ui-base-color, 8%); - color: $ui-base-lighter-color; + color: $dark-text-color; strong { font-weight: 500; @@ -166,7 +166,7 @@ } .account__header__content { - color: $ui-primary-color; + color: $darker-text-color; font-size: 14px; font-weight: 400; overflow: hidden; @@ -243,7 +243,7 @@ display: block; text-transform: uppercase; font-size: 11px; - color: $ui-primary-color; + color: $darker-text-color; } strong { @@ -260,7 +260,7 @@ } abbr { - color: $ui-base-lighter-color; + color: $highlight-text-color; } } @@ -292,12 +292,12 @@ margin-left: 42px; padding: 8px 0 0 26px; cursor: default; - color: $ui-primary-color; + color: $darker-text-color; font-size: 15px; position: relative; .fa { - color: $ui-highlight-color; + color: $highlight-text-color; } > span { @@ -328,7 +328,7 @@ } .column-settings__section { - color: $ui-primary-color; + color: $darker-text-color; cursor: default; display: block; font-weight: 500; @@ -439,7 +439,7 @@ a { display: block; flex: 1 1 auto; - color: $ui-primary-color; + color: $darker-text-color; padding: 15px 0; font-size: 14px; font-weight: 500; @@ -448,7 +448,7 @@ position: relative; &.active { - color: $ui-secondary-color; + color: $secondary-text-color; &::before, &::after { @@ -483,7 +483,7 @@ &__message { position: relative; margin-left: 58px; - color: $ui-base-lighter-color; + color: $dark-text-color; padding: 8px 0; padding-top: 0; padding-bottom: 4px; diff --git a/app/javascript/flavours/glitch/styles/components/boost.scss b/app/javascript/flavours/glitch/styles/components/boost.scss index b07b72f8e..66bc83bcb 100644 --- a/app/javascript/flavours/glitch/styles/components/boost.scss +++ b/app/javascript/flavours/glitch/styles/components/boost.scss @@ -6,23 +6,23 @@ } 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,"); } } // Disabled variant button.icon-button.disabled i.fa-retweet { &, &:hover { - background-image: url("data:image/svg+xml;utf8,"); + background-image: url("data:image/svg+xml;utf8,"); } } // Disabled variant for use with DMs .status-direct button.icon-button.disabled i.fa-retweet { &, &:hover { - background-image: url("data:image/svg+xml;utf8,"); + background-image: url("data:image/svg+xml;utf8,"); } } diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss index 34175685e..6847cf788 100644 --- a/app/javascript/flavours/glitch/styles/components/columns.scss +++ b/app/javascript/flavours/glitch/styles/components/columns.scss @@ -4,22 +4,6 @@ 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%); - } -} - .columns-area { display: flex; flex: 1 1 auto; @@ -136,7 +120,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; @@ -155,7 +139,7 @@ background: lighten($ui-base-color, 4%); border: 0; font-family: inherit; - color: $ui-highlight-color; + color: $highlight-text-color; cursor: pointer; flex: 0 0 auto; font-size: 16px; @@ -210,7 +194,7 @@ .column-subheading { background: $ui-base-color; - color: $ui-base-lighter-color; + color: $dark-text-color; padding: 8px 20px; font-size: 12px; font-weight: 500; @@ -266,14 +250,14 @@ } & > .column-header__back-button { - color: $ui-highlight-color; + color: $highlight-text-color; } &.active { box-shadow: 0 1px 0 rgba($ui-highlight-color, 0.3); .column-header__icon { - color: $ui-highlight-color; + color: $highlight-text-color; text-shadow: 0 0 10px rgba($ui-highlight-color, 0.4); } } @@ -316,13 +300,13 @@ .column-header__button { background: lighten($ui-base-color, 4%); border: 0; - color: $ui-primary-color; + color: $darker-text-color; cursor: pointer; font-size: 16px; padding: 0 15px; &:hover { - color: lighten($ui-primary-color, 7%); + color: lighten($darker-text-color, 7%); } &.active { @@ -368,7 +352,7 @@ 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; @@ -406,7 +390,7 @@ .column-header__setting-btn { &:hover { - color: lighten($ui-primary-color, 4%); + color: $darker-text-color; text-decoration: underline; } } @@ -438,7 +422,7 @@ .empty-column-indicator, .error-column { - color: lighten($ui-base-color, 20%); + color: $dark-text-color; background: $ui-base-color; text-align: center; padding: 20px; @@ -454,7 +438,7 @@ } a { - color: $ui-highlight-color; + color: $highlight-text-color; text-decoration: none; &:hover { diff --git a/app/javascript/flavours/glitch/styles/components/composer.scss b/app/javascript/flavours/glitch/styles/components/composer.scss index 7112400f4..dd21eae06 100644 --- a/app/javascript/flavours/glitch/styles/components/composer.scss +++ b/app/javascript/flavours/glitch/styles/components/composer.scss @@ -12,7 +12,7 @@ padding: 10px; width: 100%; outline: 0; - color: $ui-base-color; + color: $inverted-text-color; background: $simple-background-color; font-size: 14px; font-family: inherit; @@ -24,7 +24,7 @@ } .composer--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); @@ -34,7 +34,7 @@ font-weight: 400; a { - color: darken($ui-primary-color, 33%); + color: $lighter-text-color; font-weight: 500; text-decoration: underline; @@ -54,7 +54,7 @@ margin-bottom: 5px; overflow: hidden; - & > .account.small { color: $ui-base-color } + & > .account.small { color: $inverted-text-color; } & > .cancel { float: right; @@ -68,7 +68,7 @@ padding: 0 12px; font-size: 14px; line-height: 20px; - color: $ui-base-color; + color: $inverted-text-color; word-wrap: break-word; font-weight: 400; overflow: visible; @@ -82,7 +82,7 @@ } a { - color: lighten($ui-base-color, 20%); + color: $lighter-text-color; text-decoration: none; &:hover { text-decoration: underline } @@ -129,7 +129,7 @@ width: 100%; min-height: 100px; outline: 0; - color: $ui-base-color; + color: $inverted-text-color; background: $simple-background-color; font-size: 14px; font-family: inherit; @@ -160,7 +160,7 @@ margin: 2px 0 0 2px; width: 24px; height: 24px; - color: darken($ui-primary-color, 24%); + color: $lighter-text-color; font-size: 18px; line-height: 24px; text-align: center; @@ -176,7 +176,7 @@ border-radius: 0 0 4px 4px; padding: 6px; width: 100%; - color: $ui-base-color; + color: $inverted-text-color; background: $ui-secondary-color; box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4); font-size: 14px; @@ -214,14 +214,14 @@ & > .account.small { .display-name { - & > span { color: lighten($ui-base-color, 36%) } + & > span { color: $lighter-text-color } } } } .composer--upload_form { padding: 5px; - color: $ui-base-color; + color: $inverted-text-color; background: $simple-background-color; font-size: 14px; @@ -258,7 +258,7 @@ border: 0; padding: 10px; width: 100%; - color: $ui-secondary-color; + color: $secondary-text-color; background: linear-gradient(0deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent); font-size: 14px; font-family: inherit; @@ -271,7 +271,7 @@ &::placeholder { opacity: 0.54; - color: $ui-secondary-color; + color: $secondary-text-color; } } @@ -288,7 +288,7 @@ .composer--upload_form--progress { display: flex; padding: 10px; - color: $ui-base-lighter-color; + color: $darker-text-color; overflow: hidden; & > .fa { @@ -380,18 +380,18 @@ display: flex; align-items: center; padding: 10px; - color: $ui-base-color; + color: $inverted-text-color; cursor: pointer; & > .content { flex: 1 1 auto; - color: darken($ui-primary-color, 24%); + color: $lighter-text-color; &:not(:first-child) { margin-left: 10px } strong { display: block; - color: $ui-base-color; + color: $inverted-text-color; font-weight: 500; } } diff --git a/app/javascript/flavours/glitch/styles/components/drawer.scss b/app/javascript/flavours/glitch/styles/components/drawer.scss index 0ed8c392a..df239dba7 100644 --- a/app/javascript/flavours/glitch/styles/components/drawer.scss +++ b/app/javascript/flavours/glitch/styles/components/drawer.scss @@ -92,7 +92,7 @@ padding: 15px 5px 13px; height: 48px; flex: 1 1 auto; - color: $ui-primary-color; + color: $darker-text-color; text-align: center; text-decoration: none; cursor: pointer; @@ -127,7 +127,7 @@ width: 100%; height: 36px; outline: 0; - color: $ui-primary-color; + color: $darker-text-color; background: $ui-base-color; font-size: 14px; font-family: inherit; @@ -146,7 +146,7 @@ right: 10px; width: 18px; height: 18px; - color: $ui-secondary-color; + color: $secondary-text-color; font-size: 18px; line-height: 18px; z-index: 2; @@ -199,12 +199,12 @@ border-radius: 4px; padding: 10px 14px 14px 14px; box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); - color: $ui-primary-color; + color: $light-text-color; background: $simple-background-color; h4 { margin-bottom: 10px; - color: $ui-primary-color; + color: $light-text-color; font-size: 13px; font-weight: 500; text-transform: uppercase; @@ -214,14 +214,14 @@ li { padding: 4px 0 } em { - color: $ui-base-color; + color: $inverted-text-color; font-weight: 500; } } .drawer--account { padding: 10px; - color: $ui-primary-color; + color: $darker-text-color; & > a { color: inherit; @@ -235,7 +235,7 @@ & > .acct { display: block; - color: $primary-text-color; + color: $secondary-text-color; font-weight: 500; white-space: nowrap; overflow: hidden; @@ -258,7 +258,7 @@ & > header { border-bottom: 1px solid darken($ui-base-color, 4%); padding: 15px 10px; - color: $ui-base-lighter-color; + color: $dark-text-color; background: lighten($ui-base-color, 2%); font-size: 14px; font-weight: 500; @@ -270,13 +270,13 @@ & > .hashtag { display: block; padding: 10px; - color: $ui-secondary-color; + color: $secondary-text-color; text-decoration: none; &:hover, &:active, &:focus { - color: lighten($ui-secondary-color, 4%); + color: lighten($secondary-text-color, 4%); text-decoration: underline; } } diff --git a/app/javascript/flavours/glitch/styles/components/emoji_picker.scss b/app/javascript/flavours/glitch/styles/components/emoji_picker.scss index 4161cc045..dcc551c5b 100644 --- a/app/javascript/flavours/glitch/styles/components/emoji_picker.scss +++ b/app/javascript/flavours/glitch/styles/components/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: darken($lighter-text-color, 4%); } } .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 { @@ -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: $light-text-color; .emoji-mart-category-label { display: none; diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index afb54056c..6f3338605 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -52,7 +52,7 @@ } &.button-alternative { - color: $ui-base-color; + color: $inverted-text-color; background: $ui-primary-color; &:active, @@ -76,7 +76,7 @@ font-size: 16px; line-height: 36px; height: auto; - color: $ui-primary-color; + color: $darker-text-color; text-transform: none; background: transparent; padding: 3px 15px; @@ -87,7 +87,7 @@ &:focus, &:hover { border-color: lighten($ui-primary-color, 4%); - color: lighten($ui-primary-color, 4%); + color: lighten($darker-text-color, 4%); } } @@ -100,7 +100,7 @@ .icon-button { display: inline-block; padding: 0; - color: $ui-base-lighter-color; + color: $action-button-color; border: none; background: transparent; cursor: pointer; @@ -109,17 +109,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 { @@ -133,23 +133,23 @@ } &.inverted { - color: lighten($ui-base-color, 33%); + color: $lighter-text-color; &:hover, &:active, &:focus { - color: $ui-base-lighter-color; + color: darken($lighter-text-color, 7%); } &.disabled { - color: $ui-primary-color; + color: lighten($lighter-text-color, 7%); } &.active { - color: $ui-highlight-color; + color: $highlight-text-color; &.disabled { - color: lighten($ui-highlight-color, 13%); + color: lighten($highlight-text-color, 13%); } } } @@ -168,7 +168,7 @@ } .text-icon-button { - color: lighten($ui-base-color, 33%); + color: $lighter-text-color; border: none; background: transparent; cursor: pointer; @@ -182,17 +182,17 @@ &:hover, &:active, &:focus { - color: $ui-base-lighter-color; + color: darken($lighter-text-color, 7%); transition: color 200ms ease-out; } &.disabled { - color: lighten($ui-base-color, 13%); + color: lighten($lighter-text-color, 20%); cursor: default; } &.active { - color: $ui-highlight-color; + color: $highlight-text-color; } &::-moz-focus-inner { @@ -211,25 +211,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; @@ -254,10 +235,6 @@ } } -.lightbox .icon-button { - color: $ui-base-color; -} - .notification__favourite-icon-wrapper { left: 0; position: absolute; @@ -462,7 +439,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; @@ -471,7 +448,7 @@ &:hover, &:active { background: $ui-highlight-color; - color: $ui-secondary-color; + color: $secondary-text-color; outline: 0; } } @@ -513,7 +490,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; @@ -524,7 +501,7 @@ &:hover { background: $ui-highlight-color; - color: $ui-secondary-color; + color: $secondary-text-color; } } } @@ -536,7 +513,7 @@ .static-content { padding: 10px; padding-top: 20px; - color: $ui-base-lighter-color; + color: $dark-text-color; h1 { font-size: 16px; @@ -577,7 +554,7 @@ &.active { border-bottom: 2px solid $ui-highlight-color; - color: $ui-highlight-color; + color: $highlight-text-color; } &:hover, @@ -752,11 +729,11 @@ flex: 1 0 auto; p { - color: $ui-secondary-color; + color: $secondary-text-color; } a { - color: $ui-base-lighter-color; + color: $dark-text-color; } } @@ -793,7 +770,7 @@ } .setting-text { - color: $ui-primary-color; + color: $darker-text-color; background: transparent; border: none; border-bottom: 2px solid $ui-primary-color; @@ -815,12 +792,12 @@ } &.light { - color: $ui-base-color; + color: $inverted-text-color; border-bottom: 2px solid lighten($ui-base-color, 27%); &:focus, &:active { - color: $ui-base-color; + color: $inverted-text-color; border-bottom-color: $ui-highlight-color; } } @@ -845,17 +822,17 @@ } .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; } .load-more { display: block; - color: $ui-base-lighter-color; + color: $dark-text-color; background-color: transparent; border: 0; font-size: inherit; @@ -917,7 +894,7 @@ width: 30px; height: 30px; font-size: 20px; - color: $ui-primary-color; + color: $inverted-text-color; text-shadow: 0 0 5px black; display: flex; justify-content: center; @@ -945,7 +922,7 @@ } .loading-indicator { - color: lighten($ui-base-color, 26%); + color: $dark-text-color; font-size: 12px; font-weight: 400; text-transform: uppercase; @@ -1033,7 +1010,7 @@ .setting-toggle__label, .setting-meta__label { - color: $ui-primary-color; + color: $darker-text-color; display: inline-block; margin-bottom: 14px; margin-left: 8px; @@ -1041,7 +1018,6 @@ } .setting-meta__label { - color: $ui-primary-color; float: right; } @@ -1122,7 +1098,7 @@ display: flex; align-items: center; justify-content: center; - color: $ui-secondary-color; + color: $secondary-text-color; font-size: 18px; font-weight: 500; border: 2px dashed $ui-base-lighter-color; @@ -1158,11 +1134,11 @@ noscript { div { font-size: 14px; margin: 30px auto; - color: $ui-secondary-color; + color: $secondary-text-color; max-width: 400px; a { - color: $ui-highlight-color; + color: $highlight-text-color; text-decoration: underline; &:hover { diff --git a/app/javascript/flavours/glitch/styles/components/lists.scss b/app/javascript/flavours/glitch/styles/components/lists.scss index 85f416ceb..24efe60df 100644 --- a/app/javascript/flavours/glitch/styles/components/lists.scss +++ b/app/javascript/flavours/glitch/styles/components/lists.scss @@ -8,7 +8,7 @@ &__icon { flex: 0 0 auto; - color: $ui-base-lighter-color; + color: $dark-text-color; padding: 8px 18px; cursor: default; border-right: 1px solid lighten($ui-base-color, 8%); @@ -38,7 +38,7 @@ a { text-decoration: none; - color: $ui-base-lighter-color; + color: $dark-text-color; font-weight: 500; &:hover { @@ -57,7 +57,7 @@ } .fa { - color: $ui-base-lighter-color; + color: $dark-text-color; } } } diff --git a/app/javascript/flavours/glitch/styles/components/local_settings.scss b/app/javascript/flavours/glitch/styles/components/local_settings.scss index 16c8cf003..9e1606e99 100644 --- a/app/javascript/flavours/glitch/styles/components/local_settings.scss +++ b/app/javascript/flavours/glitch/styles/components/local_settings.scss @@ -3,7 +3,7 @@ display: flex; flex-direction: row; background: $ui-secondary-color; - color: $ui-base-color; + color: $inverted-text-color; border-radius: 8px; height: 80vh; width: 80vw; @@ -58,8 +58,8 @@ } .glitch.local-settings__navigation { - background: $primary-text-color; - color: $ui-base-color; + background: $simple-background-color; + color: $inverted-text-color; width: 200px; font-size: 15px; line-height: 20px; diff --git a/app/javascript/flavours/glitch/styles/components/media.scss b/app/javascript/flavours/glitch/styles/components/media.scss index 9d06a508e..90674612d 100644 --- a/app/javascript/flavours/glitch/styles/components/media.scss +++ b/app/javascript/flavours/glitch/styles/components/media.scss @@ -15,7 +15,7 @@ .media-spoiler { background: $base-overlay-background; - color: $ui-primary-color; + color: $darker-text-color; border: 0; width: 100%; height: 100%; @@ -23,7 +23,7 @@ &:hover, &:active, &:focus { - color: lighten($ui-primary-color, 8%); + color: lighten($darker-text-color, 8%); } .status__content > & { @@ -350,7 +350,7 @@ z-index: 4; border: 0; background: $base-shadow-color; - color: $ui-primary-color; + color: $darker-text-color; transition: none; pointer-events: none; @@ -361,7 +361,7 @@ &:hover, &:active, &:focus { - color: lighten($ui-primary-color, 8%); + color: lighten($darker-text-color, 7%); } } diff --git a/app/javascript/flavours/glitch/styles/components/metadata.scss b/app/javascript/flavours/glitch/styles/components/metadata.scss index d56de19ea..fd940026b 100644 --- a/app/javascript/flavours/glitch/styles/components/metadata.scss +++ b/app/javascript/flavours/glitch/styles/components/metadata.scss @@ -31,7 +31,7 @@ } th { - color: $ui-primary-color; + color: $darker-text-color; background: lighten($ui-base-color, 13%); max-width: 120px; @@ -46,7 +46,7 @@ background: $ui-base-color; a { - color: $ui-highlight-color; + color: $highlight-text-color; } } } diff --git a/app/javascript/flavours/glitch/styles/components/modal.scss b/app/javascript/flavours/glitch/styles/components/modal.scss index 2eb80aba8..6e4e741bd 100644 --- a/app/javascript/flavours/glitch/styles/components/modal.scss +++ b/app/javascript/flavours/glitch/styles/components/modal.scss @@ -44,7 +44,7 @@ .error-modal, .embed-modal { background: $ui-secondary-color; - color: $ui-base-color; + color: $inverted-text-color; border-radius: 8px; overflow: hidden; display: flex; @@ -132,7 +132,7 @@ .onboarding-modal__nav, .error-modal__nav { - color: darken($ui-secondary-color, 34%); + color: $lighter-text-color; border: 0; font-size: 14px; font-weight: 500; @@ -146,18 +146,18 @@ &:hover, &:focus, &:active { - color: darken($ui-secondary-color, 38%); + color: darken($lighter-text-color, 4%); 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%); } } } @@ -209,17 +209,17 @@ 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%); } } @@ -229,7 +229,7 @@ p { font-size: 16px; - color: lighten($ui-base-color, 8%); + color: $lighter-text-color; margin-top: 10px; margin-bottom: 10px; @@ -240,7 +240,7 @@ strong { font-weight: 500; background: $ui-base-color; - color: $ui-secondary-color; + color: $secondary-text-color; border-radius: 4px; font-size: 14px; padding: 3px 6px; @@ -292,7 +292,7 @@ &__label { font-weight: 500; - color: $ui-base-color; + color: $inverted-text-color; margin-bottom: 5px; text-transform: uppercase; font-size: 12px; @@ -300,7 +300,7 @@ &__case { background: $ui-base-color; - color: $ui-secondary-color; + color: $secondary-text-color; font-weight: 500; padding: 10px; border-radius: 4px; @@ -317,7 +317,7 @@ .figure { background: darken($ui-base-color, 8%); - color: $ui-secondary-color; + color: $secondary-text-color; margin-bottom: 20px; border-radius: 4px; padding: 10px; @@ -407,7 +407,7 @@ .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; @@ -464,7 +464,7 @@ & > div { flex: 1 1 auto; text-align: right; - color: lighten($ui-base-color, 33%); + color: $lighter-text-color; padding-right: 10px; } @@ -553,7 +553,7 @@ box-sizing: border-box; width: 100%; margin: 0; - color: $ui-base-color; + color: $inverted-text-color; background: $white; padding: 10px; font-family: inherit; @@ -575,7 +575,7 @@ margin-bottom: 24px; &__label { - color: $ui-base-color; + color: $inverted-text-color; font-size: 14px; } } @@ -628,7 +628,7 @@ li:not(:empty) { a { - color: $ui-base-color; + color: $inverted-text-color; display: flex; padding: 12px 16px; font-size: 15px; @@ -646,8 +646,8 @@ &:focus { &, button { - background: $ui-highlight-color; - color: $primary-text-color; + background: $ui-highlight-color; + color: $primary-text-color; } } @@ -666,14 +666,14 @@ .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: darken($lighter-text-color, 4%); } } } @@ -715,7 +715,6 @@ } .embed-modal__html { - color: $ui-secondary-color; outline: 0; box-sizing: border-box; display: block; @@ -724,7 +723,7 @@ 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; diff --git a/app/javascript/flavours/glitch/styles/components/regeneration_indicator.scss b/app/javascript/flavours/glitch/styles/components/regeneration_indicator.scss index 9c1873cdf..178df6652 100644 --- a/app/javascript/flavours/glitch/styles/components/regeneration_indicator.scss +++ b/app/javascript/flavours/glitch/styles/components/regeneration_indicator.scss @@ -2,7 +2,7 @@ text-align: center; font-size: 16px; font-weight: 500; - color: lighten($ui-base-color, 16%); + color: $dark-text-color; background: $ui-base-color; cursor: default; display: flex; @@ -42,7 +42,7 @@ strong { display: block; margin-bottom: 10px; - color: lighten($ui-base-color, 34%); + color: $dark-text-color; } span { diff --git a/app/javascript/flavours/glitch/styles/components/search.scss b/app/javascript/flavours/glitch/styles/components/search.scss index 546697176..91861ea19 100644 --- a/app/javascript/flavours/glitch/styles/components/search.scss +++ b/app/javascript/flavours/glitch/styles/components/search.scss @@ -12,7 +12,7 @@ padding-right: 30px; font-family: inherit; background: $ui-base-color; - color: $ui-primary-color; + color: $darker-text-color; font-size: 14px; margin: 0; @@ -47,7 +47,7 @@ font-size: 18px; width: 18px; height: 18px; - color: $ui-secondary-color; + color: $secondary-text-color; cursor: default; pointer-events: none; @@ -82,7 +82,7 @@ } .search-results__header { - color: $ui-base-lighter-color; + color: $dark-text-color; background: lighten($ui-base-color, 2%); border-bottom: 1px solid darken($ui-base-color, 4%); padding: 15px 10px; @@ -93,13 +93,13 @@ .search-results__hashtag { display: block; padding: 10px; - color: $ui-secondary-color; + color: $secondary-text-color; text-decoration: none; &:hover, &:active, &:focus { - color: lighten($ui-secondary-color, 4%); + color: lighten($secondary-text-color, 4%); text-decoration: underline; } } diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss index 2946b39e1..cc0a1c5b1 100644 --- a/app/javascript/flavours/glitch/styles/components/status.scss +++ b/app/javascript/flavours/glitch/styles/components/status.scss @@ -33,14 +33,14 @@ } a { - color: $ui-secondary-color; + color: $secondary-text-color; text-decoration: none; &:hover { text-decoration: underline; .fa { - color: lighten($ui-base-color, 40%); + color: lighten($dark-text-color, 7%); } } @@ -55,7 +55,7 @@ } .fa { - color: lighten($ui-base-color, 30%); + color: $dark-text-color; } } @@ -82,7 +82,7 @@ border-radius: 2px; background: lighten($ui-base-color, 30%); border: none; - color: lighten($ui-base-color, 8%); + color: $inverted-text-color; font-weight: 500; font-size: 11px; padding: 0 5px; @@ -177,36 +177,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 { @@ -285,7 +281,7 @@ background: transparent; .icon-button.disabled { - color: lighten($ui-base-color, 13%); + color: lighten($action-button-color, 13%); } } } @@ -295,7 +291,7 @@ margin-left: auto; padding-left: 18px; width: 120px; - color: $ui-base-lighter-color; + color: $dark-text-color; font-size: 14px; text-align: right; white-space: nowrap; @@ -305,7 +301,7 @@ .status__display-name { margin: 0 auto 0 0; - color: $ui-base-lighter-color; + color: $dark-text-color; overflow: hidden; } @@ -333,7 +329,7 @@ display: flex; align-items: center; height: 1em; - color: lighten($ui-base-color, 26%); + color: transparentize($lighter-text-color, 0.1); .status__visibility-icon { padding-left: 6px; @@ -382,13 +378,13 @@ .status__prepend { margin: -10px -10px 10px; - color: $ui-base-lighter-color; + color: $dark-text-color; padding: 8px 10px 0 68px; font-size: 14px; position: relative; .status__display-name strong { - color: $ui-base-lighter-color; + color: $dark-text-color; } > span { @@ -445,7 +441,7 @@ .detailed-status__meta { margin-top: 15px; - color: $ui-base-lighter-color; + color: $dark-text-color; font-size: 14px; line-height: 18px; } @@ -515,7 +511,7 @@ } .detailed-status__display-name { - color: $ui-secondary-color; + color: $secondary-text-color; display: block; line-height: 24px; margin-bottom: 15px; @@ -549,11 +545,11 @@ .muted { .status__content p, .status__content a { - color: $ui-base-lighter-color; + color: $dark-text-color; } .status__display-name strong { - color: $ui-base-lighter-color; + color: $dark-text-color; } .status__avatar { @@ -562,7 +558,7 @@ a.status__content__spoiler-link { background: $ui-base-lighter-color; - color: lighten($ui-base-color, 4%); + color: $inverted-text-color; &:hover { background: lighten($ui-base-color, 29%); @@ -584,7 +580,7 @@ font-size: 14px; border: 1px solid lighten($ui-base-color, 8%); border-radius: 4px; - color: $ui-base-lighter-color; + color: $dark-text-color; margin-top: 14px; text-decoration: none; overflow: hidden; @@ -626,7 +622,7 @@ display: block; font-weight: 500; margin-bottom: 5px; - color: $ui-primary-color; + color: $darker-text-color; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -639,7 +635,7 @@ } .status-card__description { - color: $ui-primary-color; + color: $darker-text-color; } .status-card__host { diff --git a/app/javascript/flavours/glitch/styles/containers.scss b/app/javascript/flavours/glitch/styles/containers.scss index e761f58eb..9d5ab66a4 100644 --- a/app/javascript/flavours/glitch/styles/containers.scss +++ b/app/javascript/flavours/glitch/styles/containers.scss @@ -100,7 +100,7 @@ .name { flex: 1 1 auto; - color: $ui-secondary-color; + color: $secondary-text-color; width: calc(100% - 88px); .username { diff --git a/app/javascript/flavours/glitch/styles/footer.scss b/app/javascript/flavours/glitch/styles/footer.scss index 2d953b34e..ba2a06954 100644 --- a/app/javascript/flavours/glitch/styles/footer.scss +++ b/app/javascript/flavours/glitch/styles/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/flavours/glitch/styles/forms.scss b/app/javascript/flavours/glitch/styles/forms.scss index ca6228612..8dbc557d4 100644 --- a/app/javascript/flavours/glitch/styles/forms.scss +++ b/app/javascript/flavours/glitch/styles/forms.scss @@ -17,14 +17,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; @@ -32,10 +32,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; } } } @@ -232,7 +232,7 @@ code { } &:focus:invalid { - border-bottom-color: $error-value-color; + border-bottom-color: lighten($error-red, 12%); } &:required:valid { @@ -241,26 +241,26 @@ code { &: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: $valid-value-color; } .error { display: block; font-weight: 500; - color: $error-value-color; + color: lighten($error-red, 12%); margin-top: 4px; } } @@ -339,7 +339,7 @@ code { padding: 7px 4px; padding-bottom: 9px; font-size: 16px; - color: $ui-base-lighter-color; + color: $dark-text-color; font-family: inherit; pointer-events: none; cursor: default; @@ -349,7 +349,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; @@ -361,7 +361,6 @@ code { } .oauth-code { - color: $ui-secondary-color; outline: 0; box-sizing: border-box; display: block; @@ -370,7 +369,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; @@ -409,7 +408,7 @@ code { text-align: center; a { - color: $ui-primary-color; + color: $darker-text-color; text-decoration: none; &:hover { @@ -422,7 +421,7 @@ code { .follow-prompt { margin-bottom: 30px; text-align: center; - color: $ui-primary-color; + color: $darker-text-color; h2 { font-size: 16px; @@ -430,7 +429,7 @@ code { } strong { - color: $ui-secondary-color; + color: $secondary-text-color; font-weight: 500; @each $lang in $cjk-langs { @@ -467,7 +466,7 @@ code { .qr-alternative { margin-bottom: 20px; - color: $ui-secondary-color; + color: $secondary-text-color; flex: 150px; samp { diff --git a/app/javascript/flavours/glitch/styles/landing_strip.scss b/app/javascript/flavours/glitch/styles/landing_strip.scss index ffa1e149d..86614b89b 100644 --- a/app/javascript/flavours/glitch/styles/landing_strip.scss +++ b/app/javascript/flavours/glitch/styles/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: $secondary-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/flavours/glitch/styles/stream_entries.scss b/app/javascript/flavours/glitch/styles/stream_entries.scss index 343e3591f..b505c1580 100644 --- a/app/javascript/flavours/glitch/styles/stream_entries.scss +++ b/app/javascript/flavours/glitch/styles/stream_entries.scss @@ -79,7 +79,7 @@ font-size: 14px; .status__relative-time { - color: $ui-primary-color; + color: $lighter-text-color; } } } @@ -88,7 +88,7 @@ display: block; max-width: 100%; padding-right: 25px; - color: $ui-base-color; + color: $inverted-text-color; } .status__avatar { @@ -121,7 +121,7 @@ strong { font-weight: 500; - color: $ui-base-color; + color: $inverted-text-color; @each $lang in $cjk-langs { &:lang(#{$lang}) { @@ -132,15 +132,15 @@ span { font-size: 14px; - color: $ui-primary-color; + color: $light-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 { @@ -178,7 +178,7 @@ strong { font-weight: 500; - color: $ui-base-color; + color: $inverted-text-color; @each $lang in $cjk-langs { &:lang(#{$lang}) { @@ -189,7 +189,7 @@ span { font-size: 14px; - color: $ui-primary-color; + color: $light-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: $light-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-primary-color; - color: $white; + color: $inverted-text-color; transition: all 100ms linear; &:hover, @@ -278,7 +278,7 @@ padding-left: (48px + 14px * 2); padding-bottom: 0; margin-bottom: -4px; - color: $ui-primary-color; + color: $light-text-color; font-size: 14px; position: relative; @@ -288,7 +288,7 @@ } .status__display-name.muted strong { - color: $ui-primary-color; + color: $light-text-color; } } diff --git a/app/javascript/flavours/glitch/styles/tables.scss b/app/javascript/flavours/glitch/styles/tables.scss index 92870e679..c12d84f1c 100644 --- a/app/javascript/flavours/glitch/styles/tables.scss +++ b/app/javascript/flavours/glitch/styles/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/flavours/glitch/styles/variables.scss b/app/javascript/flavours/glitch/styles/variables.scss index e3ba725c4..cc08fd06f 100644 --- a/app/javascript/flavours/glitch/styles/variables.scss +++ b/app/javascript/flavours/glitch/styles/variables.scss @@ -17,7 +17,6 @@ $base-shadow-color: $black !default; $base-overlay-background: $black !default; $base-border-color: $white !default; $simple-background-color: $white !default; -$primary-text-color: $white !default; $valid-value-color: $success-green !default; $error-value-color: $error-red !default; @@ -26,7 +25,19 @@ $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: $classic-highlight-color !default; + +// Variables for texts +$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; +$action-button-color: $ui-base-lighter-color !default; +// For texts on inverted backgrounds +$inverted-text-color: $ui-base-color !default; +$lighter-text-color: $ui-base-lighter-color !default; +$light-text-color: $ui-primary-color !default; // Language codes that uses CJK fonts $cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW; -- cgit From 983328376bb3e64c4863d7d3304c3ef8d218e08c Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Sat, 5 May 2018 21:01:15 +0200 Subject: Fix link colors in report modal --- app/javascript/flavours/glitch/styles/components/modal.scss | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'app/javascript/flavours/glitch') diff --git a/app/javascript/flavours/glitch/styles/components/modal.scss b/app/javascript/flavours/glitch/styles/components/modal.scss index 6e4e741bd..b6795c1a2 100644 --- a/app/javascript/flavours/glitch/styles/components/modal.scss +++ b/app/javascript/flavours/glitch/styles/components/modal.scss @@ -532,6 +532,10 @@ overflow-y: auto; overflow-x: hidden; + .status__content a { + color: $highlight-text-color; + } + @media screen and (max-width: 480px) { max-height: 10vh; } -- cgit From bd3b9bf7b9b0fa934475684d631b3fa18928c084 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Sat, 5 May 2018 21:03:38 +0200 Subject: [Glitch] Fix text color in "show more" link inside boost confirmation modal Port ba917e15f66c7848fe943e571d1ec5eeb549b59d to glitch-soc --- app/javascript/flavours/glitch/styles/components/modal.scss | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'app/javascript/flavours/glitch') diff --git a/app/javascript/flavours/glitch/styles/components/modal.scss b/app/javascript/flavours/glitch/styles/components/modal.scss index b6795c1a2..e3f74cb34 100644 --- a/app/javascript/flavours/glitch/styles/components/modal.scss +++ b/app/javascript/flavours/glitch/styles/components/modal.scss @@ -425,6 +425,10 @@ top: 10px; width: 48px; } + + .status__content__spoiler-link { + color: lighten($secondary-text-color, 8%); + } } .actions-modal { -- cgit From caebf69e77e1d7be9102e0bc9f59412462fed3ae Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Sat, 5 May 2018 21:06:46 +0200 Subject: Move attachment-lists out of lists.scss --- .../flavours/glitch/styles/components/lists.scss | 64 ---------------------- .../flavours/glitch/styles/components/status.scss | 64 ++++++++++++++++++++++ 2 files changed, 64 insertions(+), 64 deletions(-) (limited to 'app/javascript/flavours/glitch') diff --git a/app/javascript/flavours/glitch/styles/components/lists.scss b/app/javascript/flavours/glitch/styles/components/lists.scss index 24efe60df..f5837c6c4 100644 --- a/app/javascript/flavours/glitch/styles/components/lists.scss +++ b/app/javascript/flavours/glitch/styles/components/lists.scss @@ -1,67 +1,3 @@ -.attachment-list { - display: flex; - font-size: 14px; - border: 1px solid lighten($ui-base-color, 8%); - border-radius: 4px; - margin-top: 14px; - overflow: hidden; - - &__icon { - flex: 0 0 auto; - color: $dark-text-color; - padding: 8px 18px; - cursor: default; - border-right: 1px solid lighten($ui-base-color, 8%); - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: 26px; - - .fa { - display: block; - } - } - - &__list { - list-style: none; - padding: 4px 0; - padding-left: 8px; - display: flex; - flex-direction: column; - justify-content: center; - - li { - display: block; - padding: 4px 0; - } - - a { - text-decoration: none; - color: $dark-text-color; - font-weight: 500; - - &:hover { - text-decoration: underline; - } - } - } - - &.compact { - border: 0; - margin-top: 4px; - - .attachment-list__list { - padding: 0; - display: block; - } - - .fa { - color: $dark-text-color; - } - } -} - .list-editor { background: $ui-base-color; flex-direction: column; diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss index cc0a1c5b1..7c7f9824a 100644 --- a/app/javascript/flavours/glitch/styles/components/status.scss +++ b/app/javascript/flavours/glitch/styles/components/status.scss @@ -734,3 +734,67 @@ top: 4px; z-index: 5; } + +.attachment-list { + display: flex; + font-size: 14px; + border: 1px solid lighten($ui-base-color, 8%); + border-radius: 4px; + margin-top: 14px; + overflow: hidden; + + &__icon { + flex: 0 0 auto; + color: $dark-text-color; + padding: 8px 18px; + cursor: default; + border-right: 1px solid lighten($ui-base-color, 8%); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: 26px; + + .fa { + display: block; + } + } + + &__list { + list-style: none; + padding: 4px 0; + padding-left: 8px; + display: flex; + flex-direction: column; + justify-content: center; + + li { + display: block; + padding: 4px 0; + } + + a { + text-decoration: none; + color: $dark-text-color; + font-weight: 500; + + &:hover { + text-decoration: underline; + } + } + } + + &.compact { + border: 0; + margin-top: 4px; + + .attachment-list__list { + padding: 0; + display: block; + } + + .fa { + color: $dark-text-color; + } + } +} -- cgit From f7a076eded6517c9cf235524dd95e6bcdad4974a Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Sat, 5 May 2018 21:58:19 +0200 Subject: [Glitch] Add high-contrast theme --- .../flavours/glitch/styles/contrast.scss | 3 +++ .../flavours/glitch/styles/contrast/diff.scss | 14 ++++++++++++++ .../flavours/glitch/styles/contrast/variables.scss | 22 ++++++++++++++++++++++ app/javascript/skins/glitch/contrast/common.scss | 1 + app/javascript/skins/glitch/contrast/names.yml | 4 ++++ 5 files changed, 44 insertions(+) create mode 100644 app/javascript/flavours/glitch/styles/contrast.scss create mode 100644 app/javascript/flavours/glitch/styles/contrast/diff.scss create mode 100644 app/javascript/flavours/glitch/styles/contrast/variables.scss create mode 100644 app/javascript/skins/glitch/contrast/common.scss create mode 100644 app/javascript/skins/glitch/contrast/names.yml (limited to 'app/javascript/flavours/glitch') diff --git a/app/javascript/flavours/glitch/styles/contrast.scss b/app/javascript/flavours/glitch/styles/contrast.scss new file mode 100644 index 000000000..4de31db9a --- /dev/null +++ b/app/javascript/flavours/glitch/styles/contrast.scss @@ -0,0 +1,3 @@ +@import 'contrast/variables'; +@import 'index'; +@import 'contrast/diff'; diff --git a/app/javascript/flavours/glitch/styles/contrast/diff.scss b/app/javascript/flavours/glitch/styles/contrast/diff.scss new file mode 100644 index 000000000..eee9ecc3e --- /dev/null +++ b/app/javascript/flavours/glitch/styles/contrast/diff.scss @@ -0,0 +1,14 @@ +// components.scss +.compose-form { + .compose-form__modifiers { + .compose-form__upload { + &-description { + input { + &::placeholder { + opacity: 1.0; + } + } + } + } + } +} diff --git a/app/javascript/flavours/glitch/styles/contrast/variables.scss b/app/javascript/flavours/glitch/styles/contrast/variables.scss new file mode 100644 index 000000000..35d11060e --- /dev/null +++ b/app/javascript/flavours/glitch/styles/contrast/variables.scss @@ -0,0 +1,22 @@ +// Dependent colors +$black: #000000; + +$classic-base-color: #282c37; +$classic-primary-color: #9baec8; +$classic-secondary-color: #d9e1e8; + +$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; + +$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; +$action-button-color: #8d9ac2; + +$inverted-text-color: $black !default; +$lighter-text-color: darken($ui-base-color,6%) !default; +$light-text-color: darken($ui-primary-color, 40%) !default; diff --git a/app/javascript/skins/glitch/contrast/common.scss b/app/javascript/skins/glitch/contrast/common.scss new file mode 100644 index 000000000..90919d6d4 --- /dev/null +++ b/app/javascript/skins/glitch/contrast/common.scss @@ -0,0 +1 @@ +@import 'flavours/glitch/styles/contrast'; diff --git a/app/javascript/skins/glitch/contrast/names.yml b/app/javascript/skins/glitch/contrast/names.yml new file mode 100644 index 000000000..f60c4acd0 --- /dev/null +++ b/app/javascript/skins/glitch/contrast/names.yml @@ -0,0 +1,4 @@ +en: + skins: + glitch: + contrast: High contrast -- cgit From 2d065ceaf6f069a4a91691daac03ea3f2078a0fc Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Sat, 5 May 2018 22:38:15 +0200 Subject: minor fix --- app/javascript/flavours/glitch/styles/components/status.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/javascript/flavours/glitch') diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss index 7c7f9824a..aa476678c 100644 --- a/app/javascript/flavours/glitch/styles/components/status.scss +++ b/app/javascript/flavours/glitch/styles/components/status.scss @@ -329,7 +329,7 @@ display: flex; align-items: center; height: 1em; - color: transparentize($lighter-text-color, 0.1); + color: $lighter-text-color; .status__visibility-icon { padding-left: 6px; -- cgit From 65349bc155b4e3fb99721758944e19dd5af31489 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Sun, 6 May 2018 11:31:05 +0200 Subject: Fix color of status icons in glitch-soc high contrast skin --- app/javascript/flavours/glitch/styles/components/status.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/javascript/flavours/glitch') diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss index aa476678c..733845c5f 100644 --- a/app/javascript/flavours/glitch/styles/components/status.scss +++ b/app/javascript/flavours/glitch/styles/components/status.scss @@ -329,7 +329,7 @@ display: flex; align-items: center; height: 1em; - color: $lighter-text-color; + color: $action-button-color; .status__visibility-icon { padding-left: 6px; -- cgit