🎨
This commit is contained in:
parent
ca967e83bd
commit
1d8bfe4f1c
7 changed files with 17 additions and 19 deletions
|
@ -53,11 +53,13 @@
|
||||||
infoFg: '#fff',
|
infoFg: '#fff',
|
||||||
infoWarnBg: '#42321c',
|
infoWarnBg: '#42321c',
|
||||||
infoWarnFg: '#ffbd3e',
|
infoWarnFg: '#ffbd3e',
|
||||||
switchBg: 'rgba(255, 255, 255, 0.15)',
|
folderHeaderBg: 'rgba(255, 255, 255, 0.05)',
|
||||||
buttonBg: 'rgba(255, 255, 255, 0.05)',
|
folderHeaderHoverBg: 'rgba(255, 255, 255, 0.1)',
|
||||||
buttonHoverBg: 'rgba(255, 255, 255, 0.1)',
|
buttonBg: ':lighten<5<@panel',
|
||||||
|
buttonHoverBg: ':lighten<10<@panel',
|
||||||
buttonGradateA: '@accent',
|
buttonGradateA: '@accent',
|
||||||
buttonGradateB: ':hue<20<@accent',
|
buttonGradateB: ':hue<20<@accent',
|
||||||
|
switchBg: 'rgba(255, 255, 255, 0.15)',
|
||||||
switchOffBg: 'rgba(255, 255, 255, 0.1)',
|
switchOffBg: 'rgba(255, 255, 255, 0.1)',
|
||||||
switchOffFg: ':alpha<0.8<@fg',
|
switchOffFg: ':alpha<0.8<@fg',
|
||||||
switchOnBg: '@accentedBg',
|
switchOnBg: '@accentedBg',
|
||||||
|
|
|
@ -53,11 +53,13 @@
|
||||||
infoFg: '#72818a',
|
infoFg: '#72818a',
|
||||||
infoWarnBg: '#fff0db',
|
infoWarnBg: '#fff0db',
|
||||||
infoWarnFg: '#8f6e31',
|
infoWarnFg: '#8f6e31',
|
||||||
switchBg: 'rgba(0, 0, 0, 0.15)',
|
folderHeaderBg: 'rgba(0, 0, 0, 0.05)',
|
||||||
buttonBg: 'rgba(0, 0, 0, 0.05)',
|
folderHeaderHoverBg: 'rgba(0, 0, 0, 0.1)',
|
||||||
buttonHoverBg: 'rgba(0, 0, 0, 0.1)',
|
buttonBg: ':darken<5<@panel',
|
||||||
|
buttonHoverBg: ':darken<10<@panel',
|
||||||
buttonGradateA: '@accent',
|
buttonGradateA: '@accent',
|
||||||
buttonGradateB: ':hue<20<@accent',
|
buttonGradateB: ':hue<20<@accent',
|
||||||
|
switchBg: 'rgba(0, 0, 0, 0.15)',
|
||||||
switchOffBg: 'rgba(0, 0, 0, 0.1)',
|
switchOffBg: 'rgba(0, 0, 0, 0.1)',
|
||||||
switchOffFg: '@panel',
|
switchOffFg: '@panel',
|
||||||
switchOnBg: '@accent',
|
switchOnBg: '@accent',
|
||||||
|
|
|
@ -25,7 +25,6 @@
|
||||||
mention: '#ffd152',
|
mention: '#ffd152',
|
||||||
modalBg: 'rgba(0, 0, 0, 0.5)',
|
modalBg: 'rgba(0, 0, 0, 0.5)',
|
||||||
success: '#86b300',
|
success: '#86b300',
|
||||||
buttonBg: 'rgba(255, 255, 255, 0.05)',
|
|
||||||
acrylicBg: ':alpha<0.5<@bg',
|
acrylicBg: ':alpha<0.5<@bg',
|
||||||
indicator: '@accent',
|
indicator: '@accent',
|
||||||
mentionMe: '#fb5d38',
|
mentionMe: '#fb5d38',
|
||||||
|
@ -42,7 +41,6 @@
|
||||||
acrylicPanel: ':alpha<0.5<@panel',
|
acrylicPanel: ':alpha<0.5<@panel',
|
||||||
navIndicator: '@accent',
|
navIndicator: '@accent',
|
||||||
accentLighten: ':lighten<10<@accent',
|
accentLighten: ':lighten<10<@accent',
|
||||||
buttonHoverBg: 'rgba(255, 255, 255, 0.1)',
|
|
||||||
buttonGradateA: '@accent',
|
buttonGradateA: '@accent',
|
||||||
buttonGradateB: ':hue<-20<@accent',
|
buttonGradateB: ':hue<-20<@accent',
|
||||||
driveFolderBg: ':alpha<0.3<@accent',
|
driveFolderBg: ':alpha<0.3<@accent',
|
||||||
|
|
|
@ -38,7 +38,6 @@
|
||||||
mention: '@accent',
|
mention: '@accent',
|
||||||
modalBg: 'rgba(0, 0, 0, 0.5)',
|
modalBg: 'rgba(0, 0, 0, 0.5)',
|
||||||
success: '#86b300',
|
success: '#86b300',
|
||||||
buttonBg: 'rgba(255, 255, 255, 0.05)',
|
|
||||||
switchBg: 'rgba(255, 255, 255, 0.15)',
|
switchBg: 'rgba(255, 255, 255, 0.15)',
|
||||||
acrylicBg: ':alpha<0.5<@bg',
|
acrylicBg: ':alpha<0.5<@bg',
|
||||||
indicator: '@accent',
|
indicator: '@accent',
|
||||||
|
@ -61,7 +60,6 @@
|
||||||
acrylicPanel: ':alpha<0.5<@panel',
|
acrylicPanel: ':alpha<0.5<@panel',
|
||||||
navIndicator: '@indicator',
|
navIndicator: '@indicator',
|
||||||
accentLighten: ':lighten<10<@accent',
|
accentLighten: ':lighten<10<@accent',
|
||||||
buttonHoverBg: 'rgba(255, 255, 255, 0.1)',
|
|
||||||
driveFolderBg: ':alpha<0.3<@accent',
|
driveFolderBg: ':alpha<0.3<@accent',
|
||||||
fgHighlighted: ':lighten<3<@fg',
|
fgHighlighted: ':lighten<3<@fg',
|
||||||
fgTransparent: ':alpha<0.5<@fg',
|
fgTransparent: ':alpha<0.5<@fg',
|
||||||
|
|
|
@ -28,7 +28,6 @@
|
||||||
mention: '@accent',
|
mention: '@accent',
|
||||||
modalBg: 'rgba(0, 0, 0, 0.3)',
|
modalBg: 'rgba(0, 0, 0, 0.3)',
|
||||||
success: '#86b300',
|
success: '#86b300',
|
||||||
buttonBg: 'rgba(0, 0, 0, 0.05)',
|
|
||||||
acrylicBg: ':alpha<0.5<@bg',
|
acrylicBg: ':alpha<0.5<@bg',
|
||||||
indicator: '@accent',
|
indicator: '@accent',
|
||||||
mentionMe: '@mention',
|
mentionMe: '@mention',
|
||||||
|
@ -45,7 +44,6 @@
|
||||||
acrylicPanel: ':alpha<0.5<@panel',
|
acrylicPanel: ':alpha<0.5<@panel',
|
||||||
navIndicator: '@accent',
|
navIndicator: '@accent',
|
||||||
accentLighten: ':lighten<10<@accent',
|
accentLighten: ':lighten<10<@accent',
|
||||||
buttonHoverBg: 'rgba(0, 0, 0, 0.1)',
|
|
||||||
driveFolderBg: ':alpha<0.3<@accent',
|
driveFolderBg: ':alpha<0.3<@accent',
|
||||||
fgHighlighted: ':darken<3<@fg',
|
fgHighlighted: ':darken<3<@fg',
|
||||||
fgTransparent: ':alpha<0.5<@fg',
|
fgTransparent: ':alpha<0.5<@fg',
|
||||||
|
|
|
@ -139,7 +139,7 @@ onMounted(() => {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: 9px 12px 9px 12px;
|
padding: 9px 12px 9px 12px;
|
||||||
background: var(--buttonBg);
|
background: var(--folderHeaderBg);
|
||||||
-webkit-backdrop-filter: var(--blur, blur(15px));
|
-webkit-backdrop-filter: var(--blur, blur(15px));
|
||||||
backdrop-filter: var(--blur, blur(15px));
|
backdrop-filter: var(--blur, blur(15px));
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
|
@ -147,7 +147,7 @@ onMounted(() => {
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
background: var(--buttonHoverBg);
|
background: var(--folderHeaderHoverBg);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus-within {
|
&:focus-within {
|
||||||
|
@ -156,7 +156,7 @@ onMounted(() => {
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
color: var(--accent);
|
color: var(--accent);
|
||||||
background: var(--buttonHoverBg);
|
background: var(--folderHeaderHoverBg);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.opened {
|
&.opened {
|
||||||
|
@ -233,7 +233,7 @@ onMounted(() => {
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
bottom: var(--stickyBottom, 0px);
|
bottom: var(--stickyBottom, 0px);
|
||||||
left: 0;
|
left: 0;
|
||||||
padding: 9px 12px;
|
padding: 12px;
|
||||||
background: var(--acrylicBg);
|
background: var(--acrylicBg);
|
||||||
-webkit-backdrop-filter: var(--blur, blur(15px));
|
-webkit-backdrop-filter: var(--blur, blur(15px));
|
||||||
backdrop-filter: var(--blur, blur(15px));
|
backdrop-filter: var(--blur, blur(15px));
|
||||||
|
|
|
@ -51,18 +51,18 @@ const props = defineProps<{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: 10px 14px;
|
padding: 10px 14px;
|
||||||
background: var(--buttonBg);
|
background: var(--folderHeaderBg);
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
background: var(--buttonHoverBg);
|
background: var(--folderHeaderHoverBg);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
color: var(--accent);
|
color: var(--accent);
|
||||||
background: var(--buttonHoverBg);
|
background: var(--folderHeaderHoverBg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue