Merge branch 'main' of git.sr.ht:~svlad_cjelli/onTheSpectrum

src/lib/styles/cyberpunk.css

@@ -0,0 +1,52 @@
+/* Cyberpunk Theme */
+:global{
+  body:has(.theme-cyberpunk){
+    background: #0a0e27;
+  }
+  .theme-cyberpunk {
+    font-family: 'Courier New', monospace;
+    background: #0a0e27;
+    color: #00ffff;
+    .dice-display {
+      background: rgba(0, 255, 255, 0.05);
+      border: 1px solid #00ffff;
+    }
+    .window{
+      background: rgba(10, 14, 39, 0.95);
+      border: 2px solid #00ffff;
+      box-shadow: 0 0 20px #ff00ff;
+    }
+    .title-bar {
+      background: linear-gradient(90deg, #ff00ff, #00ffff);
+      color: #000;
+      padding: 12px;
+      font-weight: bold;
+      text-transform: uppercase;
+    }
+    fieldset {
+      border: 1px solid #ff00ff;
+    }
+
+    legend {
+      color: #ff00ff;
+      text-transform: uppercase;
+    }
+
+    button {
+      background: transparent;
+      border: 2px solid #ff00ff;
+      color: #ff00ff;
+      font-family: 'Courier New', monospace;
+      text-transform: uppercase;
+      padding: 10px 25px;
+      &:hover {
+        background: #ff00ff;
+        color: #000;
+      }
+    }
+    .chart-display {
+      background: rgba(0, 255, 255, 0.05);
+      border: 1px solid #00ffff;
+    }
+  }
+}

src/lib/styles/vaporwave.css

@@ -0,0 +1,52 @@
+/* Vaporwave Theme */
+:global(.theme-vaporwave) {
+  font-family: 'Arial', sans-serif;
+  background: linear-gradient(180deg, #ff6ad5 0%, #c774e8 50%, #ad8cff 100%);
+  color: #fff;
+}
+
+:global(.theme-vaporwave .window) {
+  background: rgba(255, 106, 213, 0.3);
+  backdrop-filter: blur(10px);
+  border: 3px solid #00f0ff;
+  box-shadow: 0 8px 32px rgba(0, 240, 255, 0.4);
+}
+
+:global(.theme-vaporwave .title-bar) {
+  background: linear-gradient(90deg, #ff6ad5, #00f0ff);
+  color: #fff;
+  padding: 15px;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: 4px;
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+}
+
+:global(.theme-vaporwave fieldset) {
+  border: 2px solid #00f0ff;
+  background: rgba(255, 255, 255, 0.1);
+}
+
+:global(.theme-vaporwave legend) {
+  color: #00f0ff;
+  text-transform: uppercase;
+}
+
+:global(.theme-vaporwave button) {
+  background: linear-gradient(135deg, #ff6ad5, #c774e8);
+  border: 2px solid #00f0ff;
+  color: #fff;
+  text-transform: uppercase;
+  padding: 12px 30px;
+}
+	:global(.theme-vaporwave .chart-display ){
+		background: rgba(255, 255, 255, 0.15);
+		border: 2px solid #ff6ad5;
+	}
+:global{
+  .theme-vaporwave .dice-display {
+    background: rgba(255, 255, 255, 0.15);
+    border: 2px solid #ff6ad5;
+  }
+}
+

src/lib/styles/win95.css

@@ -10,16 +10,16 @@
   box-shadow: 2px 2px 0 rgba(0,0,0,0.5);
 }
 
-.theme-win95 .title-bar {
-  background: linear-gradient(to right, #000080, #1084d0);
-  color: white;
-  padding: 8px;
-  font-weight: bold;
-}
+    .title-bar {
+      background: linear-gradient(to right, #000080, #1084d0);
+      color: white;
+      padding: 8px;
+      font-weight: bold;
+    }
 
-.theme-win95 fieldset {
-  border: 2px groove #c0c0c0;
-}
+    fieldset {
+      border: 2px groove #c0c0c0;
+    }
 
 .theme-win95 button {
   background: #c0c0c0;