accent_picker_css.go RawHistoryFolder

1package theme
2
3// generateAccentPickerCSS creates accent picker overlay styles.
4// The picker displays a row of accented characters that the user can select.
5func generateAccentPickerCSS(p Palette) string {
6	_ = p
7	return `/* ===== Accent Picker Styling ===== */
8
9/* Main container - horizontal row of accent characters */
10.accent-picker {
11	background-color: alpha(var(--surface-variant), 0.95);
12	border: 0.0625em solid var(--border);
13	border-radius: 0.25em;
14	padding: 0.375em 0.5em;
15	margin-bottom: 1em;
16	box-shadow: 0 2px 8px alpha(black, 0.2);
17	transition: border-color 100ms ease-in-out;
18}
19
20/* Focused state - accent border like omnibox */
21.accent-picker:focus,
22.accent-picker:focus-within,
23.accent-picker:focus-visible {
24	border-color: var(--accent);
25	outline-style: none;
26	outline-width: 0px;
27	outline-color: transparent;
28}
29
30/* Individual accent character label */
31.accent-picker-item {
32	font-size: 1.5em;
33	font-weight: 500;
34	color: var(--text);
35	padding: 0.25em 0.5em;
36	border-radius: 0.125em;
37	min-width: 1.5em;
38	transition: background-color 100ms ease-in-out;
39}
40
41.accent-picker-item:hover {
42	background-color: alpha(var(--accent), 0.15);
43}
44
45/* Selected accent character */
46.accent-picker-selected {
47	background-color: alpha(var(--accent), 0.25);
48	color: var(--accent);
49}
50
51/* Numbered items (1-9) could show subtle number hints */
52.accent-picker-numbered {
53	/* Could add ::after pseudo-element for number hint if needed */
54}
55`
56}