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

8
app/styles/_mixins.scss
View File

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

98
app/styles/about.scss
View File

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

64
app/styles/accounts.scss
View File

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

16
app/styles/basics.scss
View File

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

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

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

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

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

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

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

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

@ -167,7 +167,7 @@
&:focus,
&:active,
&.selected {
background: var(--brand-color-med);
background: var(--brand-color--med);
}
}
@ -190,7 +190,7 @@
}
.autosuggest-account .display-name__account {
color: var(--primary-text-color-faint);
color: var(--primary-text-color--faint);
}
.compose-form__modifiers {
@ -226,7 +226,7 @@
.icon-button {
flex: 0 1 auto;
color: var(--primary-text-color-faint);
color: var(--primary-text-color--faint);
font-size: 14px;
font-weight: 500;
padding: 10px;
@ -257,8 +257,8 @@
background: rgba(0, 0, 0, 0.3);
box-sizing: border-box;
background: transparent;
color: var(--primary-text-color-faint);
border: 1px solid var(--primary-text-color-faint);
color: var(--primary-text-color--faint);
border: 1px solid var(--primary-text-color--faint);
outline: none;
padding: 10px;
margin: 0;
@ -270,7 +270,7 @@
&:focus {color: #fff;}
&::placeholder {
color: var(--primary-text-color-faint);
color: var(--primary-text-color--faint);
}
}
&.active {opacity: 1;}
@ -321,7 +321,7 @@
font-family: var(--font-sans-serif), sans-serif;
font-size: 14px;
font-weight: 600;
color: var(--primary-text-color-faint);
color: var(--primary-text-color--faint);
&.character-counter--over {color: $warning-red;}
}
}
@ -376,7 +376,7 @@
left: 0;
z-index: -1;
border-radius: 4px;
background: var(--brand-color-med);
background: var(--brand-color--med);
box-shadow: 0 0 5px rgba($base-shadow-color, 0.2);
}
@ -385,10 +385,10 @@
display: flex;
align-items: center;
justify-content: center;
color: var(--primary-text-color-faint);
color: var(--primary-text-color--faint);
font-size: 18px;
font-weight: 500;
border: 2px dashed var(--brand-color-med);
border: 2px dashed var(--brand-color--med);
border-radius: 4px;
}
@ -419,7 +419,7 @@
width: 100%;
height: 6px;
border-radius: 6px;
background: var(--brand-color-med);
background: var(--brand-color--med);
position: relative;
margin-top: 5px;
}
@ -460,7 +460,7 @@
&:hover,
&.active {
background: var(--brand-color-med);
background: var(--brand-color--med);
color: var(--primary-text-color);
outline: 0;
@ -474,7 +474,7 @@
}
&.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 {
background: rgba(var(--brand-color-rgb), 0.03);
background: hsla(var(--brand-color_hsl), 0.03);
padding: 14px 10px;
&--flex {
@ -45,22 +45,22 @@
.detailed-status__meta {
margin-top: 15px;
color: var(--primary-text-color-faint);
color: var(--primary-text-color--faint);
font-size: 14px;
line-height: 18px;
display: flex;
}
.detailed-status__action-bar {
background: rgba(var(--brand-color-rgb), 0.03);
border-top: 1px solid var(--brand-color-faint);
border-bottom: 1px solid var(--brand-color-faint);
background: hsla(var(--brand-color_hsl), 0.03);
border-top: 1px solid var(--brand-color--faint);
border-bottom: 1px solid var(--brand-color--faint);
display: flex;
flex-direction: row;
}
.detailed-status__link {
color: var(--primary-text-color-faint);
color: var(--primary-text-color--faint);
cursor: pointer;
text-decoration: none;
font-size: 13px;
@ -99,7 +99,7 @@
}
.detailed-status__display-name {
color: var(--primary-text-color-faint);
color: var(--primary-text-color--faint);
display: flex;
line-height: 24px;
margin-bottom: 15px;

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

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

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

@ -146,7 +146,7 @@
&:hover {
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 {
display: block;
text-align: center;
color: var(--primary-text-color-faint);
color: var(--primary-text-color--faint);
}
a {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -254,7 +254,7 @@
&:hover,
&:focus,
&:active {
color: var(--primary-text-color-faint);
color: var(--primary-text-color--faint);
background-color: var(--background-color);
}
@ -289,8 +289,8 @@
}
&__case {
background: var(--brand-color-med);
color: var(--primary-text-color-faint);
background: var(--brand-color--med);
color: var(--primary-text-color--faint);
font-weight: 500;
padding: 10px;
border-radius: 4px;
@ -315,8 +315,8 @@
width: 480px;
max-width: 90vw;
border-radius: 4px;
border: 1px solid var(--primary-text-color-faint);
color: var(--primary-text-color-faint);
border: 1px solid var(--primary-text-color--faint);
color: var(--primary-text-color--faint);
background: var(--foreground-color);
.status__display-name {
@ -440,7 +440,7 @@
.status__content,
.status__content p {
color: var(--primary-text-color-faint);
color: var(--primary-text-color--faint);
}
@media screen and (max-width: 480px) {
@ -532,7 +532,7 @@
align-items: center;
padding: 13px 10px 12px;
@inclide font-size(14);
color: var(--primary-text-color-faint);
color: var(--primary-text-color--faint);
text-decoration: none;
&,
@ -570,7 +570,7 @@
&:hover,
&:focus,
&:active {
color: var(--primary-text-color-faint);
color: var(--primary-text-color--faint);
}
}
@ -607,7 +607,7 @@
}
.modal-layout {
background: var(--brand-color-med) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color(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;
flex-direction: column;
height: 100vh;
@ -731,7 +731,7 @@
> span {
font-size: 14px;
color: var(--primary-text-color-faint);
color: var(--primary-text-color--faint);
a {
color: var(--brand-color) !important;
@ -778,7 +778,7 @@
border-radius: 5px;
padding: 10px;
font-family: var(--font-monospace), monospace;
background: var(--brand-color-med);
background: var(--brand-color--med);
color: var(--primary-text-color);
font-size: 14px;
margin: 0;
@ -795,7 +795,7 @@
}
&:focus {
background: var(--brand-color-faint);
background: var(--brand-color--faint);
}
@media screen and (max-width: 600px) {
@ -817,7 +817,7 @@
}
.modal-container--preloader {
background: var(--brand-color-med);
background: var(--brand-color--med);
}
.column-inline-form {
@ -826,7 +826,7 @@
display: flex;
justify-content: flex-start;
align-items: center;
background: var(--brand-color-faint);
background: var(--brand-color--faint);
label {
flex: 1 1 auto;

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

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

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

@ -3,7 +3,7 @@
background: transparent;
.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;
padding: 8px 0 0;
cursor: default;
color: var(--primary-text-color-faint);
color: var(--primary-text-color--faint);
font-size: 15px;
line-height: 22px;
position: relative;

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

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

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

@ -9,7 +9,7 @@
display: block;
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);
&--highlighted {
@ -37,7 +37,7 @@
padding: 0 20px;
&:hover {
color: var(--primary-text-color-faint);
color: var(--primary-text-color--faint);
span {
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 {
background-color: var(--brand-color-hicontrast);
background-color: var(--brand-color--hicontrast);
}
.react-toggle--checked .react-toggle-track {
@ -45,7 +45,7 @@
}
.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 {
@ -91,7 +91,7 @@
left: 1px;
width: 22px;
height: 22px;
border: 1px solid var(--brand-color-med);
border: 1px solid var(--brand-color--med);
border-radius: 50%;
background-color: var(--background-color);
box-sizing: border-box;

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

@ -1,7 +1,7 @@
.reply-indicator {
border-radius: 4px;
margin-bottom: 10px;
background: var(--brand-color-faint);
background: var(--brand-color--faint);
padding: 10px;
min-height: 23px;
overflow-y: auto;
@ -31,7 +31,7 @@
text-decoration: none;
.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;
width: 18px;
height: 18px;
color: var(--primary-text-color-faint);
color: var(--primary-text-color--faint);
opacity: 0;
pointer-events: none;
@ -55,7 +55,7 @@
.search-results__header {
color: var(--primary-text-color);
background: var(--brand-color-med);
background: var(--brand-color--med);
padding: 15px;
font-weight: 500;
font-size: 16px;
@ -71,8 +71,8 @@
margin-bottom: 5px;
h5 {
background: var(--brand-color-faint);
border-bottom: 1px solid var(--brand-color-faint);
background: var(--brand-color--faint);
border-bottom: 1px solid var(--brand-color--faint);
cursor: default;
display: flex;
padding: 15px;
@ -95,7 +95,7 @@
.search-results__hashtag {
display: block;
padding: 10px;
color: var(--primary-text-color-faint);
color: var(--primary-text-color--faint);
text-decoration: none;
&:hover,
@ -113,7 +113,7 @@
&__text-container {
display: none;
padding: 25px 0;
background-color: var(--brand-color-med);
background-color: var(--brand-color--med);
@media (min-width: 895px) {
display: block;

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

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

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

@ -42,7 +42,7 @@
display: flex;
flex-direction: column;
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 {
margin: 0;
@ -71,7 +71,7 @@
display: flex;
height: 46px;
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;
align-items: center;
@ -107,7 +107,7 @@
.display-name__account {
display: block;
margin-top: 2px;
color: var(--primary-text-color-faint);
color: var(--primary-text-color--faint);
}
}
@ -135,7 +135,7 @@
&__label {
display: flex;
color: var(--primary-text-color-faint);
color: var(--primary-text-color--faint);
}
&:hover {
@ -148,12 +148,12 @@
padding: 16px 18px;
cursor: pointer;
text-decoration: none;
color: var(--primary-text-color-faint);
color: var(--primary-text-color--faint);
font-size: 15px;
font-weight: 400;
&:hover {
background-color: rgba(var(--brand-color-rgb), 0.1);
background-color: hsla(var(--brand-color_hsl), 0.1);
color: var(--primary-text-color);
}

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

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

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

@ -125,7 +125,7 @@
&:hover {
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;
border-bottom: 1px solid;
border-top: 1px solid;
border-color: var(--brand-color-faint);
border-color: var(--brand-color--faint);
transition: max-height 150ms ease;
overflow: hidden;
opacity: 1;

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

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

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

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

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

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

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

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

2
app/styles/containers.scss
View File

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

6
app/styles/dashboard.scss
View File

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

2
app/styles/donations.scss
View File

@ -26,7 +26,7 @@
}
.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;
position: relative;
border-radius: 4px;

12
app/styles/emoji_picker.scss
View File

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

40
app/styles/forms.scss
View File

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

6
app/styles/introduction.scss
View File

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

14
app/styles/loading.scss
View File

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

12
app/styles/polls.scss
View File

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

8
app/styles/stream_entries.scss
View File

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

20
app/styles/tables.scss
View File

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

81
app/styles/themes.scss
View File

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

48
app/styles/ui.scss
View File

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

46
app/styles/widgets.scss
View File

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

1
package.json
View File

@ -71,6 +71,7 @@
"file-loader": "^4.0.0",
"font-awesome": "^4.7.0",
"glob": "^7.1.1",
"hex-to-hsl": "^1.0.2",
"html-webpack-harddisk-plugin": "^1.0.1",
"html-webpack-plugin": "^4.3.0",
"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"
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:
version "4.10.1"
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"
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:
version "1.0.0"
resolved "https://registry.yarnpkg.com/rgba-regex/-/rgba-regex-1.0.0.tgz#43374e2e2ca0968b0ef1523460b7d730ff22eeb3"