refactor(frontend): refactor divider of panel style
This commit is contained in:
parent
db48b320f5
commit
f71843a7d3
|
@ -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',
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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)',
|
||||
},
|
||||
}
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -15,7 +15,6 @@
|
|||
fgOnWhite: '@accent',
|
||||
divider: '#e7fffb24',
|
||||
panel: '#192320',
|
||||
panelHeaderDivider: 'rgba(0, 0, 0, 0)',
|
||||
popup: '#293330',
|
||||
renote: '@accent',
|
||||
mentionMe: '#ffaa00',
|
||||
|
|
|
@ -15,7 +15,6 @@
|
|||
fgOnWhite: '@accent',
|
||||
divider: '#e7fffb24',
|
||||
panel: '#192320',
|
||||
panelHeaderDivider: 'rgba(0, 0, 0, 0)',
|
||||
popup: '#293330',
|
||||
renote: '@accent',
|
||||
mentionMe: '#b4e900',
|
||||
|
|
|
@ -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',
|
||||
},
|
||||
|
|
|
@ -15,7 +15,6 @@
|
|||
divider: '#cfcfcf',
|
||||
panel: '#ebe7e5',
|
||||
panelHeaderBg: '@panel',
|
||||
panelHeaderDivider: '@divider',
|
||||
header: ':alpha<0.7<@panel',
|
||||
navBg: '#ebe7e5',
|
||||
renote: '#229e92',
|
||||
|
|
|
@ -15,7 +15,6 @@
|
|||
header: ':alpha<0.7<@panel',
|
||||
navBg: '#fff',
|
||||
panel: '#fff',
|
||||
panelHeaderDivider: '@divider',
|
||||
mentionMe: 'rgb(0, 179, 70)',
|
||||
},
|
||||
}
|
||||
|
|
|
@ -13,7 +13,6 @@
|
|||
fgOnWhite: '@accent',
|
||||
panel: '#fff',
|
||||
divider: 'rgb(230 233 234)',
|
||||
panelHeaderDivider: '@divider',
|
||||
renote: '@accent',
|
||||
link: '@accent',
|
||||
mention: '@accent',
|
||||
|
|
|
@ -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)',
|
||||
},
|
||||
}
|
||||
|
|
|
@ -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)',
|
||||
},
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue