Sludge-Games/onTheSpectrum
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Moved themes from diceRoller

Browse Source
This commit is contained in:
Giac
2025-12-09 15:47:41 -06:00
parent 4aa3f27131
commit 50138d6b8b
9 changed files with 189 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/lib/components/diceRoller.svelte
View File

@@ -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;
}
</style>

5
src/lib/styles/cyberPunk.css
View File

@@ -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);
}

6
src/lib/styles/nightmare.css
View File

@@ -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);
}

5
src/lib/styles/nintendo.css
View File

@@ -163,4 +163,9 @@
.theme-nintendo p,
.theme-nintendo li {
color: #484848;
}
:global(.theme-nintendo) .point {
fill: #e60012;
stroke: #e60012;
}

159
src/lib/styles/sludge.css Normal file
View File

@@ -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;
}

8
src/lib/styles/themes.js
View File

@@ -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';

5
src/lib/styles/typewriter.css
View File

@@ -113,4 +113,9 @@
.theme-typewriter h3 {
color: #2c2416;
font-family: 'Courier', monospace;
}
:global(.theme-typewriter) .point {
fill: #2c2416;
stroke: #2c2416;
}

134
src/lib/styles/vaporWave.css
View File

@@ -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);
}

5
src/lib/styles/win95.css
View File

@@ -103,4 +103,9 @@
.theme-win95 h3 {
color: #1084d0;
}
:global(.theme-win95) .point {
fill: #000080;
stroke: #000080;
}