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">
|
||||
{#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]}
|
||||
</button>
|
||||
{/each}
|
||||
@@ -21,6 +25,86 @@
|
||||
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) {
|
||||
button {
|
||||
width: 25%;
|
||||
|
||||
Reference in New Issue
Block a user