/[svn]/doc/tmpl/css/preview.css
ViewVC logotype

Contents of /doc/tmpl/css/preview.css

Parent Directory Parent Directory | Revision Log Revision Log


Revision 3090 - (show annotations) (download) (as text)
Mon Jan 16 14:08:15 2017 UTC (7 years, 2 months ago) by schoenebeck
File MIME type: text/css
File size: 8379 byte(s)
- Site layout: minor color adjustment on table headers.

1 /*
2 CrudeDoc CSS Style (for previewing an article on a local machine)
3 Copyright (c) 2015 Christian Schoenebeck. All rights reserved.
4 http://www.crudebyte.com
5 */
6
7 @import 'fontsbase.css';
8 @import 'jquery-ui.css';
9
10 html {
11 font-family:CRDSans;
12 font-weight:200;
13 font-size:17px;
14 line-height:1.2;
15 }
16
17
18 /* Article */
19
20 body {
21 padding: 16px 70px 95px 70px;
22 font-size:18px;
23 font-weight:200;
24 counter-reset:oli;
25 counter-reset:codeline;
26 background-color:white;
27 border:none;
28 }
29
30
31 body h1 {
32 clear:both;
33 border-bottom-style:solid;
34 border-bottom-width:1px;
35 border-bottom-color:#898989;
36 text-align:center;
37 font-family:CRDHigh;
38 font-size:32px;
39 font-weight:700;
40 color:#a19f9f;
41 padding-top:45px;
42 padding-bottom:28px;
43 margin-top:0;
44 margin-bottom:40px;
45 }
46
47 body h2 {
48 clear:both;
49 border-bottom-style:solid;
50 border-bottom-width:1px;
51 border-bottom-color:#898989;
52 font-family:CRDHigh;
53 font-size:26px;
54 font-weight:400;
55 padding-top:35px;
56 padding-bottom:16px;
57 margin-top:0;
58 margin-bottom:28px;
59 }
60
61 body h3 {
62 clear:both;
63 padding-top:20px;
64 padding-bottom:0px;
65 margin-top:0;
66 margin-bottom:0;
67 font-family:CRDHigh;
68 color:#9a6938;
69 font-size:24px;
70 font-weight:300;
71 }
72
73 body p {
74 clear:both;
75 }
76
77 /* automatically center the 1st paragraph (block) directly after a h1 type header (since that header type is centered as well) */
78 body h1 + p {
79 display:table; /*HACK: "block" would stretch the entire page width */
80 margin-left:auto;
81 margin-right:auto;
82 }
83
84 body a {
85 font-weight:400;
86 color:#1ba1dd;
87 text-decoration:none;
88 outline:none;
89 border:none;
90 }
91
92 body a img {
93 border:none;
94 text-decoration:none;
95 }
96
97 body li img {
98 float:left;
99 }
100
101 body a:hover {
102 text-decoration:underline;
103 }
104
105 body ul {
106 font-weight:inherit;
107 padding:0 0 0 60px;
108 margin:0 0 21px 0;
109 }
110
111 body ul li {
112 list-style-type:disc;
113 padding:4px 0 0 14px;
114 margin:12px 0 0 0;
115 }
116
117
118 body ol {
119 counter-reset:oli;
120 font-weight:inherit;
121 padding:0 0 0 29px;
122 margin:0 0 21px 0;
123 }
124
125 body ol li:before {
126 content:counters(oli,".") ".";
127 counter-increment:oli;
128 font-weight:600;
129 margin:0 20px 0 0;
130 }
131
132 body ol li {
133 list-style-type:none;
134 padding:4px 0 0 14px;
135 margin:12px 0 0 0;
136 }
137
138
139
140 body code, body .code {
141 font-family:CRDCour;
142 color:#404040;
143 white-space:pre;
144 }
145
146 body code {
147 display:inline-block;
148 font-size:15px;
149 margin:0 3px 0px 3px;
150 padding:2px 6px 0px 6px;
151 background-color:#fcf9f9;
152 }
153
154 body > code {
155 display:block;
156 font-size:15px;
157 margin:0 37px 0 37px;
158 padding:2px 6px 0px 6px;
159 background-color:#fcf9f9;
160 }
161
162 body ul.code {
163 list-style:outside none none;
164 counter-reset:codeline;
165 font-size:14px;
166 font-weight:normal;
167 line-height:1.1;
168 margin:0 0 0 0;
169 padding:8px 0px 8px 0px;
170 }
171
172 body .code li {
173 display:block;
174 list-style-type:none;
175 white-space:pre-wrap;
176 border-left:32px solid #f9f3f3;
177 text-indent:-30px;
178 background-color:#fcf9f9;
179 margin:0 0 0 0;
180 padding:0 0 0 0;
181 }
182
183 body .code li:first-child {
184 padding-top:6px;
185 }
186
187 body .code li:last-child {
188 padding-bottom:3px;
189 }
190
191 body .code li:before {
192 display:inline-block;
193 white-space:pre;
194 content:counter(codeline,decimal) ". ";
195 counter-increment:codeline;
196 min-width:38px;
197 text-align:right;
198 color:#c9c9c9;
199 }
200
201 body .code .k, body code .k { /*keyword*/
202 font-weight:bold;
203 color:black;
204 }
205
206 body .code .n, body code .n { /*number*/
207 color:#c4950c;
208 }
209
210 body .code .i, body code .i { /*identifier (function name)*/
211 /*color:#0c4fc4;*/
212 color:#1ba1dd;
213 }
214
215 body .code .a, body code .a { /*array variable*/
216 color:#790cc4;
217 /*color:black;*/
218 }
219
220 body .code .c, body code .c { /*characters*/
221 color:#c40c0c;
222 }
223
224 body .code .s, body code .s { /*string variable*/
225 /*color:#9a693c;*/
226 /*color:black;*/
227 color:#790cc4;
228 }
229
230 body .code .v, body code .v { /*integer variable*/
231 /*color:black;*/
232 color:#790cc4;
233 }
234
235 body .code .h, body code .h { /*event handler*/
236 font-weight:bold;
237 color:#07c0cf;
238 }
239
240 body .code .q, body code .q { /*comment*/
241 color:#9c9c9c;
242 font-style:italic;
243 }
244
245 body .code .p, body code .p { /*preprocessor statements*/
246 /*color:#87b1a8;*/
247 color:#2f8a33;
248 /*font-style:italic;*/
249 font-weight:normal;
250 }
251
252 body .code .m, body code .m { /* metaphor (natural language text used as pseudo code) */
253 background-color:#ddf4fd;
254 font-size:14px;
255 color:black;
256 font-weight:normal;
257 border:solid 1px #73a3ab;
258 -webkit-border-radius: 10px;
259 -moz-border-radius: 10px;
260 border-radius: 10px;
261 margin:0 0 0 0;
262 padding:2px 4px 0px 4px;
263 }
264
265 body table {
266 margin:20px 37px 20px 37px;
267 padding:0 0 0 0;
268 /*background-color:red;*/
269 border:none;
270 border-collapse:collapse;
271 }
272
273 body tr {
274 padding:0 0 0 0;
275 margin:0 0 0 0;
276 }
277
278 body th {
279 background-color:#e0e0ff;
280 padding:0px 8px 0px 8px;
281 margin:0 0 0 0;
282 border:3px solid white;
283 font-size:16px;
284 font-weight:600;
285 }
286
287 body td {
288 background-color:#f9f7f7;
289 padding:4px 8px 4px 8px;
290 margin:0 0 0 0;
291 border:3px solid white;
292 font-size:16px;
293 font-weight:300;
294 line-height:1.2;
295 }
296
297 body table a {
298 font-weight:400;
299 }
300
301 body note:before {
302 white-space:pre-wrap;
303 content:'NOTE: ';
304 font-weight:500;
305 }
306
307 body note.important:before {
308 white-space:pre-wrap;
309 content:'IMPORTANT: ';
310 font-weight:500;
311 }
312
313 body note {
314 display:table; /*HACK: "block" would stretch the entire page width */
315 background-color:#ede8e8;
316 border-top:none;
317 border-right:none;
318 border-bottom:none;
319 border-left:solid 10px #898989;
320 margin: 24px auto 27px 43px;
321 padding: 15px 18px 15px 18px;
322 max-width: -webkit-calc(100% - 145px);
323 max-width: -moz-calc(100% - 145px);
324 max-width: -o-calc(100% - 145px);
325 max-width: calc(100% - 145px);
326 }
327
328 body td > note {
329 display:block; /*HACK: override "table" default value assigned above in the context of a table cell, otherwise padding will be ignored */
330 }
331
332 body note.important {
333 border-left:solid 10px #ff4141;
334 }
335
336 body > img, example > img {
337 display:block;
338 clear:both;
339 max-width:100%;
340 margin-left:auto;
341 margin-right:auto;
342 /*border:solid 1px #8e8e8e;*/
343 padding-top:25px;
344 border:none;
345 }
346
347 body p img {
348 display:inline-block;
349 float:left;
350 margin:4px 20px 19px 0px;
351 padding:0 0 0 0;
352 /*border:solid 1px #8e8e8e;*/
353 border:none;
354 max-width:99%;
355 }
356
357 body div.imgcptn {
358 display:block;
359 width:100%;
360 text-align:center;
361 font-weight:200;
362 color:#999999;
363 font-size:16px;
364 font-style:italic;
365 margin: 8px 0 16px 0;
366 }
367
368 body example:before {
369 display:block;
370 position:relative; top:-5px; left:-32px;
371 content:'Example';
372 font-weight:500;
373 color:white;
374 border:none;
375 margin:0;
376 padding:0;
377 width:100px;
378 background-color:#dedede;
379 /* -moz-transform: rotate(30deg);
380 -ms-transform: rotate(30deg);
381 -o-transform: rotate(30deg);
382 -webkit-transform: rotate(30deg);
383 transform: rotate(90deg);
384 transform-origin: 0% 50%;*/
385 text-align:center;
386 }
387
388 body example {
389 display:inline-block;
390
391 width: -webkit-calc(100% - 80px);
392 width: -moz-calc(100% - 80px);
393 width: -o-calc(100% - 80px);
394 width: calc(100% - 80px);
395
396 border-top:solid 1px #e5e5e5;
397 border-right:solid 18px #dedede;
398 border-bottom:solid 1px #e5e5e5;
399 border-left:solid 18px #dedede;
400 margin:0px, 20px, 0px, 20px;
401 padding:5px 15px 8px 24px;
402 }
403
404 body dir {
405 display:block;
406 list-style-type:none;
407 background-image:url('../pix/folder.png');
408 background-repeat:no-repeat;
409 background-position:2px top;
410 padding:0px;
411 margin:0px;
412 font-family:CRDCour;
413 font-size:15px;
414 color:#000000;
415 }
416
417 body > dir, example > dir {
418 padding-left:66px;
419 background-position:36px top;
420 }
421
422 body dir > * {
423 padding-top:2px;
424 padding-bottom:2px;
425 padding-left:31px;
426 }
427
428 body dir file {
429 display:block;
430 list-style-type:none;
431 background-image:url('../pix/file.png');
432 background-repeat:no-repeat;
433 background-position:2px top;
434 font-family:CRDCour;
435 font-size:15px;
436 color:#6f6f6f;
437 }

  ViewVC Help
Powered by ViewVC