diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss index 8aad041a6..05600c790 100644 --- a/src/components/emoji_picker/emoji_picker.scss +++ b/src/components/emoji_picker/emoji_picker.scss @@ -152,7 +152,13 @@ transition: mask-size 150ms; mask-size: 100% 20px, 100% 20px, auto; // Autoprefixed seem to ignore this one, and also syntax is different + /* stylelint-disable mask-composite */ + /* stylelint-disable declaration-property-value-no-unknown */ + + /* TODO check if this is still needed */ mask-composite: xor; + /* stylelint-enable declaration-property-value-no-unknown */ + /* stylelint-enable mask-composite */ mask-composite: exclude; &.scrolled { diff --git a/src/components/notification/notification.scss b/src/components/notification/notification.scss index d46b25bed..a0338856f 100644 --- a/src/components/notification/notification.scss +++ b/src/components/notification/notification.scss @@ -3,7 +3,7 @@ border-bottom: 1px solid; border-color: var(--border); word-wrap: break-word; - word-break: break-word; + word-break: break-all; &.Status { /* stylelint-disable-next-line declaration-no-important */ diff --git a/src/components/poll/poll.scss b/src/components/poll/poll.scss index d56358420..d043eefa6 100644 --- a/src/components/poll/poll.scss +++ b/src/components/poll/poll.scss @@ -26,7 +26,7 @@ align-items: center; padding: 0.1em 0.25em; z-index: 1; - word-break: break-word; + word-break: break-all; } .result-percentage { diff --git a/src/components/popover/popover.scss b/src/components/popover/popover.scss index a3b6471e7..828b81cd1 100644 --- a/src/components/popover/popover.scss +++ b/src/components/popover/popover.scss @@ -16,7 +16,6 @@ content: ""; position: absolute; inset: -1px; - z-index: -1px; box-shadow: var(--_shadow); pointer-events: none; } diff --git a/src/components/settings_modal/admin_tabs/frontends_tab.scss b/src/components/settings_modal/admin_tabs/frontends_tab.scss index e99d23c32..3bc347087 100644 --- a/src/components/settings_modal/admin_tabs/frontends_tab.scss +++ b/src/components/settings_modal/admin_tabs/frontends_tab.scss @@ -18,7 +18,6 @@ dd { text-overflow: ellipsis; - word-wrap: nowrap; white-space: nowrap; overflow-x: hidden; max-width: 10em; diff --git a/src/components/settings_modal/settings_modal.scss b/src/components/settings_modal/settings_modal.scss index cf6eeb3d4..2c975917f 100644 --- a/src/components/settings_modal/settings_modal.scss +++ b/src/components/settings_modal/settings_modal.scss @@ -84,7 +84,7 @@ > li { margin: 1em 0; line-height: 1.5em; - vertical-align: center; + vertical-align: middle; } &.two-column { diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.scss b/src/components/settings_modal/tabs/style_tab/style_tab.scss index 6a86a3e08..545f6b117 100644 --- a/src/components/settings_modal/tabs/style_tab/style_tab.scss +++ b/src/components/settings_modal/tabs/style_tab/style_tab.scss @@ -187,7 +187,7 @@ .state-selector, .variant-selector { display: grid; - grid-template-columns: 1fr minmax(1fr, 10em); + grid-template-columns: 1fr minmax(10em, 1fr); grid-template-rows: auto; grid-auto-flow: column; grid-gap: 0.5em; diff --git a/src/components/status/status.scss b/src/components/status/status.scss index c8a43b196..b6a7256a7 100644 --- a/src/components/status/status.scss +++ b/src/components/status/status.scss @@ -2,7 +2,7 @@ min-width: 0; white-space: normal; word-wrap: break-word; - word-break: break-word; + word-break: break-all; &:hover { --_still-image-img-visibility: visible; diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss index 12865126d..56e1d7b9f 100644 --- a/src/components/status_body/status_body.scss +++ b/src/components/status_body/status_body.scss @@ -15,7 +15,7 @@ white-space: pre-wrap; overflow-wrap: break-word; word-wrap: break-word; - word-break: break-word; + word-break: break-all; line-height: var(--post-line-height); } @@ -70,7 +70,13 @@ linear-gradient(to top, white, white); /* Autoprefixed seem to ignore this one, and also syntax is different */ + /* stylelint-disable mask-composite */ + /* stylelint-disable declaration-property-value-no-unknown */ + + /* TODO check if this is still needed */ mask-composite: xor; + /* stylelint-enable declaration-property-value-no-unknown */ + /* stylelint-enable mask-composite */ mask-composite: exclude; } } @@ -109,7 +115,7 @@ } &.-compact { - align-items: top; + align-items: start; flex-direction: row; --emoji-size: calc(var(--emojiSize, 32px) / 2); @@ -130,7 +136,13 @@ mask-image: linear-gradient(to bottom, white 2em, transparent 3em); /* Autoprefixed seem to ignore this one, and also syntax is different */ + /* stylelint-disable mask-composite */ + /* stylelint-disable declaration-property-value-no-unknown */ + + /* TODO check if this is still needed */ mask-composite: xor; + /* stylelint-enable declaration-property-value-no-unknown */ + /* stylelint-enable mask-composite */ mask-composite: exclude; } diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss index dbd04f843..60413c5f4 100644 --- a/src/components/tab_switcher/tab_switcher.scss +++ b/src/components/tab_switcher/tab_switcher.scss @@ -43,7 +43,7 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding-bottom: 99px; - margin-bottom: 6px - 99px; + margin-bottom: calc(6px - 99px); } } diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss index 5cf0bfce0..d263be1c0 100644 --- a/src/components/user_card/user_card.scss +++ b/src/components/user_card/user_card.scss @@ -26,7 +26,13 @@ linear-gradient(to top, white, transparent) bottom no-repeat, linear-gradient(to top, white, white); // Autoprefixer seem to ignore this one, and also syntax is different + /* stylelint-disable mask-composite */ + /* stylelint-disable declaration-property-value-no-unknown */ + + /* TODO check if this is still needed */ mask-composite: xor; + /* stylelint-enable declaration-property-value-no-unknown */ + /* stylelint-enable mask-composite */ mask-composite: exclude; background-size: cover; mask-size: 100% 60%; @@ -155,7 +161,7 @@ } .bottom-line { - font-weight: light; + font-weight: lighter; font-size: 1.1em; align-items: baseline;