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:
1 parent
3ec9ebba45
commit
8b1794d11e
2 files changed
+30
-22
No files matched your search
@@ -0,0 +1,2 @@
|
|||||||
|
#!/bin/bash
|
||||||
|
systemctl restart gott
|
||||||
+28
-22
@@ -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;
|
||||||
|
|||||||
Reference in new issue
Block a user