-
Notifications
You must be signed in to change notification settings - Fork 2
/
style.user.css
328 lines (246 loc) · 19 KB
/
style.user.css
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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
/* A Dark Nord Material Theme for WallaBag - by J. SCOTT ELBLEIN ( https://geekdrop.com )
*
* v1.0.0
*
* This is based on the excellent Nord Theme color palette: https://www.nordtheme.com
*
* WallaBag theme based off of it's Material theme. Switch your Wallabag theme to it first.
*
* I've also included some of the other Nord palette colors in the comments where they all looked great to me & I couldn't really decide
* which I truly liked best there, (but I wanted to keep it mostly dark), so I (or you) could easily swap around later at will.
*
*/
/* [1] Following line is only required for Stylus/Stylish, to let it know where to enable the style */
@-moz-document regexp(".*/wallabag/web/.*") {
.logo { background-color: #B48EAD; } /* Logo Backgounds: Other cool colors: 4C566A B48EAD A3BE8C BF616A */
.logo:hover { background-color: #3B4252 !important; }
html { color: #D8DEE9; } /* Default font color */
body { background: #434C5E; }
a { color: #81A1C1; } /* Links (cards): Other cool colors: 8FBCBB 88C0D0 BF616A D08770 EBCB8B A3BE8C B48EAD */
.select-wrapper span.caret { color: #4C566A; }
.tooltipped { color: #4C566A; }
/* Only seen on the API Docs page AFAICT */
h1 { color: #E5E9F0; }
h5 { margin: 2rem 0 .656rem; color: #EBCB8B; }
/* Overall text color */
.grey-text { color: #D8DEE9; color: rgba(216, 222, 233, .7) !important; }
.nav { color: #ECEFF4; }
/**************
* Header Bar *
**************/
.cyan, .cyan.darken-1 { background-color: #3B4252 !important; }
/************
* Side Bar *
************/
.side-nav { background-color: #2E3440; }
.side-nav li>a, .results .nb-results, .nav-panel-item .material-icons { color: #E5E9F0; }
.side-nav li>a:hover, .side-nav .collapsible-header:hover, .side-nav.fixed .collapsible-header:hover { background-color: #3B4252; } /* Hover color */
.side-nav .collapsible-body, .side-nav.fixed .collapsible-body { background-color: #434C5E; } /* Backgound color for items like the Share item when expanded (i.e. Article Page) */
.border-bottom { border-bottom: 1px solid #3B4252; }
.nav-panels { background-color: #3B4252; }
/* Main content background */
#content { background-color: #434C5E; }
/* Search field */
#search_entry_term { background-color: inherit !important; }
/********
* Tabs *
********/
.tabs .tab a { color: #D8DEE9; }
.tabs .tab a.active, .tabs .tab a:hover { color: #E5E9F0; }
.tabs .indicator { background-color: #81A1C1; }
/* Collection. i.e. on the Untagged Entries page */
.collection .collection-item, .card, .card-panel, .tabs { background-color: #2E3440; border-bottom: 1px solid #3B4252; }
.collection { border: 1px solid #3B4252; border-radius: 4px; } /* Outer Border */
/* Results icons */
.results a { color: #81A1C1; }
/****************************
* "Cards" a.k.a. Bookmarks *
****************************/
.card { background-color: #3B4252; }
.data .card .card-body { background-color: #2E3440; border-radius: 5px 5px 0 0; }
.card-stacked .preview, .card .card-fullimage .preview, .card .card-image .preview { background-color: #3B4252; border-radius: 5px 5px 0 0; } /* Card Placeholders: Other cool colors: 4C566A D8DEE9 B48EAD EBCB8B D08770 */
.card .card-content .card-title, .card .card-reveal .card-title { font-size: 1.2em; }
.card-entry-labels li, .card-tag-labels li, .card-stacked div.metadata .chip { background-color: #BF616A; } /* Tag Backgounds: Other cool colors: B48EAD A3BE8C EBCB8B D08770 */
#list .chip a, .card-entry-labels-hidden a, .card-entry-labels a, .card-entry-tags a, .card-tag-labels a { color: #ECEFF4; }
.card .card-action:last-child { border-radius: 0 0 5px 5px; }
.card, .card-panel { border-radius: 5px; }
.grey-text.text-darken-4 { color: #4C566A !important; } /* Ellipses */
.card .card-reveal { background-color: #3B4252; } /* After clicking the Ellipses */
.card .card-entry-labels-hidden li { background-color: #BF616A; color: inherit; } /* Tag backgrounds on the reveal card */
.pagination .active span { color: #D8DEE9; }
.pagination li.active { background-color: #81A1C1; }
.pagination li a { color: #81A1C1; font-size: 0.9rem; } /* Page numbers */
.pagination .disabled { color: #D8DEE9; } /* Page number ellipses */
input:not([type]), input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], textarea.materialize-textarea, .select-wrapper input.select-dropdown { border-bottom: 1px solid #3B4252; }
/* Regular buttons */
.btn, .btn-large { color: #ECEFF4; background-color: #5E81AC; }
.btn-large:hover, .btn:hover { background-color: #81A1C1; }
/*************
* Tags Page *
*************/
.card-tag-labels li { color: inherit; box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12), 0 3px 1px -2px rgba(0,0,0,.2); }
/***************
* Config Page *
***************/
.input-field label, div > label { color: #EBCB8B; }
div > h6.grey-text { color: #EBCB8B !important; }
/* Tagging Rules table */
thead { color: #EBCB8B; }
table.bordered>tbody>tr, table.bordered>thead>tr { border-bottom: 1px solid #3B4252; }
#set5 li { list-style-type: circle; padding-bottom: 1.2rem; }
#set5 .grey-text { color: #81A1C1 !important; }
#set5 .material-icons { float: left; padding-right: 1.8rem; } /* Move the icons to the left of each item. BUG: when an item is multiline the icons don't place themselves at the true beginning */
table.striped>tbody>tr>td { background-color: #434C5E; }
.collapsible {
border-top: 1px solid #4C566A;
border-right: 1px solid #4C566A;
border-left: 1px solid #4C566A;
border-radius: 5px 5px 5px 5px;
}
.collapsible-header { background-color: #3B4252; border-bottom: 1px solid #434C5E; }
.collapsible-body { background-color: #434C5E; border-bottom: 1px solid #434C5E; }
/* The 'Focused' underline in text input areas */
input:not([type]):focus:not([readonly]),
input[type=date]:focus:not([readonly]),
input[type=datetime-local]:focus:not([readonly]),
input[type=datetime]:focus:not([readonly]),
input[type=email]:focus:not([readonly]),
input[type=number]:focus:not([readonly]),
input[type=password]:focus:not([readonly]),
input[type=search]:focus:not([readonly]),
input[type=tel]:focus:not([readonly]),
input[type=text]:focus:not([readonly]),
input[type=time]:focus:not([readonly]),
input[type=url]:focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]) { border-bottom: 1px solid #A3BE8C; box-shadow: 0 1px 0 0 #A3BE8C; }
/* Certain (apparently random) Labels when it's text field is clicked in */
input[type=text]:focus:not([readonly])+label { color: #A3BE8C; }
/* Reset buttons */
.red { background-color: #BF616A !important; margin-top: 20px; }
/* For that 1 weird, random horizontal rule */
hr { border: 1px solid #3B4252 !important; }
.hljs { color: inherit; background: #2E3440; }
/* The drop-down combo-box backgrounds when selected */
input[type=text]:focus:not([readonly]), .dropdown-content, .dropdown-content li.active.selected { background-color: #2E3440 !important; }
/***************
* Import Page *
***************/
/* Change the color from red to the Nord color for green; Red to me seems like a 'danger' type color, while green is more of a 'this is safe' color */
blockquote { border-left: 5px solid #A3BE8C; }
/* The "Add New Item" drop-down input field */
.input-field.nav-panel-item, .nav-panels .input-field input:focus { background-color: #4C566A; }
.input-field.nav-panel-item .close { color: #D8DEE9 !important; } /* "X" button */
.nav-panel-item .add, .nav-panel-item .search { color: #D8DEE9 !important; } /* "+" button */
input[type=url]:focus:not([readonly]), input[type=text]:focus:not([readonly]), nav .input-field input[type=text]:valid {
border-bottom: 0px solid #D08770;
box-shadow: 0 1px 0 0 #D08770;
background-color: #4C566A;
color: #D8DEE9;
}
/****************
* Filters Area *
****************/
.dropdown-content li>span { color: #A3BE8C; }
.dropdown-content li.active, .dropdown-content li.selected, .dropdown-content li:hover { background-color: #3B4252; }
#filters > form > div > div > label { color: #EBCB8B; }
/* Checkboxes */
[type=checkbox]+label:before, [type=checkbox]:not(.filled-in)+label:after { border: 1px solid #4C566A; }
/* A lil more space between the check-box and the button, and specifically set it's text color */
[type=checkbox]+label { margin-bottom: 1.5rem; color: #D8DEE9 !important; }
/* Date Picker */
.picker { color: inherit; } /* Text in the drop-down combos */
.picker__box { background: #2E3440; border: 0; }
.picker__input.picker__input--active { border-color: #81A1C1; }
.picker__day.picker__day--today { color: #EBCB8B; }
.picker__close, .picker__today { color: #81A1C1; }
.picker__day--infocus:hover { color: #ECEFF4; }
.picker__day--infocus { color: #4C566A; }
.picker__nav--next:hover, .picker__nav--prev:hover { background: #3B4252; } /* Arrows hover color */
.picker__nav--next, .picker__nav--prev { top: -0.0em; } /* Bump the arrows down a bit more to line them up properly */
.picker__select--month.browser-default, .picker__select--year.browser-default { background-color: #434C5E; }
.picker__weekday { color: #D8DEE9; } /* M-F color */
.picker--focused .picker__day--selected, .picker__day--selected, .picker__day--selected:hover { background-color: #5E81AC; color: #ECEFF4; } /* Selected Day Circle */
.picker__footer { border-top: 1px solid #3B4252; } /* Line about the calendar footer */
select:focus { outline: 1px solid #5E81AC; } /* Border around month/year pickers */
select.picker__select--year.browser-default, select.picker__select--month.browser-default { border: 0; }
/**********
* Footer *
**********/
.cyan.darken-2 { background-color: #3B4252 !important; }
.page-footer .footer-copyright { font-weight: 200; font-size: 0.8rem; }
.grey-text.text-lighten-4 { color: #81A1C1 !important; }
/*****************
* 'How To' Page *
*****************/
.hljs-string { color: #EBCB8B; }
pre[class*=language-] { background: #3B4252; border: .3em solid #434C5E; }
/*****************
* API Docs Page *
*****************/
#header { background-color: #3B4252; border-bottom: 1px solid #4C566A; }
/* Text under "Documentation" */
div.content > div > div > div > p { color: inherit; }
/* Border around 'code' tags */
div.content > div > div > div > p:nth-child(2) > code { background-color: inherit; border: 1px dashed #81A1C1; }
/* Divider lines */
table thead tr th { border-bottom: solid #434C5E; color: inherit; }
table.fullwidth > tbody > tr { border-bottom: 1px dashed #434C5E; }
/* Spacing between items */
div.content > div > div > table > tbody > tr > td { padding: 10px 6px; }
.heading { border: 10; }
li.operation .heading h3 span.http_method i, li.operation .heading h3 span.deprecated i { color: #E5E9F0; }
li.operation .heading h3 span.http_method i { margin: .5em; } /* "Icon" spacing */
/* Colored Labels */
li.operation.post .heading { border-color: #A3BE8C; background-color: #4C566A; }
li.operation.post .heading h3 span.http_method i { background-color: #A3BE8C; }
li.operation.get .heading { border-color: #5E81AC; background-color: #4C566A; }
li.operation.get .heading h3 span.http_method i { background-color: #5E81AC; }
li.operation.get div.content h4 { color: #5E81AC; }
li.operation.put .heading { border-color: #D08770; background-color: #4C566A; }
li.operation.put .heading h3 span.http_method i { background-color: #D08770; }
li.operation.put div.content h4 { color: #D08770; }
li.operation.delete .heading { border-color: #BF616A; background-color: #4C566A; }
li.operation.delete .heading h3 span.http_method i { background-color: #BF616A; }
li.operation.delete div.content h4 { color: #BF616A; }
li.operation.patch .heading { border-color: #B48EAD; background-color: #4C566A; }
li.operation.patch .heading h3 span.http_method i { background-color: #B48EAD; }
li.operation .heading h3 { color: #D8DEE9; }
.heading ul.options li { margin: .01em 0; padding: .4em !important; }
/* Fallback colors might be bad; I didn't test, I just added them to shut CSS Lint up ;) */
li.operation.delete .heading ul.options li { color: #BF616A; background-color: #BF616A; background-color: rgba(191, 97, 106, .2); border: 2px solid #BF616A; border: 2px solid rgba(191, 97, 106, .4); }
li.operation.post .heading ul.options li { color: #A3BE8C; background-color: #A3BE8C; background-color: rgba(163, 190, 140, .2); border: 2px solid #A3BE8C; border: 2px solid rgba(163, 190, 140, .4); }
li.operation.put .heading ul.options li { color: #c5862b; background-color: #D08770; background-color: rgba(197, 134, 43, .2); border: 2px solid #D08770; border: 2px solid rgba(197, 134, 43, .4); }
li.operation.get .heading ul.options li { color: #81A1C1; background-color: #81A1C1; background-color: rgba(15, 106, 180, .2); border: 2px solid #81A1C1; border: 2px solid rgba(129, 161, 193, .4); }
li.operation.patch .heading ul.options li { color: #B48EAD; background-color: #B48EAD; background-color: rgba(180, 142, 173, .2); border: 2px solid #B48EAD; border: 2px solid rgba(180, 142, 173, .4); }
li.operation.post div.content, li.operation.get div.content, li.operation.put div.content, li.operation.delete div.content, li.operation.patch div.content { border-color: #4C566A; background-color: #2E3440; }
/* ----------- */
/* Info Footer */
#colophon { border-top: inherit; color: #D8DEE9; }
/*********************
* Article View Page *
*********************/
#slide-out > li > a > i { color: inherit; } /* NavBar icons */
#article { background-color: #3B4252; border: 1px solid #2E3440; font-size: 1.5em; padding: 0 1em; box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12), 0 3px 1px -2px rgba(0,0,0,.2); }
#article aside .tools { background-color: #434C5E; border-radius: 4px; font-size: 0.6em; } /* 'Tools' area */
#article aside .tools .tags { margin: 0.5em auto; } /* Tag spacing */
#article aside .tools .stats li i.material-icons, .reader-mode:hover .collapsible-body li a i.material-icons { color: inherit; font-size: 1.5em; } /* Icons */
#article aside .tools .stats { font-size: .8em; margin: auto; } /* Tools area */
#article aside .tools .stats a { color: #D08770; } /* Link text */
/* Tags */
#article aside .chip { background-color: #BF616A; font-size: .8em; line-height: 2.3em; height: 2em; }
#article aside .chip a, #article aside .chip i { color: #ECEFF4; } /* Tag text */
#article aside .chip i.material-icons { line-height: 1.1em; } /* Tag icon */
#article>header>h1 { font-size: 1.6em; margin: 2.1rem 0 .68rem; background-color: #2E3440; color: #EBCB8B; padding: 1.5em; text-align: center; border-radius: 4px; } /* Article header */
#article article { color: inherit; }
#article article a { border-bottom: inherit; } /* Article links */
#article article h2, #article article h3, #article article h4 { color: #8FBCBB; font-style: italic; } /* Title text */
#article pre { background-color: #2E3440; border: inherit; } /* Code (pre) tags */
#article article blockquote { background-color: #2E3440; border-radius: 2px; } /* Blockquote tags */
#article input[type=text]:focus:not([readonly]) { background-color: inherit !important; border-radius: 1px; }
#article input[type=text] { border-bottom: 1px solid #EBCB8B; }
.reader-mode:hover .collapsible-body li a i.material-icons { margin: auto 5px auto -8px; }
/**************
* Share Page *
**************/
body > article { color: inherit; }
} /* [1] Closing brace for Stylus/Stylish */