refactor(frontend): prefix css variables (#14725)

* wip

* Update index.d.ts

* remove unnecessary codes
This commit is contained in:
syuilo
2024-10-09 18:08:14 +09:00
committed by GitHub
parent 0ad31bd5d4
commit 4a356f1ba7
280 changed files with 1076 additions and 1093 deletions

View File

@@ -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>