misty.cafe/mistykey
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

perf(frontend): use css-native implementation for spacer rather than vue component

Browse source
This commit is contained in:
syuilo 2025-04-27 19:55:56 +09:00
parent c4f13a0472
commit 0a1ff77f23
143 changed files with 370 additions and 411 deletions
Download patch file Download diff file Expand all files Collapse all files

24
packages/frontend/src/style.scss
View file

@ -175,6 +175,30 @@ rt {
text-align: center;
}
._spacer {
width: 100%;
max-width: calc(min(var(--MI_SPACER-w, 100%), 100%) - (var(--MI_SPACER-max, 24px) * 2));
margin: var(--MI_SPACER-max, 24px) auto;
container-type: inline-size;
/* 子に継承させない */
--MI_SPACER-w: initial;
--MI_SPACER-min: initial;
--MI_SPACER-max: initial;
}
._forceShrinkSpacer ._spacer {
max-width: calc(min(var(--MI_SPACER-w, 100%), 100%) - (var(--MI_SPACER-min, 12px) * 2));
margin: var(--MI_SPACER-min, 12px) auto;
}
@container (max-width: 450px) {
._spacer {
max-width: calc(min(var(--MI_SPACER-w, 100%), 100%) - (var(--MI_SPACER-min, 12px) * 2));
margin: var(--MI_SPACER-min, 12px) auto;
}
}
._pageContainer {
container-type: size;
contain: strict;