From 486f91327dd031d7249e93743d8a9e51f6bbc7f4 Mon Sep 17 00:00:00 2001 From: root Date: Mon, 14 Aug 2023 10:43:30 -0400 Subject: [PATCH] fix Modern theme when split into separtate flavour --- .../flavours/glitch/styles/modern/diff.css | 109 ++++++++++-------- .../flavours/glitch/styles/modern/modern.css | 2 +- yarn.lock | 17 ++- 3 files changed, 77 insertions(+), 51 deletions(-) diff --git a/app/javascript/flavours/glitch/styles/modern/diff.css b/app/javascript/flavours/glitch/styles/modern/diff.css index beba934421..f7804d0efa 100644 --- a/app/javascript/flavours/glitch/styles/modern/diff.css +++ b/app/javascript/flavours/glitch/styles/modern/diff.css @@ -1,26 +1,26 @@ -body.app-body.flavour-glitch +body.app-body.flavour-modern-glitch > #mastodon .compose-form__autosuggest-wrapper > :last-child { padding-bottom: 2em !important; } -body.app-body.flavour-glitch > #mastodon .compose-form__buttons { +body.app-body.flavour-modern-glitch > #mastodon .compose-form__buttons { width: 100%; } -body.app-body.flavour-glitch +body.app-body.flavour-modern-glitch > #mastodon .compose-form__buttons > div:last-child { margin-inline-start: auto; } -body.app-body.flavour-glitch > #mastodon .compose-form__buttons-wrapper { +body.app-body.flavour-modern-glitch > #mastodon .compose-form__buttons-wrapper { position: relative; } -body.app-body.flavour-glitch > #mastodon .character-counter__wrapper { +body.app-body.flavour-modern-glitch > #mastodon .character-counter__wrapper { position: absolute; inset-inline-end: 0; bottom: 100%; @@ -29,17 +29,20 @@ body.app-body.flavour-glitch > #mastodon .character-counter__wrapper { padding: 0.1em 0.5em; } -body.app-body.flavour-glitch > #mastodon .character-counter__wrapper span { +body.app-body.flavour-modern-glitch + > #mastodon + .character-counter__wrapper + span { font-size: 0.9em; font-weight: 500; } -body.app-body.flavour-glitch > #mastodon .collapsed .status__content { +body.app-body.flavour-modern-glitch > #mastodon .collapsed .status__content { height: auto !important; overflow: visible; } -body.app-body.flavour-glitch +body.app-body.flavour-modern-glitch > #mastodon .collapsed .status__content @@ -49,7 +52,7 @@ body.app-body.flavour-glitch max-height: 100px; } -body.app-body.flavour-glitch +body.app-body.flavour-modern-glitch > #mastodon .collapsed .status__content @@ -57,15 +60,18 @@ body.app-body.flavour-glitch margin-bottom: 0.4em; } -body.app-body.flavour-glitch > #mastodon .collapsed .status__content br { +body.app-body.flavour-modern-glitch > #mastodon .collapsed .status__content br { display: block; } -body.app-body.flavour-glitch > #mastodon .collapsed .status__content::after { +body.app-body.flavour-modern-glitch + > #mastodon + .collapsed + .status__content::after { content: unset; } -body.app-body.flavour-glitch +body.app-body.flavour-modern-glitch > #mastodon .collapsed.muted .status__content__text @@ -73,12 +79,12 @@ body.app-body.flavour-glitch display: none; } -body.app-body.flavour-glitch > #mastodon .status > .status__content { +body.app-body.flavour-modern-glitch > #mastodon .status > .status__content { margin-block: -90px -100px !important; padding-block: 100px !important; } -body.app-body.flavour-glitch +body.app-body.flavour-modern-glitch > #mastodon .status > .status__content @@ -86,7 +92,7 @@ body.app-body.flavour-glitch margin-top: 0; } -body.app-body.flavour-glitch +body.app-body.flavour-modern-glitch > #mastodon .status > .status__content @@ -94,59 +100,62 @@ body.app-body.flavour-glitch margin-bottom: 5px !important; } -body.app-body.flavour-glitch > #mastodon .status .full-width { +body.app-body.flavour-modern-glitch > #mastodon .status .full-width { margin-inline: 0 !important; } -body.app-body.flavour-glitch > #mastodon .status .status__action-bar { +body.app-body.flavour-modern-glitch > #mastodon .status .status__action-bar { position: static; } -body.app-body.flavour-glitch > #mastodon .status__info .notification__message { +body.app-body.flavour-modern-glitch + > #mastodon + .status__info + .notification__message { padding-top: 0 !important; padding-inline-start: 0 !important; } -body.app-body.flavour-glitch > #mastodon .status__display-name { +body.app-body.flavour-modern-glitch > #mastodon .status__display-name { line-height: 22px; } -body.app-body.flavour-glitch > #mastodon .display-name__account { +body.app-body.flavour-modern-glitch > #mastodon .display-name__account { font-size: 15px; } -body.app-body.flavour-glitch +body.app-body.flavour-modern-glitch > #mastodon .media-gallery__item > .media-gallery__preview { display: unset; } -body.app-body.flavour-glitch > #mastodon .status__action-bar-spacer { +body.app-body.flavour-modern-glitch > #mastodon .status__action-bar-spacer { min-width: 5px; } -body.app-body.flavour-glitch > #mastodon .status__relative-time { +body.app-body.flavour-modern-glitch > #mastodon .status__relative-time { margin-inline: 5px !important; z-index: 2; flex-grow: 0 !important; } -body.app-body.flavour-glitch > #mastodon .reactions-bar { +body.app-body.flavour-modern-glitch > #mastodon .reactions-bar { width: unset; margin-top: 8px; } -body.app-body.flavour-glitch > #mastodon .reactions-bar button { +body.app-body.flavour-modern-glitch > #mastodon .reactions-bar button { border-radius: 6px !important; padding-block: 2px; } @media (pointer: coarse) { - body.app-body.flavour-glitch > #mastodon .reactions-bar button { + body.app-body.flavour-modern-glitch > #mastodon .reactions-bar button { padding: 4px 8px !important; } - body.app-body.flavour-glitch + body.app-body.flavour-modern-glitch > #mastodon .reactions-bar button @@ -156,11 +165,11 @@ body.app-body.flavour-glitch > #mastodon .reactions-bar button { } } -body.app-body.flavour-glitch > #mastodon .reactions-bar:empty { +body.app-body.flavour-modern-glitch > #mastodon .reactions-bar:empty { display: none; } -body.app-body.flavour-glitch +body.app-body.flavour-modern-glitch > #mastodon .collapsed > .status__info @@ -168,7 +177,7 @@ body.app-body.flavour-glitch padding-bottom: 0 !important; } -body.app-body.flavour-glitch +body.app-body.flavour-modern-glitch > #mastodon .notification > .notification__message { @@ -176,16 +185,18 @@ body.app-body.flavour-glitch padding-top: 18px !important; } -body.app-body.flavour-glitch > #mastodon .notification .account { +body.app-body.flavour-modern-glitch > #mastodon .notification .account { padding-inline-start: 0 !important; } -body.app-body.flavour-glitch > #mastodon .notification__favourite-icon-wrapper { +body.app-body.flavour-modern-glitch + > #mastodon + .notification__favourite-icon-wrapper { position: static; margin-inline-end: 10px; } -body.app-body.flavour-glitch +body.app-body.flavour-modern-glitch > #mastodon .notification__favourite-icon-wrapper i { @@ -193,18 +204,21 @@ body.app-body.flavour-glitch text-align: center; } -body.app-body.flavour-glitch > #mastodon .status__prepend, -body.app-body.flavour-glitch > #mastodon .status__info .notification__message { +body.app-body.flavour-modern-glitch > #mastodon .status__prepend, +body.app-body.flavour-modern-glitch + > #mastodon + .status__info + .notification__message { padding-bottom: 15px !important; padding-top: 0 !important; margin-top: -5px !important; } -body.app-body.flavour-glitch +body.app-body.flavour-modern-glitch > #mastodon .status__prepend .status__prepend-icon-wrapper, -body.app-body.flavour-glitch +body.app-body.flavour-modern-glitch > #mastodon .status__info .notification__message @@ -214,12 +228,12 @@ body.app-body.flavour-glitch display: flex; } -body.app-body.flavour-glitch +body.app-body.flavour-modern-glitch > #mastodon .status__prepend .status__prepend-icon-wrapper i, -body.app-body.flavour-glitch +body.app-body.flavour-modern-glitch > #mastodon .status__info .notification__message @@ -228,34 +242,37 @@ body.app-body.flavour-glitch margin: auto; } -body.app-body.flavour-glitch +body.app-body.flavour-modern-glitch > #mastodon .detailed-status__wrapper .focusable:not(.status)::before { content: unset !important; } -body.app-body.flavour-glitch > #mastodon .setting-text { +body.app-body.flavour-modern-glitch > #mastodon .setting-text { border-radius: 0 !important; margin: 4px; width: calc(100% - 8px); } -body.app-body.flavour-glitch > #mastodon .column-settings__pillbar { +body.app-body.flavour-modern-glitch > #mastodon .column-settings__pillbar { border-radius: var(--radius); } -body.app-body.flavour-glitch > #mastodon .pillbar-button { +body.app-body.flavour-modern-glitch > #mastodon .pillbar-button { border-radius: 0 !important; padding: 6px; } -body.app-body.flavour-glitch > #mastodon .account-card .media-modal__close { +body.app-body.flavour-modern-glitch + > #mastodon + .account-card + .media-modal__close { left: 10px; top: 10px; } -body.app-body.flavour-glitch +body.app-body.flavour-modern-glitch > #mastodon .account-card .media-modal__close::before { @@ -268,7 +285,7 @@ body.app-body.flavour-glitch opacity: 0.5; } -.layout-multiple-columns.flavour-glitch .drawer__inner { +.layout-multiple-columns.flavour-modern-glitch .drawer__inner { margin-top: -10px; padding-top: 30px !important; } diff --git a/app/javascript/flavours/glitch/styles/modern/modern.css b/app/javascript/flavours/glitch/styles/modern/modern.css index 13811f8dd5..5ecda7e977 100644 --- a/app/javascript/flavours/glitch/styles/modern/modern.css +++ b/app/javascript/flavours/glitch/styles/modern/modern.css @@ -844,7 +844,7 @@ a:focus-visible, flex-direction: column; background: inherit; } -body:not(.flavour-glitch) +body:not(.flavour-modern-glitch) #mastodon .account-timeline__header .account__header__bar { diff --git a/yarn.lock b/yarn.lock index 035717588e..2f87cf5884 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10707,9 +10707,9 @@ postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.17, postcss@^7.0.2 source-map "^0.6.1" postcss@^8.2.15, postcss@^8.4.24: - version "8.4.26" - resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.26.tgz#1bc62ab19f8e1e5463d98cf74af39702a00a9e94" - integrity sha512-jrXHFF8iTloAenySjM/ob3gSj7pCu0Ji49hnjqzsgSRa50hkWCKD0HQ+gMNJkW38jBI68MpAAg7ZWwHwX8NMMw== + version "8.4.27" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.27.tgz#234d7e4b72e34ba5a92c29636734349e0d9c3057" + integrity sha512-gY/ACJtJPSmUFPDCHtX78+01fHa64FaU4zaaWfuh1MhGJISufJAH4cun6k/8fwsHYeK4UQmENQK+tRLCFJE8JQ== dependencies: nanoid "^3.3.6" picocolors "^1.0.0" @@ -11776,7 +11776,7 @@ sass-loader@^10.2.0: schema-utils "^3.0.0" semver "^7.3.2" -sass@^1.38.0, sass@^1.62.1: +sass@^1.38.0: version "1.63.6" resolved "https://registry.yarnpkg.com/sass/-/sass-1.63.6.tgz#481610e612902e0c31c46b46cf2dad66943283ea" integrity sha512-MJuxGMHzaOW7ipp+1KdELtqKbfAWbH7OLIdoSMnVe3EXPMTmxTmlaZDCTsgIpPCs3w99lLo9/zDKkOrJuT5byw== @@ -11785,6 +11785,15 @@ sass@^1.38.0, sass@^1.62.1: immutable "^4.0.0" source-map-js ">=0.6.2 <2.0.0" +sass@^1.62.1: + version "1.64.1" + resolved "https://registry.yarnpkg.com/sass/-/sass-1.64.1.tgz#6a46f6d68e0fa5ad90aa59ce025673ddaa8441cf" + integrity sha512-16rRACSOFEE8VN7SCgBu1MpYCyN7urj9At898tyzdXFhC+a+yOX5dXwAR7L8/IdPJ1NB8OYoXmD55DM30B2kEQ== + dependencies: + chokidar ">=3.0.0 <4.0.0" + immutable "^4.0.0" + source-map-js ">=0.6.2 <2.0.0" + sax@~1.2.4: version "1.2.4" resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"