hj/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

fix firefox palettes

Browse source
This commit is contained in:
Henry Jameson 2024-12-31 13:52:40 +02:00
parent 09956cad2f
commit afa3410f46
2 changed files with 56 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/components/settings_modal/tabs/appearance_tab.scss
View file

@ -24,10 +24,7 @@
margin: 0.5em 0; margin: 0.5em 0;
} }
.palettes { .palettes-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 0.5em;
height: 15em; height: 15em;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
@ -35,7 +32,14 @@
border-radius: var(--roundness); border-radius: var(--roundness);
border: 1px solid var(--border); border: 1px solid var(--border);
margin: -0.5em; margin: -0.5em;
}
.palettes {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 0.5em;
padding: 0.5em; padding: 0.5em;
width: 100%;
h4 { h4 {
margin: 0; margin: 0;

94
src/components/settings_modal/tabs/appearance_tab.vue
View file

@ -93,56 +93,58 @@
<h2>{{ $t('settings.style.themes3.palette.label') }}</h2> <h2>{{ $t('settings.style.themes3.palette.label') }}</h2>
<div <div
v-if="customThemeVersion === 'v3'" v-if="customThemeVersion === 'v3'"
class="palettes" class="palettes-container"
> >
<h4 v-if="stylePalettes?.length > 0"> <h4 v-if="stylePalettes?.length > 0">
{{ $t('settings.style.themes3.palette.style') }} {{ $t('settings.style.themes3.palette.style') }}
</h4> </h4>
<button <div class="palettes">
v-for="p in stylePalettes || []" <button
:key="p.name" v-for="p in stylePalettes || []"
class="btn button-default palette-entry" :key="p.name"
:class="{ toggled: isPaletteActive(p.key), disabled: switchInProgress }" class="btn button-default palette-entry"
:disabled="switchInProgress" :class="{ toggled: isPaletteActive(p.key), disabled: switchInProgress }"
@click="() => setPalette(p.key, p)" :disabled="switchInProgress"
> @click="() => setPalette(p.key, p)"
<div class="palette-label"> >
<label> <div class="palette-label">
{{ p.name ?? $t('settings.style.themes3.palette.user') }} <label>
</label> {{ p.name ?? $t('settings.style.themes3.palette.user') }}
</div> </label>
<div class="palette-preview"> </div>
<span <div class="palette-preview">
v-for="c in palettesKeys" <span
:key="c" v-for="c in palettesKeys"
class="palette-square" :key="c"
:style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }" class="palette-square"
/> :style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }"
</div> />
</button> </div>
<h4>{{ $t('settings.style.themes3.palette.bundled') }}</h4> </button>
<button <h4>{{ $t('settings.style.themes3.palette.bundled') }}</h4>
v-for="p in bundledPalettes" <button
:key="p.name" v-for="p in bundledPalettes"
class="btn button-default palette-entry" :key="p.name"
:class="{ toggled: isPaletteActive(p.key), disabled: switchInProgress }" class="btn button-default palette-entry"
:disabled="switchInProgress" :class="{ toggled: isPaletteActive(p.key), disabled: switchInProgress }"
@click="() => setPalette(p.key, p)" :disabled="switchInProgress"
> @click="() => setPalette(p.key, p)"
<div class="palette-label"> >
<label> <div class="palette-label">
{{ p.name }} <label>
</label> {{ p.name }}
</div> </label>
<div class="palette-preview"> </div>
<span <div class="palette-preview">
v-for="c in palettesKeys" <span
:key="c" v-for="c in palettesKeys"
class="palette-square" :key="c"
:style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }" class="palette-square"
/> :style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }"
</div> />
</button> </div>
</button>
</div>
</div> </div>
<div> <div>
<template v-if="customThemeVersion === 'v3'"> <template v-if="customThemeVersion === 'v3'">