Changeset View
Changeset View
Standalone View
Standalone View
assets/css/doc.scss
- This file was added.
1 | @import "base"; | ||||
---|---|---|---|---|---|
2 | | ||||
3 | /* Actual documentation styling */ | ||||
4 | div.table table { | ||||
5 | text-align: left; /* Disable justification */ | ||||
6 | border: 1px solid black; | ||||
7 | border-collapse: collapse; | ||||
8 | } | ||||
9 | | ||||
10 | /* Give alternating row colors */ | ||||
11 | div.table tr:nth-child(odd) { | ||||
12 | background-color: #eee; | ||||
13 | } | ||||
14 | | ||||
15 | div.table tr:nth-child(even) { | ||||
16 | background-color: white; | ||||
17 | } | ||||
18 | | ||||
19 | div.table th { | ||||
20 | background-color: white; | ||||
21 | font-weight: normal; | ||||
22 | text-align: center; | ||||
23 | vertical-align: middle; | ||||
24 | border-bottom: 1px solid black; | ||||
25 | } | ||||
26 | | ||||
27 | div.table td { | ||||
28 | text-align: left; | ||||
29 | padding: 4px; | ||||
30 | } | ||||
31 | | ||||
32 | | ||||
33 | // alert copied from bootstrap 4 | ||||
34 | | ||||
35 | $theme-colors: (note: #27ae60, tip: #3daee9, important: #f67400, warning: #da4453); | ||||
36 | | ||||
37 | @each $color, $value in $theme-colors { | ||||
38 | div.#{$color} { | ||||
39 | position: relative; | ||||
40 | padding: $alert-padding-y $alert-padding-x; | ||||
41 | margin-bottom: $alert-margin-bottom; | ||||
42 | border: $alert-border-width solid transparent; | ||||
43 | @include border-radius($alert-border-radius); | ||||
44 | @include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level)); | ||||
45 | // Headings for larger alerts | ||||
46 | .title { | ||||
47 | // Specified to prevent conflicts of changing $headings-color | ||||
48 | color: inherit; | ||||
49 | } | ||||
50 | a { | ||||
51 | font-weight: $alert-link-font-weight; | ||||
52 | } | ||||
53 | } | ||||
54 | } | ||||
55 | | ||||
56 | /* Make the content wrapping div have a nice margin. */ | ||||
57 | body div.chapter, body div.sect1, body div.book, body div.article { | ||||
58 | width: 90%; | ||||
59 | max-width: 1000px; | ||||
60 | margin-left: auto; | ||||
61 | margin-right: auto; | ||||
62 | } | ||||
63 | | ||||
64 | div.sect2 { | ||||
65 | width: 100%; | ||||
66 | } | ||||
67 | | ||||
68 | .programlisting { | ||||
69 | | ||||
70 | /* This will work someday */ | ||||
71 | border-radius: 7px; | ||||
72 | | ||||
73 | /* To support border radius on our OSS browser friends when | ||||
74 | * viewing online */ | ||||
75 | -webkit-border-radius: 7px; | ||||
76 | -moz-border-radius: 7px; | ||||
77 | } | ||||
78 | | ||||
79 | .programlisting { | ||||
80 | border: 1px solid black; | ||||
81 | background: white; | ||||
82 | } | ||||
83 | | ||||
84 | | ||||
85 | .guimenu, .guimenuitem, .guisubmenu, | ||||
86 | .guilabel, .interface, .guibutton { | ||||
87 | background-color: rgb(220, 220, 220); | ||||
88 | color: black; | ||||
89 | border: 1px solid rgb(190, 190, 190); | ||||
90 | border-radius: 3px; | ||||
91 | } | ||||
92 | | ||||
93 | .shortcut { | ||||
94 | background-color: #DDF; | ||||
95 | border: 1px dotted #BBF; | ||||
96 | font-weight: normal; | ||||
97 | border-radius: 2px; | ||||
98 | } | ||||
99 | | ||||
100 | .keycap, .keysym { | ||||
101 | background-color: #DFDFFF; | ||||
102 | font-weight: bold; | ||||
103 | border-radius: 2px; | ||||
104 | } | ||||
105 | | ||||
106 | .informalexample { | ||||
107 | margin: 0; | ||||
108 | border: 0; | ||||
109 | border-left: 1px dotted black; | ||||
110 | padding: 0 0 0 4px; | ||||
111 | } | ||||
112 | | ||||
113 | div.tip { | ||||
114 | margin-bottom: 12pt; | ||||
115 | } | ||||
116 | | ||||
117 | div.titlepage { | ||||
118 | margin-left: 0; | ||||
119 | } | ||||
120 | | ||||
121 | h3.title { | ||||
122 | margin-left: 0; | ||||
123 | } | ||||
124 | | ||||
125 | .screenshot, .informalfigure { | ||||
126 | border: 1px solid gray; | ||||
127 | background-color: rgb(240, 240, 240); | ||||
128 | } | ||||
129 | | ||||
130 | /* We no longer render <hr>s around <mediaobject>s, but this hides them in case | ||||
131 | * old generated HTML is displayed with the new style. | ||||
132 | */ | ||||
133 | .mediaobject hr, .mediaobjectco hr { | ||||
134 | display: none; | ||||
135 | } | ||||
136 | | ||||
137 | /* Used for the text and footer area at the bottom. */ | ||||
138 | #footer { | ||||
139 | width: 100%; | ||||
140 | } | ||||
141 | | ||||
142 | /* | ||||
143 | KDE-wide default CSS for HTML documentation (all media types). | ||||
144 | Copyright (C) 2000 Frederik Fouvry | ||||
145 | | ||||
146 | This program is free software; you can redistribute it and/or modify | ||||
147 | it under the terms of the GNU General Public License as published by | ||||
148 | the Free Software Foundation; either version 2 of the License, or | ||||
149 | (at your option) any later version. | ||||
150 | | ||||
151 | This program is distributed in the hope that it will be useful, | ||||
152 | but WITHOUT ANY WARRANTY; without even the implied warranty of | ||||
153 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | ||||
154 | GNU General Public License for more details. | ||||
155 | | ||||
156 | You should have received a copy of the GNU General Public License | ||||
157 | along with this program; if not, write to the Free Software | ||||
158 | Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA | ||||
159 | | ||||
160 | Send comments, suggestions, etc. to Frederik Fouvry | ||||
161 | <fouvry@sfs.nphil.uni-tuebingen.de>. */ | ||||
162 | | ||||
163 | /* | ||||
164 | Important note: these setting may be overridden by localised CSS. Do not | ||||
165 | add here any localization-sensitive style declarations. | ||||
166 | | ||||
167 | Any updates should be validated, e.g. http://jigsaw.w3.org/css-validator/ */ | ||||
168 | | ||||
169 | /* Note: "should be inherit" means that in a proper browser inherit should work. | ||||
170 | Somehow Netscape manages to interpret "inherit" as bright green. | ||||
171 | Yuck. */ | ||||
172 | | ||||
173 | .legalnotice, .copyright { | ||||
174 | padding: 0; | ||||
175 | margin: 0; | ||||
176 | } | ||||
177 | | ||||
178 | .abstract { | ||||
179 | font-weight: bolder; | ||||
180 | padding-right: 1em; | ||||
181 | } | ||||
182 | | ||||
183 | .toc, .list-of-tables { | ||||
184 | padding-left: 1em; | ||||
185 | } | ||||
186 | | ||||
187 | .sect1, .chapter, .synopsis, .appendix, .preface, .article, .refsect1, .index, .glossary, .glossdiv, .gloss-article, .section { | ||||
188 | padding-left: 1em; | ||||
189 | } | ||||
190 | | ||||
191 | .gloss-article, .glossdiv { | ||||
192 | padding-right: 1em; | ||||
193 | } | ||||
194 | | ||||
195 | .toc .chapter { | ||||
196 | padding: 0 0 0 1em; | ||||
197 | } | ||||
198 | | ||||
199 | .author { | ||||
200 | color: rgb(82, 80, 82); | ||||
201 | font-weight: bolder; | ||||
202 | padding: 0; | ||||
203 | margin: 0; | ||||
204 | } | ||||
205 | | ||||
206 | .othercredit { | ||||
207 | line-height: 1em; | ||||
208 | } | ||||
209 | | ||||
210 | .chapter .sect1, .chapter .titlepage, .sect1 .titlepage, .article .titlepage { | ||||
211 | padding: 0em; | ||||
212 | } | ||||
213 | | ||||
214 | .titlepage { | ||||
215 | padding-left: 1em; | ||||
216 | padding-right: 1em; | ||||
217 | } | ||||
218 | | ||||
219 | /* Links in Navigation */ | ||||
220 | | ||||
221 | .navLeft a:link, .navCenter a:link, .navRight a:link, .bottom-nav a:link, .bottom-nav a:visited { | ||||
222 | color: #41597A; | ||||
223 | font-weight: bold; | ||||
224 | } | ||||
225 | | ||||
226 | | ||||
227 | /* Nice link colors for the main text */ | ||||
228 | | ||||
229 | :link { | ||||
230 | color: #41597A; | ||||
231 | } | ||||
232 | | ||||
233 | :visited { | ||||
234 | color: #597ba8; | ||||
235 | } | ||||
236 | | ||||
237 | .navLeft { | ||||
238 | position: absolute; | ||||
239 | left: 20px; | ||||
240 | } | ||||
241 | | ||||
242 | .navRight { | ||||
243 | position: absolute; | ||||
244 | right: 20px; | ||||
245 | } | ||||
246 | | ||||
247 | .navCenter { | ||||
248 | text-align: center; | ||||
249 | align: center; | ||||
250 | } | ||||
251 | | ||||
252 | .bannerBottomLeft { | ||||
253 | position: absolute; | ||||
254 | left: 0px; | ||||
255 | } | ||||
256 | | ||||
257 | .bannerBottomRight { | ||||
258 | position: absolute; | ||||
259 | right: 0px; | ||||
260 | } | ||||
261 | | ||||
262 | /* A little bit of padding makes the tables for keybindings etc much easier to read */ | ||||
263 | | ||||
264 | table { | ||||
265 | padding: 5px; | ||||
266 | } | ||||
267 | | ||||
268 | dl { | ||||
269 | margin-top: 0em; | ||||
270 | margin-bottom: 0.5em; | ||||
271 | margin-left: 0.5em; | ||||
272 | } | ||||
273 | | ||||
274 | dd { | ||||
275 | margin-left: 1.5em; | ||||
276 | } | ||||
277 | | ||||
278 | dt { | ||||
279 | margin-top: 1em; | ||||
280 | } | ||||
281 | | ||||
282 | div.toc dt { | ||||
283 | margin-top: 0px; | ||||
284 | } | ||||
285 | | ||||
286 | div.screenshot { | ||||
287 | margin-bottom: 1em; | ||||
288 | margin-top: 1em; | ||||
289 | } | ||||
290 | | ||||
291 | div.informalexample { | ||||
292 | border-style: dotted; | ||||
293 | padding: 10px; | ||||
294 | } | ||||
295 | | ||||
296 | /* But no padding for navigation elements */ | ||||
297 | | ||||
298 | .toplogo, .navbackground { | ||||
299 | padding: 0px; | ||||
300 | } | ||||
301 | | ||||
302 | table.programlisting | ||||
303 | table.screen { | ||||
304 | border-style: none; | ||||
305 | background-color: rgb(224, 224, 224); | ||||
306 | table-layout: auto; /* 100%? */ | ||||
307 | color: rgb(0, 0, 0); /* should be inherit */ | ||||
308 | } | ||||
309 | | ||||
310 | /* Same as previous block, but more general (previous is HTML only) | ||||
311 | Not all browsers understand this yet. | ||||
312 | TABLE[class~=programlisting] | ||||
313 | TABLE[class~=screen] { border-style: none; | ||||
314 | background-color: rgb(224,224,224); | ||||
315 | table-layout: auto; | ||||
316 | color: inherit; | ||||
317 | } | ||||
318 | */ | ||||
319 | | ||||
320 | p { | ||||
321 | text-align: justify; | ||||
322 | } | ||||
323 | | ||||
324 | /* More specific settings */ | ||||
325 | p, h1, h2, h3, h4, h5, h6, td, th { | ||||
326 | font-family: "Noto Sans", sans-serif; | ||||
327 | } | ||||
328 | | ||||
329 | /* Visual cues for GUI elements etc in the text */ | ||||
330 | | ||||
331 | .guimenu, .guimenuitem, .guisubmenu { | ||||
332 | background-color: rgb(220, 220, 220); | ||||
333 | color: rgb(0, 0, 0); /* should be inherit */ | ||||
334 | } | ||||
335 | | ||||
336 | .guilabel, .interface, .guibutton, .guiicon { | ||||
337 | background-color: rgb(220, 220, 220); | ||||
338 | color: rgb(0, 0, 0); /* should be inherit */ | ||||
339 | } | ||||
340 | | ||||
341 | .shortcut { | ||||
342 | background-color: rgb(220, 220, 220); | ||||
343 | color: rgb(0, 0, 0); /* should be inherit */ | ||||
344 | } | ||||
345 | | ||||
346 | .shortcut .keycap { | ||||
347 | background-color: rgb(220, 220, 220); | ||||
348 | color: rgb(0, 0, 0); /* should be inherit */ | ||||
349 | } | ||||
350 | | ||||
351 | .question { | ||||
352 | font-weight: bolder; | ||||
353 | } | ||||
354 | | ||||
355 | .accel { | ||||
356 | background-color: rgb(220, 220, 220); | ||||
357 | color: rgb(0, 0, 0); | ||||
358 | text-decoration: underline; | ||||
359 | } | ||||
360 | | ||||
361 | .option, .command { | ||||
362 | background-color: rgb(255, 255, 255); | ||||
363 | color: rgb(0, 96, 160); | ||||
364 | font-weight: bold; | ||||
365 | } | ||||
366 | | ||||
367 | h1, h2, h3, h4, h5, h6 { | ||||
368 | color: rgb(82, 80, 82); | ||||
369 | background-color: transparent; | ||||
370 | } | ||||
371 | | ||||
372 | .arg, .parameter, .replaceable { | ||||
373 | background-color: rgb(255, 255, 255); | ||||
374 | color: rgb(0, 128, 64); | ||||
375 | font-style: italic; | ||||
376 | } | ||||
377 | | ||||
378 | .screen, .programlisting { | ||||
379 | background-color: rgb(220, 220, 220); | ||||
380 | color: rgb(0, 0, 0); /* should be inherit */ | ||||
381 | border-style: dotted; | ||||
382 | border-color: rgb(0, 0, 0); | ||||
383 | border-width: thin; | ||||
384 | padding: 5px; | ||||
385 | } | ||||
386 | | ||||
387 | | ||||
388 | /* This one is set in inches because the admonitions are set in inches | ||||
389 | and they're more difficult to change. We can live with it in here, | ||||
390 | for the meantime, it gives consistent margins */ | ||||
391 | | ||||
392 | .example { | ||||
393 | margin-left: 0.5in; | ||||
394 | margin-right: 0.5in; | ||||
395 | } | ||||
396 | | ||||
397 | div.mediaobject, div.mediaobjectco { | ||||
398 | /* float: right; */ | ||||
399 | /* might make it much nicer. although someone has to | ||||
400 | understand the rules ;-) You also don't want it to be | ||||
401 | surrounded by text it doesn't refer to ... But that | ||||
402 | may be among others a question of writing style. */ | ||||
403 | text-align: center; | ||||
404 | /* a bit of a hack: it should | ||||
405 | position _images_ */ | ||||
406 | | ||||
407 | img { | ||||
408 | max-width: 100%; | ||||
409 | } | ||||
410 | } | ||||
411 | | ||||
412 | .caption { | ||||
413 | margin: 0em 2em 0em 2em; | ||||
414 | text-align: center; | ||||
415 | } | ||||
416 | | ||||
417 | .inlinemediaobject { | ||||
418 | vertical-align: baseline; | ||||
419 | } | ||||
420 | | ||||
421 | | ||||
422 | /* An idea that could be nice: a search engine looking for specific | ||||
423 | classes could display them in some conspicuous color. All that is | ||||
424 | needed is an on the fly generated style element/style sheet. */ | ||||
425 | | ||||
426 | /* Only used in the hand-made HTML license texts */ | ||||
427 | body.license { | ||||
428 | background-color: rgb(255, 255, 255); | ||||
429 | text-align: justify; | ||||
430 | color: rgb(0, 0, 0); | ||||
431 | } | ||||
432 | | ||||
433 | pre.license { | ||||
434 | background-color: rgb(255, 255, 255); | ||||
435 | font-family: "Noto Sans", monospace; | ||||
436 | color: rgb(0, 0, 0); | ||||
437 | } | ||||
438 | | ||||
439 | .pagination { | ||||
440 | margin-left: auto; | ||||
441 | margin-right: auto; | ||||
442 | } | ||||
443 | | ||||
444 | .contentBody { | ||||
445 | margin-left: 5%; | ||||
446 | margin-right: 5%; | ||||
447 | width: 90%; | ||||
448 | } | ||||
449 | | ||||
450 | .figure-float { | ||||
451 | margin-right: 1em; | ||||
452 | } | ||||
453 | | ||||
454 | .listitem p { | ||||
455 | margin-bottom: 0; | ||||
456 | } |