/[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.27 by wakaba, Fri Aug 15 05:53:23 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    .section[id$=transfer-errors] h2,
38    .section[id$=transfer-errors] h3,
39    .section[id$=transfer-errors] h4,
40    .section[id$=transfer-errors] h5,
41    .section[id$=transfer-errors] h6 {
42      padding-left: 40px;
43      background-image: url(icons/transfer-32);
44      background-repeat: no-repeat;
45      background-position: 6px center;
46      min-height: 32px;
47    }
48    
49    .section[id$=parse-errors] h2,
50    .section[id$=parse-errors] h3,
51    .section[id$=parse-errors] h4,
52    .section[id$=parse-errors] h5,
53    .section[id$=parse-errors] h6 {
54      padding-left: 40px;
55      background-image: url(icons/syntax-32);
56      background-repeat: no-repeat;
57      background-position: 6px center;
58      min-height: 32px;
59  }  }
60    
61    .section[id$=document-errors] h2,
62    .section[id$=document-errors] h3,
63    .section[id$=document-errors] h4,
64    .section[id$=document-errors] h5,
65    .section[id$=document-errors] h6 {
66      padding-left: 40px;
67      background-image: url(icons/structure-32);
68      background-repeat: no-repeat;
69      background-position: 6px center;
70      min-height: 32px;
71    }
72    
73    .tree-text q, .tree-cdata q, .tree-comment q {
74      display: block;
75    }
76    
77    q:before, q:after {
78      content: "";
79    }
80    
81    #dump-manifest tbody:empty {
82      display: table-caption;
83      caption-side: bottom;
84    }
85    
86    #dump-manifest tbody:empty::after {
87      content: "This cache manifest contains no oppotunistic caching namespace.";
88      font-style: italic;
89    }
90    
91    #dump-manifest dt:first-child + dt::before,
92    #dump-manifest dt:last-child::after {
93      display: block;
94      content: "This cache manifest contains no explicit entry.";
95      margin-left: 2.5em;
96      font-style: italic;
97      font-weight: normal;
98      font-family: serif;
99    }
100    
101    #dump-manifest dt:last-child::after {
102      content: "This cache manifest has an empty online whitelist.";
103    }
104    
105    
106    
107    
108  #nav-items {  #nav-items {
109    display: block;    display: block;
110    position: fixed;    position: fixed;
# Line 36  q { Line 135  q {
135    text-decoration: none;    text-decoration: none;
136  }  }
137    
138    body[data-scripted] #nav-items {
139      display: none;
140    }
141    
142    img {
143      border-style: none;
144    }
145    
146    code {
147      font-family: "Courier New", "Courier", monospace;
148      letter-spacing: 0.1em;
149      background-color: transparent;
150      color: orangered;
151      white-space: -moz-pre-wrap;
152      white-space: pre-wrap;
153    }
154    
155    .example {
156      background-color: #ececff;
157    }
158    
159    pre.example {
160      margin-left: 1em;
161      margin-right: 1em;
162      padding: 0.2em 0.5em;
163    }
164    
165    .example.bad {
166      background-color: #fff7f7;
167    }
168    
169    code.example.bad {
170      color: inherit;
171      background-color: #ffeeee;
172    }
173    
174    h3 code.example.bad {
175      color: orangered;
176      background-color: transparent;
177    }
178    
179    pre.example::before {
180      content: "Example";
181      display: block;
182      color: #b0b0ff;
183      background-color: transparent;
184      font-weight: bolder;
185      font-family: sans-serif;
186    }
187    
188    pre.example.html::before {
189      content: "HTML Example";
190    }
191    
192    pre.example.xml::before {
193      content: "XML Example";
194    }
195    
196    pre.example.manifest::before {
197      content: "Cache Manifest Example";
198    }
199    
200    pre.example.bad::before {
201      content: "Bad Example";
202      color: #ffc1c1;
203    }
204    
205    pre.example.bad.html::before {
206      content: "HTML Bad Example";
207    }
208    
209    pre.example.bad.xml::before {
210      content: "XML Bad Example";
211    }
212    
213    pre.example.bad.manifest::before {
214      content: "Cache Manifest Bad Example";
215    }
216    
217    .rfc2119 {
218      border-style: none;
219      text-transform: lowercase;
220      font-variant: small-caps;
221      font-style: normal;
222      text-decoration: none;
223      font-weight: normal;
224      font-family: sans-serif;
225    }
226    
227    
228    /* dl.switch from WHATWG specification style sheet */
229    
230    dl.switch {
231      padding-left: 2em;
232    }
233    
234    dl.switch dt {
235      display: block;
236      text-indent: -1.5em;
237      font-weight: bolder;
238      font-family: sans-serif;
239      font-style: normal;
240    }
241    
242    dl.switch dt:before {
243      content: '\21AA';
244      padding: 0 0.5em 0 0;
245      display: inline-block;
246      width: 1em;
247      text-align: right;
248      line-height: 0.5em;
249    }
250    
251    dl.switch dt:after {
252      content: " :";
253    }
254    
255    mark {
256      background-color: #ffff4d;
257    }
258    
259    /* Tab navigation */
260    
261    body[data-scripted] > h1,
262    body[data-scripted] > #input > h2,
263    body[data-scripted] .section.subdoc > h2,
264    body[data-scripted] .section.subdoc > h3,
265    body[data-scripted] .section.subdoc > h4,
266    body[data-scripted] .section.subdoc > h5,
267    body[data-scripted] .section.subdoc > h6 {
268      float: left;
269      font-size: 100%;
270      margin: 0;
271      padding: 0 1em;
272    }
273    
274    body[data-scripted] > #input > h2,
275    body[data-scripted] .section.subdoc > h2,
276    body[data-scripted] .section.subdoc > h3,
277    body[data-scripted] .section.subdoc > h4,
278    body[data-scripted] .section.subdoc > h5,
279    body[data-scripted] .section.subdoc > h6 {
280      margin: 0 1em 0 -1em;
281      padding: 0.3em 1em;
282      border: thin hidden;
283      background-color: #fff0f0;
284      color: black;
285    }
286    
287    nav {
288      display: block;
289      z-index: 100;
290    }
291    
292    .section nav {
293      margin-left: 1em;
294    }
295    
296    nav ul {
297      margin: 0;
298      padding: 1em 0 0 0;
299    }
300    
301    #input nav ul,
302    .section.subdoc nav ul {
303      padding-top: 0;
304    }
305    
306    nav ul li {
307      display: inline;
308      margin: 0;
309      padding: 0 0.3em 0 0;
310      line-height: 2;
311    }
312    
313    nav a {
314      display: inline;
315      padding: 0.1em 0.3em;
316      text-decoration: none;
317      color: inherit;
318      border: thin outset gray;
319      -moz-border-radius: 0.2em;
320      min-width: 4em;
321      text-align: center;
322    }
323    
324    nav [data-active] a {
325      border-style: inset;
326      background-color: #C0C0C0;
327    }
328    
329    nav a[href$=transfer-errors] {
330      padding-left: 20px;
331      background-image: url(icons/transfer-16);
332      background-repeat: no-repeat;
333      background-position: 2px center;
334      min-height: 16px;
335    }
336    
337    nav a[href$=parse-errors] {
338      padding-left: 20px;
339      background-image: url(icons/syntax-16);
340      background-repeat: no-repeat;
341      background-position: 2px center;
342      min-height: 16px;
343    }
344    
345    nav a[href$=document-errors] {
346      padding-left: 20px;
347      background-image: url(icons/structure-16);
348      background-repeat: no-repeat;
349      background-position: 2px center;
350      min-height: 16px;
351    }
352    
353    .section {
354      clear: both;
355    }
356    
357    body[data-scripted] > .section,
358    body[data-scripted] > #input > .section,
359    body[data-scripted] .section.subdoc > .section {
360      position: absolute;
361      top: 100px; /* h1 > img's height is 90px */
362      bottom: 0;
363      left: 0;
364      right: 0;
365      min-height: 10em;
366      overflow: auto;
367    }
368    
369    body[data-scripted] > #input > .section,
370    body[data-scripted] .section.subdoc > .section {
371      top: 2em;
372    }
373    
374    /* details widgets */
375    
376    .details .legend {
377      font-weight: bolder;
378    }
379    
380    .details .legend:after {
381      content: "...";
382    }
383    
384    .details.open .legend:after,
385    body:not([data-scripted]) .details.default .legend:after {
386      content: ":";
387    }
388    
389    body[data-scripted] .details .legend {
390      cursor: pointer;
391    }
392    
393    body[data-scripted] .details > div {
394      display: none;
395    }
396    
397    /* Data input forms */
398    
399    input[type=url] {
400      width: 90%;
401      min-width: 30em;
402    }
403    
404    textarea {
405      width: 95%;
406      min-width: 30em;
407      height: 20em;
408    }
409    
410    /* Source codes taken from the input document */
411    
412    /* q, */ .source li {
413      white-space: pre;
414      white-space: -moz-pre-wrap;
415      white-space: pre-wrap;
416    }
417    
418    q, .source ol {
419      background-color: #f0f0ff;
420      color: black;
421      line-height: 1.5;
422    }
423    
424    /* Document dumps */
425    
426    .dump > ol {
427      margin-left: 0;
428      padding-left: 0;
429    }
430    
431    .dump > ol > li {
432    /*  display: block;
433      list-style: none;
434      margin-left: 0;
435      padding-left: 0; */
436    }
437    
438    .dump > ol /* ol */ {
439      margin-left: 1em;
440      padding-left: 0;
441    }
442    
443    .dump ol /*ol*/ li {
444      margin-left: 0;
445      padding-left: 0.4em;
446    }
447    
448    .dump ul.attributes {
449      margin-left: 3em;
450      padding: 0;
451    }
452    
453    .dump ul.attributes li {
454      display: inline;
455      list-style: none;
456      margin: 0 2em 0 0;
457      padding: 0;
458      text-indent: 0;
459      font-size: 90%;
460    }
461    
462    q:after {
463      content: " "; /* Make white-space-only quotations visible */
464      white-space: pre;
465    }
466    
467    /* Errors */
468    
469    .errors dt {
470      background-image: none;
471      background-position: left center;
472      background-repeat: no-repeat;
473      padding-left: 20px; /* icons/*-16.png */
474      min-height: 16px;
475    }
476    
477    .errors dd {
478      margin-left: 0;
479      padding-left: 60px;
480      min-height: 32px; /* large-*.png files' height */
481      background-position: 20px center;
482      background-repeat: no-repeat;
483    }
484    
485    .level-m, .level-s {
486      background-image: url(large-stop);
487    /* TODO: we need an image for SHOULD-level errors */
488    }
489    
490    .level-w {
491      background-image: url(large-alert);
492    }
493    
494    .level-i {
495      background-image: url(large-info);
496    }
497    
498    .level-u {
499      background-image: none;
500    }
501    
502    dt.level-u {
503      margin: 0.2em 0 0 0;
504      border: blue 0.2em solid;
505      border-bottom-style: none;
506      padding-top: 0.2em;
507      padding-right: 0.2em;
508      padding-bottom: 0;
509      background-color: #e1e1ff;
510      color: black;
511    }
512    
513    dd.level-u {
514      margin: 0 0 0.2em;
515      border: blue 0.2em solid;
516      border-top-style: none;
517      padding-right: 0.2em;
518      padding-bottom: 0.2em;
519      padding-top: 0;
520      background-color: #e1e1ff;
521      color: black;
522    }
523    
524    dt.layer-transfer {
525      background-image: url(icons/transfer-16);
526    }
527    
528    dt.layer-encode,
529    dt.layer-charset {
530      background-image: url(icons/char-16);
531    /* TODO: We need different images for these layers */
532    }
533    
534    dt.layer-syntax {
535      background-image: url(icons/syntax-16);
536    }
537    
538    dt.layer-structure {
539      background-image: url(icons/structure-16);
540    }
541    
542    dt.layer-semantics {
543      background-image: url(icons/semantics-16);
544    }
545    
546    .errors dl:empty {
547      display: none;
548    }
549    
550    .errors .no-errors {
551      text-indent: 0;
552    }
553    
554    .errors .no-errors:lang(en) {
555      font-style: italic;
556    }
557    
558    /* List of IDs */
559    
560    #identifiers dd,
561    [id$="-identifiers"] dd {
562      margin-left: 20px;
563      padding-left: 20px;
564      min-height: 20px;
565    }
566    
567    #identifiers dd + dd,
568    [id$="-identifiers"] dd + dd {
569      background-image: url(error);
570      background-position: center left;
571      background-repeat: no-repeat;
572    }
573    
574    /* Result paragraph */
575    
576    .result-para {
577      margin-left: 20px;
578      padding-left: 40px;
579      min-height: 32px;
580      background-color: none;
581      background-position: center left;
582      background-repeat: no-repeat;
583      padding-top: 0.2em;
584      padding-bottom: 0.2em;
585      padding-right: 1em;
586    }
587    
588    .result-para.no-error {
589      background-image: url(ok);
590      background-color: #ddffdd;
591      color: black;
592    }
593    
594    .result-para.must-errors,
595    .result-para.should-errors {
596      background-image: url(large-stop);
597      /* TODO: Use different image for should-errors */
598    }
599    
600    /* See "Result summary table" for background color of
601       .must-errors and .should-errors */
602    
603    .result-para.uncertain {
604      border: blue 0.2em solid;
605      background-color: #e1e1ff;
606      color: black;
607      background-image: none;
608    }
609    
610    /* Result summary table */
611    
612    .result table {
613      margin-left: auto;
614      margin-right: auto;
615      border: 4px solid #800080;
616      border-collapse: collapse;
617    }
618    
619    .result tbody,
620    .result colgroup {
621      border: 4px solid #800080;
622    }
623    
624    .result tbody > tr:first-child > th {
625      border-bottom-width: 2px;
626    }
627    
628    .result tr.total > * {
629      border-top-width: 2px;
630    }
631    
632    .result td.subrow {
633      border-right-width: 2px;
634    }
635    
636    .result th,
637    .result td.subrow,
638    .result .uncertain td.subrow {
639      background-color: #fff0f0;
640      color: black;
641    }
642    
643    .result th,
644    .result td {
645      border: 1px solid #800080;
646      padding: 0.2em 0.5em;
647      text-align: center;
648      empty-cells: show;
649    }
650    
651    .result td.subrow {
652      border-top-style: hidden;
653    }
654    
655    .result .uncertain td {
656      background-color: #e1e1ff;
657      color: black;
658    }
659    
660    .result .must-errors,
661    .result .uncertain .must-errors {
662      background-color: #ffcece;
663      color: black;
664    }
665    
666    .result .should-errors,
667    .result .uncertain .should-errors {
668      background-color: #e1e1ff;
669      color: black;
670    }
671    
672    .result tfoot .total strong {
673      font-size: 150%;
674    }
675    
676    .result thead > tr > th:first-child + th {
677      background-image: url(error);
678      background-repeat: no-repeat;
679      background-position: 2px center;
680      padding-left: 20px; /* error.png's width is 16px */
681    }
682    
683    .result thead > tr > th:first-child + th + th {
684      background-image: url(error); /* TODO: SHOULD image */
685      background-repeat: no-repeat;
686      background-position: 2px center;
687      padding-left: 20px; /* error.png's width is 16px */
688    }
689    
690    .result thead > tr > th:first-child + th + th + th {
691      background-image: url(alert);
692      background-repeat: no-repeat;
693      background-position: 2px center;
694      padding-left: 20px; /* alert.png's width is 16px */
695    }
696    
697    .result thead > tr > th:first-child + th + th + th + th {
698      background-image: url(info);
699      background-repeat: no-repeat;
700      background-position: 2px center;
701      padding-left: 20px; /* info.png's width is 16px */
702    }
703    
704    .result thead + tbody > tr:first-child + tr > th {
705      background-image: url(icons/transfer-16);
706      background-repeat: no-repeat;
707      background-position: 2px center;
708      padding-left: 20px; /* background-image's width is 16px */
709    }
710    
711    .result thead + tbody > tr:first-child + tr + tr > th {
712      background-image: url(icons/char-16); /* TODO: new image */
713      background-repeat: no-repeat;
714      background-position: 2px center;
715      padding-left: 20px; /* background-image's width is 16px */
716    }
717    
718    .result thead + tbody > tr:first-child + tr + tr + tr > th {
719      background-image: url(icons/char-16);
720      background-repeat: no-repeat;
721      background-position: 2px center;
722      padding-left: 20px; /* background-image's width is 16px */
723    }
724    
725    .result thead + tbody > tr:first-child + tr + tr + tr + tr > th {
726      background-image: url(icons/syntax-16);
727      background-repeat: no-repeat;
728      background-position: 2px center;
729      padding-left: 20px; /* background-image's width is 16px */
730    }
731    
732    .result thead + tbody > tr:first-child + tr + tr + tr + tr + tr > th {
733      background-image: url(icons/structure-16);
734      background-repeat: no-repeat;
735      background-position: 2px center;
736      padding-left: 20px; /* background-image's width is 16px */
737    }
738    
739    .result thead + tbody > tr:first-child + tr + tr + tr + tr + tr + tr > th {
740      background-image: url(icons/semantics-16);
741      background-repeat: no-repeat;
742      background-position: 2px center;
743      padding-left: 20px; /* background-image's width is 16px */
744    }
745    
746  /*  /*
747    
748  Copyright 2007 Wakaba <w@suika.fam.cx>  Copyright 2007-2008 Wakaba <w@suika.fam.cx>.
749    
750  This library is free software; you can redistribute it  This library is free software; you can redistribute it
751  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.27
admin@suikawiki.org
 ViewVC Help
Powered by ViewVC 1.1.24