added the themes to the theme selector so you can preview it
This commit is contained in:
@@ -5,7 +5,11 @@
|
|||||||
|
|
||||||
<div class="button-row">
|
<div class="button-row">
|
||||||
{#each themeNames as theme}
|
{#each themeNames as theme}
|
||||||
<button on:click={() => (currentTheme = theme)} class:active={currentTheme === theme}>
|
<button
|
||||||
|
class="theme-{theme}"
|
||||||
|
on:click={() => (currentTheme = theme)}
|
||||||
|
class:active={currentTheme === theme}
|
||||||
|
>
|
||||||
{themeDisplayNames[theme]}
|
{themeDisplayNames[theme]}
|
||||||
</button>
|
</button>
|
||||||
{/each}
|
{/each}
|
||||||
@@ -21,6 +25,86 @@
|
|||||||
width: 45%;
|
width: 45%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.theme-cyberpunk {
|
||||||
|
background: transparent;
|
||||||
|
border: 2px solid #ff00ff;
|
||||||
|
color: #ff00ff;
|
||||||
|
font-family: 'Courier New', monospace;
|
||||||
|
text-transform: uppercase;
|
||||||
|
padding: 10px 25px;
|
||||||
|
&:hover {
|
||||||
|
background: #ff00ff;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-nightmare {
|
||||||
|
background: #3a0000;
|
||||||
|
border: 2px solid #8b0000;
|
||||||
|
color: #ff0000;
|
||||||
|
font-family: 'Georgia', serif;
|
||||||
|
text-transform: uppercase;
|
||||||
|
padding: 10px 25px;
|
||||||
|
&:hover {
|
||||||
|
background: #8b0000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-nintendo {
|
||||||
|
background: #e60012;
|
||||||
|
border: none;
|
||||||
|
border-radius: 25px;
|
||||||
|
color: #fff;
|
||||||
|
text-transform: uppercase;
|
||||||
|
padding: 12px 30px;
|
||||||
|
box-shadow: 0 4px 0 #a00009;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: #ff0018;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
box-shadow: 0 2px 0 #a00009;
|
||||||
|
transform: translateY(2px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.theme-sludge {
|
||||||
|
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);
|
||||||
|
&:hover {
|
||||||
|
background: linear-gradient(180deg, #7a7558 0%, #6d6750 100%);
|
||||||
|
border-color: #9a9565;
|
||||||
|
}
|
||||||
|
&:active {
|
||||||
|
border-bottom-width: 3px;
|
||||||
|
transform: translateY(2px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-typewriter {
|
||||||
|
background: #2c2416;
|
||||||
|
border: 2px solid #2c2416;
|
||||||
|
color: #f4e8d0;
|
||||||
|
font-family: 'Courier', monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-win95 {
|
||||||
|
background: #c0c0c0;
|
||||||
|
border: 2px solid;
|
||||||
|
border-color: #ffffff #000000 #000000 #ffffff;
|
||||||
|
font-family: 'MS Sans Serif', Arial, sans-serif;
|
||||||
|
&:active {
|
||||||
|
border-color: #000000 #ffffff #ffffff #000000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 450px) {
|
@media screen and (min-width: 450px) {
|
||||||
button {
|
button {
|
||||||
width: 25%;
|
width: 25%;
|
||||||
|
|||||||
Reference in New Issue
Block a user