tenant.openagents/omega

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}
293