Lumina / client / app.css

/*
 *     Lumina/Peonies
 *     Copyright (C) 2018-2026 MLC 'Strawmelonjuice'  Bloeiman and contributors.
 *
 *     This program is free software: you can redistribute it and/or modify
 *     it under the terms of the GNU Affero General Public License as published
 *     by the Free Software Foundation, either version 3 of the License, or
 *     (at your option) any later version.
 *
 *     This program is distributed in the hope that it will be useful,
 *     but WITHOUT ANY WARRANTY; without even the implied warranty of
 *     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 *     GNU Affero General Public License for more details.
 *
 *     You should have received a copy of the GNU Affero General Public License
 *     along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */

@import "tailwindcss";

@source "./src/**/*.gleam";

@font-face {
	/* The Josefin Sans is used for:
	*  Menu items
	*/
	font-family: "Josefin Sans";
	src: url(/assets/fonts/Josefin_Sans/JosefinSans-VariableFont_wght.ttf);
}

@font-face {
	/* The Syne Font is used for:
	*  Main theme
	*/
	font-family: "Vend Sans";
	src: url(/assets/fonts/Vend_Sans/VendSans-VariableFont_wght.ttf);
}

@font-face {
	/* The Gantari font is used for:
	*  'Lumina' name typography
	*/
	font-family: "Gantari";
	src: url(/assets/fonts/Gantari/Gantari-VariableFont_wght.ttf);
}

@font-face {
	/* The Elms sans is used for:
	*  (User-generated) Content on pages, form input fields.
	*/
	font-family: "Elms Sans";
	src: url(/assets/fonts/Elms_Sans/ElmsSans-VariableFont_wght.ttf);
}

@font-face {
	/* The DM Mono font is used for:
	*  Code blocks and monospaced text
	*/
	font-family: "DM Mono";
	src: url(/assets/fonts/DM_Mono/DMMono-Regular.ttf);
}

@theme {
	--font-sans: "Vend Sans";
	--font-logo: "Gantari";
	--font-content: "Elms Sans";
	--font-menuitems: "Josefin Sans";
	--font-script: "DM Mono";
}

@plugin "daisyui" {
}

@plugin "daisyui/theme" {
	name: "lumina-light";
	default: true;
	prefersdark: false;
	color-scheme: "light";
	--color-base-100: oklch(96% 0.044 156.743);
	--color-base-200: oklch(97% 0.071 103.193);
	--color-base-300: oklch(94% 0.028 342.258);
	--color-base-content: oklch(51% 0.096 186.391);
	--color-primary: oklch(87% 0.15 154.449);
	--color-primary-content: oklch(30% 0.056 229.695);
	--color-secondary: oklch(51% 0.253 323.949);
	--color-secondary-content: oklch(94% 0.028 342.258);
	--color-accent: oklch(80% 0.114 19.571);
	--color-accent-content: oklch(44% 0.043 257.281);
	--color-neutral: oklch(98% 0.003 247.858);
	--color-neutral-content: oklch(12% 0.042 264.695);
	--color-info: oklch(85% 0.138 181.071);
	--color-info-content: oklch(29% 0.066 243.157);
	--color-success: oklch(76% 0.233 130.85);
	--color-success-content: oklch(37% 0.077 168.94);
	--color-warning: oklch(70% 0.213 47.604);
	--color-warning-content: oklch(27% 0.077 45.635);
	--color-error: oklch(63% 0.237 25.331);
	--color-error-content: oklch(27% 0.105 12.094);
	--radius-selector: 0.75rem;
	--radius-field: 1.25rem;
	--radius-box: 1.5rem;
	--size-selector: 0.25rem;
	--size-field: 0.25rem;
	--border: 1px;
	--depth: 1;
	--noise: 0;
	/* --spacing: 0.5rem; */
}

@plugin "daisyui/theme" {
	name: "lumina-dark";
	default: false;
	prefersdark: true;
	color-scheme: "dark";

	--color-base-100: oklch(14% 0.02 156.743);
	/* Darker background */
	--color-base-200: oklch(20% 0.03 103.193);
	--color-base-300: oklch(25% 0.02 342.258);
	--color-base-content: oklch(85% 0.08 186.391);
	/* Brighter text */
	--color-primary: oklch(50% 0.15 154.449);
	/* Stronger primary */
	--color-primary-content: oklch(88% 0.09 229.695);
	/* Brighter */
	--color-secondary: oklch(38% 0.23 323.949);
	--color-secondary-content: oklch(90% 0.05 342.258);
	/* Higher contrast */
	--color-accent: oklch(55% 0.12 19.571);
	--color-accent-content: oklch(87% 0.07 257.281);
	--color-neutral: oklch(12% 0.01 247.858);
	/* Darker neutral */
	--color-neutral-content: oklch(88% 0.06 264.695);
	/* Higher contrast */
	--color-info: oklch(55% 0.14 181.071);
	--color-info-content: oklch(90% 0.08 243.157);
	--color-success: oklch(42% 0.22 130.85);
	--color-success-content: oklch(85% 0.09 168.94);
	--color-warning: oklch(50% 0.2 47.604);
	--color-warning-content: oklch(88% 0.08 45.635);
	--color-error: oklch(45% 0.23 25.331);
	--color-error-content: oklch(90% 0.11 12.094);
	--radius-selector: 0.75rem;
	--radius-field: 1.25rem;
	--radius-box: 1.5rem;
	--size-selector: 0.25rem;
	--size-field: 0.25rem;
	--border: 1px;
	--depth: 1;
	--noise: 0;
	/* --spacing: 0.5rem; */
}

