/[suikacvs]/test/html-webhacc/cc-style.css
Suika

Contents of /test/html-webhacc/cc-style.css

Parent Directory Parent Directory | Revision Log Revision Log


Revision 1.25 - (hide annotations) (download) (as text)
Thu Aug 14 11:58:32 2008 UTC (16 years, 3 months ago) by wakaba
Branch: MAIN
Changes since 1.24: +257 -210 lines
File MIME type: text/css
++ ChangeLog	14 Aug 2008 11:57:12 -0000
	* cc-style.css: Revised such that subdocument check results
	do not look stupid and that new class name rules
	for level-* and layer-* is reflected by icons.

2008-08-14  Wakaba  <wakaba@suika.fam.cx>

++ html/WebHACC/Language/ChangeLog	14 Aug 2008 11:58:26 -0000
	* Base.pm: Use "role" for source code sections.

2008-08-14  Wakaba  <wakaba@suika.fam.cx>

++ html/WebHACC/ChangeLog	14 Aug 2008 11:58:10 -0000
	* Output.pm (start_section): Roles set class="", too.  New "source"
	role for source code sections.

2008-08-14  Wakaba  <wakaba@suika.fam.cx>

1 wakaba 1.1 @import '/www/style/html/xoxo.css';
2    
3 wakaba 1.2 .section {
4     display: block;
5     margin: 1em;
6     border: #800080 1px solid;
7     padding: 0.5em 1em;
8     }
9    
10 wakaba 1.10 dt, strong, th {
11 wakaba 1.2 font-weight: bolder;
12     font-family: sans-serif;
13     }
14     dt:after {
15     content: ":";
16     }
17    
18 wakaba 1.5 h1 {
19     font-weight: bolder;
20     font-family: sans-serif;
21     font-size: 180%;
22     }
23    
24 wakaba 1.25 h2, h3, h4, h5, h6, th {
25 wakaba 1.5 font-weight: bolder;
26     font-family: sans-serif;
27     font-size: 100%;
28     background-color: #fff0f0;
29     color: black;
30     }
31    
32 wakaba 1.25 h2, h3, h4, h5, h6 {
33     margin: 0 -1em;
34     padding: 0.3em 1em;
35     }
36    
37 wakaba 1.2 .tree-text q, .tree-cdata q, .tree-comment q {
38     display: block;
39     }
40    
41     q:before, q:after {
42     content: "";
43     }
44    
45 wakaba 1.4 #parse-errors dl:empty:before {
46     content: "This document has no parse error.";
47     font-style: italic;
48     }
49    
50     #document-errors dl:empty:before {
51     content: "This document has no document error.";
52     font-style: italic;
53     }
54    
55 wakaba 1.11 #dump-manifest tbody:empty {
56     display: table-caption;
57     caption-side: bottom;
58     }
59    
60     #dump-manifest tbody:empty::after {
61     content: "This cache manifest contains no oppotunistic caching namespace.";
62     font-style: italic;
63     }
64    
65     #dump-manifest dt:first-child + dt::before,
66     #dump-manifest dt:last-child::after {
67     display: block;
68     content: "This cache manifest contains no explicit entry.";
69     margin-left: 2.5em;
70     font-style: italic;
71     font-weight: normal;
72     font-family: serif;
73     }
74    
75     #dump-manifest dt:last-child::after {
76     content: "This cache manifest has an empty online whitelist.";
77     }
78    
79 wakaba 1.5
80 wakaba 1.4
81 wakaba 1.10
82 wakaba 1.1 #nav-items {
83     display: block;
84     position: fixed;
85     top: 0.5em;
86     right: 0.5em;
87     width: auto;
88     height: auto;
89     font-size: 90%;
90     background-color: #f4fff4;
91     color: black;
92     padding: 0;
93     line-height: 1.1;
94     }
95    
96     #nav-items li {
97     display: block;
98     list-style: none;
99     margin: 0;
100     border-style: none;
101     padding: 0;
102     text-align: center;
103     }
104    
105     #nav-items li a[href] {
106     display: block;
107     border-style: none;
108     color: inherit;
109     text-decoration: none;
110     }
111    
112 wakaba 1.22 body[data-scripted] #nav-items {
113     display: none;
114     }
115    
116 wakaba 1.3 img {
117     border-style: none;
118     }
119    
120 wakaba 1.4 code {
121     font-family: "Courier New", "Courier", monospace;
122     letter-spacing: 0.1em;
123     background-color: transparent;
124     color: orangered;
125 wakaba 1.7 white-space: -moz-pre-wrap;
126     white-space: pre-wrap;
127 wakaba 1.4 }
128    
129 wakaba 1.13 .example {
130     background-color: #ececff;
131     }
132    
133     pre.example {
134     margin-left: 1em;
135     margin-right: 1em;
136     padding: 0.2em 0.5em;
137     }
138    
139     .example.bad {
140     background-color: #fff7f7;
141     }
142    
143     code.example.bad {
144     color: inherit;
145     background-color: #ffeeee;
146     }
147    
148     h3 code.example.bad {
149     color: orangered;
150     background-color: transparent;
151     }
152    
153     pre.example::before {
154     content: "Example";
155     display: block;
156     color: #b0b0ff;
157     background-color: transparent;
158     font-weight: bolder;
159     font-family: sans-serif;
160     }
161    
162     pre.example.html::before {
163     content: "HTML Example";
164     }
165    
166     pre.example.xml::before {
167     content: "XML Example";
168     }
169    
170     pre.example.manifest::before {
171     content: "Cache Manifest Example";
172     }
173    
174     pre.example.bad::before {
175     content: "Bad Example";
176     color: #ffc1c1;
177     }
178    
179     pre.example.bad.html::before {
180     content: "HTML Bad Example";
181     }
182    
183     pre.example.bad.xml::before {
184     content: "XML Bad Example";
185     }
186    
187     pre.example.bad.manifest::before {
188     content: "Cache Manifest Bad Example";
189     }
190    
191 wakaba 1.9 .rfc2119 {
192     border-style: none;
193     text-transform: lowercase;
194     font-variant: small-caps;
195     font-style: normal;
196     text-decoration: none;
197     font-weight: normal;
198     font-family: sans-serif;
199     }
200    
201    
202 wakaba 1.11 /* dl.switch from WHATWG specification style sheet */
203    
204     dl.switch {
205     padding-left: 2em;
206     }
207    
208     dl.switch dt {
209     display: block;
210     text-indent: -1.5em;
211     font-weight: bolder;
212     font-family: sans-serif;
213     font-style: normal;
214     }
215    
216     dl.switch dt:before {
217     content: '\21AA';
218     padding: 0 0.5em 0 0;
219     display: inline-block;
220     width: 1em;
221     text-align: right;
222     line-height: 0.5em;
223     }
224    
225     dl.switch dt:after {
226     content: " :";
227     }
228    
229 wakaba 1.19 mark {
230     background-color: #ffff4d;
231     }
232    
233 wakaba 1.22 /* Tab navigation */
234    
235 wakaba 1.23 body[data-scripted] > h1,
236 wakaba 1.24 body[data-scripted] > #input > h2,
237     body[data-scripted] .section.subdoc > h2,
238     body[data-scripted] .section.subdoc > h3,
239     body[data-scripted] .section.subdoc > h4,
240     body[data-scripted] .section.subdoc > h5,
241     body[data-scripted] .section.subdoc > h6 {
242 wakaba 1.22 float: left;
243     font-size: 100%;
244 wakaba 1.23 margin: 0;
245 wakaba 1.22 padding: 0 1em;
246     }
247    
248 wakaba 1.24 body[data-scripted] > #input > h2,
249     body[data-scripted] .section.subdoc > h2,
250     body[data-scripted] .section.subdoc > h3,
251     body[data-scripted] .section.subdoc > h4,
252     body[data-scripted] .section.subdoc > h5,
253     body[data-scripted] .section.subdoc > h6 {
254 wakaba 1.25 margin: 0 1em 0 -1em;
255     padding: 0.3em 1em;
256 wakaba 1.23 border: thin hidden;
257 wakaba 1.25 background-color: #fff0f0;
258     color: black;
259 wakaba 1.23 }
260    
261 wakaba 1.22 nav {
262     display: block;
263 wakaba 1.24 z-index: 100;
264 wakaba 1.22 }
265    
266 wakaba 1.23 .section nav {
267     margin-left: 1em;
268     }
269    
270 wakaba 1.22 nav ul {
271     margin: 0;
272     padding: 1em 0 0 0;
273     }
274    
275 wakaba 1.24 #input nav ul,
276     .section.subdoc nav ul {
277 wakaba 1.23 padding-top: 0;
278     }
279    
280 wakaba 1.22 nav ul li {
281     display: inline;
282     margin: 0;
283     padding: 0 0.3em 0 0;
284     line-height: 2;
285     }
286    
287     nav a {
288     display: inline;
289     padding: 0.1em 0.3em;
290     text-decoration: none;
291     color: inherit;
292     border: thin outset gray;
293     -moz-border-radius: 0.2em;
294     min-width: 4em;
295     text-align: center;
296     }
297    
298     nav [data-active] a {
299     border-style: inset;
300     background-color: #C0C0C0;
301     }
302    
303     .section {
304     clear: both;
305     }
306    
307 wakaba 1.23 body[data-scripted] > .section,
308 wakaba 1.24 body[data-scripted] > #input > .section,
309     body[data-scripted] .section.subdoc > .section {
310 wakaba 1.22 position: absolute;
311 wakaba 1.23 top: 100px; /* h1 > img's height is 90px */
312 wakaba 1.22 bottom: 0;
313     left: 0;
314     right: 0;
315 wakaba 1.23 min-height: 10em;
316 wakaba 1.22 overflow: auto;
317     }
318    
319 wakaba 1.24 body[data-scripted] > #input > .section,
320     body[data-scripted] .section.subdoc > .section {
321 wakaba 1.23 top: 2em;
322     }
323    
324     /* details widgets */
325    
326     .details .legend {
327     font-weight: bolder;
328     }
329    
330     .details .legend:after {
331     content: "...";
332     }
333    
334     .details.open .legend:after,
335     body:not([data-scripted]) .details.default .legend:after {
336     content: ":";
337     }
338    
339     body[data-scripted] .details .legend {
340     cursor: pointer;
341     }
342    
343     body[data-scripted] .details > div {
344     display: none;
345     }
346    
347     /* Data input forms */
348    
349     input[type=url] {
350     width: 90%;
351     min-width: 30em;
352     }
353    
354     textarea {
355     width: 95%;
356     min-width: 30em;
357     height: 20em;
358     }
359    
360 wakaba 1.25 /* Source codes taken from the input document */
361    
362     /* q, */ .source li {
363     white-space: pre;
364     white-space: -moz-pre-wrap;
365     white-space: pre-wrap;
366     }
367    
368     q, .source ol {
369     background-color: #f0f0ff;
370     color: black;
371     line-height: 1.5;
372     }
373    
374     /* Document dumps */
375    
376     .dump > ol {
377     margin-left: 0;
378     padding-left: 0;
379     }
380    
381     .dump > ol > li {
382     /* display: block;
383     list-style: none;
384     margin-left: 0;
385     padding-left: 0; */
386     }
387    
388     .dump > ol /* ol */ {
389     margin-left: 1em;
390     padding-left: 0;
391     }
392    
393     .dump ol /*ol*/ li {
394     margin-left: 0;
395     padding-left: 0.4em;
396     }
397    
398     .dump ul.attributes {
399     margin-left: 3em;
400     padding: 0;
401     }
402    
403     .dump ul.attributes li {
404     display: inline;
405     list-style: none;
406     margin: 0 2em 0 0;
407     padding: 0;
408     text-indent: 0;
409     font-size: 90%;
410     }
411    
412     q:after {
413     content: " "; /* Make white-space-only quotations visible */
414     white-space: pre;
415     }
416    
417     /* Errors */
418    
419     .errors dt {
420     background-image: none;
421     background-position: left center;
422     background-repeat: no-repeat;
423     padding-left: 20px; /* icons/*-16.png */
424     min-height: 16px;
425     }
426    
427     .errors dd {
428     margin-left: 0;
429     padding-left: 60px;
430     min-height: 32px; /* large-*.png files' height */
431     background-position: 20px center;
432     background-repeat: no-repeat;
433     }
434    
435     .level-m, .level-s {
436     background-image: url(large-stop);
437     /* TODO: we need an image for SHOULD-level errors */
438     }
439    
440     .level-w {
441     background-image: url(large-alert);
442     }
443    
444     .level-i {
445     background-image: url(large-info);
446     }
447    
448     .level-u {
449     background-image: none;
450     }
451    
452     dt.level-u {
453     margin: 0.2em 0 0 0;
454     border: red 0.2em solid;
455     border-bottom-style: none;
456     padding-top: 0.2em;
457     padding-right: 0.2em;
458     padding-bottom: 0;
459     }
460    
461     dd.level-u {
462     margin: 0 0 0.2em;
463     border: red 0.2em solid;
464     border-top-style: none;
465     padding-right: 0.2em;
466     padding-bottom: 0.2em;
467     padding-top: 0;
468     }
469    
470     dt.layer-transfer {
471     background-image: url(icons/transfer-16);
472     }
473    
474     dt.layer-encode,
475     dt.layer-charset {
476     background-image: url(icons/char-16);
477     /* TODO: We need different images for these layers */
478     }
479    
480     dt.layer-syntax {
481     background-image: url(icons/syntax-16);
482     }
483    
484     dt.layer-structure {
485     background-image: url(icons/structure-16);
486     }
487    
488     dt.layer-semantics {
489     background-image: url(icons/semantics-16);
490     }
491    
492     /* List of IDs */
493    
494     #identifiers dd,
495     [id$="-identifiers"] dd {
496     margin-left: 20px;
497     padding-left: 20px;
498     min-height: 20px;
499     }
500    
501     #identifiers dd + dd,
502     [id$="-identifiers"] dd + dd {
503     background-image: url(error);
504     background-position: center left;
505     background-repeat: no-repeat;
506     }
507    
508    
509    
510    
511    
512    
513     #error-description h3, #result-para {
514     margin-left: 20px;
515     padding-left: 40px;
516     min-height: 32px;
517     background-image: url(large-stop);
518     background-position: center left;
519     background-repeat: no-repeat;
520     }
521     #levels-table tbody th:first-child {
522     padding-left: 42px;
523     min-height: 32px;
524     background-image: url(large-stop);
525     background-position: 5px center;
526     background-repeat: no-repeat;
527     text-align: left;
528     }
529    
530     #error-description h3 {
531     margin-left: 1em;
532     margin-right: 1em;
533     }
534    
535    
536     .format-charset, .tokenizer-error, .parse-error {
537     background-image: url(icons/syntax-16);
538     background-position: left center;
539     background-repeat: no-repeat;
540     padding-left: 20px;
541     }
542    
543     .content-model-error, .attribute-error, .attribute-value-error,
544     .attribute-value-warning, .table-model-error {
545     background-image: url(icons/structure-16);
546     background-position: left center;
547     background-repeat: no-repeat;
548     padding-left: 20px;
549     }
550    
551     #result-para.PASS {
552     background-image: url(ok);
553     }
554     #result-summary table {
555     margin-left: auto;
556     margin-right: auto;
557     border: 3px solid #800080;
558     border-collapse: collapse;
559     }
560    
561     #result-summary tbody, colgroup {
562     border: 3px solid #800080;
563     }
564    
565     #result-summary th {
566     background-color: #fff0f0;
567     color: black;
568     }
569    
570     #result-summary th, #result-summary td {
571     border: 1px solid #800080;
572     padding: 0.2em 0.5em;
573     text-align: center;
574     empty-cells: show;
575     }
576    
577     .uncertain td, p.uncertain,
578     #level-u, #level-u th {
579     background-color: #e1e1ff;
580     color: black;
581     }
582    
583     .FAIL, .uncertain td.FAIL, #level-m, #level-m th {
584     background-color: #ffcece;
585     color: black;
586     }
587    
588     .SEE-RESULT, .uncertain td.SEE-RESULT, #level-s, #level-s th {
589     background-color: #e1e1ff;
590     color: black;
591     }
592    
593     .PASS, #level-w, #level-w th,
594     #level-i, #level-i th {
595     background-color: #ddffdd;
596     color: black;
597     }
598    
599     #result-para {
600     padding-top: 0.2em;
601     padding-bottom: 0.2em;
602     padding-right: 1em;
603     }
604    
605    
606 wakaba 1.1 /*
607    
608 wakaba 1.19 Copyright 2007-2008 Wakaba <w@suika.fam.cx>.
609 wakaba 1.1
610     This library is free software; you can redistribute it
611     and/or modify it under the same terms as Perl itself.
612    
613 wakaba 1.25 $Date: 2008/08/14 09:16:52 $
614 wakaba 1.1
615     */

admin@suikawiki.org
ViewVC Help
Powered by ViewVC 1.1.24