diff --git a/src/client/app.vue b/src/client/app.vue index beaad7f8dd5c878b1006e4c072d89353d7a2569f..233b2b17d44ab6ea92e87c546c47ddb0de1f4054 100644 --- a/src/client/app.vue +++ b/src/client/app.vue @@ -932,6 +932,7 @@ export default Vue.extend({ &.wallpaper { background: var(--wallpaperOverlay); + backdrop-filter: blur(4px); } > main { diff --git a/src/client/components/ui/container.vue b/src/client/components/ui/container.vue index 9d5abdf2dd5dfcbc64eaf038ee4285f30e002703..3fed1f65c710b8e620dca2f6de129943087dcbe0 100644 --- a/src/client/components/ui/container.vue +++ b/src/client/components/ui/container.vue @@ -109,8 +109,10 @@ export default Vue.extend({ > header { position: relative; - box-shadow: 0 1px 0 0 var(--divider); + box-shadow: 0 1px 0 0 var(--panelHeaderDivider); z-index: 1; + background: var(--panelHeaderBg); + color: var(--panelHeaderFg); > .title { margin: 0; diff --git a/src/client/style.scss b/src/client/style.scss index 12374f7126a89edcb85d4bded3f6177947230fd8..16cbc5fef5e8fd77c4dc0b2863577ddca6929e43 100644 --- a/src/client/style.scss +++ b/src/client/style.scss @@ -279,6 +279,8 @@ hr { position: relative; background: var(--panel); border-radius: var(--radius); + box-shadow: 0 0 0 1px var(--panelBorder); + overflow: hidden; } ._widget ._list_ ._panel { @@ -324,8 +326,10 @@ hr { margin: 0; padding: 22px 32px; font-size: 1.1em; - border-bottom: solid 1px var(--divider); + border-bottom: solid 1px var(--panelHeaderDivider); font-weight: bold; + background: var(--panelHeaderBg); + color: var(--panelHeaderFg); @media (max-width: 500px) { padding: 16px; @@ -381,7 +385,7 @@ hr { } ._fullinfo { - padding: 32px; + padding: 64px 32px; text-align: center; > img { diff --git a/src/client/themes/_dark.json5 b/src/client/themes/_dark.json5 index 12d1c0c4091fcb4ee12347c66f7ddc92d8e0baca..d6fb313c1c8b6b3432f67bdc95ac172a724f9563 100644 --- a/src/client/themes/_dark.json5 +++ b/src/client/themes/_dark.json5 @@ -16,8 +16,13 @@ fg: '#c7d1d8', fgHighlighted: ':lighten<3<@fg', html: '@bg', + divider: 'rgba(255, 255, 255, 0.1)', indicator: '@accent', panel: '#000', + panelHeaderBg: ':lighten<3<@panel', + panelHeaderFg: '@fg', + panelHeaderDivider: 'rgba(0, 0, 0, 0)', + panelBorder: 'rgba(0, 0, 0, 0)', shadow: 'rgba(0, 0, 0, 0.1)', header: 'rgba(20, 20, 20, 0.75)', navBg: '@panel', @@ -31,7 +36,6 @@ mentionMe: '@mention', renote: '#229e82', modalBg: 'rgba(0, 0, 0, 0.5)', - divider: 'rgba(255, 255, 255, 0.1)', scrollbarHandle: 'rgba(255, 255, 255, 0.2)', scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)', dateLabelFg: '@fg', diff --git a/src/client/themes/_light.json5 b/src/client/themes/_light.json5 index c998b1833bc22d7b4267b37292a4fbd179726ee4..16e932e80da9e4ac871dfc2f50a672387b7157f5 100644 --- a/src/client/themes/_light.json5 +++ b/src/client/themes/_light.json5 @@ -16,8 +16,13 @@ fg: '#5c6a73', fgHighlighted: ':darken<3<@fg', html: '@bg', + divider: 'rgba(0, 0, 0, 0.1)', indicator: '@accent', panel: '#fff', + panelHeaderBg: ':lighten<3<@panel', + panelHeaderFg: '@fg', + panelHeaderDivider: 'rgba(0, 0, 0, 0)', + panelBorder: 'rgba(0, 0, 0, 0)', shadow: 'rgba(0, 0, 0, 0.1)', header: 'rgba(255, 255, 255, 0.75)', navBg: '@panel', @@ -31,7 +36,6 @@ mentionMe: '@mention', renote: '#229e82', modalBg: 'rgba(0, 0, 0, 0.3)', - divider: 'rgba(0, 0, 0, 0.1)', scrollbarHandle: 'rgba(0, 0, 0, 0.2)', scrollbarHandleHover: 'rgba(0, 0, 0, 0.4)', dateLabelFg: '@fg', diff --git a/src/client/themes/black.json5 b/src/client/themes/black.json5 index 22dfeda5a0a02aa58c0a310e8b62fb030a933f07..33a9050f66ccd777eeeff5162aa7a206e25b1905 100644 --- a/src/client/themes/black.json5 +++ b/src/client/themes/black.json5 @@ -9,6 +9,9 @@ props: { divider: '#2d2d2d', + panelHeaderBg: '@panel', + panelHeaderDivider: '@divider', + panelBorder: '@divider', messageBg: '#1d1d1d', }, } diff --git a/src/client/themes/white.json5 b/src/client/themes/white.json5 index 0e35a8232e9ca2f8fd758e616aa824feeae357b8..5e2e1d7300429018c7ced35a7e7696715e5a3df9 100644 --- a/src/client/themes/white.json5 +++ b/src/client/themes/white.json5 @@ -8,6 +8,7 @@ base: 'light', props: { + panelHeaderDivider: '@divider', messageBg: '#dedede', }, }