mirrors/barkey
1
0
Fork 0
mirror of https://codeberg.org/yeentown/barkey.git synced 2025-11-04 15:34:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

🎨

Browse source
This commit is contained in:
syuilo 2021-09-21 02:01:25 +09:00
parent 909a09a0c0
commit 78f95b5910
3 changed files with 74 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/client/themes/_dark.json5
View file

@ -12,6 +12,7 @@
accent: '#86b300', accent: '#86b300',
accentDarken: ':darken<10<@accent', accentDarken: ':darken<10<@accent',
accentLighten: ':lighten<10<@accent', accentLighten: ':lighten<10<@accent',
accentedBg: ':alpha<0.15<@accent',
focus: ':alpha<0.3<@accent', focus: ':alpha<0.3<@accent',
bg: '#000', bg: '#000',
acrylicBg: ':alpha<0.5<@bg', acrylicBg: ':alpha<0.5<@bg',

1
src/client/themes/_light.json5
View file

@ -12,6 +12,7 @@
accent: '#86b300', accent: '#86b300',
accentDarken: ':darken<10<@accent', accentDarken: ':darken<10<@accent',
accentLighten: ':lighten<10<@accent', accentLighten: ':lighten<10<@accent',
accentedBg: ':alpha<0.15<@accent',
focus: ':alpha<0.3<@accent', focus: ':alpha<0.3<@accent',
bg: '#fff', bg: '#fff',
acrylicBg: ':alpha<0.5<@bg', acrylicBg: ':alpha<0.5<@bg',

82
src/client/ui/_common_/sidebar.vue
View file

@ -263,22 +263,37 @@ export default defineComponent({
> .item { > .item {
padding-left: 0; padding-left: 0;
padding: 10px 0;
width: 100%; width: 100%;
text-align: center; text-align: center;
font-size: $ui-font-size * 1.1; font-size: $ui-font-size * 1.1;
line-height: 3.7rem; line-height: initial;
> i, > i,
> .avatar { > .avatar {
margin-right: 0; display: block;
margin: 0 auto;
} }
> i { > i {
left: 10px; opacity: 0.7;
} }
> .text { > .text {
display: none; display: inline-block;
font-size: 0.5em;
line-height: initial;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
opacity: 0.7;
}
&:hover, &.active {
> i, > .text {
opacity: 1;
}
} }
&:first-child { &:first-child {
@ -317,7 +332,7 @@ export default defineComponent({
background: var(--navBg); background: var(--navBg);
> .divider { > .divider {
margin: 16px 0; margin: 16px 16px;
border-top: solid 0.5px var(--divider); border-top: solid 0.5px var(--divider);
} }
@ -326,7 +341,7 @@ export default defineComponent({
display: block; display: block;
padding-left: 24px; padding-left: 24px;
font-size: $ui-font-size; font-size: $ui-font-size;
line-height: 3rem; line-height: 2.85rem;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
@ -336,6 +351,7 @@ export default defineComponent({
color: var(--navFg); color: var(--navFg);
> i { > i {
position: relative;
width: 32px; width: 32px;
} }
@ -359,6 +375,11 @@ export default defineComponent({
animation: blink 1s infinite; animation: blink 1s infinite;
} }
> .text {
position: relative;
font-size: 0.9em;
}
&:hover { &:hover {
text-decoration: none; text-decoration: none;
color: var(--navHoverFg); color: var(--navHoverFg);
@ -368,6 +389,23 @@ export default defineComponent({
color: var(--navActive); color: var(--navActive);
} }
&:hover, &.active {
&:before {
content: "";
display: block;
width: calc(100% - 20px);
height: 100%;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 8px;
background: var(--accentedBg);
}
}
&:first-child, &:last-child { &:first-child, &:last-child {
position: sticky; position: sticky;
z-index: 1; z-index: 1;
@ -380,14 +418,38 @@ export default defineComponent({
&:first-child { &:first-child {
top: 0; top: 0;
margin-bottom: 16px;
border-bottom: solid 0.5px var(--divider); &:hover, &.active {
&:before {
content: none;
}
}
} }
&:last-child { &:last-child {
bottom: 0; bottom: 0;
margin-top: 16px; color: var(--fgOnAccent);
border-top: solid 0.5px var(--divider);
&:before {
content: "";
display: block;
width: calc(100% - 20px);
height: calc(100% - 20px);
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 999px;
background: var(--accent);
}
&:hover, &.active {
&:before {
background: var(--accentLighten);
}
}
} }
} }
} }