HoovesSocial/hippofish
2
0
Fork 0
Code Issues 3 Pull requests 1 Projects Releases Packages Wiki Activity Actions

🎨

Browse source
This commit is contained in:
syuilo 2023-05-26 11:31:39 +09:00
parent 31a7350a10
commit 06b1250d47
5 changed files with 41 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/frontend/src/themes/_dark.json5
View file

@ -77,7 +77,7 @@
codeString: '#ffb675', codeString: '#ffb675',
codeNumber: '#cfff9e', codeNumber: '#cfff9e',
codeBoolean: '#c59eff', codeBoolean: '#c59eff',
deckDivider: '#000', deckBg: '#000',
htmlThemeColor: '@bg', htmlThemeColor: '@bg',
X2: ':darken<2<@panel', X2: ':darken<2<@panel',
X3: 'rgba(255, 255, 255, 0.05)', X3: 'rgba(255, 255, 255, 0.05)',

2
packages/frontend/src/themes/_light.json5
View file

@ -77,7 +77,7 @@
codeString: '#b98710', codeString: '#b98710',
codeNumber: '#0fbbbb', codeNumber: '#0fbbbb',
codeBoolean: '#62b70c', codeBoolean: '#62b70c',
deckDivider: ':darken<3<@bg', deckBg: ':darken<3<@bg',
htmlThemeColor: '@bg', htmlThemeColor: '@bg',
X2: ':darken<2<@panel', X2: ':darken<2<@panel',
X3: 'rgba(0, 0, 0, 0.05)', X3: 'rgba(0, 0, 0, 0.05)',

2
packages/frontend/src/themes/d-u0.json5
View file

@ -83,6 +83,6 @@
fgTransparentWeak: ':alpha<0.75<@fg', fgTransparentWeak: ':alpha<0.75<@fg',
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)',
deckDivider: '#142022', deckBg: '#142022',
}, },
} }

11
packages/frontend/src/ui/deck.vue
View file

@ -282,7 +282,7 @@ async function deleteProfile() {
--margin: var(--marginHalf); --margin: var(--marginHalf);
--deckDividerThickness: 5px; --columnGap: 6px;
display: flex; display: flex;
height: 100dvh; height: 100dvh;
@ -306,6 +306,7 @@ async function deleteProfile() {
display: flex; display: flex;
overflow-x: auto; overflow-x: auto;
overflow-y: clip; overflow-y: clip;
background: var(--deckBg);
&.center { &.center {
> .section:first-of-type { > .section:first-of-type {
@ -327,14 +328,16 @@ async function deleteProfile() {
flex-direction: column; flex-direction: column;
scroll-snap-align: start; scroll-snap-align: start;
flex-shrink: 0; flex-shrink: 0;
border-right: solid var(--deckDividerThickness) var(--deckDivider); margin-top: var(--columnGap);
margin-bottom: var(--columnGap);
margin-right: var(--columnGap);
&:first-of-type { &:first-of-type {
border-left: solid var(--deckDividerThickness) var(--deckDivider); margin-left: var(--columnGap);
} }
> .column:not(:last-of-type) { > .column:not(:last-of-type) {
border-bottom: solid var(--deckDividerThickness) var(--deckDivider); margin-bottom: var(--columnGap);
} }
} }

33
packages/frontend/src/ui/deck/column.vue
View file

@ -15,9 +15,10 @@
> >
<svg viewBox="0 0 256 128" :class="$style.tabShape"> <svg viewBox="0 0 256 128" :class="$style.tabShape">
<g transform="matrix(6.2431,0,0,6.2431,-677.417,-29.3839)"> <g transform="matrix(6.2431,0,0,6.2431,-677.417,-29.3839)">
<path d="M149.512,4.707L108.507,4.707C116.252,4.719 118.758,14.958 118.758,14.958C118.758,14.958 121.381,25.283 129.009,25.209L149.512,25.209L149.512,4.707Z" style="fill:var(--deckDivider);"/> <path d="M149.512,4.707L108.507,4.707C116.252,4.719 118.758,14.958 118.758,14.958C118.758,14.958 121.381,25.283 129.009,25.209L149.512,25.209L149.512,4.707Z" style="fill:var(--deckBg);"/>
</g> </g>
</svg> </svg>
<div :class="$style.color"></div>
<button v-if="isStacked && !isMainColumn" :class="$style.toggleActive" class="_button" @click="toggleActive"> <button v-if="isStacked && !isMainColumn" :class="$style.toggleActive" class="_button" @click="toggleActive">
<template v-if="active"><i class="ti ti-chevron-up"></i></template> <template v-if="active"><i class="ti ti-chevron-up"></i></template>
<template v-else><i class="ti ti-chevron-down"></i></template> <template v-else><i class="ti ti-chevron-down"></i></template>
@ -240,6 +241,7 @@ function onDrop(ev) {
height: 100%; height: 100%;
overflow: clip; overflow: clip;
contain: strict; contain: strict;
border-radius: 8px;
&.draghover { &.draghover {
&:after { &:after {
@ -279,6 +281,7 @@ function onDrop(ev) {
&:not(.active) { &:not(.active) {
flex-basis: var(--deckColumnHeaderHeight); flex-basis: var(--deckColumnHeaderHeight);
min-height: var(--deckColumnHeaderHeight); min-height: var(--deckColumnHeaderHeight);
border-bottom-right-radius: 0;
} }
&.naked { &.naked {
@ -291,10 +294,22 @@ function onDrop(ev) {
box-shadow: none; box-shadow: none;
color: var(--fg); color: var(--fg);
} }
> .body {
&::-webkit-scrollbar-track {
background: inherit;
}
}
} }
&.paged { &.paged {
background: var(--bg) !important; background: var(--bg) !important;
> .body {
&::-webkit-scrollbar-track {
background: inherit;
}
}
} }
} }
@ -304,7 +319,7 @@ function onDrop(ev) {
z-index: 2; z-index: 2;
line-height: var(--deckColumnHeaderHeight); line-height: var(--deckColumnHeaderHeight);
height: var(--deckColumnHeaderHeight); height: var(--deckColumnHeaderHeight);
padding: 0 16px; padding: 0 16px 0 28px;
font-size: 0.9em; font-size: 0.9em;
color: var(--panelHeaderFg); color: var(--panelHeaderFg);
background: var(--panelHeaderBg); background: var(--panelHeaderBg);
@ -313,6 +328,16 @@ function onDrop(ev) {
user-select: none; user-select: none;
} }
.color {
position: absolute;
top: 10px;
left: 10px;
width: 3px;
height: calc(100% - 20px);
background: var(--accent);
border-radius: 999px;
}
.tabShape { .tabShape {
position: absolute; position: absolute;
top: 0; top: 0;
@ -364,5 +389,9 @@ function onDrop(ev) {
box-sizing: border-box; box-sizing: border-box;
container-type: size; container-type: size;
background-color: var(--bg); background-color: var(--bg);
&::-webkit-scrollbar-track {
background: var(--panel);
}
} }
</style> </style>