@schukai/monster/source/components/style/property.css

Monster is a simple library for creating fast, robust and lightweight websites.

/** generated from property.pcss **/
:after,
:before,
:root {
	--monster-font-family:
		-apple-system, BlinkMacSystemFont, "Quicksand", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	--monster-font-family-monospace: "Consolas", "Courier New", "Roboto Mono",
		"Source Code Pro", "Fira Mono", monospace;
	--monster-font-size-min: 15px;
	--monster-font-size-base: 16px;
	--monster-font-size-max: 16px;
	--monster-font-scale: 1;
	--monster-font-scale-hi-dpi: 1.25;
	--monster-font-scale-xhi-dpi: 1.25;
	--monster-font-size-fluid: clamp(
		var(--monster-font-size-min),
		calc(var(--monster-font-size-min) + 0.1vw),
		var(--monster-font-size-max)
	);
}
@media (min-resolution: 1.5dppx) {
	:after,
	:before,
	:root {
		--monster-font-scale: var(--monster-font-scale-hi-dpi, 1.1);
	}
}
@media (min-resolution: 3dppx) {
	:after,
	:before,
	:root {
		--monster-font-scale: var(--monster-font-scale-xhi-dpi, 1.18);
	}
}
:after,
:before,
:root {
	--monster-color-primary-1: var(--monster-color-gray-6);
	--monster-color-primary-2: var(--monster-color-gray-6);
	--monster-color-primary-3: var(--monster-color-cinnamon-1);
	--monster-color-primary-4: var(--monster-color-cinnamon-1);
	--monster-bg-color-primary-1: var(--monster-color-gray-1);
	--monster-bg-color-primary-2: var(--monster-color-gray-2);
	--monster-bg-color-primary-3: var(--monster-color-gray-6);
	--monster-bg-color-primary-4: var(--monster-color-gray-4);
}
@media (prefers-color-scheme: dark) {
	:after,
	:before,
	:root {
		--monster-color-primary-1: var(--monster-color-gray-1);
		--monster-color-primary-2: var(--monster-color-gray-1);
		--monster-color-primary-3: var(--monster-color-gray-6);
		--monster-color-primary-4: var(--monster-color-gray-6);
		--monster-bg-color-primary-1: var(--monster-color-gray-6);
		--monster-bg-color-primary-2: var(--monster-color-gray-3);
		--monster-bg-color-primary-3: var(--monster-color-gray-2);
		--monster-bg-color-primary-4: var(--monster-color-gray-1);
	}
}
:after,
:before,
:root {
	--monster-color-secondary-1: var(--monster-color-red-4);
	--monster-color-secondary-2: var(--monster-color-red-4);
	--monster-color-secondary-3: var(--monster-color-red-1);
	--monster-color-secondary-4: var(--monster-color-red-1);
	--monster-bg-color-secondary-1: var(--monster-color-gray-1);
	--monster-bg-color-secondary-2: var(--monster-color-red-2);
	--monster-bg-color-secondary-3: var(--monster-color-red-3);
	--monster-bg-color-secondary-4: var(--monster-color-red-6);
}
@media (prefers-color-scheme: dark) {
	:after,
	:before,
	:root {
		--monster-color-secondary-1: var(--monster-color-red-1);
		--monster-color-secondary-2: var(--monster-color-red-1);
		--monster-color-secondary-3: var(--monster-color-red-6);
		--monster-color-secondary-4: var(--monster-color-red-4);
		--monster-bg-color-secondary-1: var(--monster-color-gray-6);
		--monster-bg-color-secondary-2: var(--monster-color-red-3);
		--monster-bg-color-secondary-3: var(--monster-color-red-2);
		--monster-bg-color-secondary-4: var(--monster-color-red-1);
	}
}
:after,
:before,
:root {
	--monster-color-tertiary-1: var(--monster-color-magenta-4);
	--monster-color-tertiary-2: var(--monster-color-magenta-4);
	--monster-color-tertiary-3: var(--monster-color-magenta-6);
	--monster-color-tertiary-4: var(--monster-color-magenta-1);
	--monster-bg-color-tertiary-1: var(--monster-color-gray-1);
	--monster-bg-color-tertiary-2: var(--monster-color-magenta-1);
	--monster-bg-color-tertiary-3: var(--monster-color-magenta-2);
	--monster-bg-color-tertiary-4: var(--monster-color-magenta-6);
}
@media (prefers-color-scheme: dark) {
	:after,
	:before,
	:root {
		--monster-color-tertiary-1: var(--monster-color-magenta-1);
		--monster-color-tertiary-2: var(--monster-color-magenta-6);
		--monster-color-tertiary-3: var(--monster-color-magenta-4);
		--monster-color-tertiary-4: var(--monster-color-magenta-4);
		--monster-bg-color-tertiary-1: var(--monster-color-gray-6);
		--monster-bg-color-tertiary-2: var(--monster-color-magenta-2);
		--monster-bg-color-tertiary-3: var(--monster-color-magenta-1);
		--monster-bg-color-tertiary-4: var(--monster-color-magenta-1);
	}
}
:after,
:before,
:root {
	--monster-color-destructive-1: var(--monster-color-red-1);
	--monster-color-destructive-2: var(--monster-color-red-4);
	--monster-color-destructive-3: var(--monster-color-red-6);
	--monster-color-destructive-4: var(--monster-color-red-1);
	--monster-bg-color-destructive-1: var(--monster-color-red-4);
	--monster-bg-color-destructive-2: var(--monster-color-gray-1);
	--monster-bg-color-destructive-3: var(--monster-color-red-2);
	--monster-bg-color-destructive-4: var(--monster-color-red-5);
}
@media (prefers-color-scheme: dark) {
	:after,
	:before,
	:root {
		--monster-color-destructive-1: var(--monster-color-red-1);
		--monster-color-destructive-2: var(--monster-color-red-3);
		--monster-color-destructive-3: var(--monster-color-red-4);
		--monster-color-destructive-4: var(--monster-color-red-1);
		--monster-bg-color-destructive-1: var(--monster-color-red-5);
		--monster-bg-color-destructive-2: var(--monster-color-gray-6);
		--monster-bg-color-destructive-3: var(--monster-color-red-1);
		--monster-bg-color-destructive-4: var(--monster-color-red-4);
	}
}
:after,
:before,
:root {
	--monster-color-danger-1: var(--monster-color-raspberry-1);
	--monster-color-danger-2: var(--monster-color-raspberry-4);
	--monster-color-danger-3: var(--monster-color-raspberry-6);
	--monster-color-danger-4: var(--monster-color-raspberry-1);
	--monster-bg-color-danger-1: var(--monster-color-raspberry-4);
	--monster-bg-color-danger-2: var(--monster-color-gray-1);
	--monster-bg-color-danger-3: var(--monster-color-raspberry-2);
	--monster-bg-color-danger-4: var(--monster-color-raspberry-5);
}
@media (prefers-color-scheme: dark) {
	:after,
	:before,
	:root {
		--monster-color-danger-1: var(--monster-color-raspberry-1);
		--monster-color-danger-2: var(--monster-color-raspberry-3);
		--monster-color-danger-3: var(--monster-color-raspberry-4);
		--monster-color-danger-4: var(--monster-color-raspberry-1);
		--monster-bg-color-danger-1: var(--monster-color-raspberry-5);
		--monster-bg-color-danger-2: var(--monster-color-gray-6);
		--monster-bg-color-danger-3: var(--monster-color-raspberry-1);
		--monster-bg-color-danger-4: var(--monster-color-raspberry-4);
	}
}
:after,
:before,
:root {
	--monster-color-success-1: var(--monster-color-green-1);
	--monster-color-success-2: var(--monster-color-green-4);
	--monster-color-success-3: var(--monster-color-green-6);
	--monster-color-success-4: var(--monster-color-green-1);
	--monster-bg-color-success-1: var(--monster-color-green-3);
	--monster-bg-color-success-2: var(--monster-color-gray-1);
	--monster-bg-color-success-3: var(--monster-color-green-2);
	--monster-bg-color-success-4: var(--monster-color-green-5);
}
@media (prefers-color-scheme: dark) {
	:after,
	:before,
	:root {
		--monster-color-success-1: var(--monster-color-green-1);
		--monster-color-success-2: var(--monster-color-green-2);
		--monster-color-success-3: var(--monster-color-green-4);
		--monster-color-success-4: var(--monster-color-green-1);
		--monster-bg-color-success-1: var(--monster-color-green-5);
		--monster-bg-color-success-2: var(--monster-color-gray-6);
		--monster-bg-color-success-3: var(--monster-color-green-1);
		--monster-bg-color-success-4: var(--monster-color-green-3);
	}
}
:after,
:before,
:root {
	--monster-color-warning-1: var(--monster-color-orange-1);
	--monster-color-warning-2: var(--monster-color-orange-4);
	--monster-color-warning-3: var(--monster-color-orange-6);
	--monster-color-warning-4: var(--monster-color-orange-1);
	--monster-bg-color-warning-1: var(--monster-color-orange-3);
	--monster-bg-color-warning-2: var(--monster-color-gray-1);
	--monster-bg-color-warning-3: var(--monster-color-orange-2);
	--monster-bg-color-warning-4: var(--monster-color-orange-5);
}
@media (prefers-color-scheme: dark) {
	:after,
	:before,
	:root {
		--monster-color-warning-1: var(--monster-color-orange-1);
		--monster-color-warning-2: var(--monster-color-orange-3);
		--monster-color-warning-3: var(--monster-color-orange-4);
		--monster-color-warning-4: var(--monster-color-orange-1);
		--monster-bg-color-warning-1: var(--monster-color-orange-5);
		--monster-bg-color-warning-2: var(--monster-color-gray-6);
		--monster-bg-color-warning-3: var(--monster-color-orange-1);
		--monster-bg-color-warning-4: var(--monster-color-orange-3);
	}
}
:after,
:before,
:root {
	--monster-color-error-1: var(--monster-color-red-1);
	--monster-color-error-2: var(--monster-color-red-4);
	--monster-color-error-3: var(--monster-color-red-6);
	--monster-color-error-4: var(--monster-color-red-1);
	--monster-bg-color-error-1: var(--monster-color-red-4);
	--monster-bg-color-error-2: var(--monster-color-gray-1);
	--monster-bg-color-error-3: var(--monster-color-red-2);
	--monster-bg-color-error-4: var(--monster-color-red-5);
}
@media (prefers-color-scheme: dark) {
	:after,
	:before,
	:root {
		--monster-color-error-1: var(--monster-color-red-1);
		--monster-color-error-2: var(--monster-color-red-3);
		--monster-color-error-3: var(--monster-color-red-4);
		--monster-color-error-4: var(--monster-color-red-1);
		--monster-bg-color-error-1: var(--monster-color-red-5);
		--monster-bg-color-error-2: var(--monster-color-gray-6);
		--monster-bg-color-error-3: var(--monster-color-red-1);
		--monster-bg-color-error-4: var(--monster-color-red-4);
	}
}
:after,
:before,
:root {
	--monster-color-selection-1: var(--monster-color-gray-6);
	--monster-color-selection-2: var(--monster-color-gray-6);
	--monster-color-selection-3: var(--monster-color-gray-6);
	--monster-color-selection-4: var(--monster-color-gray-1);
	--monster-bg-color-selection-1: var(--monster-color-yellow-2);
	--monster-bg-color-selection-2: var(--monster-color-yellow-1);
	--monster-bg-color-selection-3: var(--monster-color-yellow-2);
	--monster-bg-color-selection-4: var(--monster-color-yellow-6);
}
@media (prefers-color-scheme: dark) {
	:after,
	:before,
	:root {
		--monster-color-selection-1: var(--monster-color-gray-6);
		--monster-color-selection-2: var(--monster-color-gray-6);
		--monster-color-selection-3: var(--monster-color-gray-6);
		--monster-color-selection-4: var(--monster-color-gray-1);
		--monster-bg-color-selection-1: var(--monster-color-yellow-2);
		--monster-bg-color-selection-2: var(--monster-color-yellow-1);
		--monster-bg-color-selection-3: var(--monster-color-yellow-2);
		--monster-bg-color-selection-4: var(--monster-color-yellow-6);
	}
}
:after,
:before,
:root {
	--monster-color-primary-disabled-1: var(--monster-color-gray-4);
	--monster-color-primary-disabled-2: var(--monster-color-gray-4);
	--monster-color-primary-disabled-3: var(--monster-color-gray-4);
	--monster-color-primary-disabled-4: var(--monster-color-gray-4);
	--monster-bg-color-primary-disabled-1: var(--monster-color-gray-1);
	--monster-bg-color-primary-disabled-2: var(--monster-color-gray-2);
	--monster-bg-color-primary-disabled-3: var(--monster-color-gray-3);
	--monster-bg-color-primary-disabled-4: var(--monster-color-gray-6);
	--monster-color-gradient-1: #833ab4;
	--monster-color-gradient-2: #fd1d1d;
	--monster-color-gradient-3: #fcb045;
}
@media (prefers-color-scheme: dark) {
	:after,
	:before,
	:root {
		--monster-color-primary-disabled-1: var(--monster-color-gray-4);
		--monster-color-primary-disabled-2: var(--monster-color-gray-4);
		--monster-color-primary-disabled-3: var(--monster-color-gray-3);
		--monster-color-primary-disabled-4: var(--monster-color-gray-3);
		--monster-bg-color-primary-disabled-1: var(--monster-color-gray-6);
		--monster-bg-color-primary-disabled-2: var(--monster-color-gray-3);
		--monster-bg-color-primary-disabled-3: var(--monster-color-gray-2);
		--monster-bg-color-primary-disabled-4: var(--monster-color-gray-1);
		--monster-color-gradient-1: #ffe0b2;
		--monster-color-gradient-2: #ad8275;
		--monster-color-gradient-3: #771ba3;
	}
}
:after,
:before,
:root {
	--monster-box-shadow-1: none;
	--monster-box-shadow-2: -1px 1px 10px 1px hsla(0, 0%, 76%, 0.61);
	--monster-text-shadow: none;
	--monster-theme-control-bg-color: var(--monster-color-seashell-1);
	--monster-theme-control-color: var(--monster-color-seashell-6);
	--monster-theme-control-hover-color: var(--monster-color-seashell-6);
	--monster-theme-control-hover-bg-color: var(--monster-color-seashell-2);
	--monster-theme-control-border-width: 2px;
	--monster-theme-control-border-style: solid;
	--monster-theme-control-border-radius: 0;
	--monster-theme-control-border-color: var(--monster-color-primary-1);
}
@media (prefers-color-scheme: dark) {
	:after,
	:before,
	:root {
		--monster-theme-control-bg-color: var(--monster-color-gray-5);
		--monster-theme-control-color: var(--monster-color-gray-1);
		--monster-theme-control-border-color: var(--monster-color-gray-3);
		--monster-theme-control-hover-color: var(--monster-color-gray-1);
		--monster-theme-control-hover-bg-color: var(--monster-color-gray-6);
	}
}
:after,
:before,
:root {
	--monster-theme-on-color: var(--monster-color-green-1);
	--monster-theme-on-bg-color: var(--monster-color-green-5);
	--monster-theme-off-color: var(--monster-color-gray-1);
	--monster-theme-off-bg-color: var(--monster-color-gray-4);
}
@media (prefers-color-scheme: dark) {
	:after,
	:before,
	:root {
		--monster-theme-on-color: var(--monster-color-gray-6);
		--monster-theme-on-bg-color: var(--monster-color-gray-1);
		--monster-theme-off-color: var(--monster-color-gray-1);
		--monster-theme-off-bg-color: var(--monster-color-gray-5);
	}
}
:after,
:before,
:root {
	--monster-border-style: solid;
	--monster-border-width: 3px;
	--monster-border-radius: 0;
	--monster-outline-width: 1px;
	--monster-popper-witharrrow-distance: -4px;
	--monster-z-index-default: 0;
	--monster-z-index-outline: 10;
	--monster-z-index-dropdown: 200;
	--monster-z-index-dropdown-overlay: 210;
	--monster-z-index-sticky: 300;
	--monster-z-index-sticky-overlay: 310;
	--monster-z-index-fixed: 400;
	--monster-z-index-fixed-overlay: 410;
	--monster-z-index-modal-backdrop: 500;
	--monster-z-index-modal-backdrop-overlay: 510;
	--monster-z-index-offcanvas: 600;
	--monster-z-index-offcanvas-overlay: 610;
	--monster-z-index-modal: 700;
	--monster-z-index-modal-overlay: 710;
	--monster-z-index-popover: 800;
	--monster-z-index-popover-overlay: 810;
	--monster-z-index-tooltip: 800;
	--monster-z-index-tooltip-overlay: 910;
	--monster-space-0: 0;
	--monster-space-1: 2px;
	--monster-space-2: 4px;
	--monster-space-3: 6px;
	--monster-space-4: 10px;
	--monster-space-5: 16px;
	--monster-space-6: 26px;
	--monster-space-7: 42px;
	--monster-breakpoint-0: 480px;
	--monster-breakpoint-4: 480px;
	--monster-breakpoint-7: 768px;
	--monster-breakpoint-9: 992px;
	--monster-breakpoint-12: 1200px;
	--monster-dragger-width: 2px;
	--monster-dragger-handle-width: 4px;
	--monster-dragger-handle-height: 50px;
}