chiya/assets/css/app.css

71 lines
No EOL
1.6 KiB
CSS

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@import "./lolight.css";
@import "./lightbox.css";
@layer base {
:root[data-theme=default] {
--color-primary: 68 68 68;
--color-background: 255 255 255;
--color-text-base: 68 68 68;
--color-text-heading: 68 68 68;
--color-text-muted: 153 153 153;
--color-text-dim: 204 204 204;
}
:root[data-theme=default][data-mode=dark] {
--color-primary: 255 255 255;
--color-background: 34 34 34;
--color-text-base: 204 204 204;
--color-text-heading: 255 255 255;
--color-text-muted: 102 102 102;
--color-text-dim: 68 68 68;
}
:root[data-theme=frame] {
--color-primary: 91 82 254;
--color-background: 237 238 242;
--color-text-base: 38 43 55;
--color-text-heading: 57 65 83;
--color-text-muted: 57 65 83;
--color-text-dim: 76 87 111;
}
:root[data-theme=frame][data-mode=dark] {
--color-primary: 91 82 254;
--color-background: 38 43 55;
--color-text-base: 204 204 204;
--color-text-heading: 204 204 204;
--color-text-muted: 76 87 111;
--color-text-dim: 57 65 83;
}
}
/*
Invert prose styles based on the variant of the theme.
*/
:root[data-mode=dark] .prose {
@apply prose-invert;
}
.prose :where(a):not(:where([class~="not-prose"] *)) {
@apply underline decoration-2 decoration-theme-primary;
}
.prose img {
@apply rounded;
}
/* Set width and color for identity icons */
a[rel] svg {
width: 1em;
fill: rgb(var(--color-text-heading));
}
/* Set width and color for identity icons */
svg {
width: 1.5em;
@apply fill-emerald-500 dark:fill-emerald-700;
}