/[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.15 by wakaba, Sun Nov 18 11:05:12 2007 UTC revision 1.30 by wakaba, Sat Aug 16 07:42:20 2008 UTC
# Line 21  h1 { Line 21  h1 {
21    font-size: 180%;    font-size: 180%;
22  }  }
23    
24  h2 {  h2, h3, h4, h5, h6, th {
   margin: 0;  
   border-style: none;  
   padding: 0;  
   font-weight: bolder;  
   font-family: sans-serif;  
   font-size: 150%;  
 }  
   
 h3, th {  
25    font-weight: bolder;    font-weight: bolder;
26    font-family: sans-serif;    font-family: sans-serif;
27    font-size: 100%;    font-size: 100%;
# Line 38  h3, th { Line 29  h3, th {
29    color: black;    color: black;
30  }  }
31    
32  .tree-text q, .tree-cdata q, .tree-comment q {  h2, h3, h4, h5, h6 {
33    display: block;    margin: 0 0 0 -1em;
34  }    padding: 0.3em 1em;
   
 q, #source-string li {  
   white-space: pre;  
   white-space: -moz-pre-wrap;  
   white-space: pre-wrap;  
 }  
   
 q, #source-string ol {  
   background-color: #f0f0ff;  
   color: black;  
   line-height: 1.5;  
 }  
   
 q:before, q:after {  
   content: "";  
 }  
   
 #parse-errors dl:empty:before {  
   content: "This document has no parse error.";  
   font-style: italic;  
 }  
   
 #document-errors dl:empty:before {  
   content: "This document has no document error.";  
   font-style: italic;  
 }  
   
 #document-tree > ol {  
   margin-left: 0;  
   padding-left: 0;  
 }  
 #document-tree > ol > li {  
 /*  display: block;  
   list-style: none;  
   margin-left: 0;  
   padding-left: 0; */  
 }  
   
 #document-tree ol /*ol*/ {  
   margin-left: 1em;  
   padding-left: 0;  
 }  
   
 #document-tree ol /*ol*/ li {  
   margin-left: 0;  
   padding-left: 0.4em;  
 }  
   
 #document-tree ul.attributes {  
   margin-left: 3em;  
   padding: 0;  
 }  
   
 #document-tree ul.attributes li {  
   display: inline;  
   list-style: none;  
   margin: 0 2em 0 0;  
   padding: 0;  
   text-indent: 0;  
   font-size: 90%;  
 }  
   
 #dump-manifest tbody:empty {  
   display: table-caption;  
   caption-side: bottom;  
 }  
   
 #dump-manifest tbody:empty::after {  
   content: "This cache manifest contains no oppotunistic caching namespace.";  
   font-style: italic;  
 }  
   
 #dump-manifest dt:first-child + dt::before,  
 #dump-manifest dt:last-child::after {  
   display: block;  
   content: "This cache manifest contains no explicit entry.";  
   margin-left: 2.5em;  
   font-style: italic;  
   font-weight: normal;  
   font-family: serif;  
35  }  }
36    
37  #dump-manifest dt:last-child::after {  .section[id$=transfer-errors] h2,
38    content: "This cache manifest has an empty online whitelist.";  .section[id$=transfer-errors] h3,
39  }  .section[id$=transfer-errors] h4,
40    .section[id$=transfer-errors] h5,
41  #parse-errors dd, #document-errors dd, #error-description h3,  .section[id$=transfer-errors] h6 {
 #result-para {  
   margin-left: 20px;  
42    padding-left: 40px;    padding-left: 40px;
43    min-height: 32px;    background-image: url(icons/transfer-32);
   background-image: url(large-stop);  
   background-position: center left;  
44    background-repeat: no-repeat;    background-repeat: no-repeat;
45  }    background-position: 6px center;
   
 #levels-table tbody th:first-child {  
   padding-left: 42px;  
46    min-height: 32px;    min-height: 32px;
   background-image: url(large-stop);  
   background-position: 5px center;  
   background-repeat: no-repeat;  
   text-align: left;  
