this repo has no description
fix: unify API docs CSS with main site
Include screen.css on the docs page and remove ~90 lines
of duplicated theme variables, body, and footer styles.
Add font-loading detection for Material Symbols icons.
+15
-92
+15
-92
internal/templates/views/docs.html
+15
-92
internal/templates/views/docs.html
···
5
5
<meta name="viewport" content="width=device-width, initial-scale=1" />
6
6
<title>Tumble API Docs</title>
7
7
<link rel="stylesheet" href="https://unpkg.com/swagger-ui-dist@5.11.0/swagger-ui.css" />
8
+
<link rel="stylesheet" href="/css/screen.css" media="screen" />
8
9
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
9
10
<script>
10
11
(function () {
···
13
14
if (savedTheme === "dark" || (!savedTheme && prefersDark)) {
14
15
document.documentElement.setAttribute("data-theme", "dark");
15
16
}
17
+
18
+
// Font loading detection
19
+
if (document.fonts && document.fonts.ready) {
20
+
document.fonts.ready.then(function() {
21
+
document.documentElement.classList.add("fonts-loaded");
22
+
});
23
+
} else {
24
+
// Fallback: show icons after short delay
25
+
setTimeout(function() {
26
+
document.documentElement.classList.add("fonts-loaded");
27
+
}, 100);
28
+
}
16
29
})();
17
30
</script>
18
31
<style>
19
-
:root {
20
-
--bg-color: #ffffff;
21
-
--text-color: #333333;
22
-
23
-
/* Gray scale for header */
24
-
--gray-0: #ffffff;
25
-
--gray-1: #f6f8fa;
26
-
--gray-2: #eaeef2;
27
-
--gray-3: #d0d7de;
28
-
--gray-4: #8c959f;
29
-
--gray-5: #57606a;
30
-
--gray-6: #24292f;
31
-
32
-
/* Header variables */
33
-
--bg-canvas: var(--gray-0);
34
-
--bg-surface: var(--gray-1);
35
-
--border-default: var(--gray-3);
36
-
--text-primary: var(--gray-6);
37
-
--accent-primary: #10b981;
38
-
--card-bg: var(--gray-0);
39
-
40
-
/* Footer Variables */
41
-
--footer-bg: #f5f5f5;
42
-
--footer-border: #eee;
43
-
--footer-text: #666;
44
-
--footer-link: #444;
45
-
--icon-fill: #000000;
46
-
}
47
-
[data-theme="dark"] {
48
-
--bg-color: #0d1117;
49
-
--text-color: #c9d1d9;
50
-
51
-
/* Gray scale for header */
52
-
--gray-0: #0d1117;
53
-
--gray-1: #161b22;
54
-
--gray-2: #21262d;
55
-
--gray-3: #30363d;
56
-
--gray-4: #484f58;
57
-
--gray-5: #8b949e;
58
-
--gray-6: #c9d1d9;
59
-
60
-
/* Header variables */
61
-
--bg-canvas: var(--gray-0);
62
-
--bg-surface: var(--gray-1);
63
-
--border-default: var(--gray-3);
64
-
--text-primary: var(--gray-6);
65
-
--accent-primary: #34d399;
66
-
--card-bg: var(--gray-1);
67
-
68
-
/* Footer Variables */
69
-
--footer-bg: #1a1a1a;
70
-
--footer-border: #333;
71
-
--footer-text: #888;
72
-
--footer-link: #aaa;
73
-
--icon-fill: #ffffff;
74
-
}
75
-
body { margin: 0; padding: 0 0 60px 0; display: flex; flex-direction: column; min-height: 100vh; font-family: sans-serif; background-color: var(--bg-color); color: var(--text-color); }
76
-
#swagger-ui { flex: 1; }
77
-
78
-
/* Footer Styles */
79
-
80
-
/* Footer Styles */
81
-
#footer {
82
-
padding: 10px;
83
-
text-align: center;
84
-
background: var(--footer-bg);
85
-
border-top: 1px solid var(--footer-border);
86
-
font-size: 12px;
87
-
color: var(--footer-text);
88
-
font-family: sans-serif;
89
-
position: fixed;
90
-
bottom: 0;
91
-
left: 0;
92
-
width: 100%;
93
-
z-index: 100;
94
-
}
95
-
#footer a {
96
-
color: var(--footer-link);
97
-
text-decoration: none;
98
-
}
99
-
#footer a:hover {
100
-
text-decoration: underline;
101
-
}
102
-
#footer svg {
103
-
fill: var(--icon-fill);
104
-
}
105
-
106
-
107
-
108
-
109
-
/* Dark Mode for Swagger UI */
32
+
#swagger-ui { flex: 1; padding-bottom: 60px; }
110
33
[data-theme="dark"] #swagger-ui {
111
-
filter: invert(88%) hue-rotate(180deg);
34
+
filter: invert(88%) hue-rotate(180deg);
112
35
}
113
36
</style>
114
37
</head>