Lars
baad096ead
- Move all positioning logic from inline styles to CSS - New classes: .badge-container-right, .badge-button-layout - All badge styling now in UsageBadge.css (single source) - Easier to maintain and adjust globally - Mobile responsive adjustments in one place Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
104 lines
2.0 KiB
CSS
104 lines
2.0 KiB
CSS
/**
|
|
* UsageBadge Styles - Dezente Version
|
|
*
|
|
* Sehr kleine, subtile Badge für Usage-Anzeige
|
|
* Phase 3: Frontend Display
|
|
*/
|
|
|
|
.usage-badge {
|
|
display: inline-block;
|
|
font-size: 0.65rem;
|
|
font-weight: 500;
|
|
padding: 2px 5px;
|
|
border-radius: 3px;
|
|
margin-left: 10px;
|
|
opacity: 0.6;
|
|
font-variant-numeric: tabular-nums;
|
|
white-space: nowrap;
|
|
transition: opacity 0.2s;
|
|
}
|
|
|
|
.usage-badge:hover {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.usage-badge--ok {
|
|
color: var(--text3, #888);
|
|
background: rgba(136, 135, 128, 0.08);
|
|
}
|
|
|
|
.usage-badge--warning {
|
|
color: #d97706;
|
|
background: rgba(217, 119, 6, 0.08);
|
|
}
|
|
|
|
.usage-badge--exceeded {
|
|
color: var(--danger, #D85A30);
|
|
background: rgba(216, 90, 48, 0.1);
|
|
font-weight: 600;
|
|
opacity: 0.75;
|
|
}
|
|
|
|
.usage-badge--exceeded:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Responsive: Even smaller on mobile */
|
|
@media (max-width: 640px) {
|
|
.usage-badge {
|
|
font-size: 0.6rem;
|
|
padding: 1px 4px;
|
|
margin-left: 8px;
|
|
}
|
|
}
|
|
|
|
/* ============================================================================
|
|
Badge Container Styles - Positioning
|
|
============================================================================
|
|
|
|
Zentrale Konfiguration für Badge-Platzierung in verschiedenen Kontexten.
|
|
Alle Anpassungen an Layout/Spacing hier vornehmen!
|
|
*/
|
|
|
|
/* Badge rechts außen (für Headings/Titles) */
|
|
.badge-container-right {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
}
|
|
|
|
/* Badge rechts im Button (mit Beschreibung darunter) */
|
|
.badge-button-layout {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: 2px;
|
|
}
|
|
|
|
.badge-button-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
}
|
|
|
|
.badge-button-description {
|
|
font-size: 11px;
|
|
opacity: 0.8;
|
|
display: block;
|
|
margin-top: 2px;
|
|
text-align: left;
|
|
}
|
|
|
|
/* Mobile Anpassungen */
|
|
@media (max-width: 640px) {
|
|
.badge-container-right {
|
|
gap: 8px;
|
|
}
|
|
|
|
.badge-button-description {
|
|
font-size: 10px;
|
|
}
|
|
}
|