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

feat: Erklärungen als Hover-Tooltip bei Harmonietypen

Browse Source
This commit is contained in:
Ferdinand
2026-04-02 13:55:43 +02:00
parent 184f3ec0c2
commit cc4d612b33
2 changed files with 58 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
style.css
View File

@@ -107,8 +107,38 @@ button.action-btn:hover { background: #f0f0f0; }
/* --- Harmonien-Tab --- */
.subtitle { font-size: 0.85rem; color: #666; margin-bottom: 0.5rem; }
.harmony-row h3 { font-size: 0.9rem; margin-bottom: 0.5rem; }
.harmony-header { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.5rem; }
.harmony-row h3 { font-size: 0.9rem; margin-bottom: 0; }
.harmony-swatches { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: flex-start; }
.harmony-info { position: relative; display: inline-flex; align-items: center; }
.harmony-info-icon {
font-size: 0.75rem;
color: #aaa;
cursor: default;
user-select: none;
line-height: 1;
}
.harmony-tooltip {
display: none;
position: absolute;
left: 1.4rem;
top: 50%;
transform: translateY(-50%);
background: #333;
color: #fff;
font-size: 0.78rem;
padding: 0.4rem 0.65rem;
border-radius: 6px;
white-space: nowrap;
z-index: 100;
pointer-events: none;
max-width: 320px;
white-space: normal;
width: max-content;
max-width: 280px;
}
.harmony-info:hover .harmony-tooltip { display: block; }
.harmony-swatch {
display: flex;
flex-direction: column;