src/styles/_variables.scss - main - githubmirror/obsidian-clipper

src/styles/_variables.scss
380 строк11 KB
kepano
Checkbox radius
03 апр 2026, 21:19
03 апр 2026, 21:19546bb76
:root {
	color-scheme: light dark;

	--safe-area-inset-top: env(safe-area-inset-top);
	--safe-area-inset-bottom: env(safe-area-inset-bottom);
	--safe-area-inset-left: env(safe-area-inset-left);
	--safe-area-inset-right: env(safe-area-inset-right);

	--accent-h: 258;
	--accent-s: 88%;
	--accent-l: 66%;

	--background-primary: var(--color-base-00);
	--background-primary-alt: var(--color-base-10);
	--background-secondary: var(--color-base-20);

	--background-modifier-border: var(--color-base-25);
	--background-modifier-border-hover: var(--color-base-35);
	--background-modifier-border-focus: var(--color-base-40);

	--background-modifier-form-field: var(--background-primary);
	--background-modifier-hover: rgba(var(--mono-rgb-100), .075);

	--background-modifier-error: hsla(var(--color-red-hsl), 0.1);
	--background-modifier-error-border: hsla(var(--color-red-hsl), 0.15);
	--background-modifier-success: hsla(var(--color-green-hsl), 0.1);
	--background-modifier-success-border: hsla(var(--color-green-hsl), 0.15);
	--background-modifier-warning: rgb(var(--color-orange-rgb), 0.1);
	--background-modifier-warning-border: rgb(var(--color-orange-rgb), 0.15);

	--chart-line-color: var(--color-accent-1);

	/* Checkboxes */
	--checkbox-radius: 4px;
	--checkbox-size: 1rem;
	--checkbox-marker-color: var(--background-primary);
	--checkbox-color: var(--interactive-accent);
	--checkbox-color-hover: var(--interactive-accent-hover);
	--checkbox-border-color: var(--text-faint);
	--checkbox-border-color-hover: var(--text-muted);
	
	--corner-shape: round;

	--clickable-icon-size: 1.75rem;

	--clipper-select-font-weight: 500;
	--clipper-button-font-weight: 500;
	--clipper-button-font-size: var(--font-ui-smaller);

	--dialog-width: 560px;
	--dialog-height: auto;
	--dialog-max-width: 80vw;
	--dialog-max-height: 85vh;

	--dropdown-background: transparent;
	--dropdown-background-hover: var(--interactive-hover);
	--dropdown-background-position: right .25rem top 50%, 0 0;
	--dropdown-background-size: 1rem auto, 100%;
	--dropdown-padding: 0 1.75rem 0 .5rem;

	--divider-color: var(--background-modifier-border);

	--duration-fast: 0.15s;

	--font-ui-smallest: 0.75rem;
	--font-ui-smaller: 0.8125rem;
	--font-ui-small: 0.875rem;
	--font-ui-medium: 0.9375rem;
	--font-ui-large: 1.125rem;

	--font-smaller: var(--font-ui-smaller);
	--font-small: var(--font-ui-small);

	--font-default: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
	--font-monospace-default: ui-monospace, SFMono-Regular, "Cascadia Mono", "Roboto Mono", "DejaVu Sans Mono", "Liberation Mono", Menlo, Monaco, "Consolas", "Source Code Pro", monospace;

	--interactive-accent: var(--color-accent-1);
	--interactive-accent-hover: var(--color-accent-2);

	--icon-size: 1rem;
	--input-height: 1.875rem;

	/* Metadata */
	--metadata-background: transparent;
	--metadata-display-reading: block;
	--metadata-display-editing: block;
	--metadata-max-width: none;
	--metadata-padding: var(--size-4-2) 0;
	--metadata-border-color: var(--background-modifier-border);
	--metadata-border-radius: 0;
	--metadata-border-width: 0;
	--metadata-divider-color: var(--background-modifier-border);
	--metadata-divider-color-hover: transparent;
	--metadata-divider-color-focus: transparent;
	--metadata-divider-width: 0;
	--metadata-gap: 3px;
	--metadata-property-padding: 0;
	--metadata-property-radius: 0.375rem;
	--metadata-property-radius-hover: 0.375rem;
	--metadata-property-radius-focus: 0.375rem;
	--metadata-property-background: transparent;
	--metadata-property-background-hover: transparent;
	--metadata-property-background-active: var(--background-modifier-hover);
	--metadata-label-background-hover: transparent;
	--metadata-label-background-active: var(--background-modifier-hover);
	--metadata-label-font: var(--font-interface);
	--metadata-label-font-size: var(--font-smaller);
	--metadata-label-font-weight: inherit;
	--metadata-label-text-color: var(--text-muted);
	--metadata-label-text-color-hover: var(--text-muted);
	--metadata-label-width: 6.5rem;
	--metadata-input-height: 1.625rem;
	--metadata-input-text-color: var(--text-normal);
	--metadata-input-font: var(--font-interface);
	--metadata-input-font-size: var(--font-smaller);
	--metadata-input-background: transparent;
	--metadata-input-background-hover: transparent;
	--metadata-input-background-active: var(--background-modifier-hover);

	--modal-background: var(--background-primary);
	--modal-width: 90vw;
	--modal-height: 85vh;
	--modal-max-width: 1100px;
	--modal-max-height: 1000px;
	--modal-max-width-narrow: 800px;
	--modal-padding: 1rem;
	--modal-border-width: 1px;
	--modal-border-color: var(--color-base-40, var(--background-modifier-border-focus));
	--modal-radius: var(--radius-l);
	--modal-community-sidebar-width: 280px;

	--popup-padding: 0.75rem;
	--popup-properties-padding: 2px 0.5rem 0.5rem;

	--radius-s: 4px;
	--radius-m: 8px;
	--radius-l: 1rem;

	--text-error: hsl(var(--color-red-hsl));
	--text-success: hsl(var(--color-green-hsl));
	--text-warning: rgb(var(--color-orange-rgb));

	--text-normal: var(--color-base-100);
	--text-muted: var(--color-base-70);
	--text-faint: var(--color-base-50);
	
	--text-accent: var(--color-accent);
	--text-accent-hover: var(--color-accent-2);
	--text-on-accent: white;

	--text-highlight-bg-rgb: 255, 208, 0;
	--text-highlight-bg: rgba(var(--text-highlight-bg-rgb), .4);

	/* Sliders */
	--slider-thumb-border-width: 1px;
	--slider-thumb-border-color: var(--background-modifier-border-hover);
	--slider-thumb-height: 18px;
	--slider-thumb-width: 18px;
	--slider-thumb-y: -6px;
	--slider-thumb-radius: var(--slider-thumb-height);
	--slider-s-thumb-size: 15px;
	--slider-s-thumb-position: -5px;
	--slider-track-background: var(--background-modifier-border);
	--slider-track-height: 3px;

	/* Toggles */
	--toggle-border-width: 2px;
	--toggle-width: 40px;
	--toggle-radius: 18px;
	--toggle-thumb-color: white;
	--toggle-thumb-radius: 18px;
	--toggle-thumb-height: 18px;
	--toggle-thumb-width: 18px;

	--star-color: var(--color-yellow);
}

