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