diff options
| author | syuilo <4439005+syuilo@users.noreply.github.com> | 2024-10-09 18:08:14 +0900 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2024-10-09 18:08:14 +0900 |
| commit | 4a356f1ba742ae3965d01ad17179d3af4846377a (patch) | |
| tree | de74d2bea4e0025330555c6334b6855cbf76d862 /packages/frontend/src/components/MkFolder.vue | |
| parent | [skip ci] Update CHANGELOG.md (prepend template) (diff) | |
| download | misskey-4a356f1ba742ae3965d01ad17179d3af4846377a.tar.gz misskey-4a356f1ba742ae3965d01ad17179d3af4846377a.tar.bz2 misskey-4a356f1ba742ae3965d01ad17179d3af4846377a.zip | |
refactor(frontend): prefix css variables (#14725)
* wip
* Update index.d.ts
* remove unnecessary codes
Diffstat (limited to 'packages/frontend/src/components/MkFolder.vue')
| -rw-r--r-- | packages/frontend/src/components/MkFolder.vue | 24 |
1 files changed, 12 insertions, 12 deletions
diff --git a/packages/frontend/src/components/MkFolder.vue b/packages/frontend/src/components/MkFolder.vue index 8262ae5d0c..290d73dd92 100644 --- a/packages/frontend/src/components/MkFolder.vue +++ b/packages/frontend/src/components/MkFolder.vue @@ -118,7 +118,7 @@ function toggle() { onMounted(() => { const computedStyle = getComputedStyle(document.documentElement); const parentBg = getBgColor(rootEl.value!.parentElement!); - const myBg = computedStyle.getPropertyValue('--panel'); + const myBg = computedStyle.getPropertyValue('--MI_THEME-panel'); bgSame.value = parentBg === myBg; }); </script> @@ -144,7 +144,7 @@ onMounted(() => { width: 100%; box-sizing: border-box; padding: 9px 12px 9px 12px; - background: var(--folderHeaderBg); + background: var(--MI_THEME-folderHeaderBg); -webkit-backdrop-filter: var(--blur, blur(15px)); backdrop-filter: var(--blur, blur(15px)); border-radius: 6px; @@ -152,7 +152,7 @@ onMounted(() => { &:hover { text-decoration: none; - background: var(--folderHeaderHoverBg); + background: var(--MI_THEME-folderHeaderHoverBg); } &:focus-within { @@ -160,8 +160,8 @@ onMounted(() => { } &.active { - color: var(--accent); - background: var(--folderHeaderHoverBg); + color: var(--MI_THEME-accent); + background: var(--MI_THEME-folderHeaderHoverBg); } &.opened { @@ -175,7 +175,7 @@ onMounted(() => { } .headerLower { - color: var(--fgTransparentWeak); + color: var(--MI_THEME-fgTransparentWeak); font-size: .85em; padding-left: 4px; } @@ -209,13 +209,13 @@ onMounted(() => { } .headerTextSub { - color: var(--fgTransparentWeak); + color: var(--MI_THEME-fgTransparentWeak); font-size: .85em; } .headerRight { margin-left: auto; - color: var(--fgTransparentWeak); + color: var(--MI_THEME-fgTransparentWeak); white-space: nowrap; } @@ -224,12 +224,12 @@ onMounted(() => { } .body { - background: var(--panel); + background: var(--MI_THEME-panel); border-radius: 0 0 6px 6px; container-type: inline-size; &.bgSame { - background: var(--bg); + background: var(--MI_THEME-bg); } } @@ -239,11 +239,11 @@ onMounted(() => { bottom: var(--stickyBottom, 0px); left: 0; padding: 12px; - background: var(--acrylicBg); + background: var(--MI_THEME-acrylicBg); -webkit-backdrop-filter: var(--blur, blur(15px)); backdrop-filter: var(--blur, blur(15px)); background-size: auto auto; - background-image: repeating-linear-gradient(135deg, transparent, transparent 5px, var(--panel) 5px, var(--panel) 10px); + background-image: repeating-linear-gradient(135deg, transparent, transparent 5px, var(--MI_THEME-panel) 5px, var(--MI_THEME-panel) 10px); border-radius: 0 0 6px 6px; } </style> |