mirror/hotomoe
1
0
Fork 0
mirror of https://github.com/hotomoe/hotomoe synced 2024-12-02 00:38:14 +09:00
Code

🎨

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',
codeNumber: '#cfff9e',
codeBoolean: '#c59eff',
deckDivider: '#000',
deckBg: '#000',
htmlThemeColor: '@bg',
X2: ':darken<2<@panel',
X3: 'rgba(255, 255, 255, 0.05)',

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

@ -77,7 +77,7 @@
codeString: '#b98710',
codeNumber: '#0fbbbb',
codeBoolean: '#62b70c',
deckDivider: ':darken<3<@bg',
deckBg: ':darken<3<@bg',
htmlThemeColor: '@bg',
X2: ':darken<2<@panel',
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',
panelHeaderDivider: 'rgba(0, 0, 0, 0)',
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);
--deckDividerThickness: 5px;
--columnGap: 6px;
display: flex;
height: 100dvh;
@ -306,6 +306,7 @@ async function deleteProfile() {
display: flex;
overflow-x: auto;
overflow-y: clip;
background: var(--deckBg);
&.center {
> .section:first-of-type {
@ -327,14 +328,16 @@ async function deleteProfile() {
flex-direction: column;
scroll-snap-align: start;
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 {
border-left: solid var(--deckDividerThickness) var(--deckDivider);
margin-left: var(--columnGap);
}
> .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">
<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>
</svg>
<div :class="$style.color"></div>
<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-else><i class="ti ti-chevron-down"></i></template>
@ -240,6 +241,7 @@ function onDrop(ev) {
height: 100%;
overflow: clip;
contain: strict;
border-radius: 8px;
&.draghover {
&:after {
@ -279,6 +281,7 @@ function onDrop(ev) {
&:not(.active) {
flex-basis: var(--deckColumnHeaderHeight);
min-height: var(--deckColumnHeaderHeight);
border-bottom-right-radius: 0;
}
&.naked {
@ -291,10 +294,22 @@ function onDrop(ev) {
box-shadow: none;
color: var(--fg);
}
> .body {
&::-webkit-scrollbar-track {
background: inherit;
}
}
}
&.paged {
background: var(--bg) !important;
> .body {
&::-webkit-scrollbar-track {
background: inherit;
}
}
}
}
@ -304,7 +319,7 @@ function onDrop(ev) {
z-index: 2;
line-height: var(--deckColumnHeaderHeight);
height: var(--deckColumnHeaderHeight);
padding: 0 16px;
padding: 0 16px 0 28px;
font-size: 0.9em;
color: var(--panelHeaderFg);
background: var(--panelHeaderBg);
@ -313,6 +328,16 @@ function onDrop(ev) {
user-select: none;
}
.color {
position: absolute;
top: 10px;
left: 10px;
width: 3px;
height: calc(100% - 20px);
background: var(--accent);
border-radius: 999px;
}
.tabShape {
position: absolute;
top: 0;
@ -364,5 +389,9 @@ function onDrop(ev) {
box-sizing: border-box;
container-type: size;
background-color: var(--bg);
&::-webkit-scrollbar-track {
background: var(--panel);
}
}
</style>