gorb/frontend
4
0
Fork 0
Code Issues 15 Pull requests 8 Projects Releases Packages 1 Wiki Activity Actions

implement layout previews
All checks were successful
ci/woodpecker/push/build-and-publish Pipeline was successful
Details

Browse source
This commit is contained in:
Twig 2025-08-05 03:02:38 +02:00
parent 37ebcb74aa
commit d5b2b43bf5
Signed by: twig
SSH key fingerprint: SHA256:nBO+OwpTkd8LYhe38PIqdxmDvkIg9Vw2EbrRZM97dkU
2 changed files with 22 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

22
components/Settings/AppSettings/Appearance.vue
View file

@ -34,6 +34,7 @@
<span class="theme-title" :style="{color:`${layout.complementaryColor}`}">
{{ layout.displayName }}
</span>
<NuxtImg class="layout-preview" :src="layout.previewImageUrl"></NuxtImg>
</div>
</div>
</div>
@ -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;