🎨

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)',

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)',

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',
 	},
 }

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);
 	}
 }
 

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>