diff --git a/src/client/app.vue b/src/client/app.vue index beaad7f8dd..233b2b17d4 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 9d5abdf2dd..3fed1f65c7 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 12374f7126..16cbc5fef5 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 12d1c0c409..d6fb313c1c 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 c998b1833b..16e932e80d 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 22dfeda5a0..33a9050f66 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 0e35a8232e..5e2e1d7300 100644 --- a/src/client/themes/white.json5 +++ b/src/client/themes/white.json5 @@ -8,6 +8,7 @@ base: 'light', props: { + panelHeaderDivider: '@divider', messageBg: '#dedede', }, }