Start replacing $gab-brand-default with --brand-color

merge-requests/39/head
Alex Gleason 4 years ago
parent c932872727
commit 3963ae2217
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7

@ -1,15 +1,17 @@
@import 'soapbox-light/variables'; @import 'soapbox-light/variables';
// $gab-brand-default: lighten(#149dfb, 10%);
$gab-brand-default: #0482d8; $gab-brand-default: #0482d8;
$gab-background-base-light: #f2f3f6; $gab-background-base-light: #f2f3f6;
$gab-background: $gab-background-base-light; $gab-background: $gab-background-base-light;
$ui-base-color: #d9f2f9; $ui-base-color: #d9f2f9;
$ui-highlight-color: $gab-brand-default; $ui-highlight-color: $gab-brand-default;
// $nav-ui-background-color: #000;
$nav-ui-highlight-color: #149dfb; $nav-ui-highlight-color: #149dfb;
$ui-base-lighter-color: #b0c0cf; $ui-base-lighter-color: #b0c0cf;
:root {
--brand-color: #0482d8;
}
@import 'application'; @import 'application';
@import 'soapbox-light/diff'; @import 'soapbox-light/diff';
@ -18,16 +20,7 @@ $ui-base-lighter-color: #b0c0cf;
transition: 0.1s; transition: 0.1s;
outline: none; outline: none;
// &.active {
// color: darken(#04d8c4, 40%);
// }
//
// &:hover {
// color: darken(#04d8c4, 60%);
// }
&::before { &::before {
// background-color: darken($nav-ui-highlight-color, 10%);
bottom: auto; bottom: auto;
opacity: 0; opacity: 0;
height: 15px; height: 15px;

@ -289,10 +289,10 @@ body {
.simple_form input[type="email"], .simple_form input[type="email"],
.simple_form input[type="password"], .simple_form input[type="password"],
.simple_form textarea { .simple_form textarea {
border-color: $gab-brand-default; border-color: var(--brand-color);
&:hover { &:hover {
border-color: $gab-brand-default; border-color: var(--brand-color);
} }
} }
@ -355,7 +355,7 @@ body {
.admin-wrapper .sidebar ul li a.selected { .admin-wrapper .sidebar ul li a.selected {
color: $gab-background-container-light; color: $gab-background-container-light;
background-color: $gab-brand-default; background-color: var(--brand-color);
} }
.admin-wrapper .sidebar ul li .simple-navigation-active-leaf a.selected { .admin-wrapper .sidebar ul li .simple-navigation-active-leaf a.selected {

@ -662,7 +662,7 @@ $small-breakpoint: 960px;
$gab-background: $gab-background-base-dark !default; $gab-background: $gab-background-base-dark !default;
position: relative; position: relative;
background-color: $gab-brand-default; background-color: var(--brand-color);
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 889" width="1440px" height="889px"><path d="M 0 0 L 0 851.82031 C 115.03104 776.54213 236.097 723.10606 363.20703 691.54492 C 640.06491 622.80164 852.93698 468.14039 954.31055 358.01367 C 1092.1151 208.31032 1206.0509 47.69868 1365.3828 13.457031 C 1391.8162 7.7762737 1416.6827 3.2957237 1440 0.001953125 L 1440 0 L 0 0 z" fill="#{hex-color($gab-background)}"/></svg>'); background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 889" width="1440px" height="889px"><path d="M 0 0 L 0 851.82031 C 115.03104 776.54213 236.097 723.10606 363.20703 691.54492 C 640.06491 622.80164 852.93698 468.14039 954.31055 358.01367 C 1092.1151 208.31032 1206.0509 47.69868 1365.3828 13.457031 C 1391.8162 7.7762737 1416.6827 3.2957237 1440 0.001953125 L 1440 0 L 0 0 z" fill="#{hex-color($gab-background)}"/></svg>');
background-size: 100% auto; background-size: 100% auto;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -959,7 +959,7 @@ $small-breakpoint: 960px;
h1 { h1 {
@include font-montserrat; @include font-montserrat;
color: $gab-brand-default; color: var(--brand-color);
} }
} }

@ -57,7 +57,7 @@ $content-width: 840px;
} }
&:hover { &:hover {
color: $gab-brand-default; color: var(--brand-color);
background-color: $gab-background; background-color: $gab-background;
transition: all 100ms linear; transition: all 100ms linear;
transition-property: color, background-color; transition-property: color, background-color;

@ -160,7 +160,7 @@ button {
} }
::selection { ::selection {
background: $gab-brand-default; background: var(--brand-color);
color: $white; color: $white;
} }

@ -391,7 +391,7 @@
} }
a { a {
color: $gab-brand-default; color: var(--brand-color);
text-decoration: none; text-decoration: none;
&:hover { &:hover {
@ -453,7 +453,7 @@
display: block; display: block;
font-size: 15px; font-size: 15px;
line-height: 20px; line-height: 20px;
color: $gab-brand-default; color: var(--brand-color);
border: 0; border: 0;
background: transparent; background: transparent;
padding: 0; padding: 0;
@ -592,7 +592,7 @@
color: $gab-secondary-text; color: $gab-secondary-text;
a { a {
color: $gab-brand-default; color: var(--brand-color);
font-weight: bold; font-weight: bold;
text-decoration: none; text-decoration: none;
@ -1544,7 +1544,7 @@ a.account__display-name {
right: 14px; right: 14px;
width: 61px; width: 61px;
height: 61px; height: 61px;
background-color: $nav-ui-highlight-color; background-color: var(--brand-color);
border: 0; border: 0;
border-radius: 999px; border-radius: 999px;
box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.5); box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.5);
@ -1868,7 +1868,7 @@ a.account__display-name {
} }
.react-toggle--checked .react-toggle-track { .react-toggle--checked .react-toggle-track {
background-color: $gab-brand-default; background-color: var(--brand-color);
} }
.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track { .react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
@ -1928,7 +1928,7 @@ a.account__display-name {
.react-toggle--checked .react-toggle-thumb { .react-toggle--checked .react-toggle-thumb {
left: 27px; left: 27px;
border-color: $gab-brand-default; border-color: var(--brand-color);
} }
.column-link { .column-link {
@ -5090,7 +5090,7 @@ noscript {
color: $secondary-text-color; color: $secondary-text-color;
a { a {
color: $gab-brand-default !important; color: var(--brand-color) !important;
} }
} }
} }
@ -5115,7 +5115,7 @@ noscript {
display: block; display: block;
margin: 15px auto; margin: 15px auto;
text-align: center; text-align: center;
color: $gab-brand-default; color: var(--brand-color);
} }
} }
} }
@ -5199,7 +5199,7 @@ noscript {
} }
.badge { .badge {
background-color: $gab-brand-default; background-color: var(--brand-color);
color: #fff; color: #fff;
font-size: 12px; font-size: 12px;
font-weight: normal; font-weight: normal;

@ -71,7 +71,7 @@
&:active { &:active {
outline: 0; outline: 0;
color: #fff; color: #fff;
background: $gab-brand-default !important; background: var(--brand-color) !important;
} }
} }

