custom.css
... ...
@@ -1,163 +1,195 @@
1
-@import "pygmentize-vim.css";
2
-
3
-body, html,
4
-.markdown-body h1,
5
-.markdown-body h2,
6
-.markdown-body h3,
7
-.markdown-body h4,
8
-.markdown-body h5,
9
-.markdown-body h6,
10
-.history h1 strong,
11
-.edit h1 strong,
12
-.results h1 strong,
13
-.compare h1 strong,
14
-.highlight,
15
-#gollum-editor textarea,
16
-#wiki-history table tr td.author a {
17
- color: white;
18
- background-color: black;
19
-}
20
-
21
-.markdown-body pre {
22
- background-color: #202020;
23
-}
24
-
25
-.minibutton a,
26
-#search-submit,
27
-#gollum-editor #gollum-editor-function-bar a.function-button,
28
-#gollum-editor input#gollum-editor-submit,
29
-#gollum-editor #gollum-editor-preview {
30
- background-color: #4b4b4b;
31
- border-color: #9e9e9e;
32
- color: #fbfbfb;
33
-
34
- text-shadow: 0 1px 0 black;
35
-
36
- filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#707070', endColorstr='#575757');
37
- background: -webkit-gradient(linear, left top, left bottom, from(#707070, to(#575757)));
38
- background: -moz-linear-gradient(top, #707070, #575757);
39
-}
40
-
41
-#gollum-editor #gollum-editor-function-bar #gollum-editor-format-selector select {
42
- background-color: #4b4b4b;
43
- border-color: #9e9e9e;
44
- color: #fbfbfb;
45
-}
46
-
47
-#head #searchbar #searchbar-fauxtext input#search-query,
48
-#gollum-editor .singleline input,
49
-#head #searchbar #searchbar-fauxtext {
50
- background: black;
51
- border-color: #9e9e9e;
52
- color: white;
53
-}
54
-
55
-#head #searchbar #searchbar-fauxtext input#search-query.ph,
56
-#gollum-editor .singleline input.ph,
57
-#wiki-history table tr td.commit-name span.time-elapsed,
58
-#footer p#last-edit,
59
-#gollum-editor #gollum-editor-function-bar #gollum-editor-format-selector label,
60
-.history h1 {
61
- color: #d7d7d7;
62
-}
63
-
64
-#head #searchbar #searchbar-fauxtext #search-submit span {
65
- background-position: -431px -28px;
66
-}
67
-
68
-#head #searchbar #searchbar-fauxtext #search-submit:hover span {
69
- background-position: -431px -3px;
70
- padding: 0;
71
-}
72
-
73
-.markdown-body code,
74
-.markdown-body tt {
75
- border: 1px solid #909090;
76
- background-color: #202020;
77
-}
78
-
79
-#wiki-history table tr {
80
- /*background-color: #ebf2f6;*/
81
- /*background-color: #725e4f;*/
82
- background-color: #5f6362;
83
-}
84
-
85
-#wiki-history table tr:nth-child(2n),
86
-#wiki-history table tr.alt-row {
87
- /*background-color: #f3f7fa;*/
88
- /*background-color: #5b4b3b;*/
89
- background-color: #4b4c4d;
90
-}
91
-
92
-#wiki-history table tr.selected {
93
- background-color: #000075 !important;
94
-}
95
-
96
-a:link,
97
-a:hover,
98
-a:visited {
99
- color: #68caff;
100
-}
101
-
102
-.highlight .err,
103
-.highlight .gd,
104
-.highlight .gd .x,
105
-.highlight .gi,
106
-.highlight .gi .x,
107
-.highlight .gc {
108
- background-color: black;
109
-}
110
-
111
-.compare .data td.line_numbers {
112
- background: #4b4b4b;
113
- border-color: #d7d7d7;
114
- color: #d7d7d7;
115
-}
116
-
117
-.compare .data {
118
- border-color: #909090;
119
-}
120
-
121
-@media all and (min-width: 940px) {
122
- #gollum-editor {
123
- border: 1px solid #828282;
124
- background: #414141;
125
- }
126
-}
127
-
128
-@media all and (min-width: 940px) {
129
- a#function-bold:hover span { background-position: 0 0; }
130
- a#function-italic:hover span { background-position: -27px 0; }
131
- a#function-underline:hover span { background-position: -54px 0; }
132
- a#function-code:hover span { background-position: -82px 0; }
133
- a#function-ul:hover span { background-position: -109px 0; }
134
- a#function-ol:hover span { background-position: -136px 0; }
135
- a#function-blockquote:hover span { background-position: -163px 0; }
136
- a#function-hr:hover span { background-position: -190px 0; }
137
- a#function-h1:hover span { background-position: -217px 0; }
138
- a#function-h2:hover span { background-position: -244px 0; }
139
- a#function-h3:hover span { background-position: -271px 0; }
140
- a#function-link:hover span { background-position: -298px 0; }
141
- a#function-image:hover span { background-position: -324px 0; }
142
- a#function-help:hover span { background-position: -405px 0; }
143
-
144
- a#function-bold span { background-position: 0 -28px; }
145
- a#function-italic span { background-position: -27px -28px; }
146
- a#function-underline span { background-position: -54px -28px; }
147
- a#function-code span { background-position: -82px -28px; }
148
- a#function-ul span { background-position: -109px -28px; }
149
- a#function-ol span { background-position: -136px -28px; }
150
- a#function-blockquote span { background-position: -163px -28px; }
151
- a#function-hr span { background-position: -190px -28px; }
152
- a#function-h1 span { background-position: -217px -28px; }
153
- a#function-h2 span { background-position: -244px -28px; }
154
- a#function-h3 span { background-position: -271px -28px; }
155
- a#function-link span { background-position: -298px -28px; }
156
- a#function-image span { background-position: -324px -28px; }
157
- a#function-help span { background-position: -405px -28px; }
158
-}
159
-
160
-/* Don't let pygmentize's definitions mess up MathJax */
161
-.MathJax * {
162
- color: white !important;
163
-}
1
+:root {
2
+ --primary: #18191a;
3
+ --secondary: #242526;
4
+ --tertiary: #3a3b3c;
5
+ --primary-text: #e4e6eb;
6
+ --secondary-text: #b0b3b8;
7
+
8
+ --blue: #4c6885;
9
+ --blue-transparent: rgba(76, 104, 133, .1);
10
+ --cyan: #4fa4b8;
11
+ --green: #3b7d4f;
12
+ --green-transparent: rgba(59, 125, 79, .1);
13
+ --pink: #9c2a70;
14
+ --purple: #634ca4;
15
+ --purple-transparent: rgba(99, 76, 164, .1);
16
+ --red: #e64539;
17
+ --red-transparent: rgba(230, 69, 57, .1);
18
+ --yellow: #f0b541;
19
+ --yellow-transparent: rgba(240, 181, 65, .1)
20
+}
21
+
22
+/* general */
23
+:root, [data-color-mode=light][data-light-theme*=light], [data-color-mode=dark][data-dark-theme*=light] { color-scheme: dark }
24
+body { background: var(--primary); color: var(--primary-text) }
25
+.border { border-color: var(--secondary) !important }
26
+.border-bottom { border-color: var(--secondary) !important }
27
+a { color: var(--cyan) }
28
+
29
+/* Box classes */
30
+.Box { background: var(--secondary); border: 1px solid var(--tertiary) }
31
+.Box .border-top { border-color: var(--tertiary) !important }
32
+.Box-row { border-color: var(--tertiary) !important }
33
+.Box-row--hover-gray:hover { background: var(--tertiary) }
34
+.Box-row--gray { background: var(--tertiary); border-color: var(--secondary-text) }
35
+.Box-header { background: var(--tertiary); border-color: var(--secondary) }
36
+
37
+/* page edit */
38
+.tabnav { border-color: var(--secondary) !important }
39
+.tabnav-tab { color: var(--secondary-text) !important }
40
+.tabnav-tab.selected { color: var(--primary-text) !important; background: var(--primary) !important; border-color: var(--secondary) !important }
41
+
42
+/* dialog */
43
+#gollum-dialog-dialog-inner { background: var(--secondary) }
44
+#gollum-dialog-dialog-title .border-bottom { border-color: var(--tertiary) !important }
45
+#gollum-dialog-dialog-body input:focus { box-shadow: none }
46
+label { color: var(--primary-text) !important }
47
+.field .context { color: var(--secondary-text) !important }
48
+.color-fg-subtle { color: var(--secondary-text) !important }
49
+
50
+/* table */
51
+table, table td, table th { border-color: var(--tertiary) !important }
52
+table tr, hr { background: var(--secondary) !important }
53
+table th { color: var(--primary-text) !important }
54
+
55
+/* history */
56
+.color-bg-open { background: var(--green-transparent) !important }
57
+.color-bg-closed { background: var(--red-transparent) !important }
58
+
59
+/* search */
60
+.form-control { background: var(--tertiary); color: var(--primary-text); border-color: var(--tertiary); box-shadow: none }
61
+.color-bg-success { background: var(--green) !important }
62
+#search-query:focus { box-shadow: none }
63
+#search-query::placeholder { color: var(--secondary-text) }
64
+.Counter--primary { background: var(--secondary); color: var(--primary-text) }
65
+
66
+/* buttons */
67
+.btn:not(.btn-primary) { background: var(--secondary); color: var(--primary-text); box-shadow: none; border-color: var(--tertiary) }
68
+.btn:not(.btn-primary):hover { background: var(--tertiary) }
69
+.btn-primary { background: var(--green) }
70
+.btn-link { color: var(--cyan) }
71
+.next_page, .previous_page { color: var(--cyan) !important }
72
+.next_page.disabled, .previous_page.disabled { color: var(--secondary-text) !important }
73
+
74
+/* wiki content */
75
+div.toc-title { color: var(--primary-text) !important; border-bottom: 1px solid var(--tertiary) !important }
76
+.toc { background: var(--secondary) !important; border: 1px solid var(--tertiary) !important }
77
+#sidebar-content .toc { border: none !important }
78
+#sidebar-content { padding: 0px !important }
79
+#wiki-sidebar { margin-top: 31px; border-radius: 3px }
80
+:is(h1, h2, h3, h4, h5, h6).editable { border-bottom: 1px solid var(--tertiary) !important }
81
+blockquote { border-left: .25em solid var(--tertiary) !important; color: var(--secondary-text) !important }
82
+.markdown-body a::before { filter: brightness(0) saturate(100%) invert(93%) sepia(6%) saturate(201%) hue-rotate(183deg) brightness(98%) contrast(96%) }
83
+
84
+/* edit */
85
+#gollum-autorecover-msg { background: var(--green); color: var(--primary-text); border-color: var(--tertiary) }
86
+.SelectMenu-modal { background: var(--tertiary) }
87
+.SelectMenu-header { border-color: var(--secondary) }
88
+.SelectMenu-item { background: var(--tertiary); color: var(--primary-text); border-color: var(--secondary) }
89
+.SelectMenu-item:disabled { color: var(--secondary-text) }
90
+.SelectMenu-item:hover { background: var(--secondary) }
91
+.SelectMenu-item[aria-checked="true"] { color: var(--primary-text) }
92
+.SelectMenu-modal { border-color: var(--secondary) }
93
+.SelectMenu-divider { background: var(--secondary); color: var(--secondary-text); border-color: var(--secondary) }
94
+#gollum-editor-help.border { border-color: var(--tertiary) !important }
95
+#gollum-editor-help nav { border-color: var(--secondary) !important }
96
+#gollum-editor-help-parent, #gollum-editor-help-list { background: var(--tertiary) }
97
+#gollum-editor-help-parent a, #gollum-editor-help-list a {color: var(--secondary-text) !important; box-shadow: none !important; text-shadow: none !important; border: none !important }
98
+#gollum-editor-help-parent a:hover, #gollum-editor-help-list a:hover {background: var(--secondary) !important }
99
+#gollum-editor-help-parent a.selected, #gollum-editor-help-list a.selected { background: var(--secondary) !important; color: var(--primary-text) !important }
100
+#gollum-editor-help-wrapper { background: var(--tertiary) }
101
+
102
+/* github-style alerts */
103
+.github-alert { border-radius: 0 3px 3px 0; padding-top: 5px !important; padding-bottom: 10px !important }
104
+.github-alert-note { border-left: .25em solid var(--blue) !important; background: var(--blue-transparent) }
105
+.github-alert-note .github-alert-title { color: var(--blue) }
106
+.github-alert-tip { border-left: .25em solid var(--green) !important; background: var(--green-transparent) }
107
+.github-alert-tip .github-alert-title { color: var(--green) }
108
+.github-alert-important { border-left: .25em solid var(--purple) !important; background: var(--purple-transparent) }
109
+.github-alert-important .github-alert-title { color: var(--purple) }
110
+.github-alert-warning { border-left: .25em solid var(--yellow) !important; background: var(--yellow-transparent) }
111
+.github-alert-warning .github-alert-title { color: var(--yellow) }
112
+.github-alert-caution { border-left: .25em solid var(--red) !important; background: var(--red-transparent) }
113
+.github-alert-caution .github-alert-title { color: var(--red) }
114
+
115
+/* code blocks */
116
+.markdown-body pre { min-height: 2rem }
117
+.hll, .highlight { background: var(--secondary) !important; border: 1px solid var(--tertiary) !important }
118
+.bp, .highlight .bp { color: var(--cyan) }
119
+.c, .highlight .c { color: var(--secondary-text) }
120
+.ch, .highlight .ch { color: var(--secondary-text) }
121
+.cm, .highlight .cm { color: var(--secondary-text) }
122
+.cp, .highlight .cp { color: var(--secondary-text) }
123
+.cpf, .highlight .cpf { color: var(--secondary-text) }
124
+.cs, .highlight .cs { color: var(--red); font-weight: bold }
125
+.c1, .highlight .c1 { color: var(--secondary-text) }
126
+.dl, .highlight .dl { color: var(--yellow) }
127
+.err, .highlight .err { color: var(--primary-text); background: var(--red) }
128
+.esc, .highlight .esc { color: var(--primary-text) }
129
+.fm, .highlight .fm { color: var(--primary-text) }
130
+.g, .highlight .g { color: var(--primary-text) }
131
+.gc, .highlight .gc { background: var(--tertiary) }
132
+.gd, .highlight .gd { background: var(--red-transparent); color: var(--red) }
133
+.ge, .highlight .ge { color: var(--primary-text); font-style: italic }
134
+.gg, .highlight .gg { color: var(--secondary-text) }
135
+.gh, .highlight .gh { color: var(--secondary-text); font-weight: bold }
136
+.gi, .highlight .gi { background: var(--green-transparent); color: var(--green) }
137
+.go, .highlight .go { color: var(--secondary-text) }
138
+.gp, .highlight .gp { color: var(--secondary-text); font-weight: bold }
139
+.gr, .highlight .gr { color: var(--red) }
140
+.gs, .highlight .gs { color: var(--primary-text); font-weight: bold }
141
+.gt, .highlight .gt { color: var(--red) }
142
+.gu, .highlight .gu { color: var(--purple); font-weight: bold }
143
+.il, .highlight .il { color: var(--cyan) }
144
+.k, .highlight .k { color: var(--cyan) }
145
+.kc, .highlight .kc { color: var(--cyan) }
146
+.kd, .highlight .kd { color: var(--green) }
147
+.kn, .highlight .kn { color: var(--pink) }
148
+.kp, .highlight .kp { color: var(--green) }
149
+.kr, .highlight .kr { color: var(--green) }
150
+.kt, .highlight .kt { color: var(--green) }
151
+.l, .highlight .l { color: var(--primary-text) }
152
+.ld, .highlight .ld { color: var(--primary-text) }
153
+.m, .highlight .m { color: var(--cyan) }
154
+.mb, .highlight .mb { color: var(--purple) }
155
+.mf, .highlight .mf { color: var(--purple) }
156
+.mh, .highlight .mh { color: var(--purple) }
157
+.mi, .highlight .mi { color: var(--blue) }
158
+.mo, .highlight .mo { color: var(--purple) }
159
+.n, .highlight .n { color: var(--primary-text) }
160
+.na, .highlight .na { color: var(--cyan) }
161
+.nb, .highlight .nb { color: var(--cyan) }
162
+.nc, .highlight .nc { color: var(--purple) }
163
+.nd, .highlight .nd { color: var(--primary-text) }
164
+.ne, .highlight .ne { color: var(--yellow); font-weight: bold }
165
+.nf, .highlight .nf { color: var(--primary-text) }
166
+.ni, .highlight .ni { color: var(--primary-text) }
167
+.nl, .highlight .nl { color: var(--primary-text) }
168
+.nn, .highlight .nn { color: var(--secondary-text) }
169
+.no, .highlight .no { color: var(--primary-text) }
170
+.nt, .highlight .nt { color: var(--blue) }
171
+.nv, .highlight .nv { color: var(--purple) }
172
+.nx, .highlight .nx { color: var(--primary-text) }
173
+.py, .highlight .py { color: var(--primary-text) }
174
+.o, .highlight .o { color: var(--pink) }
175
+.ow, .highlight .ow { color: var(--green) }
176
+.p, .highlight .p { color: var(--primary-text) }
177
+.s, .highlight .s { color: var(--yellow) }
178
+.sa, .highlight .sa { color: var(--yellow) }
179
+.sb, .highlight .sb { color: var(--yellow) }
180
+.sc, .highlight .sc { color: var(--yellow) }
181
+.sd, .highlight .sd { color: var(--yellow) }
182
+.se, .highlight .se { color: var(--yellow) }
183
+.sh, .highlight .sh { color: var(--yellow) }
184
+.si, .highlight .si { color: var(--yellow) }
185
+.sr, .highlight .sr { color: var(--yellow) }
186
+.ss, .highlight .ss { color: var(--yellow) }
187
+.sx, .highlight .sx { color: var(--yellow) }
188
+.s1, .highlight .s1 { color: var(--yellow) }
189
+.s2, .highlight .s2 { color: var(--yellow) }
190
+.vc, .highlight .vc { color: var(--purple) }
191
+.vg, .highlight .vg { color: var(--purple) }
192
+.vi, .highlight .vi { color: var(--purple) }
193
+.vm, .highlight .vm { color: var(--purple) }
194
+.w, .highlight .w { color: var(--primary-text) }
195
+.x, .highlight .x { color: var(--primary-text) }
custom.js
... ...
@@ -0,0 +1,13 @@
1
+$(document).ready(() => {
2
+ // ace editor dark mode
3
+ // see: https://github.com/gollum/gollum/issues/1656#issuecomment-785096494
4
+ if (window.ace && window.ace_editor) {
5
+ window.ace.config.setModuleUrl("ace/theme/twilight", "http://ajaxorg.github.io/ace-builds/src-noconflict/theme-twilight.js")
6
+ window.ace_editor.setTheme("ace/theme/twilight")
7
+ window.ace_editor.setOption("showPrintMargin", false)
8
+ }
9
+ // mermaid dark mode
10
+ if (mermaid) {
11
+ mermaid.initialize({ theme: "dark" })
12
+ }
13
+})