mirror
/
soapbox
kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
1
0
Forkuj 1
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

Stylelint: stricter config, lint existing scss

renovate/react-overlays-4.x
Alex Gleason 2020-10-11 16:23:19 -05:00
rodzic 2a4f73f999
commit 263b7ddff8
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 7211D1F99744FBB7
45 zmienionych plików z 262 dodań i 281 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

19
.stylelintrc.json
Wyświetl plik

@ -1,14 +1,15 @@
{
"extends": "stylelint-config-recommended-scss",
"ignoreFiles": [ "app/styles/reset.scss" ],
"extends": [
"stylelint-config-standard",
"stylelint-config-recommended-scss"
],
"ignoreFiles": ["app/styles/reset.scss"],
"rules": {
"at-rule-empty-line-before": ["always", { "ignore": ["after-comment", "first-nested", "inside-block", "blockless-after-same-name-blockless", "blockless-after-blockless"] }],
"declaration-colon-newline-after": null,
"declaration-empty-line-before": "never",
"font-family-no-missing-generic-family-keyword": [true, { "ignoreFontFamilies": ["ForkAwesome", "OpenDyslexic", "soapbox"] }],
"no-descending-specificity": null,
"declaration-block-no-duplicate-properties": null,
"no-duplicate-selectors": null,
"font-family-no-missing-generic-family-keyword": null,
"property-no-unknown": null,
"function-calc-no-unspaced-operator": null,
"scss/at-rule-no-unknown": null,
"declaration-block-no-shorthand-property-overrides": null
"no-duplicate-selectors": null
}
}

16
app/styles/_mixins.scss
Wyświetl plik

@ -14,10 +14,10 @@
// SHORTCUTS
@mixin input-placeholder($color) {
&::-webkit-input-placeholder {color: $color;}
&::-moz-placeholder {color: $color;}
&:-ms-input-placeholder {color: $color;}
&:-moz-placeholder {color: $color;}
&::-webkit-input-placeholder { color: $color; }
&::-moz-placeholder { color: $color; }
&:-ms-input-placeholder { color: $color; }
&:-moz-placeholder { color: $color; }
}
@mixin avatar-radius {
@ -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;
@ -87,7 +87,7 @@
li {
margin: 0 0 2px;
em {color: var(--brand-color);}
em { color: var(--brand-color); }
}
}
}

7
app/styles/about.scss
Wyświetl plik