@layer base {
	html {
		/* HTML overflow hidden */
		overflow: clip;
	}

	* {
		/* By default, none is selectable, selectable stuff gets 'text-select' class so tailwind re-enables it there. */
		-webkit-user-select: none;
		user-select: none;
	}

	/*Pride month banner*/
	body:has(.monthclass-6) main::before {
		margin: 0;
		content: "Happy Pride Month! 💖🏳️‍🌈";
		justify-content: center;
		align-items: center;
		height: 1.4em;
		color: black;
		width: 100vw;
		border-radius: 0;
		display: inline-flex;
		background-image: linear-gradient(
			to right,
			rgb(237, 34, 36),
			rgb(243, 91, 34),
			rgb(249, 150, 33),
			rgb(245, 193, 30),
			rgb(241, 235, 27) 27%,
			rgb(241, 235, 27),
			rgb(241, 235, 27) 33%,
			rgb(99, 199, 32),
			rgb(12, 155, 73),
			rgb(33, 135, 141),
			rgb(57, 84, 165),
			rgb(97, 55, 155),
			rgb(147, 40, 142)
		);
	}

	body:has(.monthclass-6) {
		--bs: 300% 100%;
	}

	body:has(.monthclass-6) main:hover::before {
		animation: prideBannerAnimation 10s linear infinite;
	}

	@keyframes prideBannerAnimation {
		0% {
		}

		25% {
			background-position: 0 0;
			background-size: var(--bs);
			background-repeat: repeat;
		}

		30% {
			background-position: 50% 0;
			content: "Protect LGBTQ+ Rights! 🏳️‍🌈✊";
			background-size: var(--bs);
			background-repeat: repeat;
		}

		50% {
			background-position: 100% 0;
			content: "Protect LGBTQ+ Rights! 🏳️‍🌈✊";
			background-size: var(--bs);
			background-repeat: repeat;
		}

		75% {
			background-position: 0 0;
			background-size: var(--bs);
			background-repeat: repeat;
		}

		80% {
			background-position: 50% 0;
			content: "Protect LGBTQ+ Rights!  🏳️‍🌈 ✊";
			background-size: var(--bs);
			background-repeat: repeat;
		}

		100% {
		}
	}

	body:has(.monthclass-6):active main::before {
		animation: none;
		animation-delay: 3s;
		animation-duration: 999s;
		animation-name: transrights;
		animation-iteration-count: 1;
		animation-timing-function: ease-in-out;
	}

	@keyframes transrights {
		0% {
			content: "Protect trans Rights!  ✊ 🩵🩷🤍🩷🩵";
			background-image: linear-gradient(
				to right,
				rgb(85, 205, 252),
				rgb(179, 157, 233),
				rgb(247, 168, 184),
				rgb(246, 216, 221),
				rgb(255, 255, 255) 45%,
				rgb(255, 255, 255),
				rgb(255, 255, 255) 55%,
				rgb(246, 216, 221),
				rgb(247, 168, 184),
				rgb(179, 157, 233),
				rgb(85, 205, 252)
			);
		}
	}

	/*29th of februari is nonexistent in non-leap years*/
	body:has(.dayclass-29.monthclass-2) main::before {
		margin-top: 0.8em;
		margin-bottom: 0.8em;
		content: "[This day does not exist]";
		justify-content: center;
		align-items: center;
		height: 2.4em;
		flex: none;
		color: yellow;
		width: 100%;
		display: inline-flex;
		background-color: black;
		text-shadow: 22px 4px 2px rgba(255, 255, 0, 0.6);
		box-shadow: 2px 2px 10px 8px #3d3a3a;
		animation-name: glitched;
		animation-duration: 3s;
		animation-iteration-count: infinite;
		animation-timing-function: linear;
		animation-direction: alternate;
	}

	@keyframes glitched {
		0% {
			transform: skew(-20deg);
			left: -4px;
		}

		10% {
			transform: skew(-20deg);
			left: -4px;
		}

		11% {
			transform: skew(0deg);
			left: 2px;
		}

		50% {
			transform: skew(0deg);
		}

		51% {
			transform: skew(10deg);
		}

		59% {
			transform: skew(10deg);
		}

		60% {
			transform: skew(0deg);
		}

		100% {
			transform: skew(0deg);
		}
	}
	.lg\:freeroam {
		@media (width >= 64rem) {
			left: var(--left);
			top: var(--top);
			transform: var(--transform);
			position: absolute;
		}
	}
}