From 0c9d455ea5540e854c2d879cd1df015ea493f622 Mon Sep 17 00:00:00 2001 From: Nick Schonning Date: Sun, 12 Feb 2023 22:57:03 -0500 Subject: Upgrade to Stylelint 15 with Prettier (#23558) --- app/javascript/styles/fonts/roboto-mono.scss | 9 +- app/javascript/styles/fonts/roboto.scss | 24 ++--- app/javascript/styles/mastodon-light/diff.scss | 31 ++++-- app/javascript/styles/mastodon/accessibility.scss | 5 +- app/javascript/styles/mastodon/admin.scss | 23 ++-- app/javascript/styles/mastodon/basics.scss | 6 +- app/javascript/styles/mastodon/components.scss | 126 +++++++++++++++------- app/javascript/styles/mastodon/emoji_picker.scss | 2 +- app/javascript/styles/mastodon/forms.scss | 48 +++++---- app/javascript/styles/mastodon/modal.scss | 4 +- app/javascript/styles/mastodon/polls.scss | 10 +- app/javascript/styles/mastodon/rtl.scss | 18 ++-- app/javascript/styles/mastodon/statuses.scss | 2 +- app/javascript/styles/mastodon/variables.scss | 31 +++--- app/javascript/styles/mastodon/widgets.scss | 2 +- 15 files changed, 218 insertions(+), 123 deletions(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/fonts/roboto-mono.scss b/app/javascript/styles/fonts/roboto-mono.scss index 3802212a9..10dd63009 100644 --- a/app/javascript/styles/fonts/roboto-mono.scss +++ b/app/javascript/styles/fonts/roboto-mono.scss @@ -1,11 +1,12 @@ @font-face { font-family: mastodon-font-monospace; - src: - local('Roboto Mono'), + src: local('Roboto Mono'), url('../fonts/roboto-mono/robotomono-regular-webfont.woff2') format('woff2'), url('../fonts/roboto-mono/robotomono-regular-webfont.woff') format('woff'), - url('../fonts/roboto-mono/robotomono-regular-webfont.ttf') format('truetype'), - url('../fonts/roboto-mono/robotomono-regular-webfont.svg#roboto_monoregular') format('svg'); + url('../fonts/roboto-mono/robotomono-regular-webfont.ttf') + format('truetype'), + url('../fonts/roboto-mono/robotomono-regular-webfont.svg#roboto_monoregular') + format('svg'); font-weight: 400; font-display: swap; font-style: normal; diff --git a/app/javascript/styles/fonts/roboto.scss b/app/javascript/styles/fonts/roboto.scss index 657152380..672eab086 100644 --- a/app/javascript/styles/fonts/roboto.scss +++ b/app/javascript/styles/fonts/roboto.scss @@ -1,11 +1,11 @@ @font-face { font-family: mastodon-font-sans-serif; - src: - local('Roboto Italic'), + src: local('Roboto Italic'), url('../fonts/roboto/roboto-italic-webfont.woff2') format('woff2'), url('../fonts/roboto/roboto-italic-webfont.woff') format('woff'), url('../fonts/roboto/roboto-italic-webfont.ttf') format('truetype'), - url('../fonts/roboto/roboto-italic-webfont.svg#roboto-italic-webfont') format('svg'); + url('../fonts/roboto/roboto-italic-webfont.svg#roboto-italic-webfont') + format('svg'); font-weight: normal; font-display: swap; font-style: italic; @@ -13,12 +13,12 @@ @font-face { font-family: mastodon-font-sans-serif; - src: - local('Roboto Bold'), + src: local('Roboto Bold'), url('../fonts/roboto/roboto-bold-webfont.woff2') format('woff2'), url('../fonts/roboto/roboto-bold-webfont.woff') format('woff'), url('../fonts/roboto/roboto-bold-webfont.ttf') format('truetype'), - url('../fonts/roboto/roboto-bold-webfont.svg#roboto-bold-webfont') format('svg'); + url('../fonts/roboto/roboto-bold-webfont.svg#roboto-bold-webfont') + format('svg'); font-weight: bold; font-display: swap; font-style: normal; @@ -26,12 +26,12 @@ @font-face { font-family: mastodon-font-sans-serif; - src: - local('Roboto Medium'), + src: local('Roboto Medium'), url('../fonts/roboto/roboto-medium-webfont.woff2') format('woff2'), url('../fonts/roboto/roboto-medium-webfont.woff') format('woff'), url('../fonts/roboto/roboto-medium-webfont.ttf') format('truetype'), - url('../fonts/roboto/roboto-medium-webfont.svg#roboto-medium-webfont') format('svg'); + url('../fonts/roboto/roboto-medium-webfont.svg#roboto-medium-webfont') + format('svg'); font-weight: 500; font-display: swap; font-style: normal; @@ -39,12 +39,12 @@ @font-face { font-family: mastodon-font-sans-serif; - src: - local('Roboto'), + src: local('Roboto'), url('../fonts/roboto/roboto-regular-webfont.woff2') format('woff2'), url('../fonts/roboto/roboto-regular-webfont.woff') format('woff'), url('../fonts/roboto/roboto-regular-webfont.ttf') format('truetype'), - url('../fonts/roboto/roboto-regular-webfont.svg#roboto-regular-webfont') format('svg'); + url('../fonts/roboto/roboto-regular-webfont.svg#roboto-regular-webfont') + format('svg'); font-weight: normal; font-display: swap; font-style: normal; diff --git a/app/javascript/styles/mastodon-light/diff.scss b/app/javascript/styles/mastodon-light/diff.scss index c37100a28..01725cf96 100644 --- a/app/javascript/styles/mastodon-light/diff.scss +++ b/app/javascript/styles/mastodon-light/diff.scss @@ -152,7 +152,7 @@ html { } .compose-form__autosuggest-wrapper, -.poll__option input[type="text"], +.poll__option input[type='text'], .compose-form .spoiler-input__input, .compose-form__poll-wrapper select, .search__input, @@ -179,7 +179,9 @@ html { } .compose-form__poll-wrapper select { - background: $simple-background-color url("data:image/svg+xml;utf8,") no-repeat right 8px center / auto 16px; + background: $simple-background-color + url("data:image/svg+xml;utf8,") + no-repeat right 8px center / auto 16px; } .compose-form__poll-wrapper, @@ -205,7 +207,9 @@ html { } .drawer__inner__mastodon { - background: $white url('data:image/svg+xml;utf8,') no-repeat bottom / 100% auto; + background: $white + url('data:image/svg+xml;utf8,') + no-repeat bottom / 100% auto; } // Change the colors used in compose-form @@ -332,11 +336,13 @@ html { color: $white; } -.language-dropdown__dropdown__results__item .language-dropdown__dropdown__results__item__common-name { +.language-dropdown__dropdown__results__item + .language-dropdown__dropdown__results__item__common-name { color: lighten($ui-base-color, 8%); } -.language-dropdown__dropdown__results__item.active .language-dropdown__dropdown__results__item__common-name { +.language-dropdown__dropdown__results__item.active + .language-dropdown__dropdown__results__item__common-name { color: darken($ui-base-color, 12%); } @@ -490,7 +496,8 @@ html { background: darken($ui-secondary-color, 10%); } -.react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track { +.react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) + .react-toggle-track { background: lighten($ui-highlight-color, 10%); } @@ -522,10 +529,10 @@ html { } .simple_form { - input[type="text"], - input[type="number"], - input[type="email"], - input[type="password"], + input[type='text'], + input[type='number'], + input[type='email'], + input[type='password'], textarea { &:hover { border-color: lighten($ui-base-color, 12%); @@ -682,5 +689,7 @@ html { .mute-modal select { border: 1px solid lighten($ui-base-color, 8%); - background: $simple-background-color url("data:image/svg+xml;utf8,") no-repeat right 8px center / auto 16px; + background: $simple-background-color + url("data:image/svg+xml;utf8,") + no-repeat right 8px center / auto 16px; } diff --git a/app/javascript/styles/mastodon/accessibility.scss b/app/javascript/styles/mastodon/accessibility.scss index c5bcb5941..deaa0afda 100644 --- a/app/javascript/styles/mastodon/accessibility.scss +++ b/app/javascript/styles/mastodon/accessibility.scss @@ -1,4 +1,7 @@ -$emojis-requiring-inversion: 'back' 'copyright' 'curly_loop' 'currency_exchange' 'end' 'heavy_check_mark' 'heavy_division_sign' 'heavy_dollar_sign' 'heavy_minus_sign' 'heavy_multiplication_x' 'heavy_plus_sign' 'on' 'registered' 'soon' 'spider' 'telephone_receiver' 'tm' 'top' 'wavy_dash' !default; +$emojis-requiring-inversion: 'back' 'copyright' 'curly_loop' 'currency_exchange' + 'end' 'heavy_check_mark' 'heavy_division_sign' 'heavy_dollar_sign' + 'heavy_minus_sign' 'heavy_multiplication_x' 'heavy_plus_sign' 'on' + 'registered' 'soon' 'spider' 'telephone_receiver' 'tm' 'top' 'wavy_dash' !default; %emoji-color-inversion { filter: invert(1); diff --git a/app/javascript/styles/mastodon/admin.scss b/app/javascript/styles/mastodon/admin.scss index 674fafbe9..d9e45fb10 100644 --- a/app/javascript/styles/mastodon/admin.scss +++ b/app/javascript/styles/mastodon/admin.scss @@ -1,4 +1,4 @@ -@use "sass:math"; +@use 'sass:math'; $no-columns-breakpoint: 600px; $sidebar-width: 240px; @@ -1131,7 +1131,10 @@ a.name-tag, @for $i from 0 through 10 { &--#{10 * $i} { - background-color: rgba($ui-highlight-color, 1 * (math.div(max(1, $i), 10))); + background-color: rgba( + $ui-highlight-color, + 1 * (math.div(max(1, $i), 10)) + ); } } } @@ -1220,7 +1223,12 @@ a.sparkline { .skeleton { background-color: lighten($ui-base-color, 8%); - background-image: linear-gradient(90deg, lighten($ui-base-color, 8%), lighten($ui-base-color, 12%), lighten($ui-base-color, 8%)); + background-image: linear-gradient( + 90deg, + lighten($ui-base-color, 8%), + lighten($ui-base-color, 12%), + lighten($ui-base-color, 8%) + ); background-size: 200px 100%; background-repeat: no-repeat; border-radius: 4px; @@ -1269,7 +1277,10 @@ a.sparkline { @for $i from 0 through 10 { &--#{10 * $i} { - background-color: rgba($ui-highlight-color, 1 * (math.div(max(1, $i), 10))); + background-color: rgba( + $ui-highlight-color, + 1 * (math.div(max(1, $i), 10)) + ); } } } @@ -1415,7 +1426,7 @@ a.sparkline { &::after { display: block; - content: ""; + content: ''; width: 50px; height: 21px; position: absolute; @@ -1809,7 +1820,7 @@ a.sparkline { &::after { position: absolute; - content: ""; + content: ''; width: 1px; background: $highlight-text-color; bottom: 0; diff --git a/app/javascript/styles/mastodon/basics.scss b/app/javascript/styles/mastodon/basics.scss index 413a1cdd6..1d08b12e5 100644 --- a/app/javascript/styles/mastodon/basics.scss +++ b/app/javascript/styles/mastodon/basics.scss @@ -14,7 +14,7 @@ body { font-weight: 400; color: $primary-text-color; text-rendering: optimizelegibility; - font-feature-settings: "kern"; + font-feature-settings: 'kern'; text-size-adjust: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0%); -webkit-tap-highlight-color: transparent; @@ -31,7 +31,9 @@ body { // Droid Sans => Older Androids (<4.0) // Helvetica Neue => Older macOS <10.11 // $font-sans-serif => web-font (Roboto) fallback and newer Androids (>=4.0) - font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", $font-sans-serif, sans-serif; + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', + Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + $font-sans-serif, sans-serif; } &.app-body { diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 493efea30..11c28dbc1 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -387,7 +387,7 @@ body > [data-popper-placement] { .ellipsis { &::after { - content: "…"; + content: '…'; } } @@ -404,7 +404,7 @@ body > [data-popper-placement] { color: $highlight-text-color; } - input[type="checkbox"] { + input[type='checkbox'] { display: none; } @@ -423,7 +423,9 @@ body > [data-popper-placement] { &.active { border-color: $highlight-text-color; - background: $highlight-text-color url("data:image/svg+xml;utf8,") center center no-repeat; + background: $highlight-text-color + url("data:image/svg+xml;utf8,") + center center no-repeat; } } } @@ -647,7 +649,12 @@ body > [data-popper-placement] { margin: 5px; &__actions { - background: linear-gradient(180deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent); + background: linear-gradient( + 180deg, + rgba($base-shadow-color, 0.8) 0, + rgba($base-shadow-color, 0.35) 80%, + transparent + ); display: flex; align-items: flex-start; justify-content: space-between; @@ -675,7 +682,12 @@ body > [data-popper-placement] { left: 0; right: 0; box-sizing: border-box; - background: linear-gradient(0deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent); + background: linear-gradient( + 0deg, + rgba($base-shadow-color, 0.8) 0, + rgba($base-shadow-color, 0.35) 80%, + transparent + ); } } @@ -1080,8 +1092,13 @@ body > [data-popper-placement] { cursor: auto; @keyframes fade { - 0% { opacity: 0; } - 100% { opacity: 1; } + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } } opacity: 1; @@ -1827,11 +1844,11 @@ a.account__display-name { justify-content: center; flex-direction: column; scrollbar-width: none; /* Firefox */ - -ms-overflow-style: none; /* IE 10+ */ + -ms-overflow-style: none; /* IE 10+ */ * { scrollbar-width: none; /* Firefox */ - -ms-overflow-style: none; /* IE 10+ */ + -ms-overflow-style: none; /* IE 10+ */ } &::-webkit-scrollbar, @@ -2863,7 +2880,9 @@ $ui-header-height: 55px; } .drawer__inner__mastodon { - background: lighten($ui-base-color, 13%) url('data:image/svg+xml;utf8,') no-repeat bottom / 100% auto; + background: lighten($ui-base-color, 13%) + url('data:image/svg+xml;utf8,') + no-repeat bottom / 100% auto; flex: 1; min-height: 47px; display: none; @@ -2918,7 +2937,8 @@ $ui-header-height: 55px; overflow-y: auto; } - @supports (display: grid) { // hack to fix Chrome <57 + @supports (display: grid) { + // hack to fix Chrome <57 contain: strict; } @@ -2939,7 +2959,8 @@ $ui-header-height: 55px; } .scrollable.fullscreen { - @supports (display: grid) { // hack to fix Chrome <57 + @supports (display: grid) { + // hack to fix Chrome <57 contain: none; } } @@ -3043,7 +3064,8 @@ $ui-header-height: 55px; transition: background-color 0.2s ease; } -.react-toggle:is(:hover, :focus-within):not(.react-toggle--disabled) .react-toggle-track { +.react-toggle:is(:hover, :focus-within):not(.react-toggle--disabled) + .react-toggle-track { background-color: darken($ui-base-color, 10%); } @@ -3051,7 +3073,8 @@ $ui-header-height: 55px; background-color: darken($ui-highlight-color, 2%); } -.react-toggle--checked:is(:hover, :focus-within):not(.react-toggle--disabled) .react-toggle-track { +.react-toggle--checked:is(:hover, :focus-within):not(.react-toggle--disabled) + .react-toggle-track { background-color: $ui-highlight-color; } @@ -3646,7 +3669,7 @@ a.status-card.compact:hover { &::before { display: block; - content: ""; + content: ''; position: absolute; bottom: -13px; left: 0; @@ -3656,7 +3679,11 @@ a.status-card.compact:hover { pointer-events: none; height: 28px; z-index: 1; - background: radial-gradient(ellipse, rgba($ui-highlight-color, 0.23) 0%, rgba($ui-highlight-color, 0) 60%); + background: radial-gradient( + ellipse, + rgba($ui-highlight-color, 0.23) 0%, + rgba($ui-highlight-color, 0) 60% + ); } } @@ -4241,7 +4268,8 @@ a.status-card.compact:hover { align-items: center; justify-content: center; - @supports (display: grid) { // hack to fix Chrome <57 + @supports (display: grid) { + // hack to fix Chrome <57 contain: strict; } @@ -5747,7 +5775,9 @@ a.status-card.compact:hover { width: auto; outline: 0; font-family: inherit; - background: $simple-background-color url("data:image/svg+xml;utf8,") no-repeat right 8px center / auto 16px; + background: $simple-background-color + url("data:image/svg+xml;utf8,") + no-repeat right 8px center / auto 16px; border: 1px solid darken($simple-background-color, 14%); border-radius: 4px; padding: 6px 10px; @@ -6154,7 +6184,12 @@ a.status-card.compact:hover { left: 0; right: 0; box-sizing: border-box; - background: linear-gradient(0deg, rgba($base-shadow-color, 0.85) 0, rgba($base-shadow-color, 0.45) 60%, transparent); + 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 0.1s ease; @@ -6295,7 +6330,7 @@ a.status-card.compact:hover { } &::before { - content: ""; + content: ''; width: 50px; background: rgba($white, 0.35); border-radius: 4px; @@ -6365,7 +6400,7 @@ a.status-card.compact:hover { position: relative; &::before { - content: ""; + content: ''; width: 100%; background: rgba($white, 0.35); border-radius: 4px; @@ -6448,7 +6483,11 @@ a.status-card.compact:hover { } .scrollable .account-card__bio::after { - background: linear-gradient(to left, lighten($ui-base-color, 8%), transparent); + background: linear-gradient( + to left, + lighten($ui-base-color, 8%), + transparent + ); } .account-gallery__container { @@ -6509,7 +6548,7 @@ a.status-card.compact:hover { &::before, &::after { display: block; - content: ""; + content: ''; position: absolute; bottom: 0; left: 50%; @@ -6575,8 +6614,8 @@ a.status-card.compact:hover { text-overflow: ellipsis; cursor: pointer; - input[type="radio"], - input[type="checkbox"] { + input[type='radio'], + input[type='checkbox'] { display: none; } @@ -6635,9 +6674,17 @@ noscript { } @keyframes flicker { - 0% { opacity: 1; } - 30% { opacity: 0.75; } - 100% { opacity: 1; } + 0% { + opacity: 1; + } + + 30% { + opacity: 0.75; + } + + 100% { + opacity: 1; + } } @media screen and (max-width: 630px) and (max-height: 400px) { @@ -6658,7 +6705,9 @@ noscript { .navigation-bar { & > a:first-child { will-change: margin-top, margin-left, margin-right, width; - transition: margin-top $duration $delay, margin-left $duration ($duration + $delay), margin-right $duration ($duration + $delay); + transition: margin-top $duration $delay, + margin-left $duration ($duration + $delay), + margin-right $duration ($duration + $delay); } & > .navigation-bar__profile-edit { @@ -6669,15 +6718,12 @@ noscript { .navigation-bar__actions { & > .icon-button.close { will-change: opacity transform; - transition: - opacity $duration * 0.5 $delay, - transform $duration $delay; + transition: opacity $duration * 0.5 $delay, transform $duration $delay; } & > .compose__action-bar .icon-button { will-change: opacity transform; - transition: - opacity $duration * 0.5 $delay + $duration * 0.5, + transition: opacity $duration * 0.5 $delay + $duration * 0.5, transform $duration $delay; } } @@ -7677,7 +7723,11 @@ noscript { &.active { transition: all 100ms ease-in; transition-property: background-color, color; - background-color: mix(lighten($ui-base-color, 12%), $ui-highlight-color, 80%); + background-color: mix( + lighten($ui-base-color, 12%), + $ui-highlight-color, + 80% + ); .reactions-bar__item__count { color: lighten($highlight-text-color, 8%); @@ -7730,7 +7780,7 @@ noscript { &.unread { &::before { - content: ""; + content: ''; position: absolute; top: 0; left: 0; @@ -8258,14 +8308,14 @@ noscript { counter-increment: list-counter; &::before { - content: counter(list-counter) "."; + content: counter(list-counter) '.'; position: absolute; left: 0; } } ul > li::before { - content: ""; + content: ''; position: absolute; background-color: $darker-text-color; border-radius: 50%; diff --git a/app/javascript/styles/mastodon/emoji_picker.scss b/app/javascript/styles/mastodon/emoji_picker.scss index 1042ddda8..0d7a7df2e 100644 --- a/app/javascript/styles/mastodon/emoji_picker.scss +++ b/app/javascript/styles/mastodon/emoji_picker.scss @@ -174,7 +174,7 @@ &:hover::before { z-index: -1; - content: ""; + content: ''; position: absolute; top: 0; left: 0; diff --git a/app/javascript/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.scss index 1841dc8bf..e4539deff 100644 --- a/app/javascript/styles/mastodon/forms.scss +++ b/app/javascript/styles/mastodon/forms.scss @@ -299,7 +299,7 @@ code { max-width: 100%; height: auto; border-radius: 4px; - background: url("images/void.png"); + background: url('images/void.png'); &:last-child { margin-bottom: 0; @@ -384,7 +384,7 @@ code { flex: 1 1 auto; } - input[type="checkbox"] { + input[type='checkbox'] { position: absolute; left: 0; top: 5px; @@ -400,12 +400,12 @@ code { border-radius: 4px; } - input[type="text"], - input[type="number"], - input[type="email"], - input[type="password"], - input[type="url"], - input[type="datetime-local"], + input[type='text'], + input[type='number'], + input[type='email'], + input[type='password'], + input[type='url'], + input[type='datetime-local'], textarea { box-sizing: border-box; font-size: 16px; @@ -443,11 +443,11 @@ code { } } - input[type="text"], - input[type="number"], - input[type="email"], - input[type="password"], - input[type="datetime-local"] { + input[type='text'], + input[type='number'], + input[type='email'], + input[type='password'], + input[type='datetime-local'] { &:focus:invalid:not(:placeholder-shown), &:required:invalid:not(:placeholder-shown) { border-color: lighten($error-red, 12%); @@ -459,11 +459,11 @@ code { color: lighten($error-red, 12%); } - input[type="text"], - input[type="number"], - input[type="email"], - input[type="password"], - input[type="datetime-local"], + input[type='text'], + input[type='number'], + input[type='email'], + input[type='password'], + input[type='datetime-local'], textarea, select { border-color: lighten($error-red, 12%); @@ -567,7 +567,9 @@ code { outline: 0; font-family: inherit; resize: vertical; - background: darken($ui-base-color, 10%) url("data:image/svg+xml;utf8,") no-repeat right 8px center / auto 16px; + background: darken($ui-base-color, 10%) + url("data:image/svg+xml;utf8,") + no-repeat right 8px center / auto 16px; border: 1px solid darken($ui-base-color, 14%); border-radius: 4px; padding-left: 10px; @@ -607,7 +609,11 @@ code { right: 0; bottom: 1px; width: 5px; - background-image: linear-gradient(to right, rgba(darken($ui-base-color, 10%), 0), darken($ui-base-color, 10%)); + background-image: linear-gradient( + to right, + rgba(darken($ui-base-color, 10%), 0), + darken($ui-base-color, 10%) + ); } } } @@ -995,7 +1001,7 @@ code { flex: 1 1 auto; } - input[type="text"] { + input[type='text'] { background: transparent; border: 0; padding: 10px; diff --git a/app/javascript/styles/mastodon/modal.scss b/app/javascript/styles/mastodon/modal.scss index a333926dd..6170877b2 100644 --- a/app/javascript/styles/mastodon/modal.scss +++ b/app/javascript/styles/mastodon/modal.scss @@ -1,5 +1,7 @@ .modal-layout { - background: $ui-base-color url('data:image/svg+xml;utf8,') repeat-x bottom fixed; + background: $ui-base-color + url('data:image/svg+xml;utf8,') + repeat-x bottom fixed; display: flex; flex-direction: column; height: 100vh; diff --git a/app/javascript/styles/mastodon/polls.scss b/app/javascript/styles/mastodon/polls.scss index 03d2cb4b2..b30932e04 100644 --- a/app/javascript/styles/mastodon/polls.scss +++ b/app/javascript/styles/mastodon/polls.scss @@ -64,8 +64,8 @@ max-width: calc(100% - 45px - 25px); } - input[type="radio"], - input[type="checkbox"] { + input[type='radio'], + input[type='checkbox'] { display: none; } @@ -73,7 +73,7 @@ flex: 1 1 auto; } - input[type="text"] { + input[type='text'] { display: block; box-sizing: border-box; width: 100%; @@ -263,7 +263,9 @@ width: auto; outline: 0; font-family: inherit; - background: $simple-background-color url("data:image/svg+xml;utf8,") no-repeat right 8px center / auto 16px; + background: $simple-background-color + url("data:image/svg+xml;utf8,") + no-repeat right 8px center / auto 16px; border: 1px solid darken($simple-background-color, 14%); border-radius: 4px; padding: 6px 10px; diff --git a/app/javascript/styles/mastodon/rtl.scss b/app/javascript/styles/mastodon/rtl.scss index 39f4653bb..e60087dab 100644 --- a/app/javascript/styles/mastodon/rtl.scss +++ b/app/javascript/styles/mastodon/rtl.scss @@ -229,8 +229,8 @@ body.rtl { padding-right: 0; } - .simple_form .check_boxes .checkbox input[type="checkbox"], - .simple_form .input.boolean input[type="checkbox"] { + .simple_form .check_boxes .checkbox input[type='checkbox'], + .simple_form .input.boolean input[type='checkbox'] { left: auto; right: 0; } @@ -268,12 +268,18 @@ body.rtl { &::after { right: auto; left: 0; - background-image: linear-gradient(to left, rgba(darken($ui-base-color, 10%), 0), darken($ui-base-color, 10%)); + background-image: linear-gradient( + to left, + rgba(darken($ui-base-color, 10%), 0), + darken($ui-base-color, 10%) + ); } } .simple_form select { - background: darken($ui-base-color, 10%) url("data:image/svg+xml;utf8,") no-repeat left 8px center / auto 16px; + background: darken($ui-base-color, 10%) + url("data:image/svg+xml;utf8,") + no-repeat left 8px center / auto 16px; } .table th, @@ -320,11 +326,11 @@ body.rtl { } .fa-chevron-left::before { - content: "\F054"; + content: '\F054'; } .fa-chevron-right::before { - content: "\F053"; + content: '\F053'; } .column-back-button__icon { diff --git a/app/javascript/styles/mastodon/statuses.scss b/app/javascript/styles/mastodon/statuses.scss index ce71d11e4..a42f1f42c 100644 --- a/app/javascript/styles/mastodon/statuses.scss +++ b/app/javascript/styles/mastodon/statuses.scss @@ -138,7 +138,7 @@ a.button.logo-button { } .embed { - .status__content[data-spoiler="folded"] { + .status__content[data-spoiler='folded'] { .e-content { display: none; } diff --git a/app/javascript/styles/mastodon/variables.scss b/app/javascript/styles/mastodon/variables.scss index 2f6c41d5f..7de25f8fd 100644 --- a/app/javascript/styles/mastodon/variables.scss +++ b/app/javascript/styles/mastodon/variables.scss @@ -1,18 +1,18 @@ // Commonly used web colors -$black: #000000; // Black -$white: #ffffff; // White -$success-green: #79bd9a !default; // Padua -$error-red: #df405a !default; // Cerise -$warning-red: #ff5050 !default; // Sunset Orange -$gold-star: #ca8f04 !default; // Dark Goldenrod +$black: #000000; // Black +$white: #ffffff; // White +$success-green: #79bd9a !default; // Padua +$error-red: #df405a !default; // Cerise +$warning-red: #ff5050 !default; // Sunset Orange +$gold-star: #ca8f04 !default; // Dark Goldenrod $red-bookmark: $warning-red; // Values from the classic Mastodon UI -$classic-base-color: #282c37; // Midnight Express -$classic-primary-color: #9baec8; // Echo Blue -$classic-secondary-color: #d9e1e8; // Pattens Blue -$classic-highlight-color: #6364ff; // Brand purple +$classic-base-color: #282c37; // Midnight Express +$classic-primary-color: #9baec8; // Echo Blue +$classic-secondary-color: #d9e1e8; // Pattens Blue +$classic-highlight-color: #6364ff; // Brand purple // Variables for defaults in UI $base-shadow-color: $black !default; @@ -23,10 +23,13 @@ $valid-value-color: $success-green !default; $error-value-color: $error-red !default; // Tell UI to use selected colors -$ui-base-color: $classic-base-color !default; // Darkest -$ui-base-lighter-color: lighten($ui-base-color, 26%) !default; // Lighter darkest -$ui-primary-color: $classic-primary-color !default; // Lighter -$ui-secondary-color: $classic-secondary-color !default; // Lightest +$ui-base-color: $classic-base-color !default; // Darkest +$ui-base-lighter-color: lighten( + $ui-base-color, + 26% +) !default; // Lighter darkest +$ui-primary-color: $classic-primary-color !default; // Lighter +$ui-secondary-color: $classic-secondary-color !default; // Lightest $ui-highlight-color: $classic-highlight-color !default; // Variables for texts diff --git a/app/javascript/styles/mastodon/widgets.scss b/app/javascript/styles/mastodon/widgets.scss index 7a25d121b..ef7bfc6de 100644 --- a/app/javascript/styles/mastodon/widgets.scss +++ b/app/javascript/styles/mastodon/widgets.scss @@ -1,4 +1,4 @@ -@use "sass:math"; +@use 'sass:math'; .hero-widget { margin-bottom: 10px; -- cgit