71 lines
1.5 KiB
SCSS
71 lines
1.5 KiB
SCSS
$box-texture: url(3px-tile.png);
|
|
$box-bg: oklch(0.3 0.2 var(--hue));
|
|
$box-fg: oklch(0.95 0.075 var(--c-hue));
|
|
|
|
$button-bg: oklch(0.5 0.25 var(--hue));
|
|
$button-fg: oklch(0.98 0.1 var(--c-hue));
|
|
|
|
|
|
// https://oakreef.ie/transy :)
|
|
$transition-duration: 250ms;
|
|
$transition-curve: cubic-bezier(.47,.74,.61,1.2);
|
|
|
|
@mixin transy($prop: transform, $duration: $transition-duration) {
|
|
transition: $prop $duration $transition-curve;
|
|
}
|
|
|
|
@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.125 var(--hue) / 0.45));
|
|
}
|
|
}
|
|
|
|
|
|
@mixin box-base {
|
|
@include shadow;
|
|
// respecify font family for <button>
|
|
font: 700 20pt var(--font);
|
|
padding: 0.2rem 0.5rem;
|
|
background-blend-mode: hard-light;
|
|
border: 3px solid oklch(0.2 0.05 var(--hue));
|
|
}
|
|
|
|
@mixin button {
|
|
@include box-base;
|
|
background: $box-texture, $button-bg;
|
|
color: $button-fg;
|
|
}
|
|
|
|
@mixin box {
|
|
@include box-base;
|
|
background: $box-texture, $box-bg;
|
|
color: $box-fg;
|
|
}
|
|
|
|
@mixin image-button {
|
|
@include button;
|
|
padding: 5px;
|
|
> * { display: block; }
|
|
}
|
|
|
|
@mixin nested-image-button {
|
|
@include image-button;
|
|
border: 2px solid $button-fg;
|
|
}
|
|
|
|
$arrowhead:
|
|
conic-gradient(from -124deg at 100% 50%,
|
|
currentcolor, currentcolor 68deg, transparent 68deg);
|
|
|
|
@mixin arrow-button {
|
|
@include button;
|
|
|
|
&::before {
|
|
content: '';
|
|
display: inline-block;
|
|
height: 1.25ex; aspect-ratio: 2/3;
|
|
background: $arrowhead;
|
|
margin-right: 0.5ex;
|
|
}
|
|
}
|