Add StorageOverview.css for styling the storage overview component

2026-03-21 16:50:02 -04:00
parent e6f2ff5587
commit 2ea340d4e4
1 changed files with 164 additions and 0 deletions
--- a/web/client/src/components/StorageOverview.css
+++ b/web/client/src/components/StorageOverview.css
@@ -0,0 +1,164 @@
+.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;
+}