this repo has no description
fix: improve header and footer styling consistency
- Add missing CSS variables to docs.html so header navigation is
visible in dark mode
- Unify footer styling across all pages using simpler muted design
(gray background, subtle link colors, no box-shadow)
+67
-41
+15
-24
internal/assets/css/screen.css
+15
-24
internal/assets/css/screen.css
···
100
100
--slack-title: var(--accent-primary);
101
101
--slack-desc: var(--text-primary);
102
102
--slack-img-border: var(--border-default);
103
-
--footer-bg: var(--gray-1);
104
-
--footer-border: var(--gray-2);
105
-
--footer-text: var(--text-secondary);
106
-
--footer-link: var(--text-primary);
103
+
--footer-bg: #f5f5f5;
104
+
--footer-border: #eee;
105
+
--footer-text: #666;
106
+
--footer-link: #444;
107
107
--icon-fill: var(--text-primary);
108
108
}
109
109
···
165
165
--slack-title: var(--accent-primary);
166
166
--slack-desc: var(--text-primary);
167
167
--slack-img-border: var(--border-default);
168
-
--footer-bg: var(--gray-1);
169
-
--footer-border: var(--gray-2);
170
-
--footer-text: var(--text-secondary);
171
-
--footer-link: var(--text-primary);
168
+
--footer-bg: #1a1a1a;
169
+
--footer-border: #333;
170
+
--footer-text: #888;
171
+
--footer-link: #aaa;
172
172
--icon-fill: var(--gray-7);
173
173
}
174
174
···
676
676
height: 100%;
677
677
}
678
678
#footer {
679
-
padding: var(--space-4);
679
+
padding: 10px;
680
680
text-align: center;
681
-
background: var(--card-bg);
682
-
border-top: 2px solid var(--border-default);
683
-
font-size: var(--font-size-sm);
684
-
color: var(--text-secondary);
685
-
font-family: var(--font-sans);
681
+
background: var(--footer-bg);
682
+
border-top: 1px solid var(--footer-border);
683
+
font-size: 12px;
684
+
color: var(--footer-text);
685
+
font-family: sans-serif;
686
686
position: fixed;
687
687
bottom: 0;
688
688
left: 0;
689
689
width: 100%;
690
690
z-index: 100;
691
-
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
692
691
}
693
692
694
693
#footer a {
695
-
color: var(--accent-primary);
694
+
color: var(--footer-link);
696
695
text-decoration: none;
697
-
font-weight: var(--font-weight-medium);
698
-
transition: color 0.15s ease;
699
696
}
700
697
701
698
#footer a:hover {
702
-
color: var(--accent-hover);
703
699
text-decoration: underline;
704
700
}
705
701
706
702
#footer svg {
707
703
fill: var(--icon-fill);
708
-
transition: fill 0.15s ease;
709
-
}
710
-
711
-
#footer a:hover svg {
712
-
fill: var(--accent-primary);
713
704
}
714
705
715
706
#navigation {
+52
-17
internal/templates/views/docs.html
+52
-17
internal/templates/views/docs.html
···
19
19
:root {
20
20
--bg-color: #ffffff;
21
21
--text-color: #333333;
22
-
/* Footer Variables from screen.css */
23
-
--footer-bg: #f5f5f5;
24
-
--footer-border: #eee;
25
-
--footer-text: #666;
26
-
--footer-link: #444;
27
-
--icon-fill: #000000;
28
-
}
29
-
[data-theme="dark"] {
30
-
--bg-color: #0d1117;
31
-
--text-color: #c9d1d9;
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;
32
59
33
-
/* Footer Variables from screen.css */
34
-
--footer-bg: #1a1a1a;
35
-
--footer-border: #333;
36
-
--footer-text: #888;
37
-
--footer-link: #aaa;
38
-
--icon-fill: #ffffff;
39
-
}
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
+
}
40
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); }
41
76
#swagger-ui { flex: 1; }
42
77