Something went wrong. Try again.
A very simple bookmarking webapp pinboard.ing
Something went wrong. Try again.
1.7 kB · 76 lines
CSS
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677@layer components { [class*="button"], button { --bg-opacity: 1; --bg: var(--primary);
display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--spacing) * 0.5); padding: calc(var(--spacing) * 0.75) calc(var(--spacing) * 1.5);
background-color: oklch(from var(--bg) l c h / var(--bg-opacity)); color: var(--color, white); color: var(--color, contrast-color(var(--primary)));
border: none; border-radius: var(--radius); text-decoration: none;
font-weight: 600; font-size: 0.875rem; cursor: pointer;
transition: 0.25s ease;
&:hover { --bg-opacity: 0.85; }
&:disabled { cursor: not-allowed; opacity: 0.5; } }
.button-ghost { --bg-opacity: 0; --bg-lightness: 1; --bg-saturation: 0.7; --color: oklch(from var(--primary-text) l c h / 0.75); background-color: hsl( from var(--bg) h calc(s * var(--bg-saturation)) calc(l * var(--bg-lightness)) / var(--bg-opacity) );
&:hover { --bg-opacity: 0.3; }
&:active, &.active { --bg-opacity: 0.4; --bg-lightness: 1.05; --bg-saturation: 0.25; } }
.button-danger { --bg: var(--danger); --saturation: 80%; --color: hsl(from var(--danger) h var(--saturation) l);
&:hover { --saturation: 100%; } }
.button-icon { padding: 0.5rem; }
.button-round { border-radius: 100vw; }}