zitadel

1
@tailwind base;
2
@tailwind components;
3
@tailwind utilities;
4

5
@import "../../static/icons/line-awesome/css/line-awesome.min.css";
6

7
@font-face {
8
  font-family: Lato;
9
  font-style: normal;
10
  font-weight: 400;
11
  src: url(../../static/fonts/lato/Lato-Regular.ttf) format("truetype");
12
}
13
@font-face {
14
  font-family: Lato;
15
  font-style: normal;
16
  font-weight: 900;
17
  src: url(../../static/fonts/lato/Lato-Black.ttf) format("truetype");
18
}
19
@font-face {
20
  font-family: Lato;
21
  font-style: italic;
22
  font-weight: 900;
23
  src: url(../../static/fonts/lato/Lato-BlackItalic.ttf) format("truetype");
24
}
25
@font-face {
26
  font-family: Lato;
27
  font-style: normal;
28
  font-weight: 700;
29
  src: url(../../static/fonts/lato/Lato-Bold.ttf) format("truetype");
30
}
31
@font-face {
32
  font-family: Lato;
33
  font-style: italic;
34
  font-weight: 700;
35
  src: url(../../static/fonts/lato/Lato-BoldItalic.ttf) format("truetype");
36
}
37
@font-face {
38
  font-family: Lato;
39
  font-style: italic;
40
  font-weight: 400;
41
  src: url(../../static/fonts/lato/Lato-Italic.ttf) format("truetype");
42
}
43
@font-face {
44
  font-family: Lato;
45
  font-style: normal;
46
  font-weight: 300;
47
  src: url(../../static/fonts/lato/Lato-Light.ttf) format("truetype");
48
}
49
@font-face {
50
  font-family: Lato;
51
  font-style: italic;
52
  font-weight: 300;
53
  src: url(../../static/fonts/lato/Lato-LightItalic.ttf) format("truetype");
54
}
55
@font-face {
56
  font-family: Lato;
57
  font-style: normal;
58
  font-weight: 100;
59
  src: url(../../static/fonts/lato/Lato-Thin.ttf) format("truetype");
60
}
61
@font-face {
62
  font-family: Lato;
63
  font-style: italic;
64
  font-weight: 100;
65
  src: url(../../static/fonts/lato/Lato-ThinItalic.ttf) format("truetype");
66
}
67

68
/* You can override the default Infima variables here. */
69

