mintlify-docs/style.css at main · SymbioticSec/mintlify-docs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;1,400&family=Instrument+Sans:wdth,wght@85,400..700&display=swap');

/* Peix-Symbio custom font for the homepage title */
@font-face {
  font-family: "Peix-Symbio";
  src: url("/fonts/Peix-Symbio.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Instrument Sans SemiCondensed for the homepage title only */
.homepage-title {
  font-family: 'Instrument Sans', sans-serif !important;
  font-stretch: 85% !important;
}

/* IBM Plex Mono as the monospace font */
code, kbd, samp, pre,
[class*="language-"],
[class*="code"] {
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
}
/* Custom tab icons: override Mintlify's inline mask-image with our SVGs.
   !important is required to beat the inline style attribute. */
a.nav-tabs-item[href="/code/get_started"] svg {
  -webkit-mask-image: url("/images/icons/symbiotic-code.svg") !important;
  mask-image: url("/images/icons/symbiotic-code.svg") !important;
  mask-size: 100% !important;
  -webkit-mask-size: 100% !important;
}

a.nav-tabs-item[href^="/flow/devs"] svg {
  -webkit-mask-image: url("/images/icons/symbiotic-flow.svg") !important;
  mask-image: url("/images/icons/symbiotic-flow.svg") !important;
  mask-size: 100% !important;
  -webkit-mask-size: 100% !important;
}

a.nav-tabs-item[href^="/flow/admins"] svg {
  -webkit-mask-image: url("/images/icons/privacy.svg") !important;
  mask-image: url("/images/icons/privacy.svg") !important;
  mask-size: 100% !important;
  -webkit-mask-size: 100% !important;
}

/* Card product icons: invert to white in dark mode.
   Uses data attribute to avoid Mintlify's class prefixing system. */
html.dark [data-theme-icon] {
  filter: invert(1);
}

/* Tab states: resting / hover / active */

/* Resting: 80% opacity */
a.nav-tabs-item {
  opacity: 0.8 !important;
  transition: opacity 0.15s ease !important;
}

/* Hover on inactive tab: bump to 100% */
a.nav-tabs-item:not([data-active]):hover {
  opacity: 1 !important;
}

/* Active tab: 100% opacity, pink text */
a.nav-tabs-item[data-active] {
  opacity: 1 !important;
  color: #C45D97 !important;
  text-shadow: none !important;
}

/* Active tab icon: tint to pink via CSS color (works with mask-image) */
a.nav-tabs-item[data-active] svg {
  background-color: #C45D97 !important;
}

/* Active tab on hover: no change (already full opacity, already pink) */
a.nav-tabs-item[data-active]:hover {
  opacity: 1 !important;
  color: #C45D97 !important;
}

/* Active tab pill/underline: let Mintlify render it naturally */

/* Remove active tab highlight on the homepage.
   The homepage has no active tab concept so suppress pink bleed. */
html[data-page-mode="custom"] a.nav-tabs-item[data-active] {
  color: inherit !important;
}

html[data-page-mode="custom"] a.nav-tabs-item[data-active] svg {
  background-color: currentColor !important;
}