Commit message

src/lib/components/themeSelector.svelte

@@ -16,6 +16,8 @@
 </div>
 
 <style>
+  @import '$lib/styles/themes.css';
+  @import '$lib/styles/win95.css';
   .button-row {
     display: flex;
     gap: 10px;

src/lib/styles/themes.css

@@ -40,41 +40,6 @@ button {
   font-weight: bold;
 }
 
-/* Windows 95 Theme */
-.theme-win95 {
-  font-family: 'MS Sans Serif', Arial, sans-serif;
-  background: #008080;
-}
-
-.theme-win95 .window {
-  background: #c0c0c0;
-  border: 2px solid;
-  border-color: #dfdfdf #808080 #808080 #dfdfdf;
-  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;
-}
-
-.theme-win95 fieldset {
-  border: 2px groove #c0c0c0;
-}
-
-.theme-win95 button {
-  background: #c0c0c0;
-  border: 2px solid;
-  border-color: #ffffff #000000 #000000 #ffffff;
-  font-family: 'MS Sans Serif', Arial, sans-serif;
-}
-
-.theme-win95 button:active {
-  border-color: #000000 #ffffff #ffffff #000000;
-}
-
 /* Cyberpunk Theme */
 .theme-cyberpunk {
   font-family: 'Courier New', monospace;

src/lib/styles/win95.css

@@ -0,0 +1,76 @@
+:global(body) {
+  margin: 0;
+  padding: 0;
+}
+
+.container {
+  padding: 20px;
+  min-height: 100vh;
+}
+
+.window {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.window-body {
+  padding: 20px;
+}
+
+fieldset {
+  padding: 15px;
+  margin: 15px 0;
+}
+
+legend {
+  font-weight: bold;
+  padding: 0 5px;
+}
+
+.button-row {
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+  margin-top: 10px;
+}
+
+button {
+  padding: 8px 24px;
+  cursor: pointer;
+  font-weight: bold;
+}
+
+/* Windows 95 Theme */
+.theme-win95 {
+  font-family: 'MS Sans Serif', Arial, sans-serif;
+  background: #008080;
+}
+
+.theme-win95 .window {
+  background: #c0c0c0;
+  border: 2px solid;
+  border-color: #dfdfdf #808080 #808080 #dfdfdf;
+  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;
+}
+
+.theme-win95 fieldset {
+  border: 2px groove #c0c0c0;
+}
+
+.theme-win95 button {
+  background: #c0c0c0;
+  border: 2px solid;
+  border-color: #ffffff #000000 #000000 #ffffff;
+  font-family: 'MS Sans Serif', Arial, sans-serif;
+}
+
+.theme-win95 button:active {
+  border-color: #000000 #ffffff #ffffff #000000;
+}

src/routes/play/+page.svelte

@@ -7,6 +7,7 @@
   import ThemeSelector from '$lib/components/themeSelector.svelte';
   import Toggle from '$lib/components/toggle.svelte';
 
+
   let currentTheme = 'win95';
   let adultMode = false;
   let currentChart = null;
@@ -73,8 +74,11 @@
     </div>
   </div>
 </div>
-
 <style>
+  @import '$lib/styles/themes.css';
+  @import '$lib/styles/win95.css';
+</style>
+<!-- <style>
   :global(body) {
     margin: 0;
     padding: 0;
@@ -373,4 +377,4 @@
     box-shadow: 0 2px 0 #a00009;
     transform: translateY(2px);
   }
-</style>
+</style> -->