diff --git a/packages/frontend/src/components/MkContainer.vue b/packages/frontend/src/components/MkContainer.vue index 1b62a697e..a6372b7b6 100644 --- a/packages/frontend/src/components/MkContainer.vue +++ b/packages/frontend/src/components/MkContainer.vue @@ -185,6 +185,7 @@ export default defineComponent({ left: 0; color: var(--panelHeaderFg); background: var(--panelHeaderBg); + border-bottom: solid 0.5px var(--panelHeaderDivider); z-index: 2; line-height: 1.4em; } diff --git a/packages/frontend/src/themes/_dark.json5 b/packages/frontend/src/themes/_dark.json5 index aea814820..a23d25e86 100644 --- a/packages/frontend/src/themes/_dark.json5 +++ b/packages/frontend/src/themes/_dark.json5 @@ -27,6 +27,7 @@ panelHighlight: ':lighten<3<@panel', panelHeaderBg: ':lighten<3<@panel', panelHeaderFg: '@fg', + panelHeaderDivider: 'rgba(0, 0, 0, 0)', panelBorder: '" solid 1px var(--divider)', acrylicPanel: ':alpha<0.5<@panel', windowHeader: ':alpha<0.85<@panel', diff --git a/packages/frontend/src/themes/_light.json5 b/packages/frontend/src/themes/_light.json5 index a8b548967..713756221 100644 --- a/packages/frontend/src/themes/_light.json5 +++ b/packages/frontend/src/themes/_light.json5 @@ -27,6 +27,7 @@ panelHighlight: ':darken<3<@panel', panelHeaderBg: ':lighten<3<@panel', panelHeaderFg: '@fg', + panelHeaderDivider: 'rgba(0, 0, 0, 0)', panelBorder: '" solid 1px var(--divider)', acrylicPanel: ':alpha<0.5<@panel', windowHeader: ':alpha<0.85<@panel', diff --git a/packages/frontend/src/themes/d-astro.json5 b/packages/frontend/src/themes/d-astro.json5 index 86a8403bb..c6a927ec3 100644 --- a/packages/frontend/src/themes/d-astro.json5 +++ b/packages/frontend/src/themes/d-astro.json5 @@ -57,6 +57,7 @@ listItemHoverBg: 'rgba(255, 255, 255, 0.03)', scrollbarHandle: 'rgba(255, 255, 255, 0.2)', wallpaperOverlay: 'rgba(0, 0, 0, 0.5)', + panelHeaderDivider: 'rgba(0, 0, 0, 0)', scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)', X2: ':darken<2<@panel', X3: 'rgba(255, 255, 255, 0.05)', diff --git a/packages/frontend/src/themes/d-botanical.json5 b/packages/frontend/src/themes/d-botanical.json5 index b98908984..c03b95e2d 100644 --- a/packages/frontend/src/themes/d-botanical.json5 +++ b/packages/frontend/src/themes/d-botanical.json5 @@ -13,6 +13,8 @@ fgHighlighted: '#fff', divider: 'rgba(255, 255, 255, 0.14)', panel: 'rgb(47, 47, 44)', + panelHeaderBg: '@panel', + panelHeaderDivider: '@divider', header: ':alpha<0.7<@panel', navBg: '#363636', renote: '@accent', diff --git a/packages/frontend/src/themes/d-dark.json5 b/packages/frontend/src/themes/d-dark.json5 index 354b999d2..d24ce4df6 100644 --- a/packages/frontend/src/themes/d-dark.json5 +++ b/packages/frontend/src/themes/d-dark.json5 @@ -13,6 +13,8 @@ fgHighlighted: '#fff', divider: 'rgba(255, 255, 255, 0.14)', panel: '#2d2d2d', + panelHeaderBg: '@panel', + panelHeaderDivider: '@divider', header: ':alpha<0.7<@panel', navBg: '#363636', renote: '@accent', diff --git a/packages/frontend/src/themes/d-future.json5 b/packages/frontend/src/themes/d-future.json5 index ac1d3166b..b6fa1ab0c 100644 --- a/packages/frontend/src/themes/d-future.json5 +++ b/packages/frontend/src/themes/d-future.json5 @@ -14,6 +14,8 @@ fgOnAccent: '#000', divider: 'rgba(255, 255, 255, 0.1)', panel: '#18181c', + panelHeaderBg: '@panel', + panelHeaderDivider: '@divider', renote: '@accent', mention: '#f2c97d', mentionMe: '@accent', diff --git a/packages/frontend/src/themes/d-green-lime.json5 b/packages/frontend/src/themes/d-green-lime.json5 index 17629190d..a6983b9ac 100644 --- a/packages/frontend/src/themes/d-green-lime.json5 +++ b/packages/frontend/src/themes/d-green-lime.json5 @@ -14,6 +14,8 @@ fgOnAccent: '#192320', divider: '#e7fffb24', panel: '#192320', + panelHeaderBg: '@panel', + panelHeaderDivider: '@divider', popup: '#293330', renote: '@accent', mentionMe: '#ffaa00', diff --git a/packages/frontend/src/themes/d-green-orange.json5 b/packages/frontend/src/themes/d-green-orange.json5 index bddcc242e..62adc39e2 100644 --- a/packages/frontend/src/themes/d-green-orange.json5 +++ b/packages/frontend/src/themes/d-green-orange.json5 @@ -14,6 +14,8 @@ fgOnAccent: '#192320', divider: '#e7fffb24', panel: '#192320', + panelHeaderBg: '@panel', + panelHeaderDivider: '@divider', popup: '#293330', renote: '@accent', mentionMe: '#b4e900', diff --git a/packages/frontend/src/themes/d-u0.json5 b/packages/frontend/src/themes/d-u0.json5 index fb9b36663..b270f809a 100644 --- a/packages/frontend/src/themes/d-u0.json5 +++ b/packages/frontend/src/themes/d-u0.json5 @@ -81,6 +81,7 @@ inputBorderHover: 'rgba(255, 255, 255, 0.2)', wallpaperOverlay: 'rgba(0, 0, 0, 0.5)', fgTransparentWeak: ':alpha<0.75<@fg', + panelHeaderDivider: 'rgba(0, 0, 0, 0)', scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)', deckDivider: '#142022', }, diff --git a/packages/frontend/src/themes/l-botanical.json5 b/packages/frontend/src/themes/l-botanical.json5 index 70089a55d..2ea9a7d6c 100644 --- a/packages/frontend/src/themes/l-botanical.json5 +++ b/packages/frontend/src/themes/l-botanical.json5 @@ -13,6 +13,8 @@ fgHighlighted: '#6bc9a0', divider: '#cfcfcf', panel: '@X14', + panelHeaderBg: '@panel', + panelHeaderDivider: '@divider', header: ':alpha<0.7<@panel', navBg: '@X14', renote: '#229e92', diff --git a/packages/frontend/src/themes/l-light.json5 b/packages/frontend/src/themes/l-light.json5 index cd9f0c477..248355c94 100644 --- a/packages/frontend/src/themes/l-light.json5 +++ b/packages/frontend/src/themes/l-light.json5 @@ -14,6 +14,7 @@ header: ':alpha<0.7<@panel', navBg: '#fff', panel: '#fff', + panelHeaderDivider: '@divider', mentionMe: 'rgb(0, 179, 70)', }, } diff --git a/packages/frontend/src/themes/l-rainy.json5 b/packages/frontend/src/themes/l-rainy.json5 index 8bc63ee43..283dd74c6 100644 --- a/packages/frontend/src/themes/l-rainy.json5 +++ b/packages/frontend/src/themes/l-rainy.json5 @@ -12,6 +12,7 @@ fg: '#636b71', panel: '#fff', divider: 'rgb(230 233 234)', + panelHeaderDivider: '@divider', renote: '@accent', link: '@accent', mention: '@accent', diff --git a/packages/frontend/src/themes/l-u0.json5 b/packages/frontend/src/themes/l-u0.json5 index 2cb79791b..03b114ba3 100644 --- a/packages/frontend/src/themes/l-u0.json5 +++ b/packages/frontend/src/themes/l-u0.json5 @@ -81,6 +81,7 @@ inputBorderHover: 'rgba(255, 255, 255, 0.2)', wallpaperOverlay: 'rgba(0, 0, 0, 0.5)', fgTransparentWeak: ':alpha<0.75<@fg', + panelHeaderDivider: 'rgba(0, 0, 0, 0)', scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)', }, } diff --git a/packages/frontend/src/themes/l-vivid.json5 b/packages/frontend/src/themes/l-vivid.json5 index 0ff087f47..b3c08f38a 100644 --- a/packages/frontend/src/themes/l-vivid.json5 +++ b/packages/frontend/src/themes/l-vivid.json5 @@ -60,6 +60,7 @@ scrollbarHandle: 'rgba(0, 0, 0, 0.2)', wallpaperOverlay: 'rgba(255, 255, 255, 0.5)', fgTransparentWeak: ':alpha<0.75<@fg', + panelHeaderDivider: '@divider', scrollbarHandleHover: 'rgba(0, 0, 0, 0.4)', X2: ':darken<2<@panel', X3: 'rgba(0, 0, 0, 0.05)', diff --git a/packages/frontend/src/ui/deck/column.vue b/packages/frontend/src/ui/deck/column.vue index 7f6004ba6..e895847bd 100644 --- a/packages/frontend/src/ui/deck/column.vue +++ b/packages/frontend/src/ui/deck/column.vue @@ -316,8 +316,12 @@ function onDrop(ev) { font-size: 0.9em; color: var(--panelHeaderFg); background: var(--panelHeaderBg); + box-shadow: 0 1px 0 0 var(--panelHeaderDivider); cursor: pointer; - user-select: none; + + &, * { + user-select: none; + } } .title {