47  }  }
48    
49  #identifiers dd, #terms dd {  .section[id$=parse-errors] h2,
50    margin-left: 20px;  .section[id$=parse-errors] h3,
51    padding-left: 20px;  .section[id$=parse-errors] h4,
52    min-height: 20px;  .section[id$=parse-errors] h5,
53  }  .section[id$=parse-errors] h6 {
54      padding-left: 40px;
55  #identifiers dd + dd, #terms dd + dd {    background-image: url(icons/syntax-32);
   background-image: url(error);  
   background-position: center left;  
56    background-repeat: no-repeat;    background-repeat: no-repeat;
57      background-position: 6px center;
58      min-height: 32px;
59  }  }
60    
61  #error-description h3 {  .section[id$=document-errors] h2,
62    margin-left: 1em;  .section[id$=document-errors] h3,
63    margin-right: 1em;  .section[id$=document-errors] h4,
64  }  .section[id$=document-errors] h5,
65    .section[id$=document-errors] h6 {
66  #parse-errors dd.should,    padding-left: 40px;
67  #document-errors dd.should, #error-description .should h3,    background-image: url(icons/structure-32);
68  #result-para.SEE-RESULT, #levels-table #level-s th {    background-repeat: no-repeat;
69    background-image: url(large-alert);    background-position: 6px center;
70  }    min-height: 32px;
   
 #parse-errors dd.warning,  
 #document-errors dd.warning, #error-description .warning h3,  
 #levels-table #level-w th {  
   background-image: url(large-info);  
71  }  }
72    
73  #parse-errors dd.unsupported,  .tree-text q, .tree-cdata q, .tree-comment q {
74  #document-errors dd.unsupported {    display: block;
   margin-left: 60px;  
   border: red 0.2em solid;  
   padding: 0.5em;  
75  }  }
76    
77  #parse-errors dd.unsupported,  q:before, q:after {
78  #document-errors dd.unsupported, #error-description .unsupported h3,    content: "";
 #result-para.uncertain, #levels-table #level-unsupported th {  
   background-image: none;  
79  }  }
80    
 #result-para.PASS {  
   background-image: url(ok);  
 }  
