diff --git a/app/styles/_mixins.scss b/app/styles/_mixins.scss
index 2d899e45d..086627589 100644
--- a/app/styles/_mixins.scss
+++ b/app/styles/_mixins.scss
@@ -1,13 +1,13 @@
// THEME MIXINS
// standard container drop shadow
-@mixin light-theme-shadow {
+@mixin standard-panel-shadow {
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
}
// common properties for all standard containers
-@mixin gab-container-standards {
- @include light-theme-shadow;
+@mixin standard-panel {
+ @include standard-panel-shadow;
border-radius: 10px;
background: var(--foreground-color);
}
@@ -49,9 +49,9 @@
padding-left: 15px;
// Chrome does not like these concatinated together
- &::placeholder {color: $gab-placeholder-accent;}
- &:-ms-input-placeholder {color: $gab-placeholder-accent;}
- &::-ms-input-placeholder {color: $gab-placeholder-accent;}
+ &::placeholder {color: var(--primary-text-color-faint);}
+ &:-ms-input-placeholder {color: var(--primary-text-color-faint);}
+ &::-ms-input-placeholder {color: var(--primary-text-color-faint);}
&::-moz-focus-inner {
border: 0;
@@ -68,9 +68,8 @@
@include font-size(12);
@include line-height(14);
@include font-weight(normal);
- background: $gab-background-container;
- border-radius: 4px;
- border: 1px solid $gab-placeholder-accent;
+ background: var(--background-color);
+ border-radius: 6px;
padding: 8px 10px 17px;
margin: 4px 0 0;
color: var(--primary-text-color-faint);
@@ -80,7 +79,7 @@
@include font-size(14);
@include line-height(16);
@include font-weight(bold);
- color: #fff;
+ color: var(--primary-text-color);
}
ul {
diff --git a/app/styles/about.scss b/app/styles/about.scss
index 5f4d94595..7986ac846 100644
--- a/app/styles/about.scss
+++ b/app/styles/about.scss
@@ -244,7 +244,7 @@ $small-breakpoint: 960px;
overflow: hidden;
height: 300px;
position: relative;
- background: darken($ui-base-color, 12%);
+ background: var(--background-color);
&::after {
content: "";
@@ -331,7 +331,7 @@ $small-breakpoint: 960px;
margin: 0;
border-radius: 50%;
border: 4px solid var(--brand-color-faint);
- background: darken($ui-base-color, 8%);
+ background: var(--background-color);
}
}
@@ -466,14 +466,14 @@ $small-breakpoint: 960px;
bottom: 0;
left: 0;
width: 100%;
- border-bottom: 4px solid $ui-primary-color;
+ border-bottom: 4px solid var(--brand-color);
opacity: 0.5;
transition: all 400ms ease;
}
&.active {
&::after {
- border-bottom: 4px solid $highlight-text-color;
+ border-bottom: 4px solid var(--highlight-text-color);
opacity: 1;
}
@@ -504,7 +504,7 @@ $small-breakpoint: 960px;
font-size: 18px;
margin-bottom: 5px;
color: var(--primary-text-color);
- font-family: $font-display, sans-serif;
+ font-family: var(--font-display), sans-serif;
}
}
@@ -594,7 +594,7 @@ $small-breakpoint: 960px;
border-top: 0;
a {
- color: lighten($ui-highlight-color, 8%);
+ color: var(--brand-color);
}
dl:first-child .verified {
@@ -625,7 +625,7 @@ $small-breakpoint: 960px;
}
.static-icon-button {
- color: $action-button-color;
+ color: #0482d8;
font-size: 18px;
& > span {
@@ -698,7 +698,7 @@ $small-breakpoint: 960px;
}
.rich-formatting {
- font-family: $font-sans-serif, sans-serif;
+ font-family: var(--font-sans-serif), sans-serif;
font-size: 16px;
font-weight: 400;
font-size: 16px;
@@ -724,7 +724,7 @@ $small-breakpoint: 960px;
p,
li {
- font-family: $font-sans-serif, sans-serif;
+ font-family: var(--font-sans-serif), sans-serif;
font-size: 16px;
font-weight: 400;
font-size: 16px;
@@ -741,7 +741,7 @@ $small-breakpoint: 960px;
em,
b {
font-weight: bold;
- color: lighten($darker-text-color, 10%);
+ color: var(--primary-text-color);
}
h1,
@@ -750,7 +750,7 @@ $small-breakpoint: 960px;
h4,
h5,
h6 {
- font-family: $font-display, sans-serif;
+ font-family: var(--font-display), sans-serif;
margin-top: 2em;
margin-bottom: 1.25em;
font-weight: 500;
@@ -773,11 +773,11 @@ $small-breakpoint: 960px;
line-height: 30px;
small {
- font-family: $font-sans-serif, sans-serif;
+ font-family: var(--font-sans-serif), sans-serif;
display: block;
font-size: 18px;
font-weight: 400;
- color: lighten($darker-text-color, 10%);
+ color: var(--primary-text-color);
}
}
@@ -841,7 +841,7 @@ $small-breakpoint: 960px;
width: 100%;
height: 0;
border: 0;
- border-bottom: 1px solid rgba($ui-base-lighter-color, .6);
+ border-bottom: 1px solid rgba(var(--background-color), .6);
margin: 2em 0;
&.spacer {
@@ -868,7 +868,7 @@ $small-breakpoint: 960px;
&__section {
flex: 1 0 0;
- font-family: $font-sans-serif, sans-serif;
+ font-family: var(--font-sans-serif), sans-serif;
font-size: 16px;
line-height: 28px;
color: var(--primary-text-color);
@@ -887,7 +887,7 @@ $small-breakpoint: 960px;
}
strong {
- font-family: $font-display, sans-serif;
+ font-family: var(--font-display), sans-serif;
font-weight: 500;
font-size: 32px;
line-height: 48px;
@@ -902,7 +902,7 @@ $small-breakpoint: 960px;
position: absolute;
width: 280px;
box-sizing: border-box;
- background: darken($ui-base-color, 8%);
+ background: var(--background-color);
padding: 20px;
padding-top: 10px;
border-radius: 4px 4px 0 0;
@@ -910,7 +910,7 @@ $small-breakpoint: 960px;
bottom: -40px;
.panel-header {
- font-family: $font-display, sans-serif;
+ font-family: var(--font-display), sans-serif;
font-size: 14px;
line-height: 24px;
font-weight: 500;
@@ -925,7 +925,7 @@ $small-breakpoint: 960px;
a,
span {
font-weight: 400;
- color: darken($darker-text-color, 10%);
+ color: var(--primary-text-color);
}
a {
@@ -977,7 +977,7 @@ $small-breakpoint: 960px;
.landing-page {
p,
li {
- font-family: $font-sans-serif, sans-serif;
+ font-family: var(--font-sans-serif), sans-serif;
font-size: 16px;
font-weight: 400;
font-size: 16px;
@@ -1000,11 +1000,11 @@ $small-breakpoint: 960px;
font-family: inherit;
font-size: inherit;
line-height: inherit;
- color: lighten($darker-text-color, 10%);
+ color: var(--primary-text-color);
}
h1 {
- font-family: $font-display, sans-serif;
+ font-family: var(--font-display), sans-serif;
font-size: 26px;
line-height: 30px;
font-weight: 500;
@@ -1012,16 +1012,16 @@ $small-breakpoint: 960px;
color: var(--primary-text-color-faint);
small {
- font-family: $font-sans-serif, sans-serif;
+ font-family: var(--font-sans-serif), sans-serif;
display: block;
font-size: 18px;
font-weight: 400;
- color: lighten($darker-text-color, 10%);
+ color: var(--primary-text-color);
}
}
h2 {
- font-family: $font-display, sans-serif;
+ font-family: var(--font-display), sans-serif;
font-size: 22px;
line-height: 26px;
font-weight: 500;
@@ -1030,7 +1030,7 @@ $small-breakpoint: 960px;
}
h3 {
- font-family: $font-display, sans-serif;
+ font-family: var(--font-display), sans-serif;
font-size: 18px;
line-height: 24px;
font-weight: 500;
@@ -1039,7 +1039,7 @@ $small-breakpoint: 960px;
}
h4 {
- font-family: $font-display, sans-serif;
+ font-family: var(--font-display), sans-serif;
font-size: 16px;
line-height: 24px;
font-weight: 500;
@@ -1048,7 +1048,7 @@ $small-breakpoint: 960px;
}
h5 {
- font-family: $font-display, sans-serif;
+ font-family: var(--font-display), sans-serif;
font-size: 14px;
line-height: 24px;
font-weight: 500;
@@ -1057,7 +1057,7 @@ $small-breakpoint: 960px;
}
h6 {
- font-family: $font-display, sans-serif;
+ font-family: var(--font-display), sans-serif;
font-size: 12px;
line-height: 24px;
font-weight: 500;
@@ -1095,7 +1095,7 @@ $small-breakpoint: 960px;
width: 100%;
height: 0;
border: 0;
- border-bottom: 1px solid rgba($ui-base-lighter-color, .6);
+ border-bottom: 1px solid rgba(var(--background-color), .6);
margin: 20px 0;
&.spacer {
@@ -1171,7 +1171,7 @@ $small-breakpoint: 960px;
strong {
font-weight: 500;
- color: lighten($darker-text-color, 10%);
+ color: var(--primary-text-color);
}
.account {
@@ -1535,7 +1535,7 @@ $small-breakpoint: 960px;
padding: 10px;
strong {
- font-family: $font-display, sans-serif;
+ font-family: var(--font-display), sans-serif;
font-size: 15px;
font-weight: 700;
display: block;
diff --git a/app/styles/accounts.scss b/app/styles/accounts.scss
index 75d4ae122..e6dd0829f 100644
--- a/app/styles/accounts.scss
+++ b/app/styles/accounts.scss
@@ -21,7 +21,7 @@
&__img {
height: 130px;
position: relative;
- background: darken($ui-base-color, 12%);
+ background: var(--background-color);
border-radius: 4px 4px 0 0;
img {
@@ -67,7 +67,7 @@
display: block;
margin: 0;
border-radius: 4px;
- background: darken($ui-base-color, 8%);
+ background: var(--background-color);
object-fit: cover;
}
}
@@ -118,7 +118,7 @@
.current {
background: $simple-background-color;
border-radius: 100px;
- color: $inverted-text-color;
+ color: var(--inverted-text-color);
cursor: default;
margin: 0 10px;
}
@@ -155,7 +155,7 @@
.disabled {
cursor: default;
- color: lighten($inverted-text-color, 10%);
+ color: var(--inverted-text-color);
}
@media screen and (max-width: 700px) {
@@ -205,9 +205,9 @@
font-size: 12px;
line-height: 12px;
font-weight: 500;
- color: $ui-secondary-color;
- background-color: rgba($ui-secondary-color, 0.1);
- border: 1px solid rgba($ui-secondary-color, 0.5);
+ color: var(--background-color);
+ background-color: rgba(var(--background-color), 0.1);
+ border: 1px solid rgba(var(--background-color), 0.5);
&.moderator {
color: $success-green;
@@ -252,7 +252,7 @@
width: 120px;
flex: 0 0 auto;
color: var(--primary-text-color-faint);
- background: rgba(darken($ui-base-color, 8%), 0.5);
+ background: rgba(var(--background-color), 0.5);
}
dd {
@@ -299,7 +299,7 @@
color: var(--primary-text-color-faint);
a {
- color: $ui-secondary-color;
+ color: var(--background-color);
text-decoration: none;
&:hover,
diff --git a/app/styles/basics.scss b/app/styles/basics.scss
index a012f6622..458526353 100644
--- a/app/styles/basics.scss
+++ b/app/styles/basics.scss
@@ -37,8 +37,7 @@ body {
// Fira Sans => Firefox OS
// Droid Sans => Older Androids (<4.0)
// Helvetica Neue => Older macOS <10.11
- // $font-sans-serif => web-font (Roboto) fallback and newer Androids (>=4.0)
- font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", $font-sans-serif, sans-serif;
+ font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}
&.app-body {
diff --git a/app/styles/boost.scss b/app/styles/boost.scss
index 5a6d6ae40..a26292c35 100644
--- a/app/styles/boost.scss
+++ b/app/styles/boost.scss
@@ -1,11 +1,11 @@
button.icon-button i.fa-retweet {
- background-image: url("data:image/svg+xml;utf8,");
+ background-image: url("data:image/svg+xml;utf8,");
&:hover {
- background-image: url("data:image/svg+xml;utf8,");
+ background-image: url("data:image/svg+xml;utf8,");
}
}
button.icon-button.disabled i.fa-retweet {
- background-image: url("data:image/svg+xml;utf8,");
+ background-image: url("data:image/svg+xml;utf8,");
}
diff --git a/app/styles/components.scss b/app/styles/components.scss
index 28fb3b924..bdcf0c6eb 100644
--- a/app/styles/components.scss
+++ b/app/styles/components.scss
@@ -68,13 +68,13 @@
}
&.button-alternative {
- color: $inverted-text-color;
- background: $ui-primary-color;
+ color: var(--inverted-text-color);
+ background: var(--brand-color);
&:active,
&:focus,
&:hover {
- background-color: lighten($ui-primary-color, 4%);
+ background-color: var(--brand-color);
}
}
@@ -92,13 +92,13 @@
color: var(--primary-text-color-faint);
background: transparent;
padding: 3px 15px;
- border: 1px solid $ui-primary-color;
+ border: 1px solid var(--brand-color);
&:active,
&:focus,
&:hover {
- border-color: lighten($ui-primary-color, 4%);
- color: lighten($darker-text-color, 4%);
+ border-color: var(--brand-color);
+ color: var(--primary-text-color);
}
&:disabled {
@@ -121,7 +121,7 @@
.icon-button {
display: inline-block;
padding: 0;
- color: var(--primary-text-color-faint);
+ color: rgba(var(--primary-text-color-rgb), 0.4);
border: 0;
background: transparent;
cursor: pointer;
@@ -134,12 +134,12 @@
&:hover,
&:active,
&:focus {
- color: lighten($action-button-color, 7%);
+ color: lighten(#0482d8, 7%);
transition: color 200ms ease-out;
}
&.disabled {
- color: darken($action-button-color, 13%);
+ color: darken(#0482d8, 13%);
cursor: default;
}
@@ -163,18 +163,18 @@
&:hover,
&:active,
&:focus {
- color: darken($lighter-text-color, 7%);
+ color: var(--primary-text-color-faint);
}
&.disabled {
- color: lighten($lighter-text-color, 7%);
+ color: var(--primary-text-color-faint);
}
&.active {
color: var(--highlight-text-color);
&.disabled {
- color: lighten($highlight-text-color, 13%);
+ color: var(--highlight-text-color);
}
}
}
@@ -207,12 +207,12 @@
&:hover,
&:active,
&:focus {
- color: darken($lighter-text-color, 7%);
+ color: var(--primary-text-color-faint);
transition: color 200ms ease-out;
}
&.disabled {
- color: lighten($lighter-text-color, 20%);
+ color: var(--primary-text-color-faint);
cursor: default;
}
@@ -252,7 +252,7 @@
.ellipsis::after {content: "…";}
.timeline-compose-block {
- @include gab-container-standards;
+ @include standard-panel;
display: flex;
align-items: flex-start;
padding: 20px;
@@ -317,7 +317,7 @@
.reply-indicator {
border-radius: 4px;
margin-bottom: 10px;
- background: $gab-background-base-light;
+ background: var(--background-color);
padding: 10px;
min-height: 23px;
overflow-y: auto;
@@ -338,7 +338,7 @@
}
.reply-indicator__display-name {
- color: $inverted-text-color;
+ color: var(--inverted-text-color);
display: block;
max-width: 100%;
line-height: 24px;
@@ -403,7 +403,7 @@
text-decoration: underline;
.fa {
- color: lighten($dark-text-color, 7%);
+ color: var(--primary-text-color);
}
}
@@ -418,7 +418,7 @@
}
.fa {
- color: $dark-text-color;
+ color: var(--primary-text-color);
}
}
@@ -487,7 +487,7 @@
}
.status__wrapper--filtered {
- color: $dark-text-color;
+ color: var(--primary-text-color);
border: 0;
font-size: inherit;
text-align: center;
@@ -571,16 +571,16 @@
.display-name {
strong {
- color: $inverted-text-color;
+ color: var(--inverted-text-color);
}
span {
- color: $light-text-color;
+ color: var(--primary-text-color-faint);
}
}
.status__content {
- color: $inverted-text-color;
+ color: var(--inverted-text-color);
a {
color: var(--highlight-text-color);
@@ -588,10 +588,10 @@
a.status__content__spoiler-link {
color: var(--primary-text-color);
- background: $ui-primary-color;
+ background: var(--brand-color);
&:hover {
- background: lighten($ui-primary-color, 8%);
+ background: var(--brand-color);
}
}
}
@@ -618,7 +618,7 @@
background: transparent;
.icon-button.disabled {
- color: lighten($action-button-color, 13%);
+ color: lighten(#0482d8, 13%);
}
}
}
@@ -646,7 +646,7 @@
}
.status-check-box {
- border-bottom: 1px solid $ui-secondary-color;
+ border-bottom: 1px solid var(--background-color);
display: flex;
.status-check-box__status {
@@ -683,14 +683,14 @@
.status__prepend {
margin-left: 68px;
- color: $dark-text-color;
+ color: var(--primary-text-color);
padding: 8px 0;
padding-bottom: 2px;
font-size: 14px;
position: relative;
.status__display-name strong {
- color: $dark-text-color;
+ color: var(--primary-text-color);
}
> span {
@@ -720,7 +720,7 @@
width: 14px;
font-size: 12px;
font-weight: 500;
- color: $action-button-color;
+ color: #0482d8;
}
}
}
@@ -735,7 +735,7 @@
}
.reply-indicator__content {
- color: $gab-default-text-light;
+ color: var(--primary-text-color);
font-size: 14px;
user-select: text;
@@ -870,7 +870,7 @@ a .account__avatar {
.account__disclaimer {
padding: 10px;
border-top: 1px solid var(--brand-color-med);
- color: $dark-text-color;
+ color: var(--primary-text-color);
strong {
font-weight: 500;
@@ -1073,11 +1073,11 @@ a.account__display-name {
.muted {
.status__content p,
.status__content a {
- color: $dark-text-color;
+ color: var(--primary-text-color);
}
.status__display-name strong {
- color: $dark-text-color;
+ color: var(--primary-text-color);
}
.status__avatar {
@@ -1086,7 +1086,7 @@ a.account__display-name {
a.status__content__spoiler-link {
background: var(--brand-color-med);
- color: $inverted-text-color;
+ color: var(--inverted-text-color);
&:hover {
background: var(--brand-color-faint);
@@ -1625,7 +1625,7 @@ a.account__display-name {
border-radius: 8px;
text-align: center;
color: #fff;
- background: $nav-ui-highlight-color;
+ background: var(--brand-color);
@media screen and (max-width: 895px) {
top: 0;
@@ -1634,7 +1634,7 @@ a.account__display-name {
}
.column-link--transparent .icon-with-badge__badge {
- border-color: darken($ui-base-color, 8%);
+ border-color: var(--background-color);
}
.promo-panel {
@@ -1644,7 +1644,7 @@ a.account__display-name {
}
.promo-panel-item {
- @include light-theme-shadow;
+ @include standard-panel-shadow;
display: block;
height: 42px;
line-height: 42px;
@@ -1713,7 +1713,7 @@ a.account__display-name {
}
.pseudo-drawer {
- background: lighten($ui-base-color, 13%);
+ background: var(--background-color);
font-size: 13px;
text-align: left;
}
@@ -1730,7 +1730,7 @@ a.account__display-name {
transition: background 100ms ease-in;
&:hover {
- background: lighten($ui-base-color, 3%);
+ background: var(--background-color);
transition: background 200ms ease-out;
}
}
@@ -1846,7 +1846,7 @@ a.account__display-name {
}
.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
- background-color: darken($ui-base-color, 10%);
+ background-color: var(--background-color);
}
.react-toggle--checked .react-toggle-track {
@@ -1854,7 +1854,7 @@ a.account__display-name {
}
.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
- background-color: lighten($gab-brand-default, 10%);
+ background-color: var(--brand-color-hicontrast);
}
.react-toggle-track-check {
@@ -1933,7 +1933,7 @@ a.account__display-name {
&--transparent {
background: transparent;
- color: $ui-secondary-color;
+ color: var(--background-color);
&:hover,
&:focus,
@@ -2095,7 +2095,7 @@ a.account__display-name {
}
.reduce-motion button.icon-button i.fa-retweet {
- color: $action-button-color;
+ color: #0482d8;
transition: color 100ms ease-in;
}
@@ -2108,7 +2108,7 @@ a.account__display-name {
font-size: 14px;
border: 1px solid var(--brand-color-med);
border-radius: 4px;
- color: $dark-text-color;
+ color: var(--primary-text-color);
margin-top: 14px;
text-decoration: none;
overflow: hidden;
@@ -2282,7 +2282,7 @@ a.status-card.compact:hover {
.load-more {
display: block;
- color: $dark-text-color;
+ color: var(--primary-text-color);
background-color: transparent;
border: 0;
font-size: inherit;
@@ -2308,7 +2308,7 @@ a.status-card.compact:hover {
text-align: center;
font-size: 16px;
font-weight: 500;
- color: $dark-text-color;
+ color: var(--primary-text-color);
background: var(--brand-color-med);
cursor: default;
display: flex;
@@ -2327,7 +2327,7 @@ a.status-card.compact:hover {
strong {
display: block;
margin-bottom: 10px;
- color: $dark-text-color;
+ color: var(--primary-text-color);
}
span {
@@ -2341,7 +2341,7 @@ a.status-card.compact:hover {
text-align: center;
font-size: 16px;
font-weight: 500;
- color: $dark-text-color;
+ color: var(--primary-text-color);
background: var(--brand-color-med);
cursor: default;
display: flex;
@@ -2360,13 +2360,13 @@ a.status-card.compact:hover {
strong {
display: block;
margin-bottom: 10px;
- color: $dark-text-color;
+ color: var(--primary-text-color);
}
}
}
.columns-area--mobile .column {
- @include gab-container-standards;
+ @include standard-panel;
}
.column-header__wrapper {
@@ -2387,7 +2387,7 @@ a.status-card.compact:hover {
pointer-events: none;
height: 28px;
z-index: 1;
- background: radial-gradient(ellipse, rgba($ui-highlight-color, 0.23) 0%, rgba($ui-highlight-color, 0) 60%);
+ background: radial-gradient(ellipse, rgba(var(--brand-color), 0.23) 0%, rgba(var(--brand-color), 0) 60%);
}
}
}
@@ -2449,11 +2449,11 @@ a.status-card.compact:hover {
}
&.active {
- box-shadow: 0 1px 0 rgba($highlight-text-color, 0.3);
+ box-shadow: 0 1px 0 rgba(var(--highlight-text-color), 0.3);
.column-header__icon {
color: var(--highlight-text-color);
- text-shadow: 0 0 10px rgba($highlight-text-color, 0.4);
+ text-shadow: 0 0 10px rgba(var(--highlight-text-color), 0.4);
}
}
@@ -2478,11 +2478,11 @@ a.status-card.compact:hover {
border: 0;
padding: 0 15px;
font-size: 16px;
- color: var(--primary-text-color);
+ color: var(--primary-text-color-faint);
background: transparent;
&:hover {
- color: var(--primary-text-color-faint);
+ color: rgba(var(--primary-text-color-rgb), 0.8);
}
&.active {
@@ -2682,7 +2682,7 @@ a.status-card.compact:hover {
&:active,
&:focus {
padding: 0;
- color: lighten($darker-text-color, 8%);
+ color: var(--primary-text-color);
}
}
@@ -2787,7 +2787,7 @@ a.status-card.compact:hover {
}
&__placeholder {
- color: $dark-text-color;
+ color: var(--primary-text-color);
padding-left: 2px;
font-size: 12px;
}
@@ -2806,7 +2806,7 @@ a.status-card.compact:hover {
&:active,
&:focus {
background: var(--brand-color-med);
- color: lighten($darker-text-color, 4%);
+ color: var(--primary-text-color);
}
}
}
@@ -2820,12 +2820,12 @@ a.status-card.compact:hover {
&__dropdown-indicator {
cursor: pointer;
transition: none;
- color: $dark-text-color;
+ color: var(--primary-text-color);
&:hover,
&:active,
&:focus {
- color: lighten($dark-text-color, 4%);
+ color: var(--primary-text-color);
}
}
@@ -2836,7 +2836,7 @@ a.status-card.compact:hover {
&__menu {
@include search-popout;
padding: 0;
- background: $ui-secondary-color;
+ background: var(--background-color);
}
&__menu-list {
@@ -2844,13 +2844,13 @@ a.status-card.compact:hover {
}
&__option {
- color: $inverted-text-color;
+ color: var(--inverted-text-color);
border-radius: 4px;
font-size: 14px;
&--is-focused,
&--is-selected {
- background: darken($ui-secondary-color, 10%);
+ background: var(--background-color);
}
}
}
@@ -2895,7 +2895,7 @@ a.status-card.compact:hover {
.empty-column-indicator,
.error-column {
- color: $dark-text-color;
+ color: var(--primary-text-color);
background: var(--brand-color-med);
text-align: center;
padding: 40px;
@@ -3043,7 +3043,7 @@ a.status-card.compact:hover {
&:hover,
&:focus,
&:active {
- background: rgba($ui-secondary-color, 0.4);
+ background: rgba(var(--background-color), 0.4);
}
}
@@ -3209,7 +3209,7 @@ a.status-card.compact:hover {
}
.privacy-dropdown__option {
- color: $inverted-text-color;
+ color: var(--inverted-text-color);
padding: 10px;
cursor: pointer;
display: flex;
@@ -3230,7 +3230,7 @@ a.status-card.compact:hover {
}
&.active:hover {
- background: lighten($ui-highlight-color, 4%);
+ background: var(--brand-color);
}
}
@@ -3248,7 +3248,7 @@ a.status-card.compact:hover {
strong {
font-weight: 500;
display: block;
- color: $inverted-text-color;
+ color: var(--inverted-text-color);
@each $lang in $cjk-langs {
&:lang(#{$lang}) {
@@ -3317,7 +3317,7 @@ a.status-card.compact:hover {
z-index: 2;
width: 18px;
height: 18px;
- color: $gab-placeholder-accent;
+ color: var(--primary-text-color-faint);
opacity: 0;
pointer-events: none;
@@ -3337,7 +3337,7 @@ a.status-card.compact:hover {
}
.search-results__header {
- color: $dark-text-color;
+ color: var(--primary-text-color);
background: var(--brand-color-med);
padding: 15px;
font-weight: 500;
@@ -3361,7 +3361,7 @@ a.status-card.compact:hover {
padding: 15px;
font-weight: 500;
font-size: 16px;
- color: $dark-text-color;
+ color: var(--primary-text-color);
.fa {
display: inline-block;
@@ -3384,7 +3384,7 @@ a.status-card.compact:hover {
&:hover,
&:active,
&:focus {
- color: lighten($secondary-text-color, 4%);
+ color: var(--primary-text-color);
text-decoration: underline;
}
}
@@ -3445,7 +3445,7 @@ a.status-card.compact:hover {
&__icon {
flex: 0 0 auto;
- color: $dark-text-color;
+ color: var(--primary-text-color);
padding: 8px 18px;
cursor: default;
border-right: 1px solid var(--brand-color-med);
@@ -3475,7 +3475,7 @@ a.status-card.compact:hover {
a {
text-decoration: none;
- color: $dark-text-color;
+ color: var(--primary-text-color);
font-weight: 500;
&:hover {
@@ -3494,7 +3494,7 @@ a.status-card.compact:hover {
}
.fa {
- color: $dark-text-color;
+ color: var(--primary-text-color);
}
}
}
@@ -3765,7 +3765,7 @@ a.status-card.compact:hover {
&:hover,
&:active,
&:focus {
- color: lighten($darker-text-color, 7%);
+ color: var(--primary-text-color);
}
}
@@ -4233,7 +4233,7 @@ noscript {
border: 0;
border-radius: 5px;
padding: 10px;
- font-family: $font-monospace, monospace;
+ font-family: var(--font-monospace), monospace;
background: var(--brand-color-med);
color: var(--primary-text-color);
font-size: 14px;
@@ -4282,7 +4282,7 @@ noscript {
&__message {
position: relative;
margin-left: 58px;
- color: $dark-text-color;
+ color: var(--primary-text-color);
padding: 8px 0;
padding-top: 0;
padding-bottom: 4px;
@@ -4359,7 +4359,7 @@ noscript {
h4 {
padding: 15px 0;
- background: lighten($ui-base-color, 13%);
+ background: var(--background-color);
font-weight: 500;
font-size: 16px;
text-align: center;
@@ -4377,7 +4377,7 @@ noscript {
}
&__accounts {
- background: lighten($ui-base-color, 13%);
+ background: var(--background-color);
overflow-y: auto;
max-height: 200px;
}
@@ -4424,12 +4424,12 @@ noscript {
}
&__account {
- background: lighten($ui-base-color, 13%);
+ background: var(--background-color);
border-radius: 4px;
}
&__lists {
- background: lighten($ui-base-color, 13%);
+ background: var(--background-color);
}
.list {
@@ -4536,7 +4536,7 @@ noscript {
.trends {
&__header {
- color: $dark-text-color;
+ color: var(--primary-text-color);
background: var(--brand-color-faint);
border-bottom: 1px solid var(--brand-color-med);
font-weight: 500;
@@ -4562,7 +4562,7 @@ noscript {
&__name {
flex: 1 1 auto;
- color: $dark-text-color;
+ color: var(--primary-text-color);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@@ -4607,7 +4607,7 @@ noscript {
width: 50px;
path {
- stroke: lighten($highlight-text-color, 6%) !important;
+ stroke: var(--highlight-text-color) !important;
}
}
}
@@ -4629,7 +4629,7 @@ noscript {
&:focus,
&:active {
svg path:first-child {
- fill: lighten($ui-base-color, 16%);
+ fill: var(--background-color);
}
}
}
@@ -4643,7 +4643,7 @@ noscript {
}
path:last-child {
- fill: darken($ui-base-color, 14%);
+ fill: var(--background-color);
}
}
@@ -4660,14 +4660,14 @@ noscript {
}
.wtf-panel {
- @include light-theme-shadow;
+ @include standard-panel-shadow;
display: flex;
width: 100%;
border-radius: 10px;
flex-direction: column;
height: auto;
box-sizing: border-box;
- background: $gab-background-container;
+ background: var(--foreground-color);
&:not(:last-of-type) {
margin-bottom: 10px;
@@ -4828,7 +4828,7 @@ noscript {
.compose-modal {
padding: 8px 0 0;
overflow: hidden;
- background-color: $classic-base-color;
+ background-color: var(--background-color);
border-radius: 6px;
flex-direction: column;
width: 600px;
@@ -4837,7 +4837,7 @@ noscript {
&__header {
display: block;
position: relative;
- border-bottom: 1px solid lighten($classic-base-color, 8%);
+ border-bottom: 1px solid var(--background-color);
border-radius: 6px 6px 0 0;
padding-top: 12px;
padding-bottom: 12px;
@@ -4849,7 +4849,7 @@ noscript {
font-size: 18px;
font-weight: bold;
line-height: 24px;
- color: $gab-background-base-light;
+ color: var(--background-color);
text-align: center;
}
}
diff --git a/app/styles/components/buttons.scss b/app/styles/components/buttons.scss
index 2dfb4c394..b29aa9827 100644
--- a/app/styles/components/buttons.scss
+++ b/app/styles/components/buttons.scss
@@ -14,7 +14,7 @@ a.button {
border-radius: 4px;
text-transform: uppercase;
color: #fff;
- background: $gab-small-cta-primary;
+ background: #607cf5;
}
}
diff --git a/app/styles/components/compose-form.scss b/app/styles/components/compose-form.scss
index 35e5b3bb2..9b48619df 100644
--- a/app/styles/components/compose-form.scss
+++ b/app/styles/components/compose-form.scss
@@ -12,7 +12,7 @@
.checkbox {
display: inline-block;
position: relative;
- border: 1px solid $ui-primary-color;
+ border: 1px solid var(--brand-color);
box-sizing: border-box;
width: 18px;
height: 18px;
@@ -32,7 +32,7 @@
.compose-form__warning {
color: var(--primary-text-color);
margin-bottom: 10px;
- background: $ui-primary-color;
+ background: var(--brand-color);
box-shadow: 0 2px 6px rgba($base-shadow-color, 0.3);
padding: 8px 10px;
border-radius: 4px;
@@ -40,7 +40,7 @@
font-weight: 400;
strong {
- color: $inverted-text-color;
+ color: var(--inverted-text-color);
font-weight: 500;
@each $lang in $cjk-langs {
&:lang(#{$lang}) {
@@ -97,7 +97,7 @@
box-sizing: border-box;
width: 100%;
margin: 0;
- color: $inverted-text-color;
+ color: var(--inverted-text-color);
background: #f2f2f2;
padding: 10px;
font-family: inherit;
@@ -146,9 +146,9 @@
width: 100%;
z-index: 99;
box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4);
- background: $ui-secondary-color;
+ background: var(--background-color);
border-radius: 0 0 4px 4px;
- color: $inverted-text-color;
+ color: var(--inverted-text-color);
font-size: 14px;
padding: 6px;
&.autosuggest-textarea__suggestions--visible {display: block;}
@@ -163,7 +163,7 @@
&:focus,
&:active,
&.selected {
- background: darken($ui-secondary-color, 10%);
+ background: var(--background-color);
}
}
@@ -187,7 +187,7 @@
.autosuggest-account .display-name__account {color: var(--highlight-text-color);}
.compose-form__modifiers {
- color: $inverted-text-color;
+ color: var(--inverted-text-color);
font-family: inherit;
font-size: 14px;
background: $simple-background-color;
@@ -228,7 +228,7 @@
&:hover,
&:focus,
&:active {
- color: $gab-text-highlight;
+ color: var(--highlight-text-color);
}
}
&.active {opacity: 1;}
@@ -283,7 +283,7 @@
.compose-form__buttons-wrapper {
padding: 10px;
- background: $gab-background-base-light;
+ background: var(--background-color);
border-radius: 0 0 4px 4px;
display: flex;
justify-content: space-between;
@@ -311,7 +311,7 @@
.character-counter {
cursor: default;
- font-family: $font-sans-serif, sans-serif;
+ font-family: var(--font-sans-serif), sans-serif;
font-size: 14px;
font-weight: 600;
color: var(--primary-text-color-faint);
diff --git a/app/styles/components/dropdown-menu.scss b/app/styles/components/dropdown-menu.scss
index 905a1b7fe..7893df7c5 100644
--- a/app/styles/components/dropdown-menu.scss
+++ b/app/styles/components/dropdown-menu.scss
@@ -109,7 +109,7 @@
& > ul {
list-style: none;
- background: $ui-secondary-color;
+ background: var(--background-color);
padding: 4px 0;
border-radius: 4px;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.4);
@@ -134,8 +134,8 @@
padding: 4px 14px;
box-sizing: border-box;
text-decoration: none;
- background: $ui-secondary-color;
- color: $inverted-text-color;
+ background: var(--background-color);
+ color: var(--inverted-text-color);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
diff --git a/app/styles/components/group-card.scss b/app/styles/components/group-card.scss
index fb4cad7c1..0fbb4f195 100644
--- a/app/styles/components/group-card.scss
+++ b/app/styles/components/group-card.scss
@@ -1,5 +1,5 @@
.group-column-header {
- @include gab-container-standards;
+ @include standard-panel;
overflow: hidden;
.group-column-header__title {
@@ -26,7 +26,7 @@
}
.group-card {
- @include gab-container-standards;
+ @include standard-panel;
display: block;
flex: 0 0 calc(50% - 20px/2);
margin-bottom: 20px;
@@ -39,7 +39,7 @@
img {
pointer-events: none;
width: 100%;
- background: $gab-background-container;
+ background: var(--foreground-color);
}
}
diff --git a/app/styles/components/group-detail.scss b/app/styles/components/group-detail.scss
index 43c798fb6..b5c96aff0 100644
--- a/app/styles/components/group-detail.scss
+++ b/app/styles/components/group-detail.scss
@@ -9,7 +9,7 @@
.group__header {
width: 100%;
max-width: 1150px;
- background: $gab-background-container;
+ background: var(--foreground-color);
border-radius: 10px;
overflow: hidden;
margin: 20px 0;
@@ -69,14 +69,14 @@
display: inline-block;
margin-bottom: 10px;
border-radius: 4px;
- background: $gab-background-container;
+ background: var(--foreground-color);
font-size: 13px;
padding: 4px 8px;
}
}
.group__feed {
- background: $gab-background-container;
+ background: var(--foreground-color);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
overflow: hidden;
diff --git a/app/styles/components/group-form.scss b/app/styles/components/group-form.scss
index 9bfe325d4..0b89bc87b 100644
--- a/app/styles/components/group-form.scss
+++ b/app/styles/components/group-form.scss
@@ -1,5 +1,5 @@
.group-form {
- @include gab-container-standards;
+ @include standard-panel;
padding: 20px;
&,
diff --git a/app/styles/components/hotkeys-modal.scss b/app/styles/components/hotkeys-modal.scss
index af5ef6cd8..504a000fe 100644
--- a/app/styles/components/hotkeys-modal.scss
+++ b/app/styles/components/hotkeys-modal.scss
@@ -1,7 +1,7 @@
.hotkeys-modal {
padding: 8px 0 0;
overflow: hidden;
- background-color: $classic-base-color;
+ background-color: var(--background-color);
border-radius: 6px;
flex-direction: column;
@@ -10,7 +10,7 @@
}
.compose-modal__content {
- background-color: $gab-background-base-light;
+ background-color: var(--background-color);
margin: 5px;
@media screen and (max-width: 960px) {
diff --git a/app/styles/components/inputs.scss b/app/styles/components/inputs.scss
index ecd73d096..e38654acb 100644
--- a/app/styles/components/inputs.scss
+++ b/app/styles/components/inputs.scss
@@ -3,14 +3,14 @@ textarea {
&.standard {
@include font-size(16);
@include line-height(18);
- @include input-placeholder($gab-placeholder-accent);
+ @include input-placeholder(var(--primary-text-color-faint));
box-sizing: border-box;
padding: 7px 10px;
border: 1px solid;
border-radius: 4px;
color: var(--brand-color);
- border-color: $gab-placeholder-accent;
- background: $gab-background-container;
+ border-color: var(--primary-text-color-faint);
+ background: var(--foreground-color);
&:focus {outline: none;}
}
}
diff --git a/app/styles/components/modal.scss b/app/styles/components/modal.scss
index f8dbb43cd..897af0e1a 100644
--- a/app/styles/components/modal.scss
+++ b/app/styles/components/modal.scss
@@ -143,7 +143,7 @@
a {
text-decoration: none;
font-weight: 500;
- color: $ui-secondary-color;
+ color: var(--background-color);
&:hover,
&:focus,
@@ -182,8 +182,8 @@
.onboarding-modal,
.error-modal,
.embed-modal {
- background: $ui-secondary-color;
- color: $inverted-text-color;
+ background: var(--background-color);
+ color: var(--inverted-text-color);
border-radius: 8px;
overflow: hidden;
display: flex;
@@ -230,7 +230,7 @@
.onboarding-modal__paginator,
.error-modal__footer {
flex: 0 0 auto;
- background: darken($ui-secondary-color, 8%);
+ background: var(--background-color);
display: flex;
padding: 25px;
@@ -254,18 +254,18 @@
&:hover,
&:focus,
&:active {
- color: darken($lighter-text-color, 4%);
- background-color: darken($ui-secondary-color, 16%);
+ color: var(--primary-text-color-faint);
+ background-color: var(--background-color);
}
&.onboarding-modal__done,
&.onboarding-modal__next {
- color: $inverted-text-color;
+ color: var(--inverted-text-color);
&:hover,
&:focus,
&:active {
- color: lighten($inverted-text-color, 4%);
+ color: var(--inverted-text-color);
}
}
}
@@ -282,7 +282,7 @@
&__label {
font-weight: 500;
- color: $inverted-text-color;
+ color: var(--inverted-text-color);
margin-bottom: 5px;
text-transform: uppercase;
font-size: 12px;
@@ -315,9 +315,9 @@
width: 480px;
max-width: 90vw;
border-radius: 4px;
- border: 1px solid $gab-placeholder-accent;
+ border: 1px solid var(--primary-text-color-faint);
color: var(--primary-text-color-faint);
- background: $gab-background-container;
+ background: var(--foreground-color);
.status__display-name {
display: block;
@@ -334,14 +334,14 @@
}
.status__content__spoiler-link {
- color: lighten($secondary-text-color, 8%);
+ color: var(--primary-text-color);
}
}
.actions-modal {
.status {
background: #ffffff;
- border-bottom-color: $ui-secondary-color;
+ border-bottom-color: var(--background-color);
padding-top: 10px;
padding-bottom: 10px;
}
@@ -350,7 +350,7 @@
display: block;
margin: 10px;
height: 1px;
- background: $gab-background-base;
+ background: var(--background-color);
}
}
@@ -369,7 +369,7 @@
.mute-modal__action-bar {
display: flex;
justify-content: space-between;
- background: $ui-secondary-color;
+ background: var(--background-color);
padding: 10px;
line-height: 36px;
@@ -409,7 +409,7 @@
.report-modal__container {
display: flex;
- border-top: 1px solid $ui-secondary-color;
+ border-top: 1px solid var(--background-color);
@media screen and (max-width: 480px) {
flex-wrap: wrap;
@@ -450,7 +450,7 @@
.report-modal__comment {
padding: 20px;
- border-right: 1px solid $ui-secondary-color;
+ border-right: 1px solid var(--background-color);
max-width: 320px;
p {
@@ -464,7 +464,7 @@
box-sizing: border-box;
width: 100%;
margin: 0;
- color: $inverted-text-color;
+ color: var(--inverted-text-color);
background: #ffffff;
padding: 10px;
font-family: inherit;
@@ -473,11 +473,11 @@
border: 0;
outline: 0;
border-radius: 4px;
- border: 1px solid $ui-secondary-color;
+ border: 1px solid var(--background-color);
margin-bottom: 20px;
&:focus {
- border: 1px solid darken($ui-secondary-color, 8%);
+ border: 1px solid var(--background-color);
}
}
@@ -486,7 +486,7 @@
margin-bottom: 24px;
&__label {
- color: $inverted-text-color;
+ color: var(--inverted-text-color);
font-size: 14px;
}
}
@@ -546,8 +546,8 @@
&:focus {
&,
button {
- background: $gab-background-base;
- color: $gab-text-highlight;
+ background: var(--background-color);
+ color: var(--highlight-text-color);
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);
}
}
@@ -570,7 +570,7 @@
&:hover,
&:focus,
&:active {
- color: darken($lighter-text-color, 4%);
+ color: var(--primary-text-color-faint);
}
}
@@ -607,7 +607,7 @@
}
.modal-layout {
- background: var(--brand-color-med) url('data:image/svg+xml;utf8,') repeat-x bottom fixed;
+ background: var(--brand-color-med) url('data:image/svg+xml;utf8,') repeat-x bottom fixed;
display: flex;
flex-direction: column;
height: 100vh;
diff --git a/app/styles/components/sidebar-menu.scss b/app/styles/components/sidebar-menu.scss
index 15af6eff4..4ab2b450c 100644
--- a/app/styles/components/sidebar-menu.scss
+++ b/app/styles/components/sidebar-menu.scss
@@ -152,7 +152,7 @@
font-weight: 400;
&:hover {
- background-color: rgba($gab-brand-default, 0.1);
+ background-color: rgba(var(--brand-color-rgb), 0.1);
.fa {
color: #000;
diff --git a/app/styles/components/user-panel.scss b/app/styles/components/user-panel.scss
index 5a4b4861a..38aa6b1f3 100644
--- a/app/styles/components/user-panel.scss
+++ b/app/styles/components/user-panel.scss
@@ -1,5 +1,5 @@
.user-panel {
- @include gab-container-standards;
+ @include standard-panel;
display: flex;
width: 265px;
flex-direction: column;
diff --git a/app/styles/containers.scss b/app/styles/containers.scss
index f2fa0fc4a..87ce413ad 100644
--- a/app/styles/containers.scss
+++ b/app/styles/containers.scss
@@ -35,7 +35,6 @@
outline: 0;
padding: 12px 16px;
line-height: 32px;
- font-family: $font-display, sans-serif;
font-weight: 500;
font-size: 14px;
}
diff --git a/app/styles/dashboard.scss b/app/styles/dashboard.scss
index 51b9810e2..600cacc97 100644
--- a/app/styles/dashboard.scss
+++ b/app/styles/dashboard.scss
@@ -37,7 +37,7 @@
font-size: 24px;
line-height: 21px;
color: var(--primary-text-color);
- font-family: $font-display, sans-serif;
+ font-family: var(--font-display), sans-serif;
margin-bottom: 20px;
line-height: 30px;
}
@@ -69,7 +69,7 @@
}
a:not(.name-tag) {
- color: $ui-secondary-color;
+ color: var(--background-color);
font-weight: 500;
text-decoration: none;
}
diff --git a/app/styles/donations.scss b/app/styles/donations.scss
index f9e63420a..963e9e544 100644
--- a/app/styles/donations.scss
+++ b/app/styles/donations.scss
@@ -26,7 +26,7 @@
}
.sub {
- border: 1px solid rgba($darker-text-color, 0.5);
+ border: 1px solid rgba(var(--primary-text-color-rgb), 0.5);
padding: 20px;
position: relative;
border-radius: 4px;
@@ -203,7 +203,7 @@ body.admin {
height: 8px;
width: 100%;
border-radius: 4px;
- background: $gab-background-base-light;
+ background: var(--background-color);
overflow: hidden;
&__progress {
diff --git a/app/styles/emoji_picker.scss b/app/styles/emoji_picker.scss
index 51439dab9..8bc0280f5 100644
--- a/app/styles/emoji_picker.scss
+++ b/app/styles/emoji_picker.scss
@@ -1,7 +1,7 @@
.emoji-mart {
font-size: 13px;
display: inline-block;
- color: $inverted-text-color;
+ color: var(--inverted-text-color);
&,
* {
@@ -15,13 +15,13 @@
}
.emoji-mart-bar {
- border: 0 solid darken($ui-secondary-color, 8%);
+ border: 0 solid var(--background-color);
&:first-child {
border-bottom-width: 1px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
- background: $ui-secondary-color;
+ background: var(--background-color);
}
&:last-child {
@@ -50,7 +50,7 @@
cursor: pointer;
&:hover {
- color: darken($lighter-text-color, 4%);
+ color: var(--primary-text-color-faint);
}
}
@@ -58,7 +58,7 @@
color: var(--highlight-text-color);
&:hover {
- color: darken($highlight-text-color, 4%);
+ color: var(--highlight-text-color);
}
.emoji-mart-anchor-bar {
@@ -114,9 +114,9 @@
font-family: inherit;
display: block;
width: 100%;
- background: rgba($ui-secondary-color, 0.3);
- color: $inverted-text-color;
- border: 1px solid $ui-secondary-color;
+ background: rgba(var(--background-color), 0.3);
+ color: var(--inverted-text-color);
+ border: 1px solid var(--background-color);
border-radius: 4px;
&::-moz-focus-inner {
@@ -148,7 +148,7 @@
left: 0;
width: 100%;
height: 100%;
- background-color: rgba($ui-secondary-color, 0.7);
+ background-color: rgba(var(--background-color), 0.7);
border-radius: 100%;
}
}
@@ -184,7 +184,7 @@
font-size: 14px;
text-align: center;
padding-top: 70px;
- color: $light-text-color;
+ color: var(--primary-text-color-faint);
.emoji-mart-category-label {
display: none;
diff --git a/app/styles/forms.scss b/app/styles/forms.scss
index db2067516..d9a3e3551 100644
--- a/app/styles/forms.scss
+++ b/app/styles/forms.scss
@@ -1,7 +1,7 @@
$no-columns-breakpoint: 600px;
code {
- font-family: $font-monospace, monospace;
+ font-family: var(--font-monospace), monospace;
font-weight: 400;
}
@@ -104,7 +104,7 @@ code {
code {
border-radius: 3px;
padding: 0.2em 0.4em;
- background: darken($ui-base-color, 12%);
+ background: var(--background-color);
}
}
@@ -455,7 +455,7 @@ code {
padding: 10px;
padding-bottom: 9px;
font-size: 16px;
- color: $dark-text-color;
+ color: var(--primary-text-color);
font-family: inherit;
pointer-events: none;
cursor: default;
@@ -471,7 +471,7 @@ code {
right: 0;
bottom: 1px;
width: 5px;
- background-image: linear-gradient(to right, rgba(darken($ui-base-color, 10%), 0), darken($ui-base-color, 10%));
+ background-image: linear-gradient(to right, rgba(var(--background-color), 0), var(--background-color));
}
}
}
@@ -488,7 +488,7 @@ code {
display: flex;
justify-content: center;
align-items: center;
- background: rgba($ui-base-color, 0.65);
+ background: var(--background-color);
backdrop-filter: blur(2px);
border-radius: 4px;
@@ -555,7 +555,7 @@ code {
width: 100%;
border: 0;
padding: 10px;
- font-family: $font-monospace, monospace;
+ font-family: var(--font-monospace), monospace;
background: var(--brand-color-med);
color: var(--primary-text-color);
font-size: 14px;
@@ -624,7 +624,7 @@ code {
&:hover,
&:focus,
&:active {
- color: lighten($highlight-text-color, 8%);
+ color: var(--highlight-text-color);
}
}
}
@@ -799,13 +799,13 @@ code {
.form_admin_settings_custom_css,
.form_admin_settings_closed_registrations_message {
textarea {
- font-family: $font-monospace, monospace;
+ font-family: var(--font-monospace), monospace;
}
}
.input-copy {
- background: darken($ui-base-color, 10%);
- border: 1px solid darken($ui-base-color, 14%);
+ background: var(--background-color);
+ border: 1px solid var(--background-color);
border-radius: 4px;
display: flex;
align-items: center;
@@ -823,7 +823,7 @@ code {
border: 0;
padding: 10px;
font-size: 14px;
- font-family: $font-monospace, monospace;
+ font-family: var(--font-monospace), monospace;
}
button {
diff --git a/app/styles/introduction.scss b/app/styles/introduction.scss
index dd9b46101..e9dbb9ffe 100644
--- a/app/styles/introduction.scss
+++ b/app/styles/introduction.scss
@@ -5,12 +5,12 @@
align-items: center !important;
@media screen and (max-width: 920px) {
- background: darken($ui-base-color, 8%);
+ background: var(--background-color);
display: block !important;
}
&__pager {
- background: darken($ui-base-color, 8%);
+ background: var(--background-color);
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
overflow: hidden;
}
@@ -96,7 +96,7 @@
code {
display: inline-block;
- background: darken($ui-base-color, 8%);
+ background: var(--background-color);
font-size: 15px;
border: 1px solid var(--brand-color-med);
border-radius: 2px;
diff --git a/app/styles/modal.scss b/app/styles/modal.scss
index 98bcce1da..edfc214c2 100644
--- a/app/styles/modal.scss
+++ b/app/styles/modal.scss
@@ -1,5 +1,5 @@
.modal-layout {
- background: $ui-base-color url('data:image/svg+xml;utf8,') repeat-x bottom fixed;
+ background: var(--background-color) url('data:image/svg+xml;utf8,') repeat-x bottom fixed;
display: flex;
flex-direction: column;
height: 100vh;
diff --git a/app/styles/polls.scss b/app/styles/polls.scss
index 8ad9596da..e330775d7 100644
--- a/app/styles/polls.scss
+++ b/app/styles/polls.scss
@@ -14,8 +14,8 @@
height: 100%;
display: inline-block;
border-radius: 4px;
- background: rgba($gab-placeholder-accent, .3);
- &.leading {background: rgba($gab-placeholder-accent, .6);}
+ background: rgba(var(--primary-text-color-rgb), .3);
+ &.leading {background: rgba(var(--primary-text-color-rgb), .6);}
}
&__text {
@@ -47,7 +47,7 @@
box-sizing: border-box;
width: 100%;
font-size: 14px;
- color: $inverted-text-color;
+ color: var(--inverted-text-color);
display: block;
outline: 0;
font-family: inherit;
@@ -79,7 +79,7 @@
&__input {
display: inline-block;
position: relative;
- border: 1px solid $ui-primary-color;
+ border: 1px solid var(--brand-color);
box-sizing: border-box;
width: 18px;
height: 18px;
@@ -110,7 +110,7 @@
&__footer {
padding-top: 6px;
padding-bottom: 5px;
- color: $dark-text-color;
+ color: var(--primary-text-color);
}
&__link {
@@ -119,7 +119,7 @@
padding: 0;
margin: 0;
border: 0;
- color: $dark-text-color;
+ color: var(--primary-text-color);
text-decoration: underline;
font-size: inherit;
@@ -129,7 +129,7 @@
&:active,
&:focus {
- background-color: rgba($dark-text-color, .1);
+ background-color: rgba(var(--primary-text-color-rgb), .1);
}
}
@@ -166,8 +166,8 @@
padding: 6px 10px;
height: auto;
line-height: inherit;
- color: $action-button-color;
- border-color: $action-button-color;
+ color: #0482d8;
+ border-color: #0482d8;
}
li {
@@ -185,17 +185,17 @@
appearance: none;
box-sizing: border-box;
font-size: 14px;
- color: $action-button-color;
+ color: #0482d8;
display: inline-block;
width: auto;
outline: 0;
font-family: inherit;
background-color: $simple-background-color;
- background-image: url("data:image/svg+xml;utf8,");
+ background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 8px center;
background-size: auto 16px;
- border: 1px solid $action-button-color;
+ border: 1px solid #0482d8;
border-radius: 4px;
padding: 6px 10px;
padding-right: 30px;
@@ -207,13 +207,13 @@
}
.muted .poll {
- color: $dark-text-color;
+ color: var(--primary-text-color);
&__chart {
- background: rgba(darken($ui-primary-color, 14%), 0.2);
+ background: rgba(var(--brand-color), 0.2);
&.leading {
- background: rgba($ui-highlight-color, 0.2);
+ background: rgba(var(--brand-color), 0.2);
}
}
}
diff --git a/app/styles/rtl.scss b/app/styles/rtl.scss
index 56f49e9dd..b47035515 100644
--- a/app/styles/rtl.scss
+++ b/app/styles/rtl.scss
@@ -238,12 +238,12 @@ body.rtl {
&::after {
right: auto;
left: 0;
- background-image: linear-gradient(to left, rgba(darken($ui-base-color, 10%), 0), darken($ui-base-color, 10%));
+ background-image: linear-gradient(to left, rgba(var(--background-color), 0), var(--background-color));
}
}
.simple_form select {
- background: darken($ui-base-color, 10%) url("data:image/svg+xml;utf8,") no-repeat left 8px center / auto 16px;
+ background: var(--background-color) url("data:image/svg+xml;utf8,") no-repeat left 8px center / auto 16px;
}
.table th,
diff --git a/app/styles/tables.scss b/app/styles/tables.scss
index d0036a81d..0a8eb0589 100644
--- a/app/styles/tables.scss
+++ b/app/styles/tables.scss
@@ -68,17 +68,17 @@
&.batch-table {
& > thead > tr > th {
background: var(--brand-color-med);
- border-top: 1px solid darken($ui-base-color, 8%);
- border-bottom: 1px solid darken($ui-base-color, 8%);
+ border-top: 1px solid var(--background-color);
+ border-bottom: 1px solid var(--background-color);
&:first-child {
border-radius: 4px 0 0;
- border-left: 1px solid darken($ui-base-color, 8%);
+ border-left: 1px solid var(--background-color);
}
&:last-child {
border-radius: 0 4px 0 0;
- border-right: 1px solid darken($ui-base-color, 8%);
+ border-right: 1px solid var(--background-color);
}
}
}
@@ -94,7 +94,7 @@
}
samp {
- font-family: $font-monospace, monospace;
+ font-family: var(--font-monospace), monospace;
}
button.table-action-link {
@@ -164,7 +164,7 @@ a.table-action-link {
}
&__toolbar {
- border: 1px solid darken($ui-base-color, 8%);
+ border: 1px solid var(--background-color);
background: var(--brand-color-med);
border-radius: 4px 0 0;
height: 47px;
@@ -181,18 +181,18 @@ a.table-action-link {
}
&__row {
- border: 1px solid darken($ui-base-color, 8%);
+ border: 1px solid var(--background-color);
border-top: 0;
background: var(--brand-color-med);
@media screen and (max-width: $no-gap-breakpoint) {
&:first-child {
- border-top: 1px solid darken($ui-base-color, 8%);
+ border-top: 1px solid var(--background-color);
}
}
&:hover {
- background: darken($ui-base-color, 2%);
+ background: var(--background-color);
}
&:nth-child(even) {
@@ -226,12 +226,12 @@ a.table-action-link {
}
.nothing-here {
- border: 1px solid darken($ui-base-color, 8%);
+ border: 1px solid var(--background-color);
border-top: 0;
box-shadow: none;
@media screen and (max-width: $no-gap-breakpoint) {
- border-top: 1px solid darken($ui-base-color, 8%);
+ border-top: 1px solid var(--background-color);
}
}
diff --git a/app/styles/themes.scss b/app/styles/themes.scss
index f6be5fadc..e905cb8d3 100644
--- a/app/styles/themes.scss
+++ b/app/styles/themes.scss
@@ -11,6 +11,11 @@ body {
--primary-text-color-rgb: var(--primary-text-color-r), var(--primary-text-color-g), var(--primary-text-color-b);
--primary-text-color: rgb(var(--primary-text-color-rgb));
--primary-text-color-faint: rgba(var(--primary-text-color-rgb), 0.6);
+ --inverted-text-color: rgb(
+ calc(255 - var(--primary-text-color-r)),
+ calc(255 - var(--primary-text-color-g)),
+ calc(255 - var(--primary-text-color-b))
+ );
}
body.theme-mode-light {
diff --git a/app/styles/variables.scss b/app/styles/variables.scss
index 08aec71a0..047828cc7 100644
--- a/app/styles/variables.scss
+++ b/app/styles/variables.scss
@@ -1,35 +1,3 @@
-// Going to create a Gab Specific color stack and gracefully remove the existing stack
-// We know what colors we want to use for everything in the UI
-// The existing color stack is based on propagating color tint variants of a few basic colors
-
-////////// 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: #990099 !default;
-$gab-secondary-text: #999 !default;
-$gab-text-highlight: #e600e6 !default;
-$gab-small-cta-primary: #607cf5 !default;
-
-
-// THEME COLORS
-
-// default theme (dark)
-$gab-background-base: #333 !default;
-$gab-background-container: #222 !default;
-$gab-placeholder-accent: #666 !default;
-
-
-// light theme
-$gab-background-base-light: #f6f2f6 !default;
-$gab-default-text-light: #6c6c6c !default;
-
-$gab-background: $gab-background-base !default;
-
-
-
// BREAKPOINT SETS
// navigation breakpoints - by default show all elements and link names along with icons
@@ -38,16 +6,11 @@ $gab-background: $gab-background-base !default;
$nav-breakpoint-1: 850px;
// search field hidden and replaced with search icon link
$nav-breakpoint-2: 650px;
-// "Gab" button hidden and replaced with floating button on bottom corner
+// "Post" button hidden and replaced with floating button on bottom corner
$nav-breakpoint-3: 450px;
-// Gab Logo hidden - bare minimum navigation for smallest width devices
+// Site Logo hidden - bare minimum navigation for smallest width devices
$nav-breakpoint-4: 375px;
-
-
-
-////////// EXISTING VARIABLE STACK (with modifications) //////////
-
// Commonly used web colors
$success-green: #79bd9a !default; // Padua
@@ -55,12 +18,6 @@ $error-red: #df405a !default; // Cerise
$warning-red: #ff5050 !default; // Sunset Orange
$gold-star: #ca8f04 !default; // Dark Goldenrod
-// Values from the classic Gab Social UI
-$classic-base-color: $gab-background-base;
-$classic-primary-color: $gab-background-base;
-$classic-secondary-color: $gab-placeholder-accent;
-$classic-highlight-color: $gab-text-highlight;
-
// Variables for defaults in UI
$base-shadow-color: #000000 !default;
$base-overlay-background: #000000 !default;
@@ -68,28 +25,6 @@ $simple-background-color: #ffffff !default;
$valid-value-color: $success-green !default;
$error-value-color: $error-red !default;
-// Tell UI to use selected colors
-$ui-base-color: $classic-base-color !default; // Darkest
-$ui-base-lighter-color: lighten($ui-base-color, 26%) !default; // Lighter darkest
-$ui-primary-color: $classic-primary-color !default; // Lighter
-$ui-secondary-color: $classic-secondary-color !default; // Lightest
-$ui-highlight-color: $classic-highlight-color !default;
-
-// Nav UI
-$nav-ui-highlight-color: $gab-text-highlight !default;
-$nav-ui-search-bg-color: darken($nav-ui-highlight-color, 52%) !default;
-
-// Variables for texts
-$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;
-$action-button-color: $ui-base-lighter-color !default;
-// For texts on inverted backgrounds
-$inverted-text-color: $ui-base-color !default;
-$lighter-text-color: $ui-base-lighter-color !default;
-$light-text-color: $ui-primary-color !default;
-
// Language codes that uses CJK fonts
$cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;
@@ -99,7 +34,3 @@ $media-modal-media-max-width: 100%;
$media-modal-media-max-height: 80%;
$no-gap-breakpoint: 415px;
-
-$font-sans-serif: 'soapbox-font-sans-serif' !default;
-$font-display: 'soapbox-font-display' !default;
-$font-monospace: 'soapbox-font-monospace' !default;
diff --git a/app/styles/widgets.scss b/app/styles/widgets.scss
index df236d003..db2fcc537 100644
--- a/app/styles/widgets.scss
+++ b/app/styles/widgets.scss
@@ -52,7 +52,7 @@
font-family: inherit;
font-size: inherit;
line-height: inherit;
- color: lighten($darker-text-color, 10%);
+ color: var(--primary-text-color);
}
a {
@@ -105,7 +105,7 @@
.box-widget {
padding: 20px;
border-radius: 4px;
- background: lighten($ui-base-color, 2.5%);
+ background: var(--background-color);
box-shadow: 0 0 1px 1px rgba($base-shadow-color, 0.2);
}
@@ -351,7 +351,7 @@
border-radius: 50%;
position: relative;
margin-left: -10px;
- background: darken($ui-base-color, 8%);
+ background: var(--background-color);
border: 2px solid var(--brand-color-med);
&:nth-child(1) {
@@ -473,7 +473,7 @@ $fluid-breakpoint: $maximum-width + 20px;
border-radius: 4px;
@media screen and (max-width: $no-gap-breakpoint) {
- border-top: 1px solid lighten($ui-base-color, 16%);
+ border-top: 1px solid var(--background-color);
}
&.compact {