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';
|
||||
|
||||
// $gab-brand-default: lighten(#149dfb, 10%);
|
||||
$gab-brand-default: #0482d8;
|
||||
$gab-background-base-light: #f2f3f6;
|
||||
$gab-background: $gab-background-base-light;
|
||||
$ui-base-color: #d9f2f9;
|
||||
$ui-highlight-color: $gab-brand-default;
|
||||
// $nav-ui-background-color: #000;
|
||||
$nav-ui-highlight-color: #149dfb;
|
||||
$ui-base-lighter-color: #b0c0cf;
|
||||
|
||||
:root {
|
||||
--brand-color: #0482d8;
|
||||
}
|
||||
|
||||
@import 'application';
|
||||
@import 'soapbox-light/diff';
|
||||
|
||||
|
@ -18,16 +20,7 @@ $ui-base-lighter-color: #b0c0cf;
|
|||
transition: 0.1s;
|
||||
outline: none;
|
||||
|
||||
// &.active {
|
||||
// color: darken(#04d8c4, 40%);
|
||||
// }
|
||||
//
|
||||
// &:hover {
|
||||
// color: darken(#04d8c4, 60%);
|
||||
// }
|
||||
|
||||
&::before {
|
||||
// background-color: darken($nav-ui-highlight-color, 10%);
|
||||
bottom: auto;
|
||||
opacity: 0;
|
||||
height: 15px;
|
||||
|
|
|
@ -289,10 +289,10 @@ body {
|
|||
.simple_form input[type="email"],
|
||||
.simple_form input[type="password"],
|
||||
.simple_form textarea {
|
||||
border-color: $gab-brand-default;
|
||||
border-color: var(--brand-color);
|
||||
|
||||
&:hover {
|
||||
border-color: $gab-brand-default;
|
||||
border-color: var(--brand-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -355,7 +355,7 @@ body {
|
|||
|
||||
.admin-wrapper .sidebar ul li a.selected {
|
||||
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 {
|
||||
|
|
|
@ -662,7 +662,7 @@ $small-breakpoint: 960px;
|
|||
$gab-background: $gab-background-base-dark !default;
|
||||
|
||||
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-size: 100% auto;
|
||||
background-repeat: no-repeat;
|
||||
|
@ -959,7 +959,7 @@ $small-breakpoint: 960px;
|
|||
|
||||
h1 {
|
||||
@include font-montserrat;
|
||||
color: $gab-brand-default;
|
||||
color: var(--brand-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -57,7 +57,7 @@ $content-width: 840px;
|
|||
}
|
||||
|
||||
&:hover {
|
||||
color: $gab-brand-default;
|
||||
color: var(--brand-color);
|
||||
background-color: $gab-background;
|
||||
transition: all 100ms linear;
|
||||
transition-property: color, background-color;
|
||||
|
|
|
@ -160,7 +160,7 @@ button {
|
|||
}
|
||||
|
||||
::selection {
|
||||
background: $gab-brand-default;
|
||||
background: var(--brand-color);
|
||||
color: $white;
|
||||
}
|
||||
|
||||
|
|
|
@ -391,7 +391,7 @@
|
|||
}
|
||||
|
||||
a {
|
||||
color: $gab-brand-default;
|
||||
color: var(--brand-color);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
|
@ -453,7 +453,7 @@
|
|||
display: block;
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
color: $gab-brand-default;
|
||||
color: var(--brand-color);
|
||||
border: 0;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
|
@ -592,7 +592,7 @@
|
|||
color: $gab-secondary-text;
|
||||
|
||||
a {
|
||||
color: $gab-brand-default;
|
||||
color: var(--brand-color);
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
|
||||
|
@ -1544,7 +1544,7 @@ a.account__display-name {
|
|||
right: 14px;
|
||||
width: 61px;
|
||||
height: 61px;
|
||||
background-color: $nav-ui-highlight-color;
|
||||
background-color: var(--brand-color);
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
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 {
|
||||
background-color: $gab-brand-default;
|
||||
background-color: var(--brand-color);
|
||||
}
|
||||
|
||||
.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 {
|
||||
left: 27px;
|
||||
border-color: $gab-brand-default;
|
||||
border-color: var(--brand-color);
|
||||
}
|
||||
|
||||
.column-link {
|
||||
|
@ -5090,7 +5090,7 @@ noscript {
|
|||
color: $secondary-text-color;
|
||||
|
||||
a {
|
||||
color: $gab-brand-default !important;
|
||||
color: var(--brand-color) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -5115,7 +5115,7 @@ noscript {
|
|||
display: block;
|
||||
margin: 15px auto;
|
||||
text-align: center;
|
||||
color: $gab-brand-default;
|
||||
color: var(--brand-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -5199,7 +5199,7 @@ noscript {
|
|||
}
|
||||
|
||||
.badge {
|
||||
background-color: $gab-brand-default;
|
||||
background-color: var(--brand-color);
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
|
|
|
@ -71,7 +71,7 @@
|
|||
&:active {
|
||||
outline: 0;
|
||||
color: #fff;
|
||||
background: $gab-brand-default !important;
|
||||
background: var(--brand-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -37,13 +37,13 @@
|
|||
background-size: 100px 1200px;
|
||||
|
||||
&:hover {
|
||||
color: $gab-brand-default;
|
||||
color: var(--brand-color);
|
||||
background-position: 0 -100px;
|
||||
}
|
||||
|
||||
&.group-form__file-label--selected {
|
||||
background-position: 0 -100px;
|
||||
color: $gab-brand-default;
|
||||
color: var(--brand-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -26,7 +26,7 @@
|
|||
color: $gab-secondary-text;
|
||||
|
||||
&__unread {
|
||||
color: $gab-brand-default;
|
||||
color: var(--brand-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -8,7 +8,7 @@ textarea {
|
|||
padding: 7px 10px;
|
||||
border: 1px solid;
|
||||
border-radius: 4px;
|
||||
color: $gab-brand-default;
|
||||
color: var(--brand-color);
|
||||
border-color: $gab-placeholder-accent;
|
||||
background: $gab-background-container;
|
||||
&: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 {
|
||||
display: flex;
|
||||
|
|
|
@ -346,7 +346,7 @@
|
|||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: $gab-brand-default;
|
||||
color: var(--brand-color);
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -359,7 +359,7 @@
|
|||
}
|
||||
|
||||
.nav-button {
|
||||
background: $gab-brand-default;
|
||||
background: var(--brand-color);
|
||||
color: #fff;
|
||||
margin: 8px;
|
||||
margin-left: 0;
|
||||
|
|
|
@ -190,7 +190,7 @@ body.admin {
|
|||
}
|
||||
|
||||
&__reached {
|
||||
color: $gab-brand-default;
|
||||
color: var(--brand-color);
|
||||
}
|
||||
|
||||
.wtf-panel__content {
|
||||
|
@ -208,6 +208,6 @@ body.admin {
|
|||
|
||||
&__progress {
|
||||
height: 100%;
|
||||
background: $gab-brand-default;
|
||||
background: var(--brand-color);
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue