From 50138d6b8b5e5351df6d652b83165444c05b372f Mon Sep 17 00:00:00 2001 From: Giac Date: Tue, 9 Dec 2025 15:47:41 -0600 Subject: [PATCH] Moved themes from diceRoller --- src/lib/components/diceRoller.svelte | 33 ------ src/lib/styles/cyberPunk.css | 5 + src/lib/styles/nightmare.css | 6 + src/lib/styles/nintendo.css | 5 + src/lib/styles/sludge.css | 159 +++++++++++++++++++++++++++ src/lib/styles/themes.js | 8 +- src/lib/styles/typewriter.css | 5 + src/lib/styles/vaporWave.css | 134 ---------------------- src/lib/styles/win95.css | 5 + 9 files changed, 189 insertions(+), 171 deletions(-) create mode 100644 src/lib/styles/sludge.css delete mode 100644 src/lib/styles/vaporWave.css diff --git a/src/lib/components/diceRoller.svelte b/src/lib/components/diceRoller.svelte index 09edbd0..d23d815 100644 --- a/src/lib/components/diceRoller.svelte +++ b/src/lib/components/diceRoller.svelte @@ -87,37 +87,4 @@ fill: currentColor; stroke: none; } - - /* Theme-specific point colors */ - :global(.theme-win95) .point { - fill: #000080; - stroke: #000080; - } - - :global(.theme-cyberpunk) .point { - fill: #ff00ff; - filter: drop-shadow(0 0 5px #ff00ff); - } - - :global(.theme-typewriter) .point { - fill: #2c2416; - stroke: #2c2416; - } - - :global(.theme-nightmare) .point { - fill: #ff0000; - stroke: #ff0000; - filter: drop-shadow(0 0 10px #ff0000); - } - - :global(.theme-vaporwave) .point { - fill: #00f0ff; - filter: drop-shadow(0 0 5px #00f0ff); - stroke-width: 3; - } - - :global(.theme-nintendo) .point { - fill: #e60012; - stroke: #e60012; - } \ No newline at end of file diff --git a/src/lib/styles/cyberPunk.css b/src/lib/styles/cyberPunk.css index 6a595dc..66965fc 100644 --- a/src/lib/styles/cyberPunk.css +++ b/src/lib/styles/cyberPunk.css @@ -133,4 +133,9 @@ .theme-cyberpunk p, .theme-cyberpunk li { color: #00ffff; +} + +:global(.theme-cyberpunk) .point { + fill: #ff00ff; + filter: drop-shadow(0 0 5px #ff00ff); } \ No newline at end of file diff --git a/src/lib/styles/nightmare.css b/src/lib/styles/nightmare.css index caa8906..14dfffc 100644 --- a/src/lib/styles/nightmare.css +++ b/src/lib/styles/nightmare.css @@ -141,4 +141,10 @@ .theme-nightmare p, .theme-nightmare li { color: #8b0000; +} + +:global(.theme-nightmare) .point { + fill: #ff0000; + stroke: #ff0000; + filter: drop-shadow(0 0 10px #ff0000); } \ No newline at end of file diff --git a/src/lib/styles/nintendo.css b/src/lib/styles/nintendo.css index 637f674..b2b2413 100644 --- a/src/lib/styles/nintendo.css +++ b/src/lib/styles/nintendo.css @@ -163,4 +163,9 @@ .theme-nintendo p, .theme-nintendo li { color: #484848; +} + +:global(.theme-nintendo) .point { + fill: #e60012; + stroke: #e60012; } \ No newline at end of file diff --git a/src/lib/styles/sludge.css b/src/lib/styles/sludge.css new file mode 100644 index 0000000..4f800ad --- /dev/null +++ b/src/lib/styles/sludge.css @@ -0,0 +1,159 @@ +.theme-sludge { + font-family: 'Arial', sans-serif; + background: linear-gradient(180deg, #2a251a 0%, #3d372a 50%, #4a4235 100%); + color: #c4b896; +} + +.theme-sludge .window { + background: rgba(61, 55, 42, 0.95); + border: 4px solid #8b8555; + box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.1); +} + +.theme-sludge .title-bar { + background: linear-gradient(180deg, #8b8555 0%, #6d6750 100%); + color: #c4b896; + padding: 15px; + text-align: center; + text-transform: uppercase; + letter-spacing: 4px; + border-bottom: 3px solid rgba(0, 0, 0, 0.3); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2); +} + +.theme-sludge fieldset { + border: 3px solid #8b8555; + background: rgba(58, 52, 38, 0.5); + box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2); +} + +.theme-sludge legend { + color: #c4b896; + text-transform: uppercase; + background: #4a4235; + padding: 2px 10px; + border: 2px solid #8b8555; +} + +.theme-sludge button { + background: linear-gradient(180deg, #6d6750 0%, #5c5544 100%); + border: 3px solid #8b8555; + border-bottom-width: 5px; + color: #c4b896; + text-transform: uppercase; + padding: 12px 30px; + box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15); +} + +.theme-sludge button:hover { + background: linear-gradient(180deg, #7a7558 0%, #6d6750 100%); + border-color: #9a9565; +} + +.theme-sludge button:active { + border-bottom-width: 3px; + transform: translateY(2px); +} + +.theme-sludge .chart-display, +.theme-sludge .dice-display { + background: rgba(42, 37, 26, 0.8); + border: 3px solid #8b8555; + box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3); +} + +/* Home Page */ +.theme-sludge .home-wrapper { + background: linear-gradient(180deg, #2a251a 0%, #3d372a 50%, #4a4235 100%); + color: #c4b896; +} + +.theme-sludge .home-window { + background: rgba(61, 55, 42, 0.95); + border: 4px solid #8b8555; + box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.1); +} + +.theme-sludge .home-title-bar { + background: linear-gradient(180deg, #8b8555 0%, #6d6750 100%); + color: #c4b896; + padding: 15px; + text-align: center; + text-transform: uppercase; + letter-spacing: 4px; + border-bottom: 3px solid rgba(0, 0, 0, 0.3); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2); +} + +.theme-sludge .home-content { + background: rgba(58, 52, 38, 0.3); +} + +.theme-sludge .title { + color: #c4b896; +} + +.theme-sludge .subtitle { + color: #aaa67d; +} + +.theme-sludge .tab-button { + background: linear-gradient(180deg, #6d6750 0%, #5c5544 100%); + border: 3px solid #8b8555; + border-bottom-width: 5px; + color: #c4b896; + text-transform: uppercase; + box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15); +} + +.theme-sludge .tab-button:hover { + background: linear-gradient(180deg, #7a7558 0%, #6d6750 100%); + transform: translateY(-2px); + border-color: #9a9565; +} + +/* Rules Page */ +.theme-sludge .rules-wrapper { + background: linear-gradient(180deg, #2a251a 0%, #3d372a 50%, #4a4235 100%); + color: #c4b896; +} + +.theme-sludge .back-button { + background: linear-gradient(180deg, #6d6750 0%, #5c5544 100%); + border: 3px solid #8b8555; + border-bottom-width: 5px; + color: #c4b896; + box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15); +} + +.theme-sludge .back-button:hover { + background: linear-gradient(180deg, #7a7558 0%, #6d6750 100%); + transform: translateY(-2px); +} + +.theme-sludge .rules-content { + color: #c4b896; +} + +.theme-sludge h1 { + color: #c4b896; +} + +.theme-sludge h2 { + color: #aaa67d; +} + +.theme-sludge h3 { + color: #8b8555; +} + +.theme-sludge p, +.theme-sludge li { + color: #b5ad88; +} + +:global(.theme-sludge) .point { + fill: #b5ad88; + filter: drop-shadow(0 0 5px #b5ad88); + stroke-width: 3; +} \ No newline at end of file diff --git a/src/lib/styles/themes.js b/src/lib/styles/themes.js index 00c1f42..3aad99e 100644 --- a/src/lib/styles/themes.js +++ b/src/lib/styles/themes.js @@ -1,11 +1,11 @@ -export const themeNames = ['win95', 'cyberpunk', 'typewriter', 'nightmare', 'vaporwave', 'nintendo']; +export const themeNames = ['win95', 'cyberpunk', 'typewriter', 'nightmare', 'sludge', 'nintendo']; export const themeDisplayNames = { - win95: 'Windows 95', + win95: 'Win 95', cyberpunk: 'Cyberpunk', typewriter: 'Typewriter', nightmare: 'Nightmare', - vaporwave: 'Vaporwave', + sludge: 'Sludge', nintendo: 'Nintendo' }; @@ -15,6 +15,6 @@ import './win95.css'; import './cyberPunk.css'; import './typewriter.css'; import './nightmare.css'; -import './vaporWave.css'; +import './sludge.css'; import './nintendo.css'; import './general.css'; \ No newline at end of file diff --git a/src/lib/styles/typewriter.css b/src/lib/styles/typewriter.css index 0ec2fc2..3e4e0b1 100644 --- a/src/lib/styles/typewriter.css +++ b/src/lib/styles/typewriter.css @@ -113,4 +113,9 @@ .theme-typewriter h3 { color: #2c2416; font-family: 'Courier', monospace; +} + +:global(.theme-typewriter) .point { + fill: #2c2416; + stroke: #2c2416; } \ No newline at end of file diff --git a/src/lib/styles/vaporWave.css b/src/lib/styles/vaporWave.css deleted file mode 100644 index c7d3728..0000000 --- a/src/lib/styles/vaporWave.css +++ /dev/null @@ -1,134 +0,0 @@ -.theme-vaporwave { - font-family: 'Arial', sans-serif; - background: linear-gradient(180deg, #ff6ad5 0%, #c774e8 50%, #ad8cff 100%); - color: #fff; -} - -.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); -} - -.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); -} - -.theme-vaporwave fieldset { - border: 2px solid #00f0ff; - background: rgba(255, 255, 255, 0.1); -} - -.theme-vaporwave legend { - color: #00f0ff; - text-transform: uppercase; -} - -.theme-vaporwave button { - background: linear-gradient(135deg, #ff6ad5, #c774e8); - border: 2px solid #00f0ff; - color: #fff; - text-transform: uppercase; - padding: 12px 30px; -} - -.theme-vaporwave .chart-display, -.theme-vaporwave .dice-display { - background: rgba(255, 255, 255, 0.15); - border: 2px solid #ff6ad5; -} - -/* Home Page Styles */ -.theme-vaporwave .home-wrapper { - background: linear-gradient(180deg, #ff6ad5 0%, #c774e8 50%, #ad8cff 100%); - color: #fff; -} - -.theme-vaporwave .home-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); -} - -.theme-vaporwave .home-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); -} - -.theme-vaporwave .home-content { - background: rgba(255, 255, 255, 0.1); -} - -.theme-vaporwave .title { - color: #fff; - text-shadow: 2px 2px 8px rgba(0, 240, 255, 0.6); -} - -.theme-vaporwave .subtitle { - color: rgba(255, 255, 255, 0.95); -} - -.theme-vaporwave .tab-button { - background: linear-gradient(135deg, #ff6ad5, #c774e8); - border: 2px solid #00f0ff; - color: #fff; - text-transform: uppercase; -} - -.theme-vaporwave .tab-button:hover { - transform: translateY(-3px); - box-shadow: 0 8px 25px rgba(0, 240, 255, 0.6); -} - -/* Rules Page Styles */ -.theme-vaporwave .rules-wrapper { - background: linear-gradient(180deg, #ff6ad5 0%, #c774e8 50%, #ad8cff 100%); - color: #fff; -} - -.theme-vaporwave .back-button { - background: linear-gradient(135deg, #ff6ad5, #c774e8); - border: 2px solid #00f0ff; - color: #fff; -} - -.theme-vaporwave .back-button:hover { - transform: translateY(-2px); - box-shadow: 0 4px 15px rgba(0, 240, 255, 0.6); -} - -.theme-vaporwave .rules-content { - color: #fff; -} - -.theme-vaporwave h1 { - color: #fff; - text-shadow: 2px 2px 8px rgba(0, 240, 255, 0.6); -} - -.theme-vaporwave h2 { - color: #00f0ff; - text-shadow: 0 0 10px #00f0ff; -} - -.theme-vaporwave h3 { - color: #ff6ad5; -} - -.theme-vaporwave p, -.theme-vaporwave li { - color: rgba(255, 255, 255, 0.95); -} \ No newline at end of file diff --git a/src/lib/styles/win95.css b/src/lib/styles/win95.css index 619128b..79bea80 100644 --- a/src/lib/styles/win95.css +++ b/src/lib/styles/win95.css @@ -103,4 +103,9 @@ .theme-win95 h3 { color: #1084d0; +} + +:global(.theme-win95) .point { + fill: #000080; + stroke: #000080; } \ No newline at end of file