kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
Replace $primary-text-color
rodzic
36f888c027
commit
4a2493a7e2
|
@ -7,6 +7,17 @@ import { brightness, hue, convert } from 'chromatism';
|
|||
|
||||
const initialState = ImmutableMap();
|
||||
|
||||
const modes = ImmutableMap({
|
||||
light: ImmutableMap({
|
||||
'primary-text-color': '#000000',
|
||||
'primary-text-color-faint': 'rgba(0, 0, 0, 0.7)',
|
||||
}),
|
||||
dark: ImmutableMap({
|
||||
'primary-text-color': '#ffffff',
|
||||
'primary-text-color-faint': 'rgba(255, 255, 255, 0.7)',
|
||||
}),
|
||||
});
|
||||
|
||||
const cssrgba = (color, a) => {
|
||||
const { r, g, b } = convert(color).rgb;
|
||||
return `rgba(${[r, g, b, a].join(',')})`;
|
||||
|
@ -18,14 +29,14 @@ const makeContrast = (percent, color, mode) => {
|
|||
};
|
||||
|
||||
export const generateTheme = (brandColor, mode) => {
|
||||
return ImmutableMap({
|
||||
return modes.get(mode).merge(ImmutableMap({
|
||||
'brand-color': brandColor,
|
||||
'accent-color': brightness(10, hue(-3, brandColor).hex).hex,
|
||||
'brand-color-faint': cssrgba(brandColor, 0.1),
|
||||
'brand-color-med': cssrgba(brandColor, 0.2),
|
||||
'highlight-text-color': makeContrast(5, brandColor, mode).hex,
|
||||
'brand-color-hicontrast': makeContrast(15, brandColor, mode).hex,
|
||||
});
|
||||
}));
|
||||
};
|
||||
|
||||
export const setTheme = themeData => {
|
||||
|
|
|
@ -187,7 +187,7 @@ body {
|
|||
// Change the default color used for the text in an empty column or on the error column
|
||||
.empty-column-indicator,
|
||||
.error-column {
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
background: $white;
|
||||
}
|
||||
|
||||
|
@ -210,12 +210,12 @@ body {
|
|||
|
||||
.status.light {
|
||||
.status__content {
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
|
||||
.display-name {
|
||||
strong {
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -226,7 +226,7 @@ body {
|
|||
|
||||
.name {
|
||||
a {
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -235,7 +235,7 @@ body {
|
|||
}
|
||||
|
||||
.account__header__content {
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -22,7 +22,6 @@ $ui-primary-color: #9bcbed;
|
|||
$ui-secondary-color: $classic-base-color !default;
|
||||
$ui-highlight-color: #990099;
|
||||
|
||||
$primary-text-color: $black !default;
|
||||
$darker-text-color: $classic-base-color !default;
|
||||
$dark-text-color: #444b5d;
|
||||
$action-button-color: #606984;
|
||||
|
|
|
@ -189,7 +189,7 @@ $small-breakpoint: 960px;
|
|||
font-family: $font-sans-serif, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 28px;
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
text-align: right;
|
||||
padding: 10px 15px;
|
||||
|
||||
|
@ -274,7 +274,7 @@ $small-breakpoint: 960px;
|
|||
|
||||
a {
|
||||
display: block;
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
|
@ -586,7 +586,7 @@ $small-breakpoint: 960px;
|
|||
|
||||
h1 {
|
||||
font-weight: 500;
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
margin-bottom: 0;
|
||||
|
||||
small {
|
||||
|
@ -659,8 +659,6 @@ $small-breakpoint: 960px;
|
|||
}
|
||||
|
||||
.public-layout {
|
||||
$gab-background: $gab-background-base-dark !default;
|
||||
|
||||
position: relative;
|
||||
background-color: var(--brand-color);
|
||||
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 889" width="1440px" height="889px"><path d="M 0 0 L 0 851.82031 C 115.03104 776.54213 236.097 723.10606 363.20703 691.54492 C 640.06491 622.80164 852.93698 468.14039 954.31055 358.01367 C 1092.1151 208.31032 1206.0509 47.69868 1365.3828 13.457031 C 1391.8162 7.7762737 1416.6827 3.2957237 1440 0.001953125 L 1440 0 L 0 0 z" fill="#{hex-color($gab-background)}"/></svg>');
|
||||
|
@ -966,7 +964,7 @@ $small-breakpoint: 960px;
|
|||
.brand__tagline {
|
||||
display: block;
|
||||
width: 470px;
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
font-size: 30px;
|
||||
line-height: 1.4;
|
||||
margin-top: 25px;
|
||||
|
|
|
@ -78,7 +78,7 @@
|
|||
|
||||
strong {
|
||||
font-size: 15px;
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
@ -108,7 +108,7 @@
|
|||
.page,
|
||||
.gap {
|
||||
font-size: 14px;
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
font-weight: 500;
|
||||
display: inline-block;
|
||||
padding: 6px 10px;
|
||||
|
@ -310,7 +310,7 @@
|
|||
}
|
||||
|
||||
strong {
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -165,7 +165,7 @@ button {
|
|||
}
|
||||
|
||||
.explanation-box {
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
padding: 15px 20px;
|
||||
font-size: 14px;
|
||||
background-color: var(--brand-color-faint);
|
||||
|
|
|
@ -8,7 +8,7 @@
|
|||
border: 10px none;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-family: inherit;
|
||||
|
@ -188,7 +188,7 @@
|
|||
&.overlayed {
|
||||
box-sizing: content-box;
|
||||
background: rgba($base-overlay-background, 0.6);
|
||||
color: rgba($primary-text-color, 0.7);
|
||||
color: var(--primary-text-color-faint);
|
||||
border-radius: 4px;
|
||||
padding: 2px;
|
||||
|
||||
|
@ -372,7 +372,7 @@
|
|||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding-top: 2px;
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
|
@ -592,7 +592,7 @@
|
|||
}
|
||||
|
||||
a.status__content__spoiler-link {
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
background: $ui-primary-color;
|
||||
|
||||
&:hover {
|
||||
|
@ -756,7 +756,7 @@
|
|||
.domain__domain-name {
|
||||
flex: 1 1 auto;
|
||||
display: block;
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
|
@ -961,7 +961,7 @@ a .account__avatar {
|
|||
display: block;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
|
||||
@each $lang in $cjk-langs {
|
||||
&:lang(#{$lang}) {
|
||||
|
@ -998,7 +998,7 @@ a .account__avatar {
|
|||
.status__display-name,
|
||||
.account__display-name {
|
||||
strong {
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -1044,7 +1044,7 @@ a.account__display-name {
|
|||
|
||||
strong {
|
||||
font-size: 16px;
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
|
||||
.display-name__account {
|
||||
|
@ -1139,7 +1139,7 @@ a.account__display-name {
|
|||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
@ -1678,13 +1678,13 @@ a.account__display-name {
|
|||
&__btn {
|
||||
display: block;
|
||||
text-align: left;
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
text-decoration: none;
|
||||
font-size: 15px;
|
||||
padding: 0 20px;
|
||||
|
||||
&:hover {
|
||||
color: darken($primary-text-color, 14%);
|
||||
color: var(--primary-text-color-faint);
|
||||
|
||||
span {
|
||||
text-decoration: underline;
|
||||
|
@ -1949,7 +1949,7 @@ a.account__display-name {
|
|||
|
||||
.column-link {
|
||||
background: var(--brand-color-med);
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
padding: 15px;
|
||||
|
@ -1973,7 +1973,7 @@ a.account__display-name {
|
|||
&:focus,
|
||||
&:active {
|
||||
background: transparent;
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
|
||||
&.active {
|
||||
|
@ -2098,7 +2098,7 @@ a.account__display-name {
|
|||
|
||||
&:focus,
|
||||
&:active {
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
border-bottom-color: var(--highlight-text-color);
|
||||
}
|
||||
|
||||
|
@ -2179,7 +2179,7 @@ a.account__display-name {
|
|||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -2455,7 +2455,7 @@ a.status-card.compact:hover {
|
|||
}
|
||||
|
||||
&.active {
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
border-radius: 10px;
|
||||
background-color: var(--brand-color-faint);
|
||||
}
|
||||
|
@ -2513,11 +2513,11 @@ a.status-card.compact:hover {
|
|||
&:hover {color: lighten($darker-text-color, 7%);}
|
||||
|
||||
&.active {
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
background: var(--brand-color-med);
|
||||
|
||||
&:hover {
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
background: var(--brand-color-med);
|
||||
}
|
||||
}
|
||||
|
@ -2683,7 +2683,7 @@ a.status-card.compact:hover {
|
|||
.video-error-cover {
|
||||
align-items: center;
|
||||
background: $base-overlay-background;
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
@ -2756,7 +2756,7 @@ a.status-card.compact:hover {
|
|||
background: rgba($base-overlay-background, 0.5);
|
||||
border-radius: 8px;
|
||||
padding: 8px 12px;
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
@ -2890,7 +2890,7 @@ a.status-card.compact:hover {
|
|||
}
|
||||
|
||||
.relationship-tag {
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
margin-bottom: 4px;
|
||||
display: block;
|
||||
vertical-align: top;
|
||||
|
@ -3244,14 +3244,14 @@ a.status-card.compact:hover {
|
|||
&:hover,
|
||||
&.active {
|
||||
background: var(--brand-color);
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
outline: 0;
|
||||
|
||||
.privacy-dropdown__option__content {
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
|
||||
strong {
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -3299,7 +3299,7 @@ a.status-card.compact:hover {
|
|||
background: var(--brand-color);
|
||||
|
||||
.icon-button {
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -3433,7 +3433,7 @@ a.status-card.compact:hover {
|
|||
.media-gallery__gifv__label {
|
||||
display: block;
|
||||
position: absolute;
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
background: rgba($base-overlay-background, 0.5);
|
||||
bottom: 6px;
|
||||
left: 6px;
|
||||
|
@ -3572,7 +3572,7 @@ a.status-card.compact:hover {
|
|||
&::before {
|
||||
content: 'GIF';
|
||||
position: absolute;
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
background: rgba($base-overlay-background, 0.5);
|
||||
bottom: 6px;
|
||||
left: 6px;
|
||||
|
@ -3664,7 +3664,7 @@ a.status-card.compact:hover {
|
|||
|
||||
.status__video-player-expand,
|
||||
.status__video-player-mute {
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
opacity: 0.8;
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
|
@ -3673,7 +3673,7 @@ a.status-card.compact:hover {
|
|||
|
||||
.status__video-player-spoiler {
|
||||
display: none;
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
left: 4px;
|
||||
position: absolute;
|
||||
text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color;
|
||||
|
@ -4008,7 +4008,7 @@ a.status-card.compact:hover {
|
|||
|
||||
.media-spoiler-video-play-icon {
|
||||
border-radius: 100px;
|
||||
color: rgba($primary-text-color, 0.8);
|
||||
color: var(--primary-text-color-faint);
|
||||
font-size: 36px;
|
||||
left: 50%;
|
||||
padding: 5px;
|
||||
|
@ -4073,7 +4073,7 @@ a.status-card.compact:hover {
|
|||
position: relative;
|
||||
|
||||
&.active {
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
|
@ -4262,7 +4262,7 @@ noscript {
|
|||
padding: 10px;
|
||||
font-family: $font-monospace, monospace;
|
||||
background: var(--brand-color-med);
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
margin-bottom: 15px;
|
||||
|
@ -4711,7 +4711,7 @@ noscript {
|
|||
|
||||
&__label {
|
||||
flex: 1 1;
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
line-height: 19px;
|
||||
|
@ -4782,7 +4782,7 @@ noscript {
|
|||
margin-top: 6px;
|
||||
|
||||
&__name {
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
line-height: 16px;
|
||||
|
@ -4808,7 +4808,7 @@ noscript {
|
|||
}
|
||||
|
||||
&__icon {
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -4969,7 +4969,7 @@ noscript {
|
|||
}
|
||||
|
||||
span {
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
font-size: 15px;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
@ -5017,7 +5017,7 @@ noscript {
|
|||
&__bio {
|
||||
display: block;
|
||||
flex: 1 1;
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
margin: 15px 0;
|
||||
font-size: 15px;
|
||||
line-height: 1.25;
|
||||
|
@ -5155,7 +5155,7 @@ noscript {
|
|||
}
|
||||
|
||||
&__title-text {
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
font-size: 27px;
|
||||
font-weight: bold;
|
||||
line-height: 32px;
|
||||
|
|
|
@ -128,7 +128,7 @@
|
|||
display: block;
|
||||
|
||||
&:first-of-type {
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
line-height: 24px;
|
||||
|
@ -148,7 +148,7 @@
|
|||
|
||||
&:hover,
|
||||
&.active {
|
||||
border-bottom: 2px solid $primary-text-color;
|
||||
border-bottom: 2px solid var(--primary-text-color);
|
||||
}
|
||||
&.score {border-bottom: 0 !important;}
|
||||
}
|
||||
|
|
|
@ -30,7 +30,7 @@
|
|||
}
|
||||
|
||||
.compose-form__warning {
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
margin-bottom: 10px;
|
||||
background: $ui-primary-color;
|
||||
box-shadow: 0 2px 6px rgba($base-shadow-color, 0.3);
|
||||
|
|
|
@ -47,7 +47,7 @@
|
|||
padding: 15px;
|
||||
|
||||
.group-card__title {
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
@ -60,7 +60,7 @@
|
|||
}
|
||||
|
||||
.group-card__description {
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -26,11 +26,11 @@
|
|||
text-decoration: none;
|
||||
padding: 16px 22px;
|
||||
text-align: center;
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
|
||||
&:hover,
|
||||
&--active {
|
||||
border-bottom: 2px solid $primary-text-color;
|
||||
border-bottom: 2px solid var(--primary-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -3,13 +3,13 @@
|
|||
padding: 0 15px 15px;
|
||||
|
||||
&__show-all {
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
&__item {
|
||||
display: block;
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
text-decoration: none;
|
||||
margin-bottom: 15px;
|
||||
|
||||
|
|
|
@ -27,7 +27,7 @@
|
|||
display: block;
|
||||
padding-left: 10px;
|
||||
margin-bottom: 10px;
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
|
|
@ -98,7 +98,7 @@
|
|||
background: rgba($base-overlay-background, 0.5);
|
||||
box-sizing: border-box;
|
||||
border: 0;
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
@ -158,7 +158,7 @@
|
|||
}
|
||||
|
||||
.media-modal__button {
|
||||
background-color: $primary-text-color;
|
||||
background-color: var(--primary-text-color);
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
border-radius: 6px;
|
||||
|
|
|
@ -43,7 +43,7 @@
|
|||
&__account {
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
|
||||
&__name {
|
||||
|
@ -85,7 +85,7 @@
|
|||
a {
|
||||
text-decoration: none;
|
||||
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
|
|
|
@ -30,7 +30,7 @@
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
padding: 12px 16px;
|
||||
|
@ -329,7 +329,7 @@
|
|||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
|
||||
|
@ -337,7 +337,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
text-decoration: underline;
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
|
||||
&--hollow {
|
||||
|
@ -574,7 +574,7 @@
|
|||
h1 {
|
||||
font-size: 20px;
|
||||
line-height: 18px * 1.5;
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
@ -584,7 +584,7 @@
|
|||
small {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
font-weight: 400;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
@ -695,7 +695,7 @@
|
|||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
margin-bottom: 5px;
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
font-family: $font-display, sans-serif;
|
||||
}
|
||||
}
|
||||
|
@ -744,7 +744,7 @@
|
|||
|
||||
strong {
|
||||
font-weight: 700;
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -801,7 +801,7 @@
|
|||
.account__header__content {
|
||||
padding: 20px;
|
||||
padding-bottom: 0;
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
|
||||
&__extra,
|
||||
|
|
|
@ -36,7 +36,7 @@
|
|||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
line-height: 21px;
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
font-family: $font-display, sans-serif;
|
||||
margin-bottom: 20px;
|
||||
line-height: 30px;
|
||||
|
|
|
@ -20,7 +20,7 @@
|
|||
|
||||
&--active {
|
||||
background-color: var(--brand-color);
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -126,7 +126,7 @@
|
|||
background: transparent;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
appearance: textfield;
|
||||
|
||||
&::-webkit-inner-spin-button,
|
||||
|
|
|
@ -48,13 +48,13 @@
|
|||
margin-right: auto;
|
||||
|
||||
span {
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
font-size: 1.3rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
|
||||
&:last-of-type {
|
||||
color: darken($primary-text-color, 20%);
|
||||
color: var(--primary-text-color-faint);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -49,7 +49,7 @@ code {
|
|||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
padding-top: 5px;
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
display: block;
|
||||
width: auto;
|
||||
}
|
||||
|
@ -148,7 +148,7 @@ code {
|
|||
& > label {
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
font-weight: 500;
|
||||
min-width: 150px;
|
||||
flex: 0 0 auto;
|
||||
|
@ -170,7 +170,7 @@ code {
|
|||
.label_input > label {
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
word-wrap: break-word;
|
||||
|
@ -192,7 +192,7 @@ code {
|
|||
& > label {
|
||||
font-family: inherit;
|
||||
font-size: 16px;
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
padding-top: 5px;
|
||||
|
@ -266,7 +266,7 @@ code {
|
|||
margin-bottom: 5px;
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
display: block;
|
||||
width: auto;
|
||||
}
|
||||
|
@ -276,7 +276,7 @@ code {
|
|||
label {
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
position: relative;
|
||||
|
@ -300,8 +300,8 @@ code {
|
|||
input[type=email],
|
||||
input[type=password],
|
||||
textarea {
|
||||
color: rgba($primary-text-color, 0.5);
|
||||
border-color: rgba($primary-text-color, 0.5);
|
||||
color: var(--primary-text-color-faint);
|
||||
border-color: var(--primary-text-color-faint);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -312,7 +312,7 @@ code {
|
|||
textarea {
|
||||
box-sizing: border-box;
|
||||
font-size: 16px;
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
display: block;
|
||||
width: 100%;
|
||||
outline: 0;
|
||||
|
@ -390,7 +390,7 @@ code {
|
|||
border: 0;
|
||||
border-radius: 4px;
|
||||
background: var(--brand-color);
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
font-size: 18px;
|
||||
line-height: inherit;
|
||||
height: auto;
|
||||
|
@ -440,7 +440,7 @@ code {
|
|||
appearance: none;
|
||||
box-sizing: border-box;
|
||||
font-size: 16px;
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
display: block;
|
||||
width: 100%;
|
||||
outline: 0;
|
||||
|
@ -509,7 +509,7 @@ code {
|
|||
&.rich-formatting {
|
||||
&,
|
||||
p {
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -550,7 +550,7 @@ code {
|
|||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
@ -568,7 +568,7 @@ code {
|
|||
padding: 10px;
|
||||
font-family: $font-monospace, monospace;
|
||||
background: var(--brand-color-med);
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
|
||||
|
@ -719,7 +719,7 @@ code {
|
|||
.warning {
|
||||
box-sizing: border-box;
|
||||
background: rgba($error-value-color, 0.5);
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
text-shadow: 1px 1px 0 rgba($base-shadow-color, 0.3);
|
||||
box-shadow: 0 2px 6px rgba($base-shadow-color, 0.4);
|
||||
border-radius: 4px;
|
||||
|
@ -727,7 +727,7 @@ code {
|
|||
margin-bottom: 15px;
|
||||
|
||||
a {
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover,
|
||||
|
@ -787,7 +787,7 @@ code {
|
|||
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
border: 0;
|
||||
|
|
|
@ -77,7 +77,7 @@
|
|||
flex: 0 auto;
|
||||
font-size: 14px;
|
||||
background: var(--brand-color);
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
text-transform: none;
|
||||
line-height: 36px;
|
||||
height: auto;
|
||||
|
@ -89,7 +89,7 @@
|
|||
height: auto;
|
||||
vertical-align: middle;
|
||||
margin-right: 5px;
|
||||
fill: $primary-text-color;
|
||||
fill: var(--primary-text-color);
|
||||
}
|
||||
|
||||
&:active,
|
||||
|
|
|
@ -113,7 +113,7 @@ a.table-action-link {
|
|||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
|
||||
i.fa {
|
||||
|
|
|
@ -9,7 +9,6 @@
|
|||
// STATIC COLORS
|
||||
|
||||
$gab-brand-default: #990099 !default;
|
||||
$gab-alert-red: #e600e6 !default;
|
||||
$gab-secondary-text: #999 !default;
|
||||
$gab-text-highlight: #e600e6 !default;
|
||||
$gab-small-cta-primary: #607cf5 !default;
|
||||
|
@ -72,7 +71,6 @@ $classic-highlight-color: $gab-text-highlight;
|
|||
// Variables for defaults in UI
|
||||
$base-shadow-color: $black !default;
|
||||
$base-overlay-background: $black !default;
|
||||
$base-border-color: $white !default;
|
||||
$simple-background-color: $white !default;
|
||||
$valid-value-color: $success-green !default;
|
||||
$error-value-color: $error-red !default;
|
||||
|
@ -89,7 +87,6 @@ $nav-ui-highlight-color: $gab-text-highlight !default;
|
|||
$nav-ui-search-bg-color: darken($nav-ui-highlight-color, 52%) !default;
|
||||
|
||||
// Variables for texts
|
||||
$primary-text-color: $white !default;
|
||||
$darker-text-color: $gab-secondary-text !default;
|
||||
$dark-text-color: $ui-base-lighter-color !default;
|
||||
$secondary-text-color: $ui-secondary-color !default;
|
||||
|
|
|
@ -142,7 +142,7 @@
|
|||
margin-top: 10px;
|
||||
|
||||
a {
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
@ -237,7 +237,7 @@
|
|||
margin: 10px 0;
|
||||
|
||||
h1 {
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
font-size: 36px;
|
||||
line-height: 1.1;
|
||||
font-weight: 700;
|
||||
|
@ -303,7 +303,7 @@
|
|||
flex: 1 1 auto;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
@ -325,7 +325,7 @@
|
|||
&,
|
||||
.fa,
|
||||
small {
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -407,7 +407,7 @@
|
|||
text-align: center;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: $primary-text-color;
|
||||
color: var(--primary-text-color);
|
||||
|
||||
small {
|
||||
display: block;
|
||||
|
|
Ładowanie…
Reference in New Issue