/[suikacvs]/test/html-webhacc/cc-style.css
Suika

Contents of /test/html-webhacc/cc-style.css

Parent Directory Parent Directory | Revision Log Revision Log


Revision 1.24 - (show annotations) (download) (as text)
Thu Aug 14 09:16:52 2008 UTC (16 years, 3 months ago) by wakaba
Branch: MAIN
Changes since 1.23: +22 -6 lines
File MIME type: text/css
++ ChangeLog	14 Aug 2008 09:14:23 -0000
	* cc-script.js, cc-style.css: Support for tab styling
	of subdoc sections.

	* cc-script.js (onbodyload): Scroll to the pointed
	element, if possible.

2008-08-14  Wakaba  <wakaba@suika.fam.cx>

++ html/WebHACC/ChangeLog	14 Aug 2008 09:16:45 -0000
	* Input.pm (id_prefix): Use the parent subdoc's id_prefix
	as the prefix of the subdoc id_prefix (e.g. subdoc-1-subdoc-1-
	for subdoc #1.1).
	(start_section): Set the role of the section element as subdoc.

	* Output.pm (start_section): Support for "subdoc" role.
	Use parent input's id_prefix as parent_id.

2008-08-14  Wakaba  <wakaba@suika.fam.cx>

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 */

admin@suikawiki.org
ViewVC Help
Powered by ViewVC 1.1.24