From 2ea340d4e4aef7bbb0a5f7bd0b6e07445cf3cff8 Mon Sep 17 00:00:00 2001
From: MayaTheShy <MayaTheShy@gmail.com>
Date: Sat, 21 Mar 2026 16:50:02 -0400
Subject: [PATCH] Add StorageOverview.css for styling the storage overview
 component

---
 web/client/src/components/StorageOverview.css | 164 ++++++++++++++++++
 1 file changed, 164 insertions(+)
 create mode 100644 web/client/src/components/StorageOverview.css

diff --git a/web/client/src/components/StorageOverview.css b/web/client/src/components/StorageOverview.css
new file mode 100644
index 0000000..769e845
--- /dev/null
+++ 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;
+}