// macOS26+ styles
.is-macos {
	--corner-shape: superellipse(1.33);
	--radius-s: 0.5rem;
	--radius-m: 0.75rem;

	--slider-thumb-width: 30px;

	--toggle-width: 44px;
	--toggle-radius: 24px;
	--toggle-thumb-radius: 24px;
	--toggle-thumb-height: 16px;
	--toggle-thumb-width: 26px;
	--toggle-thumb-opacity-active: 0.6;

	--toggle-s-width: 36px;
	--toggle-s-thumb-height: 12px;
	--toggle-s-thumb-width: 20px;
}

@media (prefers-color-scheme: light) {
	:root {
		--background-modifier-cover: rgba(220, 220, 220, 0.4);

		--color-accent-hsl:
				var(--accent-h),
				var(--accent-s),
				var(--accent-l);

		--color-accent:
			hsl(
				var(--accent-h),
				var(--accent-s),
				var(--accent-l));

		--color-accent-1:
			hsl(
				calc(var(--accent-h) - 1),
				calc(var(--accent-s) * 1.01),
				calc(var(--accent-l) * 1.075));

		--color-accent-2:
			hsl(
				calc(var(--accent-h) - 3),
				calc(var(--accent-s) * 1.02),
				calc(var(--accent-l) * 1.15));
		
		--color-accent-3:
			hsl(
				calc(var(--accent-h) + 3),
				calc(var(--accent-s) * 0.96),
				calc(var(--accent-l) * 0.85));

		--color-base-00: #ffffff;
		--color-base-05: #fcfcfc;
		--color-base-10: #fafafa;
		--color-base-20: #f6f6f6;
		--color-base-25: #e3e3e3;

		--color-base-30: #e0e0e0;
		--color-base-35: #d4d4d4;
		--color-base-40: #bdbdbd;

		--color-base-50: #ababab;
		--color-base-60: #707070;
		--color-base-70: #5c5c5c;
		--color-base-100: #222222;

		--color-orange-rgb: 236, 117, 0;
		--color-red: #e93147;
		--color-green: #08b94e;

		--color-yellow-rgb: 224, 172, 0;
		--color-yellow: #e0ac00;

		--color-red-hsl: 353, 81%, 55%;
		--color-green-hsl: 144, 92%, 38%;

		--mono-rgb-0: 255, 255, 255;
		--mono-rgb-100: 0, 0, 0;

		--text-selection: hsla(var(--color-accent-hsl), 0.2);
		--input-shadow:
			inset 0 0 0 1px rgba(0,0,0,.12),
			0 2px 3px 0 rgba(0,0,0,.05),
			0 1px 1.5px 0 rgba(0,0,0,.03),
			0 1px 2px 0 rgba(0,0,0,.04),
			0 0 0 0 transparent;

		--input-shadow-hover:
			inset 0 0 0 1px rgba(0,0,0,.17),
			0 2px 3px 0 rgba(0,0,0,.1),
			0 1px 1.5px 0 rgba(0,0,0,.03),
			0 1px 2px 0 rgba(0,0,0,.04),
			0 0 0 0 transparent;

		--interactive-normal: var(--color-base-00);
		--interactive-hover: var(--color-base-10);

		--shadow-s:
			0px 1px 2px rgba(0, 0, 0, .028),
			0px 3.4px 6.7px rgba(0, 0, 0, .042),
			0px 15px 30px rgba(0, 0, 0, .07);
		--shadow-l:
			0px 1.8px 7.3px rgba(0, 0, 0, 0.071),
			0px 6.3px 24.7px rgba(0, 0, 0, 0.112),
			0px 30px 90px rgba(0, 0, 0, 0.2);
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		--background-modifier-cover: rgba(10, 10, 10, .4);
		--background-modifier-hover: rgba(var(--mono-rgb-100), .15);

		--color-accent-hsl:
				var(--accent-h),
				var(--accent-s),
				var(--accent-l);

		--color-accent:
			hsl(
				var(--accent-h),
				var(--accent-s),
				var(--accent-l));

		--color-accent-1:
			hsl(
				calc(var(--accent-h) - 3),
				calc(var(--accent-s) * 1.02),
				calc(var(--accent-l) * 1.15));

		--color-accent-2:
			hsl(
				calc(var(--accent-h) - 5),
				calc(var(--accent-s) * 1.05),
				calc(var(--accent-l) * 1.29));

		--color-accent-3:
			hsl(
				calc(var(--accent-h) - 3),
				calc(var(--accent-s) * 1.02),
				calc(var(--accent-l) * 1.29));

		--color-base-00: #1e1e1e;
		--color-base-05: #212121;
		--color-base-10: #242424;
		--color-base-20: #262626;
		--color-base-25: #2a2a2a;

		--color-base-30: #363636;
		--color-base-35: #3f3f3f;
		--color-base-40: #555555;

		--color-base-50: #666666;
		--color-base-60: #999999;
		--color-base-70: #b3b3b3;
		--color-base-100: #dadada;
		
		--color-orange-rgb: 233, 151, 63;

		--color-red-hsl: 358, 96%, 63%;
		--color-green-hsl: 138, 59%, 54%;

		--color-yellow-rgb: 224, 222, 113;
		--color-yellow: #e0ac00;

		--interactive-accent: var(--color-accent);
		--interactive-accent-hover: var(--color-accent-1);

		--input-shadow:
			inset 0 .5px .5px .5px rgba(255, 255, 255, 0.09),
			0 2px 4px 0 rgba(0,0,0,.15),
			0 1px 1.5px 0 rgba(0,0,0,.1),
			0 1px 2px 0 rgba(0,0,0,.2),
			0 0 0 0 transparent;

		--input-shadow-hover:
			inset 0 .5px 1px .5px rgba(255, 255, 255, 0.16),
			0 2px 3px 0 rgba(0,0,0,.3),
			0 1px 1.5px 0 rgba(0,0,0,.2),
			0 1px 2px 0 rgba(0,0,0,.4),
			0 0 0 0 transparent;

		--mono-rgb-0: 0, 0, 0;
		--mono-rgb-100: 255, 255, 255;

		--text-accent: var(--color-accent-1);
		--text-selection: hsla(var(--color-accent-hsl), 0.3);

		--interactive-normal: var(--color-base-30);
		--interactive-hover: var(--color-base-35);

		--shadow-s:
			0px 1px 2px rgba(0, 0, 0, 0.121),
			0px 3.4px 6.7px rgba(0, 0, 0, 0.179),
			0px 15px 30px rgba(0, 0, 0, 0.3);
		--shadow-l:
			0px 1.8px 7.3px rgba(0, 0, 0, 0.071),
			0px 6.3px 24.7px rgba(0, 0, 0, 0.112),
			0px 30px 90px rgba(0, 0, 0, 0.2);
	}
}