/[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.25 by wakaba, Thu Aug 14 11:58:32 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 -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  q, #source-string li {  /* details widgets */
325    
326    .details .legend {
327      font-weight: bolder;
328    }
329    
330    .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: "";  
 }  
375    
376  #parse-errors dl:empty:before {  .dump > ol {
   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 {  
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;    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;
433    }
434    
435    .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  #identifiers dd, #terms dd {  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    
509    
510    
511    
512    
513    #error-description h3, #result-para {
514      margin-left: 20px;
515      padding-left: 40px;
516      min-height: 32px;
517      background-image: url(large-stop);
518      background-position: center left;
519      background-repeat: no-repeat;
520    }
521    #levels-table tbody th:first-child {
522      padding-left: 42px;
523      min-height: 32px;
524      background-image: url(large-stop);
525      background-position: 5px center;
526      background-repeat: no-repeat;
527      text-align: left;
528    }
529    
530  #error-description h3 {  #error-description h3 {
531    margin-left: 1em;    margin-left: 1em;
532    margin-right: 1em;    margin-right: 1em;
533  }  }
534    
535  #document-errors dd.should, #error-description .should h3 {  
536    background-image: url(large-alert);  .format-charset, .tokenizer-error, .parse-error {
537      background-image: url(icons/syntax-16);
538      background-position: left center;
539      background-repeat: no-repeat;
540      padding-left: 20px;  
541  }  }
542    
543  #document-errors dd.unsupported {  .content-model-error, .attribute-error, .attribute-value-error,
544    margin-left: 60px;  .attribute-value-warning, .table-model-error {
545    border: red 0.2em solid;    background-image: url(icons/structure-16);
546    padding: 0.5em;    background-position: left center;
547      background-repeat: no-repeat;
548      padding-left: 20px;
549  }  }
550    
551  #document-errors dd.unsupported, #error-description .unsupported h3 {  #result-para.PASS {
552    background-image: none;    background-image: url(ok);
553    }
554    #result-summary table {
555      margin-left: auto;
556      margin-right: auto;
557      border: 3px solid #800080;
558      border-collapse: collapse;
559  }  }
560    
561  #nav-items {  #result-summary tbody, colgroup {
562    display: block;    border: 3px solid #800080;
563    position: fixed;  }
564    top: 0.5em;  
565    right: 0.5em;  #result-summary th {
566    width: auto;    background-color: #fff0f0;
   height: auto;  
   font-size: 90%;  
   background-color: #f4fff4;  
567    color: black;    color: black;
   padding: 0;  
   line-height: 1.1;  
568  }  }
569    
570  #nav-items li {  #result-summary th, #result-summary td {
571    display: block;    border: 1px solid #800080;
572    list-style: none;    padding: 0.2em 0.5em;
   margin: 0;  
   border-style: none;  
   padding: 0;  
573    text-align: center;    text-align: center;
574      empty-cells: show;
575  }  }
576    
577  #nav-items li a[href] {  .uncertain td, p.uncertain,
578    display: block;  #level-u, #level-u th {
579    border-style: none;    background-color: #e1e1ff;
580    color: inherit;    color: black;
   text-decoration: none;  
581  }  }
582    
583  img {  .FAIL, .uncertain td.FAIL, #level-m, #level-m th {
584    border-style: none;    background-color: #ffcece;
585      color: black;
586  }  }
587    
588  code {  .SEE-RESULT, .uncertain td.SEE-RESULT, #level-s, #level-s th {
589    font-family: "Courier New", "Courier", monospace;    background-color: #e1e1ff;
590    letter-spacing: 0.1em;    color: black;
   background-color: transparent;  
   color: orangered;  
   white-space: -moz-pre-wrap;  
   white-space: pre-wrap;  
591  }  }
592    
593    .PASS, #level-w, #level-w th,
594    #level-i, #level-i th {
595      background-color: #ddffdd;
596      color: black;
597    }
598    
599    #result-para {
600      padding-top: 0.2em;
601      padding-bottom: 0.2em;
602      padding-right: 1em;
603    }
604    
605    
606  /*  /*
607    
608  Copyright 2007 Wakaba <[email protected]>  Copyright 2007-2008 Wakaba <[email protected]>.
609    
610  This library is free software; you can redistribute it  This library is free software; you can redistribute it
611  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.25
[email protected]
 ViewVC Help
Powered by ViewVC 1.1.24