/[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.29 by wakaba, Fri Aug 15 17:51:03 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] {
262      min-width: 400px; /* body > nav's left is 300px */
263      /* min-height is set to .section */
264    }
265    
266    body[data-scripted] > h1,
267    body[data-scripted] > #input > h2,
268    body[data-scripted] .section.subdoc > h2,
269    body[data-scripted] .section.subdoc > h3,
270    body[data-scripted] .section.subdoc > h4,
271    body[data-scripted] .section.subdoc > h5,
272    body[data-scripted] .section.subdoc > h6 {
273      font-size: 100%;
274      margin: 0;
275      padding: 0 17.5px; /* h1 > img's width is 265px */
276    }
277    
278    body[data-scripted] > #input > h2,
279    body[data-scripted] .section.subdoc > h2,
280    body[data-scripted] .section.subdoc > h3,
281    body[data-scripted] .section.subdoc > h4,
282    body[data-scripted] .section.subdoc > h5,
283    body[data-scripted] .section.subdoc > h6 {
284      float: left;
285      margin: 0 0.5em 0 -1em;
286      padding: 0.3em 1em;
287      border: thin hidden;
288      background-color: #fff0f0;
289      color: black;
290    }
291    
292    nav {
293      display: block;
294    }
295    
296    .section nav {
297      margin-left: 1em;
298    }
299    
300    nav ul {
301      margin: 0;
302      padding: 1em 0 0 0;
303    }
304    
305    #input nav ul,
306    .section.subdoc nav ul {
307      padding-top: 0;
308    }
309    
310    nav ul li {
311      display: inline;
312      margin: 0;
313      padding: 0 0.3em 0 0;
314      line-height: 2;
315    }
316    
317    nav a {
318      display: inline;
319      padding: 0.1em 0.3em;
320      text-decoration: none;
321      color: inherit;
322      border: thin outset gray;
323      -moz-border-radius: 0.2em;
324      min-width: 4em;
325      text-align: center;
326    }
327    
328    nav [data-active] a {
329      border-style: inset;
330      background-color: #C0C0C0;
331    }
332    
333    nav a[href$=transfer-errors] {
334      padding-left: 20px;
335      background-image: url(icons/transfer-16);
336      background-repeat: no-repeat;
337      background-position: 2px center;
338      min-height: 16px;
339    }
340    
341    nav a[href$=parse-errors] {
342      padding-left: 20px;
343      background-image: url(icons/syntax-16);
344      background-repeat: no-repeat;
345      background-position: 2px center;
346      min-height: 16px;
347    }
348    
349    nav a[href$=document-errors] {
350      padding-left: 20px;
351      background-image: url(icons/structure-16);
352      background-repeat: no-repeat;
353      background-position: 2px center;
354      min-height: 16px;
355    }
356    
357    .section {
358      clear: both;
359    }
360    
361    body > nav {
362      position: absolute;
363      top: 0;
364      height: 100px; /* h1 > img's height is 90px */
365      left: 300px; /* h1 > img's width is 265px */
366      right: 0;
367      min-width: 100px; /* body's min-width is 400px */
368      overflow: auto;
369    }
370    
371    .section > nav {
372    /*
373      height: 2em;
374      max-height: 2em; *//* hn's line + padding-top + padding-bottom = 1.6em */
375      overflow: auto;
376      min-width: 5em;
377    
378      position: relative;
379      z-index: 1000; /* such that scrollbars are clickable */
380      white-space: nowrap; /* Firefox does not show vertical scrollbar,
381          because there is a floated hn element... */
382    }
383    
384    body[data-scripted] > .section,
385    body[data-scripted] > #input > .section,
386    body[data-scripted] .section.subdoc > .section {
387      position: absolute;
388      top: 100px; /* h1 > img's height is 90px */
389      bottom: 0;
390      left: 0;
391      right: 0;
392      min-height: 10em;
393      overflow: auto;
394    }
395    
396    body[data-scripted] > #input > .section,
397    body[data-scripted] .section.subdoc > .section {
398      top: 2em;
399    }
400    
401    /* details widgets */
402    
403    .details .legend {
404      font-weight: bolder;
405    }
406    
407    .details .legend:after {
408      content: "...";
409    }
410    
411    .details.open .legend:after,
412    body:not([data-scripted]) .details.default .legend:after {
413      content: ":";
414    }
415    
416    body[data-scripted] .details .legend {
417      cursor: pointer;
418    }
419    
420    body[data-scripted] .details > div {
421      display: none;
422    }
423    
424    /* Data input forms */
425    
426    input[type=url] {
427      width: 90%;
428      min-width: 30em;
429    }
430    
431    textarea {
432      width: 95%;
433      min-width: 30em;
434      height: 20em;
435    }
436    
437    /* Source codes taken from the input document */
438    
439    /* q, */ .source li {
440      white-space: pre;
441      white-space: -moz-pre-wrap;
442      white-space: pre-wrap;
443    }
444    
445    q, .source ol {
446      background-color: #f0f0ff;
447      color: black;
448      line-height: 1.5;
449    }
450    
451    /* Document dumps */
452    
453    .dump > ol {
454      margin-left: 0;
455      padding-left: 0;
456    }
457    
458    .dump > ol > li {
459    /*  display: block;
460      list-style: none;
461      margin-left: 0;
462      padding-left: 0; */
463    }
464    
465    .dump > ol /* ol */ {
466      margin-left: 1em;
467      padding-left: 0;
468    }
469    
470    .dump ol /*ol*/ li {
471      margin-left: 0;
472      padding-left: 0.4em;
473    }
474    
475    .dump ul.attributes {
476      margin-left: 3em;
477      padding: 0;
478    }
479    
480    .dump ul.attributes li {
481      display: inline;
482      list-style: none;
483      margin: 0 2em 0 0;
484      padding: 0;
485      text-indent: 0;
486      font-size: 90%;
487    }
488    
489    q:after {
490      content: " "; /* Make white-space-only quotations visible */
491      white-space: pre;
492    }
493    
494    /* Errors */
495    
496    .errors dt {
497      background-image: none;
498      background-position: left center;
499      background-repeat: no-repeat;
500      padding-left: 20px; /* icons/*-16.png */
501      min-height: 16px;
502    }
503    
504    .errors dd {
505      margin-left: 0;
506      padding-left: 60px;
507      min-height: 32px; /* large-*.png files' height */
508      background-position: 20px center;
509      background-repeat: no-repeat;
510    }
511    
512    .level-m, .level-s {
513      background-image: url(large-stop);
514    /* TODO: we need an image for SHOULD-level errors */
515    }
516    
517    .level-w {
518      background-image: url(large-alert);
519    }
520    
521    .level-i {
522      background-image: url(large-info);
523    }
524    
525    .level-u {
526      background-image: none;
527    }
528    
529    dt.level-u {
530      margin: 0.2em 0 0 0;
531      border: blue 0.2em solid;
532      border-bottom-style: none;
533      padding-top: 0.2em;
534      padding-right: 0.2em;
535      padding-bottom: 0;
536      background-color: #e1e1ff;
537      color: black;
538    }
539    
540    dd.level-u {
541      margin: 0 0 0.2em;
542      border: blue 0.2em solid;
543      border-top-style: none;
544      padding-right: 0.2em;
545      padding-bottom: 0.2em;
546      padding-top: 0;
547      background-color: #e1e1ff;
548      color: black;
549    }
550    
551    dt.layer-transfer {
552      background-image: url(icons/transfer-16);
553    }
554    
555    dt.layer-encode,
556    dt.layer-charset {
557      background-image: url(icons/char-16);
558    /* TODO: We need different images for these layers */
559    }
560    
561    dt.layer-syntax {
562      background-image: url(icons/syntax-16);
563    }
564    
565    dt.layer-structure {
566      background-image: url(icons/structure-16);
567    }
568    
569    dt.layer-semantics {
570      background-image: url(icons/semantics-16);
571    }
572    
573    .errors dl:empty {
574      display: none;
575    }
576    
577    .errors .no-errors {
578      text-indent: 0;
579    }
580    
581    .errors .no-errors:lang(en) {
582      font-style: italic;
583    }
584    
585    /* List of IDs */
586    
587    #identifiers dd,
588    [id$="-identifiers"] dd {
589      margin-left: 20px;
590      padding-left: 20px;
591      min-height: 20px;
592    }
593    
594    #identifiers dd + dd,
595    [id$="-identifiers"] dd + dd {
596      background-image: url(error);
597      background-position: center left;
598      background-repeat: no-repeat;
599    }
600    
601    /* Result paragraph */
602    
603    .result-para {
604      margin-left: 20px;
605      padding-left: 40px;
606      min-height: 32px;
607      background-color: none;
608      background-position: center left;
609      background-repeat: no-repeat;
610      padding-top: 0.2em;
611      padding-bottom: 0.2em;
612      padding-right: 1em;
613    }
614    
615    .result-para.no-error {
616      background-image: url(ok);
617      background-color: #ddffdd;
618      color: black;
619    }
620    
621    .result-para.must-errors,
622    .result-para.should-errors {
623      background-image: url(large-stop);
624      /* TODO: Use different image for should-errors */
625    }
626    
627    /* See "Result summary table" for background color of
628       .must-errors and .should-errors */
629    
630    .result-para.uncertain {
631      border: blue 0.2em solid;
632      background-color: #e1e1ff;
633      color: black;
634      background-image: none;
635    }
636    
637    /* Result summary table */
638    
639    .result table {
640      margin-left: auto;
641      margin-right: auto;
642      border: 4px solid #800080;
643      border-collapse: collapse;
644    }
645    
646    .result tbody,
647    .result colgroup {
648      border: 4px solid #800080;
649    }
650    
651    .result tbody > tr:first-child > th {
652      border-bottom-width: 2px;
653    }
654    
655    .result tr.total > * {
656      border-top-width: 2px;
657    }
658    
659    .result td.subrow {
660      border-right-width: 2px;
661    }
662    
663    .result th,
664    .result td.subrow,
665    .result .uncertain td.subrow {
666      background-color: #fff0f0;
667      color: black;
668    }
669    
670    .result th,
671    .result td {
672      border: 1px solid #800080;
673      padding: 0.2em 0.5em;
674      text-align: center;
675      empty-cells: show;
676    }
677    
678    .result td.subrow {
679      border-top-style: hidden;
680    }
681    
682    .result .uncertain td {
683      background-color: #e1e1ff;
684      color: black;
685    }
686    
687    .result .must-errors,
688    .result .uncertain .must-errors {
689      background-color: #ffcece;
690      color: black;
691    }
692    
693    .result .should-errors,
694    .result .uncertain .should-errors {
695      background-color: #e1e1ff;
696      color: black;
697    }
698    
699    .result tfoot .total strong {
700      font-size: 150%;
701    }
702    
703    .result thead > tr > th:first-child + th {
704      background-image: url(error);
705      background-repeat: no-repeat;
706      background-position: 2px center;
707      padding-left: 20px; /* error.png's width is 16px */
708    }
709    
710    .result thead > tr > th:first-child + th + th {
711      background-image: url(error); /* TODO: SHOULD image */
712      background-repeat: no-repeat;
713      background-position: 2px center;
714      padding-left: 20px; /* error.png's width is 16px */
715    }
716    
717    .result thead > tr > th:first-child + th + th + th {
718      background-image: url(alert);
719      background-repeat: no-repeat;
720      background-position: 2px center;
721      padding-left: 20px; /* alert.png's width is 16px */
722    }
723    
724    .result thead > tr > th:first-child + th + th + th + th {
725      background-image: url(info);
726      background-repeat: no-repeat;
727      background-position: 2px center;
728      padding-left: 20px; /* info.png's width is 16px */
729    }
730    
731    .result thead + tbody > tr:first-child + tr > th {
732      background-image: url(icons/transfer-16);
733      background-repeat: no-repeat;
734      background-position: 2px center;
735      padding-left: 20px; /* background-image's width is 16px */
736    }
737    
738    .result thead + tbody > tr:first-child + tr + tr > th {
739      background-image: url(icons/char-16); /* TODO: new image */
740      background-repeat: no-repeat;
741      background-position: 2px center;
742      padding-left: 20px; /* background-image's width is 16px */
743    }
744    
745    .result thead + tbody > tr:first-child + tr + tr + tr > th {
746      background-image: url(icons/char-16);
747      background-repeat: no-repeat;
748      background-position: 2px center;
749      padding-left: 20px; /* background-image's width is 16px */
750    }
751    
752    .result thead + tbody > tr:first-child + tr + tr + tr + tr > th {
753      background-image: url(icons/syntax-16);
754      background-repeat: no-repeat;
755      background-position: 2px center;
756      padding-left: 20px; /* background-image's width is 16px */
757    }
758    
759    .result thead + tbody > tr:first-child + tr + tr + tr + tr + tr > th {
760      background-image: url(icons/structure-16);
761      background-repeat: no-repeat;
762      background-position: 2px center;
763      padding-left: 20px; /* background-image's width is 16px */
764    }
765    
766    .result thead + tbody > tr:first-child + tr + tr + tr + tr + tr + tr > th {
767      background-image: url(icons/semantics-16);
768      background-repeat: no-repeat;
769      background-position: 2px center;
770      padding-left: 20px; /* background-image's width is 16px */
771    }
772    
773  /*  /*
774    
775  Copyright 2007 Wakaba <w@suika.fam.cx>  Copyright 2007-2008 Wakaba <w@suika.fam.cx>.
776    
777  This library is free software; you can redistribute it  This library is free software; you can redistribute it
778  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.29
admin@suikawiki.org
 ViewVC Help
Powered by ViewVC 1.1.24