diff --git a/packages/frontend/src/themes/_dark.json5 b/packages/frontend/src/themes/_dark.json5 index a23d25e86..b8820bcf8 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 713756221..da3c77055 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 b270f809a..3fce93b2f 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 b91d6d767..937bfe314 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 869e2c0af..73b0aa648 100644 --- a/packages/frontend/src/ui/deck/column.vue +++ b/packages/frontend/src/ui/deck/column.vue @@ -15,9 +15,10 @@ > +