Theme editor UI ajdustment

This commit is contained in:
Djeex
2025-08-19 11:52:38 +02:00
parent 2ec4be624b
commit 1ea94b469b
5 changed files with 101 additions and 40 deletions

View File

@ -51,40 +51,62 @@
<fieldset>
<h2>Colors</h2>
<div class="fields">
<!-- Example for one color field, repeat for all -->
<div class="input-field">
<label>Primary</label>
<input type="color" name="colors.primary" id="color-primary">
<input type="text" name="colors.primary_text" id="color-primary-text" style="width:100px;">
<div class="fields color-fields">
<button type="button" id="color-primary-btn" class="color-btn"></button>
<input type="color" name="colors.primary" id="color-primary" class="color-input">
<input type="text" name="colors.primary_text" id="color-primary-text" style="width:100px;">
</div>
</div>
<div class="input-field">
<label>Primary Dark</label>
<input type="color" name="colors.primary_dark" id="color-primary-dark">
<input type="text" name="colors.primary_dark_text" id="color-primary-dark-text" style="width:100px;">
<div class="fields color-fields">
<button type="button" id="color-primary-dark-btn" class="color-btn"></button>
<input type="color" name="colors.primary_dark" id="color-primary-dark" class="color-input">
<input type="text" name="colors.primary_dark_text" id="color-primary-dark-text" style="width:100px;">
</div>
</div>
<div class="input-field">
<label>Secondary</label>
<input type="color" name="colors.secondary" id="color-secondary">
<input type="text" name="colors.secondary_text" id="color-secondary-text" style="width:100px;">
<div class="fields color-fields">
<button type="button" id="color-secondary-btn" class="color-btn"></button>
<input type="color" name="colors.secondary" id="color-secondary" class="color-input">
<input type="text" name="colors.secondary_text" id="color-secondary-text" style="width:100px;">
</div>
</div>
<div class="input-field">
<label>Accent</label>
<input type="color" name="colors.accent" id="color-accent">
<input type="text" name="colors.accent_text" id="color-accent-text" style="width:100px;">
<div class="fields color-fields">
<button type="button" id="color-accent-btn" class="color-btn"></button>
<input type="color" name="colors.accent" id="color-accent" class="color-input">
<input type="text" name="colors.accent_text" id="color-accent-text" style="width:100px;">
</div>
</div>
<div class="input-field">
<label>Text Dark</label>
<input type="color" name="colors.text_dark" id="color-text-dark">
<input type="text" name="colors.text_dark_text" id="color-text-dark-text" style="width:100px;">
<div class="fields color-fields">
<button type="button" id="color-text-dark-btn" class="color-btn"></button>
<input type="color" name="colors.text_dark" id="color-text-dark" class="color-input">
<input type="text" name="colors.text_dark_text" id="color-text-dark-text" style="width:100px;">
</div>
</div>
<div class="input-field">
<label>Background</label>
<input type="color" name="colors.background" id="color-background">
<input type="text" name="colors.background_text" id="color-background-text" style="width:100px;">
<div class="fields color-fields">
<button type="button" id="color-background-btn" class="color-btn"></button>
<input type="color" name="colors.background" id="color-background" class="color-input">
<input type="text" name="colors.background_text" id="color-background-text" style="width:100px;">
</div>
</div>
<div class="input-field">
<label>Browser Color</label>
<input type="color" name="colors.browser_color" id="color-browser-color">
<input type="text" name="colors.browser_color_text" id="color-browser-color-text" style="width:100px;">
<div class="fields color-fields">
<button type="button" id="color-browser-color-btn" class="color-btn"></button>
<input type="color" name="colors.browser_color" id="color-browser-color" class="color-input">
<input type="text" name="colors.browser_color_text" id="color-browser-color-text" style="width:100px;">
</div>
</div>
</div>
</fieldset>