ferdi2go/Pigmento
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: finales CSS-Finishing, inline styles zu CSS-Klassen

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Ferdinand
2026-04-02 10:40:25 +02:00
parent d9675f672d
commit 056d6c92a6
4 changed files with 42 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
index.html
View File

@@ -42,7 +42,7 @@
<input id="picker-hsl" type="text" readonly> <input id="picker-hsl" type="text" readonly>
</div> </div>
</div> </div>
<div style="display:flex;gap:0.5rem"> <div class="btn-row">
<button class="action-btn" id="picker-fav-btn">Zu Favoriten</button> <button class="action-btn" id="picker-fav-btn">Zu Favoriten</button>
<button class="action-btn" id="picker-schema-btn">Zu Schema hinzufügen</button> <button class="action-btn" id="picker-schema-btn">Zu Schema hinzufügen</button>
</div> </div>
@@ -65,7 +65,7 @@
<input id="eingabe-hsl" type="text" value="204, 54%, 49%"> <input id="eingabe-hsl" type="text" value="204, 54%, 49%">
</div> </div>
</div> </div>
<div style="display:flex;gap:0.5rem"> <div class="btn-row">
<button class="action-btn" id="eingabe-fav-btn">Zu Favoriten</button> <button class="action-btn" id="eingabe-fav-btn">Zu Favoriten</button>
<button class="action-btn" id="eingabe-schema-btn">Zu Schema hinzufügen</button> <button class="action-btn" id="eingabe-schema-btn">Zu Schema hinzufügen</button>
</div> </div>
@@ -79,7 +79,7 @@
<section id="tab-sammlung" class="tab-content"> <section id="tab-sammlung" class="tab-content">
<h2>Sammlung</h2> <h2>Sammlung</h2>
<div style="display:flex;gap:0.5rem;margin-bottom:1.5rem"> <div class="btn-row" style="margin-bottom:1.5rem">
<button class="action-btn" id="sammlung-export-btn">Exportieren</button> <button class="action-btn" id="sammlung-export-btn">Exportieren</button>
<button class="action-btn" id="sammlung-import-btn">Importieren</button> <button class="action-btn" id="sammlung-import-btn">Importieren</button>
</div> </div>

6
js/collection.js
View File

@@ -135,7 +135,7 @@ function makeSwatch(hsl) {
const hex = hslToHex(hsl); const hex = hslToHex(hsl);
const wrapper = document.createElement('div'); const wrapper = document.createElement('div');
wrapper.style.cssText = 'display:inline-flex;flex-direction:column;align-items:center;gap:0.25rem'; wrapper.className = 'swatch-cell';
const swatch = document.createElement('div'); const swatch = document.createElement('div');
swatch.className = 'swatch'; swatch.className = 'swatch';
@@ -167,7 +167,7 @@ export function renderSammlung() {
data.favoriten.forEach(hsl => { data.favoriten.forEach(hsl => {
const hex = hslToHex(hsl); const hex = hslToHex(hsl);
const cell = document.createElement('div'); const cell = document.createElement('div');
cell.style.cssText = 'display:inline-flex;flex-direction:column;align-items:center;gap:0.25rem;margin:0.25rem'; cell.className = 'swatch-cell';
cell.appendChild(makeSwatch(hsl)); cell.appendChild(makeSwatch(hsl));
const del = document.createElement('button'); const del = document.createElement('button');
@@ -193,7 +193,7 @@ export function renderSammlung() {
} else { } else {
data.history.forEach(hsl => { data.history.forEach(hsl => {
const cell = document.createElement('div'); const cell = document.createElement('div');
cell.style.cssText = 'display:inline-block;margin:0.25rem'; cell.className = 'swatch-cell';
cell.appendChild(makeSwatch(hsl)); cell.appendChild(makeSwatch(hsl));
histContainer.appendChild(cell); histContainer.appendChild(cell);
}); });

2
js/harmonien.js
View File

@@ -27,7 +27,7 @@ function renderHarmony(label, colors, onSaveFavorit, onSaveSchema) {
hexLabel.textContent = hex; hexLabel.textContent = hex;
const btnRow = document.createElement('div'); const btnRow = document.createElement('div');
btnRow.style.cssText = 'display:flex;gap:0.25rem'; btnRow.className = 'harmony-btn-row';
const favBtn = document.createElement('button'); const favBtn = document.createElement('button');
favBtn.className = 'action-btn'; favBtn.className = 'action-btn';

35
style.css
View File

@@ -117,3 +117,38 @@ button.action-btn:hover { background: #f0f0f0; }
} }
.harmony-swatch .swatch { width: 56px; height: 56px; } .harmony-swatch .swatch { width: 56px; height: 56px; }
.harmony-swatch span { font-size: 0.75rem; font-family: monospace; } .harmony-swatch span { font-size: 0.75rem; font-family: monospace; }
/* --- Utility classes --- */
.swatch-cell {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
margin: 0.25rem;
}
.harmony-btn-row {
display: flex;
gap: 0.25rem;
}
.btn-row {
display: flex;
gap: 0.5rem;
}
/* --- Finale Styles --- */
h2 { font-size: 1.1rem; margin-bottom: 1rem; }
h3 { font-size: 0.95rem; }
.tab-content { padding-top: 0.5rem; }
.color-preview { transition: background 0.15s; }
.action-btn:active { transform: scale(0.97); }
@media (max-width: 600px) {
nav { flex-wrap: wrap; }
.color-codes { flex-direction: column; }
.color-code-group input { width: 100%; }
}