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