🎨

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>