hj/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge branch 'renovate/stylelint-config-recommended-scss-14.x' into 'develop'

Browse source 
Update dependency stylelint-config-recommended-scss to v14

See merge request pleroma/pleroma-fe!2122
This commit is contained in:
HJ 2025-04-02 10:16:53 +00:00
commit 20d016ed74
43 changed files with 322 additions and 567 deletions
Download patch file Download diff file Expand all files Collapse all files

10
.stylelintrc.json
View file

@ -1,6 +1,5 @@
{ {
"extends": [ "extends": [
"stylelint-rscss/config",
"stylelint-config-standard", "stylelint-config-standard",
"stylelint-config-recommended-scss", "stylelint-config-recommended-scss",
"stylelint-config-html", "stylelint-config-html",
@ -8,15 +7,6 @@
], ],
"rules": { "rules": {
"declaration-no-important": true, "declaration-no-important": true,
"rscss/no-descendant-combinator": false,
"rscss/class-format": [
false,
{
"component": "pascal-case",
"variant": "^-[a-z]\\w+",
"element": "^[a-z]\\w+"
}
],
"selector-class-pattern": null, "selector-class-pattern": null,
"import-notation": null, "import-notation": null,
"custom-property-pattern": null, "custom-property-pattern": null,

10
package.json
View file

@ -101,12 +101,12 @@
"shelljs": "0.9.2", "shelljs": "0.9.2",
"sinon": "20.0.0", "sinon": "20.0.0",
"sinon-chai": "4.0.0", "sinon-chai": "4.0.0",
"stylelint": "14.16.1", "stylelint": "16.17.0",
"stylelint-config-html": "^1.1.0", "stylelint-config-html": "^1.1.0",
"stylelint-config-recommended-scss": "^8.0.0", "stylelint-config-recommended": "^14.0.0",
"stylelint-config-recommended-vue": "^1.4.0", "stylelint-config-recommended-scss": "^14.0.0",
"stylelint-config-standard": "29.0.0", "stylelint-config-recommended-vue": "^1.6.0",
"stylelint-rscss": "0.4.0", "stylelint-config-standard": "37.0.0",
"vite": "^6.1.0", "vite": "^6.1.0",
"vite-plugin-eslint2": "^5.0.3", "vite-plugin-eslint2": "^5.0.3",
"vite-plugin-stylelint": "^6.0.0", "vite-plugin-stylelint": "^6.0.0",

13
src/App.scss
View file

@ -34,8 +34,7 @@ body {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
overscroll-behavior-y: none; overscroll-behavior-y: none;
overflow-x: clip; overflow: clip scroll;
overflow-y: scroll;
&.hidden { &.hidden {
display: none; display: none;
@ -224,9 +223,8 @@ nav {
grid-template-rows: 1fr; grid-template-rows: 1fr;
box-sizing: border-box; box-sizing: border-box;
margin: 0 auto; margin: 0 auto;
align-content: flex-start; place-content: flex-start center;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center;
min-height: 100vh; min-height: 100vh;
overflow-x: clip; overflow-x: clip;
@ -262,8 +260,7 @@ nav {
position: sticky; position: sticky;
top: var(--navbar-height); top: var(--navbar-height);
max-height: calc(100vh - var(--navbar-height)); max-height: calc(100vh - var(--navbar-height));
overflow-y: auto; overflow: hidden auto;
overflow-x: hidden;
margin-left: calc(var(--___paddingIncrease) * -1); margin-left: calc(var(--___paddingIncrease) * -1);
padding-left: calc(var(--___paddingIncrease) + var(--___columnMargin) / 2); padding-left: calc(var(--___paddingIncrease) + var(--___columnMargin) / 2);
@ -832,7 +829,7 @@ option {
.login-hint { .login-hint {
text-align: center; text-align: center;
@media all and (min-width: 801px) { @media all and (width >= 801px) {
display: none; display: none;
} }
@ -854,7 +851,7 @@ option {
flex: 1; flex: 1;
} }
@media all and (max-width: 800px) { @media all and (width <= 800px) {
.mobile-hidden { .mobile-hidden {
display: none; display: none;
} }

2
src/components/announcement_editor/announcement_editor.vue
View file

@ -56,7 +56,7 @@
.post-textarea { .post-textarea {
resize: vertical; resize: vertical;
height: 10em; height: 10em;
overflow: none; overflow: visible;
box-sizing: content-box; box-sizing: content-box;
} }
} }

3
src/components/chat_message/chat_message.scss
View file

@ -107,8 +107,7 @@
.outgoing { .outgoing {
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
align-content: end; place-content: end flex-end;
justify-content: flex-end;
.chat-message-inner { .chat-message-inner {
align-items: flex-end; align-items: flex-end;

13
src/components/component_preview/component_preview.vue
View file

@ -190,20 +190,15 @@ export default {
.header { .header {
grid-area: header; grid-area: header;
justify-self: center; place-self: baseline center;
align-self: baseline;
line-height: 2; line-height: 2;
} }
.invalid-container { .invalid-container {
position: absolute; position: absolute;
top: 0; inset: 0;
bottom: 0;
left: 0;
right: 0;
display: grid; display: grid;
align-items: center; place-items: center center;
justify-items: center;
background-color: rgba(100 0 0 / 50%); background-color: rgba(100 0 0 / 50%);
.alert { .alert {
@ -214,7 +209,7 @@ export default {
.assists { .assists {
grid-area: assists; grid-area: assists;
display: grid; display: grid;
grid-auto-flow: rows; grid-auto-flow: row;
grid-auto-rows: 2em; grid-auto-rows: 2em;
grid-gap: 0.5em; grid-gap: 0.5em;
} }

5
src/components/conversation/conversation.vue
View file

@ -322,10 +322,7 @@
content: ""; content: "";
display: block; display: block;
position: absolute; position: absolute;
top: calc(var(--___margin) * -1); inset: calc(var(--___margin) * -1);
bottom: calc(var(--___margin) * -1);
left: calc(var(--___margin) * -1);
right: calc(var(--___margin) * -1);
background: var(--background); background: var(--background);
backdrop-filter: var(--__panel-backdrop-filter); backdrop-filter: var(--__panel-backdrop-filter);
} }

7
src/components/desktop_nav/desktop_nav.scss
View file

@ -59,7 +59,7 @@
transition-timing-function: ease-out; transition-timing-function: ease-out;
transition-duration: 100ms; transition-duration: 100ms;
@media all and (min-width: 800px) { @media all and (width >= 800px) {
/* stylelint-disable-next-line declaration-no-important */ /* stylelint-disable-next-line declaration-no-important */
opacity: 1 !important; opacity: 1 !important;
} }
@ -70,10 +70,7 @@
mask-size: contain; mask-size: contain;
background-color: var(--text); background-color: var(--text);
position: absolute; position: absolute;
top: 0; inset: 0;
bottom: 0;
left: 0;
right: 0;
} }
img { img {

17
src/components/dialog_modal/dialog_modal.vue
View file

@ -29,14 +29,11 @@
// TODO: unify with other modals. // TODO: unify with other modals.
.dark-overlay { .dark-overlay {
&::before { &::before {
bottom: 0; inset: 0;
content: " "; content: " ";
display: block; display: block;
cursor: default; cursor: default;
left: 0;
position: fixed; position: fixed;
right: 0;
top: 0;
background: rgb(27 31 35 / 50%); background: rgb(27 31 35 / 50%);
z-index: 2000; z-index: 2000;
} }
@ -45,13 +42,9 @@
.dialog-container { .dialog-container {
display: grid; display: grid;
position: fixed; position: fixed;
top: 0; inset: 0;
bottom: 0;
left: 0;
right: 0;
justify-content: center; justify-content: center;
align-items: center; place-items: center center;
justify-items: center;
} }
.dialog-modal.panel { .dialog-modal.panel {
@ -98,8 +91,7 @@
#modal.-mobile { #modal.-mobile {
.dialog-container { .dialog-container {
justify-content: stretch; justify-content: stretch;
align-items: end; place-items: end stretch;
justify-items: stretch;
&.-center-mobile { &.-center-mobile {
align-items: center; align-items: center;
@ -114,7 +106,6 @@
flex-direction: column; flex-direction: column;
justify-content: flex-end; justify-content: flex-end;
grid-template-columns: 1fr; grid-template-columns: 1fr;
grid-auto-columns: none;
grid-auto-rows: auto; grid-auto-rows: auto;
grid-auto-flow: row dense; grid-auto-flow: row dense;

11
src/components/draft/draft.vue
View file

@ -135,8 +135,7 @@
.poll-indicator-container { .poll-indicator-container {
border-radius: var(--roundness); border-radius: var(--roundness);
display: grid; display: grid;
justify-items: center; place-items: center center;
align-items: center;
align-self: start; align-self: start;
height: 0; height: 0;
padding-bottom: 62.5%; padding-bottom: 62.5%;
@ -147,13 +146,9 @@
box-sizing: border-box; box-sizing: border-box;
border: 1px solid var(--border); border: 1px solid var(--border);
position: absolute; position: absolute;
top: 0; inset: 0;
bottom: 0;
left: 0;
right: 0;
display: grid; display: grid;
justify-items: center; place-items: center center;
align-items: center;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }

5
src/components/emoji_input/emoji_input.vue
View file

@ -159,10 +159,7 @@
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
position: absolute; position: absolute;
top: 0; inset: 0;
bottom: 0;
right: 0;
left: 0;
overflow: hidden; overflow: hidden;
/* DEBUG STUFF */ /* DEBUG STUFF */

12
src/components/emoji_picker/emoji_picker.scss
View file

@ -64,8 +64,7 @@
flex-grow: 1; flex-grow: 1;
display: flex; display: flex;
flex-flow: row nowrap; flex-flow: row nowrap;
overflow-x: auto; overflow: auto hidden;
overflow-y: hidden;
} }
.additional-tabs { .additional-tabs {
@ -153,7 +152,13 @@
transition: mask-size 150ms; transition: mask-size 150ms;
mask-size: 100% 20px, 100% 20px, auto; mask-size: 100% 20px, 100% 20px, auto;
// Autoprefixed seem to ignore this one, and also syntax is different // 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; mask-composite: xor;
/* stylelint-enable declaration-property-value-no-unknown */
/* stylelint-enable mask-composite */
mask-composite: exclude; mask-composite: exclude;
&.scrolled { &.scrolled {
@ -197,8 +202,7 @@
&-group { &-group {
display: grid; display: grid;
grid-template-columns: repeat(var(--__amount), 1fr); grid-template-columns: repeat(var(--__amount), 1fr);
align-items: center; place-items: center center;
justify-items: center;
justify-content: center; justify-content: center;
grid-template-rows: repeat(1, auto); grid-template-rows: repeat(1, auto);

2
src/components/flash/flash.vue
View file

@ -77,7 +77,7 @@
.hidden { .hidden {
display: none; display: none;
visibility: "hidden"; visibility: hidden;
} }
} }
</style> </style>

11
src/components/gallery/gallery.vue
View file

@ -101,10 +101,7 @@
.gallery-row-inner { .gallery-row-inner {
position: absolute; position: absolute;
top: 0; inset: 0;
left: 0;
right: 0;
bottom: 0;
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
align-content: stretch; align-content: stretch;
@ -160,7 +157,13 @@
linear-gradient(to top, white, white); linear-gradient(to top, white, white);
/* Autoprefixed seem to ignore this one, and also syntax is different */ /* 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; mask-composite: xor;
/* stylelint-enable declaration-property-value-no-unknown */
/* stylelint-enable mask-composite */
mask-composite: exclude; mask-composite: exclude;
} }
} }

8
src/components/link-preview/link-preview.vue
View file

@ -68,10 +68,12 @@
margin: 0.5em 0 0; margin: 0.5em 0 0;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
word-break: break-word; word-break: break-all;
line-height: 1.2em; line-height: 1.2em;
// cap description at 3 lines, the 1px is to clean up some stray pixels
// TODO: fancier fade-out at the bottom to show off that it's too long? /* cap description at 3 lines, the 1px is to clean up some stray pixels
TODO: fancier fade-out at the bottom to show off that it's too long?
*/
max-height: calc(1.2em * 3 - 1px); max-height: calc(1.2em * 3 - 1px);
} }

3
src/components/mobile_nav/mobile_nav.vue
View file

@ -220,8 +220,7 @@
margin-top: 3.5em; margin-top: 3.5em;
width: 100vw; width: 100vw;
height: calc(100vh - var(--navbar-height)); height: calc(100vh - var(--navbar-height));
overflow-x: hidden; overflow: hidden scroll;
overflow-y: scroll;
.notifications { .notifications {
padding: 0; padding: 0;

2
src/components/mobile_post_status_button/mobile_post_status_button.vue
View file

@ -42,7 +42,7 @@
} }
} }
@media all and (min-width: 801px) { @media all and (width >= 801px) {
.new-status-button:not(.always-show) { .new-status-button:not(.always-show) {
display: none; display: none;
} }

5
src/components/modal/modal.vue
View file

@ -41,10 +41,7 @@ export default {
.modal-view { .modal-view {
z-index: var(--ZI_modals); z-index: var(--ZI_modals);
position: fixed; position: fixed;
top: 0; inset: 0;
left: 0;
right: 0;
bottom: 0;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;

2
src/components/notification/notification.scss
View file

@ -3,7 +3,7 @@
border-bottom: 1px solid; border-bottom: 1px solid;
border-color: var(--border); border-color: var(--border);
word-wrap: break-word; word-wrap: break-word;
word-break: break-word; word-break: break-all;
&.Status { &.Status {
/* stylelint-disable-next-line declaration-no-important */ /* stylelint-disable-next-line declaration-no-important */

5
src/components/notifications/notifications.scss
View file

@ -13,10 +13,7 @@
.notification-overlay { .notification-overlay {
position: absolute; position: absolute;
top: 0; inset: 0;
right: 0;
left: 0;
bottom: 0;
pointer-events: none; pointer-events: none;
} }

2
src/components/poll/poll.scss
View file

@ -26,7 +26,7 @@
align-items: center; align-items: center;
padding: 0.1em 0.25em; padding: 0.1em 0.25em;
z-index: 1; z-index: 1;
word-break: break-word; word-break: break-all;
} }
.result-percentage { .result-percentage {

6
src/components/popover/popover.scss
View file

@ -15,11 +15,7 @@
&::after { &::after {
content: ""; content: "";
position: absolute; position: absolute;
top: -1px; inset: -1px;
bottom: -1px;
left: -1px;
right: -1px;
z-index: -1px;
box-shadow: var(--_shadow); box-shadow: var(--_shadow);
pointer-events: none; pointer-events: none;
} }

2
src/components/registration/registration.vue
View file

@ -418,7 +418,7 @@
margin: 0.6em; margin: 0.6em;
} }
@media all and (max-width: 800px) { @media all and (width <= 800px) {
.registration-form .container { .registration-form .container {
flex-direction: column-reverse; flex-direction: column-reverse;

2
src/components/search/search.vue
View file

@ -157,7 +157,7 @@
text-align: center; text-align: center;
} }
@media all and (max-width: 800px) { @media all and (width <= 800px) {
.search-nav-heading { .search-nav-heading {
.tab-switcher .tabs .tab-wrapper { .tab-switcher .tabs .tab-wrapper {
display: block; display: block;

2
src/components/settings_modal/admin_tabs/emoji_tab.scss
View file

@ -29,7 +29,7 @@
.emoji-list { .emoji-list {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 1em 1em; gap: 1em;
} }
} }

6
src/components/settings_modal/admin_tabs/frontends_tab.scss
View file

@ -13,15 +13,11 @@
// fix buttons showing through // fix buttons showing through
z-index: 2; z-index: 2;
opacity: 0.9; opacity: 0.9;
top: 0; inset: 0;
bottom: 0;
left: 0;
right: 0;
} }
dd { dd {
text-overflow: ellipsis; text-overflow: ellipsis;
word-wrap: nowrap;
white-space: nowrap; white-space: nowrap;
overflow-x: hidden; overflow-x: hidden;
max-width: 10em; max-width: 10em;

6
src/components/settings_modal/settings_modal.scss
View file

@ -46,7 +46,7 @@
max-width: 90vw; max-width: 90vw;
height: 90vh; height: 90vh;
@media all and (max-width: 800px) { @media all and (width <= 800px) {
max-width: 100vw; max-width: 100vw;
height: 100%; height: 100%;
} }
@ -84,7 +84,7 @@
> li { > li {
margin: 1em 0; margin: 1em 0;
line-height: 1.5em; line-height: 1.5em;
vertical-align: center; vertical-align: middle;
} }
&.two-column { &.two-column {
@ -105,7 +105,7 @@
*/ */
transform: translateY(calc(((100vh - 100%) / 2 + 100%) - 50px)); 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. /* For mobile, the modal takes 100% of the available screen.
This ensures the minimized modal is always 50px above the browser bottom This ensures the minimized modal is always 50px above the browser bottom
bar regardless of whether or not it is visible. bar regardless of whether or not it is visible.

6
src/components/settings_modal/tabs/appearance_tab.scss
View file

@ -26,8 +26,7 @@
.palettes-container { .palettes-container {
height: 15em; height: 15em;
overflow-y: auto; overflow: hidden auto;
overflow-x: hidden;
scrollbar-gutter: stable; scrollbar-gutter: stable;
border-radius: var(--roundness); border-radius: var(--roundness);
border: 1px solid var(--border); border: 1px solid var(--border);
@ -112,8 +111,7 @@
flex-wrap: wrap; flex-wrap: wrap;
margin: -0.5em 0; margin: -0.5em 0;
height: 25em; height: 25em;
overflow-x: hidden; overflow: hidden auto;
overflow-y: auto;
scrollbar-gutter: stable; scrollbar-gutter: stable;
border-radius: var(--roundness); border-radius: var(--roundness);
border: 1px solid var(--border); border: 1px solid var(--border);

2
src/components/settings_modal/tabs/style_tab/style_tab.scss
View file

@ -187,7 +187,7 @@
.state-selector, .state-selector,
.variant-selector { .variant-selector {
display: grid; display: grid;
grid-template-columns: 1fr minmax(1fr, 10em); grid-template-columns: 1fr minmax(10em, 1fr);
grid-template-rows: auto; grid-template-rows: auto;
grid-auto-flow: column; grid-auto-flow: column;
grid-gap: 0.5em; grid-gap: 0.5em;

5
src/components/settings_modal/tabs/theme_tab/theme_preview.vue
View file

@ -241,10 +241,7 @@ export default {
.underlay-preview { .underlay-preview {
position: absolute; position: absolute;
top: 0; inset: 0 10px;
bottom: 0;
left: 10px;
right: 10px;
} }
} }
</style> </style>

3
src/components/shadow_control/shadow_control.scss
View file

@ -112,8 +112,7 @@
grid-area: preview; grid-area: preview;
min-width: 25em; min-width: 25em;
margin-left: 0.125em; margin-left: 0.125em;
align-self: start; place-self: start center;
justify-self: center;
} }
} }

3
src/components/shout_panel/shout_panel.vue
View file

@ -107,8 +107,7 @@
} }
.shout-window { .shout-window {
overflow-y: auto; overflow: hidden auto;
overflow-x: hidden;
max-height: 20em; max-height: 20em;
} }

5
src/components/status/status.scss
View file

@ -2,7 +2,7 @@
min-width: 0; min-width: 0;
white-space: normal; white-space: normal;
word-wrap: break-word; word-wrap: break-word;
word-break: break-word; word-break: break-all;
&:hover { &:hover {
--_still-image-img-visibility: visible; --_still-image-img-visibility: visible;
@ -364,7 +364,7 @@
} }
} }
@media all and (max-width: 800px) { @media all and (width <= 800px) {
.repeater-avatar { .repeater-avatar {
margin-left: 20px; margin-left: 20px;
} }
@ -374,7 +374,6 @@
height: 40px; height: 40px;
// TODO define those other way somehow? // TODO define those other way somehow?
// stylelint-disable rscss/class-format
&.-compact { &.-compact {
width: 32px; width: 32px;
height: 32px; height: 32px;

2
src/components/status_action_buttons/action_button.vue
View file

@ -12,7 +12,7 @@
:title="$t(button.label(funcArg))" :title="$t(button.label(funcArg))"
target="_blank" target="_blank"
:tabindex="0" :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" :href="getComponent(button) == 'a' ? button.link?.(funcArg) || remoteInteractionLink : undefined"
@click="doActionWrap(button, outerClose)" @click="doActionWrap(button, outerClose)"
> >

19
src/components/status_body/status_body.scss
View file

@ -15,7 +15,7 @@
white-space: pre-wrap; white-space: pre-wrap;
overflow-wrap: break-word; overflow-wrap: break-word;
word-wrap: break-word; word-wrap: break-word;
word-break: break-word; word-break: break-all;
line-height: var(--post-line-height); line-height: var(--post-line-height);
} }
@ -60,8 +60,7 @@
&.-tall-status { &.-tall-status {
position: relative; position: relative;
height: 220px; height: 220px;
overflow-x: hidden; overflow: hidden;
overflow-y: hidden;
z-index: 1; z-index: 1;
.media-body { .media-body {
@ -71,7 +70,13 @@
linear-gradient(to top, white, white); linear-gradient(to top, white, white);
/* Autoprefixed seem to ignore this one, and also syntax is different */ /* 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; mask-composite: xor;
/* stylelint-enable declaration-property-value-no-unknown */
/* stylelint-enable mask-composite */
mask-composite: exclude; mask-composite: exclude;
} }
} }
@ -110,7 +115,7 @@
} }
&.-compact { &.-compact {
align-items: top; align-items: start;
flex-direction: row; flex-direction: row;
--emoji-size: calc(var(--emojiSize, 32px) / 2); --emoji-size: calc(var(--emojiSize, 32px) / 2);
@ -131,7 +136,13 @@
mask-image: linear-gradient(to bottom, white 2em, transparent 3em); mask-image: linear-gradient(to bottom, white 2em, transparent 3em);
/* Autoprefixed seem to ignore this one, and also syntax is different */ /* 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; mask-composite: xor;
/* stylelint-enable declaration-property-value-no-unknown */
/* stylelint-enable mask-composite */
mask-composite: exclude; mask-composite: exclude;
} }

5
src/components/still-image/still-image.vue
View file

@ -37,10 +37,7 @@
canvas { canvas {
position: absolute; position: absolute;
top: 0; inset: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: contain; object-fit: contain;

16
src/components/tab_switcher/tab_switcher.scss
View file

@ -12,8 +12,7 @@
> .tabs { > .tabs {
width: 100%; width: 100%;
overflow-y: hidden; overflow: auto hidden;
overflow-x: auto;
padding-top: 5px; padding-top: 5px;
flex-direction: row; flex-direction: row;
flex: 0 0 auto; flex: 0 0 auto;
@ -44,7 +43,7 @@
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
padding-bottom: 99px; padding-bottom: 99px;
margin-bottom: 6px - 99px; margin-bottom: calc(6px - 99px);
} }
} }
@ -56,7 +55,7 @@
&.side-tabs { &.side-tabs {
flex-direction: row; flex-direction: row;
@media all and (max-width: 800px) { @media all and (width <= 800px) {
overflow-x: auto; overflow-x: auto;
} }
@ -66,8 +65,7 @@
> .tabs { > .tabs {
flex: 0 0 auto; flex: 0 0 auto;
overflow-y: auto; overflow: hidden auto;
overflow-x: hidden;
flex-direction: column; flex-direction: column;
&::after, &::after,
@ -92,7 +90,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@media all and (max-width: 800px) { @media all and (width <= 800px) {
min-width: 4em; min-width: 4em;
} }
@ -133,7 +131,7 @@
margin-left: 1.5em; margin-left: 1.5em;
} }
@media all and (max-width: 800px) { @media all and (width <= 800px) {
padding-left: 0.25em; padding-left: 0.25em;
padding-right: calc(0.25em + 200px); padding-right: calc(0.25em + 200px);
margin-right: calc(0.25em - 200px); margin-right: calc(0.25em - 200px);
@ -244,7 +242,7 @@
margin-bottom: 0.25em; margin-bottom: 0.25em;
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
@media all and (min-width: 800px) { @media all and (width >= 800px) {
display: none; display: none;
} }
} }

4
src/components/update_notification/update_notification.scss
View file

@ -18,7 +18,7 @@
padding-left: 1em; padding-left: 1em;
} }
@media all and (max-width: 800px) { @media all and (width <= 800px) {
/* For mobile, the modal takes 100% of the available screen. /* For mobile, the modal takes 100% of the available screen.
This ensures the minimized modal is always 50px above the browser This ensures the minimized modal is always 50px above the browser
bottom bar regardless of whether or not it is visible. bottom bar regardless of whether or not it is visible.
@ -26,7 +26,7 @@
width: 100vw; width: 100vw;
} }
@media all and (max-height: 600px) { @media all and (height <= 600px) {
display: none; display: none;
} }

18
src/components/user_card/user_card.scss
View file

@ -21,15 +21,18 @@
.background-image { .background-image {
position: absolute; position: absolute;
top: 0; inset: 0;
left: 0;
right: 0;
bottom: 0;
mask: mask:
linear-gradient(to top, white, transparent) bottom no-repeat, linear-gradient(to top, white, transparent) bottom no-repeat,
linear-gradient(to top, white, white); linear-gradient(to top, white, white);
// Autoprefixer seem to ignore this one, and also syntax is different // 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; mask-composite: xor;
/* stylelint-enable declaration-property-value-no-unknown */
/* stylelint-enable mask-composite */
mask-composite: exclude; mask-composite: exclude;
background-size: cover; background-size: cover;
mask-size: 100% 60%; mask-size: 100% 60%;
@ -125,10 +128,7 @@
&.-overlay { &.-overlay {
position: absolute; position: absolute;
left: 0; inset: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgb(0 0 0 / 30%); background-color: rgb(0 0 0 / 30%);
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -161,7 +161,7 @@
} }
.bottom-line { .bottom-line {
font-weight: light; font-weight: lighter;
font-size: 1.1em; font-size: 1.1em;
align-items: baseline; align-items: baseline;

4
src/components/user_profile/user_profile.vue
View file

@ -223,7 +223,7 @@
.userlist-placeholder { .userlist-placeholder {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: middle; align-items: center;
padding: 2em; padding: 2em;
} }
} }
@ -232,7 +232,7 @@
.panel-body { .panel-body {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: middle; align-items: center;
padding: 7em; padding: 7em;
} }
} }

2
src/components/user_reporting_modal/user_reporting_modal.vue
View file

@ -143,7 +143,7 @@
} }
} }
@media all and (min-width: 801px) { @media all and (width >= 801px) {
.panel-body { .panel-body {
flex-direction: row; flex-direction: row;
} }

10
src/panel.scss
View file

@ -25,10 +25,7 @@
&::after { &::after {
content: ""; content: "";
position: absolute; position: absolute;
top: 0; inset: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 5; z-index: 5;
box-shadow: var(--_shadow); box-shadow: var(--_shadow);
pointer-events: none; pointer-events: none;
@ -107,10 +104,7 @@
&::before { &::before {
content: ""; content: "";
position: absolute; position: absolute;
top: 0; inset: 0;
bottom: 0;
right: 0;
left: 0;
pointer-events: none; pointer-events: none;
} }

613
yarn.lock
View file

File diff suppressed because it is too large Load diff