70
:root {
71
  --ifm-background-color: #fafafa;
72
  --ifm-navbar-background-color: #ffffff;
73
  --ifm-footer-background-color: #f4f4f4;
74
  --ifm-menu-color-background-active: #00000010;
75
  --ifm-menu-color-active: #000000;
76
  --ifm-menu-color-background-hover: #f7fafc;
77
  --ifm-font-color-base: #6b7280;
78
  --ifm-link-color: #5469d4;
79
  --ifm-menu-color: #697386;
80
  --ifm-footer-link-color: #000000;
81
  --ifm-color-primary: #5469d4;
82
  --ifm-color-primary-dark: #4d61cf;
83
  --ifm-color-primary-darker: #4356c9;
84
  --ifm-color-primary-darkest: #3a4cc3; /* 293bb9 */
85
  --ifm-color-primary-light: #6e80da;
86
  --ifm-color-primary-lighter: #8796e1;
87
  --ifm-color-primary-lightest: #aab4ea;
88
  --ifm-code-font-size: 95%;
89
  --ifm-font-family-base: "Lato", sans-serif;
90
  --ifm-hero-background-color: #7e21ce;
91
  --ifm-hero-text-color: var(--ifm-font-color-base-inverse);
92
  --get-started: #ff2069;
93
  --get-started-bg-hover: var(--ifm-hero-background-color);
94
  --ifm-color-info: #4cb3d4;
95
  --ifm-navbar-height: 56px;
96
  --ifm-navbar-padding-vertical: 0;
97
  --ifm-footer-color: #00000080;
98
  --ifm-footer-padding-vertical: 50px;
99
  --ifm-heading-font-weight: 500;
100
  --ifm-heading-color: #000000;
101
  --ifm-font-color-base: #000000dd; /*#6b7280;*/
102
  --font-color-strong: #000000;
103
  --ifm-navbar-link-hover-color: #000000;
104
  --ifm-heading-color: #000000;
105
  --ifm-h4-font-size: 1.2rem;
106
  --ifm-color-success-contrast-foreground: #0e6245;
107
  --ifm-color-success-contrast-background: #cbf4c9;
108
  --ifm-color-success-dark: #0e6245;
109
  --ifm-color-info-dark: #6c8eef;
110
  --ifm-color-info-contrast-background: #f0f3fa;
111
  --ifm-color-secondary-contrast-background: #f0f3fa;
112
  --ifm-alert-background-color-highlight: #620e0e;
113
  --ifm-color-warning-dark: #ffc1c1;
114
  --ifm-color-warning-contrast-background: #ffc1c1;
115
  --ifm-color-warning-contrast-foreground: #620e0e;
116
  --card-background: #fafafa;
117
  --list-background: #ffffff;
118
  --ifm-spacing-horizontal: 1.5rem;
119
  --apiauthbackground: linear-gradient(40deg, #a9d9ca 30%, #b4d5cb);
120
  --apimgmtbackground: linear-gradient(40deg, #c6d7f3 30%, #c7c6e3);
121
  --apiadminbackground: linear-gradient(40deg, #c192c790, #c192c790);
122
  --apisystembackground: linear-gradient(40deg, #c7a6928e, #c7a6928e);
123
  --apiassetbackground: linear-gradient(40deg, #e4eaf1, #eef2f9);
124
  --overlaycolor: #6c90b420;
125
  --ifm-hero-text-color: #ffffff;
126
  --gigibannerbackground: white;
127
  --gigibannerforeground: black;
128
  --footer-border: rgba(0, 0, 0, 0.12);
129
  --card-border: rgba(135, 149, 161, 0.2);
130
  --card-border-hover: #6c8eef;
131
  --ifm-pagination-nav-color-hover: #000000;
132
  --input-border: #1a191954;
133
  --input-hover-border: #000000;
134
  --input-background: #00000004;
135
}
136

137
.tile-wrapper {
138
  margin: 0 -8px;
139
  display: flex;
140
  flex-direction: row;
141
  flex-wrap: wrap;
142
}
143

144
pre code {
145
  font-size: 14px !important;
146
}
147

148
.get-started {
149
  border-radius: 50vw;
150
}
151

152
.apicard-right {
153
  overflow: hidden;
154
  text-overflow: ellipsis;
155
}
156

157
.padding-top--md {
158
  padding-top: 3rem !important;
159
}
160

161
.menu {
162
  padding: 3rem 0.5rem !important;
163
}
164

165
.menu__link--active {
166
  font-weight: 600;
167
}
168

169
.react-toggle-track {
170
  background-color: #ebedf0 !important;
171
}
172

173
.footer__title {
174
  font-size: 12px;
175
  text-transform: uppercase;
176
  color: #6b7280;
177
}
178

179
.navbar:not(.navbar-sidebar--show) {
180
  background-color: hsla(0, 0%, 100%, 0.8);
181
  backdrop-filter: saturate(110%) blur(5px);
182
}
183

184
:root[data-theme="dark"] .navbar:not(.navbar-sidebar--show) {
185
  background-color: rgba(var(--ifm-background-color, 0.2));
186
  backdrop-filter: saturate(110%) blur(5px);
187
}
188

189
.navbar .navbar__logo {
190
  height: 100%;
191
}
192

193
.navbar .navbar__items .navbar__item {
194
  font-size: 14px;
195
  line-height: 1.25rem;
196
  font-weight: 550;
197
}
198

199
.menu__link {
200
  font-size: 14px;
201
}
202

203
.menu__link--sublist:after {
204
  opacity: 0.3;
205
}
206

207
:root[data-theme="dark"] .react-toggle-track {
208
  background-color: #454a66 !important;
209
}
210

211
::-webkit-scrollbar-track {
212
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
213
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
214
  background-color: #ffffff;
215
  border-radius: 8px;
216
}
217

218
::-webkit-scrollbar {
219
  width: 6px;
220
  height: 6px;
221
  background-color: #ffffff;
222
}
223

224
::-webkit-scrollbar-thumb {
225
  background-color: #737c8850;
226
  border-radius: 8px;
227
  cursor: pointer;
228
}
229

230
:root[data-theme="dark"] ::-webkit-scrollbar-track {
231
  background-color: transparent;
232
}
233

234
:root[data-theme="dark"] ::-webkit-scrollbar {
235
  background-color: transparent;
236
}
237

238
:root[data-theme="dark"] ::-webkit-scrollbar-thumb {
239
  background-color: #737c8850;
240
}
241

242
h1 {
243
  font-size: 3rem;
244
}
245

246
h2 {
247
  font-size: 2.5rem;
248
  margin-top: 2.5rem;
249
}
250

251
h3 {
252
  font-size: 2rem;
253
  margin-top: 2.5rem;
254
}
255

256
h4 {
257
  font-size: 1.5rem;
258
  margin-top: 2.5rem;
259
}
260

261
.navbar__brand {
262
  height: 40px;
263
}
264

265
:root[data-theme="dark"] {
266
  --ifm-navbar-background-color: #1b2036; /*#141c2d;*/
267
  --ifm-footer-background-color: #00000020; /* #121430; */
268
  --ifm-menu-color-background-active: #ffffff10;
269
  --ifm-menu-color-active: #ffffff;
270
  --ifm-menu-color-background-hover: #3c405850;
271
  --ifm-font-color-base: #dddddd;
272
  --ifm-menu-color: #c1c9d2;
273
  --ifm-link-color: #ff2069;
274
  --docsearch-searchbox-background: #454a66;
275
  --docsearch-searchbox-focus-background: #454a66;
276
  --docsearch-searchbox-shadow: inset 0 0 0 1px var(--docsearch-primary-color);
277
  --docsearch-hit-background: #454a66;
278
  --docsearch-highlight-color: #5469d4;
279
  --ifm-navbar-shadow: inset 0 -1px rgba(255, 255, 255, 0.12);
280
  --ifm-footer-link-color: #ffffff;
281
  --ifm-color-emphasis-300: #ffffff20;
282
  --ifm-color-primary: #ff2069;
283
  --ifm-color-primary-dark: #ff1c61;
284
  --ifm-color-primary-darker: #ff1856;
285
  --ifm-color-primary-darkest: #ff134c;
286
  --ifm-color-primary-light: #ff4180;
287
  --ifm-color-primary-lighter: #ff6396;
288
  --ifm-color-primary-lightest: #ff90b4;
289
  --ifm-background-color: #141735; /* #141c2d; */
290
  --ifm-hero-background-color: #0f1022;
291
  --ifm-hero-text-color: #ffffff;
292
  --get-started-bg: var(--ifm-font-color-base);
293
  --get-started: #ff1f69;
294
  --ifm-footer-color: #ffffff50;
295
  --ifm-heading-color: #ffffff;
296
  --ifm-font-color-base: #ffffffdd; /* #c1c9d2; */
297
  --font-color-strong: #ffffff;
298
  --ifm-navbar-link-hover-color: #ffffff;
299
  --ifm-color-success-contrast-foreground: #cbf4c9;
300
  --ifm-color-success-contrast-background: #4f566b;
301
  --ifm-color-success-dark: #cbf4c9;
302
  --ifm-color-info-dark: #6c8eef;
303
  --ifm-color-info-contrast-background: #3c4257;
304
  --ifm-table-stripe-background: #1a253c; /* #1a1d46; */
305
  --ifm-color-secondary-contrast-background: #3c4257;
306
  --ifm-code-background: #3c4257;
307
  --ifm-alert-background-color: #92400e50;
308
  --ifm-alert-background-color-highlight: #fbbf24;
309
  --ifm-color-warning-contrast-background: #92400e50;
310
  --ifm-color-warning-contrast-foreground: #fbbf24;
311
  --ifm-color-warning-dark: #4f566b;
312
  --ifm-toc-border-color: rgba(135, 149, 161, 0.2);
313
  --ifm-table-border-color: rgba(135, 149, 161, 0.2);
314
  --ifm-card-background-color: #1a253c;
315
  --card-background: #1a253c; /* #1a1d46; */
316
  --list-background: #1a253c; /* #1a1d46; */
317
  --apiauthbackground: linear-gradient(40deg, #506e6e90 30%, #506e6e90);
318
  --apimgmtbackground: linear-gradient(40deg, #595d8090 30%, #595d8090);
319
  --apiadminbackground: linear-gradient(40deg, #6a506e90, #6a506e90);
320
  --apisystembackground: linear-gradient(40deg, #6e695090, #6e695090);
321
  --apiassetbackground: linear-gradient(40deg, #3c4257, #3c4257);
322
  --overlaycolor: #ffffff15;
323
  --gigibannerbackground: #7e21ce;
324
  --gigibannerforeground: white;
325
  --footer-border: rgba(255, 255, 255, 0.12);
326
  --card-border: rgba(135, 149, 161, 0.2);
327
  --card-border-hover: #ffffff;
328
  --ifm-pagination-nav-color-hover: #ffffff;
329
  --input-border: #f9f7f775;
330
  --input-hover-border: #ffffff;
331
  --input-background: #00000040;
332
}
333

334
.get-started:hover {
335
  color: #ffffff !important;
336
}
337

338
.menu li li a {
339
  font-size: 14px;
340
  /* padding: 2px 14px; */
341
}
342

343
i {
344
  font-size: 1.5rem;
345
  color: var(--ifm-heading-color);
346
}
347

348
main .container img {
349
  border-radius: 0.5rem;
350
  margin: 1.5rem 0;
351
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
352
}
353

354
.custom-rounded {
355
  display: flex;
356
  align-items: center;
357
  justify-content: center;
358
  padding: 0.5rem;
359
  margin-right: 1rem;
360
  border-radius: 50%;
361
  width: 40px;
362
  height: 40px;
363
}
364

365
.custom-rounded svg {
366
  fill: white;
367
  height: 1.5rem;
368
  width: 1.5rem;
369
}
370

371
.custom-rounded i {
372
  color: white;
373
}
374

375
.custom-rounded-start {
376
  background: linear-gradient(40deg, #059669 30%, #047857);
377
}
378

379
.custom-rounded-password {
380
  background: linear-gradient(40deg, #f59e0b 30%, #b45309);
381
}
382

383
.custom-rounded-login,
384
.custom-rounded-register {
385
  background: linear-gradient(40deg, #059669 30%, #047857);
386
}
387

388
.custom-rounded-privatelabel,
389
.custom-rounded-phone,
390
.custom-rounded-email,
391
.custom-rounded-storage,
392
.custom-rounded-service {
393
  background: linear-gradient(40deg, #3b82f6 30%, #4f46e5);
394
}
395

396
.custom-rounded-split {
397
  background: linear-gradient(40deg, #3b82f6, #4f46e5);
398
}
399

400
.custom-rounded-texts,
401
.custom-rounded-help,
402
.custom-rounded-architecture {
403
  background: linear-gradient(40deg, #dc2626 30%, #db2777);
404
}
405

406
.custom-rounded-system,
407
.custom-rounded-apis,
408
.custom-rounded-policy,
409
.custom-rounded-instance {
410
  background: linear-gradient(40deg, #1f2937, #111827);
411
}
412

413
.docusaurus-highlight-code-line {
414
  background-color: rgb(72, 77, 91);
415
  display: block;
416
  margin: 0 calc(-1 * var(--ifm-pre-padding));
417
  padding: 0 var(--ifm-pre-padding);
418
}
419

420
.hero__title {
421
  color: white;
422
}
423

424
.get-started {
425
  border: 2px solid var(--get-started);
426
  background-color: var(--get-started);
427
  color: var(--ifm-hero-text-color);
428
}
429

430
.get-started:hover {
431
  background-color: var(--get-started-bg-hover);
432
  color: var(--ifm-hero-text-color);
433
}
434

435
.docs-link {
436
  margin-bottom: 2rem;
437
}
438

439
.docs-link a {
440
  text-decoration: none;
441
  color: inherit;
442
}
443

444
.docs-link a:hover {
445
  color: var(--ifm-color-primary);
446
}
447

448
.docs-link img {
449
  margin: 40px;
450
}
451

452
.b2borg,
453
.b2bproject,
454
.b2bapp,
455
.b2buser {
456
  border-radius: 1rem;
457
  background: var(--overlaycolor);
458
  padding: 1rem;
459
}
460

461
.b2buser {
462
  margin-top: 1rem;
463
}
464

465
.b2borg span,
466
.b2bproject span,
467
.b2bapp span,
468
.b2buser span {
469
  margin-left: 1rem;
470
  margin-bottom: 1rem;
471
  display: block;
472
}
473

474
.flexrowbetween {
475
  display: flex;
476
  justify-content: space-around;
477
  margin: 2rem 0;
478
}
479

480
.arrowright {
481
  height: 2rem;
482
  width: auto;
483
  align-self: center;
484
  min-width: 2rem;
485
}
486

487
.b2bprojectrole {
488
  margin: 1rem 0 0 1rem !important;
489
}
490

491
.footer__link-item {
492
  font-size: 14px;
493
}
494

495
.footer__link-item svg {
496
  margin-left: 0.5rem;
497
}
498

499
.footer {
500
  border-top: 1px solid var(--footer-border);
501
}
502

503
table th {
504
  padding: 0.5rem 1rem;
505
  text-transform: uppercase;
506
  font-size: 12px;
507
  letter-spacing: 0.05em;
508
  font-weight: 700;
509
}
510

511
a {
512
  transition: all 0.2s ease;
513
}
514

515
.alert {
516
  font-size: 14px;
517
  border: none;
518
  font-weight: 600;
519
}
520

521
p strong {
522
  color: var(--font-color-strong);
523
}
524

525
/* Sidebar Method labels */
526
.api-method > .menu__link {
527
  align-items: center;
528
  justify-content: start;
529
}
530

531
.api-method > .menu__link::before {
532
  width: 50px;
533
  height: 20px;
534
  font-size: 12px;
535
  line-height: 20px;
536
  text-transform: uppercase;
537
  font-weight: 600;
538
  border-radius: 0.25rem;
539
  border: 1px solid;
540
  border-inline-start-width: 5px;
541
  margin-right: var(--ifm-spacing-horizontal);
542
  text-align: center;
543
  flex-shrink: 0;
544
}
545

546
.get > .menu__link::before {
547
  content: "get";
548
  background-color: var(--ifm-color-info-contrast-background);
549
  color: var(--ifm-color-info-contrast-foreground);
550
  border-color: var(--ifm-color-info-dark);
551
}
552

553
.post > .menu__link::before {
554
  content: "post";
555
  background-color: var(--ifm-color-success-contrast-background);
556
  color: var(--ifm-color-success-contrast-foreground);
557
  border-color: var(--ifm-color-success-dark);
558
}
559

560
.delete > .menu__link::before {
561
  content: "del";
562
  background-color: var(--ifm-color-danger-contrast-background);
563
  color: var(--ifm-color-danger-contrast-foreground);
564
  border-color: var(--ifm-color-danger-dark);
565
}
566

567
.put > .menu__link::before {
568
  content: "put";
569
  background-color: var(--ifm-color-warning-contrast-background);
570
  color: var(--ifm-color-warning-contrast-foreground);
571
  border-color: var(--ifm-color-warning-dark);
572
}
573

574
.patch > .menu__link::before {
575
  content: "patch";
576
  background-color: var(--ifm-color-success-contrast-background);
577
  color: var(--ifm-color-success-contrast-foreground);
578
  border-color: var(--ifm-color-success-dark);
579
}
580

581
.head > .menu__link::before {
582
  content: "head";
583
  background-color: var(--ifm-color-secondary-contrast-background);
584
  color: var(--ifm-color-secondary-contrast-foreground);
585
  border-color: var(--ifm-color-secondary-dark);
586
}
587

588
.hideondark {
589
  display: block !important;
590
}
591

592
:root[data-theme="dark"] .hideondark {
593
  display: none !important;
594
}
595

596
.hideonlight {
597
  display: none !important;
598
}
599

600
:root[data-theme="dark"] .hideonlight {
601
  display: block !important;
602
}
603

604

605
.player-wrapper {
606
  position: relative;
607
  padding-top: 56.25%; /* Player ratio: 100 / (1280 / 720) */
608
  margin-bottom: 2rem;
609
}
610

611
.react-player {
612
  position: absolute;
613
  top: 0;
614
  left: 0;
615
}