@ -37,13 +37,13 @@
background-size: 100px 1200px; background-size: 100px 1200px;
&:hover { &:hover {
color: $gab-brand-default; color: var(--brand-color);
background-position: 0 -100px; background-position: 0 -100px;
} }
&.group-form__file-label--selected { &.group-form__file-label--selected {
background-position: 0 -100px; background-position: 0 -100px;
color: $gab-brand-default; color: var(--brand-color);
} }
} }

@ -26,7 +26,7 @@
color: $gab-secondary-text; color: $gab-secondary-text;
&__unread { &__unread {
color: $gab-brand-default; color: var(--brand-color);
} }
} }
} }

@ -8,7 +8,7 @@ textarea {
padding: 7px 10px; padding: 7px 10px;
border: 1px solid; border: 1px solid;
border-radius: 4px; border-radius: 4px;
color: $gab-brand-default; color: var(--brand-color);
border-color: $gab-placeholder-accent; border-color: $gab-placeholder-accent;
background: $gab-background-container; background: $gab-background-container;
&:focus {outline: none;} &:focus {outline: none;}

@ -1,4 +1,4 @@
$nav-ui-background-color: $gab-brand-default !default; $nav-ui-background-color: var(--brand-color) !default;
.tabs-bar { .tabs-bar {
display: flex; display: flex;

@ -346,7 +346,7 @@
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
color: $gab-brand-default; color: var(--brand-color);
} }
} }
@ -359,7 +359,7 @@
} }
.nav-button { .nav-button {
background: $gab-brand-default; background: var(--brand-color);
color: #fff; color: #fff;
margin: 8px; margin: 8px;
margin-left: 0; margin-left: 0;

@ -190,7 +190,7 @@ body.admin {
} }
&__reached { &__reached {
color: $gab-brand-default; color: var(--brand-color);
} }
.wtf-panel__content { .wtf-panel__content {
@ -208,6 +208,6 @@ body.admin {
&__progress { &__progress {
height: 100%; height: 100%;
background: $gab-brand-default; background: var(--brand-color);
} }
} }

Loading…
Cancel
Save