1body { 2 margin: 0; 3 padding: 0; 4 font-family: sans-serif; 5 font-size: 11pt; 6} 7 8body > header { 9 position: relative; 10 height: 36px; 11 display: flex; 12 flex-direction: row; 13 justify-content: space-between; 14 padding: 14px 1.5em 28px 1.5em; 15 z-index: 1; 16 17 background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 70%, rgba(255,255,255,0) 100%); 18 background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 70%,rgba(255,255,255,0) 100%); 19 background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 70%,rgba(255,255,255,0) 100%); 20} 21 22#headerleft { 23 display: flex; 24 flex-direction: row; 25} 26 27#logotext { 28 margin-top: 6px; 29 margin-left: 6px; 30 margin-right: 0em; 31} 32#logo.load, 33#logotext.load { 34 -webkit-animation: fadein-anim 0.4s; 35 -moz-animation: fadein-anim 0.4s; 36 animation: fadein-anim 0.4s; 37} 38@keyframes fadein-anim { 39 from {opacity: 0;} 40 to {opacity: 1;} 41} 42@-moz-keyframes fadein-anim { 43 from {opacity: 0;} 44 to {opacity: 1;} 45} 46@-webkit-keyframes fadein-anim { 47 from {opacity: 0;} 48 to {opacity: 1;} 49} 50#logo.working { 51 -webkit-animation: pulse 4s; 52 -webkit-animation-iteration-count: infinite; 53 -webkit-animation-timing-function: linear; 54 -moz-animation: pulse 4s; 55 -moz-animation-iteration-count: infinite; 56 -moz-animation-timing-function: linear; 57 animation: pulse 4s; 58 animation-iteration-count: infinite; 59 animation-timing-function: linear; 60} 61@-webkit-keyframes pulse { 62 from {opacity: 1;} 63 50% {opacity: 0.5;} 64 to {opacity: 1;} 65} 66@-moz-keyframes pulse { 67 from {opacity: 1;} 68 50% {opacity: 0.5;} 69 to {opacity: 1;} 70} 71@keyframes pulse { 72 from {opacity: 1;} 73 50% {opacity: 0.5;} 74 to {opacity: 1;} 75} 76 77div.menu { 78 position: relative; 79 margin-left: 1.5em; 80 height: 32px; 81 min-width: 7.05em; 82 83 background-color: #3f3f3f; 84 color: #fff; 85 border-radius: 5px; 86 box-shadow: 0px 1px 2px 0px #cccecb; 87 border: #cccecb 1px solid; 88 89 -webkit-animation: menu-anim 0.4s; 90 -webkit-animation-delay: 0.2s; 91 -webkit-animation-fill-mode: forwards; 92 -moz-animation: menu-anim 0.4s; 93 -moz-animation-delay: 0.2s; 94 -moz-animation-fill-mode: forwards; 95 animation: menu-anim 0.4s; 96 animation-delay: 0.2s; 97 animation-fill-mode: forwards; 98 opacity: 0; 99} 100@-webkit-keyframes menu-anim { 101 from { 102 opacity: 0.2; 103 top: 0.5em; 104 } 105 to { 106 opacity: 1; 107 top: 0; 108 } 109} 110@-moz-keyframes menu-anim { 111 from { 112 opacity: 0.2; 113 top: 0.5em; 114 } 115 to { 116 opacity: 1; 117 top: 0; 118 } 119} 120@keyframes menu-anim { 121 from { 122 opacity: 0.2; 123 top: 0.5em; 124 } 125 to { 126 opacity: 1; 127 top: 0; 128 } 129} 130 131div.menu a { 132 text-decoration: none; 133 font-size: 0.95em; 134 color: white; 135 padding-left: 10px; 136 padding-right: 10px; 137 padding-top: 8px; 138 display: inline-block; 139 margin: 0; 140 width: 1em; 141 text-align: center; 142 height: 24px; 143 transition: 0.1s ease; 144} 145div.menu a:hover { 146 background-color: #000; 147 color: #f6f6f6; 148} 149div.menu a.inactive { 150 color: #666; 151 background-color: #3f3f3f; 152} 153div.menu a.inactive:hover { 154 cursor: default; 155} 156div.menu a+a { 157 border-left: #3f3f3f 1px solid; 158} 159div.menu .separate-left { 160 border-left: #666 1px solid; 161} 162div.menu a:first-child { 163 border-top-left-radius: 5px; 164 border-bottom-left-radius: 5px; 165} 166div.menu a:last-child { 167 border-top-right-radius: 5px; 168 border-bottom-right-radius: 5px; 169} 170 171div.transparent { 172 opacity: 0.25; 173} 174 175#headerright { 176 padding-left: 0.5em; 177 width: 50%; 178 display: flex; 179 flex-wrap: nowrap; 180 flex-direction: row; 181 justify-content: space-between; 182} 183 184#search { 185 font-family: sans-serif; 186 font-size: 0.9em; 187 margin: 4px 0.5em 4px 0.3em; 188 padding: 5px; 189 transform: scaleX(0); 190 transform-origin: right; 191 border: 0; 192 border-bottom: 1px solid #cccecb; 193 box-shadow: 0px 1px 1px -1px #cccecb; 194 /*border-radius: 4px;*/ 195 outline: 0; 196 width: 100%; 197 font-size: 1.2em; 198 color: #3f3f3f; 199 transition: 0.2s ease; 200} 201#search.empty { 202 font-family: "FontAwesome"; 203} 204#search.shown { 205 transform: scaleX(1); 206} 207 208#doclink { 209 padding-top: 8px; 210 color: #cccecb; 211} 212#doclink:hover { 213 /*color: #666;*/ 214 color: #3f3f3f; 215} 216#doclink.active { /* Yes, .active is not a typo */ 217 /*color: #3f3f3f;*/ 218 color: black; 219} 220#doclink:focus { 221 outline: none; 222} 223 224#version { 225 color: #aaa; 226 font-size: 11px; 227 position: absolute; 228 top: 5px; 229 left: 155px; 230} 231 232div.login { 233 padding-left: 1em; 234} 235div.login a { 236 text-decoration: none; 237 color: #cccecb; 238} 239div.login a:hover { 240 color: #3f3f3f; 241} 242 243#username { 244 color: #3f3f3f; 245 margin-right: 0.5em; 246 font-size: 0.9em; 247} 248 249#authenticated, #notAuthenticated { 250 padding-top: 8px; 251} 252 253#authenticated #logout { 254 color: #cccecb; 255} 256 257#authenticated #logout:hover { 258 color: #c00; 259} 260 261a.pdf { 262 background-image: url(/media/img/pdf.gif); 263 background-position: left center; 264 background-repeat: no-repeat; 265 padding-left: 24px; 266 font-size: 0.9em; 267 color: white; 268 text-decoration: none; 269 line-height: 20px; 270 display: inline-block; 271} 272 273#about { 274 position:relative; 275 margin: 20px; 276 top: -50px; 277 bottom: 0; 278 left: 0; 279 right: 0; 280 background-color: white; 281 overflow: auto; 282 padding-top: 14px; 283 z-index: 0; 284 padding: 14px 1.5em 28px 1.5em; 285 display: block; 286 /* flex-direction: row; */ 287 288} 289 290#document, 291#code { 292 position: absolute; 293 top: 54px; 294 bottom: 0; 295 left: 0; 296 right: 0; 297 background-color: white; 298 overflow: auto; 299 padding-top: 14px; 300 z-index: 0; 301} 302 303#doc { 304 top: 54px; 305 padding-top: 12px; 306 position: absolute; 307 bottom: 0px; 308 width: 50%; 309 right: 0; 310 border: none; 311 border-left: 2px solid #cccecb; 312 overflow: auto; 313 font-size: 0.9em; 314} 315 316#document { 317 font-size: 0.9em; 318} 319 320#document.doc, 321#code.doc { 322 right: 50%; 323} 324 325#queriesContainer { 326 cursor: vertical-text; 327 animation: fadein-anim 0.4s; 328} 329 330#welcomeContainerAbout { 331 position: absolute; 332 margin-left: auto; 333 margin-right: auto; 334 left: 50%; 335 right: 0%; 336 width: 50%; 337 top: 5em; 338} 339 340#welcomeContainerAbout p { 341 margin-top: 0; 342 margin-bottom: 1em; 343} 344#welcomeContainerAbout a { 345 color: #eee; 346 text-decoration: underline; 347 font-weight: bold; 348} 349 350#welcomeContainerAbout a:hover { 351 color: #fff; 352} 353 354#welcomeContainer { 355 position: absolute; 356 margin-left: auto; 357 margin-right: auto; 358 left: 25%; 359 width: 50%; 360 bottom: 4em; 361} 362#welcomeContainer p { 363 margin-top: 0; 364 margin-bottom: 1em; 365} 366#welcomeContainer a { 367 color: #eee; 368 text-decoration: underline; 369 font-weight: bold; 370} 371#welcomeContainer a:hover { 372 color: #fff; 373} 374 375#welcome, 376#welcomeBrowser { 377 background-color: #3f3f3f; 378 box-shadow: 0px 1px 1px 0px #cccecb; 379 border: #cccecb 1px solid; 380 color: #fff; 381 cursor: default; 382 border-radius: 6px; 383 -moz-border-radius: 6px; 384 -webkit-border-radius: 6px; 385} 386#welcome { 387 padding: 1.5em 1em 0.5em 1.5em; 388} 389#welcome h1 { 390 color: white; 391 font-size: 1.2em; 392 font-weight: bold; 393 margin: 0; 394 margin-bottom: 0.5em; 395 padding: 0; 396} 397#welcome code { 398 border-radius: 4px; 399 border: 1px solid #ccc; 400 background-color: #ececec; 401 color: #3f3f3f; 402 padding: 1px 2px 1px 2px; 403 margin: 1px; 404 font-size: 0.95em; 405} 406#welcomeBrowser { 407 border-color: red; 408 background-color: red; 409 color: white; 410 margin-top: 20px; 411} 412#welcomeBrowser a, 413#welcomeBrowser a:hover { 414 color: white; 415} 416 417#docContent { 418 padding: 10px 20px 20px; 419} 420 421#queries { 422 list-style-type: none; 423 margin: 0; 424 padding: 0; 425 padding-bottom: 50px; 426 padding-left: 0; 427 position: relative; 428} 429 430#queries li { 431 list-style-type: none; 432} 433 434li.query { 435 list-style-type: none; 436 padding-left: 30px; 437 margin-top: 10px; 438 cursor: text; 439 position: relative; 440} 441 442li.query.focused span.move { 443 border-left-width: 2px; 444} 445 446li.query .submitbutton { 447 display: none; 448} 449li.query.focused .submitbutton { 450 display: block; 451 position: absolute; 452 right: 10px; 453 top: 0; 454} 455li.query .submitbutton span { 456 display: inline-block; 457 margin-top: 3px; 458 margin-bottom: 5px; 459 /*margin-left: 10px;*/ 460 background-color: #cccecb; 461 color: white; 462 padding: 5px; 463 border-radius: 5px; 464 -moz-border-radius: 5px; 465 -webkit-border-radius: 5px; 466 width: 10px; 467 line-height: 10px; 468 text-align: center; 469 vertical-align: middle; 470 cursor: pointer; 471} 472li.query .submitbutton span:hover { 473 background-color: #3f3f3f; 474 border: 1px solid #cccecb; 475} 476 477li.query.moving, 478li.query.moving textarea, 479li.query.moving span.delete { 480 cursor: move; 481} 482 483span.move { 484 position: absolute; 485 top: 0; 486 left: 20px; 487 bottom: 0; 488 width: 3px; 489 cursor: move; 490 background-color: white; 491 border: 1px solid #999; 492 border-right-width: 0; 493} 494 495li.query.moving span.move, 496li.query.moving.focused span.move, 497span.move:hover, 498li.query.focused span.move:hover { 499 background-color: #6f3; 500 width: 6px; 501} 502 503li.query.loading span.move { 504 border-color: orange; 505 border-left-width: 2px; 506} 507 508span.delete { 509 position: absolute; 510 top: 0; 511 left: 5px; 512 color: #f66; 513 font-family: sans-serif; 514 cursor: pointer; 515 font-size: 12px; 516} 517 518span.delete:hover { 519 font-weight: bold; 520 color: red; 521} 522 523ul.query { 524 list-style: none; 525 margin: 0; 526 padding: 0; 527 font-family: monospace; 528 font-size: 1em; 529} 530ul.query li { 531 list-style-type: none; 532 list-style-image: none; 533} 534 535ul.query li.request { 536 list-style-type: none; 537 list-style-image: none; 538 margin: 0; 539 padding: 0; 540} 541 542textarea.request { 543 width: 99%; 544 overflow: hidden; 545 border: none; 546 line-height: 17px; 547 color: navy; 548 margin: 0; 549 font-family: monospace; 550 font-size: 1em; 551 background: white; 552 553 /* hide the blue border in Safari */ 554 outline-style: none; 555 outline-width: 0px; 556 557 /* disable resize grid in Safari */ 558 resize: none; 559} 560 561li.out { 562 list-style-type: none; 563 list-style-image: none; 564 margin: 0; 565 padding: 0; 566} 567 568#docContent ul.out, 569ul.out { 570 list-style-type: none; 571 margin: 0; 572 padding: 0; 573 font-family: monospace; 574 font-size: 1em; 575} 576 577li.serverError, 578li.message, 579li.print, 580li.result { 581 margin-left: 10px; 582 padding: 0; 583} 584 585li.serverError { 586 color: #f00; 587 font-size: 0.9em; 588} 589 590li.message { 591 color: #b30; 592 font-size: 0.9em; 593} 594 595li.print { 596 color: #666; 597 font-size: 0.9em; 598} 599 600li.result { 601 list-style-type: none; 602 list-style-image: none; 603 margin-top: 3px; 604 color: black; 605} 606 607li.test .submitbutton { 608 display: none; 609} 610 611li.test p.focused .submitbutton { 612 display: block; 613 position: absolute; 614 right: 10px; 615 top: 0; 616} 617 618li.test .submitbutton span { 619 display: inline-block; 620 margin-top: 3px; 621 margin-bottom: 5px; 622 /*margin-left: 10px;*/ 623 background-color: #999; 624 color: white; 625 padding: 5px; 626 border-radius: 5px; 627 -moz-border-radius: 5px; 628 -webkit-border-radius: 5px; 629 width: 10px; 630 line-height: 10px; 631 text-align: center; 632 vertical-align: middle; 633 cursor: pointer; 634} 635 636li.test .submitbutton span:hover { 637 background-color: #666; 638} 639 640h1 { 641 font-weight: normal; 642 color: #3f3f3f; 643} 644 645form { 646 margin: 0; 647} 648 649form table { 650 margin: 0; 651} 652 653form table th, 654form table td { 655 text-align: left; 656} 657 658form table th { 659 font-weight: normal; 660 color: #666; 661 vertical-align: top; 662 padding-right: 20px; 663 padding-top: 10px; 664} 665 666form table td { 667 padding-top: 5px; 668 padding-right: 10px; 669} 670 671form table input[type="text"], 672form table input[type="password"] { 673 width: 100%; 674 font-size: 12pt; 675} 676 677form table td.submit { 678 padding-top: 10px; 679 text-align: center; 680} 681 682button, 683input[type="button"] { 684 font-size: 13pt; 685} 686 687ul.errorlist { 688 border: 2px solid red; 689 list-style-type: none; 690 margin: 0; 691 margin-bottom: 5px; 692 padding: 2px 5px; 693} 694 695ul.errorlist li { 696 margin: 0; 697 padding: 0; 698 text-align: left; 699} 700 701form table p.helptext { 702 text-align: left; 703 font-size: 0.875em; 704 color: #666; 705 margin: 0; 706 margin-top: 2px; 707} 708 709p.formsuccess { 710 border: 1px solid #6f3; 711 text-align: left; 712 padding: 2px 5px; 713} 714 715div.dialog h1 { 716 text-align: center; 717 margin-top: 0; 718 margin-bottom: 10px; 719 color: #3f3f3f; 720} 721 722div.dialog form table { 723 width: 100%; 724} 725 726div.filelist { 727 height: 250px; 728 overflow: auto; 729 border: 1px solid #999; 730 margin-bottom: 10px; 731} 732 733div.filelist table { 734 width: 382px; 735 border-collapse: collapse; 736} 737 738div.filelist table th, 739div.filelist table td { 740 text-align: left; 741 padding: 1px 5px; 742} 743 744div.filelist table th { 745 font-weight: normal; 746 color: #666; 747 border-bottom: 1px solid #ccc; 748} 749 750div.filelist table a { 751 color: #006; 752 text-decoration: underline; 753} 754 755div.filelist table a:hover { 756 color: #33c; 757} 758