mirror of
https://github.com/agent0ai/agent-zero.git
synced 2026-10-25 15:49:44 +00:00
ee970b5f0d
Positive accent controls hardcoded six blue literals across the WebUI and bundled plugins, so custom accent-color switchers had to patch each surface separately. Route them through var(--color-highlight) — mapped in the light block for the first time — and keep each surface mix percentages, deriving hover and active steps with the established black color-mix pattern; the redundant light-mode unread override collapses into the single var-based rule. Login keeps its literals because the login page loads no theme tokens, and status colors like queue orange, stop red, and success or error toasts stay hardcoded as semantic tones. Validation: pytest welcome/whats-new/agent-editor/model-config/speech/sidebar/self-update suites (82 passed; 2 stop-agent failures pre-exist at HEAD, proven by stash run); rg confirms no accent literals outside login.css.
115 lines
2.7 KiB
CSS
115 lines
2.7 KiB
CSS
/* ===== NOTIFICATION SYSTEM STYLES ===== */
|
|
|
|
/* Notification Toggle Button */
|
|
.notification-toggle {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
padding: 0;
|
|
background: var(--color-surface-translucent);
|
|
border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
|
|
border-radius: 8px;
|
|
color: var(--color-text);
|
|
cursor: pointer;
|
|
transition: background-color 0.2s ease, border-color 0.2s ease,
|
|
box-shadow 0.2s ease, opacity 0.2s ease;
|
|
font-size: 1rem;
|
|
width: 36px;
|
|
height: 36px;
|
|
flex-shrink: 0;
|
|
margin: 0;
|
|
box-sizing: border-box;
|
|
text-align: center;
|
|
}
|
|
|
|
.notification-toggle:hover {
|
|
background: color-mix(in srgb, var(--color-panel) 80%, var(--color-background-hover));
|
|
border-color: color-mix(in srgb, var(--color-primary) 28%, var(--color-border));
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
|
|
}
|
|
|
|
.notification-toggle .notification-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1rem;
|
|
width: 100%;
|
|
height: 100%;
|
|
text-align: center;
|
|
line-height: 1;
|
|
vertical-align: middle;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.notification-toggle.has-unread {
|
|
border-color: var(--color-highlight);
|
|
background: color-mix(in srgb, var(--color-highlight) 10%, transparent);
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
.notification-badge {
|
|
position: absolute;
|
|
top: -8px;
|
|
right: -8px;
|
|
background: #F44336;
|
|
color: white;
|
|
font-size: 0.7rem;
|
|
font-weight: bold;
|
|
padding: 0.2rem 0.4rem;
|
|
border-radius: 10px;
|
|
min-width: 1.2rem;
|
|
text-align: center;
|
|
line-height: 1;
|
|
border: 2px solid var(--bg-color);
|
|
z-index: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.notification-toggle.disabled {
|
|
opacity: 0.4;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.notification-toggle.has-notifications {
|
|
opacity: 1;
|
|
}
|
|
|
|
.notification-toggle.disabled:hover {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border-color: rgba(255, 255, 255, 0.1);
|
|
box-shadow: none;
|
|
}
|
|
|
|
|
|
|
|
/* Light Mode Styles */
|
|
.light-mode .notification-toggle {
|
|
background: var(--color-surface-translucent);
|
|
border-color: color-mix(in srgb, var(--color-border) 60%, transparent);
|
|
}
|
|
|
|
.light-mode .notification-toggle.disabled:hover {
|
|
background: rgba(0, 0, 0, 0.05);
|
|
border-color: rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
|
|
|
|
/* Animations */
|
|
@keyframes pulse {
|
|
0%, 100% { transform: scale(1); }
|
|
50% { transform: scale(1.05); }
|
|
}
|
|
|
|
/* Mobile Responsive */
|
|
@media (max-width: 768px) {
|
|
.notification-toggle {
|
|
min-width: 40px;
|
|
min-height: 40px;
|
|
padding: 0.4rem;
|
|
}
|
|
}
|