Start replacing $gab-brand-default with --brand-color
This commit is contained in:
parent
c932872727
commit
3963ae2217
13 changed files with 30 additions and 37 deletions
|
@ -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…
Reference in a new issue