refactor(frontend): prefix css variables (#14725)
* wip * Update index.d.ts * remove unnecessary codes
This commit is contained in:
@@ -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>
|
||||
|
Reference in New Issue
Block a user