.storage-overview { padding: 0.75rem; display: flex; flex-direction: column; gap: 0.75rem; } .overview-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 0.5rem; border-bottom: 2px solid var(--mc-dark); } .overview-header h2 { font-size: 0.9rem; color: var(--mc-text-yellow); text-shadow: 1px 1px 0 var(--mc-dark); } /* Capacity */ .capacity-section { padding: 0.5rem; background: var(--mc-dark); border: 2px solid #333; } .capacity-label { display: flex; justify-content: space-between; font-size: 0.65rem; font-weight: 700; margin-bottom: 0.375rem; color: var(--mc-text-gray); text-transform: uppercase; } .capacity-percent.normal { color: var(--mc-text-green); } .capacity-percent.warning { color: var(--mc-text-gold); } .capacity-percent.critical { color: var(--mc-text-red); } .capacity-bar { width: 100%; height: 12px; background: #333; border: 2px solid; border-color: #222 #555 #555 #222; overflow: hidden; } .capacity-fill { height: 100%; transition: width 0.5s; } .capacity-fill.normal { background: var(--mc-grass); } .capacity-fill.warning { background: var(--mc-text-gold); } .capacity-fill.critical { background: var(--mc-text-red); } .capacity-detail { font-size: 0.6rem; color: var(--mc-text-gray); text-align: center; margin-top: 0.25rem; } /* Stats */ .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.375rem; } .stat-item { display: flex; flex-direction: column; padding: 0.375rem; background: var(--mc-dark); border: 2px solid #333; } .stat-label { font-size: 0.55rem; color: var(--mc-text-gray); font-weight: 700; text-transform: uppercase; } .stat-value { font-size: 0.75rem; color: var(--mc-text-white); font-weight: 700; text-shadow: 1px 1px 0 #000; } .stat-value.ok { color: var(--mc-text-green); } .stat-value.offline { color: var(--mc-text-red); } /* Peripherals */ .peripherals-section h3, .activity-section h3 { font-size: 0.65rem; color: var(--mc-text-gold); font-weight: 700; text-transform: uppercase; margin-bottom: 0.375rem; text-shadow: 1px 1px 0 var(--mc-dark); } .peripheral-list { display: flex; flex-direction: column; gap: 0.25rem; } .peripheral-item { font-size: 0.65rem; padding: 0.25rem 0.375rem; background: var(--mc-dark); border: 1px solid #333; } .peripheral-item.ok { color: var(--mc-text-green); } .peripheral-item.error { color: var(--mc-text-red); } /* Activity */ .activity-list { display: flex; flex-wrap: wrap; gap: 0.25rem; } .activity-item { font-size: 0.6rem; padding: 0.25rem 0.5rem; border: 1px solid #333; font-weight: 700; } .activity-item.active { background: var(--mc-grass-dark); color: var(--mc-text-green); animation: activity-pulse 2s infinite; } .activity-item.idle { background: var(--mc-dark); color: var(--mc-text-gray); } @keyframes activity-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } /* Last update */ .last-update { font-size: 0.55rem; color: var(--mc-text-gray); text-align: center; padding-top: 0.5rem; border-top: 1px solid #444; }