29498a2f6a
- Inventory: Bigger item icons (48px) filling their slots, MC-style hover tooltips - Creative inventory category tabs (All/Blocks/Tools/Combat/Food/Redstone/Materials/Misc) - Smelting recipes grouped by output item with collapsible sections - Alerts moved from full tab to popup overlay triggered from header bell icon - New Analytics tab with SVG charts (storage over time, top items, item trend lookup) - Mod icon support for ComputerCraft (CC:Tweaked) via GitHub CDN fallback - Server: new /api/history-summary endpoint for aggregate storage history - Store: fetchHistorySummary and fetchItemHistory for analytics data
168 lines
2.9 KiB
CSS
168 lines
2.9 KiB
CSS
/* ===== Alerts Popup Overlay ===== */
|
|
.alerts-overlay {
|
|
position: fixed;
|
|
top: 50px;
|
|
right: 16px;
|
|
z-index: 1000;
|
|
animation: alerts-slide-in 0.15s ease;
|
|
}
|
|
|
|
@keyframes alerts-slide-in {
|
|
from { opacity: 0; transform: translateY(-8px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.alerts-popup {
|
|
width: 340px;
|
|
max-height: 400px;
|
|
background: #333;
|
|
border: 3px solid var(--mc-dark);
|
|
box-shadow:
|
|
0 8px 24px rgba(0, 0, 0, 0.6),
|
|
inset 0 2px 0 #555,
|
|
inset 0 -2px 0 #2a2a2a;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.alerts-popup-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 0.75rem;
|
|
background: #3b3b3b;
|
|
border-bottom: 2px solid var(--mc-dark);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.alerts-popup-header h3 {
|
|
font-size: 0.75rem;
|
|
color: var(--mc-text-yellow);
|
|
text-shadow: 1px 1px 0 var(--mc-dark);
|
|
flex: 1;
|
|
font-family: 'Silkscreen', 'Courier New', monospace;
|
|
}
|
|
|
|
.alerts-close {
|
|
background: none;
|
|
border: 2px solid #555;
|
|
color: var(--mc-text-gray);
|
|
cursor: pointer;
|
|
font-size: 0.7rem;
|
|
width: 1.3rem;
|
|
height: 1.3rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: 'Silkscreen', 'Courier New', monospace;
|
|
}
|
|
|
|
.alerts-close:hover {
|
|
color: var(--mc-text-red);
|
|
border-color: var(--mc-text-red);
|
|
}
|
|
|
|
.alerts-popup-body {
|
|
overflow-y: auto;
|
|
max-height: 330px;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.alert-count {
|
|
font-size: 0.7rem;
|
|
color: var(--mc-text-gray);
|
|
padding: 0.25rem 0.5rem;
|
|
background: var(--mc-dark);
|
|
border: 2px solid #333;
|
|
}
|
|
|
|
.alert-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.alert-card {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
padding: 0.625rem;
|
|
background: #3b3b3b;
|
|
border: 3px solid var(--mc-dark);
|
|
box-shadow: inset 0 2px 0 #555, inset 0 -2px 0 #2a2a2a;
|
|
}
|
|
|
|
.alert-card.triggered {
|
|
border-color: #661a1a;
|
|
background: #3b2a2a;
|
|
}
|
|
|
|
.alert-icon {
|
|
font-size: 1.2rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.alert-info {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.alert-item-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
}
|
|
|
|
.alert-item-name {
|
|
font-size: 0.75rem;
|
|
color: var(--mc-text-white);
|
|
font-weight: 700;
|
|
text-shadow: 1px 1px 0 var(--mc-dark);
|
|
}
|
|
|
|
.alert-details {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
font-size: 0.6rem;
|
|
color: var(--mc-text-gray);
|
|
}
|
|
|
|
.alert-details strong {
|
|
color: var(--mc-text-white);
|
|
}
|
|
|
|
.alert-badge {
|
|
padding: 0.25rem 0.5rem;
|
|
font-size: 0.6rem;
|
|
font-weight: 700;
|
|
border: 2px solid var(--mc-dark);
|
|
text-shadow: 1px 1px 0 #000;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.alert-badge.low {
|
|
background: #6b1a1a;
|
|
color: var(--mc-text-red);
|
|
}
|
|
|
|
.alert-badge.ok {
|
|
background: var(--mc-grass-dark);
|
|
color: var(--mc-text-green);
|
|
}
|
|
|
|
.no-alerts {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 2rem;
|
|
color: var(--mc-text-gray);
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.no-alerts-icon {
|
|
font-size: 2rem;
|
|
}
|