/[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.26 - (hide annotations) (download) (as text)
Thu Aug 14 15:50:42 2008 UTC (15 years, 9 months ago) by wakaba
Branch: MAIN
Changes since 1.25: +124 -51 lines
File MIME type: text/css
++ ChangeLog	14 Aug 2008 15:42:17 -0000
	* cc.cgi: Generate result summary sections for
	each subdocument.

	* error-description-source.xml: New entries to
	support localization of result sections.

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

	* cc-style.css: Support for revised version of result summary
	section styling.

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

++ html/WebHACC/Language/ChangeLog	14 Aug 2008 15:50:38 -0000
	* Base.pm, CSS.pm, CacheManifest.pm, DOM.pm, Default.pm,
	HTML.pm, WebIDL.pm, XML.pm: Set |layer_applicable|
	or |layer_uncertain| flag appropriately.

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

++ html/WebHACC/ChangeLog	14 Aug 2008 15:48:38 -0000
	* Input.pm: Methods |generate_transfer_sections|
	and |generate_http_header_section| are moved to HTTP
	subclass, since they are irrelevant to non-HTTP inputs.
	(_get_document): Forbidden host error was not represented
	by WebHACC::Input::Error subclass.
	(WebHACC::Input::Error generate_transfer_sections): Use
	role name for the section.
	(WebHACC::Input::HTTPError generate_transfer_sections): New method
	added, since the main superclass, i.e. WebHACC::Input::Error,
	no longer dumps HTTP headers due to the change mentioned above.

	* Output.pm (start_section): New roles "transfer-errors" and "result".

	* Result.pm (parent_result): New attribute.
	(layer_applicable, layer_uncertain): New methods to set flags.
	(add_error): Natural language strings are now handled
	by the catalog mechanism.  Use new scoring mechanism.
	(generate_result_section): Use catalog for all natural
	language strings.  Table generation is now much more sophiscated
	that it was.  Support for subdoc result summary.  Support
	for the column of the number of informational message.  Support
	for "N/A" status.

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 wakaba 1.26 margin: 0 0 0 -1em;
34 wakaba 1.25 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 wakaba 1.26 /* Result paragraph */
509 wakaba 1.25
510 wakaba 1.26 .result-para {
511 wakaba 1.25 margin-left: 20px;
512     padding-left: 40px;
513     min-height: 32px;
514 wakaba 1.26 background-color: none;
515 wakaba 1.25 background-position: center left;
516     background-repeat: no-repeat;
517 wakaba 1.26 padding-top: 0.2em;
518     padding-bottom: 0.2em;
519     padding-right: 1em;
520     }
521    
522     .result-para.no-error {
523     background-image: url(ok);
524     background-color: #ddffdd;
525     color: black;
526 wakaba 1.25 }
527 wakaba 1.26
528     .result-para.must-errors,
529     .result-para.should-errors {
530 wakaba 1.25 background-image: url(large-stop);
531 wakaba 1.26 /* TODO: Use different image for should-errors */
532 wakaba 1.25 }
533    
534 wakaba 1.26 /* See "Result summary table" for background color of
535     .must-errors and .should-errors */
536    
537     .result-para.uncertain {
538     background-color: #e1e1ff;
539     color: black;
540     background-image: none;
541 wakaba 1.25 }
542    
543 wakaba 1.26 /* Result summary table */
544 wakaba 1.25
545 wakaba 1.26 .result table {
546     margin-left: auto;
547     margin-right: auto;
548     border: 4px solid #800080;
549     border-collapse: collapse;
550 wakaba 1.25 }
551    
552 wakaba 1.26 .result tbody,
553     .result colgroup {
554     border: 4px solid #800080;
555 wakaba 1.25 }
556    
557 wakaba 1.26 .result tbody > tr:first-child > th {
558     border-bottom-width: 2px;
559 wakaba 1.25 }
560 wakaba 1.26
561     .result tr.total > * {
562     border-top-width: 2px;
563 wakaba 1.25 }
564    
565 wakaba 1.26 .result td.subrow {
566     border-right-width: 2px;
567 wakaba 1.25 }
568    
569 wakaba 1.26 .result th,
570     .result td.subrow,
571     .result .uncertain td.subrow {
572 wakaba 1.25 background-color: #fff0f0;
573     color: black;
574     }
575    
576 wakaba 1.26 .result th,
577     .result td {
578 wakaba 1.25 border: 1px solid #800080;
579     padding: 0.2em 0.5em;
580     text-align: center;
581     empty-cells: show;
582     }
583    
584 wakaba 1.26 .result td.subrow {
585     border-top-style: hidden;
586     }
587    
588     .result .uncertain td {
589 wakaba 1.25 background-color: #e1e1ff;
590     color: black;
591     }
592    
593 wakaba 1.26 .result .must-errors,
594     .result .uncertain .must-errors {
595 wakaba 1.25 background-color: #ffcece;
596     color: black;
597     }
598    
599 wakaba 1.26 .result .should-errors,
600     .result .uncertain .should-errors {
601 wakaba 1.25 background-color: #e1e1ff;
602     color: black;
603     }
604    
605 wakaba 1.26 .result tfoot .total strong {
606     font-size: 150%;
607     }
608    
609     .result thead > tr > th:first-child + th {
610     background-image: url(error);
611     background-repeat: no-repeat;
612     background-position: 2px center;
613     padding-left: 20px; /* error.png's width is 16px */
614     }
615    
616     .result thead > tr > th:first-child + th + th {
617     background-image: url(error); /* TODO: SHOULD image */
618     background-repeat: no-repeat;
619     background-position: 2px center;
620     padding-left: 20px; /* error.png's width is 16px */
621     }
622    
623     .result thead > tr > th:first-child + th + th + th {
624     background-image: url(alert);
625     background-repeat: no-repeat;
626     background-position: 2px center;
627     padding-left: 20px; /* alert.png's width is 16px */
628     }
629    
630     .result thead > tr > th:first-child + th + th + th + th {
631     background-image: url(info);
632     background-repeat: no-repeat;
633     background-position: 2px center;
634     padding-left: 20px; /* info.png's width is 16px */
635     }
636    
637     .result thead + tbody > tr:first-child + tr > th {
638     background-image: url(icons/transfer-16);
639     background-repeat: no-repeat;
640     background-position: 2px center;
641     padding-left: 20px; /* background-image's width is 16px */
642     }
643    
644     .result thead + tbody > tr:first-child + tr + tr > th {
645     background-image: url(icons/char-16); /* TODO: new image */
646     background-repeat: no-repeat;
647     background-position: 2px center;
648     padding-left: 20px; /* background-image's width is 16px */
649     }
650    
651     .result thead + tbody > tr:first-child + tr + tr + tr > th {
652     background-image: url(icons/char-16);
653     background-repeat: no-repeat;
654     background-position: 2px center;
655     padding-left: 20px; /* background-image's width is 16px */
656     }
657    
658     .result thead + tbody > tr:first-child + tr + tr + tr + tr > th {
659     background-image: url(icons/syntax-16);
660     background-repeat: no-repeat;
661     background-position: 2px center;
662     padding-left: 20px; /* background-image's width is 16px */
663 wakaba 1.25 }
664    
665 wakaba 1.26 .result thead + tbody > tr:first-child + tr + tr + tr + tr + tr > th {
666     background-image: url(icons/structure-16);
667     background-repeat: no-repeat;
668     background-position: 2px center;
669     padding-left: 20px; /* background-image's width is 16px */
670 wakaba 1.25 }
671    
672 wakaba 1.26 .result thead + tbody > tr:first-child + tr + tr + tr + tr + tr + tr > th {
673     background-image: url(icons/semantics-16);
674     background-repeat: no-repeat;
675     background-position: 2px center;
676     padding-left: 20px; /* background-image's width is 16px */
677     }
678 wakaba 1.25
679 wakaba 1.1 /*
680    
681 wakaba 1.19 Copyright 2007-2008 Wakaba <w@suika.fam.cx>.
682 wakaba 1.1
683     This library is free software; you can redistribute it
684     and/or modify it under the same terms as Perl itself.
685    
686 wakaba 1.26 $Date: 2008/08/14 11:58:32 $
687 wakaba 1.1
688     */

admin@suikawiki.org
ViewVC Help
Powered by ViewVC 1.1.24