style(chat): Usage-Badge Overlay und Key-Switch-Modal CSS-Anpassungen

- Overlay: full-width mit zentriertem Inhalt, semi-transparenter Hintergrund
- Check-Button Styling in Usage-Badge integriert
- Key-Switch-Rows: Hover-Effekt, Usage-Badge max-width
- Padding und Border-Farben harmonisiert
This commit is contained in:
Meleki committed 2026-03-12 22:30:17 +01:00
1 parent 3ec9ebba45
commit 8b1794d11e
2 files changed
+30 -22

No files matched your search

+2
View File
@@ -0,0 +1,2 @@
#!/bin/bash
systemctl restart gott
+28 -22
View File
@@ -7,16 +7,19 @@
.chat-usage-overlay { .chat-usage-overlay {
position: absolute; position: absolute;
top: var(--page-spacing); top: 0;
left: 50%; left: 0;
transform: translateX(-50%); right: 0;
z-index: 50; z-index: 50;
display: flex; display: flex;
align-items: center; align-items: center;
gap: calc(var(--badge-spacing) / 2); gap: var(--badge-spacing);
opacity: 1; opacity: 1;
transition: opacity var(--transition-duration), transform var(--transition-duration); transition: opacity var(--transition-duration), transform var(--transition-duration);
cursor: pointer; padding: var(--page-padding);
background: rgb(from var(--f1-bg) r g b / var(--semi-transparent));
border-radius: 0 0 var(--border-radius) var(--border-radius);
justify-content: center;
} }
.chat-usage-overlay[hidden] { .chat-usage-overlay[hidden] {
@@ -25,28 +28,21 @@
.chat-usage-overlay.hidden { .chat-usage-overlay.hidden {
opacity: 0; opacity: 0;
transform: translateX(-50%) translateY(-1em); transform: translateY(-1em);
pointer-events: none; pointer-events: none;
} }
.chat-usage-overlay .usage-badge { .chat-usage-overlay .usage-badge {
margin-top: 0; margin-top: 0;
background: var(--chat-bg);
border-color: var(--f3-border);
}
.chat-usage-overlay .chat-usage-check {
background: var(--chat-bg);
border: var(--border-width) solid var(--f3-border);
border-radius: var(--border-radius);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.chat-usage-overlay .chat-usage-check:hover {
background: var(--f2-bg); background: var(--f2-bg);
border-color: var(--f2-border);
padding: var(--badge-padding);
cursor: pointer;
}
.chat-usage-overlay .usage-badge:hover {
background: var(--f3-bg);
border-color: var(--f3-border);
} }
#chat { #chat {
@@ -1388,17 +1384,27 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--badge-spacing); gap: var(--badge-spacing);
padding: var(--badge-padding); padding: var(--box-padding);
border: var(--border-width) solid var(--f3-border); border: var(--border-width) solid var(--f3-border);
border-radius: var(--border-radius); border-radius: var(--border-radius);
background: var(--f3-bg); background: var(--f3-bg);
} }
.key-switch-row:hover {
border-color: rgb(from var(--primary) r g b / .5);
background: rgb(from var(--primary) r g b / .1);
}
.key-switch-row.active { .key-switch-row.active {
border-color: var(--primary); border-color: var(--primary);
background: rgb(from var(--primary) r g b / .2); background: rgb(from var(--primary) r g b / .2);
} }
.key-switch-row .usage-badge {
margin-top: 0;
max-width: 40vw;
}
.key-switch-info { .key-switch-info {
flex: 1; flex: 1;
min-width: 0; min-width: 0;