81    
82  #nav-items {  #nav-items {
83    display: block;    display: block;
# Line 222  q:before, q:after { Line 109  q:before, q:after {
109    text-decoration: none;    text-decoration: none;
110  }  }
111    
112    body[data-scripted] #nav-items {
113      display: none;
114    }
115    
116  img {  img {
117    border-style: none;    border-style: none;
118  }  }
# Line 235  code { Line 126  code {
126    white-space: pre-wrap;    white-space: pre-wrap;
127  }  }
128    
129    pre > code:empty:after {
130      content: " "; /* such that a line box is rendered */
131    }
132    
133  .example {  .example {
134    background-color: #ececff;    background-color: #ececff;
135  }  }
# Line 307  pre.example.bad.manifest::before { Line 202  pre.example.bad.manifest::before {
202    font-family: sans-serif;    font-family: sans-serif;
203  }  }
204    
205  #result-summary table {  
206    /* dl.switch from WHATWG specification style sheet */
207    
208    dl.switch {
209      padding-left: 2em;
210    }
211    
212    dl.switch dt {
213      display: block;
214      text-indent: -1.5em;
215      font-weight: bolder;
216      font-family: sans-serif;
217      font-style: normal;
218    }
219    
220    dl.switch dt:before {
221      content: '\21AA';
222      padding: 0 0.5em 0 0;
223      display: inline-block;
224      width: 1em;
225      text-align: right;
226      line-height: 0.5em;
227    }
228    
229    dl.switch dt:after {
230      content: " :";
231    }
232    
233    mark {
234      background-color: #ffff4d;
235    }
236    
237    /* Tab navigation */
238    
239    body[data-scripted] {
240      min-width: 400px; /* body > nav's left is 300px */
241      /* min-height is set to .section */
242    }
243    
244    body[data-scripted] > h1,
245    body[data-scripted] > #input > h2,
246    body[data-scripted] .section.subdoc > h2,
247    body[data-scripted] .section.subdoc > h3,
248    body[data-scripted] .section.subdoc > h4,
249    body[data-scripted] .section.subdoc > h5,
250    body[data-scripted] .section.subdoc > h6 {
251      font-size: 100%;
252      margin: 0;
253      padding: 0 17.5px; /* h1 > img's width is 265px */
254    }
255    
256    body[data-scripted] > #input > h2,
257    body[data-scripted] .section.subdoc > h2,
258    body[data-scripted] .section.subdoc > h3,
259    body[data-scripted] .section.subdoc > h4,
260    body[data-scripted] .section.subdoc > h5,
261    body[data-scripted] .section.subdoc > h6 {
262      float: left;
263      margin: 0 0.5em 0 -1em;
264      padding: 0.3em 1em;
265      border: thin hidden;
266      background-color: #fff0f0;
267      color: black;
268    }
269    
270    nav {
271      display: block;
272    }
273    
274    .section nav {
275      margin-left: 1em;
276    }
277    
278    nav ul {
279      margin: 0;
280      padding: 1em 0 0 0;
281    }
282    
283    #input nav ul,
284    .section.subdoc nav ul {
285      padding-top: 0;
286    }
287    
288    nav ul li {
289      display: inline;
290      margin: 0;
291      padding: 0 0.3em 0 0;
292      line-height: 2;
293    }
294    
295    nav a {
296      display: inline;
297      padding: 0.1em 0.3em;
298      text-decoration: none;
299      color: inherit;
300      border: thin outset gray;
301      -moz-border-radius: 0.2em;
302      min-width: 4em;
303      text-align: center;
304    }
305    
306    nav [data-active] a {
307      border-style: inset;
308      background-color: #C0C0C0;
309    }
310    
311    nav a[href$=transfer-errors] {
312      padding-left: 20px;
313      background-image: url(icons/transfer-16);
314      background-repeat: no-repeat;
315      background-position: 2px center;
316      min-height: 16px;
317    }
318    
319    nav a[href$=parse-errors] {
320      padding-left: 20px;
321      background-image: url(icons/syntax-16);
322      background-repeat: no-repeat;
323      background-position: 2px center;
324      min-height: 16px;
325    }
326    
327    nav a[href$=document-errors] {
328      padding-left: 20px;
329      background-image: url(icons/structure-16);
330      background-repeat: no-repeat;
331      background-position: 2px center;
332      min-height: 16px;
333    }
334    
335    .section {
336      clear: both;
337    }
338    
339    body > nav {
340      position: absolute;
341      top: 0;
342      height: 100px; /* h1 > img's height is 90px */
343      left: 300px; /* h1 > img's width is 265px */
344      right: 0;
345      min-width: 100px; /* body's min-width is 400px */
346      overflow: auto;
347    }
348    
349    .section > nav {
350    /*
351      height: 2em;
352      max-height: 2em; *//* hn's line + padding-top + padding-bottom = 1.6em */
353      overflow: auto;
354      min-width: 5em;
355    
356      position: relative;
357      z-index: 1000; /* such that scrollbars are clickable */
358      white-space: nowrap; /* Firefox does not show vertical scrollbar,
359          because there is a floated hn element... */
360    }
361    
362    body[data-scripted] > .section,
363    body[data-scripted] > #input > .section,
364    body[data-scripted] .section.subdoc > .section {
365      position: absolute;
366      top: 100px; /* h1 > img's height is 90px */
367      bottom: 0;
368      left: 0;
369      right: 0;
370      min-height: 10em;
371      overflow: auto;
372    }
373    
374    body[data-scripted] > #input > .section,
375    body[data-scripted] .section.subdoc > .section {
376      top: 2em;
377    }
378    
379    /* details widgets */
380    
381    .details .legend {
382      font-weight: bolder;
383    }
384    
385    .details .legend:after {
386      content: "...";
387    }
388    
389    .details.open .legend:after,
390    body:not([data-scripted]) .details.default .legend:after {
391      content: ":";
392    }
393    
394    body[data-scripted] .details .legend {
395      cursor: pointer;
396    }
397    
398    body[data-scripted] .details > div {
399      display: none;
400    }
401    
402    /* Data input forms */
403    
404    input[type=url] {
405      width: 90%;
406      min-width: 30em;
407    }
408    
409    textarea {
410      width: 95%;
411      min-width: 30em;
412      height: 20em;
413    }
414    
415    /* Source codes taken from the input document or reformatted source */
416    
417    /* q, */ .source li, .dump pre {
418      white-space: pre;
419      white-space: -moz-pre-wrap;
420      white-space: pre-wrap;
421    }
422    
423    q, .source ol, .dump pre {
424      background-color: #f0f0ff;
425      color: black;
426      line-height: 1.5;
427    }
428    
429    .dump pre > code {
430      color: inherit;
431      background-color: transparent;
432    }
433    
434    /* Document dumps */
435    
436    .dump > ol {
437      margin-left: 0;
438      padding-left: 0;
439    }
440    
441    .dump > ol > li {
442    /*  display: block;
443      list-style: none;
444      margin-left: 0;
445      padding-left: 0; */
446    }
447    
448    .dump > ol /* ol */ {
449      margin-left: 1em;
450      padding-left: 0;
451    }
452    
453    .dump ol /*ol*/ li {
454      margin-left: 0;
455      padding-left: 0.4em;
456    }
457    
458    .dump ul.attributes {
459      margin-left: 3em;
460      padding: 0;
461    }
462    
463    .dump ul.attributes li {
464      display: inline;
465      list-style: none;
466      margin: 0 2em 0 0;
467      padding: 0;
468      text-indent: 0;
469      font-size: 90%;
470    }
471    
472    q:after {
473      content: " "; /* Make white-space-only quotations visible */
474      white-space: pre;
475    }
476    
477    dd.no-entry:lang(en) {
478      font-style: italic;
479    }
480    
481    dd.manifest-fallbacks + dd.manifest-fallbacks {
482      margin-top: 1em;
483    }
484    
485    dd.manifest-fallbacks p {
486      margin: 0;
487      text-indent: 0;
488    }
489    
490    dd.manifest-fallbacks > p + p {
491      text-indent: -1em;
492    }
493    
494    dd.manifest-fallbacks > p + p:before {
495      content: "\21B3  ";
496    }
497    
498    /* Errors */
499    
500    .errors dt {
501      background-image: none;
502      background-position: left center;
503      background-repeat: no-repeat;
504      padding-left: 20px; /* icons/*-16.png */
505      min-height: 16px;
506    }
507    
508    .errors dd {
509      margin-left: 0;
510      padding-left: 60px;
511      min-height: 32px; /* large-*.png files' height */
512      background-position: 20px center;
513      background-repeat: no-repeat;
514    }
515    
516    .level-m, .level-s {
517      background-image: url(large-stop);
518    /* TODO: we need an image for SHOULD-level errors */
519    }
520    
521    .level-w {
522      background-image: url(large-alert);
523    }
524    
525    .level-i {
526      background-image: url(large-info);
527    }
528    
529    .level-u {
530      background-image: none;
531    }
532    
533    dt.level-u {
534      margin: 0.2em 0 0 0;
535      border: blue 0.2em solid;
536      border-bottom-style: none;
537      padding-top: 0.2em;
538      padding-right: 0.2em;
539      padding-bottom: 0;
540      background-color: #e1e1ff;
541      color: black;
542    }
543    
544    dd.level-u {
545      margin: 0 0 0.2em;
546      border: blue 0.2em solid;
547      border-top-style: none;
548      padding-right: 0.2em;
549      padding-bottom: 0.2em;
550      padding-top: 0;
551      background-color: #e1e1ff;
552      color: black;
553    }
554    
555    dt.layer-transfer {
556      background-image: url(icons/transfer-16);
557    }
558    
559    dt.layer-encode,
560    dt.layer-charset {
561      background-image: url(icons/char-16);
562    /* TODO: We need different images for these layers */
563    }
564    
565    dt.layer-syntax {
566      background-image: url(icons/syntax-16);
567    }
568    
569    dt.layer-structure {
570      background-image: url(icons/structure-16);
571    }
572    
573    dt.layer-semantics {
574      background-image: url(icons/semantics-16);
575    }
576    
577    .errors dl:empty {
578      display: none;
579    }
580    
581    .errors .no-errors {
582      text-indent: 0;
583    }
584    
585    .errors .no-errors:lang(en) {
586      font-style: italic;
587    }
588    
589    /* List of IDs */
590    
591    #identifiers dd,
592    [id$="-identifiers"] dd {
593      margin-left: 20px;
594      padding-left: 20px;
595      min-height: 20px;
596    }
597    
598    #identifiers dd + dd,
599    [id$="-identifiers"] dd + dd {
600      background-image: url(error);
601      background-position: center left;
602      background-repeat: no-repeat;
603    }
604    
605    /* Result paragraph */
606    
607    .result-para {
608      margin-left: 20px;
609      padding-left: 40px;
610      min-height: 32px;
611      background-color: none;
612      background-position: center left;
613      background-repeat: no-repeat;
614      padding-top: 0.2em;
615      padding-bottom: 0.2em;
616      padding-right: 1em;
617    }
618    
619    .result-para.no-error {
620      background-image: url(ok);
621      background-color: #ddffdd;
622      color: black;
623    }
624    
625    .result-para.must-errors,
626    .result-para.should-errors {
627      background-image: url(large-stop);
628      /* TODO: Use different image for should-errors */
629    }
630    
631    /* See "Result summary table" for background color of
632       .must-errors and .should-errors */
633    
634    .result-para.uncertain {
635      border: blue 0.2em solid;
636      background-color: #e1e1ff;
637      color: black;
638      background-image: none;
639    }
640    
641    /* Result summary table */
642    
643    .result table {
644    margin-left: auto;    margin-left: auto;
645    margin-right: auto;    margin-right: auto;
646    border: 3px solid #800080;    border: 4px solid #800080;
647    border-collapse: collapse;    border-collapse: collapse;
648  }  }
649    
650  #result-summary tbody, colgroup {  .result tbody,
651    border: 3px solid #800080;  .result colgroup {
652      border: 4px solid #800080;
653  }  }
654    
655  #result-summary th {  .result tbody > tr:first-child > th {
656      border-bottom-width: 2px;
657    }
658    
659    .result tr.total > * {
660      border-top-width: 2px;
661    }
662    
663    .result td.subrow {
664      border-right-width: 2px;
665    }
666    
667    .result th,
668    .result td.subrow,
669    .result .uncertain td.subrow {
670    background-color: #fff0f0;    background-color: #fff0f0;
671    color: black;    color: black;
672  }  }
673    
674  #result-summary th, #result-summary td {  .result th,
675    .result td {
676    border: 1px solid #800080;    border: 1px solid #800080;
677    padding: 0.2em 0.5em;    padding: 0.2em 0.5em;
678    text-align: center;    text-align: center;
679    empty-cells: show;    empty-cells: show;
680  }  }
681    
682  .uncertain td, p.uncertain, #level-unsupported, #level-unsupported th {  .result td.subrow {
683      border-top-style: hidden;
684    }
685    
686    .result .uncertain td {
687    background-color: #e1e1ff;    background-color: #e1e1ff;
688    color: black;    color: black;
689  }  }
690    
691  .FAIL, .uncertain td.FAIL, #level-m, #level-m th {  .result .must-errors,
692    .result .uncertain .must-errors {
693    background-color: #ffcece;    background-color: #ffcece;
694    color: black;    color: black;
695  }  }
696    
697  .SEE-RESULT, .uncertain td.SEE-RESULT, #level-s, #level-s th {  .result .should-errors,
698    .result .uncertain .should-errors {
699    background-color: #e1e1ff;    background-color: #e1e1ff;
700    color: black;    color: black;
701  }  }
702    
703  .PASS, #level-w, #level-w th {  .result tfoot .total strong {
704    background-color: #ddffdd;    font-size: 150%;
   color: black;  
