headscale-ui/src/app.css

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

/* css settings for svelecte dependency */
@layer components {
	.svelecte {
		--sv-min-height: 40px;
		--sv-bg: oklch(var(--b1));
		--sv-disabled-bg: oklch(var(--nc));
		--sv-border: 1px solid #626262;
		--sv-border-radius: 4px;
		--sv-general-padding: 4px;
		--sv-control-bg: var(--sv-bg);
		--sv-item-wrap-padding: 3px 3px 3px 6px;
		--sv-item-selected-bg: #626262;
		--sv-item-btn-color: #ccc;
		--sv-item-btn-color-hover: #ccc;
		--sv-item-btn-bg: #626262;
		--sv-item-btn-bg-hover: #bc6063;
		--sv-icon-color: #bbb;
		--sv-icon-color-hover: #ccc;
		--sv-icon-bg: transparent;
		--sv-icon-size: 20px;
		--sv-separator-bg: #626262;
		--sv-btn-border: 0;
		--sv-placeholder-color: #ccccd6;
		--sv-dropdown-bg: var(--sv-bg);
		--sv-dropdown-border: var(--sv-border);
		--sv-dropdown-offset: 1px;
		--sv-dropdown-width: auto;
		--sv-dropdown-shadow: 0 1px 3px #555;
		--sv-dropdown-height: 320px;
		--sv-dropdown-active-bg: oklch(var(--b3));
		--sv-dropdown-selected-bg: #754545;
		--sv-create-kbd-border: 1px solid #626262;
		--sv-create-kbd-bg: #626262;
		--sv-create-disabled-bg: #fcbaba;
		--sv-loader-border: 2px solid #626262;
	}
}