rhi/yummy.cricket
1
0
Fork 0
Code Issues Releases Activity

show/hide ui buttons

Browse source
This commit is contained in:
Rhiannon Morris 2024-12-10 05:19:14 +01:00
parent 578176c845
commit 621827c6aa
6 changed files with 107 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

6
rainbow-quox/style/palette.scss
View file

@ -16,12 +16,6 @@
fill: var(--col);
stroke: oklch(from var(--col) 0.15 0.15 h);
stroke-width: 2;
filter: drop-shadow(6px 6px 0 oklch(0.4 0.2 var(--hue) / 0.45));
@media (prefers-color-scheme: dark) {
filter: drop-shadow(6px 6px 0 oklch(0.1 0.15 var(--hue) / 0.45));
}
}
.light :is(text, use) { fill: oklch(from var(--col) 0.96 0.05 calc(h + 180)); }

50
rainbow-quox/style/style.scss
View file

@ -23,12 +23,19 @@
transition: transform 0.25s cubic-bezier(.47,.74,.61,1.2);
}
@mixin shadow {
filter: drop-shadow(6px 6px 0 oklch(0.4 0.2 var(--hue) / 0.45));
@media (prefers-color-scheme: dark) {
filter: drop-shadow(6px 6px 0 oklch(0.1 0.15 var(--hue) / 0.45));
}
}
@mixin box {
@include shadow;
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;
}
@ -52,18 +59,16 @@
}
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: 100vh;
min-height: 100lvh;
padding: 1em;
margin: 0;
@ -75,11 +80,14 @@
#pic-holder, #main, #aux {
width: 1000px;
margin: auto;
// margin: auto;
aspect-ratio: 2000/1346;
}
#pic-holder { position: relative; }
#pic-holder {
position: relative;
margin: 6em auto 0 auto;
}
#main, #aux { position: absolute; inset: 0; }
#aux {
@ -90,6 +98,7 @@
#buttons { position: fixed; top: -60px; left: -20px; }
#reroll { position: absolute; bottom: 0; left: 0; }
#swap { position: absolute; bottom: 0; left: 2.5em; }
#hideui { position: absolute; bottom: 0; left: 5em; }
#buttons button {
@include box;
@ -107,9 +116,14 @@
}
}
#back { position: fixed; top: 22px; left: 22px; }
#back, #showui { position: fixed; top: 22px; left: 22px; }
#showui { transform: translateX(-200%); }
#palette-holder { margin: -60px auto 0; }
#palette-holder {
margin: -60px auto 0;
overflow-y: hidden;
}
#palette, #showui { @include shadow; }
#state-message {
@include box;
@ -123,17 +137,21 @@
#main { z-index: 0; }
#aux { z-index: 1; }
#buttons, #state-message, #palette-holder { z-index: 2; }
#buttons, #state-message, #palette-holder, #back, #showui { 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%); }
#buttons button, #state-message, #palette, #back, #showui {
@include transy;
}
[data-state=fullquox], [data-state=loading] {
#buttons button { transform: none; }
#state-message { transform: translateX(100%); }
#palette { transform: translateY(125%); }
#back { transform: translateX(-200%); }
}
[data-state=fullquox] { #showui { transform: none; } }
}