spotube/website/src/styles/global.css
2025-08-15 21:06:33 +06:00

93 lines
2.0 KiB
CSS

@import "tailwindcss";
@plugin "@tailwindcss/typography";
@source '../../node_modules/@skeletonlabs/skeleton-react/dist';
@import "@skeletonlabs/skeleton";
@import "@skeletonlabs/skeleton/optional/presets";
@import "@skeletonlabs/skeleton/themes/wintry";
body {
background-image: radial-gradient(
at 50% 0%,
var(--color-secondary-100-900) 0px,
transparent 75%
),
radial-gradient(
at 100% 0%,
var(--color-tertiary-300-700) 0px,
transparent 50%
);
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
h1,
h2,
h3,
h4,
h5,
h6 {
scroll-margin-top: 80px;
}
.prose code::before,
.prose code::after {
content: none !important;
}
.prose code:not(pre code) {
@apply bg-primary-100-900 px-1 py-0.5 rounded-sm text-primary-900-100;
}
.prose a code {
@apply text-primary-500! underline decoration-primary-500;
}
/* Astro PageFind */
.pagefind-ui {
--pagefind-ui-scale: 0.75;
--pagefind-ui-primary: var(--color-primary-500);
--pagefind-ui-text: var(--color-surface-900-100);
--pagefind-ui-border: var(--color-surface-300-700);
--pagefind-ui-border-width: 1px;
--pagefind-ui-border-radius: 0.5rem;
width: 50%;
@apply hidden md:block;
}
.pagefind-ui .pagefind-ui__drawer:not(.pagefind-ui__hidden) {
position: absolute;
left: 0;
right: 0;
margin-top: 0px;
z-index: 9999;
padding: 0 2em 1em;
overflow-y: auto;
box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.2),
0 2px 2px 0 rgba(0, 0, 0, 0.1);
border-bottom-right-radius: var(--pagefind-ui-border-radius);
border-bottom-left-radius: var(--pagefind-ui-border-radius);
@apply bg-white dark:bg-surface-900;
}
.pagefind-ui .pagefind-ui__result-link {
color: var(--pagefind-ui-primary);
}
.pagefind-ui .pagefind-ui__result-excerpt {
@apply font-normal text-surface-900-100;
}
.pagefind-ui .pagefind-ui__search-input {
@apply bg-white/50! dark:bg-surface-900/50!;
}
.pagefind-ui .pagefind-ui__search-clear {
@apply bg-inherit!;
}