Something went wrong. Try again.
This string has no description
Something went wrong. Try again.
3.0 kB · 141 lines · Created 2mo ago
CSS
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142@property --bg-color { syntax: "<color>"; inherits: true; initial-value: rebeccapurple;}
@property --mix-color { syntax: "<color>"; inherits: true; initial-value: white;}
@property --dark-color-mix { syntax: "<percentage>"; inherits: true; initial-value: 10%;}
html { background: #0C0C0C; font-family: system-ui, sans-serif; height: 100%; font-size: 105%;
&.bigger { font-size: 140%; }}
body { display: grid; height: 100%;}
section { display: grid; place-items: center; background: var(--section-bg);
&.dark { --section-bg: #0C0C0C; } &.light { --section-bg: white; } &.pink { --section-bg: linear-gradient(in oklab to bottom right, #fbe9e9, #db79db); } &.cyan { --section-bg: linear-gradient(in oklab to bottom right, #cbebfd, #79abdb); }}
button { --bg-color: #272727; appearance: none; display: inline-block; font: inherit; padding-inline: 1.5rem; padding-block: .875rem; -webkit-tap-highlight-color: rgba(255,255,255,0); background: #222; backdrop-filter: blur(6px); color: white; border: none; border-radius: 2rem; corner-shape: superellipse(1.1); box-shadow: -1px 0px 0px rgba(0,0,0,0.15), 1px 0px 0px rgba(0,0,0,0.15), 0px -1px 0px rgba(0,0,0,0.065), 0px 1px 0px rgba(0,0,0,0.065), inset 0px 2px 2px -2px rgba(255,255,255,0.5), inset 0px -2px 2px -2px rgba(255,255,255,0.7);
transition: --bg-color .2s ease-out, scale .2s ease-out;
&:active { scale: 1.1; }
&.round { corner-shape: round; padding-inline: 1rem; width: 3.125rem; }}
.dark button { --bg-color: color-mix(in oklab, transparent, var(--mix-color) 10%);
background: linear-gradient(to bottom, color-mix(in oklab, var(--bg-color), white 5%), var(--bg-color) 20%, var(--bg-color) 50%, color-mix(in oklab, var(--bg-color), white 6%));
&:active { --bg-color: color-mix(in oklab, transparent, var(--mix-color) 40%); }}
.light button { --bg-color: #fafafa;
color: black; background: linear-gradient(to bottom, color-mix(in oklab, var(--bg-color), white 35%), var(--bg-color) 20%, var(--bg-color) 50%, color-mix(in oklab, var(--bg-color), white 45%));
&:active { --bg-color: white; }}
.color button { --bg-color: color-mix(in oklab, transparent, var(--mix-color) 30%);
&:active { --bg-color: color-mix(in oklab, transparent, var(--mix-color) 60%); }}
.light.color.cyan button:last-child:active { --mix-color: #CFF;}
.dark.color button { --bg-color: color-mix(in oklab, transparent, var(--mix-color) var(--dark-color-mix));
backdrop-filter: saturate(150%) blur(6px);
&:active { --bg-color: color-mix(in oklab, transparent, var(--mix-color) calc(var(--dark-color-mix) * 3)); }}
ui-options { font-size: 16px; display: block; position: absolute; top: 1em; right: 1em; color: lightslategray;
input { accent-color: darkcyan; }
@media (width < 550px) { display: none; }}