← All changes | css/common/_switch.scss +44 -17 3.9.6 → trunk View file →

		@@ -1,8 +1,6 @@
1	1	@use 'theme';
2	2
3		-$off-color: #789;
4		-
5	3	.snippet-execution-button,
6	4	.snippet-activation-switch,
7	5	input[type='checkbox'].switch {
8	6	display: block;
		@@ -8,8 +6,10 @@
8	6	display: block;
9	7	position: relative;
10	8	}
11	9
	10	+// Activation switch: an accent-coloured 36x19 pill shared by the list-table
	11	+// activate column, snippet cards and settings toggles.
12	12	.snippet-activation-switch,
13	13	input[type='checkbox'].switch {
14	14	appearance: none;
15	15	outline: 0;
		@@ -14,13 +14,13 @@
14	14	appearance: none;
15	15	outline: 0;
16	16	cursor: pointer;
17	17	margin: 0;
18		- inline-size: 32px;
	18	+ inline-size: 36px;
19	19	block-size: 19px;
20		- border-radius: 34px;
	20	+ border-radius: 999px;
21	21	text-align: start;
22		- border: 1px solid $off-color;
	22	+ border: 1px solid var(--cs-color-accent);
23	23	box-sizing: border-box;
24	24
25	25	&::before {
26	26	transition: all .1s;
		@@ -27,21 +27,34 @@
27	27	content: '';
28	28	block-size: 13px;
29	29	inline-size: 13px;
30	30	display: inline-block;
31		- background-color: $off-color;
	31	+ background-color: var(--cs-color-accent);
32	32	border-radius: 50%;
33	33	margin: 2px;
	34	+
	35	+ @media (prefers-reduced-motion: reduce) {
	36	+ transition-duration: 0.01s;
	37	+ }
34	38	}
	39	+
	40	+ &:focus {
	41	+ box-shadow: none;
	42	+ }
	43	+
	44	+ &:focus-visible {
	45	+ outline: 2px solid var(--cs-color-accent);
	46	+ }
35	47	}
36	48
37	49	.active-snippet .snippet-activation-switch,
38	50	input[type='checkbox'].switch:checked {
39		- background-color: #0073aa;
	51	+ background-color: var(--cs-color-accent);
40	52
	53	+ // Travel distance: pill width minus the knob, its margins and the borders.
41	54	&::before {
42		- background-color: white;
43		- transform: translateX(calc(100% * var(--cs-direction-multiplier)));
	55	+ background-color: #fff;
	56	+ transform: translateX(calc((100% + 4px) * var(--cs-direction-multiplier)));
44	57	}
45	58	}
46	59
47	60	.erroneous-snippet .snippet-activation-switch::before {
		@@ -49,9 +62,9 @@
49	62	transform: translateX(calc(50% * var(--cs-direction-multiplier)));
50	63	text-align: center;
51	64	font-weight: bold;
52	65	line-height: 1;
53		- color: #bbb;
	66	+ color: var(--cs-color-text);
54	67	}
55	68
56	69	a.snippet-condition-count {
57	70	border-radius: 50%;
		@@ -63,14 +76,14 @@
63	76	align-items: center;
64	77	box-sizing: border-box;
65	78
66	79	.inactive-snippet & {
67		- color: #ccc;
	80	+ color: var(--cs-color-border);
68	81	}
69	82
70	83	.active-snippet & {
71	84	font-weight: bold;
72		- color: theme.$accent;
	85	+ color: var(--cs-color-accent);
73	86	}
74	87	}
75	88
76	89	.snippet-execution-button {
		@@ -78,25 +91,39 @@
78	91	margin-block-start: 9px;
79	92	inline-size: 0;
80	93	block-size: 0;
81	94	border-block: 9px solid transparent;
82		- border-inline-start: 10px solid #ccc;
	95	+ border-inline-start: 10px solid var(--cs-color-border);
83	96
84	97	&::before {
85	98	content: '';
86	99	position: absolute;
87		- inset: -14px -8px -14px -21px;
	100	+ inset-block: -14px;
	101	+ inset-inline: -21px -8px;
88	102	border-radius: 50%;
89		- border: 1.8px solid #ccc;
	103	+ border: 1.8px solid var(--cs-color-border);
90	104	z-index: 2;
91	105	}
92	106
93	107	&:hover {
94		- border-inline-start-color: theme.$accent;
	108	+ border-inline-start-color: var(--cs-color-accent);
95	109	transition: border-inline-start-color 0.6s;
96	110
97	111	&::before {
98		- border-color: theme.$accent;
	112	+ border-color: var(--cs-color-accent);
99	113	transition: border-color 0.6s;
100	114	}
	115	+
	116	+ @media (prefers-reduced-motion: reduce) {
	117	+ transition-duration: 0.01s;
	118	+
	119	+ &::before {
	120	+ transition-duration: 0.01s;
	121	+ }
	122	+ }
101	123	}
	124	+}
	125	+
	126	+.code-snippets-card .snippet-execution-button {
	127	+ margin-block-start: 0;
	128	+ margin-inline-end: 9px;
102	129	}