106 lines
2.8 KiB
CSS
106 lines
2.8 KiB
CSS
@import "tailwindcss";
|
||
@plugin "@tailwindcss/typography";
|
||
@source "./app/**/*.{js,ts,jsx,tsx,mdx}";
|
||
@source "./components/**/*.{js,ts,jsx,tsx,mdx}";
|
||
@source "./hooks/**/*.{js,ts,jsx,tsx,mdx}";
|
||
|
||
@theme {
|
||
--color-lightbg: oklch(0.945 0.006 252); /* Light Background */
|
||
--color-lighttext: oklch(0.2771 0.03774 261.549988); /* Light Text */
|
||
--color-lightsec: oklch(0.5564 0.04004 259.779999); /* Light Secondary */
|
||
|
||
--color-darkbg: oklch(0.30012 0.02171 262.519989); /* Dark Background */
|
||
--color-darktext: oklch(0.9355 0.0017 247.839996); /* Dark Text */
|
||
--color-darksec: oklch(0.7829 0.04004 259.779999); /* Dark Secondary */
|
||
|
||
--color-trptkblue: oklch(0.46077 0.13464 260.109985);
|
||
|
||
/* Solid border/line colours – pre-blended current-on-bg */
|
||
--color-lightline: oklch(0.88 0.007 254.68); /* 5 % */
|
||
--color-lightline-mid: oklch(0.85 0.008 256.37); /* 10 % */
|
||
--color-lightline-strong: oklch(0.819 0.012 257.33); /* 20 % (lightsec on lightbg) */
|
||
--color-lightline-hover: oklch(0.759 0.013 259.04); /* 25 % */
|
||
--color-lightline-focus: oklch(0.601 0.02 260.8); /* 50 % */
|
||
|
||
--color-darkline: oklch(0.342 0.022 262.51); /* 5 % */
|
||
--color-darkline-mid: oklch(0.377 0.021 262.47); /* 10 % */
|
||
--color-darkline-strong: oklch(0.412 0.028 261.53); /* 20 % (darksec on darkbg) */
|
||
--color-darkline-hover: oklch(0.482 0.017 262.22); /* 25 % */
|
||
--color-darkline-focus: oklch(0.644 0.011 261.36); /* 50 % */
|
||
--font-argesta: var(--font-argesta-face), ui-serif, serif;
|
||
--font-silka: var(--font-silka-face), ui-sans-serif, sans-serif;
|
||
--font-silkasb: var(--font-silkasb-face), ui-sans-serif, sans-serif;
|
||
}
|
||
|
||
.break-words {
|
||
text-wrap: balance;
|
||
hyphens: auto;
|
||
}
|
||
|
||
.no-ring {
|
||
@apply focus:ring-0 focus:ring-offset-0 focus:outline-none;
|
||
}
|
||
|
||
.release-blur::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
border-radius: inherit;
|
||
|
||
background-image: var(--cover-url);
|
||
background-size: cover;
|
||
background-position: center;
|
||
|
||
filter: blur(44px) saturate(1.5) brightness(1.2);
|
||
mix-blend-mode: normal;
|
||
|
||
opacity: 0;
|
||
|
||
transform: translateZ(0);
|
||
-webkit-transform: translateZ(0);
|
||
will-change: opacity, transform, filter;
|
||
backface-visibility: hidden;
|
||
-webkit-backface-visibility: hidden;
|
||
}
|
||
|
||
.release-blur.loaded::before {
|
||
animation: releaseBlurFadeIn 2s ease-in-out forwards;
|
||
}
|
||
|
||
:root .release-blur::before {
|
||
mix-blend-mode: normal;
|
||
}
|
||
|
||
.dark .release-blur::before {
|
||
mix-blend-mode: screen;
|
||
}
|
||
|
||
@keyframes releaseBlurFadeIn {
|
||
from {
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
opacity: 0.15;
|
||
}
|
||
}
|
||
|
||
.dark .release-blur.loaded::before {
|
||
animation: releaseBlurFadeInDark 2s ease-in-out forwards;
|
||
}
|
||
|
||
@keyframes releaseBlurFadeInDark {
|
||
from {
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
opacity: 0.15;
|
||
}
|
||
}
|
||
|
||
@custom-variant dark (&:where(.dark, .dark *));
|
||
|
||
html,
|
||
body {
|
||
overflow-x: hidden;
|
||
max-width: 100%;
|
||
}
|