moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'hsl-color' into 'master' 

Theming: RGB --> HSL

See merge request soapbox-pub/soapbox-fe!56
This commit is contained in:
Alex Gleason 2020-06-07 04:05:11 +00:00
parent 109b043153 80ddf656d8
commit 90320e12ec
58 changed files with 428 additions and 415 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
app/soapbox/utils/theme.js
View File

@ -1,6 +1,5 @@
import { Map as ImmutableMap } from 'immutable'; import { Map as ImmutableMap } from 'immutable';
import hexToHsl from 'hex-to-hsl';
const hex2rgb = c => c.substr(1).match(/../g).map(x => + `0x${x}`);
export const generateThemeCss = brandColor => { export const generateThemeCss = brandColor => {
if (!brandColor) return null; if (!brandColor) return null;
@ -8,11 +7,11 @@ export const generateThemeCss = brandColor => {
}; };
export const brandColorToThemeData = brandColor => { export const brandColorToThemeData = brandColor => {
const [ r, g, b ] = hex2rgb(brandColor); const [ h, s, l ] = hexToHsl(brandColor);
return ImmutableMap({ return ImmutableMap({
'brand-color-r': r, 'brand-color_h': h,
'brand-color-g': g, 'brand-color_s': `${s}%`,
'brand-color-b': b, 'brand-color_l': `${l}%`,
}); });
}; };

8
app/styles/_mixins.scss
View File

@ -49,9 +49,9 @@
padding-left: 15px; padding-left: 15px;
// Chrome does not like these concatinated together // Chrome does not like these concatinated together
&::placeholder {color: var(--primary-text-color-faint);} &::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);}
&::-ms-input-placeholder {color: var(--primary-text-color-faint);} &::-ms-input-placeholder {color: var(--primary-text-color--faint);}
&::-moz-focus-inner { &::-moz-focus-inner {
border: 0; border: 0;
@ -72,7 +72,7 @@
border-radius: 6px; border-radius: 6px;
padding: 8px 10px 17px; padding: 8px 10px 17px;
margin: 4px 0 0; margin: 4px 0 0;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5); box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);
h4 { h4 {

98
app/styles/about.scss
View File

@ -93,7 +93,7 @@ $small-breakpoint: 960px;
a { a {
padding: 4px; padding: 4px;
background-color: var(--brand-color-med); background-color: var(--brand-color--med);
} }
} }
@ -160,7 +160,7 @@ $small-breakpoint: 960px;
} }
&--hollow { &--hollow {
background-color: var(--brand-color-med); background-color: var(--brand-color--med);
&:hover, &:hover,
&:focus, &:focus,
@ -237,7 +237,7 @@ $small-breakpoint: 960px;
} }
.logo-button { .logo-button {
background-color: var(--primary-text-color-faint); background-color: var(--primary-text-color--faint);
} }
} }
@ -309,7 +309,7 @@ $small-breakpoint: 960px;
&::before { &::before {
content: ""; content: "";
display: block; display: block;
background: var(--brand-color-faint); background: var(--brand-color--faint);
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
@ -332,14 +332,14 @@ $small-breakpoint: 960px;
height: 100%; height: 100%;
margin: 0; margin: 0;
border-radius: 50%; border-radius: 50%;
border: 4px solid var(--brand-color-faint); border: 4px solid var(--brand-color--faint);
background: var(--background-color); background: var(--background-color);
} }
} }
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
margin-top: 0; margin-top: 0;
background: var(--brand-color-faint); background: var(--brand-color--faint);
border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px;
padding: 5px; padding: 5px;
@ -418,7 +418,7 @@ $small-breakpoint: 960px;
text-shadow: none; text-shadow: none;
small { small {
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
} }
} }
} }
@ -446,9 +446,9 @@ $small-breakpoint: 960px;
width: 33.3%; width: 33.3%;
box-sizing: border-box; box-sizing: border-box;
flex: 0 0 auto; flex: 0 0 auto;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
padding: 10px; padding: 10px;
border-right: 1px solid var(--brand-color-faint); border-right: 1px solid var(--brand-color--faint);
cursor: default; cursor: default;
text-align: center; text-align: center;
position: relative; position: relative;
@ -480,7 +480,7 @@ $small-breakpoint: 960px;
} }
&.inactive::after { &.inactive::after {
border-bottom-color: var(--primary-text-color-faint); border-bottom-color: var(--primary-text-color--faint);
} }
} }
@ -532,7 +532,7 @@ $small-breakpoint: 960px;
margin: 0 -5px; margin: 0 -5px;
.account__header__fields { .account__header__fields {
border-top: 1px solid var(--brand-color-med); border-top: 1px solid var(--brand-color--med);
} }
.roles { .roles {
@ -543,11 +543,11 @@ $small-breakpoint: 960px;
&__links { &__links {
margin-top: -15px; margin-top: -15px;
font-size: 14px; font-size: 14px;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
a { a {
display: inline-block; display: inline-block;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
text-decoration: none; text-decoration: none;
padding: 15px; padding: 15px;
font-weight: 500; font-weight: 500;
@ -579,7 +579,7 @@ $small-breakpoint: 960px;
} }
.public-account-bio { .public-account-bio {
background: var(--brand-color-med); background: var(--brand-color--med);
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
@ -618,7 +618,7 @@ $small-breakpoint: 960px;
.roles { .roles {
padding: 20px; padding: 20px;
font-size: 14px; font-size: 14px;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
} }
.roles { .roles {
@ -661,25 +661,25 @@ $small-breakpoint: 960px;
@media screen and (max-width: $no-gap-breakpoint) { @media screen and (max-width: $no-gap-breakpoint) {
margin: 0; margin: 0;
border-top: 1px solid var(--brand-color-med); border-top: 1px solid var(--brand-color--med);
& > div { & > div {
width: 100%; width: 100%;
padding: 0; padding: 0;
margin-bottom: 0; margin-bottom: 0;
border-bottom: 1px solid var(--brand-color-med); border-bottom: 1px solid var(--brand-color--med);
&:last-child { &:last-child {
border-bottom: 0; border-bottom: 0;
} }
.card__bar { .card__bar {
background: var(--brand-color-med); background: var(--brand-color--med);
&:hover, &:hover,
&:active, &:active,
&:focus { &:focus {
background: var(--brand-color-faint); background: var(--brand-color--faint);
} }
} }
} }
@ -705,7 +705,7 @@ $small-breakpoint: 960px;
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
line-height: 30px; line-height: 30px;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
max-width: 600px; max-width: 600px;
padding: 15px 30px; padding: 15px 30px;
@ -729,7 +729,7 @@ $small-breakpoint: 960px;
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
line-height: 30px; line-height: 30px;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
a { a {
color: var(--highlight-text-color); color: var(--highlight-text-color);
@ -754,7 +754,7 @@ $small-breakpoint: 960px;
margin-top: 2em; margin-top: 2em;
margin-bottom: 1.25em; margin-bottom: 1.25em;
font-weight: 500; font-weight: 500;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
} }
hr + { hr + {
@ -841,7 +841,7 @@ $small-breakpoint: 960px;
width: 100%; width: 100%;
height: 0; height: 0;
border: 0; border: 0;
border-bottom: 1px solid rgba(var(--background-color-rgb), .6); border-bottom: 1px solid hsla(var(--background-color_hsl), .6);
margin: 2em 0; margin: 2em 0;
&.spacer { &.spacer {
@ -852,7 +852,7 @@ $small-breakpoint: 960px;
} }
.information-board { .information-board {
background: var(--brand-color-med); background: var(--brand-color--med);
padding: 20px 0; padding: 20px 0;
.container-alt { .container-alt {
@ -882,7 +882,7 @@ $small-breakpoint: 960px;
span { span {
&:last-child { &:last-child {
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
} }
} }
@ -914,10 +914,10 @@ $small-breakpoint: 960px;
font-size: 14px; font-size: 14px;
line-height: 24px; line-height: 24px;
font-weight: 500; font-weight: 500;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
padding-bottom: 5px; padding-bottom: 5px;
margin-bottom: 15px; margin-bottom: 15px;
border-bottom: 1px solid var(--brand-color-faint); border-bottom: 1px solid var(--brand-color--faint);
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
@ -968,7 +968,7 @@ $small-breakpoint: 960px;
.username { .username {
display: block; display: block;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
} }
} }
} }
@ -983,7 +983,7 @@ $small-breakpoint: 960px;
font-size: 16px; font-size: 16px;
line-height: 30px; line-height: 30px;
margin-bottom: 12px; margin-bottom: 12px;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
a { a {
color: var(--highlight-text-color); color: var(--highlight-text-color);
@ -1009,7 +1009,7 @@ $small-breakpoint: 960px;
line-height: 30px; line-height: 30px;
font-weight: 500; font-weight: 500;
margin-bottom: 20px; margin-bottom: 20px;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
small { small {
font-family: var(--font-sans-serif), sans-serif; font-family: var(--font-sans-serif), sans-serif;
@ -1026,7 +1026,7 @@ $small-breakpoint: 960px;
line-height: 26px; line-height: 26px;
font-weight: 500; font-weight: 500;
margin-bottom: 20px; margin-bottom: 20px;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
} }
h3 { h3 {
@ -1035,7 +1035,7 @@ $small-breakpoint: 960px;
line-height: 24px; line-height: 24px;
font-weight: 500; font-weight: 500;
margin-bottom: 20px; margin-bottom: 20px;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
} }
h4 { h4 {
@ -1044,7 +1044,7 @@ $small-breakpoint: 960px;
line-height: 24px; line-height: 24px;
font-weight: 500; font-weight: 500;
margin-bottom: 20px; margin-bottom: 20px;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
} }
h5 { h5 {
@ -1053,7 +1053,7 @@ $small-breakpoint: 960px;
line-height: 24px; line-height: 24px;
font-weight: 500; font-weight: 500;
margin-bottom: 20px; margin-bottom: 20px;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
} }
h6 { h6 {
@ -1062,7 +1062,7 @@ $small-breakpoint: 960px;
line-height: 24px; line-height: 24px;
font-weight: 500; font-weight: 500;
margin-bottom: 20px; margin-bottom: 20px;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
} }
ul, ul,
@ -1095,7 +1095,7 @@ $small-breakpoint: 960px;
width: 100%; width: 100%;
height: 0; height: 0;
border: 0; border: 0;
border-bottom: 1px solid rgba(var(--background-color-rgb), .6); border-bottom: 1px solid hsla(var(--background-color_hsl), .6);
margin: 20px 0; margin: 20px 0;
&.spacer { &.spacer {
@ -1110,7 +1110,7 @@ $small-breakpoint: 960px;
} }
&__call-to-action { &__call-to-action {
background: var(--brand-color-med); background: var(--brand-color--med);
border-radius: 4px; border-radius: 4px;
padding: 25px 40px; padding: 25px 40px;
overflow: hidden; overflow: hidden;
@ -1231,7 +1231,7 @@ $small-breakpoint: 960px;
&__forms, &__forms,
#soapbox-timeline { #soapbox-timeline {
box-sizing: border-box; box-sizing: border-box;
background: var(--brand-color-med); background: var(--brand-color--med);
border-radius: 4px; border-radius: 4px;
box-shadow: 0 0 6px rgba(#000000, 0.1); box-shadow: 0 0 6px rgba(#000000, 0.1);
} }
@ -1263,7 +1263,7 @@ $small-breakpoint: 960px;
} }
p a { p a {
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
} }
h1 { h1 {
@ -1272,10 +1272,10 @@ $small-breakpoint: 960px;
margin-bottom: 0; margin-bottom: 0;
small { small {
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
span { span {
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
} }
} }
} }
@ -1386,7 +1386,7 @@ $small-breakpoint: 960px;
&:focus, &:focus,
&:active { &:active {
background: var(--brand-color); background: var(--brand-color);
filter: var(--accent-filter-hover); filter: var(--accent-filter--hover);
} }
} }
} }
@ -1422,7 +1422,7 @@ $small-breakpoint: 960px;
.simple_form { .simple_form {
padding: 20px; padding: 20px;
background-color: var(--brand-color-faint); background-color: var(--brand-color--faint);
} }
} }
@ -1500,7 +1500,7 @@ $small-breakpoint: 960px;
text-transform: uppercase; text-transform: uppercase;
font-weight: 700; font-weight: 700;
font-size: 13px; font-size: 13px;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
} }
&__text { &__text {
@ -1509,7 +1509,7 @@ $small-breakpoint: 960px;
} }
&__footer { &__footer {
background: var(--brand-color-med); background: var(--brand-color--med);
padding: 10px; padding: 10px;
border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px;
display: flex; display: flex;
@ -1547,14 +1547,14 @@ $small-breakpoint: 960px;
span { span {
font-size: 14px; font-size: 14px;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
} }
} }
} }
.simple_form .user_agreement .label_input > label { .simple_form .user_agreement .label_input > label {
font-weight: 400; font-weight: 400;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
} }
.simple_form p.lead { .simple_form p.lead {
@ -1621,7 +1621,7 @@ $small-breakpoint: 960px;
.hero-widget, .hero-widget,
.box-widget, .box-widget,
.directory__tag { .directory__tag {
border-bottom: 1px solid var(--brand-color-med); border-bottom: 1px solid var(--brand-color--med);
} }
.directory { .directory {
@ -1702,7 +1702,7 @@ $small-breakpoint: 960px;
} }
.about-page { .about-page {
background: var(--brand-color-faint); background: var(--brand-color--faint);
border-radius: inherit; border-radius: inherit;
} }

64
app/styles/accounts.scss
View File

@ -13,7 +13,7 @@
&:active, &:active,
&:focus { &:focus {
.card__bar { .card__bar {
background: var(--brand-color-med); background: var(--brand-color--med);
} }
} }
} }
@ -48,7 +48,7 @@
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
background: var(--brand-color-faint); background: var(--brand-color--faint);
border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px;
@media screen and (max-width: $no-gap-breakpoint) { @media screen and (max-width: $no-gap-breakpoint) {
@ -87,7 +87,7 @@
span { span {
display: block; display: block;
font-size: 14px; font-size: 14px;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
font-weight: 400; font-weight: 400;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -130,7 +130,7 @@
.older, .older,
.newer { .newer {
text-transform: uppercase; text-transform: uppercase;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
} }
.older { .older {
@ -173,9 +173,9 @@
} }
.nothing-here { .nothing-here {
background: var(--brand-color-med); background: var(--brand-color--med);
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
text-align: center; text-align: center;
@ -206,8 +206,8 @@
line-height: 12px; line-height: 12px;
font-weight: 500; font-weight: 500;
color: var(--background-color); color: var(--background-color);
background-color: rgba(var(--background-color-rgb), 0.1); background-color: hsla(var(--background-color_hsl), 0.1);
border: 1px solid rgba(var(--background-color-rgb), 0.5); border: 1px solid hsla(var(--background-color_hsl), 0.5);
&.moderator { &.moderator {
color: $success-green; color: $success-green;
@ -226,14 +226,14 @@
padding: 0; padding: 0;
margin: 15px -15px -15px; margin: 15px -15px -15px;
border: 0 none; border: 0 none;
border-top: 1px solid var(--brand-color-med); border-top: 1px solid var(--brand-color--med);
border-bottom: 1px solid var(--brand-color-med); border-bottom: 1px solid var(--brand-color--med);
font-size: 14px; font-size: 14px;
line-height: 20px; line-height: 20px;
dl { dl {
display: flex; display: flex;
border-bottom: 1px solid var(--brand-color-med); border-bottom: 1px solid var(--brand-color--med);
} }
dt, dt,
@ -251,13 +251,13 @@
font-weight: 500; font-weight: 500;
width: 120px; width: 120px;
flex: 0 0 auto; flex: 0 0 auto;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
background: rgba(var(--background-color-rgb), 0.5); background: hsla(var(--background-color_hsl), 0.5);
} }
dd { dd {
flex: 1 1 auto; flex: 1 1 auto;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
} }
a { a {
@ -296,7 +296,7 @@
.pending-account { .pending-account {
&__header { &__header {
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
a { a {
color: var(--background-color); color: var(--background-color);
@ -324,7 +324,7 @@
padding: 10px; padding: 10px;
&:not(:last-of-type) { &:not(:last-of-type) {
border-bottom: 1px solid var(--brand-color-med); border-bottom: 1px solid var(--brand-color--med);
} }
&.compact { &.compact {
@ -339,7 +339,7 @@
.account__display-name { .account__display-name {
flex: 1 1 auto; flex: 1 1 auto;
display: block; display: block;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
overflow: hidden; overflow: hidden;
text-decoration: none; text-decoration: none;
font-size: 14px; font-size: 14px;
@ -358,7 +358,7 @@
.account__avatar { .account__avatar {
@include avatar-radius; @include avatar-radius;
position: relative; position: relative;
background-color: var(--brand-color-faint); background-color: var(--brand-color--faint);
&-inline { &-inline {
display: inline-block; display: inline-block;
@ -415,13 +415,13 @@ a .account__avatar {
.account__reciprocal_follow_message { .account__reciprocal_follow_message {
padding: 0 5px; padding: 0 5px;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
text-align: center; text-align: center;
} }
.account__disclaimer { .account__disclaimer {
padding: 10px; padding: 10px;
border-top: 1px solid var(--brand-color-med); border-top: 1px solid var(--brand-color--med);
color: var(--primary-text-color); color: var(--primary-text-color);
strong { strong {
@ -448,8 +448,8 @@ a .account__avatar {
} }
.account__action-bar { .account__action-bar {
border-top: 1px solid var(--brand-color-med); border-top: 1px solid var(--brand-color--med);
border-bottom: 1px solid var(--brand-color-med); border-bottom: 1px solid var(--brand-color--med);
line-height: 36px; line-height: 36px;
overflow: hidden; overflow: hidden;
flex: 0 0 auto; flex: 0 0 auto;
@ -489,7 +489,7 @@ a .account__avatar {
text-decoration: none; text-decoration: none;
overflow: hidden; overflow: hidden;
flex: 0 1 100%; flex: 0 1 100%;
border-right: 1px solid var(--brand-color-med); border-right: 1px solid var(--brand-color--med);
padding: 10px 0; padding: 10px 0;
border-bottom: 4px solid transparent; border-bottom: 4px solid transparent;
@ -501,7 +501,7 @@ a .account__avatar {
display: block; display: block;
text-transform: uppercase; text-transform: uppercase;
font-size: 11px; font-size: 11px;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
} }
strong { strong {
@ -558,7 +558,7 @@ a .account__avatar {
margin: 2px; margin: 2px;
a { a {
background: var(--brand-color-faint); background: var(--brand-color--faint);
} }
&__icons { &__icons {
@ -571,16 +571,16 @@ a .account__avatar {
} }
.account--panel { .account--panel {
background: var(--brand-color-faint); background: var(--brand-color--faint);
border-top: 1px solid var(--brand-color-med); border-top: 1px solid var(--brand-color--med);
border-bottom: 1px solid var(--brand-color-med); border-bottom: 1px solid var(--brand-color--med);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
padding: 10px 0; padding: 10px 0;
} }
.account__section-headline { .account__section-headline {
background: var(--brand-color-faint); background: var(--brand-color--faint);
button, button,
a { a {
@ -601,9 +601,9 @@ a .account__avatar {
.account__moved-note { .account__moved-note {
padding: 14px 10px; padding: 14px 10px;
padding-bottom: 16px; padding-bottom: 16px;
background: var(--brand-color-faint); background: var(--brand-color--faint);
border-top: 1px solid var(--brand-color-med); border-top: 1px solid var(--brand-color--med);
border-bottom: 1px solid var(--brand-color-med); border-bottom: 1px solid var(--brand-color--med);
&__message { &__message {
position: relative; position: relative;

16
app/styles/basics.scss
View File

@ -53,7 +53,7 @@ body {
} }
&.lighter { &.lighter {
background: var(--brand-color-med); background: var(--brand-color--med);
} }
&.with-modals { &.with-modals {
@ -71,7 +71,7 @@ body {
} }
&.embed { &.embed {
background: var(--brand-color-faint); background: var(--brand-color--faint);
margin: 0; margin: 0;
padding-bottom: 0; padding-bottom: 0;
@ -84,7 +84,7 @@ body {
} }
&.admin { &.admin {
background: var(--brand-color-med); background: var(--brand-color--med);
position: fixed; position: fixed;
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -94,8 +94,8 @@ body {
&.error { &.error {
position: absolute; position: absolute;
text-align: center; text-align: center;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
background: var(--brand-color-med); background: var(--brand-color--med);
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 0; padding: 0;
@ -163,7 +163,7 @@ body {
color: var(--primary-text-color); color: var(--primary-text-color);
padding: 15px 20px; padding: 15px 20px;
font-size: 14px; font-size: 14px;
background-color: var(--brand-color-faint); background-color: var(--brand-color--faint);
margin: 5px 20px; margin: 5px 20px;
border-radius: 8px; border-radius: 8px;
@ -181,7 +181,7 @@ body {
} }
a { a {
color: var(--brand-color-hicontrast); color: var(--brand-color--hicontrast);
text-decoration: none; text-decoration: none;
&:hover { &:hover {
@ -202,7 +202,7 @@ noscript {
div { div {
font-size: 14px; font-size: 14px;
margin: 30px auto; margin: 30px auto;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
max-width: 400px; max-width: 400px;
a { a {

6
app/styles/boost.scss
View File

File diff suppressed because one or more lines are too long

4
app/styles/compact_header.scss
View File

@ -2,7 +2,7 @@
h1 { h1 {
font-size: 24px; font-size: 24px;
line-height: 28px; line-height: 28px;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
font-weight: 500; font-weight: 500;
margin-bottom: 20px; margin-bottom: 20px;
padding: 0 10px; padding: 0 10px;
@ -20,7 +20,7 @@
small { small {
font-weight: 400; font-weight: 400;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
} }
img { img {

16
app/styles/components/account-header.scss
View File

@ -18,7 +18,7 @@
overflow: hidden; overflow: hidden;
height: 350px; height: 350px;
position: relative; position: relative;
background: var(--brand-color-med); background: var(--brand-color--med);
@media screen and (max-width: 895px) {height: 225px;} @media screen and (max-width: 895px) {height: 225px;}
&--none {height: 125px;} &--none {height: 125px;}
@ -36,14 +36,14 @@
min-height: 74px; min-height: 74px;
width: 100%; width: 100%;
position: relative; position: relative;
background: var(--brand-color-med); background: var(--brand-color--med);
@media (min-width: 895px) {height: 74px;} @media (min-width: 895px) {height: 74px;}
} }
&__avatar { &__avatar {
display: block; display: block;
position: absolute; position: absolute;
border: 5px solid var(--brand-color-faint); border: 5px solid var(--brand-color--faint);
left: 0; left: 0;
top: -90px; top: -90px;
border-radius: 50%; border-radius: 50%;
@ -100,7 +100,7 @@
margin-left: auto; margin-left: auto;
.icon-button { .icon-button {
border: 1px solid var(--brand-color-med); border: 1px solid var(--brand-color--med);
border-radius: 4px; border-radius: 4px;
box-sizing: content-box; box-sizing: content-box;
padding: 2px; padding: 2px;
@ -116,7 +116,7 @@
&__links { &__links {
display: flex; display: flex;
font-size: 14px; font-size: 14px;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
@media screen and (max-width: 895px) { @media screen and (max-width: 895px) {
justify-content: center; justify-content: center;
flex-wrap: wrap; flex-wrap: wrap;
@ -144,7 +144,7 @@
} }
&:last-of-type { &:last-of-type {
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
padding-top: 2px; padding-top: 2px;
@ -162,7 +162,7 @@
@media screen and (max-width: 895px) { @media screen and (max-width: 895px) {
.account-mobile-container { .account-mobile-container {
display: block; display: block;
background: var(--brand-color-faint); background: var(--brand-color--faint);
margin-top: 10px; margin-top: 10px;
position: relative; position: relative;
padding: 10px 10px 0; padding: 10px 10px 0;
@ -179,7 +179,7 @@
} }
.account__header__content { .account__header__content {
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
overflow: hidden; overflow: hidden;

10
app/styles/components/buttons.scss
View File

@ -34,7 +34,7 @@ button {
&:active, &:active,
&:focus, &:focus,
&:hover { &:hover {
background-color: var(--brand-color-hicontrast); background-color: var(--brand-color--hicontrast);
} }
&--destructive { &--destructive {
@ -57,7 +57,7 @@ button {
&:disabled, &:disabled,
&.disabled { &.disabled {
background-color: var(--brand-color-med); background-color: var(--brand-color--med);
cursor: default; cursor: default;
} }
@ -83,17 +83,17 @@ button {
} }
&.button-alternative-2 { &.button-alternative-2 {
background: var(--brand-color-med); background: var(--brand-color--med);
&:active, &:active,
&:focus, &:focus,
&:hover { &:hover {
background-color: var(--brand-color-faint); background-color: var(--brand-color--faint);
} }
} }
&.button-secondary { &.button-secondary {
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
background: transparent; background: transparent;
padding: 3px 15px; padding: 3px 15px;
border: 1px solid var(--brand-color); border: 1px solid var(--brand-color);

52
app/styles/components/columns.scss
View File

@ -203,7 +203,7 @@
} }
.column-back-button { .column-back-button {
background: var(--brand-color-med); background: var(--brand-color--med);
color: var(--highlight-text-color); color: var(--highlight-text-color);
cursor: pointer; cursor: pointer;
flex: 0 0 auto; flex: 0 0 auto;
@ -222,7 +222,7 @@
} }
.column-header__back-button { .column-header__back-button {
background: var(--brand-color-faint); background: var(--brand-color--faint);
border: 0; border: 0;
font-family: inherit; font-family: inherit;
color: var(--highlight-text-color); color: var(--highlight-text-color);
@ -261,7 +261,7 @@
} }
.column-link { .column-link {
background: var(--brand-color-med); background: var(--brand-color--med);
color: var(--primary-text-color); color: var(--primary-text-color);
display: block; display: block;
font-size: 16px; font-size: 16px;
@ -271,7 +271,7 @@
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
background: var(--brand-color-faint); background: var(--brand-color--faint);
} }
&:focus { &:focus {
@ -306,14 +306,14 @@
font-size: 12px; font-size: 12px;
line-height: 19px; line-height: 19px;
font-weight: 500; font-weight: 500;
background: var(--brand-color-med); background: var(--brand-color--med);
padding: 4px 8px; padding: 4px 8px;
margin: -6px 10px; margin: -6px 10px;
} }
.column-subheading { .column-subheading {
background: var(--brand-color-med); background: var(--brand-color--med);
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
padding: 8px 20px; padding: 8px 20px;
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
@ -343,7 +343,7 @@
pointer-events: none; pointer-events: none;
height: 28px; height: 28px;
z-index: 1; z-index: 1;
background: radial-gradient(ellipse, rgba(var(--brand-color), 0.23) 0%, rgba(var(--brand-color), 0) 60%); background: radial-gradient(ellipse, hsla(var(--brand-color_hsl), 0.23) 0%, hsla(var(--brand-color_hsl), 0) 60%);
} }
} }
} }
@ -382,7 +382,7 @@
&.grouped { &.grouped {
margin: 6px; margin: 6px;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
} }
&.active { &.active {
@ -399,7 +399,7 @@
display: block; display: block;
position: absolute; position: absolute;
width: 100%; width: 100%;
background-color: var(--brand-color-faint); background-color: var(--brand-color--faint);
filter: var(--accent-filter); filter: var(--accent-filter);
border-radius: 10px; border-radius: 10px;
transition: 0.2s; transition: 0.2s;
@ -441,11 +441,11 @@
} }
&.active { &.active {
box-shadow: 0 1px 0 rgba(var(--highlight-text-color), 0.3); box-shadow: 0 1px 0 hsla(var(--highlight-text-color_hsl), 0.3);
.column-header__icon { .column-header__icon {
color: var(--highlight-text-color); color: var(--highlight-text-color);
text-shadow: 0 0 10px rgba(var(--highlight-text-color), 0.4); text-shadow: 0 0 10px hsla(var(--highlight-text-color_hsl), 0.4);
} }
} }
@ -470,20 +470,20 @@
border: 0; border: 0;
padding: 0 15px; padding: 0 15px;
font-size: 16px; font-size: 16px;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
background: transparent; background: transparent;
&:hover { &:hover {
color: rgba(var(--primary-text-color-rgb), 0.8); color: hsla(var(--primary-text-color_hsl), 0.8);
} }
&.active { &.active {
color: var(--primary-text-color); color: var(--primary-text-color);
background: var(--brand-color-med); background: var(--brand-color--med);
&:hover { &:hover {
color: var(--primary-text-color); color: var(--primary-text-color);
background: var(--brand-color-med); background: var(--brand-color--med);
} }
} }
} }
@ -492,7 +492,7 @@
max-height: 70vh; max-height: 70vh;
overflow: hidden; overflow: hidden;
overflow-y: auto; overflow-y: auto;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
transition: max-height 150ms ease-in-out, opacity 300ms linear; transition: max-height 150ms ease-in-out, opacity 300ms linear;
opacity: 1; opacity: 1;
@ -509,7 +509,7 @@
height: 0; height: 0;
background: transparent; background: transparent;
border: 0; border: 0;
border-top: 1px solid var(--brand-color-med); border-top: 1px solid var(--brand-color--med);
margin: 10px 0; margin: 10px 0;
} }
} }
@ -529,7 +529,7 @@
} }
&:hover { &:hover {
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
text-decoration: underline; text-decoration: underline;
} }
} }
@ -558,12 +558,12 @@
} }
.column-settings__outer { .column-settings__outer {
background: var(--brand-color-med); background: var(--brand-color--med);
padding: 15px; padding: 15px;
} }
.column-settings__section { .column-settings__section {
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
cursor: default; cursor: default;
display: block; display: block;
font-weight: 500; font-weight: 500;
@ -591,7 +591,7 @@
} }
&__multi-value { &__multi-value {
background: var(--brand-color-med); background: var(--brand-color--med);
&__remove { &__remove {
cursor: pointer; cursor: pointer;
@ -599,7 +599,7 @@
&:hover, &:hover,
&:active, &:active,
&:focus { &:focus {
background: var(--brand-color-med); background: var(--brand-color--med);
color: var(--primary-text-color); color: var(--primary-text-color);
} }
} }
@ -607,7 +607,7 @@
&__multi-value__label, &__multi-value__label,
&__input { &__input {
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
} }
&__clear-indicator, &__clear-indicator,
@ -624,7 +624,7 @@
} }
&__indicator-separator { &__indicator-separator {
background-color: var(--brand-color-med); background-color: var(--brand-color--med);
} }
&__menu { &__menu {
@ -659,7 +659,7 @@
.empty-column-indicator, .empty-column-indicator,
.error-column { .error-column {
color: var(--primary-text-color); color: var(--primary-text-color);
background: var(--brand-color-med); background: var(--brand-color--med);
text-align: center; text-align: center;
padding: 40px; padding: 40px;
font-size: 15px; font-size: 15px;

26
app/styles/components/compose-form.scss
View File

@ -167,7 +167,7 @@
&:focus, &:focus,
&:active, &:active,
&.selected { &.selected {
background: var(--brand-color-med); background: var(--brand-color--med);
} }
} }
@ -190,7 +190,7 @@
} }
.autosuggest-account .display-name__account { .autosuggest-account .display-name__account {
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
} }
.compose-form__modifiers { .compose-form__modifiers {
@ -226,7 +226,7 @@
.icon-button { .icon-button {
flex: 0 1 auto; flex: 0 1 auto;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
padding: 10px; padding: 10px;
@ -257,8 +257,8 @@
background: rgba(0, 0, 0, 0.3); background: rgba(0, 0, 0, 0.3);
box-sizing: border-box; box-sizing: border-box;
background: transparent; background: transparent;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
border: 1px solid var(--primary-text-color-faint); border: 1px solid var(--primary-text-color--faint);
outline: none; outline: none;
padding: 10px; padding: 10px;
margin: 0; margin: 0;
@ -270,7 +270,7 @@
&:focus {color: #fff;} &:focus {color: #fff;}
&::placeholder { &::placeholder {
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
} }
} }
&.active {opacity: 1;} &.active {opacity: 1;}
@ -321,7 +321,7 @@
font-family: var(--font-sans-serif), sans-serif; font-family: var(--font-sans-serif), sans-serif;
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
&.character-counter--over {color: $warning-red;} &.character-counter--over {color: $warning-red;}
} }
} }
@ -376,7 +376,7 @@
left: 0; left: 0;
z-index: -1; z-index: -1;
border-radius: 4px; border-radius: 4px;
background: var(--brand-color-med); background: var(--brand-color--med);
box-shadow: 0 0 5px rgba($base-shadow-color, 0.2); box-shadow: 0 0 5px rgba($base-shadow-color, 0.2);
} }
@ -385,10 +385,10 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
font-size: 18px; font-size: 18px;
font-weight: 500; font-weight: 500;
border: 2px dashed var(--brand-color-med); border: 2px dashed var(--brand-color--med);
border-radius: 4px; border-radius: 4px;
} }
@ -419,7 +419,7 @@
width: 100%; width: 100%;
height: 6px; height: 6px;
border-radius: 6px; border-radius: 6px;
background: var(--brand-color-med); background: var(--brand-color--med);
position: relative; position: relative;
margin-top: 5px; margin-top: 5px;
} }
@ -460,7 +460,7 @@
&:hover, &:hover,
&.active { &.active {
background: var(--brand-color-med); background: var(--brand-color--med);
color: var(--primary-text-color); color: var(--primary-text-color);
outline: 0; outline: 0;
@ -474,7 +474,7 @@
} }
&.active:hover { &.active:hover {
background: rgba(var(--brand-color-rgb), 0.5); background: hsla(var(--brand-color_hsl), 0.5);
} }
} }

14
app/styles/components/detailed-status.scss
View File

@ -7,7 +7,7 @@
} }
.detailed-status { .detailed-status {
background: rgba(var(--brand-color-rgb), 0.03); background: hsla(var(--brand-color_hsl), 0.03);
padding: 14px 10px; padding: 14px 10px;
&--flex { &--flex {
@ -45,22 +45,22 @@
.detailed-status__meta { .detailed-status__meta {
margin-top: 15px; margin-top: 15px;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
font-size: 14px; font-size: 14px;
line-height: 18px; line-height: 18px;
display: flex; display: flex;
} }
.detailed-status__action-bar { .detailed-status__action-bar {
background: rgba(var(--brand-color-rgb), 0.03); background: hsla(var(--brand-color_hsl), 0.03);
border-top: 1px solid var(--brand-color-faint); border-top: 1px solid var(--brand-color--faint);
border-bottom: 1px solid var(--brand-color-faint); border-bottom: 1px solid var(--brand-color--faint);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
.detailed-status__link { .detailed-status__link {
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
cursor: pointer; cursor: pointer;
text-decoration: none; text-decoration: none;
font-size: 13px; font-size: 13px;
@ -99,7 +99,7 @@
} }
.detailed-status__display-name { .detailed-status__display-name {
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
display: flex; display: flex;
line-height: 24px; line-height: 24px;
margin-bottom: 15px; margin-bottom: 15px;

4
app/styles/components/drawer.scss
View File

@ -10,7 +10,7 @@
display: block; display: block;
flex: 1 1 auto; flex: 1 1 auto;
padding: 15px 5px 13px; padding: 15px 5px 13px;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
text-decoration: none; text-decoration: none;
text-align: center; text-align: center;
font-size: 16px; font-size: 16px;
@ -55,7 +55,7 @@
.drawer__header { .drawer__header {
flex: 0 0 auto; flex: 0 0 auto;
font-size: 16px; font-size: 16px;
background: var(--brand-color-med); background: var(--brand-color--med);
margin-bottom: 10px; margin-bottom: 10px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;

2
app/styles/components/dropdown-menu.scss
View File

@ -146,7 +146,7 @@
&:hover { &:hover {
background: var(--brand-color); background: var(--brand-color);
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
} }
} }
} }

2
app/styles/components/error-boundary.scss
View File

@ -5,7 +5,7 @@
span { span {
display: block; display: block;
text-align: center; text-align: center;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
} }
a { a {

10
app/styles/components/getting-started.scss
View File

@ -1,7 +1,7 @@
.getting-started__wrapper, .getting-started__wrapper,
.getting-started, .getting-started,
.flex-spacer { .flex-spacer {
background: var(--brand-color-med); background: var(--brand-color--med);
} }
.getting-started__wrapper { .getting-started__wrapper {
@ -29,19 +29,19 @@
} }
p { p {
color: rgba(var(--primary-text-color-rgb), 0.8); color: hsla(var(--primary-text-color_hsl), 0.8);
font-size: 13px; font-size: 13px;
margin-bottom: 20px; margin-bottom: 20px;
a { a {
color: rgba(var(--primary-text-color-rgb), 0.4); color: hsla(var(--primary-text-color_hsl), 0.4);
text-decoration: underline; text-decoration: underline;
} }
} }
a { a {
text-decoration: none; text-decoration: none;
color: rgba(var(--primary-text-color-rgb), 0.4); color: hsla(var(--primary-text-color_hsl), 0.4);
&:hover, &:hover,
&:focus, &:focus,
@ -52,7 +52,7 @@
} }
&__trends { &__trends {
background: var(--brand-color-med); background: var(--brand-color--med);
flex: 0 1 auto; flex: 0 1 auto;
@media screen and (max-height: 810px) { @media screen and (max-height: 810px) {

2
app/styles/components/group-card.scss
View File

@ -53,7 +53,7 @@
} }
.group-card__meta { .group-card__meta {
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
font-size: 14px; font-size: 14px;
margin-top: 5px; margin-top: 5px;
margin-bottom: 10px; margin-bottom: 10px;

2
app/styles/components/group-form.scss
View File

@ -31,7 +31,7 @@
float: left; float: left;
height: 20px; height: 20px;
padding: 3px 0 0 33px; padding: 3px 0 0 33px;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
background-repeat: no-repeat; background-repeat: no-repeat;
background-image: url('../images/sprite-post-functions.png'); background-image: url('../images/sprite-post-functions.png');
background-size: 100px 1200px; background-size: 100px 1200px;

2
app/styles/components/group-sidebar-panel.scss
View File

@ -23,7 +23,7 @@
&__meta { &__meta {
font-size: 0.8em; font-size: 0.8em;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
&__unread { &__unread {
color: var(--brand-color); color: var(--brand-color);

4
app/styles/components/hotkeys-modal.scss
View File

@ -43,8 +43,8 @@
kbd { kbd {
display: inline-block; display: inline-block;
padding: 2px 8px; padding: 2px 8px;
background-color: var(--brand-color-med); background-color: var(--brand-color--med);
border: 1px solid var(--brand-color-med); border: 1px solid var(--brand-color--med);
border-radius: 4px; border-radius: 4px;
} }
} }

4
app/styles/components/inputs.scss
View File

@ -3,13 +3,13 @@ textarea {
&.standard { &.standard {
@include font-size(16); @include font-size(16);
@include line-height(18); @include line-height(18);
@include input-placeholder(var(--primary-text-color-faint)); @include input-placeholder(var(--primary-text-color--faint));
box-sizing: border-box; box-sizing: border-box;
padding: 7px 10px; padding: 7px 10px;
border: 1px solid; border: 1px solid;
border-radius: 4px; border-radius: 4px;
color: var(--brand-color); color: var(--brand-color);
border-color: var(--primary-text-color-faint); border-color: var(--primary-text-color--faint);
background: var(--foreground-color); background: var(--foreground-color);
&:focus {outline: none;} &:focus {outline: none;}
} }

2
app/styles/components/list-forms.scss
View File

@ -86,7 +86,7 @@
.list { .list {
padding: 4px; padding: 4px;
border-bottom: 1px solid var(--brand-color-med); border-bottom: 1px solid var(--brand-color--med);
} }
.list__wrapper { .list__wrapper {

4
app/styles/components/media-gallery.scss
View File

@ -5,7 +5,7 @@
border-radius: 4px; border-radius: 4px;
position: relative; position: relative;
width: 100%; width: 100%;
background-color: var(--brand-color-faint); background-color: var(--brand-color--faint);
} }
.media-gallery__item { .media-gallery__item {
@ -22,7 +22,7 @@
cursor: zoom-in; cursor: zoom-in;
display: block; display: block;
text-decoration: none; text-decoration: none;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
line-height: 0; line-height: 0;
position: relative; position: relative;
z-index: 1; z-index: 1;

2
app/styles/components/media-spoiler.scss
View File

@ -1,6 +1,6 @@
.media-spoiler { .media-spoiler {
background: var(--background-color); background: var(--background-color);
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
border: 0; border: 0;
padding: 0; padding: 0;
width: 100%; width: 100%;

28
app/styles/components/modal.scss
View File

@ -254,7 +254,7 @@
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
background-color: var(--background-color); background-color: var(--background-color);
} }
@ -289,8 +289,8 @@
} }
&__case { &__case {
background: var(--brand-color-med); background: var(--brand-color--med);
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
font-weight: 500; font-weight: 500;
padding: 10px; padding: 10px;
border-radius: 4px; border-radius: 4px;
@ -315,8 +315,8 @@
width: 480px; width: 480px;
max-width: 90vw; max-width: 90vw;
border-radius: 4px; border-radius: 4px;
border: 1px solid var(--primary-text-color-faint); border: 1px solid var(--primary-text-color--faint);
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
background: var(--foreground-color); background: var(--foreground-color);
.status__display-name { .status__display-name {
@ -440,7 +440,7 @@
.status__content, .status__content,
.status__content p { .status__content p {
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
} }
@media screen and (max-width: 480px) { @media screen and (max-width: 480px) {
@ -532,7 +532,7 @@
align-items: center; align-items: center;
padding: 13px 10px 12px; padding: 13px 10px 12px;
@inclide font-size(14); @inclide font-size(14);
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
text-decoration: none; text-decoration: none;
&, &,
@ -570,7 +570,7 @@
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
} }
} }
@ -607,7 +607,7 @@
} }
.modal-layout { .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(var(--background-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; display: flex;
flex-direction: column; flex-direction: column;
height: 100vh; height: 100vh;
@ -731,7 +731,7 @@
> span { > span {
font-size: 14px; font-size: 14px;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
a { a {
color: var(--brand-color) !important; color: var(--brand-color) !important;
@ -778,7 +778,7 @@
border-radius: 5px; border-radius: 5px;
padding: 10px; padding: 10px;
font-family: var(--font-monospace), monospace; font-family: var(--font-monospace), monospace;
background: var(--brand-color-med); background: var(--brand-color--med);
color: var(--primary-text-color); color: var(--primary-text-color);
font-size: 14px; font-size: 14px;
margin: 0; margin: 0;
@ -795,7 +795,7 @@
} }
&:focus { &:focus {
background: var(--brand-color-faint); background: var(--brand-color--faint);
} }
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
@ -817,7 +817,7 @@
} }
.modal-container--preloader { .modal-container--preloader {
background: var(--brand-color-med); background: var(--brand-color--med);
} }
.column-inline-form { .column-inline-form {
@ -826,7 +826,7 @@
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
background: var(--brand-color-faint); background: var(--brand-color--faint);
label { label {
flex: 1 1 auto; flex: 1 1 auto;

4
app/styles/components/navigation-bar.scss
View File

@ -4,10 +4,10 @@
align-items: center; align-items: center;
flex-shrink: 0; flex-shrink: 0;
cursor: default; cursor: default;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
strong { strong {
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
} }
a { a {

4
app/styles/components/notification.scss
View File

@ -3,7 +3,7 @@
background: transparent; background: transparent;
.icon-button.disabled { .icon-button.disabled {
color: rgba(var(--brand-color-rgb), 0.2); color: hsla(var(--brand-color_hsl), 0.2);
} }
} }
} }
@ -12,7 +12,7 @@
margin: 0 10px 0 68px; margin: 0 10px 0 68px;
padding: 8px 0 0; padding: 8px 0 0;
cursor: default; cursor: default;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
font-size: 15px; font-size: 15px;
line-height: 22px; line-height: 22px;
position: relative; position: relative;

6
app/styles/components/profile-info-panel.scss
View File

@ -67,7 +67,7 @@
display: block; display: block;
font-size: 16px; font-size: 16px;
line-height: 1.5; line-height: 1.5;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
font-weight: 400; font-weight: 400;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -91,12 +91,12 @@
&__fields { &__fields {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border-top: 1px solid var(--brand-color-med); border-top: 1px solid var(--brand-color--med);
padding: 10px 0; padding: 10px 0;
margin: 5px 0; margin: 5px 0;
@media screen and (max-width: 895px) { @media screen and (max-width: 895px) {
border-bottom: 1px solid var(--brand-color-med); border-bottom: 1px solid var(--brand-color--med);
} }
a { a {

4
app/styles/components/promo-panel.scss
View File

@ -9,7 +9,7 @@
display: block; display: block;
height: 42px; height: 42px;
line-height: 42px; line-height: 42px;
border-bottom: 1px solid var(--brand-color-med); border-bottom: 1px solid var(--brand-color--med);
background: var(--foreground-color); background: var(--foreground-color);
&--highlighted { &--highlighted {
@ -37,7 +37,7 @@
padding: 0 20px; padding: 0 20px;
&:hover { &:hover {
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
span { span {
text-decoration: underline; text-decoration: underline;

6
app/styles/components/react-toggle.scss
View File

@ -37,7 +37,7 @@
} }
.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track { .react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
background-color: var(--brand-color-hicontrast); background-color: var(--brand-color--hicontrast);
} }
.react-toggle--checked .react-toggle-track { .react-toggle--checked .react-toggle-track {
@ -45,7 +45,7 @@
} }
.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track { .react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
background-color: var(--brand-color-hicontrast); background-color: var(--brand-color--hicontrast);
} }
.react-toggle-track-check { .react-toggle-track-check {
@ -91,7 +91,7 @@
left: 1px; left: 1px;
width: 22px; width: 22px;
height: 22px; height: 22px;
border: 1px solid var(--brand-color-med); border: 1px solid var(--brand-color--med);
border-radius: 50%; border-radius: 50%;
background-color: var(--background-color); background-color: var(--background-color);
box-sizing: border-box; box-sizing: border-box;

4
app/styles/components/reply-indicator.scss
View File

@ -1,7 +1,7 @@
.reply-indicator { .reply-indicator {
border-radius: 4px; border-radius: 4px;
margin-bottom: 10px; margin-bottom: 10px;
background: var(--brand-color-faint); background: var(--brand-color--faint);
padding: 10px; padding: 10px;
min-height: 23px; min-height: 23px;
overflow-y: auto; overflow-y: auto;
@ -31,7 +31,7 @@
text-decoration: none; text-decoration: none;
.display-name__account { .display-name__account {
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
} }
} }

12
app/styles/components/search.scss
View File

@ -34,7 +34,7 @@
z-index: 2; z-index: 2;
width: 18px; width: 18px;
height: 18px; height: 18px;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
@ -55,7 +55,7 @@
.search-results__header { .search-results__header {
color: var(--primary-text-color); color: var(--primary-text-color);
background: var(--brand-color-med); background: var(--brand-color--med);
padding: 15px; padding: 15px;
font-weight: 500; font-weight: 500;
font-size: 16px; font-size: 16px;
@ -71,8 +71,8 @@
margin-bottom: 5px; margin-bottom: 5px;
h5 { h5 {
background: var(--brand-color-faint); background: var(--brand-color--faint);
border-bottom: 1px solid var(--brand-color-faint); border-bottom: 1px solid var(--brand-color--faint);
cursor: default; cursor: default;
display: flex; display: flex;
padding: 15px; padding: 15px;
@ -95,7 +95,7 @@
.search-results__hashtag { .search-results__hashtag {
display: block; display: block;
padding: 10px; padding: 10px;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
text-decoration: none; text-decoration: none;
&:hover, &:hover,
@ -113,7 +113,7 @@
&__text-container { &__text-container {
display: none; display: none;
padding: 25px 0; padding: 25px 0;
background-color: var(--brand-color-med); background-color: var(--brand-color--med);
@media (min-width: 895px) { @media (min-width: 895px) {
display: block; display: block;

2
app/styles/components/setting-toggle.scss
View File

@ -4,7 +4,7 @@
} }
.setting-toggle__label { .setting-toggle__label {
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
display: inline-block; display: inline-block;
margin-bottom: 14px; margin-bottom: 14px;
margin-left: 8px; margin-left: 8px;

12
app/styles/components/sidebar-menu.scss
View File

@ -42,7 +42,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 4px 0; padding: 4px 0;
border-top: 1px solid rgba(var(--primary-text-color-rgb), 0.15); border-top: 1px solid hsla(var(--primary-text-color_hsl), 0.15);
&--borderless { &--borderless {
margin: 0; margin: 0;
@ -71,7 +71,7 @@
display: flex; display: flex;
height: 46px; height: 46px;
padding: 12px 14px; padding: 12px 14px;
border-bottom: 1px solid rgba(var(--primary-text-color-rgb), 0.15); border-bottom: 1px solid hsla(var(--primary-text-color_hsl), 0.15);
box-sizing: border-box; box-sizing: border-box;
align-items: center; align-items: center;
@ -107,7 +107,7 @@
.display-name__account { .display-name__account {
display: block; display: block;
margin-top: 2px; margin-top: 2px;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
} }
} }
@ -135,7 +135,7 @@
&__label { &__label {
display: flex; display: flex;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
} }
&:hover { &:hover {
@ -148,12 +148,12 @@
padding: 16px 18px; padding: 16px 18px;
cursor: pointer; cursor: pointer;
text-decoration: none; text-decoration: none;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
font-size: 15px; font-size: 15px;
font-weight: 400; font-weight: 400;
&:hover { &:hover {
background-color: rgba(var(--brand-color-rgb), 0.1); background-color: hsla(var(--brand-color_hsl), 0.1);
color: var(--primary-text-color); color: var(--primary-text-color);
} }

46
app/styles/components/status.scss
View File

@ -48,7 +48,7 @@
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
clear: both; clear: both;
border-bottom: 1px solid var(--brand-color-med); border-bottom: 1px solid var(--brand-color--med);
} }
.status__prepend-icon-wrapper { .status__prepend-icon-wrapper {
@ -61,7 +61,7 @@
padding-left: 68px; padding-left: 68px;
position: relative; position: relative;
min-height: 54px; min-height: 54px;
border-bottom: 1px solid var(--brand-color-faint); border-bottom: 1px solid var(--brand-color--faint);
cursor: default; cursor: default;
@supports (-ms-overflow-style: -ms-autohiding-scrollbar) { @supports (-ms-overflow-style: -ms-autohiding-scrollbar) {
@ -83,21 +83,21 @@
} }
&.status-direct:not(.read) { &.status-direct:not(.read) {
background: var(--brand-color-med); background: var(--brand-color--med);
border-bottom-color: var(--brand-color-med); border-bottom-color: var(--brand-color--med);
.status__content a { .status__content a {
color: var(--brand-color-hicontrast); color: var(--brand-color--hicontrast);
} }
} }
&.light { &.light {
.status__relative-time { .status__relative-time {
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
} }
.status__display-name { .status__display-name {
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
} }
.display-name { .display-name {
@ -106,7 +106,7 @@
} }
span { span {
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
} }
} }
@ -130,7 +130,7 @@
&__meta { &__meta {
font-size: 14px; font-size: 14px;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
a { a {
color: var(--brand-color); color: var(--brand-color);
@ -145,7 +145,7 @@
} }
.status__display-name { .status__display-name {
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
} }
.status__info .status__display-name { .status__info .status__display-name {
@ -332,11 +332,11 @@
} }
.status__content__spoiler-link { .status__content__spoiler-link {
background: var(--brand-color-med); background: var(--brand-color--med);
transition: 0.2s; transition: 0.2s;
&:hover { &:hover {
background: rgba(var(--brand-color-rgb), 0.5); background: hsla(var(--brand-color_hsl), 0.5);
text-decoration: none; text-decoration: none;
} }
@ -363,10 +363,10 @@
.focusable { .focusable {
&:focus { &:focus {
outline: 0; outline: 0;
background: var(--brand-color-faint); background: var(--brand-color--faint);
.status.status-direct { .status.status-direct {
background: var(--brand-color-med); background: var(--brand-color--med);
&.muted { &.muted {
background: transparent; background: transparent;
@ -375,7 +375,7 @@
.detailed-status, .detailed-status,
.detailed-status__action-bar { .detailed-status__action-bar {
background: var(--brand-color-med); background: var(--brand-color--med);
} }
} }
} }
@ -383,7 +383,7 @@
.status-card { .status-card {
display: flex; display: flex;
font-size: 14px; font-size: 14px;
border: 1px solid var(--brand-color-med); border: 1px solid var(--brand-color--med);
border-radius: 4px; border-radius: 4px;
color: var(--primary-text-color); color: var(--primary-text-color);
margin-top: 14px; margin-top: 14px;
@ -413,7 +413,7 @@
button, button,
a { a {
display: inline; display: inline;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
background: transparent; background: transparent;
border: 0; border: 0;
padding: 0 8px; padding: 0 8px;
@ -440,7 +440,7 @@ a.status-card {
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: var(--brand-color-med); background: var(--brand-color--med);
} }
} }
@ -464,7 +464,7 @@ a.status-card {
display: block; display: block;
font-weight: 500; font-weight: 500;
margin-bottom: 5px; margin-bottom: 5px;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
@ -478,7 +478,7 @@ a.status-card {
} }
.status-card__description { .status-card__description {
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
} }
.status-card__host { .status-card__host {
@ -492,7 +492,7 @@ a.status-card {
.status-card__image { .status-card__image {
flex: 0 0 100px; flex: 0 0 100px;
background: var(--brand-color-med); background: var(--brand-color--med);
position: relative; position: relative;
& > .fa { & > .fa {
@ -522,7 +522,7 @@ a.status-card {
} }
.status-card.compact { .status-card.compact {
border-color: var(--brand-color-faint); border-color: var(--brand-color--faint);
&.interactive { &.interactive {
border: 0; border: 0;
@ -543,7 +543,7 @@ a.status-card {
} }
a.status-card.compact:hover { a.status-card.compact:hover {
background-color: var(--brand-color-faint); background-color: var(--brand-color--faint);
} }
.status-card__image-image { .status-card__image-image {

2
app/styles/components/tabs-bar.scss
View File

@ -125,7 +125,7 @@
&:hover { &:hover {
background-color: var(--brand-color); background-color: var(--brand-color);
filter: var(--accent-filter-hover); filter: var(--accent-filter--hover);
} }
} }

2
app/styles/components/timeline-queue-header.scss
View File

@ -5,7 +5,7 @@
position: relative; position: relative;
border-bottom: 1px solid; border-bottom: 1px solid;
border-top: 1px solid; border-top: 1px solid;
border-color: var(--brand-color-faint); border-color: var(--brand-color--faint);
transition: max-height 150ms ease; transition: max-height 150ms ease;
overflow: hidden; overflow: hidden;
opacity: 1; opacity: 1;

10
app/styles/components/trends.scss
View File

@ -1,8 +1,8 @@
.trends { .trends {
&__header { &__header {
color: var(--primary-text-color); color: var(--primary-text-color);
background: var(--brand-color-faint); background: var(--brand-color--faint);
border-bottom: 1px solid var(--brand-color-med); border-bottom: 1px solid var(--brand-color--med);
font-weight: 500; font-weight: 500;
padding: 15px; padding: 15px;
font-size: 16px; font-size: 16px;
@ -18,7 +18,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
padding: 15px; padding: 15px;
border-bottom: 1px solid var(--brand-color-med); border-bottom: 1px solid var(--brand-color--med);
&:last-child { &:last-child {
border-bottom: 0; border-bottom: 0;
@ -37,7 +37,7 @@
} }
a { a {
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
text-decoration: none; text-decoration: none;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
@ -63,7 +63,7 @@
line-height: 36px; line-height: 36px;
font-weight: 500; font-weight: 500;
text-align: center; text-align: center;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
} }
&__sparkline { &__sparkline {

6
app/styles/components/user-panel.scss
View File

@ -9,7 +9,7 @@
display: block; display: block;
height: 112px; height: 112px;
width: 100%; width: 100%;
background: var(--brand-color-faint); background: var(--brand-color--faint);
img { img {
display: block; display: block;
@ -65,7 +65,7 @@
display: block; display: block;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
text-decoration: none !important; text-decoration: none !important;
} }
} }
@ -104,7 +104,7 @@
&__label { &__label {
display: block; display: block;
width: 100%; width: 100%;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
} }

4
app/styles/components/video-player.scss
View File

@ -151,7 +151,7 @@
z-index: 4; z-index: 4;
border: 0; border: 0;
background: var(--background-color); background: var(--background-color);
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
transition: none; transition: none;
pointer-events: none; pointer-events: none;
@ -378,7 +378,7 @@
.media-spoiler-video-play-icon { .media-spoiler-video-play-icon {
border-radius: 100px; border-radius: 100px;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
font-size: 36px; font-size: 36px;
left: 50%; left: 50%;
padding: 5px; padding: 5px;

4
app/styles/components/wtf-panel.scss
View File

@ -43,7 +43,7 @@
&__subtitle { &__subtitle {
display: block; display: block;
padding: 0 15px; padding: 0 15px;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
} }
&__form { &__form {
@ -64,7 +64,7 @@
} }
&:not(:last-of-type) { &:not(:last-of-type) {
border-bottom: 1px solid var(--brand-color-med); border-bottom: 1px solid var(--brand-color--med);
} }
&__content { &__content {

2
app/styles/containers.scss
View File

@ -93,7 +93,7 @@
.name { .name {
flex: 1 1 auto; flex: 1 1 auto;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
width: calc(100% - 88px); width: calc(100% - 88px);
.username { .username {

6
app/styles/dashboard.scss
View File

@ -13,7 +13,7 @@
& > div, & > div,
& > a { & > a {
padding: 20px; padding: 20px;
background: var(--brand-color-faint); background: var(--brand-color--faint);
border-radius: 4px; border-radius: 4px;
} }
@ -25,7 +25,7 @@
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
background: var(--brand-color-med); background: var(--brand-color--med);
} }
} }
} }
@ -48,7 +48,7 @@
&__label { &__label {
font-size: 14px; font-size: 14px;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
text-align: center; text-align: center;
font-weight: 500; font-weight: 500;
} }

2
app/styles/donations.scss
View File

@ -26,7 +26,7 @@
} }
.sub { .sub {
border: 1px solid rgba(var(--primary-text-color-rgb), 0.5); border: 1px solid hsla(var(--primary-text-color_hsl), 0.5);
padding: 20px; padding: 20px;
position: relative; position: relative;
border-radius: 4px; border-radius: 4px;

12
app/styles/emoji_picker.scss
View File

@ -35,7 +35,7 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 0 6px; padding: 0 6px;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
line-height: 0; line-height: 0;
} }
@ -49,7 +49,7 @@
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
} }
} }
@ -114,7 +114,7 @@
display: block; display: block;
width: 100%; width: 100%;
background: var(--background-color); background: var(--background-color);
border: 1px solid var(--brand-color-faint); border: 1px solid var(--brand-color--faint);
border-radius: 9999px; border-radius: 9999px;
&::-moz-focus-inner { &::-moz-focus-inner {
@ -146,7 +146,7 @@
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: rgba(var(--background-color-rgb), 0.7); background-color: hsla(var(--background-color_hsl), 0.7);
border-radius: 100%; border-radius: 100%;
} }
} }
@ -182,7 +182,7 @@
font-size: 14px; font-size: 14px;
text-align: center; text-align: center;
padding-top: 70px; padding-top: 70px;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
.emoji-mart-category-label { .emoji-mart-category-label {
display: none; display: none;
@ -244,7 +244,7 @@
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
background: rgba(var(--background-color-rgb), 0.4); background: hsla(var(--background-color_hsl), 0.4);
} }
} }

2
app/styles/footer.scss
View File

@ -34,7 +34,7 @@
text-transform: uppercase; text-transform: uppercase;
font-weight: 700; font-weight: 700;
margin-bottom: 8px; margin-bottom: 8px;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
font-size: 1.6rem; font-size: 1.6rem;
line-height: 1.5; line-height: 1.5;

40
app/styles/forms.scss
View File

@ -95,7 +95,7 @@ code {
} }
.hint { .hint {
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
a { a {
color: var(--highlight-text-color); color: var(--highlight-text-color);
@ -116,7 +116,7 @@ code {
p.hint { p.hint {
margin-bottom: 15px; margin-bottom: 15px;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
&.subtle-hint { &.subtle-hint {
text-align: center; text-align: center;
@ -300,8 +300,8 @@ code {
input[type=email], input[type=email],
input[type=password], input[type=password],
textarea { textarea {
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
border-color: var(--primary-text-color-faint); border-color: var(--primary-text-color--faint);
} }
} }
@ -338,7 +338,7 @@ code {
&:active, &:active,
&:focus { &:focus {
border-color: var(--brand-color-hicontrast); border-color: var(--brand-color--hicontrast);
} }
} }
@ -408,7 +408,7 @@ code {
&:hover, &:hover,
&:active, &:active,
&:focus { &:focus {
background-color: var(--brand-color-hicontrast); background-color: var(--brand-color--hicontrast);
} }
&.negative { &.negative {
@ -471,7 +471,7 @@ code {
right: 0; right: 0;
bottom: 1px; bottom: 1px;
width: 5px; width: 5px;
background-image: linear-gradient(to right, rgba(var(--background-color-rgb), 0), var(--background-color)); background-image: linear-gradient(to right, hsla(var(--background-color_hsl), 0), var(--background-color));
} }
} }
} }
@ -521,8 +521,8 @@ code {
} }
.flash-message { .flash-message {
background: var(--brand-color-med); background: var(--brand-color--med);
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
border-radius: 4px; border-radius: 4px;
padding: 15px 10px; padding: 15px 10px;
margin-bottom: 30px; margin-bottom: 30px;
@ -542,7 +542,7 @@ code {
a { a {
display: inline-block; display: inline-block;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
text-decoration: none; text-decoration: none;
&:hover { &:hover {
@ -563,7 +563,7 @@ code {
border: 0; border: 0;
padding: 10px; padding: 10px;
font-family: var(--font-monospace), monospace; font-family: var(--font-monospace), monospace;
background: var(--brand-color-med); background: var(--brand-color--med);
color: var(--primary-text-color); color: var(--primary-text-color);
font-size: 14px; font-size: 14px;
margin: 0; margin: 0;
@ -579,7 +579,7 @@ code {
} }
&:focus { &:focus {
background: var(--brand-color-faint); background: var(--brand-color--faint);
} }
} }
@ -603,7 +603,7 @@ code {
text-align: center; text-align: center;
a { a {
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
text-decoration: none; text-decoration: none;
&:hover { &:hover {
@ -639,7 +639,7 @@ code {
.oauth-prompt, .oauth-prompt,
.follow-prompt { .follow-prompt {
margin-bottom: 30px; margin-bottom: 30px;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
h2 { h2 {
font-size: 16px; font-size: 16px;
@ -648,7 +648,7 @@ code {
} }
strong { strong {
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
font-weight: 500; font-weight: 500;
@each $lang in $cjk-langs { @each $lang in $cjk-langs {
@ -685,7 +685,7 @@ code {
.qr-alternative { .qr-alternative {
margin-bottom: 20px; margin-bottom: 20px;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
flex: 150px; flex: 150px;
samp { samp {
@ -770,7 +770,7 @@ code {
.post-follow-actions { .post-follow-actions {
text-align: center; text-align: center;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
div { div {
margin-bottom: 4px; margin-bottom: 4px;
@ -860,7 +860,7 @@ code {
margin-bottom: 25px; margin-bottom: 25px;
.fa-link { .fa-link {
background-color: var(--brand-color-med); background-color: var(--brand-color--med);
border-radius: 100%; border-radius: 100%;
font-size: 24px; font-size: 24px;
padding: 10px; padding: 10px;
@ -892,7 +892,7 @@ code {
} }
&__connection { &__connection {
background-color: var(--brand-color-med); background-color: var(--brand-color--med);
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
border-radius: 4px; border-radius: 4px;
padding: 25px 10px; padding: 25px 10px;
@ -900,7 +900,7 @@ code {
text-align: center; text-align: center;
&::after { &::after {
background-color: var(--brand-color-med); background-color: var(--brand-color--med);
content: ''; content: '';
display: block; display: block;
height: 100%; height: 100%;

6
app/styles/introduction.scss
View File

@ -92,13 +92,13 @@
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
font-weight: 400; font-weight: 400;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
code { code {
display: inline-block; display: inline-block;
background: var(--background-color); background: var(--background-color);
font-size: 15px; font-size: 15px;
border: 1px solid var(--brand-color-med); border: 1px solid var(--brand-color--med);
border-radius: 2px; border-radius: 2px;
padding: 1px 3px; padding: 1px 3px;
} }
@ -132,7 +132,7 @@
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: var(--brand-color-med); background: var(--brand-color--med);
} }
&.active { &.active {

14
app/styles/loading.scss
View File

@ -1,5 +1,5 @@
.loading-indicator { .loading-indicator {
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
font-size: 12px; font-size: 12px;
font-weight: 400; font-weight: 400;
text-transform: uppercase; text-transform: uppercase;
@ -28,7 +28,7 @@
height: 42px; height: 42px;
box-sizing: border-box; box-sizing: border-box;
background-color: transparent; background-color: transparent;
border: 0 solid rgba(var(--brand-color-rgb), 0.5); border: 0 solid hsla(var(--brand-color_hsl), 0.5);
border-width: 6px; border-width: 6px;
border-radius: 50%; border-radius: 50%;
} }
@ -45,11 +45,11 @@
0% { 0% {
width: 0; width: 0;
height: 0; height: 0;
background-color: rgba(var(--brand-color-rgb), 0.5); background-color: hsla(var(--brand-color_hsl), 0.5);
} }
29% { 29% {
background-color: rgba(var(--brand-color-rgb), 0.5); background-color: hsla(var(--brand-color_hsl), 0.5);
} }
30% { 30% {
@ -168,12 +168,12 @@
text-decoration: none; text-decoration: none;
&:hover { &:hover {
background: var(--brand-color-faint); background: var(--brand-color--faint);
} }
} }
.load-gap { .load-gap {
border-bottom: 1px solid var(--brand-color-med); border-bottom: 1px solid var(--brand-color--med);
} }
.regeneration-indicator { .regeneration-indicator {
@ -181,7 +181,7 @@
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
color: var(--primary-text-color); color: var(--primary-text-color);
background: var(--brand-color-med); background: var(--brand-color--med);
cursor: default; cursor: default;
display: flex; display: flex;
flex: 1 1 auto; flex: 1 1 auto;

12
app/styles/polls.scss
View File

@ -14,8 +14,8 @@
height: 100%; height: 100%;
display: inline-block; display: inline-block;
border-radius: 4px; border-radius: 4px;
background: rgba(var(--primary-text-color-rgb), .3); background: hsla(var(--primary-text-color_hsl), .3);
&.leading {background: rgba(var(--primary-text-color-rgb), .6);} &.leading {background: hsla(var(--primary-text-color_hsl), .6);}
} }
&__text { &__text {
@ -27,7 +27,7 @@
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
text-overflow: ellipsis; text-overflow: ellipsis;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
input[type=radio], input[type=radio],
input[type=checkbox] { input[type=checkbox] {
@ -129,7 +129,7 @@
&:active, &:active,
&:focus { &:focus {
background-color: rgba(var(--primary-text-color-rgb), .1); background-color: hsla(var(--primary-text-color_hsl), .1);
} }
} }
@ -208,10 +208,10 @@
color: var(--primary-text-color); color: var(--primary-text-color);
&__chart { &__chart {
background: rgba(var(--brand-color), 0.2); background: hsla(var(--brand-color_hsl), 0.2);
&.leading { &.leading {
background: rgba(var(--brand-color), 0.2); background: hsla(var(--brand-color_hsl), 0.2);
} }
} }
} }

4
app/styles/rtl.scss
View File

@ -238,12 +238,12 @@ body.rtl {
&::after { &::after {
right: auto; right: auto;
left: 0; left: 0;
background-image: linear-gradient(to left, rgba(var(--background-color-rgb), 0), var(--background-color)); background-image: linear-gradient(to left, hsla(var(--background-color_hsl), 0), var(--background-color));
} }
} }
.simple_form select { .simple_form select {
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; 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, .table th,

8
app/styles/stream_entries.scss
View File

@ -26,7 +26,7 @@
} }
.entry { .entry {
background: var(--brand-color-med); background: var(--brand-color--med);
.detailed-status, .detailed-status,
.status, .status,
@ -69,7 +69,7 @@
} }
&--highlighted .entry { &--highlighted .entry {
background: var(--brand-color-med); background: var(--brand-color--med);
} }
} }
@ -95,7 +95,7 @@
&:active, &:active,
&:focus, &:focus,
&:hover { &:hover {
background: var(--brand-color-hicontrast); background: var(--brand-color--hicontrast);
} }
&:disabled, &:disabled,
@ -103,7 +103,7 @@
&:active, &:active,
&:focus, &:focus,
&:hover { &:hover {
background: var(--brand-color-med); background: var(--brand-color--med);
} }
} }

20
app/styles/tables.scss
View File

@ -9,14 +9,14 @@
padding: 8px; padding: 8px;
line-height: 18px; line-height: 18px;
vertical-align: top; vertical-align: top;
border-top: 1px solid var(--brand-color-med); border-top: 1px solid var(--brand-color--med);
text-align: left; text-align: left;
background: var(--brand-color-med); background: var(--brand-color--med);
} }
& > thead > tr > th { & > thead > tr > th {
vertical-align: bottom; vertical-align: bottom;
border-bottom: 2px solid var(--brand-color-med); border-bottom: 2px solid var(--brand-color--med);
border-top: 0; border-top: 0;
font-weight: 500; font-weight: 500;
} }
@ -27,7 +27,7 @@
& > tbody > tr:nth-child(odd) > td, & > tbody > tr:nth-child(odd) > td,
& > tbody > tr:nth-child(odd) > th { & > tbody > tr:nth-child(odd) > th {
background: var(--brand-color-med); background: var(--brand-color--med);
} }
a { a {
@ -67,7 +67,7 @@
&.batch-table { &.batch-table {
& > thead > tr > th { & > thead > tr > th {
background: var(--brand-color-med); background: var(--brand-color--med);
border-top: 1px solid var(--background-color); border-top: 1px solid var(--background-color);
border-bottom: 1px solid var(--background-color); border-bottom: 1px solid var(--background-color);
@ -109,7 +109,7 @@ a.table-action-link {
display: inline-block; display: inline-block;
margin-right: 5px; margin-right: 5px;
padding: 0 10px; padding: 0 10px;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
font-weight: 500; font-weight: 500;
&:hover { &:hover {
@ -165,7 +165,7 @@ a.table-action-link {
&__toolbar { &__toolbar {
border: 1px solid var(--background-color); border: 1px solid var(--background-color);
background: var(--brand-color-med); background: var(--brand-color--med);
border-radius: 4px 0 0; border-radius: 4px 0 0;
height: 47px; height: 47px;
align-items: center; align-items: center;
@ -183,7 +183,7 @@ a.table-action-link {
&__row { &__row {
border: 1px solid var(--background-color); border: 1px solid var(--background-color);
border-top: 0; border-top: 0;
background: var(--brand-color-med); background: var(--brand-color--med);
@media screen and (max-width: $no-gap-breakpoint) { @media screen and (max-width: $no-gap-breakpoint) {
&:first-child { &:first-child {
@ -196,10 +196,10 @@ a.table-action-link {
} }
&:nth-child(even) { &:nth-child(even) {
background: var(--brand-color-med); background: var(--brand-color--med);
&:hover { &:hover {
background: var(--brand-color-faint); background: var(--brand-color--faint);
} }
} }

81
app/styles/themes.scss
View File

@ -1,58 +1,53 @@
body { body {
--brand-color-rgb: var(--brand-color-r), var(--brand-color-g), var(--brand-color-b); --brand-color_hsl: var(--brand-color_h), var(--brand-color_s), var(--brand-color_l);
--brand-color: rgb(var(--brand-color-rgb)); --brand-color: hsl(var(--brand-color_hsl));
--brand-color-faint: rgba(var(--brand-color-rgb), 0.1); --brand-color--faint: hsla(var(--brand-color_hsl), 0.1);
--brand-color-med: rgba(var(--brand-color-rgb), 0.2); --brand-color--med: hsla(var(--brand-color_hsl), 0.2);
--accent-filter: saturate(1.3) hue-rotate(-20deg) brightness(1.2); --accent-filter: saturate(1.3) hue-rotate(-20deg) brightness(1.2);
--accent-filter-hover: saturate(1.3) hue-rotate(-20deg) brightness(1.3); --accent-filter--hover: saturate(1.3) hue-rotate(-20deg) brightness(1.3);
--primary-text-color-rgb: var(--primary-text-color-r), var(--primary-text-color-g), var(--primary-text-color-b); --primary-text-color_hsl: var(--primary-text-color_h), var(--primary-text-color_s), var(--primary-text-color_l);
--primary-text-color: rgb(var(--primary-text-color-rgb)); --primary-text-color: hsl(var(--primary-text-color_hsl));
--primary-text-color-faint: rgba(var(--primary-text-color-rgb), 0.6); --primary-text-color--faint: hsla(var(--primary-text-color_hsl), 0.6);
--inverted-text-color: rgb( --background-color_hsl: var(--background-color_h), var(--background-color_s), var(--background-color_l);
calc(255 - var(--primary-text-color-r)), --background-color: hsl(var(--background-color_hsl));
calc(255 - var(--primary-text-color-g)),
calc(255 - var(--primary-text-color-b))
);
--background-color-rgb: var(--background-color-r), var(--background-color-g), var(--background-color-b);
--background-color: rgb(var(--background-color-rgb));
} }
body.theme-mode-light { body.theme-mode-light {
--primary-text-color-r: 0; --primary-text-color_h: 0;
--primary-text-color-g: 0; --primary-text-color_s: 0%;
--primary-text-color-b: 0; --primary-text-color_l: 0%;
--background-color-r: 242; --background-color_h: 0;
--background-color-g: 242; --background-color_s: 0%;
--background-color-b: 242; --background-color_l: 94.9%;
--foreground-color: #ffffff; --foreground-color: #ffffff;
--highlight-text-color: rgb( --highlight-text-color: hsl(
calc(var(--brand-color-r) - 25), var(--brand-color_h),
calc(var(--brand-color-g) - 25), var(--brand-color_s),
calc(var(--brand-color-b) - 25) calc(var(--brand-color_l) - 8%)
); );
--brand-color-hicontrast: rgb( --brand-color--hicontrast: hsl(
calc(var(--brand-color-r) - 50), var(--brand-color_h),
calc(var(--brand-color-g) - 50), var(--brand-color_s),
calc(var(--brand-color-b) - 50) calc(var(--brand-color_l) - 12%)
); );
} }
body.theme-mode-dark { body.theme-mode-dark {
--primary-text-color-r: 255; --primary-text-color_h: 0;
--primary-text-color-g: 255; --primary-text-color_s: 0%;
--primary-text-color-b: 255; --primary-text-color_l: 100%;
--background-color-r: 51; --background-color_h: 0;
--background-color-g: 51; --background-color_s: 0%;
--background-color-b: 51; --background-color_l: 20%;
--foreground-color: #222222; --foreground-color: #222222;
--highlight-text-color: rgb( --highlight-text-color: hsl(
calc(var(--brand-color-r) + 40), var(--brand-color_h),
calc(var(--brand-color-g) + 40), var(--brand-color_s),
calc(var(--brand-color-b) + 40) calc(var(--brand-color_l) + 8%)
); );
--brand-color-hicontrast: rgb( --brand-color--hicontrast: hsl(
calc(var(--brand-color-r) + 50), var(--brand-color_h),
calc(var(--brand-color-g) + 50), var(--brand-color_s),
calc(var(--brand-color-b) + 50) calc(var(--brand-color_l) + 12%)
); );
} }

48
app/styles/ui.scss
View File

@ -1,7 +1,7 @@
.icon-button { .icon-button {
display: inline-block; display: inline-block;
padding: 0; padding: 0;
color: rgba(var(--primary-text-color-rgb), 0.4); color: hsla(var(--primary-text-color_hsl), 0.4);
border: 0; border: 0;
background: transparent; background: transparent;
cursor: pointer; cursor: pointer;
@ -14,12 +14,12 @@
&:hover, &:hover,
&:active, &:active,
&:focus { &:focus {
color: rgba(var(--primary-text-color-rgb), 0.6); color: hsla(var(--primary-text-color_hsl), 0.6);
transition: color 200ms ease-out; transition: color 200ms ease-out;
} }
&.disabled { &.disabled {
color: rgba(var(--primary-text-color-rgb), 0.2); color: hsla(var(--primary-text-color_hsl), 0.2);
cursor: default; cursor: default;
} }
@ -38,16 +38,16 @@
} }
&.inverted { &.inverted {
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
&:hover, &:hover,
&:active, &:active,
&:focus { &:focus {
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
} }
&.disabled { &.disabled {
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
} }
&.active { &.active {
@ -62,7 +62,7 @@
&.overlayed { &.overlayed {
box-sizing: content-box; box-sizing: content-box;
background: var(--foreground-color); background: var(--foreground-color);
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
border-radius: 4px; border-radius: 4px;
padding: 2px; padding: 2px;
@ -73,7 +73,7 @@
} }
.text-icon-button { .text-icon-button {
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
border: 0; border: 0;
background: transparent; background: transparent;
cursor: pointer; cursor: pointer;
@ -87,12 +87,12 @@
&:hover, &:hover,
&:active, &:active,
&:focus { &:focus {
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
transition: color 200ms ease-out; transition: color 200ms ease-out;
} }
&.disabled { &.disabled {
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
cursor: default; cursor: default;
} }
@ -196,14 +196,14 @@
.status__relative-time, .status__relative-time,
.notification__relative_time { .notification__relative_time {
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
float: right; float: right;
font-size: 14px; font-size: 14px;
} }
.domain { .domain {
padding: 10px; padding: 10px;
border-bottom: 1px solid var(--brand-color-med); border-bottom: 1px solid var(--brand-color--med);
.domain__domain-name { .domain__domain-name {
flex: 1 1 auto; flex: 1 1 auto;
@ -240,11 +240,11 @@
} }
a.status__content__spoiler-link { a.status__content__spoiler-link {
background: var(--brand-color-med); background: var(--brand-color--med);
color: var(--primary-text-color); color: var(--primary-text-color);
&:hover { &:hover {
background: var(--brand-color-faint); background: var(--brand-color--faint);
text-decoration: none; text-decoration: none;
} }
} }
@ -376,7 +376,7 @@
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
background-color: var(--brand-color-hicontrast); background-color: var(--brand-color--hicontrast);
} }
i.fa { i.fa {
@ -436,7 +436,7 @@
} }
.setting-text { .setting-text {
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
background: transparent; background: transparent;
border: 0; border: 0;
border-bottom: 2px solid var(--brand-color); border-bottom: 2px solid var(--brand-color);
@ -463,7 +463,7 @@
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
color: var(--primary-text-color); color: var(--primary-text-color);
background: var(--brand-color-med); background: var(--brand-color--med);
cursor: default; cursor: default;
display: flex; display: flex;
flex: 1 1 auto; flex: 1 1 auto;
@ -545,7 +545,7 @@
.attachment-list { .attachment-list {
display: flex; display: flex;
font-size: 14px; font-size: 14px;
border: 1px solid var(--brand-color-med); border: 1px solid var(--brand-color--med);
border-radius: 4px; border-radius: 4px;
margin-top: 14px; margin-top: 14px;
overflow: hidden; overflow: hidden;
@ -555,7 +555,7 @@
color: var(--primary-text-color); color: var(--primary-text-color);
padding: 8px 18px; padding: 8px 18px;
cursor: default; cursor: default;
border-right: 1px solid var(--brand-color-med); border-right: 1px solid var(--brand-color--med);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -612,7 +612,7 @@
.notification__filter-bar, .notification__filter-bar,
.account__section-headline { .account__section-headline {
border-bottom: 1px solid var(--brand-color-faint); border-bottom: 1px solid var(--brand-color--faint);
cursor: default; cursor: default;
display: flex; display: flex;
flex-shrink: 0; flex-shrink: 0;
@ -626,7 +626,7 @@
a { a {
display: block; display: block;
flex: 1 1 auto; flex: 1 1 auto;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
padding: 15px 0; padding: 15px 0;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
@ -650,7 +650,7 @@
transform: translateX(-50%); transform: translateX(-50%);
border-style: solid; border-style: solid;
border-width: 0 10px 10px; border-width: 0 10px 10px;
border-color: transparent transparent var(--brand-color-faint); border-color: transparent transparent var(--brand-color--faint);
} }
&::after { &::after {
@ -696,7 +696,7 @@
height: auto; height: auto;
path:first-child { path:first-child {
fill: var(--brand-color-med); fill: var(--brand-color--med);
} }
path:last-child { path:last-child {
@ -710,7 +710,7 @@
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
background: var(--brand-color-med); background: var(--brand-color--med);
border-radius: 50%; border-radius: 50%;
padding: 0.35rem; padding: 0.35rem;
} }

46
app/styles/widgets.scss
View File

@ -20,11 +20,11 @@
} }
&__text { &__text {
background: var(--brand-color-med); background: var(--brand-color--med);
padding: 20px; padding: 20px;
border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px;
font-size: 15px; font-size: 15px;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
line-height: 20px; line-height: 20px;
word-wrap: break-word; word-wrap: break-word;
font-weight: 400; font-weight: 400;
@ -56,7 +56,7 @@
} }
a { a {
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
text-decoration: none; text-decoration: none;
&:hover { &:hover {
@ -79,7 +79,7 @@
text-transform: uppercase; text-transform: uppercase;
font-weight: 700; font-weight: 700;
font-size: 13px; font-size: 13px;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
} }
.account { .account {
@ -115,13 +115,13 @@
padding: 20px; padding: 20px;
min-height: 100%; min-height: 100%;
border-radius: 4px; border-radius: 4px;
background: var(--brand-color-med); background: var(--brand-color--med);
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
} }
.contact-widget { .contact-widget {
font-size: 15px; font-size: 15px;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
line-height: 20px; line-height: 20px;
word-wrap: break-word; word-wrap: break-word;
font-weight: 400; font-weight: 400;
@ -152,9 +152,9 @@
padding: 15px; padding: 15px;
padding-bottom: 20px; padding-bottom: 20px;
border-radius: 4px; border-radius: 4px;
background: var(--brand-color-med); background: var(--brand-color--med);
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
font-weight: 400; font-weight: 400;
margin-bottom: 10px; margin-bottom: 10px;
@ -197,7 +197,7 @@
.fa { .fa {
margin-right: 5px; margin-right: 5px;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
} }
} }
@ -224,12 +224,12 @@
background: $base-shadow-color; background: $base-shadow-color;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
font-size: 14px; font-size: 14px;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
margin-bottom: 10px; margin-bottom: 10px;
} }
.page-header { .page-header {
background: var(--brand-color-med); background: var(--brand-color--med);
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
border-radius: 4px; border-radius: 4px;
padding: 60px 15px; padding: 60px 15px;
@ -246,12 +246,12 @@
p { p {
font-size: 15px; font-size: 15px;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
} }
@media screen and (max-width: $no-gap-breakpoint) { @media screen and (max-width: $no-gap-breakpoint) {
margin-top: 0; margin-top: 0;
background: var(--brand-color-faint); background: var(--brand-color--faint);
h1 { h1 {
font-size: 24px; font-size: 24px;
@ -260,7 +260,7 @@
} }
.directory { .directory {
background: var(--brand-color-med); background: var(--brand-color--med);
border-radius: 4px; border-radius: 4px;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
@ -273,7 +273,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
background: var(--brand-color-med); background: var(--brand-color--med);
border-radius: 4px; border-radius: 4px;
padding: 15px; padding: 15px;
text-decoration: none; text-decoration: none;
@ -285,7 +285,7 @@
&:hover, &:hover,
&:active, &:active,
&:focus { &:focus {
background: var(--brand-color-med); background: var(--brand-color--med);
} }
} }
@ -309,7 +309,7 @@
text-overflow: ellipsis; text-overflow: ellipsis;
.fa { .fa {
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
} }
small { small {
@ -317,7 +317,7 @@
font-weight: 400; font-weight: 400;
font-size: 15px; font-size: 15px;
margin-top: 8px; margin-top: 8px;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
} }
} }
@ -352,7 +352,7 @@
position: relative; position: relative;
margin-left: -10px; margin-left: -10px;
background: var(--background-color); background: var(--background-color);
border: 2px solid var(--brand-color-med); border: 2px solid var(--brand-color--med);
&:nth-child(1) { &:nth-child(1) {
z-index: 1; z-index: 1;
@ -383,7 +383,7 @@
thead th { thead th {
text-align: center; text-align: center;
text-transform: uppercase; text-transform: uppercase;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
font-weight: 700; font-weight: 700;
padding: 10px; padding: 10px;
@ -395,7 +395,7 @@
tbody td { tbody td {
padding: 15px 0; padding: 15px 0;
vertical-align: middle; vertical-align: middle;
border-bottom: 1px solid var(--brand-color-med); border-bottom: 1px solid var(--brand-color--med);
} }
tbody tr:last-child td { tbody tr:last-child td {
@ -411,7 +411,7 @@
small { small {
display: block; display: block;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
} }
@ -508,7 +508,7 @@ $fluid-breakpoint: $maximum-width + 20px;
.notice-widget { .notice-widget {
margin-bottom: 10px; margin-bottom: 10px;
color: var(--primary-text-color-faint); color: var(--primary-text-color--faint);
p { p {
margin-bottom: 10px; margin-bottom: 10px;

1
package.json
View File

@ -71,6 +71,7 @@
"file-loader": "^4.0.0", "file-loader": "^4.0.0",
"font-awesome": "^4.7.0", "font-awesome": "^4.7.0",
"glob": "^7.1.1", "glob": "^7.1.1",
"hex-to-hsl": "^1.0.2",
"html-webpack-harddisk-plugin": "^1.0.1", "html-webpack-harddisk-plugin": "^1.0.1",
"html-webpack-plugin": "^4.3.0", "html-webpack-plugin": "^4.3.0",
"http-link-header": "^1.0.2", "http-link-header": "^1.0.2",

18
yarn.lock
View File

@ -5594,6 +5594,19 @@ hex-color-regex@^1.1.0:
resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e" resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ== integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
hex-to-hsl@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/hex-to-hsl/-/hex-to-hsl-1.0.2.tgz#d5c59ece00178444e821c8fc58a430afc09831c2"
integrity sha1-1cWezgAXhEToIcj8WKQwr8CYMcI=
dependencies:
hex-to-rgb "^1.0.1"
rgb-to-hsl "0.0.2"
hex-to-rgb@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/hex-to-rgb/-/hex-to-rgb-1.0.1.tgz#100b9df126b32f2762adf8486be68c65ef8ed2a4"
integrity sha1-EAud8SazLydirfhIa+aMZe+O0qQ=
history@^4.7.2: history@^4.7.2:
version "4.10.1" version "4.10.1"
resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3" resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3"
@ -10162,6 +10175,11 @@ rgb-regex@^1.0.1:
resolved "https://registry.yarnpkg.com/rgb-regex/-/rgb-regex-1.0.1.tgz#c0e0d6882df0e23be254a475e8edd41915feaeb1" resolved "https://registry.yarnpkg.com/rgb-regex/-/rgb-regex-1.0.1.tgz#c0e0d6882df0e23be254a475e8edd41915feaeb1"
integrity sha1-wODWiC3w4jviVKR16O3UGRX+rrE= integrity sha1-wODWiC3w4jviVKR16O3UGRX+rrE=
rgb-to-hsl@0.0.2:
version "0.0.2"
resolved "https://registry.yarnpkg.com/rgb-to-hsl/-/rgb-to-hsl-0.0.2.tgz#36f9fc286376b90acc457e699005b4cb42d350ec"
integrity sha1-Nvn8KGN2uQrMRX5pkAW0y0LTUOw=
rgba-regex@^1.0.0: rgba-regex@^1.0.0:
version "1.0.0" version "1.0.0"
resolved "https://registry.yarnpkg.com/rgba-regex/-/rgba-regex-1.0.0.tgz#43374e2e2ca0968b0ef1523460b7d730ff22eeb3" resolved "https://registry.yarnpkg.com/rgba-regex/-/rgba-regex-1.0.0.tgz#43374e2e2ca0968b0ef1523460b7d730ff22eeb3"