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

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

Parent Directory Parent Directory | Revision Log Revision Log | View Patch Patch

revision 1.1 by wakaba, Wed Jun 27 13:30:15 2007 UTC revision 1.26 by wakaba, Thu Aug 14 15:50:42 2008 UTC
# Line 1  Line 1 
1  @import '/www/style/html/xoxo.css';  @import '/www/style/html/xoxo.css';
2    
3  q {  .section {
4    white-space: pre;    display: block;
5    white-space: -moz-pre-wrap;    margin: 1em;
6    white-space: pre-wrap;    border: #800080 1px solid;
7      padding: 0.5em 1em;
8    }
9    
10    dt, strong, th {
11      font-weight: bolder;
12      font-family: sans-serif;
13    }
14    dt:after {
15      content: ":";
16    }
17    
18    h1 {
19      font-weight: bolder;
20      font-family: sans-serif;
21      font-size: 180%;
22    }
23    
24    h2, h3, h4, h5, h6, th {
25      font-weight: bolder;
26      font-family: sans-serif;
27      font-size: 100%;
28      background-color: #fff0f0;
29      color: black;
30    }
31    
32    h2, h3, h4, h5, h6 {
33      margin: 0 0 0 -1em;
34      padding: 0.3em 1em;
35    }
36    
37    .tree-text q, .tree-cdata q, .tree-comment q {
38      display: block;
39  }  }
40    
41    q:before, q:after {
42      content: "";
43    }
44    
45    #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    #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    
80    
81    
82  #nav-items {  #nav-items {
83    display: block;    display: block;
84    position: fixed;    position: fixed;
# Line 36  q { Line 109  q {
109    text-decoration: none;    text-decoration: none;
110  }  }
111    
112    body[data-scripted] #nav-items {
113      display: none;
114    }
115    
116    img {
117      border-style: none;
118    }
119    
120    code {
121      font-family: "Courier New", "Courier", monospace;
122      letter-spacing: 0.1em;
123      background-color: transparent;
124      color: orangered;
125      white-space: -moz-pre-wrap;
126      white-space: pre-wrap;
127    }
128    
129    .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    .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    /* 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    mark {
230      background-color: #ffff4d;
231    }
232    
233    /* Tab navigation */
234    
235    body[data-scripted] > h1,
236    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      float: left;
243      font-size: 100%;
244      margin: 0;
245      padding: 0 1em;
246    }
247    
248    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      margin: 0 1em 0 -1em;
255      padding: 0.3em 1em;
256      border: thin hidden;
257      background-color: #fff0f0;
258      color: black;
259    }
260    
261    nav {
262      display: block;
263      z-index: 100;
264    }
265    
266    .section nav {
267      margin-left: 1em;
268    }
269    
270    nav ul {
271      margin: 0;
272      padding: 1em 0 0 0;
273    }
274    
275    #input nav ul,
276    .section.subdoc nav ul {
277      padding-top: 0;
278    }
279    
280    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    body[data-scripted] > .section,
308    body[data-scripted] > #input > .section,
309    body[data-scripted] .section.subdoc > .section {
310      position: absolute;
311      top: 100px; /* h1 > img's height is 90px */
312      bottom: 0;
313      left: 0;
314      right: 0;
315      min-height: 10em;
316      overflow: auto;
317    }
318    
319    body[data-scripted] > #input > .section,
320    body[data-scripted] .section.subdoc > .section {
321      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    /* 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    /* Result paragraph */
509    
510    .result-para {
511      margin-left: 20px;
512      padding-left: 40px;
513      min-height: 32px;
514      background-color: none;
515      background-position: center left;
516      background-repeat: no-repeat;
517      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    }
527    
528    .result-para.must-errors,
529    .result-para.should-errors {
530      background-image: url(large-stop);
531      /* TODO: Use different image for should-errors */
532    }
533    
534    /* 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    }
542    
543    /* Result summary table */
544    
545    .result table {
546      margin-left: auto;
547      margin-right: auto;
548      border: 4px solid #800080;
549      border-collapse: collapse;
550    }
551    
552    .result tbody,
553    .result colgroup {
554      border: 4px solid #800080;
555    }
556    
557    .result tbody > tr:first-child > th {
558      border-bottom-width: 2px;
559    }
560    
561    .result tr.total > * {
562      border-top-width: 2px;
563    }
564    
565    .result td.subrow {
566      border-right-width: 2px;
567    }
568    
569    .result th,
570    .result td.subrow,
571    .result .uncertain td.subrow {
572      background-color: #fff0f0;
573      color: black;
574    }
575    
576    .result th,
577    .result td {
578      border: 1px solid #800080;
579      padding: 0.2em 0.5em;
580      text-align: center;
581      empty-cells: show;
582    }
583    
584    .result td.subrow {
585      border-top-style: hidden;
586    }
587    
588    .result .uncertain td {
589      background-color: #e1e1ff;
590      color: black;
591    }
592    
593    .result .must-errors,
594    .result .uncertain .must-errors {
595      background-color: #ffcece;
596      color: black;
597    }
598    
599    .result .should-errors,
600    .result .uncertain .should-errors {
601      background-color: #e1e1ff;
602      color: black;
603    }
604    
605    .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    }
664    
665    .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    }
671    
672    .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    
679  /*  /*
680    
681  Copyright 2007 Wakaba <w@suika.fam.cx>  Copyright 2007-2008 Wakaba <w@suika.fam.cx>.
682    
683  This library is free software; you can redistribute it  This library is free software; you can redistribute it
684  and/or modify it under the same terms as Perl itself.  and/or modify it under the same terms as Perl itself.
Legend:
Removed from v.1.1  
changed lines
  Added in v.1.26
admin@suikawiki.org
 ViewVC Help
Powered by ViewVC 1.1.24