138 lines
2.8 KiB
CSS
138 lines
2.8 KiB
CSS
@import 'tailwindcss';
|
|
@import 'preline/variants.css';
|
|
@import './utilities.css';
|
|
|
|
@plugin '@tailwindcss/typography';
|
|
@plugin '@tailwindcss/forms';
|
|
|
|
/* Dark mode support for Tailwind CSS v4 */
|
|
/* https://tailwindcss.com/docs/dark-mode */
|
|
@custom-variant dark (&:where(.dark, .dark *));
|
|
|
|
/* Custom colors */
|
|
@theme {
|
|
--color-midnight: #0c354d;
|
|
--color-ocean: #134e70;
|
|
|
|
--color-cobalt: #6c9cb0;
|
|
--color-steel: #4682b4;
|
|
|
|
--color-turquoise: #0da797;
|
|
--color-bermuda: #7fbab4;
|
|
|
|
--color-desert: #f9deb2;
|
|
--color-bronze: #9e7f5e;
|
|
|
|
--color-gitea-primary: #609926;
|
|
--color-gitea-secondary: #4c7a33;
|
|
|
|
--color-main: light-dark(var(--color-steel), var(--color-bermuda));
|
|
--color-accent: light-dark(var(--color-bronze), var(--color-desert));
|
|
|
|
--color-header: light-dark(var(--color-neutral-800), var(--color-neutral-200));
|
|
--color-primary: light-dark(var(--color-neutral-600), var(--color-neutral-200));
|
|
--color-primary-hover: light-dark(var(--color-neutral-800), var(--color-neutral-400));
|
|
--color-secondary: light-dark(var(--color-neutral-500), var(--color-neutral-400));
|
|
}
|
|
|
|
@layer base {
|
|
:root {
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
--theme-transition: 0.3s ease;
|
|
color-scheme: light;
|
|
}
|
|
|
|
:root:where(.dark, .dark *) {
|
|
color-scheme: dark;
|
|
}
|
|
|
|
*,
|
|
::after,
|
|
::before,
|
|
::backdrop,
|
|
::file-selector-button {
|
|
border-color: var(--color-gray-200, currentColor);
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
scroll-padding-top: 5rem;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow-x: hidden;
|
|
--swup-fade-theme-duration: 0.2s;
|
|
}
|
|
|
|
button:not(:disabled),
|
|
[role='button']:not(:disabled) {
|
|
cursor: pointer;
|
|
}
|
|
|
|
body,
|
|
a,
|
|
button {
|
|
transition:
|
|
background-color var(--theme-transition),
|
|
color var(--theme-transition),
|
|
border-color var(--theme-transition);
|
|
}
|
|
|
|
/* Shiki syntax highlighting */
|
|
:root {
|
|
--shiki-fg: var(--shiki-light);
|
|
--shiki-bg: var(--color-neutral-200);
|
|
}
|
|
|
|
.dark {
|
|
--shiki-fg: var(--shiki-dark);
|
|
--shiki-bg: var(--color-neutral-800);
|
|
}
|
|
|
|
pre.shiki {
|
|
background-color: var(--shiki-bg) !important;
|
|
color: var(--shiki-fg) !important;
|
|
}
|
|
|
|
pre.shiki span {
|
|
color: var(--shiki-light);
|
|
}
|
|
|
|
.dark pre.shiki span {
|
|
color: var(--shiki-dark) !important;
|
|
}
|
|
}
|
|
|
|
/* Content reveal animations */
|
|
.smooth-reveal,
|
|
.smooth-reveal-2,
|
|
.smooth-reveal-cards {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
transition:
|
|
opacity 0.8s ease,
|
|
transform 0.8s ease;
|
|
}
|
|
|
|
.animate-reveal {
|
|
opacity: 1 !important;
|
|
transform: translateY(0) !important;
|
|
}
|
|
|
|
.smooth-reveal-fade {
|
|
opacity: 0;
|
|
transform: translateY(0px);
|
|
transition:
|
|
opacity 1.8s ease,
|
|
transform 0.8s ease;
|
|
}
|
|
|
|
.animate-reveal-fade {
|
|
opacity: 1 !important;
|
|
transform: translateY(0) !important;
|
|
}
|