diff options
| author | かっこかり <67428053+kakkokari-gtyih@users.noreply.github.com> | 2024-10-10 16:12:16 +0900 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2024-10-10 16:12:16 +0900 |
| commit | b668d161a9a0a2f73c487f3fa6d54fd7597635a5 (patch) | |
| tree | 23ac69ea9edd0e2beb4e5924a6254f950d6d5a8c /packages/frontend/src/style.scss | |
| parent | Bump version to 2024.10.1-beta.1 (diff) | |
| download | sharkey-b668d161a9a0a2f73c487f3fa6d54fd7597635a5.tar.gz sharkey-b668d161a9a0a2f73c487f3fa6d54fd7597635a5.tar.bz2 sharkey-b668d161a9a0a2f73c487f3fa6d54fd7597635a5.zip | |
refactor(frontend): prefix css variables (UI) (#14739)
* refactor(frontend): prefix css variables
* `MI_UI` -> `MI`
* fix
* `stickyBottom`
* stickyTop
Diffstat (limited to 'packages/frontend/src/style.scss')
| -rw-r--r-- | packages/frontend/src/style.scss | 34 |
1 files changed, 17 insertions, 17 deletions
diff --git a/packages/frontend/src/style.scss b/packages/frontend/src/style.scss index 424cc02d0e..cfc988bd58 100644 --- a/packages/frontend/src/style.scss +++ b/packages/frontend/src/style.scss @@ -7,20 +7,20 @@ */ :root { - --radius: 12px; - --marginFull: 16px; - --marginHalf: 10px; + --MI-radius: 12px; + --MI-marginFull: 16px; + --MI-marginHalf: 10px; - --margin: var(--marginFull); + --MI-margin: var(--MI-marginFull); // switch dynamically - --minBottomSpacingMobile: calc(72px + max(12px, env(safe-area-inset-bottom, 0px))); - --minBottomSpacing: var(--minBottomSpacingMobile); + --MI-minBottomSpacingMobile: calc(72px + max(12px, env(safe-area-inset-bottom, 0px))); + --MI-minBottomSpacing: var(--MI-minBottomSpacingMobile); //--ad: rgb(255 169 0 / 10%); @media (max-width: 500px) { - --margin: var(--marginHalf); + --MI-margin: var(--MI-marginHalf); } } @@ -130,7 +130,7 @@ optgroup, option { } hr { - margin: var(--margin) 0 var(--margin) 0; + margin: var(--MI-margin) 0 var(--MI-margin) 0; border: none; height: 1px; background: var(--MI_THEME-divider); @@ -210,8 +210,8 @@ rt { width: 100%; height: 100%; background: var(--MI_THEME-modalBg); - -webkit-backdrop-filter: var(--modalBgFilter); - backdrop-filter: var(--modalBgFilter); + -webkit-backdrop-filter: var(--MI-modalBgFilter); + backdrop-filter: var(--MI-modalBgFilter); } ._shadow { @@ -290,12 +290,12 @@ rt { ._panel { background: var(--MI_THEME-panel); - border-radius: var(--radius); + border-radius: var(--MI-radius); overflow: clip; } ._margin { - margin: var(--margin) 0; + margin: var(--MI-margin) 0; } ._gaps_m { @@ -313,7 +313,7 @@ rt { ._gaps { display: flex; flex-direction: column; - gap: var(--margin); + gap: var(--MI-margin); } ._buttons { @@ -336,7 +336,7 @@ rt { box-sizing: border-box; text-align: center; border: solid 0.5px var(--MI_THEME-divider); - border-radius: var(--radius); + border-radius: var(--MI-radius); &:active { border-color: var(--MI_THEME-accent); @@ -345,14 +345,14 @@ rt { ._popup { background: var(--MI_THEME-popup); - border-radius: var(--radius); + border-radius: var(--MI-radius); contain: content; } ._acrylic { background: var(--MI_THEME-acrylicPanel); - -webkit-backdrop-filter: var(--blur, blur(15px)); - backdrop-filter: var(--blur, blur(15px)); + -webkit-backdrop-filter: var(--MI-blur, blur(15px)); + backdrop-filter: var(--MI-blur, blur(15px)); } ._formLinksGrid { |