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 --- .../flavours/glitch/styles/components/modal.scss | 47 +++++++++++----------- 1 file changed, 23 insertions(+), 24 deletions(-) (limited to 'app/javascript/flavours/glitch/styles/components/modal.scss') 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; -- 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/styles/components/modal.scss') 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/styles/components/modal.scss') 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