Replace most color variables
This commit is contained in:
Alex Gleason
parent
0587798cb4
commit
ca4bc1d8e8
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ a.button {
|
|||
border-radius: 4px;
|
||||
text-transform: uppercase;
|
||||
color: #fff;
|
||||
background: $gab-small-cta-primary;
|
||||
background: #607cf5;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.group-form {
|
||||
@include gab-container-standards;
|
||||
@include standard-panel;
|
||||
padding: 20px;
|
||||
|
||||
&,
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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;}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-lighter-color)}"/></svg>') repeat-x bottom fixed;
|
||||
background: var(--brand-color-med) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color(var(--background-color))}"/></svg>') repeat-x bottom fixed;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.user-panel {
|
||||
@include gab-container-standards;
|
||||
@include standard-panel;
|
||||
display: flex;
|
||||
width: 265px;
|
||||
flex-direction: column;
|
||||
|
|
|
|||
|
|
@ -35,7 +35,6 @@
|
|||
outline: 0;
|
||||
padding: 12px 16px;
|
||||
line-height: 32px;
|
||||
font-family: $font-display, sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.modal-layout {
|
||||
background: $ui-base-color url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-lighter-color)}"/></svg>') repeat-x bottom fixed;
|
||||
background: var(--background-color) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color(var(--background-color))}"/></svg>') repeat-x bottom fixed;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
|
|
|
|||
|
|
@ -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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{rgba($action-button-color, 0.999)}'/></svg>");
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{rgba(#0482d8, 0.999)}'/></svg>");
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(var(--brand-color-med))}'/></svg>") no-repeat left 8px center / auto 16px;
|
||||
background: var(--background-color) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(var(--brand-color-med))}'/></svg>") no-repeat left 8px center / auto 16px;
|
||||
}
|
||||
|
||||
.table th,
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in a new issue