diff --git a/src/App.scss b/src/App.scss index 521be05c6..704d51cea 100644 --- a/src/App.scss +++ b/src/App.scss @@ -34,8 +34,7 @@ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overscroll-behavior-y: none; - overflow-x: clip; - overflow-y: scroll; + overflow: clip scroll; &.hidden { display: none; @@ -224,9 +223,8 @@ nav { grid-template-rows: 1fr; box-sizing: border-box; margin: 0 auto; - align-content: flex-start; + place-content: flex-start center; flex-wrap: wrap; - justify-content: center; min-height: 100vh; overflow-x: clip; @@ -262,8 +260,7 @@ nav { position: sticky; top: var(--navbar-height); max-height: calc(100vh - var(--navbar-height)); - overflow-y: auto; - overflow-x: hidden; + overflow: hidden auto; margin-left: calc(var(--___paddingIncrease) * -1); padding-left: calc(var(--___paddingIncrease) + var(--___columnMargin) / 2); @@ -832,7 +829,7 @@ option { .login-hint { text-align: center; - @media all and (min-width: 801px) { + @media all and (width >= 801px) { display: none; } @@ -854,7 +851,7 @@ option { flex: 1; } -@media all and (max-width: 800px) { +@media all and (width <= 800px) { .mobile-hidden { display: none; } diff --git a/src/components/chat_message/chat_message.scss b/src/components/chat_message/chat_message.scss index f7254ea35..c058f8172 100644 --- a/src/components/chat_message/chat_message.scss +++ b/src/components/chat_message/chat_message.scss @@ -107,8 +107,7 @@ .outgoing { display: flex; flex-flow: row wrap; - align-content: end; - justify-content: flex-end; + place-content: end flex-end; .chat-message-inner { align-items: flex-end; diff --git a/src/components/desktop_nav/desktop_nav.scss b/src/components/desktop_nav/desktop_nav.scss index 0c094ce28..35a57d9fe 100644 --- a/src/components/desktop_nav/desktop_nav.scss +++ b/src/components/desktop_nav/desktop_nav.scss @@ -59,7 +59,7 @@ transition-timing-function: ease-out; transition-duration: 100ms; - @media all and (min-width: 800px) { + @media all and (width >= 800px) { /* stylelint-disable-next-line declaration-no-important */ opacity: 1 !important; } @@ -70,10 +70,7 @@ mask-size: contain; background-color: var(--text); position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; + inset: 0; } img { diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss index 0c9a66008..8aad041a6 100644 --- a/src/components/emoji_picker/emoji_picker.scss +++ b/src/components/emoji_picker/emoji_picker.scss @@ -64,8 +64,7 @@ flex-grow: 1; display: flex; flex-flow: row nowrap; - overflow-x: auto; - overflow-y: hidden; + overflow: auto hidden; } .additional-tabs { @@ -197,8 +196,7 @@ &-group { display: grid; grid-template-columns: repeat(var(--__amount), 1fr); - align-items: center; - justify-items: center; + place-items: center center; justify-content: center; grid-template-rows: repeat(1, auto); diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss index cfc1f3d67..e52c25e40 100644 --- a/src/components/notifications/notifications.scss +++ b/src/components/notifications/notifications.scss @@ -13,10 +13,7 @@ .notification-overlay { position: absolute; - top: 0; - right: 0; - left: 0; - bottom: 0; + inset: 0; pointer-events: none; } diff --git a/src/components/popover/popover.scss b/src/components/popover/popover.scss index de1eda866..a3b6471e7 100644 --- a/src/components/popover/popover.scss +++ b/src/components/popover/popover.scss @@ -15,10 +15,7 @@ &::after { content: ""; position: absolute; - top: -1px; - bottom: -1px; - left: -1px; - right: -1px; + inset: -1px; z-index: -1px; box-shadow: var(--_shadow); pointer-events: none; diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.scss b/src/components/settings_modal/admin_tabs/emoji_tab.scss index 3e77e0195..eefada63a 100644 --- a/src/components/settings_modal/admin_tabs/emoji_tab.scss +++ b/src/components/settings_modal/admin_tabs/emoji_tab.scss @@ -29,7 +29,7 @@ .emoji-list { display: flex; flex-wrap: wrap; - gap: 1em 1em; + gap: 1em; } } diff --git a/src/components/settings_modal/admin_tabs/frontends_tab.scss b/src/components/settings_modal/admin_tabs/frontends_tab.scss index 420d20b35..e99d23c32 100644 --- a/src/components/settings_modal/admin_tabs/frontends_tab.scss +++ b/src/components/settings_modal/admin_tabs/frontends_tab.scss @@ -13,10 +13,7 @@ // fix buttons showing through z-index: 2; opacity: 0.9; - top: 0; - bottom: 0; - left: 0; - right: 0; + inset: 0; } dd { diff --git a/src/components/settings_modal/settings_modal.scss b/src/components/settings_modal/settings_modal.scss index bd0ed4524..cf6eeb3d4 100644 --- a/src/components/settings_modal/settings_modal.scss +++ b/src/components/settings_modal/settings_modal.scss @@ -46,7 +46,7 @@ max-width: 90vw; height: 90vh; - @media all and (max-width: 800px) { + @media all and (width <= 800px) { max-width: 100vw; height: 100%; } @@ -105,7 +105,7 @@ */ transform: translateY(calc(((100vh - 100%) / 2 + 100%) - 50px)); - @media all and (max-width: 800px) { + @media all and (width <= 800px) { /* For mobile, the modal takes 100% of the available screen. This ensures the minimized modal is always 50px above the browser bottom bar regardless of whether or not it is visible. diff --git a/src/components/settings_modal/tabs/appearance_tab.scss b/src/components/settings_modal/tabs/appearance_tab.scss index eff5438a7..ae8691f16 100644 --- a/src/components/settings_modal/tabs/appearance_tab.scss +++ b/src/components/settings_modal/tabs/appearance_tab.scss @@ -26,8 +26,7 @@ .palettes-container { height: 15em; - overflow-y: auto; - overflow-x: hidden; + overflow: hidden auto; scrollbar-gutter: stable; border-radius: var(--roundness); border: 1px solid var(--border); @@ -112,8 +111,7 @@ flex-wrap: wrap; margin: -0.5em 0; height: 25em; - overflow-x: hidden; - overflow-y: auto; + overflow: hidden auto; scrollbar-gutter: stable; border-radius: var(--roundness); border: 1px solid var(--border); diff --git a/src/components/shadow_control/shadow_control.scss b/src/components/shadow_control/shadow_control.scss index 7e998cdf7..d169ea234 100644 --- a/src/components/shadow_control/shadow_control.scss +++ b/src/components/shadow_control/shadow_control.scss @@ -112,8 +112,7 @@ grid-area: preview; min-width: 25em; margin-left: 0.125em; - align-self: start; - justify-self: center; + place-self: start center; } } diff --git a/src/components/status/status.scss b/src/components/status/status.scss index 495809660..c8a43b196 100644 --- a/src/components/status/status.scss +++ b/src/components/status/status.scss @@ -364,7 +364,7 @@ } } - @media all and (max-width: 800px) { + @media all and (width <= 800px) { .repeater-avatar { margin-left: 20px; } diff --git a/src/components/status_action_buttons/action_button.vue b/src/components/status_action_buttons/action_button.vue index 79082052a..ad2d349c6 100644 --- a/src/components/status_action_buttons/action_button.vue +++ b/src/components/status_action_buttons/action_button.vue @@ -12,7 +12,7 @@ :title="$t(button.label(funcArg))" target="_blank" :tabindex="0" - :disabled="this.button.interactive ? !this.button.interactive(this.funcArg) : false" + :disabled="button.interactive ? !button.interactive(funcArg) : false" :href="getComponent(button) == 'a' ? button.link?.(funcArg) || remoteInteractionLink : undefined" @click="doActionWrap(button, outerClose)" > diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss index cc66dc5a7..12865126d 100644 --- a/src/components/status_body/status_body.scss +++ b/src/components/status_body/status_body.scss @@ -60,8 +60,7 @@ &.-tall-status { position: relative; height: 220px; - overflow-x: hidden; - overflow-y: hidden; + overflow: hidden; z-index: 1; .media-body { diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss index b78cb7329..dbd04f843 100644 --- a/src/components/tab_switcher/tab_switcher.scss +++ b/src/components/tab_switcher/tab_switcher.scss @@ -12,8 +12,7 @@ > .tabs { width: 100%; - overflow-y: hidden; - overflow-x: auto; + overflow: auto hidden; padding-top: 5px; flex-direction: row; flex: 0 0 auto; @@ -56,7 +55,7 @@ &.side-tabs { flex-direction: row; - @media all and (max-width: 800px) { + @media all and (width <= 800px) { overflow-x: auto; } @@ -66,8 +65,7 @@ > .tabs { flex: 0 0 auto; - overflow-y: auto; - overflow-x: hidden; + overflow: hidden auto; flex-direction: column; &::after, @@ -92,7 +90,7 @@ display: flex; flex-direction: column; - @media all and (max-width: 800px) { + @media all and (width <= 800px) { min-width: 4em; } @@ -133,7 +131,7 @@ margin-left: 1.5em; } - @media all and (max-width: 800px) { + @media all and (width <= 800px) { padding-left: 0.25em; padding-right: calc(0.25em + 200px); margin-right: calc(0.25em - 200px); @@ -244,7 +242,7 @@ margin-bottom: 0.25em; border-bottom: 1px solid var(--border); - @media all and (min-width: 800px) { + @media all and (width >= 800px) { display: none; } } diff --git a/src/components/update_notification/update_notification.scss b/src/components/update_notification/update_notification.scss index fb2edaa4a..23ca3ba2e 100644 --- a/src/components/update_notification/update_notification.scss +++ b/src/components/update_notification/update_notification.scss @@ -18,7 +18,7 @@ padding-left: 1em; } - @media all and (max-width: 800px) { + @media all and (width <= 800px) { /* For mobile, the modal takes 100% of the available screen. This ensures the minimized modal is always 50px above the browser bottom bar regardless of whether or not it is visible. @@ -26,7 +26,7 @@ width: 100vw; } - @media all and (max-height: 600px) { + @media all and (height <= 600px) { display: none; } diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss index 843f46e4c..5cf0bfce0 100644 --- a/src/components/user_card/user_card.scss +++ b/src/components/user_card/user_card.scss @@ -21,10 +21,7 @@ .background-image { position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; + inset: 0; mask: linear-gradient(to top, white, transparent) bottom no-repeat, linear-gradient(to top, white, white); @@ -125,10 +122,7 @@ &.-overlay { position: absolute; - left: 0; - top: 0; - right: 0; - bottom: 0; + inset: 0; background-color: rgb(0 0 0 / 30%); display: flex; justify-content: center; diff --git a/src/panel.scss b/src/panel.scss index ecc39f43a..8d9c2896b 100644 --- a/src/panel.scss +++ b/src/panel.scss @@ -25,10 +25,7 @@ &::after { content: ""; position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; + inset: 0; z-index: 5; box-shadow: var(--_shadow); pointer-events: none; @@ -107,10 +104,7 @@ &::before { content: ""; position: absolute; - top: 0; - bottom: 0; - right: 0; - left: 0; + inset: 0; pointer-events: none; }