docs/style.css.bak at main · ourresearch/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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
/* OpenAI-inspired greyscale theme for OpenAlex documentation */

/* Dark mode - primary theme */
:root[data-color-scheme="dark"] {
  --background-sidebar: #252525;
  --background-content: #252525;
  --text-primary: #ECECEC;
  --text-secondary: #A3A3A3;
  --border-color: #3A3A3A;
}

/* Light mode */
:root[data-color-scheme="light"] {
  --background-sidebar: #F5F5F5;
  --background-content: #FFFFFF;
  --text-primary: #171717;
  --text-secondary: #525252;
  --border-color: #E5E5E5;
}

/* Sidebar/Navigation styling */
#navbar,
#sidebar-content,
nav[aria-label="Main navigation"],
aside {
  background: #252525;
}

/* Header — solid background, kill Mintlify's absolute overlay layers */
.dark #navbar {
  background-color: #252525 !important;
}
.dark #navbar > .absolute {
  background-color: transparent !important;
}

/* Content area — override Mintlify's base background to match sidebar/navbar */
.dark #content-container {
  background-color: #252525 !important;
}


/* Override Mintlify's --background-dark (RGB triplet for bg-background-dark utility).
   docs.json sets this to 13 13 13 (#0D0D0D) — remap to 37 37 37 (#252525) so all
   panels, playground wrappers, and page chrome match the unified background. */
.dark {
  --background-dark: 37 37 37 !important;
}

/* Mintlify's --gray-800 (38 41 44) needs a bump for visible borders on #252525 */
.dark {
  --gray-800: 58 61 64 !important;
}

/* Content links - underlined by default, single underline only */
a.link {
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 2px !important;
  text-decoration-color: currentColor !important;
  border-bottom: none !important;
}

/* Reduce saturation on accent elements for greyscale feel */
[data-color-scheme="dark"] .text-primary,
[data-color-scheme="dark"] [class*="primary"] {
  filter: saturate(0.7);
}

/* Footer styling — blend into content area, bright icons */
footer {
  background: transparent !important;
  border-top: none !important;
}
.dark footer a,
.dark footer svg {
  color: #ECECEC !important;
  fill: #ECECEC !important;
  opacity: 0.8;
}
.dark footer a:hover,
.dark footer a:hover svg {
  opacity: 1;
}

/* Card styling - subtle borders */
[class*="card"],
[class*="Card"] {
  border: 1px solid var(--border-color, #3A3A3A);
  background: var(--background-content, #252525) !important;
}

/* API playground path parameter spans — override Mintlify's hardcoded green */
.text-\[\#2AB673\] {
  color: #2196F3 !important;
}
.bg-\[\#2AB673\]\/10 {
  background-color: rgb(33 150 243 / 0.1) !important;
}
.border-\[\#2AB673\]\/30 {
  border-color: rgb(33 150 243 / 0.3) !important;
}

/* API playground "Try it" button */
.tryit-button.bg-\[\#2AB673\] {
  background-color: #2196F3 !important;
}

/* Code blocks and their wrappers — unified background.
   Mintlify injects inline style="--shiki-dark-bg:#0B0C0E; background-color:#0B0C0E"
   on .code-block-background. Override the variable on the element itself. */
html.dark .code-block-background {
  --shiki-dark-bg: #252525 !important;
  background-color: #252525 !important;
}
.dark .bg-codeblock,
.dark .code-group,
.dark .codeblock-dark,
.dark pre,
.dark code {
  background: #252525 !important;
  background-color: #252525 !important;
}

/* Softer headings */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary, #ECECEC);
}

/* Muted secondary text */
p, li {
  color: var(--text-secondary, #A3A3A3);
}