1 |
@import '/www/style/html/xoxo.css'; |
2 |
|
3 |
.section { |
4 |
display: block; |
5 |
margin: 1em; |
6 |
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 { |
25 |
margin: 0; |
26 |
border-style: none; |
27 |
padding: 0; |
28 |
font-weight: bolder; |
29 |
font-family: sans-serif; |
30 |
font-size: 150%; |
31 |
} |
32 |
|
33 |
h3, th { |
34 |
font-weight: bolder; |
35 |
font-family: sans-serif; |
36 |
font-size: 100%; |
37 |
background-color: #fff0f0; |
38 |
color: black; |
39 |
} |
40 |
|
41 |
.tree-text q, .tree-cdata q, .tree-comment q { |
42 |
display: block; |
43 |
} |
44 |
|
45 |
q, #source-string li { |
46 |
white-space: pre; |
47 |
white-space: -moz-pre-wrap; |
48 |
white-space: pre-wrap; |
49 |
} |
50 |
|
51 |
q, #source-string ol { |
52 |
background-color: #f0f0ff; |
53 |
color: black; |
54 |
line-height: 1.5; |
55 |
} |
56 |
|
57 |
q:before, q:after { |
58 |
content: ""; |
59 |
} |
60 |
|
61 |
#parse-errors dl:empty:before { |
62 |
content: "This document has no parse error."; |
63 |
font-style: italic; |
64 |
} |
65 |
|
66 |
#document-errors dl:empty:before { |
67 |
content: "This document has no document error."; |
68 |
font-style: italic; |
69 |
} |
70 |
|
71 |
#document-tree > ol { |
72 |
margin-left: 0; |
73 |
padding-left: 0; |
74 |
} |
75 |
#document-tree > ol > li { |
76 |
/* display: block; |
77 |
list-style: none; |
78 |
margin-left: 0; |
79 |
padding-left: 0; */ |
80 |
} |
81 |
|
82 |
#document-tree ol /*ol*/ { |
83 |
margin-left: 1em; |
84 |
padding-left: 0; |
85 |
} |
86 |
|
87 |
#document-tree ol /*ol*/ li { |
88 |
margin-left: 0; |
89 |
padding-left: 0.4em; |
90 |
} |
91 |
|
92 |
#document-tree ul.attributes { |
93 |
margin-left: 3em; |
94 |
padding: 0; |
95 |
} |
96 |
|
97 |
#document-tree ul.attributes li { |
98 |
display: inline; |
99 |
list-style: none; |
100 |
margin: 0 2em 0 0; |
101 |
padding: 0; |
102 |
text-indent: 0; |
103 |
font-size: 90%; |
104 |
} |
105 |
|
106 |
#dump-manifest tbody:empty { |
107 |
display: table-caption; |
108 |
caption-side: bottom; |
109 |
} |
110 |
|
111 |
#dump-manifest tbody:empty::after { |
112 |
content: "This cache manifest contains no oppotunistic caching namespace."; |
113 |
font-style: italic; |
114 |
} |
115 |
|
116 |
#dump-manifest dt:first-child + dt::before, |
117 |
#dump-manifest dt:last-child::after { |
118 |
display: block; |
119 |
content: "This cache manifest contains no explicit entry."; |
120 |
margin-left: 2.5em; |
121 |
font-style: italic; |
122 |
font-weight: normal; |
123 |
font-family: serif; |
124 |
} |
125 |
|
126 |
#dump-manifest dt:last-child::after { |
127 |
content: "This cache manifest has an empty online whitelist."; |
128 |
} |
129 |
|
130 |
#parse-errors dd, #document-errors dd, #error-description h3, |
131 |
#result-para { |
132 |
margin-left: 20px; |
133 |
padding-left: 40px; |
134 |
min-height: 32px; |
135 |
background-image: url(large-stop); |
136 |
background-position: center left; |
137 |
background-repeat: no-repeat; |
138 |
} |
139 |
|
140 |
#levels-table tbody th:first-child { |
141 |
padding-left: 42px; |
142 |
min-height: 32px; |
143 |
background-image: url(large-stop); |
144 |
background-position: 5px center; |
145 |
background-repeat: no-repeat; |
146 |
text-align: left; |
147 |
} |
148 |
|
149 |
#identifiers dd, #terms dd { |
150 |
margin-left: 20px; |
151 |
padding-left: 20px; |
152 |
min-height: 20px; |
153 |
} |
154 |
|
155 |
#identifiers dd + dd |
156 |
/* , #terms dd + dd */ /* Now allowed - HTML5 revision 1467 */ |
157 |
{ |
158 |
background-image: url(error); |
159 |
background-position: center left; |
160 |
background-repeat: no-repeat; |
161 |
} |
162 |
|
163 |
#error-description h3 { |
164 |
margin-left: 1em; |
165 |
margin-right: 1em; |
166 |
} |
167 |
|
168 |
#parse-errors dd.level-s, #document-errors dd.level-s, |
169 |
#parse-errors dd.should, |
170 |
#document-errors dd.should, #error-description .should h3, |
171 |
#result-para.SEE-RESULT, #levels-table #level-s th { |
172 |
background-image: url(large-stop); |
173 |
} |
174 |
|
175 |
#parse-errors dd.level-w, #document-errors dd.level-w, |
176 |
#parse-errors dd.warning, |
177 |
#document-errors dd.warning, #error-description .warning h3, |
178 |
#levels-table #level-w th { |
179 |
background-image: url(large-alert); |
180 |
} |
181 |
|
182 |
#parse-errors dd.level-i, #document-errors dd.level-i, |
183 |
#error-description .level-i h3, |
184 |
#levels-table #level-i th { |
185 |
background-image: url(large-info); |
186 |
} |
187 |
|
188 |
#parse-errors dd.level-u, #document-errors dd.level-u, |
189 |
#parse-errors dd.level-unsupported, #document-errors dd.level-unsupported, |
190 |
#parse-errors dd.unsupported, |
191 |
#document-errors dd.unsupported { |
192 |
margin-left: 60px; |
193 |
border: red 0.2em solid; |
194 |
padding: 0.5em; |
195 |
} |
196 |
|
197 |
#parse-errors dd.unsupported, |
198 |
#document-errors dd.unsupported, #error-description .unsupported h3, |
199 |
#result-para.uncertain, |
200 |
#parse-errors dd.level-u, #document-errors dd.level-u, |
201 |
#levels-table #level-u th { |
202 |
background-image: none; |
203 |
} |
204 |
|
205 |
.error-category-charset { |
206 |
background-image: url(icons/char-16); |
207 |
background-position: left center; |
208 |
background-repeat: no-repeat; |
209 |
padding-left: 20px; |
210 |
} |
211 |
|
212 |
.format-charset, .tokenizer-error, .parse-error { |
213 |
background-image: url(icons/syntax-16); |
214 |
background-position: left center; |
215 |
background-repeat: no-repeat; |
216 |
padding-left: 20px; |
217 |
} |
218 |
|
219 |
.content-model-error, .attribute-error, .attribute-value-error, |
220 |
.attribute-value-warning, .table-model-error { |
221 |
background-image: url(icons/structure-16); |
222 |
background-position: left center; |
223 |
background-repeat: no-repeat; |
224 |
padding-left: 20px; |
225 |
} |
226 |
|
227 |
#result-para.PASS { |
228 |
background-image: url(ok); |
229 |
} |
230 |
|
231 |
#nav-items { |
232 |
display: block; |
233 |
position: fixed; |
234 |
top: 0.5em; |
235 |
right: 0.5em; |
236 |
width: auto; |
237 |
height: auto; |
238 |
font-size: 90%; |
239 |
background-color: #f4fff4; |
240 |
color: black; |
241 |
padding: 0; |
242 |
line-height: 1.1; |
243 |
} |
244 |
|
245 |
#nav-items li { |
246 |
display: block; |
247 |
list-style: none; |
248 |
margin: 0; |
249 |
border-style: none; |
250 |
padding: 0; |
251 |
text-align: center; |
252 |
} |
253 |
|
254 |
#nav-items li a[href] { |
255 |
display: block; |
256 |
border-style: none; |
257 |
color: inherit; |
258 |
text-decoration: none; |
259 |
} |
260 |
|
261 |
body[data-scripted] #nav-items { |
262 |
display: none; |
263 |
} |
264 |
|
265 |
img { |
266 |
border-style: none; |
267 |
} |
268 |
|
269 |
code { |
270 |
font-family: "Courier New", "Courier", monospace; |
271 |
letter-spacing: 0.1em; |
272 |
background-color: transparent; |
273 |
color: orangered; |
274 |
white-space: -moz-pre-wrap; |
275 |
white-space: pre-wrap; |
276 |
} |
277 |
|
278 |
.example { |
279 |
background-color: #ececff; |
280 |
} |
281 |
|
282 |
pre.example { |
283 |
margin-left: 1em; |
284 |
margin-right: 1em; |
285 |
padding: 0.2em 0.5em; |
286 |
} |
287 |
|
288 |
.example.bad { |
289 |
background-color: #fff7f7; |
290 |
} |
291 |
|
292 |
code.example.bad { |
293 |
color: inherit; |
294 |
background-color: #ffeeee; |
295 |
} |
296 |
|
297 |
h3 code.example.bad { |
298 |
color: orangered; |
299 |
background-color: transparent; |
300 |
} |
301 |
|
302 |
pre.example::before { |
303 |
content: "Example"; |
304 |
display: block; |
305 |
color: #b0b0ff; |
306 |
background-color: transparent; |
307 |
font-weight: bolder; |
308 |
font-family: sans-serif; |
309 |
} |
310 |
|
311 |
pre.example.html::before { |
312 |
content: "HTML Example"; |
313 |
} |
314 |
|
315 |
pre.example.xml::before { |
316 |
content: "XML Example"; |
317 |
} |
318 |
|
319 |
pre.example.manifest::before { |
320 |
content: "Cache Manifest Example"; |
321 |
} |
322 |
|
323 |
pre.example.bad::before { |
324 |
content: "Bad Example"; |
325 |
color: #ffc1c1; |
326 |
} |
327 |
|
328 |
pre.example.bad.html::before { |
329 |
content: "HTML Bad Example"; |
330 |
} |
331 |
|
332 |
pre.example.bad.xml::before { |
333 |
content: "XML Bad Example"; |
334 |
} |
335 |
|
336 |
pre.example.bad.manifest::before { |
337 |
content: "Cache Manifest Bad Example"; |
338 |
} |
339 |
|
340 |
.rfc2119 { |
341 |
border-style: none; |
342 |
text-transform: lowercase; |
343 |
font-variant: small-caps; |
344 |
font-style: normal; |
345 |
text-decoration: none; |
346 |
font-weight: normal; |
347 |
font-family: sans-serif; |
348 |
} |
349 |
|
350 |
#result-summary table { |
351 |
margin-left: auto; |
352 |
margin-right: auto; |
353 |
border: 3px solid #800080; |
354 |
border-collapse: collapse; |
355 |
} |
356 |
|
357 |
#result-summary tbody, colgroup { |
358 |
border: 3px solid #800080; |
359 |
} |
360 |
|
361 |
#result-summary th { |
362 |
background-color: #fff0f0; |
363 |
color: black; |
364 |
} |
365 |
|
366 |
#result-summary th, #result-summary td { |
367 |
border: 1px solid #800080; |
368 |
padding: 0.2em 0.5em; |
369 |
text-align: center; |
370 |
empty-cells: show; |
371 |
} |
372 |
|
373 |
.uncertain td, p.uncertain, |
374 |
#level-u, #level-u th { |
375 |
background-color: #e1e1ff; |
376 |
color: black; |
377 |
} |
378 |
|
379 |
.FAIL, .uncertain td.FAIL, #level-m, #level-m th { |
380 |
background-color: #ffcece; |
381 |
color: black; |
382 |
} |
383 |
|
384 |
.SEE-RESULT, .uncertain td.SEE-RESULT, #level-s, #level-s th { |
385 |
background-color: #e1e1ff; |
386 |
color: black; |
387 |
} |
388 |
|
389 |
.PASS, #level-w, #level-w th, |
390 |
#level-i, #level-i th { |
391 |
background-color: #ddffdd; |
392 |
color: black; |
393 |
} |
394 |
|
395 |
#result-para { |
396 |
padding-top: 0.2em; |
397 |
padding-bottom: 0.2em; |
398 |
padding-right: 1em; |
399 |
} |
400 |
|
401 |
/* dl.switch from WHATWG specification style sheet */ |
402 |
|
403 |
dl.switch { |
404 |
padding-left: 2em; |
405 |
} |
406 |
|
407 |
dl.switch dt { |
408 |
display: block; |
409 |
text-indent: -1.5em; |
410 |
font-weight: bolder; |
411 |
font-family: sans-serif; |
412 |
font-style: normal; |
413 |
} |
414 |
|
415 |
dl.switch dt:before { |
416 |
content: '\21AA'; |
417 |
padding: 0 0.5em 0 0; |
418 |
display: inline-block; |
419 |
width: 1em; |
420 |
text-align: right; |
421 |
line-height: 0.5em; |
422 |
} |
423 |
|
424 |
dl.switch dt:after { |
425 |
content: " :"; |
426 |
} |
427 |
|
428 |
mark { |
429 |
background-color: #ffff4d; |
430 |
} |
431 |
|
432 |
/* Tab navigation */ |
433 |
|
434 |
body[data-scripted] > h1, |
435 |
body[data-scripted] > #input > h2, |
436 |
body[data-scripted] .section.subdoc > h2, |
437 |
body[data-scripted] .section.subdoc > h3, |
438 |
body[data-scripted] .section.subdoc > h4, |
439 |
body[data-scripted] .section.subdoc > h5, |
440 |
body[data-scripted] .section.subdoc > h6 { |
441 |
float: left; |
442 |
font-size: 100%; |
443 |
margin: 0; |
444 |
padding: 0 1em; |
445 |
} |
446 |
|
447 |
body[data-scripted] > #input > h2, |
448 |
body[data-scripted] .section.subdoc > h2, |
449 |
body[data-scripted] .section.subdoc > h3, |
450 |
body[data-scripted] .section.subdoc > h4, |
451 |
body[data-scripted] .section.subdoc > h5, |
452 |
body[data-scripted] .section.subdoc > h6 { |
453 |
margin-right: 1em; |
454 |
padding: 0.3em 0; |
455 |
border: thin hidden; |
456 |
background-color: transparent; |
457 |
color: inherit; |
458 |
} |
459 |
|
460 |
nav { |
461 |
display: block; |
462 |
z-index: 100; |
463 |
} |
464 |
|
465 |
.section nav { |
466 |
margin-left: 1em; |
467 |
} |
468 |
|
469 |
nav ul { |
470 |
margin: 0; |
471 |
padding: 1em 0 0 0; |
472 |
} |
473 |
|
474 |
#input nav ul, |
475 |
.section.subdoc nav ul { |
476 |
padding-top: 0; |
477 |
} |
478 |
|
479 |
nav ul li { |
480 |
display: inline; |
481 |
margin: 0; |
482 |
padding: 0 0.3em 0 0; |
483 |
line-height: 2; |
484 |
} |
485 |
|
486 |
nav a { |
487 |
display: inline; |
488 |
padding: 0.1em 0.3em; |
489 |
text-decoration: none; |
490 |
color: inherit; |
491 |
border: thin outset gray; |
492 |
-moz-border-radius: 0.2em; |
493 |
min-width: 4em; |
494 |
text-align: center; |
495 |
} |
496 |
|
497 |
nav [data-active] a { |
498 |
border-style: inset; |
499 |
background-color: #C0C0C0; |
500 |
} |
501 |
|
502 |
.section { |
503 |
clear: both; |
504 |
} |
505 |
|
506 |
body[data-scripted] > .section, |
507 |
body[data-scripted] > #input > .section, |
508 |
body[data-scripted] .section.subdoc > .section { |
509 |
position: absolute; |
510 |
top: 100px; /* h1 > img's height is 90px */ |
511 |
bottom: 0; |
512 |
left: 0; |
513 |
right: 0; |
514 |
min-height: 10em; |
515 |
overflow: auto; |
516 |
} |
517 |
|
518 |
body[data-scripted] > #input > .section, |
519 |
body[data-scripted] .section.subdoc > .section { |
520 |
top: 2em; |
521 |
} |
522 |
|
523 |
/* details widgets */ |
524 |
|
525 |
.details .legend { |
526 |
font-weight: bolder; |
527 |
} |
528 |
|
529 |
.details .legend:after { |
530 |
content: "..."; |
531 |
} |
532 |
|
533 |
.details.open .legend:after, |
534 |
body:not([data-scripted]) .details.default .legend:after { |
535 |
content: ":"; |
536 |
} |
537 |
|
538 |
body[data-scripted] .details .legend { |
539 |
cursor: pointer; |
540 |
} |
541 |
|
542 |
body[data-scripted] .details > div { |
543 |
display: none; |
544 |
} |
545 |
|
546 |
/* Data input forms */ |
547 |
|
548 |
input[type=url] { |
549 |
width: 90%; |
550 |
min-width: 30em; |
551 |
} |
552 |
|
553 |
textarea { |
554 |
width: 95%; |
555 |
min-width: 30em; |
556 |
height: 20em; |
557 |
} |
558 |
|
559 |
/* |
560 |
|
561 |
Copyright 2007-2008 Wakaba <w@suika.fam.cx>. |
562 |
|
563 |
This library is free software; you can redistribute it |
564 |
and/or modify it under the same terms as Perl itself. |
565 |
|
566 |
$Date: 2008/08/14 07:19:44 $ |
567 |
|
568 |
*/ |