From 267deeb04bcfaeb1fe00dc56072eade0160e78a2 Mon Sep 17 00:00:00 2001 From: Dank Gabs Date: Tue, 2 Jul 2019 15:50:43 -0400 Subject: [PATCH] Changed a couple of badly named color variables. --- app/javascript/styles/gabsocial/_mixins.scss | 2 +- app/javascript/styles/gabsocial/accounts.scss | 4 ++-- app/javascript/styles/gabsocial/admin.scss | 18 +++++++-------- app/javascript/styles/gabsocial/basics.scss | 2 +- .../styles/gabsocial/components.scss | 20 ++++++++--------- .../gabsocial/components/compose-form.scss | 10 ++++----- .../gabsocial/components/dropdown-menu.scss | 4 ++-- .../styles/gabsocial/components/modal.scss | 10 ++++----- .../styles/gabsocial/components/tabs-bar.scss | 2 +- .../gabsocial/components/user-panel.scss | 8 +++---- .../styles/gabsocial/dashboard.scss | 2 +- app/javascript/styles/gabsocial/forms.scss | 4 ++-- app/javascript/styles/gabsocial/tables.scss | 2 +- .../styles/gabsocial/variables.scss | 22 +++++++------------ 14 files changed, 51 insertions(+), 59 deletions(-) diff --git a/app/javascript/styles/gabsocial/_mixins.scss b/app/javascript/styles/gabsocial/_mixins.scss index ab5ac216..fe388482 100644 --- a/app/javascript/styles/gabsocial/_mixins.scss +++ b/app/javascript/styles/gabsocial/_mixins.scss @@ -49,7 +49,7 @@ @include font-size(12); @include line-height(14); @include font-weight(normal); - color: $gab-background-info; + color: $gab-secondary-text; box-shadow: 0 0 6px 0 rgba(0,0,0,0.5); h4 { color: #fff; diff --git a/app/javascript/styles/gabsocial/accounts.scss b/app/javascript/styles/gabsocial/accounts.scss index 1e7f1c96..dba94b7c 100644 --- a/app/javascript/styles/gabsocial/accounts.scss +++ b/app/javascript/styles/gabsocial/accounts.scss @@ -87,7 +87,7 @@ span { display: block; font-size: 14px; - color: $gab-background-info; + color: $gab-secondary-text; font-weight: 400; overflow: hidden; text-overflow: ellipsis; @@ -175,7 +175,7 @@ .nothing-here { background: $ui-base-color; box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); - color: $gab-background-info; + color: $gab-secondary-text; font-size: 14px; font-weight: 500; text-align: center; diff --git a/app/javascript/styles/gabsocial/admin.scss b/app/javascript/styles/gabsocial/admin.scss index e02e33cd..c7f6e23d 100644 --- a/app/javascript/styles/gabsocial/admin.scss +++ b/app/javascript/styles/gabsocial/admin.scss @@ -47,7 +47,7 @@ $content-width: 840px; a { display: block; padding: 15px; - color: $gab-background-info; + color: $gab-secondary-text; text-decoration: none; transition: all 200ms linear; transition-property: color, background-color; @@ -137,7 +137,7 @@ $content-width: 840px; text-transform: uppercase; font-size: 13px; font-weight: 700; - color: $gab-background-info; + color: $gab-secondary-text; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid lighten($ui-base-color, 8%); @@ -167,7 +167,7 @@ $content-width: 840px; .directory__tag h4 { font-size: 18px; font-weight: 700; - color: $gab-background-info; + color: $gab-secondary-text; text-transform: none; padding-bottom: 0; margin-bottom: 0; @@ -177,11 +177,11 @@ $content-width: 840px; & > p { font-size: 14px; line-height: 18px; - color: $gab-background-info; + color: $gab-secondary-text; margin-bottom: 20px; strong { - color: $gab-background-info; + color: $gab-secondary-text; font-weight: 500; @each $lang in $cjk-langs { @@ -206,7 +206,7 @@ $content-width: 840px; } .muted-hint { - color: $gab-background-info; + color: $gab-secondary-text; a { color: $highlight-text-color; @@ -285,16 +285,16 @@ $content-width: 840px; a { display: inline-block; - color: $gab-background-info; + color: $gab-secondary-text; text-decoration: none; text-transform: uppercase; font-size: 12px; font-weight: 500; - border-bottom: 2px solid $gab-background-info; + border-bottom: 2px solid $gab-secondary-text; &:hover { color: $primary-text-color; - border-bottom: 2px solid lighten($gab-background-info, 5%); + border-bottom: 2px solid lighten($gab-secondary-text, 5%); } &.selected { diff --git a/app/javascript/styles/gabsocial/basics.scss b/app/javascript/styles/gabsocial/basics.scss index 50778bff..d3edae2a 100644 --- a/app/javascript/styles/gabsocial/basics.scss +++ b/app/javascript/styles/gabsocial/basics.scss @@ -26,7 +26,7 @@ body { color: white; background: $gab-background-base; &.theme-gabsocial-light { - color: $gab-active-border; + color: $gab-default-text-light; background: $gab-background-base-light; } diff --git a/app/javascript/styles/gabsocial/components.scss b/app/javascript/styles/gabsocial/components.scss index 5c099b72..2e7096d6 100644 --- a/app/javascript/styles/gabsocial/components.scss +++ b/app/javascript/styles/gabsocial/components.scss @@ -111,7 +111,7 @@ .icon-button { display: inline-block; padding: 0; - color: $gab-background-info; + color: $gab-secondary-text; border: none; background: transparent; cursor: pointer; @@ -144,7 +144,7 @@ } &.inverted { - color: $gab-background-info; + color: $gab-secondary-text; &:hover, &:active, @@ -179,7 +179,7 @@ } .text-icon-button { - color: $gab-background-info; + color: $gab-secondary-text; border: none; background: transparent; cursor: pointer; @@ -1124,7 +1124,7 @@ a.account__display-name { margin: 0 10px 0 68px; padding: 8px 0 0; cursor: default; - color: $gab-background-info; + color: $gab-secondary-text; font-size: 15px; line-height: 22px; position: relative; @@ -2042,14 +2042,14 @@ a.account__display-name { margin-bottom: 20px; a { - color: $gab-background-info; + color: $gab-secondary-text; text-decoration: underline; } } a { text-decoration: none; - color: $gab-background-info; + color: $gab-secondary-text; &:hover, &:focus, @@ -2473,7 +2473,7 @@ a.status-card.compact:hover { background: $gab-background-container; body.theme-gabsocial-light & { background: $gab-background-container-light; - color: $gab-active-border; + color: $gab-default-text-light; } flex: 0 0 auto; @@ -2533,7 +2533,7 @@ a.status-card.compact:hover { color: #fff; background: $gab-background-container; body.theme-gabsocial-light & { - color: $gab-active-border; + color: $gab-default-text-light; background: $gab-background-container-light; } &:hover {color: lighten($darker-text-color, 7%);} @@ -4897,10 +4897,8 @@ noscript { span:first-of-type { font-size: 20px !important; line-height: 1.25; - color: #ffffff; - body.theme-gabsocial-light & {color: $gab-active-border;} - + body.theme-gabsocial-light & {color: $gab-default-text-light;} font-weight: 600 !important; overflow: hidden; white-space: nowrap; diff --git a/app/javascript/styles/gabsocial/components/compose-form.scss b/app/javascript/styles/gabsocial/components/compose-form.scss index 4620eaf7..d295a5c9 100644 --- a/app/javascript/styles/gabsocial/components/compose-form.scss +++ b/app/javascript/styles/gabsocial/components/compose-form.scss @@ -186,7 +186,7 @@ transition: opacity .1s ease; .icon-button { flex: 0 1 auto; - color: $gab-background-info; + color: $gab-secondary-text; font-size: 14px; font-weight: 500; padding: 10px; @@ -212,8 +212,8 @@ background: rgba(0,0,0,0.3); box-sizing: border-box; background: transparent; - color: $gab-background-info; - border: 1px solid $gab-background-info; + color: $gab-secondary-text; + border: 1px solid $gab-secondary-text; outline: none; padding: 10px; margin: 0; @@ -223,7 +223,7 @@ font-weight: 500; &:focus {color: #fff;} &::placeholder { - color: $gab-background-info; + color: $gab-secondary-text; } } &.active {opacity: 1;} @@ -267,7 +267,7 @@ font-family: $font-sans-serif, sans-serif; font-size: 14px; font-weight: 600; - color: $gab-background-info; + color: $gab-secondary-text; &.character-counter--over {color: $warning-red;} } } diff --git a/app/javascript/styles/gabsocial/components/dropdown-menu.scss b/app/javascript/styles/gabsocial/components/dropdown-menu.scss index d7183c4b..193cb2f1 100644 --- a/app/javascript/styles/gabsocial/components/dropdown-menu.scss +++ b/app/javascript/styles/gabsocial/components/dropdown-menu.scss @@ -8,7 +8,7 @@ @include font-size(13); @include line-height(26); @include font-weight(normal); - color: $gab-background-info; + color: $gab-secondary-text; box-shadow: 0 0 6px 0 rgba(0,0,0,0.5); &.left {transform-origin: 100% 50%;} &.top {transform-origin: 50% 100%;} @@ -57,7 +57,7 @@ text-overflow: ellipsis; white-space: nowrap; text-transform: capitalize; - color: $gab-background-info; + color: $gab-secondary-text; &:focus, &:hover, &:active { diff --git a/app/javascript/styles/gabsocial/components/modal.scss b/app/javascript/styles/gabsocial/components/modal.scss index 38e86ee3..1b8346cd 100644 --- a/app/javascript/styles/gabsocial/components/modal.scss +++ b/app/javascript/styles/gabsocial/components/modal.scss @@ -310,8 +310,8 @@ max-width: 90vw; border-radius: 4px; border: 1px solid $gab-placeholder-accent; - color: $gab-background-info; - body.theme-gabsocial-light & {color: $gab-active-border;} + color: $gab-secondary-text; + body.theme-gabsocial-light & {color: $gab-default-text-light;} background: $gab-background-container; .status__display-name { display: block; @@ -432,8 +432,8 @@ .status__content, .status__content p { - color: $gab-background-info; - body.theme-gabsocial-light & {color: $gab-active-border;} + color: $gab-secondary-text; + body.theme-gabsocial-light & {color: $gab-default-text-light;} } @media screen and (max-width: 480px) { @@ -520,7 +520,7 @@ align-items: center; padding: 13px 10px 12px; @inclide font-size(14); - color: $gab-background-info; + color: $gab-secondary-text; text-decoration: none; &, button {transition: none;} diff --git a/app/javascript/styles/gabsocial/components/tabs-bar.scss b/app/javascript/styles/gabsocial/components/tabs-bar.scss index 9369f185..e2981550 100644 --- a/app/javascript/styles/gabsocial/components/tabs-bar.scss +++ b/app/javascript/styles/gabsocial/components/tabs-bar.scss @@ -184,7 +184,7 @@ background-position: center -130px; &.active { height: 38px; - border-bottom: 4px solid $gab-active-border; + border-bottom: 4px solid $gab-default-text-light; background-position: center 11px; } } diff --git a/app/javascript/styles/gabsocial/components/user-panel.scss b/app/javascript/styles/gabsocial/components/user-panel.scss index 7502c836..8d7340f0 100644 --- a/app/javascript/styles/gabsocial/components/user-panel.scss +++ b/app/javascript/styles/gabsocial/components/user-panel.scss @@ -57,7 +57,7 @@ font-weight: bold; line-height: 24px; color: #fff; - body.theme-gabsocial-light & {color: $gab-active-border;} + body.theme-gabsocial-light & {color: $gab-default-text-light;} } &:hover & { @@ -70,7 +70,7 @@ display: block; font-size: 14px; line-height: 16px; - color: $gab-background-info; + color: $gab-secondary-text; text-decoration: none !important; } } @@ -102,7 +102,7 @@ display: block; width: 100%; color: #fff; - body.theme-gabsocial-light & {color: $gab-active-border;} + body.theme-gabsocial-light & {color: $gab-default-text-light;} font-size: 20px; font-weight: 800; line-height: 24px; @@ -111,7 +111,7 @@ &__label { display: block; width: 100%; - color: $gab-background-info; + color: $gab-secondary-text; font-size: 12px; line-height: 14px; } diff --git a/app/javascript/styles/gabsocial/dashboard.scss b/app/javascript/styles/gabsocial/dashboard.scss index e65c7167..eced8b12 100644 --- a/app/javascript/styles/gabsocial/dashboard.scss +++ b/app/javascript/styles/gabsocial/dashboard.scss @@ -48,7 +48,7 @@ &__label { font-size: 14px; - color: $gab-background-info; + color: $gab-secondary-text; text-align: center; font-weight: 500; } diff --git a/app/javascript/styles/gabsocial/forms.scss b/app/javascript/styles/gabsocial/forms.scss index 640a6cb7..323da61b 100644 --- a/app/javascript/styles/gabsocial/forms.scss +++ b/app/javascript/styles/gabsocial/forms.scss @@ -95,7 +95,7 @@ code { } .hint { - color: $gab-background-info; + color: $gab-secondary-text; a { color: $highlight-text-color; @@ -116,7 +116,7 @@ code { p.hint { margin-bottom: 15px; - color: $gab-background-info; + color: $gab-secondary-text; &.subtle-hint { text-align: center; diff --git a/app/javascript/styles/gabsocial/tables.scss b/app/javascript/styles/gabsocial/tables.scss index 157a16a6..26789e70 100644 --- a/app/javascript/styles/gabsocial/tables.scss +++ b/app/javascript/styles/gabsocial/tables.scss @@ -109,7 +109,7 @@ a.table-action-link { display: inline-block; margin-right: 5px; padding: 0 10px; - color: $gab-background-info; + color: $gab-secondary-text; font-weight: 500; &:hover { diff --git a/app/javascript/styles/gabsocial/variables.scss b/app/javascript/styles/gabsocial/variables.scss index 81f8c90f..0870d2f8 100644 --- a/app/javascript/styles/gabsocial/variables.scss +++ b/app/javascript/styles/gabsocial/variables.scss @@ -4,34 +4,28 @@ ////////// GAB SPECIFIC VARIABLE STACK ////////// +// NOTE - will eventually create a systematic approach of setting color variables to easily change instance themes + +// STATIC COLORS $gab-brand-default: #21cf7a; $gab-alert-red: #cc6643; +$gab-secondary-text: #999; +$gab-text-highlight: $gab-brand-default; -// THEMES +// THEME COLORS // default theme (dark) $gab-background-base: #333; $gab-background-container: #222; -$gab-text-highlight: $gab-brand-default; -$gab-bright-highlight: #b2f1d5; $gab-placeholder-accent: #666; -// NOTE - needs better descriptive names since these are also used for light theme in different ways -$gab-background-info: #999; -$gab-active-border: #6c6c6c; - - // light theme $gab-background-base-light: #f2f3f6; $gab-background-container-light: #fff; -$gab-text-highlight-light: $gab-brand-default; - - +$gab-default-text-light: #6c6c6c; // THEME MIXINS @mixin light-theme-shadow() {box-shadow: 0 0 6px 0 rgba(0,0,0,0.1);} - - // BREAKPOINT SETS // navigation breakpoints - by default show all elements and link names along with icons @@ -85,7 +79,7 @@ $ui-highlight-color: $classic-highlight-color !default; // Variables for texts $primary-text-color: $white !default; -$darker-text-color: $gab-background-info !default; +$darker-text-color: $gab-secondary-text !default; $dark-text-color: $ui-base-lighter-color !default; $secondary-text-color: $ui-secondary-color !default; $highlight-text-color: $ui-highlight-color !default;