/[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.26 by wakaba, Thu Aug 14 15:50:42 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    .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 {
83      display: block;
84      position: fixed;
85      top: 0.5em;
86      right: 0.5em;
87      width: auto;
88      height: auto;
89      font-size: 90%;
90      background-color: #f4fff4;
91      color: black;
92      padding: 0;
93      line-height: 1.1;
94    }
95    
96    #nav-items li {
97      display: block;
98      list-style: none;
99    margin: 0;    margin: 0;
100    border-style: none;    border-style: none;
101    padding: 0;    padding: 0;
102      text-align: center;
103    }
104    
105    #nav-items li a[href] {
106      display: block;
107      border-style: none;
108      color: inherit;
109      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;    font-weight: bolder;
159    font-family: sans-serif;    font-family: sans-serif;
   font-size: 150%;  
160  }  }
161    
162  h3 {  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;    font-weight: bolder;
212    font-family: sans-serif;    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%;    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;    background-color: #fff0f0;
258    color: black;    color: black;
259  }  }
260    
261  .tree-text q, .tree-cdata q, .tree-comment q {  nav {
262    display: block;    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  q, #source-string li {  .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;    white-space: pre;
364    white-space: -moz-pre-wrap;    white-space: -moz-pre-wrap;
365    white-space: pre-wrap;    white-space: pre-wrap;
366  }  }
367    
368  q, #source-string ol {  q, .source ol {
369    background-color: #f0f0ff;    background-color: #f0f0ff;
370    color: black;    color: black;
371    line-height: 1.5;    line-height: 1.5;
372  }  }
373    
374  q:before, q:after {  /* Document dumps */
   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;  
 }  
375    
376  #document-tree > ol {  .dump > ol {
377    margin-left: 0;    margin-left: 0;
378    padding-left: 0;    padding-left: 0;
379  }  }
380  #document-tree > ol > li {  
381    .dump > ol > li {
382  /*  display: block;  /*  display: block;
383    list-style: none;    list-style: none;
384    margin-left: 0;    margin-left: 0;
385    padding-left: 0; */    padding-left: 0; */
386  }  }
387    
388  #document-tree ol /*ol*/ {  .dump > ol /* ol */ {
389    margin-left: 1em;    margin-left: 1em;
390    padding-left: 0;    padding-left: 0;
391  }  }
392    
393  #document-tree ol /*ol*/ li {  .dump ol /*ol*/ li {
394    margin-left: 0;    margin-left: 0;
395    padding-left: 0.4em;    padding-left: 0.4em;
396  }  }
397    
398  #document-tree ul.attributes {  .dump ul.attributes {
399    margin-left: 3em;    margin-left: 3em;
400    padding: 0;    padding: 0;
401  }  }
402    
403  #document-tree ul.attributes li {  .dump ul.attributes li {
404    display: inline;    display: inline;
405    list-style: none;    list-style: none;
406    margin: 0 2em 0 0;    margin: 0 2em 0 0;
# Line 103  q:before, q:after { Line 409  q:before, q:after {
409    font-size: 90%;    font-size: 90%;
410  }  }
411    
412  #parse-errors dd, #document-errors dd, #error-description h3 {  q:after {
413    margin-left: 20px;    content: " "; /* Make white-space-only quotations visible */
414    padding-left: 40px;    white-space: pre;
415    min-height: 32px;  }
416    background-image: url(large-stop);  
417    background-position: center left;  /* 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;    background-repeat: no-repeat;
433  }  }
434    
435  #identifiers dd, #terms dd {  .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;    margin-left: 20px;
497    padding-left: 20px;    padding-left: 20px;
498    min-height: 20px;    min-height: 20px;
499  }  }
500    
501  #identifiers dd + dd, #terms dd + dd {  #identifiers dd + dd,
502    [id$="-identifiers"] dd + dd {
503    background-image: url(error);    background-image: url(error);
504    background-position: center left;    background-position: center left;
505    background-repeat: no-repeat;    background-repeat: no-repeat;
506  }  }
507    
508  #error-description h3 {  /* Result paragraph */
509    margin-left: 1em;  
510    margin-right: 1em;  .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  #document-errors dd.should, #error-description .should h3 {  .result-para.no-error {
523    background-image: url(large-alert);    background-image: url(ok);
524      background-color: #ddffdd;
525      color: black;
526  }  }
527    
528  #document-errors dd.unsupported {  .result-para.must-errors,
529    margin-left: 60px;  .result-para.should-errors {
530    border: red 0.2em solid;    background-image: url(large-stop);
531    padding: 0.5em;    /* TODO: Use different image for should-errors */
532  }  }
533    
534  #document-errors dd.unsupported, #error-description .unsupported h3 {  /* 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;    background-image: none;
541  }  }
542    
543  #nav-items {  /* Result summary table */
544    display: block;  
545    position: fixed;  .result table {
546    top: 0.5em;    margin-left: auto;
547    right: 0.5em;    margin-right: auto;
548    width: auto;    border: 4px solid #800080;
549    height: auto;    border-collapse: collapse;
550    font-size: 90%;  }
551    background-color: #f4fff4;  
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;    color: black;
   padding: 0;  
   line-height: 1.1;  
574  }  }
575    
576  #nav-items li {  .result th,
577    display: block;  .result td {
578    list-style: none;    border: 1px solid #800080;
579    margin: 0;    padding: 0.2em 0.5em;
   border-style: none;  
   padding: 0;  
580    text-align: center;    text-align: center;
581      empty-cells: show;
582  }  }
583    
584  #nav-items li a[href] {  .result td.subrow {
585    display: block;    border-top-style: hidden;
   border-style: none;  
   color: inherit;  
   text-decoration: none;  
586  }  }
587    
588  img {  .result .uncertain td {
589    border-style: none;    background-color: #e1e1ff;
590      color: black;
591  }  }
592    
593  code {  .result .must-errors,
594    font-family: "Courier New", "Courier", monospace;  .result .uncertain .must-errors {
595    letter-spacing: 0.1em;    background-color: #ffcece;
596    background-color: transparent;    color: black;
597    color: orangered;  }
598    white-space: -moz-pre-wrap;  
599    white-space: pre-wrap;  .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 <[email protected]>  Copyright 2007-2008 Wakaba <[email protected]>.
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.8  
changed lines
  Added in v.1.26
[email protected]
 ViewVC Help
Powered by ViewVC 1.1.24