1#c15t-banner {
2 --color-offgray-50: hsl(218, 12%, 95%);
3 --color-offgray-100: hsl(218, 12%, 88%);
4 --color-offgray-200: hsl(218, 12%, 80%);
5 --color-offgray-300: hsl(218, 12%, 75%);
6 --color-offgray-400: hsl(218, 12%, 64%);
7 --color-offgray-500: hsl(218, 12%, 56%);
8 --color-offgray-600: hsl(218, 12%, 48%);
9 --color-offgray-700: hsl(218, 12%, 40%);
10 --color-offgray-800: hsl(218, 12%, 34%);
11 --color-offgray-900: hsl(218, 12%, 24%);
12 --color-offgray-950: hsl(218, 12%, 15%);
13 --color-offgray-1000: hsl(218, 12%, 5%);
14
15 --color-blue-50: oklch(97% 0.014 254.604);
16 --color-blue-100: oklch(93.2% 0.032 255.585);
17 --color-blue-200: oklch(88.2% 0.059 254.128);
18 --color-blue-300: oklch(80.9% 0.105 251.813);
19 --color-blue-400: oklch(70.7% 0.165 254.624);
20 --color-blue-500: oklch(62.3% 0.214 259.815);
21 --color-blue-600: oklch(54.6% 0.245 262.881);
22 --color-blue-700: oklch(48.8% 0.243 264.376);
23 --color-blue-800: oklch(42.4% 0.199 265.638);
24 --color-blue-900: oklch(37.9% 0.146 265.522);
25 --color-blue-950: oklch(28.2% 0.091 267.935);
26
27 --color-accent-blue: hsla(218, 93%, 42%, 1);
28
29 position: fixed;
30 z-index: 9999;
31 bottom: 16px;
32 right: 16px;
33 border-radius: 4px;
34 max-width: 300px;
35 background: white;
36 border: 1px solid
37 color-mix(in oklab, var(--color-offgray-200) 50%, transparent);
38 box-shadow: 6px 6px 0
39 color-mix(in oklab, var(--color-accent-blue) 6%, transparent);
40}
41
42.dark #c15t-banner {
43 border-color: color-mix(in oklab, var(--color-offgray-600) 14%, transparent);
44 background: var(--color-offgray-1000);
45 box-shadow: 5px 5px 0
46 color-mix(in oklab, var(--color-accent-blue) 8%, transparent);
47}
48
49#c15t-banner > div:first-child {
50 padding: 12px;
51 display: flex;
52 flex-direction: column;
53}
54
55#c15t-banner a {
56 color: var(--links);
57 text-decoration: underline;
58 text-decoration-color: var(--link-line-decoration);
59}
60
61#c15t-banner a:hover {
62 text-decoration-color: var(--link-line-decoration-hover);
63}
64
65#c15t-description {
66 font-size: 12px;
67 margin: 0;
68 margin-top: 4px;
69}
70
71#c15t-configure-section {
72 display: flex;
73 flex-direction: column;
74 gap: 8px;
75 border-top: 1px solid var(--divider);
76 padding: 12px;
77}
78
79#c15t-configure-section > div {
80 display: flex;
81 align-items: center;
82 justify-content: space-between;
83}
84
85#c15t-configure-section label {
86 text-transform: uppercase;
87 font-size: 11px;
88}
89
90#c15t-footer {
91 padding: 12px;
92 display: flex;
93 justify-content: space-between;
94 border-top: 1px solid var(--divider);
95 background-color: color-mix(
96 in oklab,
97 var(--color-offgray-50) 50%,
98 transparent
99 );
100}
101
102.dark #c15t-footer {
103 background-color: color-mix(
104 in oklab,
105 var(--color-offgray-600) 4%,
106 transparent
107 );
108}
109
110.c15t-button {
111 display: inline-flex;
112 align-items: center;
113 justify-content: center;
114 max-height: 28px;
115 color: black;
116 padding: 4px 8px;
117 font-size: 14px;
118 border-radius: 4px;
119 background: transparent;
120 border: 1px solid transparent;
121 transition: 100ms;
122 transition-property: box-shadow, border-color, background-color;
123}
124
125.c15t-button:hover {
126 background: color-mix(in oklab, var(--color-offgray-100) 50%, transparent);
127}
128
129.dark .c15t-button {
130 color: var(--color-offgray-50);
131}
132
133.dark .c15t-button:hover {
134 background: color-mix(in oklab, var(--color-offgray-500) 10%, transparent);
135}
136
137.c15t-button.icon {
138 padding: 0;
139 width: 24px;
140 height: 24px;
141}
142
143.c15t-button.primary {
144 color: var(--color-blue-700);
145 background: color-mix(in oklab, var(--color-blue-50) 60%, transparent);
146 border-color: color-mix(in oklab, var(--color-blue-500) 20%, transparent);
147 box-shadow: color-mix(in oklab, var(--color-blue-400) 10%, transparent) 0 -2px
148 0 0 inset;
149}
150
151.c15t-button.primary:hover {
152 background: color-mix(in oklab, var(--color-blue-100) 50%, transparent);
153 box-shadow: none;
154}
155
156.dark .c15t-button.primary {
157 color: var(--color-blue-50);
158 background: color-mix(in oklab, var(--color-blue-500) 10%, transparent);
159 border-color: color-mix(in oklab, var(--color-blue-300) 10%, transparent);
160 box-shadow: color-mix(in oklab, var(--color-blue-300) 8%, transparent) 0 -2px
161 0 0 inset;
162}
163
164.dark .c15t-button.primary:hover {
165 background: color-mix(in oklab, var(--color-blue-500) 20%, transparent);
166 box-shadow: none;
167}
168
169.c15t-button.secondary {
170 background: color-mix(in oklab, var(--color-offgray-50) 60%, transparent);
171 border-color: color-mix(in oklab, var(--color-offgray-200) 50%, transparent);
172 box-shadow: color-mix(in oklab, var(--color-offgray-500) 10%, transparent)
173 0 -2px 0 0 inset;
174}
175
176.c15t-button.secondary:hover {
177 background: color-mix(in oklab, var(--color-offgray-100) 50%, transparent);
178 box-shadow: none;
179}
180
181.dark .c15t-button.secondary {
182 background: color-mix(in oklab, var(--color-offgray-300) 5%, transparent);
183 border-color: color-mix(in oklab, var(--color-offgray-400) 20%, transparent);
184 box-shadow: color-mix(in oklab, var(--color-offgray-300) 8%, transparent)
185 0 -2px 0 0 inset;
186}
187
188.dark .c15t-button.secondary:hover {
189 background: color-mix(in oklab, var(--color-offgray-200) 10%, transparent);
190 box-shadow: none;
191}
192
193.c15t-switch {
194 position: relative;
195 display: inline-block;
196 width: 32px;
197 height: 20px;
198 flex-shrink: 0;
199}
200
201.c15t-switch input {
202 opacity: 0;
203 width: 0;
204 height: 0;
205 position: absolute;
206}
207
208.c15t-slider {
209 position: absolute;
210 cursor: pointer;
211 inset: 0;
212 background-color: color-mix(
213 in oklab,
214 var(--color-offgray-100) 80%,
215 transparent
216 );
217 border-radius: 20px;
218 box-shadow: inset 0 0 0 1px color-mix(in oklab, #000 5%, transparent);
219 transition: background-color 0.2s;
220}
221
222.c15t-slider:hover {
223 background-color: var(--color-offgray-100);
224}
225
226.dark .c15t-slider {
227 background-color: color-mix(in oklab, #fff 5%, transparent);
228 box-shadow: inset 0 0 0 1px color-mix(in oklab, #fff 15%, transparent);
229}
230
231.dark .c15t-slider:hover {
232 background-color: color-mix(in oklab, #fff 10%, transparent);
233}
234
235.c15t-slider:before {
236 position: absolute;
237 content: "";
238 height: 14px;
239 width: 14px;
240 left: 3px;
241 bottom: 3px;
242 background-color: white;
243 border-radius: 50%;
244 box-shadow:
245 0 1px 3px 0 rgb(0 0 0 / 0.1),
246 0 1px 2px -1px rgb(0 0 0 / 0.1);
247 transition: transform 0.2s;
248}
249
250.c15t-switch input:checked + .c15t-slider {
251 background-color: var(--color-accent-blue);
252 box-shadow: inset 0 0 0 1px color-mix(in oklab, #000 5%, transparent);
253}
254
255.c15t-switch input:checked + .c15t-slider:hover {
256 background-color: var(--color-accent-blue);
257}
258
259.dark .c15t-switch input:checked + .c15t-slider {
260 background-color: var(--color-accent-blue);
261 box-shadow: inset 0 0 0 1px color-mix(in oklab, #fff 15%, transparent);
262}
263
264.c15t-switch input:checked + .c15t-slider:before {
265 transform: translateX(12px);
266}
267
268.c15t-switch input:disabled + .c15t-slider {
269 opacity: 0.5;
270 cursor: default;
271 pointer-events: none;
272}
273
274.c15t-switch input:disabled + .c15t-slider:hover {
275 background-color: color-mix(
276 in oklab,
277 var(--color-offgray-100) 80%,
278 transparent
279 );
280}
281
282#c15t-manage-consent-btn {
283 appearance: none;
284 background: none;
285 border: none;
286 padding: 0;
287 cursor: pointer;
288}
289
290#c15t-manage-consent-btn:hover {
291 text-decoration-color: var(--link-line-decoration-hover);
292}