coder/site/src/index.css

/*
	To enable opacity in colors, please use the new HSL format.
	Related issue: https://github.com/shadcn-ui/ui/issues/805#issuecomment-1616021820
*/

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
	:root,
	.light {
		--content-primary: 240 10% 4%;
		--content-secondary: 240 5% 34%;
		--content-link: 221 83% 53%;
		--content-invert: 0 0% 98%;
		--content-disabled: 240 5% 65%;
		--content-success: 142 72% 29%;
		--content-warning: 27 96% 61%;
		--content-destructive: 0 84% 60%;
		--surface-primary: 0 0% 98%;
		--surface-secondary: 240 5% 96%;
		--surface-tertiary: 240 6% 90%;
		--surface-quaternary: 240 5% 84%;
		--surface-invert-primary: 240 4% 16%;
		--surface-invert-secondary: 240 5% 26%;
		--surface-destructive: 0 93% 94%;
		--surface-green: 141 79% 85%;
		--surface-grey: 240 5% 96%;
		--surface-orange: 34 100% 92%;
		--surface-sky: 201 94% 86%;
		--surface-red: 0 93% 94%;
		--surface-purple: 251 91% 95%;
		--border-purple: 255 92% 76%;
		--border-default: 240 6% 90%;
		--border-success: 142 76% 36%;
		--border-sky: 203 90% 40%;
		--border-green: 138 82% 82%;
		--border-warning: 30.66, 97.16%, 72.35%;
		--border-destructive: 0 84% 60%;
		--border-hover: 240 5% 34%;
		--overlay-default: 240 5% 84% / 80%;
		--radius: 0.5rem;
		--highlight-purple: 262 83% 58%;
		--highlight-green: 143 64% 24%;
		--highlight-grey: 240 5% 65%;
		--highlight-sky: 201 90% 27%;
		--highlight-red: 0 74% 42%;
		--border: 240 5.9% 90%;
		--input: 240 5.9% 90%;
		--ring: 240 10% 3.9%;
		--avatar-lg: 2.5rem;
		--avatar-default: 1.5rem;
		--avatar-sm: 1.125rem;
	}
	.dark {
		--content-primary: 0 0% 98%;
		--content-secondary: 240 5% 65%;
		--content-link: 213 94% 68%;
		--content-invert: 240 10% 4%;
		--content-disabled: 240 5% 26%;
		--content-success: 142 76% 36%;
		--content-warning: 31 97% 72%;
		--content-destructive: 0 91% 71%;
		--surface-primary: 240 10% 4%;
		--surface-secondary: 240 6% 10%;
		--surface-tertiary: 240 4% 16%;
		--surface-quaternary: 240 5% 26%;
		--surface-invert-primary: 240 6% 90%;
		--surface-invert-secondary: 240 5% 65%;
		--surface-destructive: 0 75% 15%;
		--surface-green: 145 80% 10%;
		--surface-grey: 240 6% 10%;
		--surface-orange: 13 81% 15%;
		--surface-sky: 204 80% 16%;
		--surface-red: 0 75% 15%;
		--surface-purple: 261 73% 23%;
		--border-purple: 255 92% 76%;
		--border-default: 240 4% 16%;
		--border-success: 142 76% 36%;
		--border-warning: 30.66, 97.16%, 72.35%;
		--border-destructive: 0 91% 71%;
		--border-sky: 194 90% 62%;
		--border-green: 143 77% 87%;
		--border-hover: 240, 5%, 34%;
		--overlay-default: 240 10% 4% / 80%;
		--highlight-purple: 252 95% 85%;
		--highlight-green: 141 79% 85%;
		--highlight-grey: 240 4% 46%;
		--highlight-sky: 198 93% 60%;
		--highlight-red: 0 91% 71%;
		--border: 240 3.7% 15.9%;
		--input: 240 3.7% 15.9%;
		--ring: 240 4.9% 83.9%;
	}
}

@layer base {
	* {
		@apply border-border;
	}

	/*
	By default, Radix adds a margin to the `body` element when a dropdown is displayed,
	causing some shifting when the dropdown has a full-width size, as is the case with the mobile menu.
	To prevent this, we need to apply the styles below.

	There’s a related issue on GitHub: Radix UI Primitives Issue #3251
	https://github.com/radix-ui/primitives/issues/3251
	 */
	html body[data-scroll-locked] {
		--removed-body-scroll-bar-size: 0;
		margin-right: 0;
	}

	/* Prevent layout shift when modals open by maintaining scrollbar width */
	html {
		scrollbar-gutter: stable;
	}

	/*
	  This is a temporary fix for MUI Modals/Popovers until they are removed.
	  When html has scrollbar-gutter: stable, the browser reserves space for the scrollbar.
	  MUI Modals/Popovers, when locking body scroll, add `overflow: hidden` and `padding-right`
	  to the body to compensate for the scrollbar they are hiding. This added padding-right
	  conflicts with the already reserved gutter space, causing a layout shift.
	  This rule overrides MUI's added padding-right on the body specifically when MUI
	  is likely to have set both overflow:hidden and padding-right.
	*/
	body[style*="overflow: hidden"][style*="padding-right"] {
		padding-right: 0px;
	}
}