From 06b1250d4791dbc0c64c1d667e61a0c57a4d371f Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Fri, 26 May 2023 11:31:39 +0900
Subject: [PATCH] :art:
---
packages/frontend/src/themes/_dark.json5 | 2 +-
packages/frontend/src/themes/_light.json5 | 2 +-
packages/frontend/src/themes/d-u0.json5 | 2 +-
packages/frontend/src/ui/deck.vue | 11 +++++---
packages/frontend/src/ui/deck/column.vue | 33 +++++++++++++++++++++--
5 files changed, 41 insertions(+), 9 deletions(-)
diff --git a/packages/frontend/src/themes/_dark.json5 b/packages/frontend/src/themes/_dark.json5
index a23d25e866..b8820bcf86 100644
--- a/packages/frontend/src/themes/_dark.json5
+++ b/packages/frontend/src/themes/_dark.json5
@@ -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)',
diff --git a/packages/frontend/src/themes/_light.json5 b/packages/frontend/src/themes/_light.json5
index 713756221a..da3c770555 100644
--- a/packages/frontend/src/themes/_light.json5
+++ b/packages/frontend/src/themes/_light.json5
@@ -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)',
diff --git a/packages/frontend/src/themes/d-u0.json5 b/packages/frontend/src/themes/d-u0.json5
index b270f809ac..3fce93b2fe 100644
--- a/packages/frontend/src/themes/d-u0.json5
+++ b/packages/frontend/src/themes/d-u0.json5
@@ -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',
},
}
diff --git a/packages/frontend/src/ui/deck.vue b/packages/frontend/src/ui/deck.vue
index b91d6d7675..937bfe314f 100644
--- a/packages/frontend/src/ui/deck.vue
+++ b/packages/frontend/src/ui/deck.vue
@@ -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);
}
}
diff --git a/packages/frontend/src/ui/deck/column.vue b/packages/frontend/src/ui/deck/column.vue
index 869e2c0afd..73b0aa648f 100644
--- a/packages/frontend/src/ui/deck/column.vue
+++ b/packages/frontend/src/ui/deck/column.vue
@@ -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>