refactor(frontend): refactor divider of panel style

This commit is contained in:
syuilo 2025-04-05 19:45:11 +09:00
parent db48b320f5
commit f71843a7d3
16 changed files with 12 additions and 16 deletions

View File

@ -26,7 +26,6 @@
panelHighlight: ':lighten<3<@panel',
panelHeaderBg: ':lighten<3<@panel',
panelHeaderFg: '@fg',
panelHeaderDivider: 'rgba(0, 0, 0, 0)',
panelBorder: '" solid 1px var(--MI_THEME-divider)',
windowHeader: ':alpha<0.85<@panel',
popup: ':lighten<3<@panel',

View File

@ -26,7 +26,6 @@
panelHighlight: ':darken<3<@panel',
panelHeaderBg: ':lighten<3<@panel',
panelHeaderFg: '@fg',
panelHeaderDivider: 'rgba(0, 0, 0, 0)',
panelBorder: '" solid 1px var(--MI_THEME-divider)',
windowHeader: ':alpha<0.85<@panel',
popup: ':lighten<3<@panel',

View File

@ -46,7 +46,6 @@
fgOnWhite: '@accent',
panelHighlight: ':lighten<3<@panel',
scrollbarHandle: 'rgba(255, 255, 255, 0.2)',
panelHeaderDivider: 'rgba(0, 0, 0, 0)',
scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)',
},
}

View File

@ -14,7 +14,6 @@
fgOnWhite: '@accent',
divider: 'rgba(255, 255, 255, 0.14)',
panel: 'rgb(47, 47, 44)',
panelHeaderDivider: 'rgba(0, 0, 0, 0)',
header: ':alpha<0.7<@panel',
navBg: '#363636',
renote: '@accent',

View File

@ -14,7 +14,6 @@
fgOnWhite: '@accent',
divider: 'rgba(255, 255, 255, 0.14)',
panel: '#2d2d2d',
panelHeaderDivider: 'rgba(0, 0, 0, 0)',
header: ':alpha<0.7<@panel',
navBg: '#363636',
renote: '@accent',

View File

@ -15,7 +15,6 @@
fgOnWhite: '@accent',
divider: 'rgba(255, 255, 255, 0.1)',
panel: '#18181c',
panelHeaderDivider: 'rgba(0, 0, 0, 0)',
renote: '@accent',
mention: '#f2c97d',
mentionMe: '@accent',

View File

@ -15,7 +15,6 @@
fgOnWhite: '@accent',
divider: '#e7fffb24',
panel: '#192320',
panelHeaderDivider: 'rgba(0, 0, 0, 0)',
popup: '#293330',
renote: '@accent',
mentionMe: '#ffaa00',

View File

@ -15,7 +15,6 @@
fgOnWhite: '@accent',
divider: '#e7fffb24',
panel: '#192320',
panelHeaderDivider: 'rgba(0, 0, 0, 0)',
popup: '#293330',
renote: '@accent',
mentionMe: '#b4e900',

View File

@ -59,7 +59,6 @@
scrollbarHandle: 'rgba(255, 255, 255, 0.2)',
inputBorderHover: 'rgba(255, 255, 255, 0.2)',
fgTransparentWeak: ':alpha<0.75<@fg',
panelHeaderDivider: 'rgba(0, 0, 0, 0)',
scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)',
deckBg: '#142022',
},

View File

@ -15,7 +15,6 @@
divider: '#cfcfcf',
panel: '#ebe7e5',
panelHeaderBg: '@panel',
panelHeaderDivider: '@divider',
header: ':alpha<0.7<@panel',
navBg: '#ebe7e5',
renote: '#229e92',

View File

@ -15,7 +15,6 @@
header: ':alpha<0.7<@panel',
navBg: '#fff',
panel: '#fff',
panelHeaderDivider: '@divider',
mentionMe: 'rgb(0, 179, 70)',
},
}

View File

@ -13,7 +13,6 @@
fgOnWhite: '@accent',
panel: '#fff',
divider: 'rgb(230 233 234)',
panelHeaderDivider: '@divider',
renote: '@accent',
link: '@accent',
mention: '@accent',

View File

@ -61,7 +61,6 @@
scrollbarHandle: '#74747433',
inputBorderHover: 'rgba(255, 255, 255, 0.2)',
fgTransparentWeak: ':alpha<0.75<@fg',
panelHeaderDivider: 'rgba(0, 0, 0, 0)',
scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)',
},
}

View File

@ -49,7 +49,6 @@
panelHighlight: ':darken<3<@panel',
scrollbarHandle: 'rgba(0, 0, 0, 0.2)',
fgTransparentWeak: ':alpha<0.75<@fg',
panelHeaderDivider: '@divider',
scrollbarHandleHover: 'rgba(0, 0, 0, 0.4)',
},
}

View File

@ -181,11 +181,16 @@ onUnmounted(() => {
left: 0;
color: var(--MI_THEME-panelHeaderFg);
background: var(--MI_THEME-panelHeaderBg);
border-bottom: solid 0.5px var(--MI_THEME-panelHeaderDivider);
z-index: 2;
line-height: 1.4em;
}
@container style(--MI_THEME-panelHeaderBg: var(--MI_THEME-panel)) {
.header {
box-shadow: 0 0.5px 0 0 light-dark(#0002, #fff2);
}
}
.title {
margin: 0;
padding: 12px 16px;

View File

@ -413,11 +413,16 @@ function onDrop(ev) {
font-size: 0.9em;
color: var(--MI_THEME-panelHeaderFg);
background: var(--MI_THEME-panelHeaderBg);
box-shadow: 0 0.5px 0 0 var(--MI_THEME-panelHeaderDivider);
cursor: pointer;
user-select: none;
}
@container style(--MI_THEME-panelHeaderBg: var(--MI_THEME-panel)) {
.header {
box-shadow: 0 0.5px 0 0 light-dark(#0002, #fff2);
}
}
.color {
position: absolute;
top: 12px;