holotrace/src/app.css at main · HappyCoderHackathons/holotrace · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
/* Self-hosted so the Tauri desktop and Android builds have no CDN dependency. */
@import '@fontsource-variable/inter';
@import '@fontsource/jetbrains-mono/400.css';
@import '@fontsource/jetbrains-mono/600.css';

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

@layer base {
	html,
	body {
		height: 100%;
		background-color: theme('colors.chrome.900');
		/* Keep the rubber-band overscroll from fighting canvas panning. */
		overscroll-behavior: none;
	}

	body {
		font-family: theme('fontFamily.sans');
		color: theme('colors.chrome.200');
	}

	* {
		box-sizing: border-box;
	}

	::selection {
		background-color: theme('colors.accent.subtle');
		color: theme('colors.ink.900');
	}

	/*
	 * Every interactive element gets the same ring. Declared once here rather
	 * than repeated per component so the accent can change in one place.
	 */
	:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
		outline: 2px solid theme('colors.accent.DEFAULT');
		outline-offset: 2px;
		border-radius: 4px;
	}
}

@layer components {
	/* Panel scrollbars, tuned for the dark chrome. */
	.thin-scroll {
		scrollbar-width: thin;
		scrollbar-color: theme('colors.chrome.500') transparent;
	}
	.thin-scroll::-webkit-scrollbar {
		width: 8px;
		height: 8px;
	}
	.thin-scroll::-webkit-scrollbar-track {
		background: transparent;
	}
	.thin-scroll::-webkit-scrollbar-thumb {
		background-color: theme('colors.chrome.500');
		border-radius: 8px;
	}
	.thin-scroll::-webkit-scrollbar-thumb:hover {
		background-color: theme('colors.chrome.400');
	}

	/* Small uppercase section label used across every panel header. */
	.panel-label {
		@apply text-[10px] font-semibold uppercase tracking-[0.06em] text-chrome-300;
	}

	/* Icon button in the chrome. Sized up automatically on touch devices. */
	.chrome-icon-btn {
		@apply flex h-9 w-9 items-center justify-center rounded-lg text-chrome-200 transition-colors;
		@apply hover:bg-chrome-700 disabled:cursor-not-allowed disabled:text-chrome-500 disabled:hover:bg-transparent;
	}

	@media (pointer: coarse) {
		.chrome-icon-btn {
			@apply h-touch w-touch;
		}
	}
}

@layer utilities {
	.wire-flow {
		stroke-dasharray: 6 6;
		animation: wire-dash 0.6s linear infinite;
	}

	@keyframes wire-dash {
		to {
			stroke-dashoffset: -12;
		}
	}

	.led-glow {
		filter: drop-shadow(0 0 6px currentColor) drop-shadow(0 0 14px currentColor);
	}

	/* Breathing ring on a pin that is armed and waiting for its partner tap. */
	.pin-armed {
		animation: pin-pulse 1.2s ease-in-out infinite;
	}

	@keyframes pin-pulse {
		0%,
		100% {
			opacity: 0.9;
			r: 13;
		}
		50% {
			opacity: 0.35;
			r: 18;
		}
	}

	/* Home-indicator and notch clearance for bars pinned to a screen edge. */
	.pb-safe {
		padding-bottom: max(env(safe-area-inset-bottom), 0.5rem);
	}
	.pt-safe {
		padding-top: env(safe-area-inset-top);
	}
	.inset-x-safe {
		padding-left: env(safe-area-inset-left);
		padding-right: env(safe-area-inset-right);
	}

	@media (prefers-reduced-motion: reduce) {
		.wire-flow,
		.pin-armed {
			animation: none;
		}
	}
}