Changeset View
Changeset View
Standalone View
Standalone View
common/en/kde-docs.css
1 | /* | 1 | /* | ||
---|---|---|---|---|---|
2 | * kde-docs.css -- Style sheets for the KDE documentation generated | 2 | * kde-docs.css -- Style sheets for the KDE documentation generated | ||
3 | * HTML. | 3 | * HTML. | ||
4 | * | 4 | * | ||
5 | * Started by Michael Pyne <mpyne@kde.org> | 5 | * Started by Michael Pyne <mpyne@kde.org> | ||
6 | */ | 6 | */ | ||
7 | html, body { | 7 | html, body { | ||
8 | padding: 0; | 8 | padding: 0; | ||
9 | width: 100%; | 9 | width: 100%; | ||
10 | height: 100%; | 10 | height: 100%; | ||
11 | font-size: 1rem; | ||||
12 | font-weight: 400; | ||||
13 | line-height: 1.5; | ||||
14 | color: #212529; | ||||
15 | text-align: left; | ||||
11 | } | 16 | } | ||
12 | 17 | | |||
13 | /* These two divs force the content to fill up at least the viewport, which | 18 | /* These two divs force the content to fill up at least the viewport, which | ||
14 | * is needed in order to force the footer to the bottom of short pages. | 19 | * is needed in order to force the footer to the bottom of short pages. | ||
15 | */ | 20 | */ | ||
16 | #content { | 21 | #content { | ||
17 | min-height: 100%; | 22 | min-height: 100%; | ||
18 | position: relative; | 23 | position: relative; | ||
▲ Show 20 Lines • Show All 64 Lines • ▼ Show 20 Line(s) | |||||
83 | div.table td { | 88 | div.table td { | ||
84 | text-align: left; | 89 | text-align: left; | ||
85 | padding: 4px; | 90 | padding: 4px; | ||
86 | } | 91 | } | ||
87 | 92 | | |||
88 | div.tip, div.note, div.warning, div.important { | 93 | div.tip, div.note, div.warning, div.important { | ||
89 | padding: 6pt; | 94 | padding: 6pt; | ||
90 | padding-top: 3pt; | 95 | padding-top: 3pt; | ||
96 | border-radius: 3px; | ||||
91 | } | 97 | } | ||
92 | 98 | | |||
93 | div.tip > .title, div.warning > .title, div.note > .title, div.important > .title { | 99 | div.tip > .title, div.warning > .title, div.note > .title, div.important > .title { | ||
94 | padding: 4pt 1cm; | 100 | font-weight: 550; | ||
95 | margin: 0; | | |||
96 | margin-top: 4pt; | | |||
97 | } | 101 | } | ||
98 | 102 | | |||
99 | div.tip { | 103 | div.tip { | ||
100 | border: 1px solid #EEF; | 104 | border: 2px solid #3daee9; | ||
101 | border-left: 1px solid #88F; | 105 | background: #cbe3ef; | ||
102 | background: #EFEFFF; | | |||
103 | } | | |||
104 | | ||||
105 | div.tip > .title { | | |||
106 | border: 1px solid #88F; | | |||
107 | background: #CFCFFF; | | |||
108 | color: #222; | | |||
109 | } | 106 | } | ||
110 | 107 | | |||
111 | div.important { | 108 | div.important { | ||
112 | border: 1px solid #FF2; | 109 | border: 2px solid #f67400; | ||
113 | border-left: 1px solid #888; | 110 | background: #f0d7c1; | ||
114 | background: #FF7; | | |||
115 | } | | |||
116 | | ||||
117 | div.important > .title { | | |||
118 | border: 1px solid #836900; | | |||
119 | background: #FC0; | | |||
120 | color: #222; | | |||
121 | } | 111 | } | ||
122 | 112 | | |||
123 | div.note { | 113 | div.note { | ||
124 | border: 1px solid #EEE; | 114 | border: 2px solid #27ae60; | ||
125 | border-left: 1px solid #888; | 115 | background: #c7e2d4; | ||
126 | background: #EFEFEF; | | |||
127 | } | | |||
128 | | ||||
129 | div.note > .title { | | |||
130 | border: 1px solid #888; | | |||
131 | background: #CFCFCF; | | |||
132 | color: #222; | | |||
133 | } | 116 | } | ||
134 | 117 | | |||
135 | div.warning { | 118 | div.warning { | ||
136 | border: 1px solid #FEE; | 119 | border: 2px solid #da4453; | ||
137 | border-left: 1px solid #F88; | 120 | background: #ebced1; | ||
138 | background: #FFEFEF; | | |||
139 | margin-bottom: 6pt; | | |||
140 | } | | |||
141 | | ||||
142 | div.warning > .title { | | |||
143 | border: 1px solid #F88; | | |||
144 | background: #FFAFAF; | | |||
145 | color: #222; | | |||
146 | } | 121 | } | ||
147 | 122 | | |||
148 | /* Make the content wrapping div have a nice margin. */ | 123 | /* Make the content wrapping div have a nice margin. */ | ||
149 | body div.chapter, body div.sect1, body div.book, body div.article { | 124 | body div.chapter, body div.sect1, body div.book, body div.article { | ||
150 | margin-left: 2em; | 125 | margin-left: 2em; | ||
151 | margin-right: 2em; | 126 | margin-right: 2em; | ||
152 | } | 127 | } | ||
153 | 128 | | |||
▲ Show 20 Lines • Show All 114 Lines • ▼ Show 20 Line(s) | |||||
268 | 243 | | |||
269 | /* | 244 | /* | ||
270 | * This gives us the styling for the header and footer. | 245 | * This gives us the styling for the header and footer. | ||
271 | * See customization/kde-navig.xsl for where it's used. | 246 | * See customization/kde-navig.xsl for where it's used. | ||
272 | */ | 247 | */ | ||
273 | #header { | 248 | #header { | ||
274 | width: 100%; | 249 | width: 100%; | ||
275 | height: 51px; | 250 | height: 51px; | ||
276 | color: #535353; | 251 | color: white; | ||
277 | background: #eeeeee; | 252 | font-height: 3em; | ||
kossebau: Seems there is no such CSS property font-height? Was this meant to be e.g. font-size or line… | |||||
278 | border-bottom: #bcbcbc 1px solid; | 253 | background: #54a3d8; | ||
279 | } | 254 | } | ||
280 | 255 | | |||
281 | #header_content { | 256 | #header_content { | ||
282 | margin: 0 auto; | 257 | margin-left: 1em; | ||
283 | width: 80%; | 258 | background: white; | ||
284 | height: 51px; | 259 | height: 47px; | ||
285 | background: url("top.jpg") top left repeat-x; | 260 | } | ||
261 | #header_left { | ||||
262 | background: #54a3d8; | ||||
263 | display: inline-block; | ||||
264 | height: 47px; | ||||
265 | padding-right: 1em; | ||||
286 | } | 266 | } | ||
287 | 267 | | |||
288 | #header_right img { | 268 | #header_right img { | ||
289 | position: relative; | 269 | position: relative; | ||
290 | top: 8px; /* Vertically center */ | 270 | top: 8px; /* Vertically center */ | ||
291 | } | 271 | } | ||
292 | 272 | | |||
293 | #header_left { | | |||
294 | background: url("top-left.jpg") top left no-repeat; | | |||
295 | padding-left: 20px; | | |||
296 | height: 51px; | | |||
297 | } | | |||
298 | | ||||
299 | #header_right { | | |||
300 | background: url("top-right.jpg") top right no-repeat; | | |||
301 | color: white; | | |||
302 | padding-right: 20px; | | |||
303 | height: 51px; | | |||
304 | text-align: left; | | |||
305 | font-size: 18pt; | | |||
306 | font-weight: bold; | | |||
307 | vertical-align: middle; | | |||
308 | text-shadow: #112 2px 2px 2px; | | |||
309 | white-space: nowrap; | | |||
310 | overflow: hidden; | | |||
311 | line-height: 51px; | | |||
312 | } | | |||
313 | | ||||
314 | /* Used for the text and footer area at the bottom. */ | 273 | /* Used for the text and footer area at the bottom. */ | ||
315 | #footer { | 274 | #footer { | ||
316 | width: 100%; | 275 | width: 100%; | ||
317 | background-color: #eeeeee; | 276 | background-color: #eeeeee; | ||
318 | border: 0px; | 277 | border: 0px; | ||
319 | 278 | | |||
320 | /* Force footer to bottom of viewport/page */ | 279 | /* Force footer to bottom of viewport/page */ | ||
321 | /* Either should be position:fixed to stay always at the bottom of the viewport, or | 280 | /* Either should be position:fixed to stay always at the bottom of the viewport, or | ||
Show All 33 Lines | 308 | @media print { | |||
355 | .navCenter { | 314 | .navCenter { | ||
356 | display: none; | 315 | display: none; | ||
357 | } | 316 | } | ||
358 | 317 | | |||
359 | #footer { | 318 | #footer { | ||
360 | border-top: 1px solid #DDD; | 319 | border-top: 1px solid #DDD; | ||
361 | } | 320 | } | ||
362 | } | 321 | } | ||
322 | | ||||
323 | img { | ||||
324 | max-width: 100%; | ||||
325 | } |
Seems there is no such CSS property font-height? Was this meant to be e.g. font-size or line-height?