705  }  }
706    
707  #result-para {  .result thead > tr > th:first-child + th {
708    padding-top: 0.2em;    background-image: url(error);
709    padding-bottom: 0.2em;    background-repeat: no-repeat;
710    padding-right: 1em;    background-position: 2px center;
711      padding-left: 20px; /* error.png's width is 16px */
712  }  }
713    
714  /* dl.switch from WHATWG specification style sheet */  .result thead > tr > th:first-child + th + th {
715      background-image: url(error); /* TODO: SHOULD image */
716      background-repeat: no-repeat;
717      background-position: 2px center;
718      padding-left: 20px; /* error.png's width is 16px */
719    }
720    
721  dl.switch {  .result thead > tr > th:first-child + th + th + th {
722    padding-left: 2em;    background-image: url(alert);
723      background-repeat: no-repeat;
724      background-position: 2px center;
725      padding-left: 20px; /* alert.png's width is 16px */
726  }  }
727    
728  dl.switch dt {  .result thead > tr > th:first-child + th + th + th + th {
729    display: block;    background-image: url(info);
730    text-indent: -1.5em;    background-repeat: no-repeat;
731    font-weight: bolder;    background-position: 2px center;
732    font-family: sans-serif;    padding-left: 20px; /* info.png's width is 16px */
   font-style: normal;  
733  }  }
734    
735  dl.switch dt:before {  .result thead + tbody > tr:first-child + tr > th {
736    content: '\21AA';    background-image: url(icons/transfer-16);
737    padding: 0 0.5em 0 0;    background-repeat: no-repeat;
738    display: inline-block;    background-position: 2px center;
739    width: 1em;    padding-left: 20px; /* background-image's width is 16px */
   text-align: right;  
   line-height: 0.5em;  
740  }  }
741    
742  dl.switch dt:after {  .result thead + tbody > tr:first-child + tr + tr > th {
743    content: " :";    background-image: url(icons/char-16); /* TODO: new image */
744      background-repeat: no-repeat;
745      background-position: 2px center;
746      padding-left: 20px; /* background-image's width is 16px */
747    }
748    
749    .result thead + tbody > tr:first-child + tr + tr + tr > th {
750      background-image: url(icons/char-16);
751      background-repeat: no-repeat;
752      background-position: 2px center;
753      padding-left: 20px; /* background-image's width is 16px */
754    }
755    
756    .result thead + tbody > tr:first-child + tr + tr + tr + tr > th {
757      background-image: url(icons/syntax-16);
758      background-repeat: no-repeat;
759      background-position: 2px center;
760      padding-left: 20px; /* background-image's width is 16px */
761    }
762    
763    .result thead + tbody > tr:first-child + tr + tr + tr + tr + tr > th {
764      background-image: url(icons/structure-16);
765      background-repeat: no-repeat;
766      background-position: 2px center;
767      padding-left: 20px; /* background-image's width is 16px */
768    }
769    
770    .result thead + tbody > tr:first-child + tr + tr + tr + tr + tr + tr > th {
771      background-image: url(icons/semantics-16);
772      background-repeat: no-repeat;
773      background-position: 2px center;
774      padding-left: 20px; /* background-image's width is 16px */
775  }  }
776    
777  /*  /*
778    
779  Copyright 2007 Wakaba <[email protected]>.  Copyright 2007-2008 Wakaba <[email protected]>.
780    
781  This library is free software; you can redistribute it  This library is free software; you can redistribute it
782  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.15  
changed lines
  Added in v.1.30
[email protected]
 ViewVC Help
Powered by ViewVC 1.1.24