refactor
This commit is contained in:
parent
130ff361c3
commit
59e83605ac
11 changed files with 16 additions and 49 deletions
|
@ -171,11 +171,11 @@ function onMousedown(evt: MouseEvent): void {
|
||||||
background: var(--accent);
|
background: var(--accent);
|
||||||
|
|
||||||
&:not(:disabled):hover {
|
&:not(:disabled):hover {
|
||||||
background: var(--X8);
|
background: hsl(from var(--accent) h s calc(l + 5));
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not(:disabled):active {
|
&:not(:disabled):active {
|
||||||
background: var(--X8);
|
background: hsl(from var(--accent) h s calc(l + 5));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -220,11 +220,11 @@ function onMousedown(evt: MouseEvent): void {
|
||||||
background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
|
background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
|
||||||
|
|
||||||
&:not(:disabled):hover {
|
&:not(:disabled):hover {
|
||||||
background: linear-gradient(90deg, var(--X8), var(--X8));
|
background: linear-gradient(90deg, hsl(from var(--accent) h s calc(l + 5)), hsl(from var(--accent) h s calc(l + 5)));
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not(:disabled):active {
|
&:not(:disabled):active {
|
||||||
background: linear-gradient(90deg, var(--X8), var(--X8));
|
background: linear-gradient(90deg, hsl(from var(--accent) h s calc(l + 5)), hsl(from var(--accent) h s calc(l + 5)));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1128,13 +1128,13 @@ defineExpose({
|
||||||
|
|
||||||
&:not(:disabled):hover {
|
&:not(:disabled):hover {
|
||||||
> .inner {
|
> .inner {
|
||||||
background: linear-gradient(90deg, var(--X8), var(--X8));
|
background: linear-gradient(90deg, hsl(from var(--accent) h s calc(l + 5)), hsl(from var(--accent) h s calc(l + 5)));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not(:disabled):active {
|
&:not(:disabled):active {
|
||||||
> .inner {
|
> .inner {
|
||||||
background: linear-gradient(90deg, var(--X8), var(--X8));
|
background: linear-gradient(90deg, hsl(from var(--accent) h s calc(l + 5)), hsl(from var(--accent) h s calc(l + 5)));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -255,11 +255,11 @@ rt {
|
||||||
background: var(--accent);
|
background: var(--accent);
|
||||||
|
|
||||||
&:not(:disabled):hover {
|
&:not(:disabled):hover {
|
||||||
background: var(--X8);
|
background: hsl(from var(--accent) h s calc(l + 5));
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not(:disabled):active {
|
&:not(:disabled):active {
|
||||||
background: var(--X9);
|
background: hsl(from var(--accent) h s calc(l - 5));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -269,11 +269,11 @@ rt {
|
||||||
background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
|
background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
|
||||||
|
|
||||||
&:not(:disabled):hover {
|
&:not(:disabled):hover {
|
||||||
background: linear-gradient(90deg, var(--X8), var(--X8));
|
background: linear-gradient(90deg, hsl(from var(--accent) h s calc(l + 5)), hsl(from var(--accent) h s calc(l + 5)));
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not(:disabled):active {
|
&:not(:disabled):active {
|
||||||
background: linear-gradient(90deg, var(--X8), var(--X8));
|
background: linear-gradient(90deg, hsl(from var(--accent) h s calc(l + 5)), hsl(from var(--accent) h s calc(l + 5)));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -77,20 +77,14 @@
|
||||||
codeBoolean: '#c59eff',
|
codeBoolean: '#c59eff',
|
||||||
deckBg: '#000',
|
deckBg: '#000',
|
||||||
htmlThemeColor: '@bg',
|
htmlThemeColor: '@bg',
|
||||||
X2: ':darken<2<@panel',
|
|
||||||
X3: 'rgba(255, 255, 255, 0.05)',
|
X3: 'rgba(255, 255, 255, 0.05)',
|
||||||
X4: 'rgba(255, 255, 255, 0.1)',
|
X4: 'rgba(255, 255, 255, 0.1)',
|
||||||
X5: 'rgba(255, 255, 255, 0.05)',
|
X5: 'rgba(255, 255, 255, 0.05)',
|
||||||
X6: 'rgba(255, 255, 255, 0.15)',
|
X6: 'rgba(255, 255, 255, 0.15)',
|
||||||
X7: 'rgba(255, 255, 255, 0.05)',
|
X7: 'rgba(255, 255, 255, 0.05)',
|
||||||
X8: ':lighten<5<@accent',
|
|
||||||
X9: ':darken<5<@accent',
|
|
||||||
X10: ':alpha<0.4<@accent',
|
|
||||||
X11: 'rgba(0, 0, 0, 0.3)',
|
X11: 'rgba(0, 0, 0, 0.3)',
|
||||||
X12: 'rgba(255, 255, 255, 0.1)',
|
X12: 'rgba(255, 255, 255, 0.1)',
|
||||||
X13: 'rgba(255, 255, 255, 0.15)',
|
X13: 'rgba(255, 255, 255, 0.15)',
|
||||||
X16: ':alpha<0.7<@panel',
|
|
||||||
X17: ':alpha<0.8<@bg',
|
|
||||||
},
|
},
|
||||||
|
|
||||||
codeHighlighter: {
|
codeHighlighter: {
|
||||||
|
|
|
@ -77,20 +77,14 @@
|
||||||
codeBoolean: '#62b70c',
|
codeBoolean: '#62b70c',
|
||||||
deckBg: ':darken<3<@bg',
|
deckBg: ':darken<3<@bg',
|
||||||
htmlThemeColor: '@bg',
|
htmlThemeColor: '@bg',
|
||||||
X2: ':darken<2<@panel',
|
|
||||||
X3: 'rgba(0, 0, 0, 0.05)',
|
X3: 'rgba(0, 0, 0, 0.05)',
|
||||||
X4: 'rgba(0, 0, 0, 0.1)',
|
X4: 'rgba(0, 0, 0, 0.1)',
|
||||||
X5: 'rgba(0, 0, 0, 0.05)',
|
X5: 'rgba(0, 0, 0, 0.05)',
|
||||||
X6: 'rgba(0, 0, 0, 0.25)',
|
X6: 'rgba(0, 0, 0, 0.25)',
|
||||||
X7: 'rgba(0, 0, 0, 0.05)',
|
X7: 'rgba(0, 0, 0, 0.05)',
|
||||||
X8: ':lighten<5<@accent',
|
|
||||||
X9: ':darken<5<@accent',
|
|
||||||
X10: ':alpha<0.4<@accent',
|
|
||||||
X11: 'rgba(0, 0, 0, 0.1)',
|
X11: 'rgba(0, 0, 0, 0.1)',
|
||||||
X12: 'rgba(0, 0, 0, 0.1)',
|
X12: 'rgba(0, 0, 0, 0.1)',
|
||||||
X13: 'rgba(0, 0, 0, 0.15)',
|
X13: 'rgba(0, 0, 0, 0.15)',
|
||||||
X16: ':alpha<0.7<@panel',
|
|
||||||
X17: ':alpha<0.8<@bg',
|
|
||||||
},
|
},
|
||||||
|
|
||||||
codeHighlighter: {
|
codeHighlighter: {
|
||||||
|
|
|
@ -57,20 +57,13 @@
|
||||||
wallpaperOverlay: 'rgba(0, 0, 0, 0.5)',
|
wallpaperOverlay: 'rgba(0, 0, 0, 0.5)',
|
||||||
panelHeaderDivider: 'rgba(0, 0, 0, 0)',
|
panelHeaderDivider: 'rgba(0, 0, 0, 0)',
|
||||||
scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)',
|
scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)',
|
||||||
X2: ':darken<2<@panel',
|
|
||||||
X3: 'rgba(255, 255, 255, 0.05)',
|
X3: 'rgba(255, 255, 255, 0.05)',
|
||||||
X4: 'rgba(255, 255, 255, 0.1)',
|
X4: 'rgba(255, 255, 255, 0.1)',
|
||||||
X5: 'rgba(255, 255, 255, 0.05)',
|
X5: 'rgba(255, 255, 255, 0.05)',
|
||||||
X6: 'rgba(255, 255, 255, 0.15)',
|
X6: 'rgba(255, 255, 255, 0.15)',
|
||||||
X7: 'rgba(255, 255, 255, 0.05)',
|
X7: 'rgba(255, 255, 255, 0.05)',
|
||||||
X8: ':lighten<5<@accent',
|
|
||||||
X9: ':darken<5<@accent',
|
|
||||||
X10: ':alpha<0.4<@accent',
|
|
||||||
X11: 'rgba(0, 0, 0, 0.3)',
|
X11: 'rgba(0, 0, 0, 0.3)',
|
||||||
X12: 'rgba(255, 255, 255, 0.1)',
|
X12: 'rgba(255, 255, 255, 0.1)',
|
||||||
X13: 'rgba(255, 255, 255, 0.15)',
|
X13: 'rgba(255, 255, 255, 0.15)',
|
||||||
X14: ':alpha<0.5<@navBg',
|
|
||||||
X15: ':alpha<0<@panel',
|
|
||||||
X16: ':alpha<0.7<@panel',
|
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
|
@ -3,14 +3,11 @@
|
||||||
base: 'dark',
|
base: 'dark',
|
||||||
name: 'Mi U0 Dark',
|
name: 'Mi U0 Dark',
|
||||||
props: {
|
props: {
|
||||||
X2: ':darken<2<@panel',
|
|
||||||
X3: 'rgba(255, 255, 255, 0.05)',
|
X3: 'rgba(255, 255, 255, 0.05)',
|
||||||
X4: 'rgba(255, 255, 255, 0.1)',
|
X4: 'rgba(255, 255, 255, 0.1)',
|
||||||
X5: 'rgba(255, 255, 255, 0.05)',
|
X5: 'rgba(255, 255, 255, 0.05)',
|
||||||
X6: 'rgba(255, 255, 255, 0.15)',
|
X6: 'rgba(255, 255, 255, 0.15)',
|
||||||
X7: 'rgba(255, 255, 255, 0.05)',
|
X7: 'rgba(255, 255, 255, 0.05)',
|
||||||
X8: ':lighten<5<@accent',
|
|
||||||
X9: ':darken<5<@accent',
|
|
||||||
bg: '#172426',
|
bg: '#172426',
|
||||||
fg: '#dadada',
|
fg: '#dadada',
|
||||||
X10: ':alpha<0.4<@accent',
|
X10: ':alpha<0.4<@accent',
|
||||||
|
|
|
@ -3,14 +3,11 @@
|
||||||
base: 'light',
|
base: 'light',
|
||||||
name: 'Mi U0 Light',
|
name: 'Mi U0 Light',
|
||||||
props: {
|
props: {
|
||||||
X2: ':darken<2<@panel',
|
|
||||||
X3: 'rgba(255, 255, 255, 0.05)',
|
X3: 'rgba(255, 255, 255, 0.05)',
|
||||||
X4: 'rgba(255, 255, 255, 0.1)',
|
X4: 'rgba(255, 255, 255, 0.1)',
|
||||||
X5: 'rgba(255, 255, 255, 0.05)',
|
X5: 'rgba(255, 255, 255, 0.05)',
|
||||||
X6: 'rgba(255, 255, 255, 0.15)',
|
X6: 'rgba(255, 255, 255, 0.15)',
|
||||||
X7: 'rgba(255, 255, 255, 0.05)',
|
X7: 'rgba(255, 255, 255, 0.05)',
|
||||||
X8: ':lighten<5<@accent',
|
|
||||||
X9: ':darken<5<@accent',
|
|
||||||
bg: '#e7e7eb',
|
bg: '#e7e7eb',
|
||||||
fg: '#5f5f5f',
|
fg: '#5f5f5f',
|
||||||
X10: ':alpha<0.4<@accent',
|
X10: ':alpha<0.4<@accent',
|
||||||
|
|
|
@ -60,21 +60,13 @@
|
||||||
fgTransparentWeak: ':alpha<0.75<@fg',
|
fgTransparentWeak: ':alpha<0.75<@fg',
|
||||||
panelHeaderDivider: '@divider',
|
panelHeaderDivider: '@divider',
|
||||||
scrollbarHandleHover: 'rgba(0, 0, 0, 0.4)',
|
scrollbarHandleHover: 'rgba(0, 0, 0, 0.4)',
|
||||||
X2: ':darken<2<@panel',
|
|
||||||
X3: 'rgba(0, 0, 0, 0.05)',
|
X3: 'rgba(0, 0, 0, 0.05)',
|
||||||
X4: 'rgba(0, 0, 0, 0.1)',
|
X4: 'rgba(0, 0, 0, 0.1)',
|
||||||
X5: 'rgba(0, 0, 0, 0.05)',
|
X5: 'rgba(0, 0, 0, 0.05)',
|
||||||
X6: 'rgba(0, 0, 0, 0.25)',
|
X6: 'rgba(0, 0, 0, 0.25)',
|
||||||
X7: 'rgba(0, 0, 0, 0.05)',
|
X7: 'rgba(0, 0, 0, 0.05)',
|
||||||
X8: ':lighten<5<@accent',
|
|
||||||
X9: ':darken<5<@accent',
|
|
||||||
X10: ':alpha<0.4<@accent',
|
|
||||||
X11: 'rgba(0, 0, 0, 0.1)',
|
X11: 'rgba(0, 0, 0, 0.1)',
|
||||||
X12: 'rgba(0, 0, 0, 0.1)',
|
X12: 'rgba(0, 0, 0, 0.1)',
|
||||||
X13: 'rgba(0, 0, 0, 0.15)',
|
X13: 'rgba(0, 0, 0, 0.15)',
|
||||||
X14: ':alpha<0.5<@navBg',
|
|
||||||
X15: ':alpha<0<@panel',
|
|
||||||
X16: ':alpha<0.7<@panel',
|
|
||||||
X17: ':alpha<0.8<@bg',
|
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
|
@ -450,7 +450,7 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
background: var(--X2);
|
background: hsl(from var(--panel) h s calc(l - 2));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -460,11 +460,11 @@ body {
|
||||||
color: var(--fgOnAccent);
|
color: var(--fgOnAccent);
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: linear-gradient(90deg, var(--X8), var(--X8));
|
background: linear-gradient(90deg, hsl(from var(--accent) h s calc(l + 5)), hsl(from var(--accent) h s calc(l + 5)));
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
background: linear-gradient(90deg, var(--X8), var(--X8));
|
background: linear-gradient(90deg, hsl(from var(--accent) h s calc(l + 5)), hsl(from var(--accent) h s calc(l + 5)));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -427,7 +427,7 @@ $widgets-hide-threshold: 1090px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
background: var(--X2);
|
background: hsl(from var(--panel) h s calc(l - 2));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -437,11 +437,11 @@ $widgets-hide-threshold: 1090px;
|
||||||
color: var(--fgOnAccent);
|
color: var(--fgOnAccent);
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: linear-gradient(90deg, var(--X8), var(--X8));
|
background: linear-gradient(90deg, hsl(from var(--accent) h s calc(l + 5)), hsl(from var(--accent) h s calc(l + 5)));
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
background: linear-gradient(90deg, var(--X8), var(--X8));
|
background: linear-gradient(90deg, hsl(from var(--accent) h s calc(l + 5)), hsl(from var(--accent) h s calc(l + 5)));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue