diff --git a/components/Settings/AppSettings/Appearance.vue b/components/Settings/AppSettings/Appearance.vue index 3fa1bc1..1d93ed6 100644 --- a/components/Settings/AppSettings/Appearance.vue +++ b/components/Settings/AppSettings/Appearance.vue @@ -34,6 +34,7 @@ {{ layout.displayName }} + @@ -236,6 +237,27 @@ async function onTimeFormatClicked(index: number) { filter: brightness(35%); } +.layout-preview { + position: absolute; + pointer-events: none; + + border: 0 solid var(--primary-color); + transform: translate(0, calc(var(--instance-size) / 2)); + transition: all 250ms; + + height: 0; + width: calc((height / 9) * 16); + max-height: 40dvh; +} + +.theme-instance:hover .layout-preview { + border: .1em solid var(--primary-color); + filter: drop-shadow(0 0 .2em var(--secondary-color)); + transform: translate(3.5em, -4em); + + height: 40dvw; +} + .theme-title { position: absolute; diff --git a/public/themes/layout/gorb.jpg b/public/themes/layout/gorb.jpg index dd2c0a2..301d459 100644 Binary files a/public/themes/layout/gorb.jpg and b/public/themes/layout/gorb.jpg differ