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