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

feat: use flexboxes instead!

Browse source
This commit is contained in:
Twig 2025-07-05 17:13:17 +02:00
parent c03f72cecc
commit 1066822dd5
No known key found for this signature in database
1 changed files with 15 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -4,13 +4,13 @@
<p class="subtitle">THEMES</p> <p class="subtitle">THEMES</p>
<div class="themes"> <div class="themes">
<p v-for="theme of themes"> <div v-for="theme of themes" class="theme-preview-container">
<span class="theme-preview" :title="theme.displayName" :style="{background:`linear-gradient(${theme.previewGradient})`}"> <span class="theme-preview" :title="theme.displayName" :style="{background:`linear-gradient(${theme.previewGradient})`}">
<span class="theme-title" :style="{color:`${theme.complementaryColor}`}"> <span class="theme-title" :style="{color:`${theme.complementaryColor}`}">
{{ theme.displayName }} {{ theme.displayName }}
</span> </span>
</span> </span>
</p> </div>
</div> </div>
<p class="subtitle">ICONS</p> <p class="subtitle">ICONS</p>
@ -48,9 +48,19 @@ await fetchThemes()
</script> </script>
<style scoped> <style scoped>
.themes {
display: flex;
}
.theme-preview-container {
margin: .5em;
width: 5em;
height: 5em;
}
.theme-preview { .theme-preview {
min-width: 6em; width: 5em;
min-height: 6em; height: 5em;
border-radius: 100%; border-radius: 100%;
border: .1em solid var(--primary-color); border: .1em solid var(--primary-color);
@ -61,6 +71,6 @@ await fetchThemes()
.theme-title { .theme-title {
font-size: .8em; font-size: .8em;
line-height: 6em; /* same height as the parent to centre it vertically */ line-height: 5em; /* same height as the parent to centre it vertically */
} }
</style> </style>