139 lines
3.1 KiB
SCSS
139 lines
3.1 KiB
SCSS
@import url(../../fonts/muller/muller.css);
|
|
|
|
@keyframes swap1 {
|
|
0% { transform: none; }
|
|
49% { transform: translateX(-150vw); }
|
|
50% { content-visibility: hidden; }
|
|
100% { content-visibility: hidden; transform: none; }
|
|
}
|
|
|
|
@keyframes swap2 {
|
|
0% { content-visibility: hidden; transform: translateX(150vw); }
|
|
49% { content-visibility: visible; opacity: 1; }
|
|
100% { transform: none; opacity: 1; }
|
|
}
|
|
|
|
@keyframes fade-in {
|
|
from { opacity: 0 }
|
|
to { opacity: 1 }
|
|
}
|
|
|
|
|
|
@mixin transy {
|
|
transition: transform 0.25s cubic-bezier(.47,.74,.61,1.2);
|
|
}
|
|
|
|
@mixin box {
|
|
font: 700 20pt var(--font); // respecify font family for <button>
|
|
color: oklch(0.95 0.075 var(--c-hue));
|
|
background: oklch(0.5 0.2 var(--hue));
|
|
border: 3px solid oklch(0.2 0.05 var(--hue));
|
|
box-shadow: var(--shadow-color);
|
|
padding: 0.2rem 0.5rem;
|
|
}
|
|
|
|
|
|
@layer base, layering, come-in;
|
|
|
|
@layer base {
|
|
* { box-sizing: border-box; }
|
|
|
|
:root {
|
|
--hue: 300;
|
|
--c-hue: calc(180 + var(--hue));
|
|
|
|
--font: Muller, sans-serif;
|
|
font-family: var(--font);
|
|
|
|
@function bg($lcs) {
|
|
$lg: to bottom in oklch;
|
|
@each $l, $c in $lcs { $lg: $lg, oklch($l $c var(--hue)); }
|
|
@return url(bright-squares.png), linear-gradient($lg);
|
|
}
|
|
|
|
background: bg([0.9 0.08, 0.7 0.1]);
|
|
--shadow-color: 6px 6px 0 oklch(0.4 0.2 var(--hue) / 0.45);
|
|
|
|
color-scheme: light dark;
|
|
@media (prefers-color-scheme: dark) {
|
|
background: bg([0.3 0.08, 0.2 0.09]);
|
|
--shadow-color: 6px 6px 0 oklch(0.1 0.15 var(--hue) / 0.45);
|
|
}
|
|
background-blend-mode: screen;
|
|
}
|
|
|
|
body {
|
|
height: 100vh;
|
|
min-height: 100lvh;
|
|
padding: 1em;
|
|
margin: 0;
|
|
|
|
display: flex;
|
|
flex-flow: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
#pic-holder, #main, #aux {
|
|
width: 1000px;
|
|
margin: auto;
|
|
aspect-ratio: 2000/1346;
|
|
}
|
|
|
|
#pic-holder { position: relative; }
|
|
#main, #aux { position: absolute; inset: 0; }
|
|
|
|
#aux {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
#buttons { position: fixed; top: -60px; left: -20px; }
|
|
#reroll { position: absolute; bottom: 0; left: 0; }
|
|
#swap { position: absolute; bottom: 0; left: 2.5em; }
|
|
|
|
#buttons button {
|
|
@include box;
|
|
width: calc(6em + 100px);
|
|
text-align: left;
|
|
|
|
$rotate: rotate(-60deg);
|
|
transform: $rotate;
|
|
transform-origin: center right;
|
|
|
|
:root:not([data-running]) &:active,
|
|
[data-running=swap] &#swap,
|
|
[data-running=reroll] &#reroll {
|
|
transform: $rotate translateX(-1.5em);
|
|
}
|
|
}
|
|
|
|
#back { position: fixed; top: 22px; left: 22px; }
|
|
|
|
#palette-holder { margin: -60px auto 0; }
|
|
|
|
#state-message {
|
|
@include box;
|
|
position: fixed; top: 1em; right: -1em;
|
|
padding-right: 2em;
|
|
}
|
|
}
|
|
|
|
|
|
@layer layering {
|
|
#main { z-index: 0; }
|
|
#aux { z-index: 1; }
|
|
|
|
#buttons, #state-message, #palette-holder { z-index: 2; }
|
|
}
|
|
|
|
|
|
@layer come-in {
|
|
button, #state-message, #palette, #back { @include transy; }
|
|
|
|
[data-state=loading] {
|
|
button { transform: none; }
|
|
#state-message { transform: translateX(100%); }
|
|
#palette { transform: translateY(125%); }
|
|
#back { transform: translateX(-200%); }
|
|
}
|
|
}
|