From cc94cc86aec60d3817f40047bc358fce5b1dbc91 Mon Sep 17 00:00:00 2001 From: Claire Date: Sat, 25 Feb 2023 21:20:01 +0100 Subject: [PATCH] Fix glitch-soc SCSS code style and refactor closer to upstream --- .../flavours/glitch/styles/_mixins.scss | 2 +- .../flavours/glitch/styles/accounts.scss | 4 +- .../flavours/glitch/styles/admin.scss | 2 +- .../flavours/glitch/styles/basics.scss | 94 +++++++++++++++++-- .../glitch/styles/components/accounts.scss | 17 ++-- .../glitch/styles/components/columns.scss | 9 +- .../styles/components/compose_form.scss | 31 +++--- .../glitch/styles/components/directory.scss | 1 - .../glitch/styles/components/doodle.scss | 10 +- .../glitch/styles/components/drawer.scss | 2 +- .../glitch/styles/components/index.scss | 6 +- .../styles/components/local_settings.scss | 2 +- .../glitch/styles/components/media.scss | 1 - .../glitch/styles/components/metadata.scss | 0 .../glitch/styles/components/modal.scss | 7 +- .../glitch/styles/components/search.scss | 4 +- .../glitch/styles/components/status.scss | 12 ++- .../flavours/glitch/styles/containers.scss | 3 +- .../flavours/glitch/styles/dashboard.scss | 1 - .../glitch/styles/mastodon-light/diff.scss | 2 +- .../flavours/glitch/styles/polls.scss | 2 - .../flavours/glitch/styles/variables.scss | 2 + 22 files changed, 144 insertions(+), 70 deletions(-) delete mode 100644 app/javascript/flavours/glitch/styles/components/metadata.scss diff --git a/app/javascript/flavours/glitch/styles/_mixins.scss b/app/javascript/flavours/glitch/styles/_mixins.scss index 90f748c51d..b23c4dbb7b 100644 --- a/app/javascript/flavours/glitch/styles/_mixins.scss +++ b/app/javascript/flavours/glitch/styles/_mixins.scss @@ -48,7 +48,7 @@ width: inherit; max-width: none; height: 250px; - border-radius: 0px; + border-radius: 0; } } diff --git a/app/javascript/flavours/glitch/styles/accounts.scss b/app/javascript/flavours/glitch/styles/accounts.scss index 2158a691ff..abe2e8616f 100644 --- a/app/javascript/flavours/glitch/styles/accounts.scss +++ b/app/javascript/flavours/glitch/styles/accounts.scss @@ -60,6 +60,7 @@ width: 48px; height: 48px; @include avatar-size(48px); + padding-top: 2px; img { @@ -68,7 +69,8 @@ display: block; margin: 0; border-radius: 4px; - @include avatar-radius(); + @include avatar-radius; + background: darken($ui-base-color, 8%); object-fit: cover; } diff --git a/app/javascript/flavours/glitch/styles/admin.scss b/app/javascript/flavours/glitch/styles/admin.scss index 2c2c8965eb..240c90735e 100644 --- a/app/javascript/flavours/glitch/styles/admin.scss +++ b/app/javascript/flavours/glitch/styles/admin.scss @@ -1219,7 +1219,7 @@ a.name-tag, path:first-child { fill: rgba($highlight-text-color, 0.25) !important; - fill-opacity: 100% !important; + fill-opacity: 1 !important; } path:last-child { diff --git a/app/javascript/flavours/glitch/styles/basics.scss b/app/javascript/flavours/glitch/styles/basics.scss index 25aa68f7e2..84977eb397 100644 --- a/app/javascript/flavours/glitch/styles/basics.scss +++ b/app/javascript/flavours/glitch/styles/basics.scss @@ -2,6 +2,7 @@ @if type-of($color) == 'color' { $color: str-slice(ie-hex-str($color), 4); } + @return '%23' + unquote($color); } @@ -15,7 +16,7 @@ body { text-rendering: optimizelegibility; font-feature-settings: 'kern'; text-size-adjust: none; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-tap-highlight-color: rgba(0, 0, 0, 0%); -webkit-tap-highlight-color: transparent; &.system-font { @@ -31,8 +32,8 @@ body { // 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; + Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + $font-sans-serif, sans-serif; } &.app-body { @@ -131,12 +132,14 @@ body { vertical-align: middle; margin: 20px; - img { - display: block; - max-width: 470px; - width: 100%; - height: auto; - margin-top: -120px; + &__illustration { + img { + display: block; + max-width: 470px; + width: 100%; + height: auto; + margin-top: -120px; + } } h1 { @@ -159,13 +162,18 @@ button { .app-holder { &, - & > div { + & > div, + & > noscript { display: flex; width: 100%; align-items: center; justify-content: center; outline: 0 !important; } + + & > noscript { + height: 100vh; + } } .layout-single-column .app-holder { @@ -182,6 +190,72 @@ button { } } +.app-holder noscript { + flex-direction: column; + font-size: 16px; + font-weight: 400; + line-height: 1.7; + color: lighten($error-red, 4%); + text-align: center; + + & > div { + max-width: 500px; + } + + p { + margin-bottom: 0.85em; + + &:last-child { + margin-bottom: 0; + } + } + + a { + color: $highlight-text-color; + + &:hover, + &:focus, + &:active { + text-decoration: none; + } + } + + &__footer { + color: $dark-text-color; + font-size: 13px; + + a { + color: $dark-text-color; + } + } + + button { + display: inline; + border: 0; + background: transparent; + color: $dark-text-color; + font: inherit; + padding: 0; + margin: 0; + line-height: inherit; + cursor: pointer; + outline: 0; + transition: color 300ms linear; + text-decoration: underline; + + &:hover, + &:focus, + &:active { + text-decoration: none; + } + + &.copied { + color: $valid-value-color; + transition: none; + } + } +} + .logo-resources { // Not using display: none because of https://bugs.chromium.org/p/chromium/issues/detail?id=258029 visibility: hidden; diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss index 89faaae6ad..b95cffbb41 100644 --- a/app/javascript/flavours/glitch/styles/components/accounts.scss +++ b/app/javascript/flavours/glitch/styles/components/accounts.scss @@ -62,11 +62,11 @@ } .account__avatar { - @include avatar-radius(); + @include avatar-radius; + display: block; position: relative; cursor: pointer; - width: 36px; height: 36px; background-size: 36px 36px; @@ -79,11 +79,13 @@ &-composite { @include avatar-radius; + overflow: hidden; position: relative; & div { @include avatar-radius; + float: left; position: relative; box-sizing: border-box; @@ -104,24 +106,24 @@ } .account__avatar-overlay { - position: relative; @include avatar-size(48px); position: relative; &-base { - @include avatar-radius(); + @include avatar-radius; @include avatar-size(36px); img { @include avatar-radius; + width: 100%; height: 100%; } } &-overlay { - @include avatar-radius(); + @include avatar-radius; @include avatar-size(24px); position: absolute; @@ -131,6 +133,7 @@ img { @include avatar-radius; + width: 100%; height: 100%; } @@ -746,8 +749,6 @@ display: block; box-sizing: border-box; width: calc(100% + 20px); - margin: 0; - margin-top: 5px; color: $secondary-text-color; background: $ui-base-color; padding: 10px; @@ -774,6 +775,7 @@ display: flex; align-items: center; flex-direction: column; + &__message { color: $darker-text-color; padding: 8px 0; @@ -784,6 +786,7 @@ text-align: center; margin-bottom: 16px; } + &__action { display: flex; justify-content: space-between; diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss index 263a9ce785..fd4bb95b5f 100644 --- a/app/javascript/flavours/glitch/styles/components/columns.scss +++ b/app/javascript/flavours/glitch/styles/components/columns.scss @@ -428,6 +428,7 @@ $ui-header-height: 55px; button { @extend .column-header__button; + background: transparent; text-align: center; padding: 10px 5px; @@ -491,6 +492,7 @@ $ui-header-height: 55px; // notif cleaning drawer &.ncd { transition: none; + &.collapsed { max-height: 0; opacity: 0.7; @@ -579,8 +581,8 @@ $ui-header-height: 55px; font-size: inherit; flex: auto; background-color: $ui-base-color; - transition-property: background-color, box-shadow; transition: all 0.2s ease; + transition-property: background-color, box-shadow; &[disabled] { cursor: not-allowed; @@ -771,7 +773,7 @@ $ui-header-height: 55px; .column-select { &__control { - @include search-input(); + @include search-input; &::placeholder { color: lighten($darker-text-color, 4%); @@ -845,7 +847,8 @@ $ui-header-height: 55px; } &__menu { - @include search-popout(); + @include search-popout; + padding: 0; background: $ui-secondary-color; } diff --git a/app/javascript/flavours/glitch/styles/components/compose_form.scss b/app/javascript/flavours/glitch/styles/components/compose_form.scss index 64fbe9e080..aa2cc664ee 100644 --- a/app/javascript/flavours/glitch/styles/components/compose_form.scss +++ b/app/javascript/flavours/glitch/styles/components/compose_form.scss @@ -94,7 +94,6 @@ .compose-form__sensitive-button { padding: 10px; padding-top: 0; - font-size: 14px; font-weight: 500; @@ -155,17 +154,14 @@ .reply-indicator__content { position: relative; - margin: 10px 0; - padding: 0 12px; font-size: 14px; line-height: 20px; - color: $inverted-text-color; word-wrap: break-word; font-weight: 400; - overflow: visible; - white-space: pre-wrap; - padding-top: 5px; overflow: hidden; + padding-top: 5px; + color: $inverted-text-color; + white-space: pre-wrap; p, pre, @@ -355,19 +351,18 @@ } .autosuggest-textarea__suggestions { - display: block; - position: absolute; box-sizing: border-box; - top: 100%; - border-radius: 0 0 4px 4px; - padding: 6px; - width: 100%; - color: $inverted-text-color; - background: $ui-secondary-color; - box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4); - font-size: 14px; - z-index: 99; display: none; + position: absolute; + top: 100%; + width: 100%; + z-index: 99; + box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4); + background: $ui-secondary-color; + border-radius: 0 0 4px 4px; + color: $inverted-text-color; + font-size: 14px; + padding: 6px; } .autosuggest-textarea__suggestions--visible { diff --git a/app/javascript/flavours/glitch/styles/components/directory.scss b/app/javascript/flavours/glitch/styles/components/directory.scss index 4c914f1638..5c763764d8 100644 --- a/app/javascript/flavours/glitch/styles/components/directory.scss +++ b/app/javascript/flavours/glitch/styles/components/directory.scss @@ -37,7 +37,6 @@ display: inline-block; padding: 6px 0; line-height: 18px; - cursor: default; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; diff --git a/app/javascript/flavours/glitch/styles/components/doodle.scss b/app/javascript/flavours/glitch/styles/components/doodle.scss index eddc1a2a81..52c7cd54a0 100644 --- a/app/javascript/flavours/glitch/styles/components/doodle.scss +++ b/app/javascript/flavours/glitch/styles/components/doodle.scss @@ -1,15 +1,17 @@ -$doodleBg: #d9e1e8; +$doodle-background: #d9e1e8; + .doodle-modal { @extend .boost-modal; + width: unset; } .doodle-modal__container { - background: $doodleBg; + background: $doodle-background; text-align: center; line-height: 0; // remove weird gap under canvas canvas { - border: 5px solid $doodleBg; + border: 5px solid $doodle-background; } } @@ -24,7 +26,6 @@ $doodleBg: #d9e1e8; .doodle-toolbar { line-height: 1; - display: flex; flex-direction: column; flex-grow: 0; @@ -42,6 +43,7 @@ $doodleBg: #d9e1e8; input[type='text'] { width: 40px; } + span.val { display: inline-block; text-align: left; diff --git a/app/javascript/flavours/glitch/styles/components/drawer.scss b/app/javascript/flavours/glitch/styles/components/drawer.scss index 2c2f251683..9de5a4435b 100644 --- a/app/javascript/flavours/glitch/styles/components/drawer.scss +++ b/app/javascript/flavours/glitch/styles/components/drawer.scss @@ -98,7 +98,7 @@ } .search-popout { - @include search-popout(); + @include search-popout; } .navigation-bar { diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index c52f395120..dde5e4c745 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -1321,12 +1321,10 @@ button.icon-button.active i.fa-retweet { right: 0; bottom: -1px; padding-left: 15px; // space for the box shadow to be visible - z-index: 999; align-items: center; justify-content: flex-end; cursor: pointer; - display: flex; .wrappy { @@ -1554,7 +1552,7 @@ button.icon-button.active i.fa-retweet { } @keyframes heartbeat { - from { + 0% { transform: scale(1); transform-origin: center center; animation-timing-function: ease-out; @@ -1804,9 +1802,11 @@ noscript { 0% { opacity: 1; } + 30% { opacity: 0.75; } + 100% { opacity: 1; } diff --git a/app/javascript/flavours/glitch/styles/components/local_settings.scss b/app/javascript/flavours/glitch/styles/components/local_settings.scss index cd441a0c03..52516cfb52 100644 --- a/app/javascript/flavours/glitch/styles/components/local_settings.scss +++ b/app/javascript/flavours/glitch/styles/components/local_settings.scss @@ -94,7 +94,7 @@ .glitch.local-settings__page { display: block; flex: auto; - padding: 15px 20px 15px 20px; + padding: 15px 20px; width: 360px; overflow-y: auto; } diff --git a/app/javascript/flavours/glitch/styles/components/media.scss b/app/javascript/flavours/glitch/styles/components/media.scss index 0216daa127..6d6b8bc0e9 100644 --- a/app/javascript/flavours/glitch/styles/components/media.scss +++ b/app/javascript/flavours/glitch/styles/components/media.scss @@ -595,7 +595,6 @@ .player-button { display: inline-block; outline: 0; - flex: 0 0 auto; background: transparent; padding: 5px; diff --git a/app/javascript/flavours/glitch/styles/components/metadata.scss b/app/javascript/flavours/glitch/styles/components/metadata.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/app/javascript/flavours/glitch/styles/components/modal.scss b/app/javascript/flavours/glitch/styles/components/modal.scss index fc9ba3a189..65060f4224 100644 --- a/app/javascript/flavours/glitch/styles/components/modal.scss +++ b/app/javascript/flavours/glitch/styles/components/modal.scss @@ -75,7 +75,6 @@ width: 100%; height: 100%; box-sizing: border-box; - display: none; flex-direction: column; align-items: center; justify-content: center; @@ -99,7 +98,6 @@ height: 100%; box-sizing: border-box; padding: 25px; - display: none; flex-direction: column; align-items: center; justify-content: center; @@ -685,7 +683,6 @@ display: block; box-sizing: border-box; width: 100%; - margin: 0; color: $inverted-text-color; background: $simple-background-color; padding: 10px; @@ -820,7 +817,6 @@ font-family: inherit; font-size: 14px; resize: none; - border: 0; outline: 0; border-radius: 4px; border: 1px solid $ui-secondary-color; @@ -987,7 +983,6 @@ padding-left: 20px; padding-right: 20px; padding-bottom: 10px; - font-size: 14px; label, @@ -1135,7 +1130,7 @@ width: 100%; border: 0; padding: 10px; - font-family: 'mastodon-font-monospace', monospace; + font-family: mastodon-font-monospace, monospace; background: $ui-base-color; color: $primary-text-color; font-size: 14px; diff --git a/app/javascript/flavours/glitch/styles/components/search.scss b/app/javascript/flavours/glitch/styles/components/search.scss index b8078bdb60..a6e98a868f 100644 --- a/app/javascript/flavours/glitch/styles/components/search.scss +++ b/app/javascript/flavours/glitch/styles/components/search.scss @@ -4,7 +4,7 @@ } .search__input { - @include search-input(); + @include search-input; display: block; padding: 15px; @@ -181,7 +181,7 @@ path:first-child { fill: rgba($highlight-text-color, 0.25) !important; - fill-opacity: 100% !important; + fill-opacity: 1 !important; } path:last-child { diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss index 9280ef8365..7f94b25e9f 100644 --- a/app/javascript/flavours/glitch/styles/components/status.scss +++ b/app/javascript/flavours/glitch/styles/components/status.scss @@ -332,6 +332,7 @@ 0% { opacity: 0; } + 100% { opacity: 1; } @@ -417,7 +418,7 @@ text-overflow: ellipsis; padding-top: 0; - &:after { + &::after { content: ''; position: absolute; top: 0; @@ -435,13 +436,15 @@ text-decoration: none; } } - &:focus > .status__content:after { + + &:focus > .status__content::after { background: linear-gradient( rgba(lighten($ui-base-color, 4%), 0), rgba(lighten($ui-base-color, 4%), 1) ); } - &.status-direct > .status__content:after { + + &.status-direct > .status__content::after { background: linear-gradient( rgba(lighten($ui-base-color, 8%), 0), rgba(lighten($ui-base-color, 8%), 1) @@ -458,7 +461,7 @@ } .notification__message { - margin: -10px 0px 10px 0; + margin: -10px 0 10px; } } @@ -1098,7 +1101,6 @@ a.status-card.compact:hover { position: absolute; top: 0; left: 0; - pointer-events: 0; width: 100%; height: 100%; border-left: 4px solid $highlight-text-color; diff --git a/app/javascript/flavours/glitch/styles/containers.scss b/app/javascript/flavours/glitch/styles/containers.scss index a3aee7eef3..b908515460 100644 --- a/app/javascript/flavours/glitch/styles/containers.scss +++ b/app/javascript/flavours/glitch/styles/containers.scss @@ -74,6 +74,7 @@ width: 40px; height: 40px; @include avatar-size(40px); + margin-right: 10px; img { @@ -82,7 +83,7 @@ display: block; margin: 0; border-radius: 4px; - @include avatar-radius(); + @include avatar-radius; } } diff --git a/app/javascript/flavours/glitch/styles/dashboard.scss b/app/javascript/flavours/glitch/styles/dashboard.scss index bb103e9ce0..f25765d1da 100644 --- a/app/javascript/flavours/glitch/styles/dashboard.scss +++ b/app/javascript/flavours/glitch/styles/dashboard.scss @@ -37,7 +37,6 @@ text-align: center; font-weight: 500; font-size: 24px; - line-height: 21px; color: $primary-text-color; margin-bottom: 20px; line-height: 30px; diff --git a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss index a1064ecf4d..ef248bf4fc 100644 --- a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss +++ b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss @@ -759,7 +759,7 @@ html { } } -.status.collapsed .status__content:after { +.status.collapsed .status__content::after { background: linear-gradient( rgba(darken($ui-base-color, 13%), 0), rgba(darken($ui-base-color, 13%), 1) diff --git a/app/javascript/flavours/glitch/styles/polls.scss b/app/javascript/flavours/glitch/styles/polls.scss index 5b40aaebee..a4ce14a094 100644 --- a/app/javascript/flavours/glitch/styles/polls.scss +++ b/app/javascript/flavours/glitch/styles/polls.scss @@ -85,7 +85,6 @@ width: 100%; font-size: 14px; color: $inverted-text-color; - display: block; outline: 0; font-family: inherit; background: $simple-background-color; @@ -116,7 +115,6 @@ box-sizing: border-box; width: 18px; height: 18px; - flex: 0 0 auto; margin-inline-end: 10px; top: -1px; border-radius: 50%; diff --git a/app/javascript/flavours/glitch/styles/variables.scss b/app/javascript/flavours/glitch/styles/variables.scss index 25658bb0c8..0132da51f3 100644 --- a/app/javascript/flavours/glitch/styles/variables.scss +++ b/app/javascript/flavours/glitch/styles/variables.scss @@ -41,6 +41,7 @@ $highlight-text-color: lighten($ui-highlight-color, 8%) !default; $action-button-color: $ui-base-lighter-color !default; $passive-text-color: $gold-star !default; $active-passive-text-color: $success-green !default; + // For texts on inverted backgrounds $inverted-text-color: $ui-base-color !default; $lighter-text-color: $ui-base-lighter-color !default; @@ -51,6 +52,7 @@ $cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW; // Variables for components $media-modal-media-max-width: 100%; + // put margins on top and bottom of image to avoid the screen covered by image. $media-modal-media-max-height: 80%;