From 263b7ddff8b0afc52a85420da3a2992de8624aac Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Sun, 11 Oct 2020 16:23:19 -0500 Subject: [PATCH] Stylelint: stricter config, lint existing scss --- .stylelintrc.json | 19 ++--- app/styles/_mixins.scss | 16 ++-- app/styles/about.scss | 7 +- app/styles/accessibility.scss | 4 +- app/styles/accounts.scss | 1 - app/styles/basics.scss | 4 +- app/styles/chats.scss | 8 +- app/styles/components/accordion.scss | 1 - app/styles/components/account-header.scss | 26 +++---- app/styles/components/audio-player.scss | 30 ++++--- app/styles/components/columns.scss | 8 +- app/styles/components/compose-form.scss | 34 ++++---- app/styles/components/dropdown-menu.scss | 13 +--- app/styles/components/emoji-reacts.scss | 4 +- app/styles/components/filters.scss | 3 +- app/styles/components/group-card.scss | 4 +- app/styles/components/group-detail.scss | 4 +- app/styles/components/group-form.scss | 2 +- app/styles/components/inputs.scss | 4 +- app/styles/components/media-gallery.scss | 4 +- app/styles/components/mfa_form.scss | 16 ++-- app/styles/components/modal.scss | 22 +++--- app/styles/components/navigation-bar.scss | 4 +- app/styles/components/profile-info-panel.scss | 1 - app/styles/components/reply-indicator.scss | 4 +- app/styles/components/search.scss | 6 +- app/styles/components/snackbar.scss | 6 +- app/styles/components/status.scss | 1 - app/styles/components/tabs-bar.scss | 13 ++-- app/styles/components/theme-toggle.scss | 1 - app/styles/components/video-player.scss | 23 +++--- app/styles/components/wtf-panel.scss | 78 +++++++++---------- app/styles/demetricator.scss | 2 +- app/styles/donations.scss | 6 +- app/styles/emoji_picker.scss | 4 +- app/styles/fonts.scss | 78 ++++++++++--------- app/styles/forms.scss | 3 +- app/styles/loading.scss | 1 - app/styles/polls.scss | 7 +- app/styles/rtl.scss | 1 - app/styles/themes.scss | 4 +- app/styles/ui.scss | 53 +++++++------ app/styles/variables.scss | 5 +- package.json | 1 + yarn.lock | 7 ++ 45 files changed, 262 insertions(+), 281 deletions(-) diff --git a/.stylelintrc.json b/.stylelintrc.json index 06b4c7c4a..82ca25194 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -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 } } diff --git a/app/styles/_mixins.scss b/app/styles/_mixins.scss index 0fb142bd7..33905de4a 100644 --- a/app/styles/_mixins.scss +++ b/app/styles/_mixins.scss @@ -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); } } } } diff --git a/app/styles/about.scss b/app/styles/about.scss index 40ad97ef9..a1b20544b 100644 --- a/app/styles/about.scss +++ b/app/styles/about.scss @@ -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 { diff --git a/app/styles/accessibility.scss b/app/styles/accessibility.scss index 378669e09..00d5fe384 100644 --- a/app/styles/accessibility.scss +++ b/app/styles/accessibility.scss @@ -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 { diff --git a/app/styles/accounts.scss b/app/styles/accounts.scss index 5c70a64d3..f0e727511 100644 --- a/app/styles/accounts.scss +++ b/app/styles/accounts.scss @@ -277,7 +277,6 @@ a .account__avatar { &-overlay { @include avatar-radius; @include avatar-size(24px); - position: absolute; bottom: 0; right: 0; diff --git a/app/styles/basics.scss b/app/styles/basics.scss index 621c7bbb2..e8d9ef274 100644 --- a/app/styles/basics.scss +++ b/app/styles/basics.scss @@ -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 { diff --git a/app/styles/chats.scss b/app/styles/chats.scss index 605ab0048..4f266bc56 100644 --- a/app/styles/chats.scss +++ b/app/styles/chats.scss @@ -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; } diff --git a/app/styles/components/accordion.scss b/app/styles/components/accordion.scss index deeaa7708..35ad3ea2e 100644 --- a/app/styles/components/accordion.scss +++ b/app/styles/components/accordion.scss @@ -20,7 +20,6 @@ text-transform: none !important; text-align: left !important; display: flex !important; - color: var(--primary-text-color); border: 0; width: 100%; diff --git a/app/styles/components/account-header.scss b/app/styles/components/account-header.scss index 4bf3e24df..5fec07327 100644 --- a/app/styles/components/account-header.scss +++ b/app/styles/components/account-header.scss @@ -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 { diff --git a/app/styles/components/audio-player.scss b/app/styles/components/audio-player.scss index 7073f141a..731485508 100644 --- a/app/styles/components/audio-player.scss +++ b/app/styles/components/audio-player.scss @@ -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; diff --git a/app/styles/components/columns.scss b/app/styles/components/columns.scss index 9dd1a58ea..a3f2dac95 100644 --- a/app/styles/components/columns.scss +++ b/app/styles/components/columns.scss @@ -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; } diff --git a/app/styles/components/compose-form.scss b/app/styles/components/compose-form.scss index af8d11861..4a50acb44 100644 --- a/app/styles/components/compose-form.scss +++ b/app/styles/components/compose-form.scss @@ -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; } } } } diff --git a/app/styles/components/dropdown-menu.scss b/app/styles/components/dropdown-menu.scss index 8f3b75c70..7d51eefcf 100644 --- a/app/styles/components/dropdown-menu.scss +++ b/app/styles/components/dropdown-menu.scss @@ -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; diff --git a/app/styles/components/emoji-reacts.scss b/app/styles/components/emoji-reacts.scss index 452b1d350..d9a4450c7 100644 --- a/app/styles/components/emoji-reacts.scss +++ b/app/styles/components/emoji-reacts.scss @@ -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; diff --git a/app/styles/components/filters.scss b/app/styles/components/filters.scss index 769954a4d..ccdc030d7 100644 --- a/app/styles/components/filters.scss +++ b/app/styles/components/filters.scss @@ -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; } } - } } diff --git a/app/styles/components/group-card.scss b/app/styles/components/group-card.scss index 8ad0b17da..1d5ce8d58 100644 --- a/app/styles/components/group-card.scss +++ b/app/styles/components/group-card.scss @@ -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; diff --git a/app/styles/components/group-detail.scss b/app/styles/components/group-detail.scss index b5c96aff0..d7c24b530 100644 --- a/app/styles/components/group-detail.scss +++ b/app/styles/components/group-detail.scss @@ -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); diff --git a/app/styles/components/group-form.scss b/app/styles/components/group-form.scss index 6d50cfe71..fb8b1a57e 100644 --- a/app/styles/components/group-form.scss +++ b/app/styles/components/group-form.scss @@ -55,5 +55,5 @@ position: absolute; pointer-events: none; } - button {float: right;} + button { float: right; } } diff --git a/app/styles/components/inputs.scss b/app/styles/components/inputs.scss index ca1493011..c1960e029 100644 --- a/app/styles/components/inputs.scss +++ b/app/styles/components/inputs.scss @@ -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; } diff --git a/app/styles/components/media-gallery.scss b/app/styles/components/media-gallery.scss index 02318c6d8..0ce35a662 100644 --- a/app/styles/components/media-gallery.scss +++ b/app/styles/components/media-gallery.scss @@ -64,11 +64,11 @@ } } -.status__wrapper, .detailed-status__wrapper { +.status__wrapper, +.detailed-status__wrapper { .media-gallery__item-thumbnail { &, .still-image { - img { object-fit: contain; } diff --git a/app/styles/components/mfa_form.scss b/app/styles/components/mfa_form.scss index 80e16da1e..10ab69fc7 100644 --- a/app/styles/components/mfa_form.scss +++ b/app/styles/components/mfa_form.scss @@ -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; diff --git a/app/styles/components/modal.scss b/app/styles/components/modal.scss index 5cc3c4073..2aa7613f9 100644 --- a/app/styles/components/modal.scss +++ b/app/styles/components/modal.scss @@ -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; diff --git a/app/styles/components/navigation-bar.scss b/app/styles/components/navigation-bar.scss index b25ae9f8b..ebe402970 100644 --- a/app/styles/components/navigation-bar.scss +++ b/app/styles/components/navigation-bar.scss @@ -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; } } } diff --git a/app/styles/components/profile-info-panel.scss b/app/styles/components/profile-info-panel.scss index fcb14051a..7e08cfbe8 100644 --- a/app/styles/components/profile-info-panel.scss +++ b/app/styles/components/profile-info-panel.scss @@ -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, diff --git a/app/styles/components/reply-indicator.scss b/app/styles/components/reply-indicator.scss index 4cbf03343..367c6164a 100644 --- a/app/styles/components/reply-indicator.scss +++ b/app/styles/components/reply-indicator.scss @@ -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 { diff --git a/app/styles/components/search.scss b/app/styles/components/search.scss index 712c86951..6933c6006 100644 --- a/app/styles/components/search.scss +++ b/app/styles/components/search.scss @@ -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 { diff --git a/app/styles/components/snackbar.scss b/app/styles/components/snackbar.scss index 980ec44c0..b72e0bbcf 100644 --- a/app/styles/components/snackbar.scss +++ b/app/styles/components/snackbar.scss @@ -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: ''; } } diff --git a/app/styles/components/status.scss b/app/styles/components/status.scss index a05364f81..86c60cbeb 100644 --- a/app/styles/components/status.scss +++ b/app/styles/components/status.scss @@ -153,7 +153,6 @@ 0% { opacity: 0; } 100% { opacity: 1; } } - opacity: 1; animation: fade 150ms linear; diff --git a/app/styles/components/tabs-bar.scss b/app/styles/components/tabs-bar.scss index 808b21fde..8553b3df6 100644 --- a/app/styles/components/tabs-bar.scss +++ b/app/styles/components/tabs-bar.scss @@ -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%; diff --git a/app/styles/components/theme-toggle.scss b/app/styles/components/theme-toggle.scss index c0cadc68f..24b66b9b7 100644 --- a/app/styles/components/theme-toggle.scss +++ b/app/styles/components/theme-toggle.scss @@ -1,6 +1,5 @@ .theme-toggle { .setting-toggle { - &__label { margin-bottom: 0; vertical-align: middle; diff --git a/app/styles/components/video-player.scss b/app/styles/components/video-player.scss index b87cf569e..8e997c5e1 100644 --- a/app/styles/components/video-player.scss +++ b/app/styles/components/video-player.scss @@ -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; diff --git a/app/styles/components/wtf-panel.scss b/app/styles/components/wtf-panel.scss index a555e9490..bad152f99 100644 --- a/app/styles/components/wtf-panel.scss +++ b/app/styles/components/wtf-panel.scss @@ -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); } } } diff --git a/app/styles/demetricator.scss b/app/styles/demetricator.scss index 08288bd91..c57d1287b 100644 --- a/app/styles/demetricator.scss +++ b/app/styles/demetricator.scss @@ -10,6 +10,6 @@ body.demetricator { .account__header__bar { min-height: 50px; - @media (min-width: 895px) {height: 50px;} + @media (min-width: 895px) { height: 50px; } } } diff --git a/app/styles/donations.scss b/app/styles/donations.scss index bb4798f1d..c66ce0b00 100644 --- a/app/styles/donations.scss +++ b/app/styles/donations.scss @@ -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; } } } diff --git a/app/styles/emoji_picker.scss b/app/styles/emoji_picker.scss index e282a3c17..9ac429152 100644 --- a/app/styles/emoji_picker.scss +++ b/app/styles/emoji_picker.scss @@ -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 { diff --git a/app/styles/fonts.scss b/app/styles/fonts.scss index 354b9b9a9..500eafa28 100644 --- a/app/styles/fonts.scss +++ b/app/styles/fonts.scss @@ -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'), diff --git a/app/styles/forms.scss b/app/styles/forms.scss index 1e469506a..3fcaddcd9 100644 --- a/app/styles/forms.scss +++ b/app/styles/forms.scss @@ -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 { diff --git a/app/styles/loading.scss b/app/styles/loading.scss index 42a3a0c1f..f45769ecf 100644 --- a/app/styles/loading.scss +++ b/app/styles/loading.scss @@ -12,7 +12,6 @@ span { display: block; float: left; - margin-left: 50%; transform: translateX(-50%); margin: 82px 0 0 50%; white-space: nowrap; diff --git a/app/styles/polls.scss b/app/styles/polls.scss index 33b645489..c5c635e40 100644 --- a/app/styles/polls.scss +++ b/app/styles/polls.scss @@ -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); } } diff --git a/app/styles/rtl.scss b/app/styles/rtl.scss index e8e59d734..d1351b7f1 100644 --- a/app/styles/rtl.scss +++ b/app/styles/rtl.scss @@ -108,7 +108,6 @@ body.rtl { } .status__action-bar { - &__counter { margin-right: 0; margin-left: 11px; diff --git a/app/styles/themes.scss b/app/styles/themes.scss index fb7b89bbd..2369c9f6a 100644 --- a/app/styles/themes.scss +++ b/app/styles/themes.scss @@ -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), diff --git a/app/styles/ui.scss b/app/styles/ui.scss index 2d4d54f71..a2ca21a06 100644 --- a/app/styles/ui.scss +++ b/app/styles/ui.scss @@ -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; diff --git a/app/styles/variables.scss b/app/styles/variables.scss index 75f571b1d..38afac611 100644 --- a/app/styles/variables.scss +++ b/app/styles/variables.scss @@ -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 diff --git a/package.json b/package.json index dad61842a..31967b155 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/yarn.lock b/yarn.lock index af9aa7991..96c335f8b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"