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