moony/Gab-Social
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Changed a couple of badly named color variables.

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/javascript/styles/gabsocial/_mixins.scss
View File

@ -49,7 +49,7 @@
@include font-size(12); @include font-size(12);
@include line-height(14); @include line-height(14);
@include font-weight(normal); @include font-weight(normal);
color: $gab-background-info; color: $gab-secondary-text;
box-shadow: 0 0 6px 0 rgba(0,0,0,0.5); box-shadow: 0 0 6px 0 rgba(0,0,0,0.5);
h4 { h4 {
color: #fff; color: #fff;

4
app/javascript/styles/gabsocial/accounts.scss
View File

@ -87,7 +87,7 @@
span { span {
display: block; display: block;
font-size: 14px; font-size: 14px;
color: $gab-background-info; color: $gab-secondary-text;
font-weight: 400; font-weight: 400;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -175,7 +175,7 @@
.nothing-here { .nothing-here {
background: $ui-base-color; background: $ui-base-color;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
color: $gab-background-info; color: $gab-secondary-text;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
text-align: center; text-align: center;

18
app/javascript/styles/gabsocial/admin.scss
View File

@ -47,7 +47,7 @@ $content-width: 840px;
a { a {
display: block; display: block;
padding: 15px; padding: 15px;
color: $gab-background-info; color: $gab-secondary-text;
text-decoration: none; text-decoration: none;
transition: all 200ms linear; transition: all 200ms linear;
transition-property: color, background-color; transition-property: color, background-color;
@ -137,7 +137,7 @@ $content-width: 840px;
text-transform: uppercase; text-transform: uppercase;
font-size: 13px; font-size: 13px;
font-weight: 700; font-weight: 700;
color: $gab-background-info; color: $gab-secondary-text;
padding-bottom: 8px; padding-bottom: 8px;
margin-bottom: 8px; margin-bottom: 8px;
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid lighten($ui-base-color, 8%);
@ -167,7 +167,7 @@ $content-width: 840px;
.directory__tag h4 { .directory__tag h4 {
font-size: 18px; font-size: 18px;
font-weight: 700; font-weight: 700;
color: $gab-background-info; color: $gab-secondary-text;
text-transform: none; text-transform: none;
padding-bottom: 0; padding-bottom: 0;
margin-bottom: 0; margin-bottom: 0;
@ -177,11 +177,11 @@ $content-width: 840px;
& > p { & > p {
font-size: 14px; font-size: 14px;
line-height: 18px; line-height: 18px;
color: $gab-background-info; color: $gab-secondary-text;
margin-bottom: 20px; margin-bottom: 20px;
strong { strong {
color: $gab-background-info; color: $gab-secondary-text;
font-weight: 500; font-weight: 500;
@each $lang in $cjk-langs { @each $lang in $cjk-langs {
@ -206,7 +206,7 @@ $content-width: 840px;
} }
.muted-hint { .muted-hint {
color: $gab-background-info; color: $gab-secondary-text;
a { a {
color: $highlight-text-color; color: $highlight-text-color;
@ -285,16 +285,16 @@ $content-width: 840px;
a { a {
display: inline-block; display: inline-block;
color: $gab-background-info; color: $gab-secondary-text;
text-decoration: none; text-decoration: none;
text-transform: uppercase; text-transform: uppercase;
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
border-bottom: 2px solid $gab-background-info; border-bottom: 2px solid $gab-secondary-text;
&:hover { &:hover {
color: $primary-text-color; color: $primary-text-color;
border-bottom: 2px solid lighten($gab-background-info, 5%); border-bottom: 2px solid lighten($gab-secondary-text, 5%);
} }
&.selected { &.selected {

2
app/javascript/styles/gabsocial/basics.scss
View File

@ -26,7 +26,7 @@ body {
color: white; color: white;
background: $gab-background-base; background: $gab-background-base;
&.theme-gabsocial-light { &.theme-gabsocial-light {
color: $gab-active-border; color: $gab-default-text-light;
background: $gab-background-base-light; background: $gab-background-base-light;
} }

20
app/javascript/styles/gabsocial/components.scss
View File

@ -111,7 +111,7 @@
.icon-button { .icon-button {
display: inline-block; display: inline-block;
padding: 0; padding: 0;
color: $gab-background-info; color: $gab-secondary-text;
border: none; border: none;
background: transparent; background: transparent;
cursor: pointer; cursor: pointer;
@ -144,7 +144,7 @@
} }
&.inverted { &.inverted {
color: $gab-background-info; color: $gab-secondary-text;
&:hover, &:hover,
&:active, &:active,
@ -179,7 +179,7 @@
} }
.text-icon-button { .text-icon-button {
color: $gab-background-info; color: $gab-secondary-text;
border: none; border: none;
background: transparent; background: transparent;
cursor: pointer; cursor: pointer;
@ -1124,7 +1124,7 @@ a.account__display-name {
margin: 0 10px 0 68px; margin: 0 10px 0 68px;
padding: 8px 0 0; padding: 8px 0 0;
cursor: default; cursor: default;
color: $gab-background-info; color: $gab-secondary-text;
font-size: 15px; font-size: 15px;
line-height: 22px; line-height: 22px;
position: relative; position: relative;
@ -2042,14 +2042,14 @@ a.account__display-name {
margin-bottom: 20px; margin-bottom: 20px;
a { a {
color: $gab-background-info; color: $gab-secondary-text;
text-decoration: underline; text-decoration: underline;
} }
} }
a { a {
text-decoration: none; text-decoration: none;
color: $gab-background-info; color: $gab-secondary-text;
&:hover, &:hover,
&:focus, &:focus,
@ -2473,7 +2473,7 @@ a.status-card.compact:hover {
background: $gab-background-container; background: $gab-background-container;
body.theme-gabsocial-light & { body.theme-gabsocial-light & {
background: $gab-background-container-light; background: $gab-background-container-light;
color: $gab-active-border; color: $gab-default-text-light;
} }
flex: 0 0 auto; flex: 0 0 auto;
@ -2533,7 +2533,7 @@ a.status-card.compact:hover {
color: #fff; color: #fff;
background: $gab-background-container; background: $gab-background-container;
body.theme-gabsocial-light & { body.theme-gabsocial-light & {
color: $gab-active-border; color: $gab-default-text-light;
background: $gab-background-container-light; background: $gab-background-container-light;
} }
&:hover {color: lighten($darker-text-color, 7%);} &:hover {color: lighten($darker-text-color, 7%);}
@ -4897,10 +4897,8 @@ noscript {
span:first-of-type { span:first-of-type {
font-size: 20px !important; font-size: 20px !important;
line-height: 1.25; line-height: 1.25;
color: #ffffff; color: #ffffff;
body.theme-gabsocial-light & {color: $gab-active-border;} body.theme-gabsocial-light & {color: $gab-default-text-light;}
font-weight: 600 !important; font-weight: 600 !important;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;

10
app/javascript/styles/gabsocial/components/compose-form.scss
View File

@ -186,7 +186,7 @@
transition: opacity .1s ease; transition: opacity .1s ease;
.icon-button { .icon-button {
flex: 0 1 auto; flex: 0 1 auto;
color: $gab-background-info; color: $gab-secondary-text;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
padding: 10px; padding: 10px;
@ -212,8 +212,8 @@
background: rgba(0,0,0,0.3); background: rgba(0,0,0,0.3);
box-sizing: border-box; box-sizing: border-box;
background: transparent; background: transparent;
color: $gab-background-info; color: $gab-secondary-text;
border: 1px solid $gab-background-info; border: 1px solid $gab-secondary-text;
outline: none; outline: none;
padding: 10px; padding: 10px;
margin: 0; margin: 0;
@ -223,7 +223,7 @@
font-weight: 500; font-weight: 500;
&:focus {color: #fff;} &:focus {color: #fff;}
&::placeholder { &::placeholder {
color: $gab-background-info; color: $gab-secondary-text;
} }
} }
&.active {opacity: 1;} &.active {opacity: 1;}
@ -267,7 +267,7 @@
font-family: $font-sans-serif, sans-serif; font-family: $font-sans-serif, sans-serif;
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
color: $gab-background-info; color: $gab-secondary-text;
&.character-counter--over {color: $warning-red;} &.character-counter--over {color: $warning-red;}
} }
} }

4
app/javascript/styles/gabsocial/components/dropdown-menu.scss
View File

@ -8,7 +8,7 @@
@include font-size(13); @include font-size(13);
@include line-height(26); @include line-height(26);
@include font-weight(normal); @include font-weight(normal);
color: $gab-background-info; color: $gab-secondary-text;
box-shadow: 0 0 6px 0 rgba(0,0,0,0.5); box-shadow: 0 0 6px 0 rgba(0,0,0,0.5);
&.left {transform-origin: 100% 50%;} &.left {transform-origin: 100% 50%;}
&.top {transform-origin: 50% 100%;} &.top {transform-origin: 50% 100%;}
@ -57,7 +57,7 @@
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
text-transform: capitalize; text-transform: capitalize;
color: $gab-background-info; color: $gab-secondary-text;
&:focus, &:focus,
&:hover, &:hover,
&:active { &:active {

10
app/javascript/styles/gabsocial/components/modal.scss
View File

@ -310,8 +310,8 @@
max-width: 90vw; max-width: 90vw;
border-radius: 4px; border-radius: 4px;
border: 1px solid $gab-placeholder-accent; border: 1px solid $gab-placeholder-accent;
color: $gab-background-info; color: $gab-secondary-text;
body.theme-gabsocial-light & {color: $gab-active-border;} body.theme-gabsocial-light & {color: $gab-default-text-light;}
background: $gab-background-container; background: $gab-background-container;
.status__display-name { .status__display-name {
display: block; display: block;
@ -432,8 +432,8 @@
.status__content, .status__content,
.status__content p { .status__content p {
color: $gab-background-info; color: $gab-secondary-text;
body.theme-gabsocial-light & {color: $gab-active-border;} body.theme-gabsocial-light & {color: $gab-default-text-light;}
} }
@media screen and (max-width: 480px) { @media screen and (max-width: 480px) {
@ -520,7 +520,7 @@
align-items: center; align-items: center;
padding: 13px 10px 12px; padding: 13px 10px 12px;
@inclide font-size(14); @inclide font-size(14);
color: $gab-background-info; color: $gab-secondary-text;
text-decoration: none; text-decoration: none;
&, &,
button {transition: none;} button {transition: none;}

2
app/javascript/styles/gabsocial/components/tabs-bar.scss
View File

@ -184,7 +184,7 @@
background-position: center -130px; background-position: center -130px;
&.active { &.active {
height: 38px; height: 38px;
border-bottom: 4px solid $gab-active-border; border-bottom: 4px solid $gab-default-text-light;
background-position: center 11px; background-position: center 11px;
} }
} }

8
app/javascript/styles/gabsocial/components/user-panel.scss
View File

@ -57,7 +57,7 @@
font-weight: bold; font-weight: bold;
line-height: 24px; line-height: 24px;
color: #fff; color: #fff;
body.theme-gabsocial-light & {color: $gab-active-border;} body.theme-gabsocial-light & {color: $gab-default-text-light;}
} }
&:hover & { &:hover & {
@ -70,7 +70,7 @@
display: block; display: block;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
color: $gab-background-info; color: $gab-secondary-text;
text-decoration: none !important; text-decoration: none !important;
} }
} }
@ -102,7 +102,7 @@
display: block; display: block;
width: 100%; width: 100%;
color: #fff; color: #fff;
body.theme-gabsocial-light & {color: $gab-active-border;} body.theme-gabsocial-light & {color: $gab-default-text-light;}
font-size: 20px; font-size: 20px;
font-weight: 800; font-weight: 800;
line-height: 24px; line-height: 24px;
@ -111,7 +111,7 @@
&__label { &__label {
display: block; display: block;
width: 100%; width: 100%;
color: $gab-background-info; color: $gab-secondary-text;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
} }

2
app/javascript/styles/gabsocial/dashboard.scss
View File

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

4
app/javascript/styles/gabsocial/forms.scss
View File

@ -95,7 +95,7 @@ code {
} }
.hint { .hint {
color: $gab-background-info; color: $gab-secondary-text;
a { a {
color: $highlight-text-color; color: $highlight-text-color;
@ -116,7 +116,7 @@ code {
p.hint { p.hint {
margin-bottom: 15px; margin-bottom: 15px;
color: $gab-background-info; color: $gab-secondary-text;
&.subtle-hint { &.subtle-hint {
text-align: center; text-align: center;

2
app/javascript/styles/gabsocial/tables.scss
View File

@ -109,7 +109,7 @@ a.table-action-link {
display: inline-block; display: inline-block;
margin-right: 5px; margin-right: 5px;
padding: 0 10px; padding: 0 10px;
color: $gab-background-info; color: $gab-secondary-text;
font-weight: 500; font-weight: 500;
&:hover { &:hover {

22
app/javascript/styles/gabsocial/variables.scss
View File

@ -4,34 +4,28 @@
////////// GAB SPECIFIC VARIABLE STACK ////////// ////////// 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-brand-default: #21cf7a;
$gab-alert-red: #cc6643; $gab-alert-red: #cc6643;
$gab-secondary-text: #999;
$gab-text-highlight: $gab-brand-default;
// THEMES // THEME COLORS
// default theme (dark) // default theme (dark)
$gab-background-base: #333; $gab-background-base: #333;
$gab-background-container: #222; $gab-background-container: #222;
$gab-text-highlight: $gab-brand-default;
$gab-bright-highlight: #b2f1d5;
$gab-placeholder-accent: #666; $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 // light theme
$gab-background-base-light: #f2f3f6; $gab-background-base-light: #f2f3f6;
$gab-background-container-light: #fff; $gab-background-container-light: #fff;
$gab-text-highlight-light: $gab-brand-default; $gab-default-text-light: #6c6c6c;
// THEME MIXINS // THEME MIXINS
@mixin light-theme-shadow() {box-shadow: 0 0 6px 0 rgba(0,0,0,0.1);} @mixin light-theme-shadow() {box-shadow: 0 0 6px 0 rgba(0,0,0,0.1);}
// BREAKPOINT SETS // BREAKPOINT SETS
// navigation breakpoints - by default show all elements and link names along with icons // 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 // Variables for texts
$primary-text-color: $white !default; $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; $dark-text-color: $ui-base-lighter-color !default;
$secondary-text-color: $ui-secondary-color !default; $secondary-text-color: $ui-secondary-color !default;
$highlight-text-color: $ui-highlight-color !default; $highlight-text-color: $ui-highlight-color !default;