@ -166,7 +166,6 @@ $fluid-breakpoint: $maximum-width + 20px;
&:active {
color: var(--brand-color);
}
}
@media screen and (max-width: 550px) {
@ -210,7 +209,6 @@ $fluid-breakpoint: $maximum-width + 20px;
font-family: var(--font-sans-serif), sans-serif;
font-size: 16px;
font-weight: 400;
font-size: 16px;
line-height: 30px;
color: var(--primary-text-color--faint);
max-width: 600px;
@ -234,7 +232,6 @@ $fluid-breakpoint: $maximum-width + 20px;
font-family: var(--font-sans-serif), sans-serif;
font-size: 16px;
font-weight: 400;
font-size: 16px;
line-height: 30px;
color: var(--primary-text-color--faint);
@ -316,7 +313,7 @@ $fluid-breakpoint: $maximum-width + 20px;
ul,
ol {
padding: 0 0 0 2em;
margin: 0 0 .85em;
margin: 0 0 0.85em;
&[type='a'] {
list-style-type: lower-alpha;
@ -348,7 +345,7 @@ $fluid-breakpoint: $maximum-width + 20px;
width: 100%;
height: 0;
border: 0;
border-bottom: 1px solid hsla(var(--background-color_hsl), .6);
border-bottom: 1px solid hsla(var(--background-color_hsl), 0.6);
margin: 2em 0;
&.spacer {

4
app/styles/accessibility.scss
Wyświetl plik

@ -1,8 +1,8 @@
$black-emojis: '8ball' 'ant' 'back' 'black_circle' 'black_heart' 'black_large_square' 'black_medium_small_square' 'black_medium_square' 'black_nib' 'black_small_square' 'bomb' 'bowling' 'bust_in_silhouette' 'busts_in_silhouette' 'camera' 'camera_with_flash' 'clubs' 'copyright' 'curly_loop' 'currency_exchange' 'dark_sunglasses' 'eight_pointed_black_star' 'electric_plug' 'end' 'female-guard' 'film_projector' 'fried_egg' 'gorilla' 'guardsman' 'heavy_check_mark' 'heavy_division_sign' 'heavy_dollar_sign' 'heavy_minus_sign' 'heavy_multiplication_x' 'heavy_plus_sign' 'hocho' 'hole' 'joystick' 'kaaba' 'lower_left_ballpoint_pen' 'lower_left_fountain_pen' 'male-guard' 'microphone' 'mortar_board' 'movie_camera' 'musical_score' 'on' 'registered' 'soon' 'spades' 'speaking_head_in_silhouette' 'spider' 'telephone_receiver' 'tm' 'top' 'tophat' 'turkey' 'vhs' 'video_camera' 'video_game' 'water_buffalo' 'waving_black_flag' 'wavy_dash';
%white-emoji-outline {
filter: drop-shadow(1px 1px 0 #ffffff) drop-shadow(-1px 1px 0 #ffffff) drop-shadow(1px -1px 0 #ffffff) drop-shadow(-1px -1px 0 #ffffff);
transform: scale(.71);
filter: drop-shadow(1px 1px 0 #fff) drop-shadow(-1px 1px 0 #fff) drop-shadow(1px -1px 0 #fff) drop-shadow(-1px -1px 0 #fff);
transform: scale(0.71);
}
.emojione {

1
app/styles/accounts.scss
Wyświetl plik

@ -277,7 +277,6 @@ a .account__avatar {
&-overlay {
@include avatar-radius;
@include avatar-size(24px);
position: absolute;
bottom: 0;
right: 0;

4
app/styles/basics.scss
Wyświetl plik

@ -19,7 +19,7 @@ body {
@include line-height(19);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizelegibility;
text-rendering: optimizeLegibility;
font-feature-settings: "kern";
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
@ -156,7 +156,7 @@ body {
::selection {
background: var(--highlight-text-color);
color: #ffffff;
color: #fff;
}
noscript {

8
app/styles/chats.scss
Wyświetl plik

@ -319,7 +319,7 @@
box-sizing: border-box;
overflow: hidden;
@media(max-width: 630px) {
@media (max-width: 630px) {
height: calc(100vh - 50px);
}
}
@ -338,7 +338,7 @@
}
}
@media(max-width: 630px) {
@media (max-width: 630px) {
.columns-area__panels__main .columns-area {
padding: 0;
}
@ -370,13 +370,13 @@
}
}
@media(max-width: 630px) {
@media (max-width: 630px) {
.chat-panes {
display: none;
}
}
@media(min-width: 630px) {
@media (min-width: 630px) {
.tabs-bar .tabs-bar__link--chats {
display: none;
}

1
app/styles/components/accordion.scss
Wyświetl plik

@ -20,7 +20,6 @@
text-transform: none !important;
text-align: left !important;
display: flex !important;
color: var(--primary-text-color);
border: 0;
width: 100%;

26
app/styles/components/account-header.scss
Wyświetl plik

@ -20,8 +20,8 @@
height: 350px;
position: relative;
background: var(--accent-color--faint);
@media screen and (max-width: 895px) {height: 225px;}
&--none {height: 125px;}
@media screen and (max-width: 895px) { height: 225px; }
&--none { height: 125px; }
img {
object-fit: cover;
@ -59,7 +59,7 @@
width: 100%;
position: relative;
background: var(--background-color);
@media (min-width: 895px) {height: 74px;}
@media (min-width: 895px) { height: 74px; }
}
&__avatar {
@ -109,17 +109,16 @@
background-size: 90px 90px;
}
}
}
&__extra {
display: flex;
flex-direction: row;
height: 100%;
display: flex;
flex-direction: row;
height: 100%;
margin: 0 auto;
padding-left: 310px;
width: 100%;
max-width: 1200px;
padding-left: 310px;
width: 100%;
max-width: 1200px;
box-sizing: border-box;
position: relative;
@media (min-width: 895px) and (max-width: 1190px) {
@ -166,7 +165,7 @@
text-decoration: none;
padding: 16px 22px;
text-align: center;
@media screen and (max-width: 1190px) {padding: 16px;}
@media screen and (max-width: 1190px) { padding: 16px; }
> span {
display: block;
@ -194,7 +193,7 @@
&.active {
border-bottom: 2px solid var(--primary-text-color);
}
&.score {border-bottom: 0 !important;}
&.score { border-bottom: 0 !important; }
}
}
} // end .account__header__extra
@ -205,7 +204,7 @@
margin-top: 10px;
position: relative;
padding: 10px 10px 0;
&--nonuser {padding: 10px 10px 15px;}
&--nonuser { padding: 10px 10px 15px; }
}
.account-mobile-container.deactivated {
@ -226,7 +225,6 @@
}
}
// end .account__header
.account-timeline {

30
app/styles/components/audio-player.scss
Wyświetl plik

@ -61,7 +61,6 @@
.audio-player__volume__handle {
bottom: 23px;
}
}
.audio-player {
@ -118,7 +117,7 @@
background: linear-gradient(0deg, rgba($base-shadow-color, 0.85) 0, rgba($base-shadow-color, 0.45) 60%, transparent);
padding: 0 15px;
opacity: 1;
transition: opacity .1s ease;
transition: opacity 0.1s ease;
}
&.inactive {
@ -171,20 +170,19 @@
&__spoiler-warning {
font-size: 16px;
white-space: nowrap;
overlow: hidden;
text-overflow: ellipsis;
background: hsl(var(--brand-color_h), var(--brand-color_s), 20%);
padding: 5px;
&__label {
color: #ffffff;
color: #fff;
}
button {
background: transparent;
font-size: 16px;
border: 0;
color: rgba(#ffffff, 0.75);
color: rgba(#fff, 0.75);
position: absolute;
right: 0;
padding-right: 5px;
@ -196,7 +194,7 @@
&:active,
&:hover,
&:focus {
color: #ffffff;
color: #fff;
}
}
}
@ -218,12 +216,12 @@
padding: 2px 10px;
font-size: 16px;
border: 0;
color: rgba(#ffffff, 0.75);
color: rgba(#fff, 0.75);
&:active,
&:hover,
&:focus {
color: #ffffff;
color: #fff;
}
}
}
@ -236,7 +234,7 @@
}
&__time-current {
color: #ffffff;
color: #fff;
margin-left: 60px;
}
@ -247,7 +245,7 @@
&__time-sep,
&__time-total {
color: #ffffff;
color: #fff;
}
&__volume {
@ -258,7 +256,7 @@
&::before {
content: "";
width: 50px;
background: rgba(#ffffff, 0.35);
background: rgba(#fff, 0.35);
border-radius: 4px;
display: block;
position: absolute;
@ -285,7 +283,7 @@
height: 12px;
bottom: 16px;
left: 70px;
transition: opacity .1s ease;
transition: opacity 0.1s ease;
background: var(--brand-color);
box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
pointer-events: none;
@ -299,7 +297,7 @@
text-decoration: none;
font-size: 14px;
font-weight: 500;
color: #ffffff;
color: #fff;
&:hover,
&:active,
@ -317,7 +315,7 @@
&::before {
content: "";
width: 100%;
background: rgba(#ffffff, 0.35);
background: rgba(#fff, 0.35);
border-radius: 4px;
display: block;
position: absolute;
@ -336,7 +334,7 @@
}
&__buffer {
background: rgba(#ffffff, 0.2);
background: rgba(#fff, 0.2);
}
&__handle {
@ -348,7 +346,7 @@
height: 12px;
top: 6px;
margin-left: -6px;
transition: opacity .1s ease;
transition: opacity 0.1s ease;
background: var(--brand-color);
box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
pointer-events: none;

8
app/styles/components/columns.scss
Wyświetl plik

@ -105,7 +105,7 @@
padding: 0;
}
.autosuggest-textarea__textarea {font-size: 16px;}
.autosuggest-textarea__textarea { font-size: 16px; }
.search__input {
line-height: 18px;
@ -116,7 +116,7 @@
background-color: var(--foreground-color);
}
.search__icon .fa {top: 15px;}
.search__icon .fa { top: 15px; }
@media screen and (min-width: 630px) {
.detailed-status {
padding: 15px;
@ -126,7 +126,7 @@
margin-top: 15px;
}
}
.account__header__bar {padding: 5px 10px;}
.account__header__bar { padding: 5px 10px; }
.navigation-bar,
.compose-form {
@ -678,7 +678,7 @@
justify-content: center;
min-height: 160px;
@supports(display: grid) { // hack to fix Chrome <57
@supports (display: grid) { // hack to fix Chrome <57
contain: strict;
}

34
app/styles/components/compose-form.scss
Wyświetl plik

@ -1,12 +1,11 @@
.compose-form {
&__sensitive-button {
padding: 10px;
padding-top: 0;
font-size: 14px;
font-weight: 500;
&.active {color: var(--highlight-text-color);}
input[type=checkbox] {display: none;}
&.active { color: var(--highlight-text-color); }
input[type=checkbox] { display: none; }
.checkbox {
display: inline-block;
@ -29,7 +28,7 @@
}
.compose-form__warning {
color: var(--primary-text-color);
color: var(--primary-text-color);
margin-bottom: 10px;
background: var(--brand-color--faint);
box-shadow: 0 2px 6px rgba($base-shadow-color, 0.3);
@ -113,7 +112,7 @@
font-size: 16px;
}
}
.spoiler-input__input {border-radius: 4px;}
.spoiler-input__input { border-radius: 4px; }
.autosuggest-textarea__textarea {
min-height: 100px;
@ -159,7 +158,7 @@
border-radius: 0 0 4px 4px;
font-size: 14px;
padding: 6px;
&.autosuggest-textarea__suggestions--visible {display: block;}
&.autosuggest-textarea__suggestions--visible { display: block; }
}
.autosuggest-textarea__suggestions__item {
@ -202,7 +201,7 @@
font-family: inherit;
font-size: 14px;
background: var(--background-color);
.compose-form__upload-wrapper {overflow: hidden;}
.compose-form__upload-wrapper { overflow: hidden; }
.compose-form__uploads-wrapper {
display: flex;
@ -226,7 +225,7 @@
align-items: flex-start;
justify-content: space-between;
opacity: 0;
transition: opacity .1s ease;
transition: opacity 0.1s ease;
.icon-button {
flex: 0 1 auto;
@ -242,7 +241,7 @@
color: var(--highlight-text-color);
}
}
&.active {opacity: 1;}
&.active { opacity: 1; }
}
&-description {
@ -255,12 +254,11 @@
background: linear-gradient(0deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent);
padding: 10px;
opacity: 0;
transition: opacity .1s ease;
transition: opacity 0.1s ease;
textarea {
background: rgba(0, 0, 0, 0.3);
box-sizing: border-box;
background: transparent;
box-sizing: border-box;
color: var(--primary-text-color--faint);
border: 1px solid var(--primary-text-color--faint);
outline: none;
@ -271,13 +269,13 @@
font-size: 14px;
font-weight: 500;
&:focus {color: #fff;}
&:focus { color: #fff; }
&::placeholder {
color: var(--primary-text-color--faint);
}
}
&.active {opacity: 1;}
&.active { opacity: 1; }
}
}
@ -319,12 +317,12 @@
justify-content: center;
}
.compose-form__upload-button-icon {line-height: 27px;}
.compose-form__upload-button-icon { line-height: 27px; }
.compose-form__sensitive-button {
display: none;
&.compose-form__sensitive-button--visible {display: block;}
.compose-form__sensitive-button__icon {line-height: 27px;}
&.compose-form__sensitive-button--visible { display: block; }
.compose-form__sensitive-button__icon { line-height: 27px; }
}
}
@ -343,7 +341,7 @@
font-size: 14px;
font-weight: 600;
color: var(--primary-text-color--faint);
&.character-counter--over {color: $warning-red;}
&.character-counter--over { color: $warning-red; }
}
}
}

13
app/styles/components/dropdown-menu.scss
Wyświetl plik

@ -9,10 +9,10 @@
padding: 4px 0;
color: var(--primary-text-color);
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);
&.left {transform-origin: 100% 50%;}
&.top {transform-origin: 50% 100%;}
&.bottom {transform-origin: 50% 0;}
&.right {transform-origin: 0 50%;}
&.left { transform-origin: 100% 50%; }
&.top { transform-origin: 50% 100%; }
&.bottom { transform-origin: 50% 0; }
&.right { transform-origin: 0 50%; }
&__arrow {
position: absolute;
@ -83,12 +83,8 @@
}
// end .dropdown-menu
// NOTE - not sure what this relates to — but it doesn't involve the navbar dropdown
.dropdown {
display: inline-block;
}
@ -98,7 +94,6 @@
position: absolute;
}
.dropdown--active .dropdown__content {
display: block;
line-height: 18px;

4
app/styles/components/emoji-reacts.scss
Wyświetl plik

@ -112,7 +112,7 @@
.status__action-bar__counter--favourite {
position: relative;
@media(max-width: 455px) {
@media (max-width: 455px) {
position: static;
}
}
@ -126,7 +126,7 @@
bottom: 100%;
left: -20px;
@media(max-width: 455px) {
@media (max-width: 455px) {
bottom: 31px;
right: 10px;
left: auto;

3
app/styles/components/filters.scss
Wyświetl plik

@ -31,7 +31,7 @@
}
}
@media(max-width: 485px) {
@media (max-width: 485px) {
div.input {
width: 100%;
margin-right: 5px;
@ -96,6 +96,5 @@
font-size: 16px;
}
}
}
}

4
app/styles/components/group-card.scss
Wyświetl plik

@ -12,7 +12,7 @@
float: right;
padding: 15px;
font-size: 17px;
a {color: #fff;}
a { color: #fff; }
}
}
@ -28,7 +28,7 @@
.group-card {
@include standard-panel;
display: block;
flex: 0 0 calc(50% - 20px/2);
flex: 0 0 calc(50% - 20px / 2);
margin-bottom: 20px;
text-decoration: none;
overflow: hidden;

4
app/styles/components/group-detail.scss
Wyświetl plik

@ -23,8 +23,8 @@
.group__tabs {
.group__tabs__tab {
display: inline-block;
text-decoration: none;
padding: 16px 22px;
text-decoration: none;
padding: 16px 22px;
text-align: center;
color: var(--primary-text-color);

2
app/styles/components/group-form.scss
Wyświetl plik

@ -55,5 +55,5 @@
position: absolute;
pointer-events: none;
}
button {float: right;}
button { float: right; }
}

4
app/styles/components/inputs.scss
Wyświetl plik

@ -11,7 +11,7 @@ textarea {
color: var(--brand-color);
border-color: var(--primary-text-color--faint);
background: var(--foreground-color);
&:focus {outline: none;}
&:focus { outline: none; }
}
}
textarea.standard {resize: vertical;}
textarea.standard { resize: vertical; }

4
app/styles/components/media-gallery.scss
Wyświetl plik

@ -64,11 +64,11 @@
}
}
.status__wrapper, .detailed-status__wrapper {
.status__wrapper,
.detailed-status__wrapper {
.media-gallery__item-thumbnail {
&,
.still-image {
img {
object-fit: contain;
}

16
app/styles/components/mfa_form.scss
Wyświetl plik

@ -9,12 +9,12 @@
}
h2.security-settings-panel__setup-otp {
display: block;
font-size: 16px;
line-height: 1.5;
color: var(--primary-text-color--faint);
font-weight: 400;
}
display: block;
font-size: 16px;
line-height: 1.5;
color: var(--primary-text-color--faint);
font-weight: 400;
}
div {
display: block;
@ -26,9 +26,8 @@
padding: 15px 20px;
font-size: 14px;
background-color: var(--warning-color--faint);
margin: 5px 20px;
border-radius: 8px;
margin: 20px auto;
border-radius: 8px;
}
.backup_codes {
@ -38,7 +37,6 @@
font-size: 14px;
background-color: var(--brand-color--faint);
border-radius: 8px;
margin: 20px;
text-align: center;
position: relative;
min-height: 125px;

22
app/styles/components/modal.scss
Wyświetl plik

@ -221,11 +221,10 @@
height: 100%;
box-sizing: border-box;
padding: 25px;
display: none;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
display: flex;
opacity: 0;
user-select: text;
}
@ -482,10 +481,9 @@
font-family: inherit;
font-size: 14px;
resize: vertical;
border: 0;
outline: 0;
border-radius: 4px;
border: 1px solid var(--background-color);
border-radius: 4px;
margin-bottom: 20px;
&:focus {
@ -523,7 +521,7 @@
max-height: 300px;
}
.actions-modal__item-label {font-weight: 500;}
.actions-modal__item-label { font-weight: 500; }
ul {
overflow-y: auto;
@ -531,19 +529,18 @@
max-height: calc(100vh - 147px);
// NOTE - not sure what this is yet, leaving alone for now until I find out.
&.with-status {max-height: calc(80vh - 75px);}
&.with-status { max-height: calc(80vh - 75px); }
li:empty {margin: 0;}
li:empty { margin: 0; }
li:not(:empty) {
&:first-of-type {margin: 10px 0 0;}
&:last-of-type {margin: 0 0 10px;}
&:first-of-type { margin: 10px 0 0; }
&:last-of-type { margin: 0 0 10px; }
a {
display: flex;
align-items: center;
padding: 13px 10px 12px;
@inclide font-size(14);
color: var(--primary-text-color--faint);
text-decoration: none;
@ -563,7 +560,7 @@
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);
}
}
button:first-child {margin-right: 10px;}
button:first-child { margin-right: 10px; }
}
}
}
@ -641,11 +638,10 @@
margin: 10px 0;
&__header {
display: block;
display: flex;
position: relative;
padding: 10px 0;
border-bottom: 1px solid hsla(var(--primary-text-color_hsl), 0.2);
display: flex;
align-items: center;
justify-content: center;

4
app/styles/components/navigation-bar.scss
Wyświetl plik

@ -86,13 +86,13 @@
& > .icon-button.close {
will-change: opacity transform;
transition: opacity $duration * 0.5 $delay,
transform $duration $delay;
transform $duration $delay;
}
& > .compose__action-bar .icon-button {
will-change: opacity transform;
transition: opacity $duration * 0.5 $delay + $duration * 0.5,
transform $duration $delay;
transform $duration $delay;
}
}
}

1
app/styles/components/profile-info-panel.scss
Wyświetl plik

@ -134,7 +134,6 @@
}
.profile-info-panel.deactivated {
.profile-info-panel-content__name h1 small,
.profile-info-panel-content__badges__join-date,
.profile-info-panel-content__bio,

4
app/styles/components/reply-indicator.scss
Wyświetl plik

@ -7,8 +7,8 @@
overflow-y: auto;
flex: 0 2 auto;
max-height: 500px;
@media screen and (min-width: 320px) and (max-width: 375px) {max-height: 220px;}
@media screen and (max-width: 320px) {max-height: 130px;}
@media screen and (min-width: 320px) and (max-width: 375px) { max-height: 220px; }
@media screen and (max-width: 320px) { max-height: 130px; }
}
.reply-indicator__header {

6
app/styles/components/search.scss
Wyświetl plik

@ -43,13 +43,13 @@
opacity: 1;
}
}
.fa-search.active {pointer-events: none;}
.fa-search.active { pointer-events: none; }
.fa-times-circle {
@include font-size(17);
cursor: pointer;
color: var(--highlight-text-color);
&:hover {color: var(--brand-color);}
&:hover { color: var(--brand-color); }
}
}
@ -154,7 +154,7 @@
.search-popout-container {
width: 251px;
@media screen and (max-width: $nav-breakpoint-2) {width: 100%;}
@media screen and (max-width: $nav-breakpoint-2) { width: 100%; }
}
.search-popout {

6
app/styles/components/snackbar.scss
Wyświetl plik

@ -16,7 +16,7 @@
background-color: #19759e !important;
&::before {
content: '';
content: '';
}
}
@ -24,7 +24,7 @@
background-color: #199e5a !important;
&::before {
content: '';
content: '';
}
}
@ -32,7 +32,7 @@
background-color: #9e1919 !important;
&::before {
content: '';
content: '';
}
}

1
app/styles/components/status.scss
Wyświetl plik

@ -153,7 +153,6 @@
0% { opacity: 0; }
100% { opacity: 1; }
}
opacity: 1;
animation: fade 150ms linear;

13
app/styles/components/tabs-bar.scss
Wyświetl plik

@ -27,7 +27,7 @@
padding: 0 15px;
// NOTE - might need to adjust this based on column sizing
@media screen and (max-width: $nav-breakpoint-4) {padding: 0 10px;}
@media screen and (max-width: $nav-breakpoint-4) { padding: 0 10px; }
}
&__split {
@ -114,7 +114,7 @@
&__button-compose {
display: block;
@media screen and (max-width: $nav-breakpoint-3) {display: none;}
@media screen and (max-width: $nav-breakpoint-3) { display: none; }
height: 34px;
margin-left: 20px;
border-radius: 6px;
@ -130,7 +130,6 @@
&:hover {
background-color: var(--accent-color--bright);
}
}
&__button {
@ -139,7 +138,7 @@
}
.theme-toggle {
@media screen and (max-width: $nav-breakpoint-3) {display: none;}
@media screen and (max-width: $nav-breakpoint-3) { display: none; }
.setting-toggle {
margin-left: 10px;
@ -180,7 +179,7 @@
margin: 4px 4px 0 0;
justify-content: center;
& > span {display: none;}
& > span { display: none; }
}
> span {
@ -206,7 +205,7 @@
&.fa-home {
font-size: 18px;
transform: translate(-1px , -2px);
transform: translate(-1px, -2px);
@media screen and (max-width: 895px) {
font-size: 26px;
@ -265,7 +264,7 @@
padding: 13px 0 0;
box-sizing: border-box;
filter: brightness(0%) grayscale(100%) invert(100%);
& span {display: none !important;}
& span { display: none !important; }
img {
height: 100%;

1
app/styles/components/theme-toggle.scss
Wyświetl plik

@ -1,6 +1,5 @@
.theme-toggle {
.setting-toggle {
&__label {
margin-bottom: 0;
vertical-align: middle;

23
app/styles/components/video-player.scss
Wyświetl plik

@ -75,7 +75,6 @@
.video-player__volume__handle {
bottom: 23px;
}
}
.video-player {
@ -127,7 +126,7 @@
background: linear-gradient(0deg, rgba($base-shadow-color, 0.85) 0, rgba($base-shadow-color, 0.45) 60%, transparent);
padding: 0 15px;
opacity: 0;
transition: opacity .1s ease;
transition: opacity 0.1s ease;
&.active {
opacity: 1;
@ -209,12 +208,12 @@
padding: 2px 10px;
font-size: 16px;
border: 0;
color: rgba(#ffffff, 0.75);
color: rgba(#fff, 0.75);
&:active,
&:hover,
&:focus {
color: #ffffff;
color: #fff;
}
}
}
@ -227,7 +226,7 @@
}
&__time-current {
color: #ffffff;
color: #fff;
margin-left: 60px;
}
@ -238,7 +237,7 @@
&__time-sep,
&__time-total {
color: #ffffff;
color: #fff;
}
&__volume {
@ -249,7 +248,7 @@
&::before {
content: "";
width: 50px;
background: rgba(#ffffff, 0.35);
background: rgba(#fff, 0.35);
border-radius: 4px;
display: block;
position: absolute;
@ -276,7 +275,7 @@
height: 12px;
bottom: 16px;
left: 70px;
transition: opacity .1s ease;
transition: opacity 0.1s ease;
background: var(--brand-color);
box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
pointer-events: none;
@ -290,7 +289,7 @@
text-decoration: none;
font-size: 14px;
font-weight: 500;
color: #ffffff;
color: #fff;
&:hover,
&:active,
@ -308,7 +307,7 @@
&::before {
content: "";
width: 100%;
background: rgba(#ffffff, 0.35);
background: rgba(#fff, 0.35);
border-radius: 4px;
display: block;
position: absolute;
@ -327,7 +326,7 @@
}
&__buffer {
background: rgba(#ffffff, 0.2);
background: rgba(#fff, 0.2);
}
&__handle {
@ -339,7 +338,7 @@
height: 12px;
top: 6px;
margin-left: -6px;
transition: opacity .1s ease;
transition: opacity 0.1s ease;
background: var(--brand-color);
box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
pointer-events: none;

78
app/styles/components/wtf-panel.scss
Wyświetl plik

@ -84,48 +84,48 @@
align-items: baseline;
padding-right: 10px;
&__avatar {
height: 46px;
width: 46px;
background-color: #ff0000;
left: -58px;
position: absolute;
}
&__name {
display: flex;
flex-wrap: wrap;
flex-direction: column;
margin-top: 6px;
&__avatar {
height: 46px;
width: 46px;
background-color: #f00;
left: -58px;
position: absolute;
}
&__name {
display: flex;
flex-wrap: wrap;
flex-direction: column;
margin-top: 6px;
&__name {
color: var(--primary-text-color);
font-size: 14px;
font-weight: bold;
line-height: 16px;
margin-bottom: 2px;
max-height: 32px; //2 lines of text
overflow: hidden;
}
&__username {
color: var(--highlight-text-color);
font-size: 12px;
line-height: 14px;
}
}
}
&__follow-block {
margin-left: auto;
padding-top: 6px;
&__button {
display: flex;
}
&__icon {
color: var(--primary-text-color);
font-size: 14px;
font-weight: bold;
line-height: 16px;
margin-bottom: 2px;
max-height: 32px; //2 lines of text
overflow: hidden;
}
&__username {
color: var(--highlight-text-color);
font-size: 12px;
line-height: 14px;
}
}
}
&__follow-block {
margin-left: auto;
padding-top: 6px;
&__button {
display: flex;
}
&__icon {
color: var(--primary-text-color);
}
}
}

2
app/styles/demetricator.scss
Wyświetl plik

@ -10,6 +10,6 @@ body.demetricator {
.account__header__bar {
min-height: 50px;
@media (min-width: 895px) {height: 50px;}
@media (min-width: 895px) { height: 50px; }
}
}

6
app/styles/donations.scss
Wyświetl plik

@ -68,12 +68,12 @@
&--trialing,
&--active {
&::before {
background-color: #00ff00;
background-color: #0f0;
}
}
&--cancelling::before {
background-color: #ffff00;
background-color: #ff0;
}
&--incomplete,
@ -82,7 +82,7 @@
&--canceled,
&--unpaid {
&::before {
background-color: #ff0000;
background-color: #f00;
}
}
}

4
app/styles/emoji_picker.scss
Wyświetl plik

@ -45,7 +45,7 @@
text-align: center;
padding: 12px 4px;
overflow: hidden;
transition: color .1s ease-out;
transition: color 0.1s ease-out;
cursor: pointer;
&:hover {
@ -190,7 +190,7 @@
}
.emoji-mart-no-results-label {
margin-top: .2em;
margin-top: 0.2em;
}
.emoji-mart-emoji:hover::before {

78
app/styles/fonts.scss
Wyświetl plik

@ -5,10 +5,10 @@
font-style: normal;
src: url('../fonts/roboto/roboto-regular-400.eot?#iefix');
src: url('../fonts/roboto/roboto-regular-400.eot?#iefix') format('embedded-opentype'),
url('../fonts/roboto/roboto-regular-400.woff2') format('woff2'),
url('../fonts/roboto/roboto-regular-400.woff') format('woff'),
url('../fonts/roboto/roboto-regular-400.ttf') format('truetype'),
url('../fonts/roboto/roboto-regular-400.svg') format('svg');
url('../fonts/roboto/roboto-regular-400.woff2') format('woff2'),
url('../fonts/roboto/roboto-regular-400.woff') format('woff'),
url('../fonts/roboto/roboto-regular-400.ttf') format('truetype'),
url('../fonts/roboto/roboto-regular-400.svg') format('svg');
}
// Roboto Regular Italic
@ -18,10 +18,10 @@
font-style: italic;
src: url('../fonts/roboto/roboto-regular-italic-400.eot?#iefix');
src: url('../fonts/roboto/roboto-regular-italic-400.eot?#iefix') format('embedded-opentype'),
url('../fonts/roboto/roboto-regular-italic-400.woff2') format('woff2'),
url('../fonts/roboto/roboto-regular-italic-400.woff') format('woff'),
url('../fonts/roboto/roboto-regular-italic-400.ttf') format('truetype'),
url('../fonts/roboto/roboto-regular-italic-400.svg') format('svg');
url('../fonts/roboto/roboto-regular-italic-400.woff2') format('woff2'),
url('../fonts/roboto/roboto-regular-italic-400.woff') format('woff'),
url('../fonts/roboto/roboto-regular-italic-400.ttf') format('truetype'),
url('../fonts/roboto/roboto-regular-italic-400.svg') format('svg');
}
// Roboto Light
@ -31,10 +31,10 @@
font-style: normal;
src: url('../fonts/roboto/roboto-light-300.eot?#iefix');
src: url('../fonts/roboto/roboto-light-300.eot?#iefix') format('embedded-opentype'),
url('../fonts/roboto/roboto-light-300.woff2') format('woff2'),
url('../fonts/roboto/roboto-light-300.woff') format('woff'),
url('../fonts/roboto/roboto-light-300.ttf') format('truetype'),
url('../fonts/roboto/roboto-light-300.svg') format('svg');
url('../fonts/roboto/roboto-light-300.woff2') format('woff2'),
url('../fonts/roboto/roboto-light-300.woff') format('woff'),
url('../fonts/roboto/roboto-light-300.ttf') format('truetype'),
url('../fonts/roboto/roboto-light-300.svg') format('svg');
}
// Roboto Light Italic
@ -44,10 +44,10 @@
font-style: italic;
src: url('../fonts/roboto/roboto-light-italic-300.eot?#iefix');
src: url('../fonts/roboto/roboto-light-italic-300.eot?#iefix') format('embedded-opentype'),
url('../fonts/roboto/roboto-light-italic-300.woff2') format('woff2'),
url('../fonts/roboto/roboto-light-italic-300.woff') format('woff'),
url('../fonts/roboto/roboto-light-italic-300.ttf') format('truetype'),
url('../fonts/roboto/roboto-light-italic-300.svg') format('svg');
url('../fonts/roboto/roboto-light-italic-300.woff2') format('woff2'),
url('../fonts/roboto/roboto-light-italic-300.woff') format('woff'),
url('../fonts/roboto/roboto-light-italic-300.ttf') format('truetype'),
url('../fonts/roboto/roboto-light-italic-300.svg') format('svg');
}
// Roboto Bold
@ -57,10 +57,10 @@
font-style: normal;
src: url('../fonts/roboto/roboto-bold-700.eot?#iefix');
src: url('../fonts/roboto/roboto-bold-700.eot?#iefix') format('embedded-opentype'),
url('../fonts/roboto/roboto-bold-700.woff2') format('woff2'),
url('../fonts/roboto/roboto-bold-700.woff') format('woff'),
url('../fonts/roboto/roboto-bold-700.ttf') format('truetype'),
url('../fonts/roboto/roboto-bold-700.svg') format('svg');
url('../fonts/roboto/roboto-bold-700.woff2') format('woff2'),
url('../fonts/roboto/roboto-bold-700.woff') format('woff'),
url('../fonts/roboto/roboto-bold-700.ttf') format('truetype'),
url('../fonts/roboto/roboto-bold-700.svg') format('svg');
}
// Roboto Bold Italic
@ -70,10 +70,10 @@
font-style: italic;
src: url('../fonts/roboto/roboto-bold-italic-700.eot?#iefix');
src: url('../fonts/roboto/roboto-bold-italic-700.eot?#iefix') format('embedded-opentype'),
url('../fonts/roboto/roboto-bold-italic-700.woff2') format('woff2'),
url('../fonts/roboto/roboto-bold-italic-700.woff') format('woff'),
url('../fonts/roboto/roboto-bold-italic-700.ttf') format('truetype'),
url('../fonts/roboto/roboto-bold-italic-700.svg') format('svg');
url('../fonts/roboto/roboto-bold-italic-700.woff2') format('woff2'),
url('../fonts/roboto/roboto-bold-italic-700.woff') format('woff'),
url('../fonts/roboto/roboto-bold-italic-700.ttf') format('truetype'),
url('../fonts/roboto/roboto-bold-italic-700.svg') format('svg');
}
// Montserrat Extra Bold
@ -84,10 +84,10 @@
font-style: normal;
src: url('../fonts/montserrat/montserrat-extra-bold-800.eot?#iefix');
src: url('../fonts/montserrat/montserrat-extra-bold-800.eot?#iefix') format('embedded-opentype'),
url('../fonts/montserrat/montserrat-extra-bold-800.woff2') format('woff2'),
url('../fonts/montserrat/montserrat-extra-bold-800.woff') format('woff'),
url('../fonts/montserrat/montserrat-extra-bold-800.ttf') format('truetype'),
url('../fonts/montserrat/montserrat-extra-bold-800.svg') format('svg');
url('../fonts/montserrat/montserrat-extra-bold-800.woff2') format('woff2'),
url('../fonts/montserrat/montserrat-extra-bold-800.woff') format('woff'),
url('../fonts/montserrat/montserrat-extra-bold-800.ttf') format('truetype'),
url('../fonts/montserrat/montserrat-extra-bold-800.svg') format('svg');
}
// OpenDyslexic
@ -95,40 +95,43 @@
font-family: 'OpenDyslexic';
src: url('../fonts/OpenDyslexic/OpenDyslexic-Regular.woff2') format('woff2');
}
@font-face {
font-family: 'OpenDyslexic';
font-weight: bold;
src: url('../fonts/OpenDyslexic/OpenDyslexic-Bold.woff2') format('woff2');
}
@font-face {
font-family: 'OpenDyslexic';
font-weight: bold;
font-style: italic;
src: url('../fonts/OpenDyslexic/OpenDyslexic-Bold-Italic.woff2') format('woff2');
}
@font-face {
font-family: 'OpenDyslexic';
font-style: italic;
src: url('../fonts/OpenDyslexic/OpenDyslexic-Italic.woff2') format('woff2');
}
// TYPEOGRAPHY MIXINS
// declare the font family using these shortcuts
@mixin font-roboto {font-family: 'Roboto', Arial, sans-serif !important;}
@mixin font-montserrat {font-family: 'Montserrat', Arial, sans-serif !important;}
@mixin font-roboto { font-family: 'Roboto', Arial, sans-serif !important; }
@mixin font-montserrat { font-family: 'Montserrat', Arial, sans-serif !important; }
// Declare font weights as a numerical value in rendered output
// Prevents certain browsers which do not play nice with "light, medium" textual declarations
// Numeical values always work more consistently across browsers
// Each font-weight is linked with the @font-face declaration to the actual font file
@mixin font-weight($weight) {
@if $weight == 'light' {font-weight: 300;}
@if $weight == 'normal' {font-weight: 400;}
@if $weight == 'medium' {font-weight: 500;}
@if $weight == 'bold' {font-weight: 700;}
@if $weight == 'extrabold' {font-weight: 800;}
@if $weight == 'light' { font-weight: 300; }
@if $weight == 'normal' { font-weight: 400; }
@if $weight == 'medium' { font-weight: 500; }
@if $weight == 'bold' { font-weight: 700; }
@if $weight == 'extrabold' { font-weight: 800; }
}
// Use these mixins to define font-size and line-height
@ -140,6 +143,7 @@
font-size: #{$px + "px"};
font-size: #{$rem + "rem"};
}
@mixin line-height($size) {
$rem: ($size / 10);
$px: $size;
@ -150,7 +154,7 @@
// Soapbox icon font
@font-face {
font-family: 'soapbox';
src: url('../fonts/soapbox/soapbox.eot?pryg6i');
src: url('../fonts/soapbox/soapbox.eot?pryg6i');
src: url('../fonts/soapbox/soapbox.eot?pryg6i#iefix') format('embedded-opentype'),
url('../fonts/soapbox/soapbox.ttf?pryg6i') format('truetype'),
url('../fonts/soapbox/soapbox.woff?pryg6i') format('woff'),

3
app/styles/forms.scss
Wyświetl plik

@ -490,7 +490,6 @@ code {
}
.label_input {
&__color {
display: inline-flex;
font-size: 14px;
@ -639,7 +638,7 @@ code {
}
.captcha {
background-color: #ffffff;
background-color: #fff;
border-radius: 4px;
img {

1
app/styles/loading.scss
Wyświetl plik

@ -12,7 +12,6 @@
span {
display: block;
float: left;
margin-left: 50%;
transform: translateX(-50%);
margin: 82px 0 0 50%;
white-space: nowrap;

7
app/styles/polls.scss
Wyświetl plik

@ -14,8 +14,8 @@
height: 100%;
display: inline-block;
border-radius: 4px;
background: hsla(var(--primary-text-color_hsl), .3);
&.leading {background: hsla(var(--primary-text-color_hsl), .6);}
background: hsla(var(--primary-text-color_hsl), 0.3);
&.leading { background: hsla(var(--primary-text-color_hsl), 0.6); }
}
&__text {
@ -48,7 +48,6 @@
width: 100%;
font-size: 14px;
color: var(--primary-text-color);
display: block;
outline: 0;
font-family: inherit;
background: var(--foreground-color);
@ -129,7 +128,7 @@
&:active,
&:focus {
background-color: hsla(var(--primary-text-color_hsl), .1);
background-color: hsla(var(--primary-text-color_hsl), 0.1);
}
}

1
app/styles/rtl.scss
Wyświetl plik

@ -108,7 +108,6 @@ body.rtl {
}
.status__action-bar {
&__counter {
margin-right: 0;
margin-left: 11px;

4
app/styles/themes.scss
Wyświetl plik

@ -59,7 +59,7 @@ body,
.theme-mode-light {
// Primary variables
--foreground-color: #ffffff;
--foreground-color: #fff;
--highlight-text-color: hsl(
var(--brand-color_h),
var(--brand-color_s),
@ -88,7 +88,7 @@ body,
.theme-mode-dark {
// Primary variables
--foreground-color: #222222;
--foreground-color: #222;
--highlight-text-color: hsl(
var(--brand-color_h),
var(--brand-color_s),

53
app/styles/ui.scss
Wyświetl plik

@ -129,7 +129,7 @@
}
}
.ellipsis::after {content: "…";}
.ellipsis::after { content: "…"; }
.timeline-compose-block {
@include standard-panel;
@ -139,7 +139,7 @@
margin-bottom: 20px;
.emoji-picker-wrapper {
.emoji-picker-dropdown {top: 10px;}
.emoji-picker-dropdown { top: 10px; }
}
.compose-form {
@ -147,7 +147,7 @@
padding: 0 0 0 20px !important;
position: relative;
@media(max-width: 405px) {
@media (max-width: 405px) {
padding: 0 !important;
}
@ -173,7 +173,7 @@
}
&__avatar {
@media(max-width: 405px) { display: none; }
@media (max-width: 405px) { display: none; }
}
}
@ -185,7 +185,7 @@
font-size: inherit;
vertical-align: middle;
object-fit: contain;
margin: -.2ex .15em .2ex;
margin: -0.2ex 0.15em 0.2ex;
width: 16px;
height: 16px;
@ -320,29 +320,29 @@
padding: 0 0 100px;
.page {
display: flex;
flex-direction: column;
width: 100%;
&__top {
display: flex;
width: 100%;
height: auto;
z-index: 105;
background: var(--foreground-color);
@media (min-width: 895px) {
top: -290px;
position: sticky;
}
}
&__columns {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
&__top {
display: flex;
width: 100%;
height: auto;
z-index: 105;
background: var(--foreground-color);
@media (min-width: 895px) {
top: -290px;
position: sticky;
}
}
&__columns {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
}
}
@ -689,11 +689,10 @@
position: absolute;
content: '\f00c';
font: normal normal normal 14px/1 ForkAwesome;
font-size: inherit;
font-size: 0.6em;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
color: #fff;
font-size: 0.6em;
line-height: 15px;
width: 15px;
height: 15px;

5
app/styles/variables.scss
Wyświetl plik

@ -19,12 +19,13 @@ $warning-red: #ff5050 !default; // Sunset Orange
$gold-star: #ca8f04 !default; // Dark Goldenrod
// Variables for defaults in UI
$base-shadow-color: #000000 !default;
$base-overlay-background: #000000 !default;
$base-shadow-color: #000 !default;
$base-overlay-background: #000 !default;
$valid-value-color: $success-green !default;
$error-value-color: $error-red !default;
// Language codes that uses CJK fonts
/* stylelint-disable-next-line value-keyword-case -- locale filenames */
$cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;
// Variables for components

1
package.json
Wyświetl plik

@ -122,6 +122,7 @@
"sass-loader": "^10.0.0",
"semver": "^7.3.2",
"stringz": "^2.0.0",
"stylelint-config-standard": "^20.0.0",
"substring-trie": "^1.0.2",
"tiny-queue": "^0.2.1",
"uglifyjs-webpack-plugin": "^2.2.0",

7
yarn.lock
Wyświetl plik

@ -11362,6 +11362,13 @@ stylelint-config-recommended@^3.0.0:
resolved "https://registry.yarnpkg.com/stylelint-config-recommended/-/stylelint-config-recommended-3.0.0.tgz#e0e547434016c5539fe2650afd58049a2fd1d657"
integrity sha512-F6yTRuc06xr1h5Qw/ykb2LuFynJ2IxkKfCMf+1xqPffkxh0S09Zc902XCffcsw/XMFq/OzQ1w54fLIDtmRNHnQ==
stylelint-config-standard@^20.0.0:
version "20.0.0"
resolved "https://registry.yarnpkg.com/stylelint-config-standard/-/stylelint-config-standard-20.0.0.tgz#06135090c9e064befee3d594289f50e295b5e20d"
integrity sha512-IB2iFdzOTA/zS4jSVav6z+wGtin08qfj+YyExHB3LF9lnouQht//YyB0KZq9gGz5HNPkddHOzcY8HsUey6ZUlA==
dependencies:
stylelint-config-recommended "^3.0.0"
stylelint-scss@^3.18.0:
version "3.18.0"
resolved "https://registry.yarnpkg.com/stylelint-scss/-/stylelint-scss-3.18.0.tgz#8f06371c223909bf3f62e839548af1badeed31e9"