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

Annotation of /doc/tmpl/css/preview.css

Parent Directory Parent Directory | Revision Log Revision Log

Revision 3905 - (hide annotations) (download) (as text)
Sun May 16 11:11:11 2021 UTC (2 years, 11 months ago) by schoenebeck
File MIME type: text/css
File size: 8748 byte(s) 
* Site Template: support NKSP "patch" qualifier keyword.
1 schoenebeck 2737 /*
2     CrudeDoc CSS Style (for previewing an article on a local machine)
3 schoenebeck 3905 Copyright (c) 2015 - 2021 Christian Schoenebeck. All rights reserved.
4 schoenebeck 2737 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 schoenebeck 2784 body p {
74     clear:both;
75     }
76    
77 schoenebeck 2961 /* 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 schoenebeck 2737 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 schoenebeck 2831 body li img {
98     float:left;
99     }
100    
101 schoenebeck 2737 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 schoenebeck 3905 body .code .ql, body code .ql { /*qualifier keyword*/
207     font-weight:bold;
208     color:#ff4ff3;
209     }
210    
211 schoenebeck 2737 body .code .n, body code .n { /*number*/
212     color:#c4950c;
213     }
214    
215 schoenebeck 3599 body .code .ut, body code .ut { /*std measuring unit type*/
216     color:#50bc00;
217     }
218    
219     body .code .up, body code .up { /*metric prefix of unit*/
220     color:#000000;
221     }
222    
223 schoenebeck 2737 body .code .i, body code .i { /*identifier (function name)*/
224     /*color:#0c4fc4;*/
225     color:#1ba1dd;
226     }
227    
228     body .code .a, body code .a { /*array variable*/
229     color:#790cc4;
230     /*color:black;*/
231     }
232    
233     body .code .c, body code .c { /*characters*/
234     color:#c40c0c;
235     }
236    
237     body .code .s, body code .s { /*string variable*/
238     /*color:#9a693c;*/
239     /*color:black;*/
240     color:#790cc4;
241     }
242    
243     body .code .v, body code .v { /*integer variable*/
244     /*color:black;*/
245     color:#790cc4;
246     }
247    
248     body .code .h, body code .h { /*event handler*/
249     font-weight:bold;
250     color:#07c0cf;
251     }
252    
253     body .code .q, body code .q { /*comment*/
254     color:#9c9c9c;
255     font-style:italic;
256     }
257    
258     body .code .p, body code .p { /*preprocessor statements*/
259     /*color:#87b1a8;*/
260     color:#2f8a33;
261     /*font-style:italic;*/
262     font-weight:normal;
263     }
264    
265     body .code .m, body code .m { /* metaphor (natural language text used as pseudo code) */
266     background-color:#ddf4fd;
267     font-size:14px;
268     color:black;
269     font-weight:normal;
270     border:solid 1px #73a3ab;
271     -webkit-border-radius: 10px;
272     -moz-border-radius: 10px;
273     border-radius: 10px;
274     margin:0 0 0 0;
275     padding:2px 4px 0px 4px;
276     }
277    
278     body table {
279     margin:20px 37px 20px 37px;
280     padding:0 0 0 0;
281     /*background-color:red;*/
282     border:none;
283     border-collapse:collapse;
284     }
285    
286     body tr {
287     padding:0 0 0 0;
288     margin:0 0 0 0;
289     }
290    
291     body th {
292 schoenebeck 3090 background-color:#e0e0ff;
293 schoenebeck 2737 padding:0px 8px 0px 8px;
294     margin:0 0 0 0;
295     border:3px solid white;
296     font-size:16px;
297     font-weight:600;
298     }
299    
300     body td {
301     background-color:#f9f7f7;
302     padding:4px 8px 4px 8px;
303     margin:0 0 0 0;
304     border:3px solid white;
305     font-size:16px;
306     font-weight:300;
307     line-height:1.2;
308     }
309    
310     body table a {
311     font-weight:400;
312     }
313    
314     body note:before {
315     white-space:pre-wrap;
316     content:'NOTE: ';
317     font-weight:500;
318     }
319    
320     body note.important:before {
321     white-space:pre-wrap;
322     content:'IMPORTANT: ';
323     font-weight:500;
324     }
325    
326 schoenebeck 3599 body note.remark:before {
327     white-space:pre-wrap;
328     content:'Remark: ';
329     font-weight:500;
330     }
331    
332 schoenebeck 2737 body note {
333     display:table; /*HACK: "block" would stretch the entire page width */
334     background-color:#ede8e8;
335     border-top:none;
336     border-right:none;
337     border-bottom:none;
338     border-left:solid 10px #898989;
339     margin: 24px auto 27px 43px;
340     padding: 15px 18px 15px 18px;
341     max-width: -webkit-calc(100% - 145px);
342     max-width: -moz-calc(100% - 145px);
343     max-width: -o-calc(100% - 145px);
344     max-width: calc(100% - 145px);
345     }
346    
347 schoenebeck 2959 body td > note {
348     display:block; /*HACK: override "table" default value assigned above in the context of a table cell, otherwise padding will be ignored */
349     }
350    
351 schoenebeck 2737 body note.important {
352     border-left:solid 10px #ff4141;
353     }
354    
355     body > img, example > img {
356     display:block;
357     clear:both;
358     max-width:100%;
359     margin-left:auto;
360     margin-right:auto;
361     /*border:solid 1px #8e8e8e;*/
362     padding-top:25px;
363     border:none;
364     }
365    
366     body p img {
367     display:inline-block;
368     float:left;
369 schoenebeck 2821 margin:4px 20px 19px 0px;
370 schoenebeck 2737 padding:0 0 0 0;
371     /*border:solid 1px #8e8e8e;*/
372     border:none;
373     max-width:99%;
374     }
375    
376     body div.imgcptn {
377     display:block;
378     width:100%;
379     text-align:center;
380     font-weight:200;
381     color:#999999;
382     font-size:16px;
383     font-style:italic;
384     margin: 8px 0 16px 0;
385     }
386    
387     body example:before {
388     display:block;
389     position:relative; top:-5px; left:-32px;
390     content:'Example';
391     font-weight:500;
392     color:white;
393     border:none;
394     margin:0;
395     padding:0;
396     width:100px;
397     background-color:#dedede;
398     /* -moz-transform: rotate(30deg);
399     -ms-transform: rotate(30deg);
400     -o-transform: rotate(30deg);
401     -webkit-transform: rotate(30deg);
402     transform: rotate(90deg);
403     transform-origin: 0% 50%;*/
404     text-align:center;
405     }
406    
407     body example {
408     display:inline-block;
409    
410     width: -webkit-calc(100% - 80px);
411     width: -moz-calc(100% - 80px);
412     width: -o-calc(100% - 80px);
413     width: calc(100% - 80px);
414    
415     border-top:solid 1px #e5e5e5;
416     border-right:solid 18px #dedede;
417     border-bottom:solid 1px #e5e5e5;
418     border-left:solid 18px #dedede;
419     margin:0px, 20px, 0px, 20px;
420     padding:5px 15px 8px 24px;
421     }
422 schoenebeck 2738
423     body dir {
424     display:block;
425     list-style-type:none;
426     background-image:url('../pix/folder.png');
427     background-repeat:no-repeat;
428     background-position:2px top;
429     padding:0px;
430     margin:0px;
431     font-family:CRDCour;
432 schoenebeck 2740 font-size:15px;
433 schoenebeck 2738 color:#000000;
434     }
435    
436 schoenebeck 2749 body > dir, example > dir {
437 schoenebeck 2738 padding-left:66px;
438     background-position:36px top;
439     }
440    
441     body dir > * {
442     padding-top:2px;
443     padding-bottom:2px;
444     padding-left:31px;
445     }
446    
447     body dir file {
448     display:block;
449     list-style-type:none;
450     background-image:url('../pix/file.png');
451     background-repeat:no-repeat;
452     background-position:2px top;
453     font-family:CRDCour;
454 schoenebeck 2740 font-size:15px;
455 schoenebeck 2738 color:#6f6f6f;
456     }
  ViewVC Help
Powered by ViewVC