Changed a couple of badly named color variables.

This commit is contained in:
Dank Gabs 2019-07-02 15:50:43 -04:00
parent 459aeb5dcc
commit 267deeb04b
14 changed files with 51 additions and 59 deletions

@ -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;

@ -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;

@ -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 {

@ -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;
}

@ -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;

@ -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;}
}
}

@ -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 {

@ -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;}

@ -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;
}
}

@ -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;
}

@ -48,7 +48,7 @@
&__label {
font-size: 14px;
color: $gab-background-info;
color: $gab-secondary-text;
text-align: center;
font-weight: 500;
}

@ -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;

@ -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 {

@ -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;