yop

static/css/style.css

@@ -1,42 +1,49 @@
 :root {
-    --bg: #0f1117;
-    --surface: #1a1d27;
-    --border: #252836;
-    --accent: #4f8ef7;
-    --text: #e2e4ef;
-    --muted: #6b7090;
-    --radius: 8px;
+    /* Gruvbox Dark Palette */
+    --bg: #282828;         /* dark0 */
+    --surface: #3c3836;    /* dark1 */
+    --border: #504945;     /* dark2 */
+    --accent: #fabd2f;     /* yellow */
+    --text: #ebdbb2;       /* light1 */
+    --muted: #a89984;      /* gray */
+    --radius: 0px;         /* Forced to 0 for sharp corners */
 }
+
 body {
     background: var(--bg);
     color: var(--text);
-    font-family: system-ui;
+    font-family: system-ui, -apple-system, sans-serif;
     margin: 0;
 }
+
 header {
-    background: #12151f;
+    background: #1d2021;   /* dark0_hard */
     border-bottom: 1px solid var(--border);
     padding: 0 2rem;
     height: 56px;
     display: flex;
     align-items: center;
 }
+
 .logo {
     color: var(--accent);
     font-weight: bold;
     text-decoration: none;
     font-family: monospace;
 }
+
 main {
     max-width: 1100px;
     margin: 0 auto;
     padding: 2rem;
 }
+
 .grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
     gap: 1.5rem;
 }
+
 .card {
     background: var(--surface);
     border: 1px solid var(--border);
@@ -49,36 +56,43 @@ main {
     transition: transform 0.1s;
     position: relative;
 }
+
 .card:hover {
-    transform: translateY(-3px);
     border-color: var(--accent);
+    background: #45413e; /* Slight highlight on hover */
 }
+
 .card-img {
     width: 100%;
     height: 150px;
     object-fit: cover;
-    background: #000;
+    background: #1d2021;
 }
+
 .folder-icon {
     height: 150px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 4rem;
-    background: #1c202d;
-    color: #f7c948;
+    background: #32302f;
+    color: #d79921; /* Gruvbox faded yellow */
 }
+
 .iso-icon {
     height: 150px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 4rem;
-    background: #12151f;
+    background: #1d2021;
+    color: #83a598; /* Gruvbox blue */
 }
+
 .card-body {
     padding: 1rem;
 }
+
 .card-name {
     font-weight: bold;
     color: var(--accent);
@@ -88,23 +102,28 @@ main {
     text-overflow: ellipsis;
     white-space: nowrap;
 }
+
 .card-desc {
     font-size: 0.8rem;
     color: var(--muted);
     height: 3em;
     overflow: hidden;
 }
+
 .bc {
     background: var(--surface);
     padding: 0.6rem 1rem;
-    border-radius: 4px;
+    border-radius: var(--radius);
     margin-bottom: 1.5rem;
     font-size: 0.85rem;
+    border: 1px solid var(--border);
 }
+
 .bc a {
     color: var(--accent);
     text-decoration: none;
 }
+
 .tbl {
     width: 100%;
     border-collapse: collapse;
@@ -112,13 +131,17 @@ main {
     border-radius: var(--radius);
     overflow: hidden;
 }
+
 .tbl th {
     text-align: left;
     padding: 1rem;
-    background: #1e2132;
+    background: #32302f;
     color: var(--muted);
     font-size: 0.75rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
 }
+
 .tbl td {
     padding: 1rem;
     border-bottom: 1px solid var(--border);
@@ -129,7 +152,7 @@ main {
     border: 1px solid var(--accent);
     color: var(--accent);
     padding: 0.2rem 0.5rem;
-    border-radius: 4px;
+    border-radius: var(--radius);
     font-size: 0.7rem;
     text-decoration: none;
     background: transparent;
@@ -141,7 +164,7 @@ main {
 
 .btn:hover {
     background: var(--accent);
-    color: #fff;
+    color: var(--bg); /* Inverted for readability */
 }
 
 /* Modal styles */
@@ -152,7 +175,7 @@ main {
     left: 0;
     width: 100%;
     height: 100%;
-    background: rgba(0, 0, 0, 0.7);
+    background: rgba(29, 32, 33, 0.9); /* Gruvbox-friendly overlay */
     z-index: 1000;
     justify-content: center;
     align-items: center;
@@ -165,25 +188,31 @@ main {
     opacity: 1;
     pointer-events: auto;
 }
+
 .modal-content {
-    background: var(--surface);
-    border: 1px solid var(--border);
+    background: var(--bg);
+    border: 2px solid var(--border);
     border-radius: var(--radius);
     max-width: 600px;
     width: 90%;
     max-height: 80vh;
     overflow-y: auto;
     position: relative;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
 }
+
 .modal-header {
     padding: 1.5rem;
     border-bottom: 1px solid var(--border);
+    background: var(--surface);
 }
+
 .modal-title {
     margin: 0;
     font-size: 1.2rem;
     color: var(--text);
 }
+
 .close-btn {
     position: absolute;
     top: 1rem;
@@ -199,21 +228,26 @@ main {
     align-items: center;
     justify-content: center;
 }
+
 .close-btn:hover {
-    color: var(--text);
+    color: var(--accent);
 }
+
 .modal-body {
     padding: 1.5rem;
 }
+
 .modal-image {
     width: 100%;
     max-height: 300px;
     object-fit: contain;
-    background: #000;
-    border-radius: 4px;
+    background: #1d2021;
+    border-radius: var(--radius);
     margin-bottom: 1rem;
     display: none;
+    border: 1px solid var(--border);
 }
+
 .modal-description {
     color: var(--text);
     line-height: 1.6;