| Textpattern | PHP Cross Reference | Content Management Systems |
Description: Add the correct display in various browsers.
1 /* ========================================================================== 2 Styling and layout for all media 3 ========================================================================== */ 4 /* HTML5 display definitions 5 ========================================================================== */ 6 /** 7 * Add the correct display in various browsers. 8 */ 9 article, 10 aside, 11 details, 12 figcaption, 13 figure, 14 footer, 15 header, 16 main, 17 menu, 18 nav, 19 section { 20 display: block; 21 } 22 23 summary { 24 display: list-item; 25 } 26 27 /** 28 * Add the correct display in IE 11. 29 */ 30 canvas { 31 display: inline-block; 32 } 33 34 template { 35 display: none; 36 } 37 38 /** 39 * Remove tap delay in modern browsers. 40 */ 41 a, 42 input, 43 button { 44 -ms-touch-action: none; 45 touch-action: none; 46 } 47 48 /* Float clearing 49 ========================================================================== */ 50 /** 51 * Clearfix using the 'A new micro clearfix hack' method. 52 * 53 * More info: http://nicolasgallagher.com/micro-clearfix-hack/ 54 */ 55 .clearfix::after { 56 display: table; 57 clear: both; 58 content: ""; 59 } 60 61 /** 62 * Basic float clearer. 63 */ 64 .clear { 65 clear: both; 66 } 67 68 /* ========================================================================== 69 Styling and layout for screen media 70 ========================================================================== */ 71 @media screen { 72 /* Links 73 ========================================================================== */ 74 /** 75 * 1. Specify link colour. 76 * 2. Remove default underline style from non-hover state links. 77 * 3. Interrupt the decoration line to let the shape of the text show through 78 * in supported browsers. 79 * 4. Expanded CSS level 3 `text-decoration` property in supported browsers, 80 * older browsers will fallback to legacy `text-decoration` property. 81 * 5. Hide `.busy` class links when processing AJAX. 82 */ 83 a { 84 /* 1 */ 85 color: #004cbf; 86 /* 2 */ 87 text-decoration: none; 88 /* 3 */ 89 -webkit-text-decoration-skip: ink edges; 90 text-decoration-skip: ink edges; 91 } 92 a:hover, a:active { 93 outline: 0; 94 color: #0066ff; 95 text-decoration: underline; 96 /* 4 */ 97 text-decoration: #004cbf solid underline; 98 } 99 a:focus { 100 outline: thin solid #0066ff; 101 } 102 a.busy { 103 /* 5 */ 104 visibility: hidden; 105 } 106 /** 107 * Additional styling for popup help links. 108 * 109 * Example HTML: 110 * 111 * <a class="pophelp">i</a> 112 */ 113 .pophelp, 114 .pophelpsubtle { 115 padding: 0 0.4em; 116 border: 1px solid #e0e0e0; 117 border-radius: 50%; 118 font-weight: normal; 119 } 120 .pophelp:focus, 121 .pophelpsubtle:focus { 122 border-color: #0066ff; 123 outline: 0; 124 } 125 /** 126 * Additional styling for popup help links in table headers. 127 */ 128 .txp-list thead th a.pophelp { 129 display: inline; 130 margin: 0; 131 padding: 0 0.4em; 132 border-color: #cccccc; 133 color: #004cbf; 134 } 135 .txp-list thead th a.pophelp:hover { 136 color: #0066ff; 137 text-decoration: underline; 138 } 139 .txp-list thead th a.pophelp:focus { 140 border-color: #0066ff; 141 } 142 /** 143 * Reduce risk of render glitches in links on RTL languages. 144 */ 145 [dir="rtl"] a { 146 unicode-bidi: embed; 147 } 148 /* Typography 149 ========================================================================== */ 150 /** 151 * Establish baseline. 152 */ 153 html { 154 font-size: 13px; 155 line-height: 20px; 156 } 157 /** 158 * Global font and colour. 159 */ 160 body { 161 font-family: Helvetica, Arial, sans-serif; 162 } 163 /** 164 * `h1` headings. 165 * 166 * Example HTML: 167 * 168 * <h1>Heading</h1> 169 * <h1> 170 * Heading 171 * <a class="pophelp">i</a> 172 * </h1> 173 */ 174 h1 { 175 margin: 0.26923076923077em 0 0.5em; 176 font-size: 26px; 177 line-height: 1.23076923076923; 178 } 179 h1 .pophelp { 180 font-size: 13px; 181 } 182 /** 183 * Omit margin below heading on image edit, pages, forms, styles, prefs panels. 184 */ 185 #page-image .txp-heading, 186 #page-form .txp-heading, 187 #page-page .txp-heading, 188 #page-css .txp-heading, 189 #page-prefs .txp-heading { 190 margin-bottom: 0; 191 } 192 /** 193 * `h2` headings. 194 * 195 * Example HTML: 196 * 197 * <h2>Heading</h2> 198 * <h2> 199 * Heading 200 * <a class="pophelp">i</a> 201 * </h2> 202 */ 203 h2 { 204 margin: 0.5em 0 0.72222222222222em; 205 font-size: 18px; 206 line-height: 1.33333333333333; 207 } 208 h2 .pophelp { 209 font-size: 13px; 210 } 211 /** 212 * `h3` headings. 213 */ 214 h3 { 215 margin: 0.86666666666667em 0; 216 font-size: 15px; 217 line-height: 1.4; 218 } 219 /** 220 * Normalize `h4`, `h5` and `h6` headings (these are effectively unused). 221 */ 222 h4, 223 h5, 224 h6 { 225 margin: 1em 0; 226 font-size: 13px; 227 } 228 /** 229 * Add the correct font weight in Chrome, Edge, and Safari. 230 */ 231 b, 232 strong { 233 font-weight: bolder; 234 } 235 /** 236 * Add vertical margin to addresses. 237 */ 238 address { 239 margin: 1em 0; 240 } 241 /** 242 * Additional styling for blockquotes. 243 */ 244 blockquote { 245 margin: 1em 0; 246 padding: 0 0 0 1em; 247 border-left: 3px solid #cccccc; 248 } 249 /** 250 * 1. Remove the bottom border in Firefox. 251 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 252 */ 253 abbr[title] { 254 /* 1 */ 255 border-bottom: 0; 256 /* 2 */ 257 text-decoration: underline; 258 /* 2 */ 259 text-decoration: underline dotted; 260 } 261 /** 262 * Add the correct font style. 263 */ 264 dfn { 265 font-style: italic; 266 } 267 /** 268 * Consistent styling for `mark` and `var` tags. 269 */ 270 mark, 271 var { 272 padding: 1px 0.23076923076923em; 273 border-radius: 0.25em; 274 background: #e6f0ff; 275 color: #333333; 276 } 277 /** 278 * Harmonize size and style of computer text. 279 */ 280 pre, 281 code, 282 kbd, 283 samp, 284 .code { 285 font-family: Menlo, Consolas, Monaco, monospace; 286 } 287 code, 288 kbd, 289 samp { 290 padding: 1px 0.23076923076923em; 291 border: 1px solid #e3e3e3; 292 border-radius: 0.25em; 293 background: #f7f7f7; 294 } 295 /** 296 * Additional stylng for preformatted text/code. 297 * 298 * 1. Don't wrap long words. 299 * 2. Contain overflow in all browsers. 300 * 3. Set tab size to 4 spaces. 301 */ 302 pre { 303 margin: 1em 0; 304 padding: 1em; 305 border: 1px solid #e3e3e3; 306 border-radius: 0.25em; 307 background: #f7f7f7; 308 /* 1 */ 309 word-wrap: normal; 310 /* 2 */ 311 overflow-x: auto; 312 /* 3 */ 313 -moz-tab-size: 4; 314 tab-size: 4; 315 } 316 /** 317 * Override `code` styling for code display within preformatted text areas and 318 * form text areas. 319 */ 320 pre code, 321 .code code, 322 code.body, 323 code.excerpt { 324 padding: 0; 325 border: 0; 326 border-radius: 0; 327 background: none; 328 text-align: left; 329 white-space: pre; 330 word-spacing: normal; 331 word-break: normal; 332 word-wrap: normal; 333 direction: ltr; 334 -webkit-hyphens: none; 335 -ms-hyphens: none; 336 hyphens: none; 337 } 338 /** 339 * Prevent `sub` and `sup` affecting `line-height` in all browsers. 340 */ 341 sub, 342 sup.footnote, 343 sup { 344 position: relative; 345 font-size: 0.69230769230769em; 346 line-height: 0; 347 vertical-align: baseline; 348 } 349 sup { 350 top: -0.5em; 351 } 352 sub { 353 bottom: -0.33333333333333em; 354 } 355 /** 356 * Harmonize size and style of small text. 357 */ 358 small, 359 figcaption, 360 tfoot, 361 .footnote, 362 .txp-form-field-instructions, 363 .txp-footer { 364 font-size: 11px; 365 line-height: 16px; 366 } 367 figcaption, 368 tfoot, 369 .footnote, 370 .txp-form-field-instructions { 371 color: #777777; 372 } 373 figcaption { 374 margin-top: 0.5em; 375 font-style: italic; 376 } 377 /* Support for non-latin languages 378 ========================================================================== */ 379 /** 380 * Preferred font for Japanese language. 381 */ 382 html[lang="ja-jp"] { 383 font-family: "Hiragino Kaku Gothic Pro", Meiryo, sans-serif; 384 } 385 /** 386 * Preferred font for Korean language. 387 */ 388 html[lang="ko-kr"] { 389 font-family: GulimChe, Gulim, sans-serif; 390 } 391 /** 392 * Preferred font for Chinese (PRC) language. 393 */ 394 html[lang="zh-cn"] { 395 font-family: SimHei, sans-serif; 396 } 397 /** 398 * Preferred font for Chinese (Taiwan) language. 399 */ 400 html[lang="zh-tw"] { 401 font-family: PMingLiU, sans-serif; 402 } 403 /* Embedded content 404 ========================================================================== */ 405 /** 406 * Add the correct display in IE 11. 407 */ 408 audio, 409 video { 410 display: inline-block; 411 } 412 /** 413 * Make embedded elements responsive. 414 */ 415 img, 416 video { 417 max-width: 100%; 418 height: auto; 419 } 420 /** 421 * Images. 422 * 423 * 1. Remove the gap between images and the bottom of their containers. 424 * 425 * Image alignment (compatible with Textile markup syntax). 426 * 427 * Example HTML: 428 * 429 * <img class="align-left"> 430 * <img class="align-right"> 431 * <img class="align-center"> 432 */ 433 img { 434 /* 1 */ 435 vertical-align: middle; 436 } 437 img.align-left { 438 margin: 1em 1em 1em 0; 439 float: left; 440 } 441 img.align-right { 442 margin: 1em 0 1em 1em; 443 float: right; 444 } 445 img.align-center { 446 display: block; 447 margin: 1em auto; 448 } 449 /** 450 * Swap image alignment right/left positions in RTL languages. 451 */ 452 [dir="rtl"] img.align-left { 453 margin: 1em 0 1em 1em; 454 float: right; 455 } 456 [dir="rtl"] img.align-right { 457 margin: 1em 1em 1em 0; 458 float: left; 459 } 460 /** 461 * Address margin not present in Safari. 462 */ 463 figure { 464 margin: 0; 465 } 466 /** 467 * Hide the overflow in IE 11. 468 */ 469 svg:not(:root) { 470 overflow: hidden; 471 } 472 /** 473 * Content images and content images with links. 474 * 475 * Example HTML: 476 * 477 * <a> 478 * <img class="content-image"> 479 * </a> 480 */ 481 .content-image { 482 border: solid 1px #cccccc; 483 background: #ffffff; 484 box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.2); 485 } 486 a:hover .content-image { 487 border-color: #0066ff; 488 } 489 a:focus .content-image { 490 border-color: #0066ff; 491 } 492 /* Messages 493 ========================================================================== */ 494 /** 495 * Alert labels. 496 * 497 * Example HTML: 498 * 499 * <span class="success"> 500 * <span class="error"> 501 * <strong class="success"> 502 * <strong class="error"> 503 */ 504 .success, 505 .warning, 506 .error, 507 .information { 508 padding: 1px 0.23076923076923em; 509 border-radius: 0.25em; 510 } 511 .success { 512 background: #dff0d8; 513 color: #238c23; 514 } 515 .warning { 516 background: #f7eedb; 517 color: #cc8c00; 518 } 519 .error { 520 background: #f2dede; 521 color: #9d261d; 522 } 523 .information { 524 background: #e7f6fc; 525 color: #3a87ad; 526 } 527 /** 528 * Highlight background. 529 * 530 * Example HTML: 531 * 532 * <table> 533 * <tr> 534 * <td class="highlight></td> 535 * <td></td> 536 * </tr> 537 * </table> 538 */ 539 .highlight { 540 background: #fff9e1; 541 } 542 /** 543 * Alert boxes. 544 * 545 * Example HTML: 546 * 547 * <p class="alert-block success"> 548 * <p class="alert-block error"> 549 */ 550 .alert-block { 551 padding: 0.53846153846154em 1em; 552 clear: both; 553 border: 1px solid; 554 } 555 .alert-block.success { 556 border-color: #a3d48e; 557 } 558 .alert-block.warning { 559 border-color: #e4c788; 560 } 561 .alert-block.error { 562 border-color: #e1b2b2; 563 } 564 .alert-block.information { 565 border-color: #b1e2f5; 566 } 567 /** 568 * System messages. 569 * 570 * Example HTML: 571 * 572 * <div id="messagepane"> 573 * <span role="alert" class="error"> 574 * Content 575 * </span> 576 * </div> 577 */ 578 #messagepane { 579 position: fixed; 580 bottom: 0; 581 left: 50%; 582 transform: translateX(-50%); 583 text-align: center; 584 z-index: 1000; 585 } 586 #messagepane span.success, #messagepane span.warning, #messagepane span.error { 587 display: inline-block; 588 max-width: 53.1538461538em; 589 margin: 0 auto; 590 padding: 0.53846153846154em 2.84615384615385em 0.53846153846154em 1em; 591 border-radius: 0.5em 0.5em 0 0; 592 color: #ffffff; 593 box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.2); 594 } 595 #messagepane span.success { 596 background: #238c23; 597 } 598 #messagepane span.warning { 599 background: #cc8c00; 600 } 601 #messagepane span.error { 602 background: #9d261d; 603 } 604 /* 605 * Message close icon. 606 * 607 * Example HTML: 608 * 609 * <a role="button" class="close" aria-label="Close">×</a> 610 */ 611 .close { 612 position: absolute; 613 top: 0.27777777777778em; 614 right: 0.72222222222222em; 615 color: rgba(255, 255, 255, 0.6); 616 font-size: 18px; 617 font-weight: bold; 618 text-decoration: none; 619 } 620 .close:hover { 621 color: rgba(255, 255, 255, 0.8); 622 text-decoration: none; 623 cursor: pointer; 624 } 625 /* 626 * Flash the alert message using CSS animation. 627 */ 628 .messageflash { 629 animation: messageflash 1s; 630 } 631 /* Twisties 632 ========================================================================== */ 633 /** 634 * Collapsible and non-collapsible summary/details boxes. 635 * 636 * Example HTML: 637 * 638 * <section class="txp-details"> 639 * <h3 class="txp-summary expanded"> 640 * <a>Heading (lever)</a> 641 * </h3> 642 * <div class="toggle"> 643 * Content 644 * </div> 645 * </section> 646 * 647 * <section class="txp-details"> 648 * <h3>Heading</h3> 649 * <div> 650 * Content 651 * </div> 652 * </section> 653 */ 654 .txp-details { 655 margin: 1em 0; 656 border-right: 1px solid #e3e3e3; 657 border-left: 1px solid #e3e3e3; 658 background: #f7f7f7; 659 } 660 .txp-details > div { 661 border-bottom: 1px solid #e3e3e3; 662 } 663 /** 664 * Styling for summary headings. 665 */ 666 h3.txp-summary, 667 .txp-details > h3 { 668 background-color: #dddddd; 669 background-image: linear-gradient(#eeeeee, #dddddd); 670 position: relative; 671 height: 2em; 672 margin: 0; 673 border-top: 1px solid #dddddd; 674 border-bottom: 1px solid #cccccc; 675 font-size: 13px; 676 font-weight: bold; 677 line-height: 2em; 678 text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5); 679 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); 680 } 681 /** 682 * Padding for non-collapsible summary headings. 683 * 684 * For collapsible summary headings the padding is done via the `a` tag. 685 */ 686 .txp-details > h3:not(.txp-summary) { 687 padding: 0 1em; 688 } 689 /** 690 * Additonal styling for lever summary headings. 691 */ 692 h3.txp-summary a { 693 display: block; 694 padding: 0 2em 0 1em; 695 color: #333333; 696 } 697 h3.txp-summary a:hover { 698 color: #333333; 699 text-decoration: none; 700 } 701 h3.txp-summary a::after { 702 text-indent: 110%; 703 text-transform: capitalize; 704 white-space: nowrap; 705 overflow: hidden; 706 display: block; 707 position: absolute; 708 top: 0.5625em; 709 right: 0.625em; 710 width: 0; 711 height: 0; 712 border: 0 solid transparent; 713 border-width: 0.25em 0 0.25em 0.25em; 714 border-left-color: #333333; 715 font-size: 16px; 716 content: "\2193"; 717 opacity: 0.5; 718 z-index: 10; 719 } 720 h3.txp-summary a:hover::after { 721 opacity: 1; 722 } 723 /** 724 * Additonal styling for lever summary headings - expanded state. 725 */ 726 h3.txp-summary.expanded a::after { 727 top: 0.6875em; 728 right: 0.5625em; 729 border: 0 solid transparent; 730 border-width: 0.25em 0.25em 0; 731 border-top-color: #333333; 732 content: "\2191"; 733 } 734 /** 735 * Pad left and right of inner details content container. 736 */ 737 .toggle, 738 .txp-details > div { 739 padding: 0 1em; 740 } 741 /* Progress meter (only used in core for setup panels) 742 ========================================================================== */ 743 /** 744 * Progress meter lists. 745 * 746 * Utilizes CSS counters to increment the progress steps, more info - 747 * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters 748 * 749 * Example HTML: 750 * 751 * <aside class="progress-meter"> 752 * <ol> 753 * <li class="active"><strong>Item 1</strong></li> 754 * <li>Item 2</li> 755 * <li>Item 3</li> 756 * </ol> 757 * </aside> 758 */ 759 .progress-meter ol { 760 margin-bottom: 0; 761 padding: 0; 762 list-style: none; 763 text-align: center; 764 counter-reset: step; 765 } 766 .progress-meter li { 767 background-color: #dddddd; 768 background-image: linear-gradient(#eeeeee, #dddddd); 769 display: inline-block; 770 position: relative; 771 margin: 0 1em 1em 0; 772 padding: 1em 1em 1em 4em; 773 border-top: 1px solid #dddddd; 774 border-right: 1px solid #e3e3e3; 775 border-bottom: 1px solid #cccccc; 776 border-left: 1px solid #e3e3e3; 777 text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5); 778 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); 779 } 780 .progress-meter li.active { 781 background-color: #f7c600; 782 background-image: linear-gradient(#ffda44, #f7c600); 783 border: 1px solid #f7c600; 784 border-bottom-color: #d8ad00; 785 } 786 .progress-meter li::before { 787 position: absolute; 788 top: 0.4375em; 789 left: 0.6875em; 790 width: 1.375em; 791 padding: 0.25em; 792 border: 1px solid #ffffff; 793 border-radius: 50%; 794 background: #cccccc; 795 font-size: 16px; 796 font-weight: bold; 797 text-align: center; 798 content: counter(step); 799 z-index: 2; 800 counter-increment: step; 801 } 802 .progress-meter li::after { 803 text-indent: 110%; 804 text-transform: capitalize; 805 white-space: nowrap; 806 overflow: hidden; 807 display: block; 808 position: absolute; 809 top: -1px; 810 left: 100%; 811 width: 0; 812 height: 0; 813 border: 0 solid transparent; 814 border-width: 1.5em 0 1.5em 0.75em; 815 border-left-color: #cccccc; 816 font-size: 16px; 817 content: "\2192"; 818 z-index: 2; 819 } 820 .progress-meter strong { 821 font-weight: normal; 822 } 823 /** 824 * Swap margin/padding/numerical/arrow positions in RTL languages. 825 */ 826 [dir="rtl"] .progress-meter ol { 827 padding: 0; 828 } 829 [dir="rtl"] .progress-meter li { 830 margin: 0 0 1em 1em; 831 padding: 1em 4em 1em 1em; 832 } 833 [dir="rtl"] .progress-meter li::before { 834 right: 0.6875em; 835 left: auto; 836 } 837 [dir="rtl"] .progress-meter li::after { 838 right: 100%; 839 left: auto; 840 border: 0 solid transparent; 841 border-width: 1.5em 0.75em 1.5em 0; 842 border-right-color: #cccccc; 843 content: "\2190"; 844 } 845 /* Password strength meter (via zxcvbn.js) 846 ========================================================================== */ 847 /** 848 * Strength meter bar area and text area. 849 * 850 * Example HTML: 851 * 852 * <div class="txp-form-field-value"> 853 * <input class="txp-maskable" type="password"> 854 * <div class="strength-meter"> 855 * <div class="bar password-strength-1" style="width:28%;"></div> 856 * <div class="indicator">Strength: poor</div> 857 * </div> 858 * <div class="edit-admin-show-password"> 859 * <input class="checkbox" type="checkbox"> 860 * <label>Show password</label> 861 * </div> 862 * </div> 863 */ 864 .strength-meter { 865 position: relative; 866 width: 100%; 867 max-width: 28em; 868 height: 1.38461538461538em; 869 background-color: #a3a3a3; 870 box-sizing: border-box; 871 } 872 .strength-meter:empty { 873 background-color: transparent; 874 } 875 .strength-meter .bar { 876 position: absolute; 877 left: 0; 878 height: 1.38461538461538em; 879 z-index: 2; 880 } 881 .strength-meter .indicator { 882 position: absolute; 883 padding: 0.15384615384615em 0.38461538461538em; 884 color: #ffffff; 885 line-height: 1; 886 z-index: 3; 887 } 888 /** 889 * Strength level colours. 890 */ 891 .password-strength-0 { 892 background-color: #9d261d; 893 } 894 .password-strength-1 { 895 background-color: #b5590f; 896 } 897 .password-strength-2 { 898 background-color: #cc8c00; 899 } 900 .password-strength-3 { 901 background-color: #788c12; 902 } 903 .password-strength-4 { 904 background-color: #238c23; 905 } 906 /* Code highlighting (via Prism.js) 907 ========================================================================== */ 908 code[class*="language-"], 909 pre[class*="language-"] { 910 text-align: left; 911 white-space: pre; 912 word-spacing: normal; 913 word-break: normal; 914 word-wrap: normal; 915 direction: ltr; 916 -webkit-hyphens: none; 917 -ms-hyphens: none; 918 hyphens: none; 919 } 920 /** 921 * Inline code. 922 */ 923 :not(pre) > code[class*="language-"] { 924 white-space: normal; 925 } 926 /** 927 * Syntax colours/styles. 928 */ 929 .token.comment, 930 .token.prolog, 931 .token.doctype, 932 .token.cdata { 933 color: #708090; 934 } 935 .token.punctuation { 936 color: #999999; 937 } 938 .namespace { 939 opacity: 0.7; 940 } 941 .token.property, 942 .token.tag, 943 .token.boolean, 944 .token.number, 945 .token.constant, 946 .token.symbol, 947 .token.deleted { 948 color: #990055; 949 } 950 .token.selector, 951 .token.attr-name, 952 .token.string, 953 .token.char, 954 .token.builtin, 955 .token.inserted { 956 color: #669900; 957 } 958 .token.operator, 959 .token.entity, 960 .token.url, 961 .language-css .token.string, 962 .style .token.string { 963 background: rgba(255, 255, 255, 0.5); 964 color: #a67f59; 965 } 966 .token.atrule, 967 .token.attr-value, 968 .token.keyword { 969 color: #0077aa; 970 } 971 .token.function { 972 color: #dd4a68; 973 } 974 .token.regex, 975 .token.important, 976 .token.variable { 977 color: #ee9900; 978 } 979 .token.important, 980 .token.bold { 981 font-weight: bold; 982 } 983 .token.italic { 984 font-style: italic; 985 } 986 .token.entity { 987 cursor: help; 988 } 989 /* Forms 990 ========================================================================== */ 991 /** 992 * 1. Address width being affected by wide descendants in Chrome, Firefox. 993 * 2. Define consistent fieldset border, margin, and padding. 994 */ 995 fieldset { 996 /* 1 */ 997 min-width: 0; 998 /* 2 */ 999 margin: 1em 0; 1000 padding: 1px 1em; 1001 border: 1px solid #cccccc; 1002 } 1003 /** 1004 * Normalize styling of `legend`. 1005 * 1006 * 1. Correct wrapping not present in IE 11 and Edge 12/13. 1007 * 2. Remove padding so people aren't caught out if they zero out fieldsets. 1008 * 3. Correct `color` not being inherited from fieldset in IE 11. 1009 */ 1010 legend { 1011 /* 1 */ 1012 display: table; 1013 /* 1 */ 1014 max-width: 100%; 1015 /* 2 */ 1016 padding: 0; 1017 /* 3 */ 1018 color: inherit; 1019 /* 1 */ 1020 white-space: normal; 1021 /* 1 */ 1022 box-sizing: border-box; 1023 } 1024 /** 1025 * 1. Prevent elements from spilling out of their parent. 1026 * 2. Address margins set differently in Firefox 4+, Safari, and Chrome. 1027 * 3. Correct font properties not being inherited. 1028 */ 1029 button, 1030 input, 1031 optgroup, 1032 select, 1033 textarea, 1034 .txp-button, 1035 .txp-logout a, 1036 .navlink, 1037 .navlink-active, 1038 .navlink-disabled { 1039 /* 1 */ 1040 max-width: 100%; 1041 /* 2 */ 1042 margin: 0; 1043 color: #000000; 1044 font-family: Helvetica, Arial, sans-serif; 1045 /* 3 */ 1046 font-size: 13px; 1047 line-height: 1.38461538461538em; 1048 vertical-align: baseline; 1049 box-sizing: border-box; 1050 } 1051 /** 1052 * Remove the inner border and padding in Firefox. 1053 */ 1054 button::-moz-focus-inner, 1055 [type="button"]::-moz-focus-inner, 1056 [type="reset"]::-moz-focus-inner, 1057 [type="submit"]::-moz-focus-inner { 1058 padding: 0; 1059 border-style: none; 1060 } 1061 /** 1062 * Remove inner padding in Safari and Chrome on OS X. Safari (but not Chrome) 1063 * clips the cancel button when the search input has padding (and `textfield` 1064 * appearance). 1065 */ 1066 [type="search"]::-webkit-search-decoration { 1067 -webkit-appearance: none; 1068 } 1069 /** 1070 * Styling of form input fields. 1071 * 1072 * 1. Remove browser-specific default styling. 1073 */ 1074 [type="color"], 1075 [type="date"], 1076 [type="datetime"], 1077 [type="datetime-local"], 1078 [type="email"], 1079 [type="month"], 1080 [type="number"], 1081 [type="password"], 1082 [type="search"], 1083 [type="tel"], 1084 [type="text"], 1085 [type="time"], 1086 [type="url"], 1087 [type="week"], 1088 select, 1089 textarea { 1090 height: 2.15384615384615em; 1091 padding: 0.30769230769231em; 1092 border: 1px solid #cccccc; 1093 border-radius: 0; 1094 background: #ffffff; 1095 /* 1 */ 1096 -webkit-appearance: none; 1097 -moz-appearance: none; 1098 appearance: none; 1099 } 1100 [type="color"]:focus, 1101 [type="date"]:focus, 1102 [type="datetime"]:focus, 1103 [type="datetime-local"]:focus, 1104 [type="email"]:focus, 1105 [type="month"]:focus, 1106 [type="number"]:focus, 1107 [type="password"]:focus, 1108 [type="search"]:focus, 1109 [type="tel"]:focus, 1110 [type="text"]:focus, 1111 [type="time"]:focus, 1112 [type="url"]:focus, 1113 [type="week"]:focus, 1114 select:focus, 1115 textarea:focus { 1116 border-color: #0066ff; 1117 outline: 0; 1118 } 1119 /** 1120 * Fix vertical alignment of `color` fields with their label. 1121 */ 1122 [type="color"] { 1123 vertical-align: middle; 1124 } 1125 /** 1126 * Fix the cursor style for Chrome's increment/decrement buttons. For certain 1127 * `font-size` values of the `input`, it causes the cursor style of the 1128 * decrement button to change from `default` to `text`. 1129 */ 1130 [type="number"]::-webkit-inner-spin-button, 1131 [type="number"]::-webkit-outer-spin-button { 1132 height: auto; 1133 } 1134 /** 1135 * 1. Remove any excess padding. 1136 * 2. Correct margins for inline checkbox/radio labels. 1137 */ 1138 [type="checkbox"], 1139 [type="radio"] { 1140 /* 1 */ 1141 padding: 0; 1142 } 1143 [type="checkbox"] + label:not(.ui-controlgroup-item), 1144 [type="radio"] + label:not(.ui-controlgroup-item) { 1145 /* 2 */ 1146 margin: 0 0.5em 0 0; 1147 } 1148 [type="checkbox"] + label:not(.ui-controlgroup-item):last-of-type, 1149 [type="radio"] + label:not(.ui-controlgroup-item):last-of-type { 1150 /* 2 */ 1151 margin: 0; 1152 } 1153 /** 1154 * Swap margin positions in RTL languages. 1155 */ 1156 [dir="rtl"] [type="checkbox"] + label:not(.ui-controlgroup-item), 1157 [dir="rtl"] [type="radio"] + label:not(.ui-controlgroup-item) { 1158 margin: 0 0 0 0.5em; 1159 } 1160 [dir="rtl"] [type="checkbox"] + label:not(.ui-controlgroup-item):last-of-type, 1161 [dir="rtl"] [type="radio"] + label:not(.ui-controlgroup-item):last-of-type { 1162 margin: 0; 1163 } 1164 /** 1165 * Use indicator icon to signify the drop-down ability of `select`. 1166 */ 1167 select { 1168 padding-right: 1.30769230769231em; 1169 background: #ffffff url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxM3B4JyBoZWlnaHQ9JzRweCcgdmlld0JveD0nMCAwIDEzIDQnPjxwb2x5Z29uIGZpbGw9JyMzMzMnIHBvaW50cz0nMy41LDQgMCwwIDcsMCcvPjwvc3ZnPg==") right center no-repeat; 1170 background-size: 1em 0.30769230769231em; 1171 text-transform: none; 1172 } 1173 /** 1174 * Swap `select` icon position in RTL languages. 1175 */ 1176 [dir="rtl"] select { 1177 padding-right: 0.30769230769231em; 1178 padding-left: 1.30769230769231em; 1179 background-position: 0.46153846153846em center; 1180 } 1181 /** 1182 * Remove browser-specific `select` UI in IE 11. 1183 */ 1184 select::-ms-expand { 1185 opacity: 0; 1186 } 1187 /** 1188 * Remove browser-specific `select` UI in Firefox 4+. 1189 */ 1190 select:-moz-focusring { 1191 color: transparent; 1192 text-shadow: 0 0 0 #000000; 1193 } 1194 /** 1195 * Override height and background set in a previous rule and allow auto height. 1196 */ 1197 select[size], 1198 select[multiple] { 1199 height: auto; 1200 padding-right: 0.30769230769231em; 1201 background-image: none; 1202 vertical-align: top; 1203 } 1204 /** 1205 * Override height set in rule above and restrict to one line field. 1206 */ 1207 select[size="0"], 1208 select[size="1"] { 1209 height: 2.15384615384615em; 1210 vertical-align: baseline; 1211 } 1212 /** 1213 * Normalize styling of `optgroup`. 1214 */ 1215 optgroup { 1216 color: #000000; 1217 font-style: normal; 1218 font-weight: bold; 1219 } 1220 /** 1221 * 1. Remove default vertical scrollbar in IE 11. 1222 * 2. Remove unwanted space below `textarea` in Safari, Chrome, Opera. 1223 * 3. Restrict to vertical resizing to prevent layout breakage. 1224 */ 1225 textarea { 1226 width: 100%; 1227 height: auto; 1228 min-height: 3em; 1229 /* 1 */ 1230 overflow: auto; 1231 /* 2 */ 1232 vertical-align: top; 1233 /* 3 */ 1234 resize: vertical; 1235 } 1236 /** 1237 * Ensure code text areas are always rendered left-to-right. 1238 */ 1239 textarea.code { 1240 direction: ltr; 1241 } 1242 /** 1243 * Make sure disabled elements really are disabled and styled appropriately. 1244 * 1245 * 1. Re-set default cursor for disabled elements. 1246 * 2. Override default iOS opacity setting. 1247 */ 1248 [disabled], 1249 [disabled] option, 1250 [disabled] optgroup, 1251 .navlink-disabled { 1252 border-color: #d4d4d4 !important; 1253 background: #eeeeee !important; 1254 color: #aaaaaa !important; 1255 text-shadow: none !important; 1256 box-shadow: none !important; 1257 /* 1 */ 1258 cursor: default !important; 1259 /* 2 */ 1260 opacity: 1; 1261 } 1262 /** 1263 * Width display options for `input` fields. 1264 * 1265 * Example HTML: 1266 * 1267 * <input size="32"> 1268 * <input class="large"> 1269 * <input class="medium"> 1270 * <input class="small"> 1271 * <input class="xsmall"> 1272 */ 1273 input[size="32"] { 1274 width: 100%; 1275 max-width: 28em; 1276 } 1277 input.input-large { 1278 width: 100%; 1279 } 1280 input.input-medium { 1281 width: 50%; 1282 max-width: 14.46153846153846em; 1283 } 1284 input.input-small { 1285 width: 25%; 1286 max-width: 7.61538461538462em; 1287 } 1288 input.input-xsmall { 1289 width: 16%; 1290 max-width: 4.23076923076923em; 1291 } 1292 /** 1293 * Width display options for date and time `input` fields. 1294 * 1295 * Note: These are intentionally *not* using the HTML5 input type contexts. 1296 * 1297 * Example HTML: 1298 * 1299 * <div class="txp-form-field date posted"> 1300 * <div class="txp-form-field-label"> 1301 * <label>Publish date</label> 1302 * </div> 1303 * <div class="txp-form-field-value"> 1304 * <input class="input-year"> 1305 * <span role="separator">/</span> 1306 * <input class="input-month"> 1307 * <span role="separator">/</span> 1308 * <input class="input-day"> 1309 * </div> 1310 * </div> 1311 * 1312 * <div class="txp-form-field time posted"> 1313 * <div class="txp-form-field-label"> 1314 * <label>Publish time</label> 1315 * </div> 1316 * <div class="txp-form-field-value"> 1317 * <input class="input-hour"> 1318 * <span role="separator">:</span> 1319 * <input class="input-minute"> 1320 * <span role="separator">:</span> 1321 * <input class="input-second"> 1322 * </div> 1323 * </div> 1324 */ 1325 input.input-year { 1326 width: 4.07692307692308em; 1327 text-align: center; 1328 } 1329 input.input-month, input.input-day, input.input-hour, input.input-minute, input.input-second { 1330 width: 2.46153846153846em; 1331 text-align: center; 1332 } 1333 /** 1334 * 1. Add the correct display in IE 11. 1335 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. 1336 */ 1337 progress { 1338 /* 1 */ 1339 display: inline-block; 1340 /* 2 */ 1341 vertical-align: baseline; 1342 } 1343 /* Buttons 1344 ========================================================================== */ 1345 /** 1346 * 1. Correct `button` style inheritance in Firefox, IE 11, and Opera. 1347 * 2. Address `overflow` set to `hidden` in IE 11. 1348 */ 1349 button { 1350 /* 1 */ 1351 text-transform: none; 1352 /* 2 */ 1353 overflow: visible; 1354 } 1355 /** 1356 * 1. Improve usability and consistency of cursor style between image-type 1357 * `input` and others. 1358 * 2. Remove iOS Safari default styling. 1359 */ 1360 button, 1361 [type="reset"], 1362 [type="submit"], 1363 input[type="button"], 1364 .txp-button, 1365 .txp-logout a, 1366 .navlink, 1367 .navlink-active { 1368 background-color: #dddddd; 1369 background-image: linear-gradient(#eeeeee, #dddddd); 1370 display: inline-block; 1371 width: auto; 1372 height: 2.15384615384615em; 1373 padding: 0.30769230769231em 0.61538461538462em; 1374 border: 1px solid #cccccc; 1375 border-radius: 0.5em; 1376 background-clip: padding-box; 1377 color: #333333; 1378 font-weight: normal; 1379 text-align: center; 1380 text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5); 1381 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); 1382 /* 1 */ 1383 cursor: pointer; 1384 /* 2 */ 1385 -webkit-appearance: none; 1386 -moz-appearance: none; 1387 appearance: none; 1388 -webkit-user-select: none; 1389 -moz-user-select: none; 1390 -ms-user-select: none; 1391 user-select: none; 1392 } 1393 button:hover, 1394 [type="reset"]:hover, 1395 [type="submit"]:hover, 1396 input[type="button"]:hover, 1397 .txp-button:hover, 1398 .txp-logout a:hover, 1399 .navlink:hover, 1400 .navlink-active:hover { 1401 background-color: #e8e8e8; 1402 background-image: linear-gradient(#f8f8f8, #e8e8e8); 1403 border-color: #aaaaaa; 1404 color: #333333; 1405 text-decoration: none; 1406 } 1407 button:active, 1408 [type="reset"]:active, 1409 [type="submit"]:active, 1410 input[type="button"]:active, 1411 .txp-button:active, 1412 .txp-logout a:active, 1413 .navlink:active, 1414 .navlink-active:active { 1415 background-color: #d6d6d6; 1416 background-image: linear-gradient(#e6e6e6, #d6d6d6); 1417 border-color: #aaaaaa; 1418 color: #1a1a1a; 1419 text-decoration: none; 1420 box-shadow: inset 0 0.2em 0.25em rgba(0, 0, 0, 0.15); 1421 } 1422 button:focus, 1423 [type="reset"]:focus, 1424 [type="submit"]:focus, 1425 input[type="button"]:focus, 1426 .txp-button:focus, 1427 .txp-logout a:focus, 1428 .navlink:focus, 1429 .navlink-active:focus { 1430 border-color: #0066ff; 1431 outline: 0; 1432 } 1433 /** 1434 * Additional styling for primary buttons. 1435 * 1436 * Example HTML: 1437 * 1438 * <input type="submit" class="publish"> 1439 */ 1440 [type="submit"].publish, 1441 button.publish, 1442 a.publish { 1443 background-color: #ffd21b; 1444 background-image: linear-gradient(#ffe168, #ffd21b); 1445 height: 2.76923076923077em; 1446 padding: 0.61538461538462em 1em; 1447 border: 1px solid #f7c600; 1448 font-weight: bold; 1449 } 1450 [type="submit"].publish:hover, 1451 button.publish:hover, 1452 a.publish:hover { 1453 background-color: #ffd93f; 1454 background-image: linear-gradient(#ffe88b, #ffd93f); 1455 border: 1px solid #c49d00; 1456 } 1457 [type="submit"].publish:active, 1458 button.publish:active, 1459 a.publish:active { 1460 background-color: #ffcd02; 1461 background-image: linear-gradient(#ffdc4e, #ffcd02); 1462 border: 1px solid #c49d00; 1463 } 1464 [type="submit"].publish:focus, 1465 button.publish:focus, 1466 a.publish:focus { 1467 border-color: #0066ff; 1468 } 1469 /** 1470 * Additional styling for delete (destroy) buttons. 1471 * 1472 * Example HTML: 1473 * 1474 * <button class="destroy" type="submit"> 1475 * <span class="ui-icon ui-icon-close">Destroy</span> 1476 * </button> 1477 */ 1478 button.destroy { 1479 height: auto; 1480 padding: 0.07692307692308em 0 0; 1481 border: 0; 1482 border-radius: 0; 1483 background: none; 1484 text-shadow: none; 1485 box-shadow: none; 1486 } 1487 button.destroy:hover, button.destroy:active { 1488 background: none; 1489 } 1490 button.destroy:focus { 1491 outline: thin solid #0066ff; 1492 } 1493 button.destroy:hover .ui-icon, 1494 button.destroy:active .ui-icon, 1495 button.destroy:focus .ui-icon { 1496 -webkit-filter: brightness(0.66); 1497 filter: brightness(0.66); 1498 } 1499 /** 1500 * Grey-out disabled navlinks (but keep them in button style). 1501 * 1502 * Example HTML: 1503 * 1504 * <p class="prev-next"> 1505 * <span class="navlink-disabled">Previous</span> 1506 * <a class="navlink">Next</a> 1507 * </p> 1508 */ 1509 .navlink-disabled { 1510 display: inline-block; 1511 height: 2.15384615384615em; 1512 padding: 0.30769230769231em 0.61538461538462em; 1513 border: 1px solid; 1514 border-radius: 0.5em; 1515 background-clip: padding-box; 1516 box-sizing: border-box; 1517 } 1518 /** 1519 * Tertiary button sets. 1520 * 1521 * Anchor elements kept to one line to prevent space between buttons. 1522 * 1523 * TODO: check if this would be better via flexbox instead? 1524 * 1525 * Example HTML: 1526 * 1527 * <p class="nav-tertiary"> 1528 * <a class="navlink-active">Page 1</a><a class="navlink">Page 2</a> 1529 * </p> 1530 */ 1531 ul.nav-tertiary { 1532 padding: 0; 1533 list-style: none; 1534 } 1535 ul.nav-tertiary li { 1536 display: inline; 1537 } 1538 [dir="rtl"] ul.nav-tertiary { 1539 padding: 0; 1540 } 1541 .nav-tertiary a, 1542 .nav-tertiary .navlink-disabled { 1543 border-radius: 0; 1544 } 1545 .nav-tertiary > :first-child, 1546 .nav-tertiary > :first-child > a, 1547 .nav-tertiary > :first-child > span { 1548 border-radius: 0.5em 0 0 0.5em; 1549 } 1550 .nav-tertiary > :last-child, 1551 .nav-tertiary > :last-child > a, 1552 .nav-tertiary > :last-child > span { 1553 border-radius: 0 0.5em 0.5em 0; 1554 } 1555 [dir="rtl"] .nav-tertiary > :first-child, 1556 [dir="rtl"] .nav-tertiary > :first-child > a, 1557 [dir="rtl"] .nav-tertiary > :first-child > span { 1558 border-radius: 0 0.5em 0.5em 0; 1559 } 1560 [dir="rtl"] .nav-tertiary > :last-child, 1561 [dir="rtl"] .nav-tertiary > :last-child > a, 1562 [dir="rtl"] .nav-tertiary > :last-child > span { 1563 border-radius: 0.5em 0 0 0.5em; 1564 } 1565 /** 1566 * Indication of the currently active `.nav-tertiary` button. 1567 * 1568 * Example HTML: 1569 * 1570 * <p class="nav-tertiary"> 1571 * <a class="navlink-active">Page 1</a><a class="navlink">Page 2</a> 1572 * </p> 1573 */ 1574 .nav-tertiary .navlink-active { 1575 background-color: #cce0ff; 1576 background-image: linear-gradient(#e6f0ff, #cce0ff); 1577 border-color: #96bfff; 1578 } 1579 .nav-tertiary .navlink-active:hover { 1580 background-color: #d6e6ff; 1581 background-image: linear-gradient(#f0f6ff, #d6e6ff); 1582 border-color: #4a91ff; 1583 } 1584 .nav-tertiary .navlink-active:active { 1585 background-color: #b3d1ff; 1586 background-image: linear-gradient(#cde1ff, #b3d1ff); 1587 border-color: #4a91ff; 1588 } 1589 .nav-tertiary .navlink-active:focus { 1590 border-color: #0066ff; 1591 } 1592 /** 1593 * Search widget 'search' button. 1594 * 1595 * 1. Correct specificity for RTL languages. 1596 * 1597 * Example HTML: 1598 * 1599 * <form class="txp-search"> 1600 * <input class="txp-search-input" type="search" size="24"> 1601 * <span class="txp-search-buttons"> 1602 * <button class="txp-search-button">Search</button> 1603 * <button class="txp-search-options">Search criteria</button> 1604 * </span> 1605 * </form> 1606 */ 1607 .txp-search button.txp-search-button { 1608 padding-right: 1.5em; 1609 padding-left: 1.5em; 1610 border-radius: 0; 1611 } 1612 [dir="rtl"] .txp-search button.txp-search-button { 1613 /* 1 */ 1614 border-radius: 0; 1615 } 1616 /* Lists 1617 ========================================================================== */ 1618 /** 1619 * Address paddings set differently. 1620 */ 1621 menu, 1622 ol, 1623 ul { 1624 padding: 0 0 0 2em; 1625 } 1626 /** 1627 * Swap padding positions in RTL languages. 1628 */ 1629 [dir="rtl"] menu, 1630 [dir="rtl"] ol, 1631 [dir="rtl"] ul { 1632 padding: 0 2em 0 0; 1633 } 1634 /** 1635 * Remove margins from nested lists. 1636 */ 1637 li > ul, 1638 li > ol { 1639 margin: 0; 1640 } 1641 /** 1642 * Address margins set differently. 1643 */ 1644 dd { 1645 margin: 0 0 0 2em; 1646 } 1647 /** 1648 * Swap margin positions in RTL languages. 1649 */ 1650 [dir="rtl"] dd { 1651 margin: 0 2em 0 0; 1652 } 1653 /** 1654 * Have a list with no bullets/numerals. 1655 * 1656 * Example HTML: 1657 * 1658 * <ul class="plain-list"> 1659 * <ol class="plain-list"> 1660 */ 1661 .plain-list { 1662 padding: 0; 1663 list-style: none; 1664 } 1665 /** 1666 * Ensure padding stays removed in RTL languages. 1667 * 1668 * Required for specificity. 1669 */ 1670 [dir="rtl"] .plain-list { 1671 padding: 0; 1672 } 1673 /** 1674 * Switcher lists, to swap between different page templates/form templates/etc. 1675 * 1676 * Example HTML: 1677 * 1678 * <ul class="switcher-list"> 1679 * <li class="active"></li> 1680 * <li><a></a></li> 1681 * <li><a></a></li> 1682 * </ul> 1683 */ 1684 .switcher-list { 1685 margin: 0 -1em; 1686 padding: 0; 1687 list-style: none; 1688 } 1689 .switcher-list li { 1690 position: relative; 1691 border-top: 1px solid #dddddd; 1692 border-bottom: 1px solid transparent; 1693 } 1694 .switcher-list li:nth-child(odd) { 1695 background: #ffffff; 1696 } 1697 .switcher-list li:first-child { 1698 border-top: 0; 1699 } 1700 .switcher-list li.active { 1701 background: #fff9e1; 1702 } 1703 .switcher-list li.selected { 1704 background: #e6f0ff; 1705 } 1706 .switcher-list a { 1707 display: block; 1708 padding: 0.38461538461538em 2.5em 0.38461538461538em 1em; 1709 text-overflow: ellipsis; 1710 white-space: nowrap; 1711 overflow: hidden; 1712 } 1713 [dir="rtl"] .switcher-list { 1714 padding: 0; 1715 } 1716 [dir="rtl"] .switcher-list a { 1717 padding: 0.38461538461538em 1em 0.38461538461538em 2.5em; 1718 } 1719 /** 1720 * Multi-edit checkboxes within switcher lists. 1721 */ 1722 .switcher-action { 1723 position: absolute; 1724 top: 0.38461538461538em; 1725 left: 1em; 1726 z-index: 2; 1727 } 1728 .switcher-action + a { 1729 padding-right: 1em; 1730 padding-left: 2.5em; 1731 } 1732 [dir="rtl"] .switcher-action { 1733 right: 1em; 1734 left: auto; 1735 } 1736 [dir="rtl"] .switcher-action + a { 1737 padding-right: 2.5em; 1738 padding-left: 1em; 1739 } 1740 /** 1741 * 'Destroy' buttons within switcher lists. 1742 */ 1743 .switcher-list .destroy { 1744 position: absolute; 1745 top: 0.46153846153846em; 1746 right: 1em; 1747 z-index: 2; 1748 } 1749 [dir="rtl"] .switcher-list .destroy { 1750 right: auto; 1751 left: 1em; 1752 } 1753 /* Tables 1754 ========================================================================== */ 1755 /** 1756 * 1. Make sure list tables clear any preceeding grid cell floats. 1757 * 2. Allow overflow scroll on tables. 1758 * 1759 * Example HTML: 1760 * 1761 * <div class="txp-listtables"> 1762 * <table></table> 1763 * </div> 1764 */ 1765 .txp-listtables { 1766 /* 1 */ 1767 clear: both; 1768 /* 2 */ 1769 overflow-x: auto; 1770 } 1771 /** 1772 * Consistent tables. 1773 */ 1774 table { 1775 border-collapse: collapse; 1776 border-spacing: 0; 1777 } 1778 /** 1779 * Styling of table captions. 1780 */ 1781 caption { 1782 margin-bottom: 0.5em; 1783 text-align: left; 1784 } 1785 /** 1786 * Swap caption alignment in RTL languages. 1787 */ 1788 [dir="rtl"] caption { 1789 text-align: right; 1790 } 1791 /** 1792 * Table row borders. 1793 */ 1794 tr { 1795 border: 1px solid #dddddd; 1796 } 1797 thead th { 1798 background-color: #eeeeee; 1799 } 1800 /** 1801 * Make table cells align top and left by default. 1802 */ 1803 th, 1804 td { 1805 padding: 0.38461538461538em 1em; 1806 text-align: left; 1807 vertical-align: top; 1808 } 1809 /** 1810 * Swap table cell text alignments in RTL languages. 1811 */ 1812 [dir="rtl"] th, 1813 [dir="rtl"] td { 1814 text-align: right; 1815 } 1816 /** 1817 * Listing tables. 1818 * 1819 * Example HTML: 1820 * 1821 * <table class="txp-list"> 1822 * <thead> 1823 * <tr> 1824 * <th class="multi-edit" scope="col"></th> 1825 * <th class="asc scope="col"><a></a></th> 1826 * <th scope="col"><a></a></th> 1827 * </tr> 1828 * </thead> 1829 * <tfoot> 1830 * <tr> 1831 * <td colspan="3"></td> 1832 * </tr> 1833 * </tfoot> 1834 * <tbody> 1835 * <tr> 1836 * <th class="multi-edit" scope="row"></th> 1837 * <td></td> 1838 * <td></td> 1839 * </tr> 1840 * <tr class="selected"> 1841 * <th class="multi-edit" scope="row"></th> 1842 * <td></td> 1843 * <td></td> 1844 * </tr> 1845 * </tbody> 1846 * </table> 1847 */ 1848 .txp-list { 1849 width: 100%; 1850 } 1851 .txp-list tbody tr { 1852 border: 1px solid #dddddd; 1853 } 1854 .txp-list tbody tr:nth-child(even) { 1855 background: #f7f7f7; 1856 } 1857 .txp-list tbody tr.selected { 1858 background: #e6f0ff; 1859 } 1860 .txp-list tbody th { 1861 font-weight: normal; 1862 } 1863 .txp-list thead th { 1864 background-color: #dddddd; 1865 background-image: linear-gradient(#eeeeee, #dddddd); 1866 border-top: 1px solid #dddddd; 1867 border-right: 1px solid #d1d1d1; 1868 border-bottom: 1px solid #cccccc; 1869 border-left: 0; 1870 text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5); 1871 } 1872 .txp-list thead th:first-child { 1873 border-left: 1px solid #dddddd; 1874 } 1875 .txp-list thead th a { 1876 display: block; 1877 position: relative; 1878 margin: -0.38461538461538em -1em; 1879 padding: 0.38461538461538em 1em; 1880 color: #333333; 1881 } 1882 .txp-list thead th a:hover { 1883 color: #333333; 1884 text-decoration: none; 1885 } 1886 /** 1887 * Backgrounds and indicator icons on currently active sortable `thead th`. 1888 * 1889 * Example HTML: 1890 * 1891 * <th class="asc scope="col"><a></a></th> 1892 * <th class="desc scope="col"><a></a></th> 1893 */ 1894 .txp-list thead th.asc, .txp-list thead th.desc { 1895 background-color: #e4e4e4; 1896 background-image: linear-gradient(lightgray, #e4e4e4); 1897 } 1898 .txp-list thead th.asc a::after, .txp-list thead th.desc a::after { 1899 text-indent: 110%; 1900 text-transform: capitalize; 1901 white-space: nowrap; 1902 overflow: hidden; 1903 display: block; 1904 position: absolute; 1905 top: 45%; 1906 right: 0.3125em; 1907 width: 0; 1908 height: 0; 1909 font-size: 16px; 1910 opacity: 0.5; 1911 z-index: 10; 1912 } 1913 [dir="rtl"] .txp-list thead th.asc a::after, [dir="rtl"] .txp-list thead th.desc a::after { 1914 right: auto; 1915 left: 0.3125em; 1916 } 1917 .txp-list thead th.asc a:hover::after, .txp-list thead th.desc a:hover::after { 1918 opacity: 1; 1919 } 1920 .txp-list thead th.desc a::after { 1921 border: 0 solid transparent; 1922 border-width: 0.25em 0.25em 0; 1923 border-top-color: #333333; 1924 content: "\2193"; 1925 } 1926 .txp-list thead th.asc a::after { 1927 border: 0 solid transparent; 1928 border-width: 0 0.25em 0.25em; 1929 border-bottom-color: #333333; 1930 content: "\2191"; 1931 } 1932 /** 1933 * Consistent width for table multi-edit checkbox columns. 1934 */ 1935 .txp-list-col-multi-edit { 1936 width: 13px; 1937 } 1938 /** 1939 * Avoid wrapping of content in table '#ID' columns. 1940 */ 1941 .txp-list-col-id { 1942 white-space: nowrap; 1943 } 1944 /* Container 1945 ========================================================================== */ 1946 /** 1947 * 1. Make body position relative so subsequent items can be positioned 1948 * absolutely if desired. 1949 * 2. Remove default margin. 1950 */ 1951 body { 1952 display: -ms-flexbox; 1953 display: flex; 1954 /* 1 */ 1955 position: relative; 1956 -ms-flex-direction: column; 1957 flex-direction: column; 1958 min-height: 100vh; 1959 /* 2 */ 1960 margin: 0; 1961 padding: 4em 2.75% 0; 1962 background: #ffffff; 1963 color: #333333; 1964 box-sizing: border-box; 1965 } 1966 /** 1967 * Main content area. 1968 * 1969 * Example HTML: 1970 * 1971 * <body> 1972 * <header class="txp-header"></header> 1973 * <main class="txp-body"> 1974 * Content 1975 * </main> 1976 * <footer class="txp-footer"></footer> 1977 * </body> 1978 */ 1979 .txp-body { 1980 -ms-flex-positive: 1; 1981 flex-grow: 1; 1982 width: 100%; 1983 max-width: 116em; 1984 margin: 0 auto; 1985 } 1986 /* Layout grid 1987 ========================================================================== */ 1988 /** 1989 * Flex container. 1990 */ 1991 .txp-layout { 1992 display: -ms-flexbox; 1993 display: flex; 1994 -ms-flex-wrap: wrap; 1995 flex-wrap: wrap; 1996 margin: 0 -1em; 1997 } 1998 .txp-layout > * { 1999 min-width: 0; 2000 padding: 0 1em; 2001 box-sizing: border-box; 2002 } 2003 /** 2004 * Generate sizes all for grid column cells. 2005 * 2006 * Because this is desktop first, all cells span variations are defined 2007 * initially (1 column full width, 2 column, 4 column). We will then 2008 * adjust them at various breakpoints. 2009 * 2010 * Example HTML: 2011 * 2012 * <div class="txp-layout-1col"></div> 2013 * 2014 * <div class="txp-layout-2col"> 2015 * <div class="txp-layout-2col"> 2016 * 2017 * <div class="txp-layout-4col-3span"></div> 2018 * <div class="txp-layout-4col"></div> 2019 */ 2020 .txp-layout-1col { 2021 width: 100%; 2022 } 2023 .txp-layout-4col-3span { 2024 width: 75%; 2025 } 2026 .txp-layout-2col, 2027 .txp-layout-4col-2span { 2028 width: 50%; 2029 } 2030 .txp-layout-4col, 2031 .txp-layout-4col-alt { 2032 width: 25%; 2033 } 2034 /** 2035 * Text columns (fixed proportion cell) 2036 * 2037 * Example HTML: 2038 * 2039 * <div class="txp-layout-textbox"> 2040 */ 2041 .txp-layout-textbox { 2042 max-width: 57em; 2043 margin: 0 auto; 2044 } 2045 /* Inline grids 2046 ========================================================================== */ 2047 /** 2048 * Inline grid type layouts. 2049 * 2050 * You should define a specific width for each .txp-grid-cell, either as a class 2051 * attribute or style attribute, otherwise the cell width stretches to the 2052 * content within it. 2053 * 2054 * Example HTML: 2055 * 2056 * <div class="txp-grid"> 2057 * <div class="txp-grid-cell" style="width:30em;"> 2058 * Content 2059 * </div> 2060 * <div class="txp-grid-cell" style="width:15em;"> 2061 * Content 2062 * </div> 2063 * <div class="txp-grid-cell" style="width:15em;"> 2064 * Content 2065 * </div> 2066 * </div> 2067 */ 2068 .txp-grid { 2069 display: -ms-inline-flexbox; 2070 display: inline-flex; 2071 -ms-flex-wrap: wrap; 2072 flex-wrap: wrap; 2073 -ms-flex-pack: center; 2074 justify-content: center; 2075 margin: -2px; 2076 } 2077 .txp-grid-cell { 2078 margin: 2px; 2079 padding: 0 1em; 2080 border: 1px solid #cccccc; 2081 box-sizing: border-box; 2082 } 2083 /* Header 2084 ========================================================================== */ 2085 /** 2086 * Header content area. 2087 * 2088 * Example HTML: 2089 * 2090 * <body> 2091 * <header class="txp-header"> 2092 * Content 2093 * </header> 2094 * <main class="txp-body"></main> 2095 * <footer class="txp-footer"></footer> 2096 * </body> 2097 */ 2098 .txp-header { 2099 background-color: #f7c600; 2100 background-image: linear-gradient(#ffda44, #f7c600); 2101 display: -ms-flexbox; 2102 display: flex; 2103 position: fixed; 2104 top: 0; 2105 right: 0; 2106 left: 0; 2107 height: 2.69230769230769em; 2108 padding: 0 2.75%; 2109 border-top: 1px solid #f7c600; 2110 border-bottom: 1px solid #d8ad00; 2111 box-shadow: 0 0.2em 0.25em rgba(0, 0, 0, 0.15); 2112 z-index: 1000; 2113 } 2114 /** 2115 * Hide header content area on login panels. 2116 * 2117 * Move offscreen - don't `display:none` as we need to show #messagepane content. 2118 */ 2119 .login .txp-header { 2120 position: absolute; 2121 right: auto; 2122 left: -1000em; 2123 width: 1px; 2124 height: 1px; 2125 } 2126 /** 2127 * Textpattern logo. 2128 * 2129 * Example HTML: 2130 * 2131 * <header class="txp-header"> 2132 * <h1> 2133 * <a><span>My site</span></a> 2134 * </h1> 2135 */ 2136 .txp-header h1 { 2137 -ms-flex: none; 2138 flex: none; 2139 width: 8.125em; 2140 height: 2em; 2141 margin: 0.0625em 0.5em 0 0; 2142 background: url("../img/sprite.svg") no-repeat; 2143 background-size: 13em 2em; 2144 font-size: 16px; 2145 } 2146 .txp-header h1 a { 2147 display: block; 2148 width: 8.125em; 2149 height: 2em; 2150 } 2151 .txp-header h1 span { 2152 text-indent: 110%; 2153 text-transform: capitalize; 2154 white-space: nowrap; 2155 overflow: hidden; 2156 display: block; 2157 } 2158 /** 2159 * Reverse Textpattern logo margin in RTL languages. 2160 */ 2161 [dir="rtl"] .txp-header h1 { 2162 margin: 0.0625em 0 0 0.5em; 2163 } 2164 /** 2165 * 'View site' link. 2166 * 2167 * Example HTML: 2168 * 2169 * <p class="txp-view-site"> 2170 * <a> 2171 * <span class="txp-view-site-name">My site</span> 2172 * </a> 2173 * </p> 2174 */ 2175 .txp-view-site { 2176 -ms-flex: 1; 2177 flex: 1; 2178 margin: 0 1em; 2179 padding: 0 1px; 2180 line-height: 2.69230769230769em; 2181 text-overflow: ellipsis; 2182 white-space: nowrap; 2183 overflow: hidden; 2184 } 2185 .txp-view-site a { 2186 color: #333333; 2187 font-weight: bold; 2188 } 2189 /** 2190 * Positioning of logout button. 2191 * 2192 * Example HTML: 2193 * 2194 * <p class="txp-logout"> 2195 */ 2196 .txp-logout { 2197 position: relative; 2198 top: -0.76923076923077em; 2199 -ms-flex: none; 2200 flex: none; 2201 } 2202 /* Footer 2203 ========================================================================== */ 2204 /** 2205 * Footer content area. 2206 * 2207 * Example HTML: 2208 * 2209 * <body> 2210 * <header class="txp-header"></header> 2211 * <main class="txp-body"></main> 2212 * <footer class="txp-footer"> 2213 * Content 2214 * </footer> 2215 * </body> 2216 */ 2217 .txp-footer { 2218 display: -ms-flexbox; 2219 display: flex; 2220 -ms-flex-pack: justify; 2221 justify-content: space-between; 2222 } 2223 /* Navigation 2224 ========================================================================== */ 2225 /** 2226 * Hide the navigation menu toggle button on desktop layout. 2227 * 2228 * Example HTML: 2229 * 2230 * <button class="txp-nav-toggle"> 2231 */ 2232 button.txp-nav-toggle { 2233 display: none; 2234 } 2235 /** 2236 * Base styling for the navigation menu. 2237 * 2238 * Example HTML: 2239 * 2240 * <nav class="txp-nav"> 2241 */ 2242 .txp-nav { 2243 -ms-flex: none; 2244 flex: none; 2245 margin: 0; 2246 list-style: none; 2247 } 2248 .txp-nav ul { 2249 margin: 0; 2250 padding: 0; 2251 list-style: none; 2252 } 2253 .txp-nav > ul { 2254 display: -ms-flexbox; 2255 display: flex; 2256 } 2257 .txp-nav a { 2258 color: #333333; 2259 } 2260 .txp-nav a:hover { 2261 text-decoration: none; 2262 } 2263 /** 2264 * Primary-level navigation menu items (dropdown toggles). 2265 * 2266 * Example HTML: 2267 * 2268 * <nav class="txp-nav"> 2269 * <ul class="data-dropdown"> 2270 * <li class="dropdown selected"> 2271 * <a class="dropdown-toggle"> 2272 * Content 2273 * </a> 2274 * <ul class="dropdown-menu"> 2275 * <li><a></a></li> 2276 * <li class="selected"><a></a></li> 2277 * <li><a></a></li> 2278 * </ul> 2279 * </li> 2280 * <li class="dropdown"> 2281 * <a class="dropdown-toggle"> 2282 * Presentation 2283 * </a> 2284 * <ul class="dropdown-menu"> 2285 * <li><a></a></li> 2286 * <li><a></a></li> 2287 * <li><a></a></li> 2288 * </ul> 2289 * </li> 2290 * <li class="dropdown open"> 2291 * <a class="dropdown-toggle"> 2292 * Admin 2293 * </a> 2294 * <ul class="dropdown-menu"> 2295 * <li><a></a></li> 2296 * <li><a></a></li> 2297 * <li><a></a></li> 2298 * </ul> 2299 * </li> 2300 * <li> 2301 * <a> 2302 * Non-dropdown link 2303 * </a> 2304 * </li> 2305 * </ul> 2306 * </nav> 2307 */ 2308 .txp-nav > ul > li { 2309 display: block; 2310 position: relative; 2311 border-right: 1px solid #f7c600; 2312 background: rgba(255, 255, 255, 0.25); 2313 } 2314 .txp-nav > ul > li:first-child { 2315 border-left: 1px solid #f7c600; 2316 } 2317 .txp-nav > ul > li > a { 2318 display: block; 2319 padding: 0 1em; 2320 color: black; 2321 line-height: 2.69230769230769em; 2322 text-decoration: none; 2323 text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5); 2324 } 2325 .txp-nav > ul > li > a:hover { 2326 background: rgba(255, 255, 255, 0.25); 2327 } 2328 .txp-nav > ul > li.selected > a { 2329 background: rgba(255, 255, 255, 0.25); 2330 } 2331 .txp-nav > ul > li.selected > a:hover { 2332 background: rgba(255, 255, 255, 0.4); 2333 } 2334 /** 2335 * Reverse border in RTL languages. 2336 */ 2337 [dir="rtl"] .txp-nav > ul > li { 2338 border-right: 0; 2339 border-left: 1px solid #f7c600; 2340 } 2341 [dir="rtl"] .txp-nav > ul > li:first-child { 2342 border-right: 1px solid #f7c600; 2343 } 2344 /** 2345 * Indicator symbols on closed dropdown toggle links. 2346 */ 2347 .txp-nav > ul > li > a.dropdown-toggle { 2348 position: relative; 2349 padding: 0 1.61538461538462em 0 1em; 2350 } 2351 .txp-nav > ul > li > a.dropdown-toggle::after { 2352 text-indent: 110%; 2353 text-transform: capitalize; 2354 white-space: nowrap; 2355 overflow: hidden; 2356 display: block; 2357 position: absolute; 2358 top: 1em; 2359 right: 0.5625em; 2360 width: 0; 2361 height: 0; 2362 border: 0 solid transparent; 2363 border-width: 0.25em 0.25em 0; 2364 border-top-color: #333333; 2365 font-size: 16px; 2366 content: "\2193"; 2367 opacity: 0.5; 2368 z-index: 10; 2369 } 2370 .txp-nav > ul > li > a.dropdown-toggle:hover::after, .txp-nav > ul > li > a.dropdown-toggle:active::after { 2371 opacity: 1; 2372 } 2373 /** 2374 * Indicator symbols in RTL languages. 2375 */ 2376 [dir="rtl"] .txp-nav > ul > li > a.dropdown-toggle { 2377 padding: 0 1em 0 1.61538461538462em; 2378 } 2379 [dir="rtl"] .txp-nav > ul > li > a.dropdown-toggle::after { 2380 right: auto; 2381 left: 0.5625em; 2382 } 2383 /** 2384 * Indicator symbols on open dropdown toggle links. 2385 */ 2386 .txp-nav > ul > li.open > a.dropdown-toggle::after { 2387 border: 0 solid transparent; 2388 border-width: 0 0.25em 0.25em; 2389 border-bottom-color: #333333; 2390 content: "\2191"; 2391 } 2392 /** 2393 * Secondary-level navigation menu items (dropdown menus). 2394 * 2395 * Example HTML: 2396 * 2397 * <nav class="txp-nav"> 2398 * <ul class="data-dropdown"> 2399 * <li class="dropdown selected"> 2400 * <a class="dropdown-toggle"> 2401 * Content 2402 * </a> 2403 * <ul class="dropdown-menu"> 2404 * <li><a></a></li> 2405 * <li><a></a></li> 2406 * <li class="selected"><a></a></li> 2407 * </ul> 2408 * </li> 2409 * <li class="dropdown"> 2410 * <a class="dropdown-toggle"> 2411 * Presentation 2412 * </a> 2413 * <ul class="dropdown-menu"> 2414 * <li><a></a></li> 2415 * <li><a></a></li> 2416 * <li><a></a></li> 2417 * </ul> 2418 * </li> 2419 * <li class="dropdown open"> 2420 * <a class="dropdown-toggle"> 2421 * Admin 2422 * </a> 2423 * <ul class="dropdown-menu"> 2424 * <li><a></a></li> 2425 * <li><a></a></li> 2426 * <li><a></a></li> 2427 * </ul> 2428 * </li> 2429 * <li> 2430 * <a> 2431 * Non-dropdown link 2432 * </a> 2433 * </li> 2434 * </ul> 2435 * </nav> 2436 */ 2437 .dropdown-menu { 2438 display: none; 2439 position: absolute; 2440 top: 3em; 2441 left: 0; 2442 -ms-flex: none; 2443 flex: none; 2444 min-width: 12em; 2445 border: 1px solid; 2446 border-radius: 0 0.5em 0.5em; 2447 background: #fff9e1; 2448 border-top: 0; 2449 border-color: #d4d4d4; 2450 box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.2); 2451 z-index: 20000; 2452 } 2453 .dropdown-menu li:first-child { 2454 border-radius: 0 0.5em 0 0; 2455 } 2456 .dropdown-menu li:last-child { 2457 border-radius: 0 0 0.5em 0.5em; 2458 } 2459 .dropdown-menu li:hover { 2460 background: #ffefaf; 2461 } 2462 .dropdown-menu li.selected { 2463 background: #ffe88b; 2464 } 2465 .dropdown-menu a { 2466 display: block; 2467 padding: 0.5em 1em; 2468 } 2469 .dropdown-menu::before { 2470 position: absolute; 2471 top: -0.5em; 2472 left: 0.75em; 2473 width: 1em; 2474 height: 0.5em; 2475 background: url("../img/sprite.svg") no-repeat -12em 0; 2476 background-size: 13em 2em; 2477 font-size: 16px; 2478 content: ""; 2479 z-index: 2; 2480 } 2481 /** 2482 * Secondary-level navigation menu in RTL languages. 2483 */ 2484 [dir="rtl"] .dropdown-menu { 2485 right: 0; 2486 left: auto; 2487 border-radius: 0.5em 0; 2488 } 2489 [dir="rtl"] .dropdown-menu li:first-child { 2490 border-radius: 0.5em 0 0; 2491 } 2492 [dir="rtl"] .dropdown-menu::before { 2493 right: 0.75em; 2494 left: auto; 2495 } 2496 /** 2497 * Show drop-down menu when toggle clicked. 2498 * 2499 * Example HTML: 2500 * 2501 * <li class="dropdown open"> 2502 * <a class="dropdown-toggle"> 2503 * Admin 2504 * </a> 2505 * <ul class="dropdown-menu"> 2506 * <li><a></a></li> 2507 * <li><a></a></li> 2508 * <li><a></a></li> 2509 * </ul> 2510 * </li> 2511 */ 2512 .open > .dropdown-menu { 2513 display: block; 2514 } 2515 /* Globally shared layout 2516 ========================================================================== */ 2517 /** 2518 * 1. Prevent text size adjust after mobile device orientation change. 2519 */ 2520 html { 2521 /* 1 */ 2522 -webkit-text-size-adjust: 100%; 2523 -ms-text-size-adjust: 100%; 2524 text-size-adjust: 100%; 2525 } 2526 /** 2527 * 1. Add the correct box sizing in Firefox. 2528 * 2. Show the overflow in Edge and IE. 2529 */ 2530 hr { 2531 /* 1 */ 2532 height: 0; 2533 margin: 1.5em 0; 2534 clear: both; 2535 border: 0; 2536 border-bottom: 1px solid #cccccc; 2537 /* 2 */ 2538 overflow: visible; 2539 /* 1 */ 2540 box-sizing: content-box; 2541 } 2542 /** 2543 * Hide text but still allow screen reader access. 2544 * 2545 * Example HTML: 2546 * 2547 * <h1 class="txp-accessibility"> 2548 */ 2549 .txp-accessibility { 2550 position: absolute; 2551 left: -1000em; 2552 width: 1px; 2553 height: 1px; 2554 overflow: hidden; 2555 } 2556 /** 2557 * Swap absolute positions in RTL languages. 2558 * 2559 * This avoids browser scrollbar displaying incorrectly. 2560 */ 2561 [dir="rtl"] .txp-accessibility { 2562 right: -1000em; 2563 left: auto; 2564 } 2565 /** 2566 * Ensure dropdowns are hidden at page load (prevents content 'jumping'). 2567 */ 2568 .txp-dropdown { 2569 display: none; 2570 } 2571 /** 2572 * Search widget at top of lists. 2573 * 2574 * Appears on: 2575 * 2576 * List panels. 2577 * 2578 * Example HTML: 2579 * 2580 * <form class="txp-search"> 2581 * <span class="txp-search-clear"><a>Clear search</a></span> 2582 * <input class="txp-search-input" type="search" size="24"> 2583 * <span class="txp-search-buttons"> 2584 * <button class="txp-search-button">Search</button> 2585 * <button class="txp-search-options">Search criteria</button> 2586 * </span> 2587 * </form> 2588 */ 2589 .txp-search { 2590 display: -ms-flexbox; 2591 display: flex; 2592 -ms-flex-pack: end; 2593 justify-content: flex-end; 2594 margin: 1em 0; 2595 } 2596 .txp-search .ui-menu { 2597 position: absolute; 2598 width: 18em; 2599 z-index: 100; 2600 } 2601 .txp-search .ui-controlgroup { 2602 -ms-flex-wrap: nowrap; 2603 flex-wrap: nowrap; 2604 } 2605 .txp-search .txp-dropdown input { 2606 vertical-align: -0.23076923076923em; 2607 } 2608 .txp-search .txp-dropdown label { 2609 display: inline-block; 2610 width: 85%; 2611 padding: 0.23076923076923em 0.30769230769231em; 2612 cursor: pointer; 2613 vertical-align: text-top; 2614 } 2615 .txp-search-clear { 2616 -ms-flex: 1; 2617 flex: 1; 2618 margin: auto 0.5em; 2619 text-align: right; 2620 } 2621 [dir="rtl"] .txp-search-clear { 2622 text-align: left; 2623 } 2624 /** 2625 * Actions and upload forms at top of listings. 2626 * 2627 * Appears on: 2628 * 2629 * List panels. 2630 * 2631 * Example HTML: 2632 * 2633 * <div class="txp-control-panel"> 2634 * Content 2635 * </div> 2636 */ 2637 .txp-control-panel { 2638 margin-bottom: 1em; 2639 float: left; 2640 } 2641 .txp-control-panel > * { 2642 margin: 0 1em 0 0; 2643 } 2644 .txp-control-panel > *:last-child { 2645 margin-right: 0; 2646 } 2647 .txp-control-panel form { 2648 display: inline-block; 2649 } 2650 .txp-control-panel textarea { 2651 margin-bottom: 1em; 2652 } 2653 /** 2654 * Swap float/margin positions in RTL languages. 2655 */ 2656 [dir="rtl"] .txp-control-panel { 2657 float: right; 2658 } 2659 [dir="rtl"] .txp-control-panel > * { 2660 margin: 0 0 0 1em; 2661 } 2662 /** 2663 * List display options at top of listings. 2664 * 2665 * Appears on: 2666 * 2667 * List panels. 2668 * 2669 * Example HTML: 2670 * 2671 * <div class="txp-list-options"> 2672 * <a>List view</a> 2673 * <a>Grid view</a> 2674 * <a>List options</a> 2675 * </div> 2676 */ 2677 .txp-list-options { 2678 margin: 0.46153846153846em 0 1em; 2679 float: right; 2680 } 2681 .txp-list-options > * { 2682 margin: 0 0 0 1em; 2683 } 2684 .txp-list-options form { 2685 display: inline-block; 2686 } 2687 /** 2688 * Swap float/margin positions in RTL languages. 2689 */ 2690 [dir="rtl"] .txp-list-options { 2691 float: left; 2692 } 2693 [dir="rtl"] .txp-list-options > * { 2694 margin: 0 1em 0 0; 2695 } 2696 /** 2697 * Additonal action links ('Duplicate', 'View', etc.) on some panels. 2698 * 2699 * Appears on: 2700 * 2701 * Article write/edit panel, pages panel, forms panel, styles panel. 2702 * 2703 * Example HTML: 2704 * 2705 * <p class="txp-actions"> 2706 * <a class="txp-article-view">View</a> 2707 * <a class="txp-clone">Duplicate</a> 2708 * <a class="txp-new">Create new</a> 2709 * </p> 2710 */ 2711 .txp-actions a { 2712 display: inline-block; 2713 margin: 0.5em 1em 0 0; 2714 } 2715 .txp-actions a:last-child { 2716 margin: 0.5em 0 0; 2717 } 2718 /** 2719 * Swap margin positions in RTL languages. 2720 */ 2721 [dir="rtl"] .txp-actions a { 2722 margin: 0.5em 0 0 1em; 2723 } 2724 [dir="rtl"] .txp-actions a:last-child { 2725 margin: 0.5em 0 0; 2726 } 2727 /** 2728 * Remove top margin when inside a dialog box. 2729 */ 2730 .ui-dialog .txp-actions { 2731 margin-top: 0; 2732 } 2733 /** 2734 * Inline the action links. 2735 * 2736 * Appears on: 2737 * 2738 * Article pages panel, forms panel, styles panel. 2739 */ 2740 .txp-actions-inline { 2741 margin-top: 1.30769230769231em; 2742 float: right; 2743 } 2744 /** 2745 * Swap position in RTL languages. 2746 */ 2747 [dir="rtl"] .txp-actions-inline { 2748 float: left; 2749 } 2750 /** 2751 * AJAX spinners. 2752 * 2753 * Example HTML: 2754 * 2755 * <span class="spinner"></span> 2756 */ 2757 span.spinner { 2758 background-image: url("../img/spinner.gif"); 2759 background-size: 13px 13px; 2760 display: inline-block; 2761 width: 13px; 2762 height: 13px; 2763 } 2764 } 2765 2766 @media screen and (-webkit-min-device-pixel-ratio: 1.25), screen and (min-resolution: 1.25dppx), screen and (min-resolution: 120dpi) { 2767 span.spinner { 2768 background-image: url("../img/spinner@2x.gif"); 2769 } 2770 } 2771 2772 @media screen { 2773 /** 2774 * Parent container for multi-edit `select` widget at bottom of listings. 2775 * 2776 * Appears on: 2777 * 2778 * List panels. 2779 * 2780 * Example HTML: 2781 * 2782 * <div class="multi-edit"> 2783 * <select> 2784 * <option selected="selected">With selected...</option> 2785 * <option>Change author</option> 2786 * <option>Duplicate</option> 2787 * <option>Delete</option> 2788 * </select> 2789 * </div> 2790 */ 2791 .multi-edit { 2792 margin: 1em 0 0; 2793 } 2794 /** 2795 * Hide secondary `select` element on multi-edit `select` widget. 2796 * 2797 * Display is controlled via JavaScript (hidden by default until an action is 2798 * selected by user, then overrode by `.multi-step`). 2799 * 2800 * Appears on: 2801 * 2802 * List panels. 2803 * 2804 * Example HTML: 2805 * 2806 * <div class="multi-edit"> 2807 * <select> 2808 * <option selected="selected">With selected...</option> 2809 * <option>Change author</option> 2810 * <option>Duplicate</option> 2811 * <option>Delete</option> 2812 * </select> 2813 * <div class="multi-option"> 2814 * <select name="order"> 2815 * <option value="1">1</option> 2816 * <option value="2">1</option> 2817 * <option value="3" selected="selected">5</option> 2818 * </select> 2819 * </div> 2820 * <input type="submit" value="Go"> 2821 * </div> 2822 */ 2823 .multi-option { 2824 display: none; 2825 } 2826 /** 2827 * Show secondary `select` element on multi-edit `select` widget. 2828 * 2829 * Display is controlled via JavaScript (class not present until an action is 2830 * selected by user, then overrides `.multi-edit`). 2831 * 2832 * Appears on: 2833 * 2834 * List panels. 2835 * 2836 * Example HTML: 2837 * 2838 * <div class="multi-edit"> 2839 * <select> 2840 * <option selected="selected">With selected...</option> 2841 * <option>Change author</option> 2842 * <option>Duplicate</option> 2843 * <option>Delete</option> 2844 * </select> 2845 * <div class="multi-option multi-step"> 2846 * <select name="order"> 2847 * <option value="1">1</option> 2848 * <option value="2">1</option> 2849 * <option value="3" selected="selected">5</option> 2850 * </select> 2851 * </div> 2852 * <input type="submit" value="Go"> 2853 * </div> 2854 */ 2855 .multi-option.multi-step { 2856 display: inline-block; 2857 margin-left: 0.30769230769231em; 2858 } 2859 /** 2860 * Ensure links display as inline blocks (prevents linebreak problems). 2861 * 2862 * Example HTML: 2863 * 2864 * <a class="txp-option-link">Edit</a> 2865 */ 2866 .txp-option-link { 2867 display: inline-block; 2868 white-space: nowrap; 2869 } 2870 /** 2871 * When text sections are linked with anchors, make sure there is ample padding 2872 * above so they don't become obscured by sticky `header` area. 2873 * 2874 * Appears on: 2875 * 2876 * Plugin help pages, miscellaneous text pages. 2877 * 2878 * Example HTML: 2879 * 2880 * <section class="text-section" id="help-section02"> 2881 */ 2882 .text-section { 2883 margin-top: 3em; 2884 padding-top: 3em; 2885 border-top: 2px solid #cccccc; 2886 } 2887 /** 2888 * System permissions 'keep out' messages. 2889 */ 2890 .restricted-area { 2891 font-size: 2em; 2892 text-align: center; 2893 } 2894 /** 2895 * Visually disabled text and anchors. 2896 */ 2897 .disabled { 2898 background-image: none; 2899 cursor: default !important; 2900 opacity: 0.33; 2901 } 2902 .disabled a { 2903 text-decoration: none; 2904 cursor: default; 2905 } 2906 /** 2907 * List navigators on list panels. 2908 * 2909 * Anchor elements kept to one line to prevent space between buttons. 2910 * 2911 * Example HTML: 2912 * 2913 * <div class="txp-navigation" id="image_navigation"> 2914 * <p class="nav-tertiary pageby"> 2915 * <a class="navlink-active">15</a><a class="navlink">25</a><a class="navlink">50</a> 2916 * </p> 2917 * <nav class="prev-next"> 2918 * <span class="disabled"><span class="ui-icon ui-icon-arrowthick-1-w">Previous</span></span> 2919 * <form> 2920 * <label>Page</label> 2921 * <input class="current-page"> 2922 * of <span class="total-pages">2</span> 2923 * </form> 2924 * <a><span class="ui-icon ui-icon-arrowthick-1-e">Next</span></a> 2925 * </nav> 2926 * </div> 2927 */ 2928 .txp-navigation::after { 2929 display: table; 2930 clear: both; 2931 content: ""; 2932 } 2933 .pageby { 2934 margin: 1em 0; 2935 float: left; 2936 } 2937 .prev-next { 2938 margin: 1em 0; 2939 float: right; 2940 } 2941 .prev-next form { 2942 display: inline-block; 2943 } 2944 /** 2945 * Swap margin positions and arrow icons in RTL languages. 2946 */ 2947 [dir="rtl"] .pageby { 2948 float: right; 2949 } 2950 [dir="rtl"] .prev-next { 2951 float: left; 2952 } 2953 [dir="rtl"] .prev-next .ui-icon-arrowthick-1-w { 2954 background-position: -32px -48px; 2955 } 2956 [dir="rtl"] .prev-next .ui-icon-arrowthick-1-e { 2957 background-position: -96px -48px; 2958 } 2959 /* Panes 2960 ========================================================================== */ 2961 /** 2962 * Styling of edit panels. 2963 * 2964 * 1. Maximum width of edit panels. 2965 * 2. Remove margin above `h2` within panels. 2966 */ 2967 .txp-edit { 2968 max-width: 55em; 2969 margin: 0 auto 1em; 2970 padding: 1em 1em 1px; 2971 /* 1 */ 2972 background: #f7f7f7; 2973 } 2974 .txp-edit h2 { 2975 /* 2 */ 2976 margin-top: 0; 2977 } 2978 /** 2979 * Styling of edit panel cancel/submit button combinations. 2980 */ 2981 .txp-edit-actions { 2982 margin: 1em -1em; 2983 padding: 1em 1em 0; 2984 border-top: 2px solid #ffffff; 2985 text-align: right; 2986 } 2987 .txp-edit-actions > * { 2988 margin: 0 0 0 1em; 2989 } 2990 /** 2991 * Swap alignment and margin positions in RTL languages. 2992 */ 2993 [dir="rtl"] .txp-edit-actions { 2994 text-align: left; 2995 } 2996 [dir="rtl"] .txp-edit-actions > * { 2997 margin: 0 1em 0 0; 2998 } 2999 /* Form fields. 3000 ========================================================================== */ 3001 /** 3002 * Form field containers. 3003 * 3004 * Textpattern form fields can have optional inline help texts applied to them. 3005 * 3006 * Example HTML: 3007 * 3008 * <div class="txp-form-field"> 3009 * <div class="txp-form-field-label"> 3010 * <label> <a class="pophelp">i</a></label> 3011 * </div> 3012 * <div class="txp-form-field-value"> 3013 * <input> 3014 * </div> 3015 * </div> 3016 * 3017 * <div class="txp-form-field"> 3018 * <div class="txp-form-field-label"> 3019 * <label> <a class="pophelp">i</a></label> 3020 * </div> 3021 * <div class="txp-form-field-instructions"> 3022 * <p>(Optional) intructions on how to fill out this form field.</p> 3023 * </div> 3024 * <div class="txp-form-field-value"> 3025 * <input> 3026 * </div> 3027 * </div> 3028 */ 3029 .txp-form-field { 3030 margin: 1em 0; 3031 } 3032 /** 3033 * Label/value form field pairings. 3034 * 3035 * Note: this is always collapsed to a one-column format on mobile layout. 3036 * 3037 * Example HTML: 3038 * 3039 * <div class="txp-form-field"> 3040 * <div class="txp-form-field-label"> 3041 * <label>Label <a class="pophelp">i</a></label> 3042 * </div> 3043 * <div class="txp-form-field-value"> 3044 * <input type="text" size="32"> 3045 * </div> 3046 * </div> 3047 */ 3048 .txp-form-field-label, 3049 .txp-form-field-value { 3050 max-width: 29em; 3051 } 3052 /** 3053 * Inline form field pairings on edit panels, preferences group panels and 3054 * setup panels. 3055 * 3056 * Example HTML: 3057 * 3058 * <form class="txp-edit"> 3059 * <div class="txp-form-field"> 3060 * <div class="txp-form-field-label"></div> 3061 * <div class="txp-form-field-value"></div> 3062 * </div> 3063 * </form> 3064 */ 3065 .txp-edit .txp-form-field:not(.txp-form-field-textarea), 3066 .txp-prefs-group .txp-form-field:not(.txp-form-field-textarea), 3067 .setup:not(.welcome) .txp-form-field:not(.txp-form-field-textarea) { 3068 display: -ms-flexbox; 3069 display: flex; 3070 -ms-flex-align: baseline; 3071 align-items: baseline; 3072 } 3073 .txp-edit .txp-form-field-label, 3074 .txp-edit .txp-form-field-value, 3075 .txp-prefs-group .txp-form-field-label, 3076 .txp-prefs-group .txp-form-field-value, 3077 .setup:not(.welcome) .txp-form-field-label, 3078 .setup:not(.welcome) .txp-form-field-value { 3079 -ms-flex: 1 1 0%; 3080 flex: 1 1 0%; 3081 min-height: 2.15384615384615em; 3082 } 3083 /** 3084 * Don't inline or constrain form fields for textareas. 3085 * 3086 * Example HTML: 3087 * 3088 * <div class="txp-form-field txp-form-field-textarea"> 3089 * <div class="txp-form-field-label"> 3090 * <label>Label <a class="pophelp">i</a></label> 3091 * </div> 3092 * <div class="txp-form-field-value"> 3093 * <textarea></textarea> 3094 * </div> 3095 * </div> 3096 */ 3097 .txp-form-field-textarea .txp-form-field-label, 3098 .txp-form-field-textarea .txp-form-field-value { 3099 -ms-flex: none; 3100 flex: none; 3101 max-width: inherit; 3102 min-height: inherit; 3103 } 3104 /** 3105 * Don't constrain form fields when in 3 column layout spans. 3106 */ 3107 .txp-layout-4col-3span .txp-form-field-label, 3108 .txp-layout-4col-3span .txp-form-field-value { 3109 max-width: inherit; 3110 } 3111 /** 3112 * Form field inline help texts. 3113 * 3114 * 1. Limit maximum width of instructions, for legibility. 3115 * 3116 * Example HTML: 3117 * 3118 * <div class="txp-form-field> 3119 * <div class="txp-form-field-label"></div> 3120 * <div class="txp-form-field-instructions"> 3121 * <p>(Optional) intructions on how to fill out this form field.</p> 3122 * </div> 3123 * <div class="txp-form-field-value"></div> 3124 * </div> 3125 */ 3126 .txp-form-field-instructions { 3127 /* 1 */ 3128 max-width: 56em; 3129 } 3130 /** 3131 * Tag builder link on Forms panel and Pages panel. 3132 */ 3133 .txp-tagbuilder-dialog { 3134 position: relative; 3135 margin: 0 1px; 3136 float: right; 3137 z-index: 2; 3138 } 3139 /** 3140 * Swap alignment of tag builder link in RTL languages. 3141 */ 3142 [dir="rtl"] .txp-tagbuilder-dialog { 3143 float: left; 3144 } 3145 /** 3146 * Ensure Tag builder vertical footprint doesn't spill out of screen area. 3147 */ 3148 .txp-tagbuilder-container { 3149 display: -ms-flexbox; 3150 display: flex; 3151 -ms-flex-flow: column; 3152 flex-flow: column; 3153 max-height: 90vh; 3154 overflow: hidden; 3155 } 3156 .txp-tagbuilder-container .ui-dialog-titlebar { 3157 -ms-flex: none; 3158 flex: none; 3159 } 3160 .txp-tagbuilder-content { 3161 -ms-flex: 1 1 auto; 3162 flex: 1 1 auto; 3163 overflow: scroll; 3164 } 3165 /* Setup and login panels - additional layout 3166 ========================================================================== */ 3167 /** 3168 * Reduced `body` top padding of setup/login panels. 3169 * 3170 * Example HTML: 3171 * 3172 * <body class="setup"> 3173 * <body class="login"> 3174 */ 3175 .setup, 3176 .login { 3177 padding: 1em 2.75% 0; 3178 } 3179 /** 3180 * Column width and margins of setup panels. 3181 */ 3182 .txp-setup { 3183 max-width: 42em; 3184 margin: 1em auto; 3185 } 3186 .welcome .txp-setup { 3187 max-width: 20.30769230769231em; 3188 } 3189 /** 3190 * Column width and margins of login panels. 3191 */ 3192 .txp-login { 3193 max-width: 20.30769230769231em; 3194 margin: 1em auto; 3195 } 3196 /** 3197 * Large Textpattern logo replaces `h1`. 3198 */ 3199 .welcome h1, 3200 .login h1 { 3201 /* 2 */ 3202 text-indent: 110%; 3203 text-transform: capitalize; 3204 white-space: nowrap; 3205 overflow: hidden; 3206 width: 16.5em; 3207 height: 3.375em; 3208 background: url("../img/textpattern.svg") no-repeat; 3209 background-size: 16.5em 3.375em; 3210 font-size: 16px; 3211 } 3212 /** 3213 * Welcome page `select` spans entire column width. 3214 */ 3215 .welcome select { 3216 width: 100%; 3217 } 3218 /* Content -> Categories panel - additional layout 3219 ========================================================================== */ 3220 /** 3221 * Extra margin below multi-edit widgets on categories page. 3222 */ 3223 #page-category .multi-edit { 3224 margin-bottom: 1em; 3225 } 3226 /* Content -> Write panel - additional layout 3227 ========================================================================== */ 3228 /** 3229 * View mode tabs on write area. 3230 * 3231 * Example HTML: 3232 * 3233 * <div id="view_modes"> 3234 * <ul> 3235 * <li id="tab-text" class="active"><a>Text</a></li> 3236 * <li id="tab-html"><a>HTML</a></li> 3237 * <li id="tab-preview"><a>Preview</a></li> 3238 * </ul> 3239 * </div> 3240 */ 3241 #view_modes ul { 3242 margin: 0; 3243 padding: 0; 3244 border-bottom: 1px solid #cccccc; 3245 font-size: 11px; 3246 line-height: 16px; 3247 } 3248 #view_modes ul li { 3249 display: inline-block; 3250 } 3251 #view_modes ul a { 3252 display: block; 3253 position: relative; 3254 bottom: -1px; 3255 padding: 0.5em 1em; 3256 border: 1px solid #cccccc; 3257 background-color: #f2f2f2; 3258 color: #333333; 3259 text-decoration: none; 3260 box-shadow: inset 0 -0.25em 0.5em rgba(102, 102, 102, 0.15); 3261 } 3262 #view_modes ul a:hover { 3263 border-color: #aaaaaa; 3264 background-color: #f7f7f7; 3265 } 3266 #view_modes ul a:focus { 3267 border-color: #0066ff; 3268 outline: none; 3269 } 3270 #view_modes ul .active a { 3271 border-bottom-color: #ffffff; 3272 background-color: white; 3273 box-shadow: none; 3274 } 3275 #view_modes ul .active a:focus { 3276 border-color: #0066ff; 3277 } 3278 /** 3279 * Write page excerpt field when in HTML preview. 3280 */ 3281 .html .excerpt { 3282 margin-bottom: 1em; 3283 } 3284 /** 3285 * Custom font size/weight/colour for elements in write -> main content area. 3286 */ 3287 #main_content .text input { 3288 font-size: 16px; 3289 } 3290 #main_content .text textarea { 3291 font-size: 16px; 3292 line-height: 1.5em; 3293 } 3294 #main_content .text .title input { 3295 font-size: 20px; 3296 font-weight: bold; 3297 } 3298 #main_content .author { 3299 color: #777777; 3300 } 3301 /* Content -> Articles panel - additional layout 3302 ========================================================================== */ 3303 /** 3304 * Grey-out text for unpublished articles/non-modified dates in the list. 3305 */ 3306 .unpublished, 3307 .not-modified { 3308 color: #777777; 3309 } 3310 /* Content -> Images panel - additional layout 3311 ========================================================================== */ 3312 .has-thumbnail a:focus { 3313 outline: 0; 3314 } 3315 .thumbnail-alter input { 3316 margin: 0 0.30769230769231em 0 0; 3317 } 3318 .thumbnail-alter input:last-child { 3319 margin: 0; 3320 } 3321 [dir="rtl"] .thumbnail-alter input { 3322 margin: 0 0 0 0.30769230769231em; 3323 } 3324 [dir="rtl"] .thumbnail-alter input:last-child { 3325 margin: 0; 3326 } 3327 .thumbnail-image form { 3328 display: inline-block; 3329 margin-top: 5px; 3330 vertical-align: top; 3331 } 3332 /* Content -> Files panel - additional layout 3333 ========================================================================== */ 3334 /** 3335 * Make sure form for selecting existing files is on a new line. 3336 */ 3337 .txp-control-panel .assign-existing-form { 3338 display: block; 3339 margin-top: 1em; 3340 } 3341 /* Content -> Comments panel - additional layout 3342 ========================================================================== */ 3343 /** 3344 * Red background highlight for spam comment rows in the list. 3345 */ 3346 #page-discuss .txp-list tr.spam { 3347 background: #f5e5e5; 3348 } 3349 /** 3350 * Yellow background highlight for unmoderated comment rows in the list. 3351 */ 3352 #page-discuss .txp-list tr.moderate { 3353 background: #f9f2e3; 3354 } 3355 /* Presentation -> all panels - additional layout 3356 ========================================================================== */ 3357 .presentation textarea.code { 3358 height: 64vh; 3359 } 3360 /* Presentation -> Forms panel - additional layout 3361 ========================================================================== */ 3362 #page-form .name { 3363 display: inline-block; 3364 margin: 1em 1em 0 0; 3365 } 3366 #page-form .name input { 3367 width: 14.46153846153846em; 3368 } 3369 [dir="rtl"] #page-form .name { 3370 margin: 1em 0 0 1em; 3371 } 3372 #page-form .type { 3373 display: inline-block; 3374 margin: 1em 0 0; 3375 } 3376 #page-form .txp-layout-4col-3span .txp-actions a { 3377 margin-top: 1.5em; 3378 } 3379 /* Admin -> Preferences panel - additional layout 3380 ========================================================================== */ 3381 .txp-prefs-group { 3382 max-width: 60em; 3383 } 3384 /* Admin -> Languages panel - additional layout 3385 ========================================================================== */ 3386 #page-lang .txp-list .modified { 3387 margin-left: 0.6em; 3388 } 3389 /* Admin -> Plugins panel - additional layout 3390 ========================================================================== */ 3391 tr .manage span, 3392 tr .plugin-prefs { 3393 visibility: hidden; 3394 } 3395 tr.active .manage span, 3396 tr.active .plugin-prefs { 3397 visibility: visible; 3398 } 3399 div.code { 3400 height: 21em; 3401 margin-bottom: 1em; 3402 padding: 0.15384615384615em 0.38461538461538em; 3403 border: 1px solid #cccccc; 3404 overflow: auto; 3405 box-sizing: border-box; 3406 } 3407 /* Layout helpers 3408 ========================================================================== */ 3409 /** 3410 * Hide jQuery UI elements. 3411 */ 3412 .ui-helper-hidden { 3413 display: none; 3414 } 3415 /** 3416 * Hide jQuery UI text but still allow screen reader access. 3417 */ 3418 .ui-helper-hidden-accessible { 3419 position: absolute; 3420 width: 1px; 3421 height: 1px; 3422 margin: -1px; 3423 padding: 0; 3424 border: 0; 3425 overflow: hidden; 3426 clip: rect(0 0 0 0); 3427 } 3428 /** 3429 * Normalize various rules to avoid style inheritance. 3430 */ 3431 .ui-helper-reset { 3432 margin: 0; 3433 padding: 0; 3434 border: 0; 3435 outline: 0; 3436 font-size: 13px; 3437 line-height: 20px; 3438 list-style: none; 3439 text-decoration: none; 3440 } 3441 /** 3442 * Clearfix jQuery UI elements. 3443 */ 3444 .ui-helper-clearfix::after { 3445 display: table; 3446 clear: both; 3447 border-collapse: collapse; 3448 content: ""; 3449 } 3450 /** 3451 * Normalize absolute positioning of jQuery UI elements to avoid misplacement. 3452 */ 3453 .ui-helper-zfix { 3454 position: absolute; 3455 top: 0; 3456 left: 0; 3457 width: 100%; 3458 height: 100%; 3459 opacity: 0; 3460 } 3461 /** 3462 * Make jQuery UI elements show above other elements. 3463 */ 3464 .ui-front { 3465 z-index: 100; 3466 } 3467 /* Component containers 3468 ========================================================================== */ 3469 /** 3470 * Normalize font size of nested jQuery UI widgets to avoid style inheritance. 3471 */ 3472 .ui-widget .ui-widget { 3473 font-size: 13px; 3474 } 3475 /** 3476 * General style for jQuery widget content. 3477 */ 3478 .ui-widget-content { 3479 border: 1px solid #cccccc; 3480 background-color: #ffffff; 3481 } 3482 /** 3483 * General style for jQuery widget headers. 3484 */ 3485 .ui-widget-header { 3486 background-color: #dddddd; 3487 background-image: linear-gradient(#eeeeee, #dddddd); 3488 font-weight: bold; 3489 } 3490 /* Interaction states 3491 ========================================================================== */ 3492 /** 3493 * Default jQuery UI widget interaction state. 3494 */ 3495 .ui-state-default { 3496 border: 1px solid #cccccc; 3497 background-color: #f2f2f2; 3498 color: #333333; 3499 } 3500 /** 3501 * Override hover/focus states for anchors in certain situations. 3502 */ 3503 a.ui-state-default:hover, 3504 a.ui-state-default:focus { 3505 color: #333333; 3506 text-decoration: none; 3507 } 3508 /** 3509 * Hover jQuery UI widget interaction states. 3510 */ 3511 .ui-state-hover { 3512 border-color: #aaaaaa; 3513 background-color: #f7f7f7; 3514 } 3515 /** 3516 * Focus jQuery UI widget interaction states. 3517 */ 3518 .ui-state-focus { 3519 border-color: #0066ff; 3520 outline: 0; 3521 } 3522 .ui-state-focus a { 3523 outline: 0; 3524 } 3525 /** 3526 * Active jQuery UI widget interaction state. 3527 */ 3528 .ui-state-active { 3529 background-color: white; 3530 } 3531 /** 3532 * Highlight colour for jQuery UI widgets currently in 'selecting' state. 3533 */ 3534 .ui-selecting { 3535 background-color: #cce0ff; 3536 } 3537 /** 3538 * Highlight colour for jQuery UI widgets currently in 'selected' state. 3539 */ 3540 .ui-selected { 3541 background-color: #e6f0ff; 3542 } 3543 /* Interaction cues 3544 ========================================================================== */ 3545 /** 3546 * jQuery UI highlight cue colouring. 3547 */ 3548 .ui-state-highlight { 3549 border: 1px solid #e4c788; 3550 background-color: #f7eedb; 3551 } 3552 /** 3553 * jQuery UI error cue colouring. 3554 */ 3555 .ui-state-error { 3556 border: 1px solid #e1b2b2; 3557 background-color: #f2dede; 3558 color: #9d261d; 3559 } 3560 /** 3561 * Visually prioritized jQuery UI text. 3562 */ 3563 .ui-priority-primary { 3564 font-weight: bold; 3565 } 3566 /** 3567 * Visually non-prioritized jQuery UI text. 3568 */ 3569 .ui-priority-secondary { 3570 font-weight: normal; 3571 opacity: 0.66; 3572 } 3573 /** 3574 * Visually disabled jQuery UI text and anchors. 3575 */ 3576 .ui-state-disabled { 3577 background-image: none; 3578 cursor: default !important; 3579 opacity: 0.33; 3580 pointer-events: none; 3581 } 3582 .ui-state-disabled a { 3583 text-decoration: none; 3584 cursor: default; 3585 } 3586 /* Overlays 3587 ========================================================================== */ 3588 /** 3589 * Dark, semi-transparent container overlays. 3590 * 3591 * Example HTML: 3592 * 3593 * <div class="ui-widget-overlay"></div> 3594 */ 3595 .ui-widget-overlay { 3596 position: fixed; 3597 top: 0; 3598 left: 0; 3599 width: 100%; 3600 height: 100%; 3601 background: rgba(0, 0, 0, 0.75); 3602 } 3603 /* Shadows 3604 ========================================================================== */ 3605 /** 3606 * Faux shadows via `background-color`. 3607 * 3608 * Example HTML: 3609 * 3610 * <div class="ui-widget-shadow"></div> 3611 */ 3612 .ui-widget-shadow { 3613 box-shadow: 0 0 5px #666666; 3614 } 3615 /* Icons 3616 ========================================================================== */ 3617 /** 3618 * jQuery UI icon sprites, various colourschemes depending of usage state. 3619 * 3620 * Also used for 'Destroy' button. 3621 * 3622 * Example HTML: 3623 * 3624 * <span class="ui-icon ui-icon-caret-1-n"></span> 3625 * <span class="ui-icon ui-icon-folder-collapsed"></span> 3626 * <span class="ui-icon ui-icon-play"></span> 3627 * 3628 * TODO: Use `mask` in future (http://caniuse.com/#search=mask), instead of 3629 * `filter` or dedicated image. 3630 */ 3631 .ui-icon { 3632 display: inline-block; 3633 position: relative; 3634 width: 16px; 3635 height: 16px; 3636 background-image: url("../img/ui-icon-sprite-333333.svg"); 3637 background-repeat: no-repeat; 3638 background-size: 256px 272px; 3639 text-indent: -9999px; 3640 overflow: hidden; 3641 vertical-align: text-bottom; 3642 } 3643 .ui-widget-icon-block { 3644 display: block; 3645 left: 50%; 3646 margin-left: -8px; 3647 } 3648 /** 3649 * Default state icons. 3650 * 3651 * TODO: Use `mask` in future. 3652 */ 3653 .ui-state-default .ui-icon { 3654 -webkit-filter: brightness(1.6666667); 3655 filter: brightness(1.6666667); 3656 } 3657 /** 3658 * Weighted content icons and interaction state icons. 3659 * 3660 * TODO: Use `mask` in future. 3661 */ 3662 .ui-widget-content .ui-icon, 3663 .ui-widget-header .ui-icon, 3664 .ui-state-hover .ui-icon, 3665 .ui-state-focus .ui-icon, 3666 .ui-state-active .ui-icon { 3667 -webkit-filter: none; 3668 filter: none; 3669 } 3670 /** 3671 * 'Succes' state icons. 3672 * 3673 * Example HTML: 3674 * 3675 * <p class="success"> 3676 * <span class="ui-icon ui-icon-check"></span> 3677 * Success! 3678 * </p> 3679 * 3680 * TODO: Use `mask` in future. 3681 */ 3682 .success .ui-icon { 3683 background-image: url("../img/ui-icon-sprite-success.svg"); 3684 } 3685 /** 3686 * 'Warning' state icons. 3687 * 3688 * Example HTML: 3689 * 3690 * <p class="warning"> 3691 * <span class="ui-icon ui-icon-alert"></span> 3692 * Warning! 3693 * </p> 3694 * 3695 * TODO: Use `mask` in future. 3696 */ 3697 .ui-state-highlight .ui-icon, 3698 .warning .ui-icon { 3699 background-image: url("../img/ui-icon-sprite-warning.svg"); 3700 } 3701 /** 3702 * 'Error' state icons. 3703 * 3704 * Example HTML: 3705 * 3706 * <p class="error"> 3707 * <span class="ui-icon ui-icon-alert"></span> 3708 * Error! 3709 * </p> 3710 * 3711 * TODO: Use `mask` in future. 3712 */ 3713 .ui-state-error .ui-icon, 3714 .ui-state-error-text .ui-icon, 3715 .error .ui-icon, 3716 .destroy .ui-icon { 3717 background-image: url("../img/ui-icon-sprite-error.svg"); 3718 } 3719 /** 3720 * 'Information' state icons. 3721 * 3722 * Example HTML: 3723 * 3724 * <p class="information"> 3725 * <span class="ui-icon ui-icon-info"></span> 3726 * Content 3727 * </p> 3728 * 3729 * TODO: Use `mask` in future. 3730 */ 3731 .information .ui-icon { 3732 background-image: url("../img/ui-icon-sprite-info.svg"); 3733 } 3734 /** 3735 * Icons within Textpattern system message panes. 3736 * 3737 * TODO: Use `mask` in future. 3738 */ 3739 #messagepane .ui-icon { 3740 background-image: url("../img/ui-icon-sprite-ffffff.svg"); 3741 } 3742 /** 3743 * Icon sprite positionings. 3744 * 3745 * TODO: Use `mask` in future. 3746 */ 3747 .ui-icon-blank { 3748 background-position: 16px 16px; 3749 } 3750 .ui-icon-caret-1-n { 3751 background-position: 0 0; 3752 } 3753 .ui-icon-caret-1-ne { 3754 background-position: -16px 0; 3755 } 3756 .ui-icon-caret-1-e { 3757 background-position: -32px 0; 3758 } 3759 .ui-icon-caret-1-se { 3760 background-position: -48px 0; 3761 } 3762 .ui-icon-caret-1-s { 3763 background-position: -64px 0; 3764 } 3765 .ui-icon-caret-1-sw { 3766 background-position: -80px 0; 3767 } 3768 .ui-icon-caret-1-w { 3769 background-position: -96px 0; 3770 } 3771 .ui-icon-caret-1-nw { 3772 background-position: -112px 0; 3773 } 3774 .ui-icon-caret-2-n-s { 3775 background-position: -128px 0; 3776 } 3777 .ui-icon-caret-2-e-w { 3778 background-position: -144px 0; 3779 } 3780 .ui-icon-triangle-1-n { 3781 background-position: 0 -16px; 3782 } 3783 .ui-icon-triangle-1-ne { 3784 background-position: -16px -16px; 3785 } 3786 .ui-icon-triangle-1-e { 3787 background-position: -32px -16px; 3788 } 3789 .ui-icon-triangle-1-se { 3790 background-position: -48px -16px; 3791 } 3792 .ui-icon-triangle-1-s { 3793 background-position: -64px -16px; 3794 } 3795 .ui-icon-triangle-1-sw { 3796 background-position: -80px -16px; 3797 } 3798 .ui-icon-triangle-1-w { 3799 background-position: -96px -16px; 3800 } 3801 .ui-icon-triangle-1-nw { 3802 background-position: -112px -16px; 3803 } 3804 .ui-icon-triangle-2-n-s { 3805 background-position: -128px -16px; 3806 } 3807 .ui-icon-triangle-2-e-w { 3808 background-position: -144px -16px; 3809 } 3810 .ui-icon-arrow-1-n { 3811 background-position: 0 -32px; 3812 } 3813 .ui-icon-arrow-1-ne { 3814 background-position: -16px -32px; 3815 } 3816 .ui-icon-arrow-1-e { 3817 background-position: -32px -32px; 3818 } 3819 .ui-icon-arrow-1-se { 3820 background-position: -48px -32px; 3821 } 3822 .ui-icon-arrow-1-s { 3823 background-position: -64px -32px; 3824 } 3825 .ui-icon-arrow-1-sw { 3826 background-position: -80px -32px; 3827 } 3828 .ui-icon-arrow-1-w { 3829 background-position: -96px -32px; 3830 } 3831 .ui-icon-arrow-1-nw { 3832 background-position: -112px -32px; 3833 } 3834 .ui-icon-arrow-2-n-s { 3835 background-position: -128px -32px; 3836 } 3837 .ui-icon-arrow-2-ne-sw { 3838 background-position: -144px -32px; 3839 } 3840 .ui-icon-arrow-2-e-w { 3841 background-position: -160px -32px; 3842 } 3843 .ui-icon-arrow-2-se-nw { 3844 background-position: -176px -32px; 3845 } 3846 .ui-icon-arrowstop-1-n { 3847 background-position: -192px -32px; 3848 } 3849 .ui-icon-arrowstop-1-e { 3850 background-position: -208px -32px; 3851 } 3852 .ui-icon-arrowstop-1-s { 3853 background-position: -224px -32px; 3854 } 3855 .ui-icon-arrowstop-1-w { 3856 background-position: -240px -32px; 3857 } 3858 .ui-icon-arrowthick-1-n { 3859 background-position: 0 -48px; 3860 } 3861 .ui-icon-arrowthick-1-ne { 3862 background-position: -16px -48px; 3863 } 3864 .ui-icon-arrowthick-1-e { 3865 background-position: -32px -48px; 3866 } 3867 .ui-icon-arrowthick-1-se { 3868 background-position: -48px -48px; 3869 } 3870 .ui-icon-arrowthick-1-s { 3871 background-position: -64px -48px; 3872 } 3873 .ui-icon-arrowthick-1-sw { 3874 background-position: -80px -48px; 3875 } 3876 .ui-icon-arrowthick-1-w { 3877 background-position: -96px -48px; 3878 } 3879 .ui-icon-arrowthick-1-nw { 3880 background-position: -112px -48px; 3881 } 3882 .ui-icon-arrowthick-2-n-s { 3883 background-position: -128px -48px; 3884 } 3885 .ui-icon-arrowthick-2-ne-sw { 3886 background-position: -144px -48px; 3887 } 3888 .ui-icon-arrowthick-2-e-w { 3889 background-position: -160px -48px; 3890 } 3891 .ui-icon-arrowthick-2-se-nw { 3892 background-position: -176px -48px; 3893 } 3894 .ui-icon-arrowthickstop-1-n { 3895 background-position: -192px -48px; 3896 } 3897 .ui-icon-arrowthickstop-1-e { 3898 background-position: -208px -48px; 3899 } 3900 .ui-icon-arrowthickstop-1-s { 3901 background-position: -224px -48px; 3902 } 3903 .ui-icon-arrowthickstop-1-w { 3904 background-position: -240px -48px; 3905 } 3906 .ui-icon-arrowreturnthick-1-w { 3907 background-position: 0 -64px; 3908 } 3909 .ui-icon-arrowreturnthick-1-n { 3910 background-position: -16px -64px; 3911 } 3912 .ui-icon-arrowreturnthick-1-e { 3913 background-position: -32px -64px; 3914 } 3915 .ui-icon-arrowreturnthick-1-s { 3916 background-position: -48px -64px; 3917 } 3918 .ui-icon-arrowreturn-1-w { 3919 background-position: -64px -64px; 3920 } 3921 .ui-icon-arrowreturn-1-n { 3922 background-position: -80px -64px; 3923 } 3924 .ui-icon-arrowreturn-1-e { 3925 background-position: -96px -64px; 3926 } 3927 .ui-icon-arrowreturn-1-s { 3928 background-position: -112px -64px; 3929 } 3930 .ui-icon-arrowrefresh-1-w { 3931 background-position: -128px -64px; 3932 } 3933 .ui-icon-arrowrefresh-1-n { 3934 background-position: -144px -64px; 3935 } 3936 .ui-icon-arrowrefresh-1-e { 3937 background-position: -160px -64px; 3938 } 3939 .ui-icon-arrowrefresh-1-s { 3940 background-position: -176px -64px; 3941 } 3942 .ui-icon-arrow-4 { 3943 background-position: 0 -80px; 3944 } 3945 .ui-icon-arrow-4-diag { 3946 background-position: -16px -80px; 3947 } 3948 .ui-icon-extlink { 3949 background-position: -32px -80px; 3950 } 3951 .ui-icon-newwin { 3952 background-position: -48px -80px; 3953 } 3954 .ui-icon-refresh { 3955 background-position: -64px -80px; 3956 } 3957 .ui-icon-shuffle { 3958 background-position: -80px -80px; 3959 } 3960 .ui-icon-transfer-e-w { 3961 background-position: -96px -80px; 3962 } 3963 .ui-icon-transferthick-e-w { 3964 background-position: -112px -80px; 3965 } 3966 .ui-icon-folder-collapsed { 3967 background-position: 0 -96px; 3968 } 3969 .ui-icon-folder-open { 3970 background-position: -16px -96px; 3971 } 3972 .ui-icon-document { 3973 background-position: -32px -96px; 3974 } 3975 .ui-icon-document-b { 3976 background-position: -48px -96px; 3977 } 3978 .ui-icon-note { 3979 background-position: -64px -96px; 3980 } 3981 .ui-icon-mail-closed { 3982 background-position: -80px -96px; 3983 } 3984 .ui-icon-mail-open { 3985 background-position: -96px -96px; 3986 } 3987 .ui-icon-suitcase { 3988 background-position: -112px -96px; 3989 } 3990 .ui-icon-comment { 3991 background-position: -128px -96px; 3992 } 3993 .ui-icon-person { 3994 background-position: -144px -96px; 3995 } 3996 .ui-icon-print { 3997 background-position: -160px -96px; 3998 } 3999 .ui-icon-trash { 4000 background-position: -176px -96px; 4001 } 4002 .ui-icon-locked { 4003 background-position: -192px -96px; 4004 } 4005 .ui-icon-unlocked { 4006 background-position: -208px -96px; 4007 } 4008 .ui-icon-bookmark { 4009 background-position: -224px -96px; 4010 } 4011 .ui-icon-tag { 4012 background-position: -240px -96px; 4013 } 4014 .ui-icon-home { 4015 background-position: 0 -112px; 4016 } 4017 .ui-icon-flag { 4018 background-position: -16px -112px; 4019 } 4020 .ui-icon-calendar { 4021 background-position: -32px -112px; 4022 } 4023 .ui-icon-cart { 4024 background-position: -48px -112px; 4025 } 4026 .ui-icon-pencil { 4027 background-position: -64px -112px; 4028 } 4029 .ui-icon-clock { 4030 background-position: -80px -112px; 4031 } 4032 .ui-icon-disk { 4033 background-position: -96px -112px; 4034 } 4035 .ui-icon-calculator { 4036 background-position: -112px -112px; 4037 } 4038 .ui-icon-zoomin { 4039 background-position: -128px -112px; 4040 } 4041 .ui-icon-zoomout { 4042 background-position: -144px -112px; 4043 } 4044 .ui-icon-search { 4045 background-position: -160px -112px; 4046 } 4047 .ui-icon-wrench { 4048 background-position: -176px -112px; 4049 } 4050 .ui-icon-gear { 4051 background-position: -192px -112px; 4052 } 4053 .ui-icon-heart { 4054 background-position: -208px -112px; 4055 } 4056 .ui-icon-star { 4057 background-position: -224px -112px; 4058 } 4059 .ui-icon-link { 4060 background-position: -240px -112px; 4061 } 4062 .ui-icon-cancel { 4063 background-position: 0 -128px; 4064 } 4065 .ui-icon-plus { 4066 background-position: -16px -128px; 4067 } 4068 .ui-icon-plusthick { 4069 background-position: -32px -128px; 4070 } 4071 .ui-icon-minus { 4072 background-position: -48px -128px; 4073 } 4074 .ui-icon-minusthick { 4075 background-position: -64px -128px; 4076 } 4077 .ui-icon-close { 4078 background-position: -80px -128px; 4079 } 4080 .ui-icon-closethick { 4081 background-position: -96px -128px; 4082 } 4083 .ui-icon-key { 4084 background-position: -112px -128px; 4085 } 4086 .ui-icon-lightbulb { 4087 background-position: -128px -128px; 4088 } 4089 .ui-icon-scissors { 4090 background-position: -144px -128px; 4091 } 4092 .ui-icon-clipboard { 4093 background-position: -160px -128px; 4094 } 4095 .ui-icon-copy { 4096 background-position: -176px -128px; 4097 } 4098 .ui-icon-contact { 4099 background-position: -192px -128px; 4100 } 4101 .ui-icon-image { 4102 background-position: -208px -128px; 4103 } 4104 .ui-icon-video { 4105 background-position: -224px -128px; 4106 } 4107 .ui-icon-script { 4108 background-position: -240px -128px; 4109 } 4110 .ui-icon-alert { 4111 background-position: 0 -144px; 4112 } 4113 .ui-icon-info { 4114 background-position: -16px -144px; 4115 } 4116 .ui-icon-notice { 4117 background-position: -32px -144px; 4118 } 4119 .ui-icon-help { 4120 background-position: -48px -144px; 4121 } 4122 .ui-icon-check { 4123 background-position: -64px -144px; 4124 } 4125 .ui-icon-bullet { 4126 background-position: -80px -144px; 4127 } 4128 .ui-icon-radio-on { 4129 background-position: -96px -144px; 4130 } 4131 .ui-icon-radio-off { 4132 background-position: -112px -144px; 4133 } 4134 .ui-icon-pin-w { 4135 background-position: -128px -144px; 4136 } 4137 .ui-icon-pin-s { 4138 background-position: -144px -144px; 4139 } 4140 .ui-icon-play { 4141 background-position: 0 -160px; 4142 } 4143 .ui-icon-pause { 4144 background-position: -16px -160px; 4145 } 4146 .ui-icon-seek-next { 4147 background-position: -32px -160px; 4148 } 4149 .ui-icon-seek-prev { 4150 background-position: -48px -160px; 4151 } 4152 .ui-icon-seek-end { 4153 background-position: -64px -160px; 4154 } 4155 .ui-icon-seek-start { 4156 background-position: -80px -160px; 4157 } 4158 .ui-icon-stop { 4159 background-position: -96px -160px; 4160 } 4161 .ui-icon-eject { 4162 background-position: -112px -160px; 4163 } 4164 .ui-icon-volume-off { 4165 background-position: -128px -160px; 4166 } 4167 .ui-icon-volume-on { 4168 background-position: -144px -160px; 4169 } 4170 .ui-icon-power { 4171 background-position: 0 -176px; 4172 } 4173 .ui-icon-signal-diag { 4174 background-position: -16px -176px; 4175 } 4176 .ui-icon-signal { 4177 background-position: -32px -176px; 4178 } 4179 .ui-icon-battery-0 { 4180 background-position: -48px -176px; 4181 } 4182 .ui-icon-battery-1 { 4183 background-position: -64px -176px; 4184 } 4185 .ui-icon-battery-2 { 4186 background-position: -80px -176px; 4187 } 4188 .ui-icon-battery-3 { 4189 background-position: -96px -176px; 4190 } 4191 .ui-icon-circle-plus { 4192 background-position: 0 -192px; 4193 } 4194 .ui-icon-circle-minus { 4195 background-position: -16px -192px; 4196 } 4197 .ui-icon-circle-close { 4198 background-position: -32px -192px; 4199 } 4200 .ui-icon-circle-triangle-e { 4201 background-position: -48px -192px; 4202 } 4203 .ui-icon-circle-triangle-s { 4204 background-position: -64px -192px; 4205 } 4206 .ui-icon-circle-triangle-w { 4207 background-position: -80px -192px; 4208 } 4209 .ui-icon-circle-triangle-n { 4210 background-position: -96px -192px; 4211 } 4212 .ui-icon-circle-arrow-e { 4213 background-position: -112px -192px; 4214 } 4215 .ui-icon-circle-arrow-s { 4216 background-position: -128px -192px; 4217 } 4218 .ui-icon-circle-arrow-w { 4219 background-position: -144px -192px; 4220 } 4221 .ui-icon-circle-arrow-n { 4222 background-position: -160px -192px; 4223 } 4224 .ui-icon-circle-zoomin { 4225 background-position: -176px -192px; 4226 } 4227 .ui-icon-circle-zoomout { 4228 background-position: -192px -192px; 4229 } 4230 .ui-icon-circle-check { 4231 background-position: -208px -192px; 4232 } 4233 .ui-icon-circlesmall-plus { 4234 background-position: 0 -208px; 4235 } 4236 .ui-icon-circlesmall-minus { 4237 background-position: -16px -208px; 4238 } 4239 .ui-icon-circlesmall-close { 4240 background-position: -32px -208px; 4241 } 4242 .ui-icon-squaresmall-plus { 4243 background-position: -48px -208px; 4244 } 4245 .ui-icon-squaresmall-minus { 4246 background-position: -64px -208px; 4247 } 4248 .ui-icon-squaresmall-close { 4249 background-position: -80px -208px; 4250 } 4251 .ui-icon-grip-dotted-vertical { 4252 background-position: 0 -224px; 4253 } 4254 .ui-icon-grip-dotted-horizontal { 4255 background-position: -16px -224px; 4256 } 4257 .ui-icon-grip-solid-vertical { 4258 background-position: -32px -224px; 4259 } 4260 .ui-icon-grip-solid-horizontal { 4261 background-position: -48px -224px; 4262 } 4263 .ui-icon-gripsmall-diagonal-se { 4264 background-position: -64px -224px; 4265 } 4266 .ui-icon-grip-diagonal-se { 4267 background-position: -80px -224px; 4268 } 4269 /* Hive extra icons 4270 ========================================================================== */ 4271 /** 4272 * Additional handy icons we've added to the standard jQuery UI icon sprite. 4273 * 4274 * Example HTML: 4275 * 4276 * <span class="ui-icon ui-extra-icon-code"></span> 4277 * <span class="ui-icon ui-extra-icon-download"></span> 4278 * 4279 * TODO: Use `mask` in future. 4280 */ 4281 .ui-extra-icon-code { 4282 background-position: 0 -256px; 4283 } 4284 .ui-extra-icon-list { 4285 background-position: -16px -256px; 4286 } 4287 .ui-extra-icon-grid { 4288 background-position: -32px -256px; 4289 } 4290 .ui-extra-icon-download { 4291 background-position: -48px -256px; 4292 } 4293 .ui-extra-icon-upload { 4294 background-position: -64px -256px; 4295 } 4296 .ui-extra-icon-attach { 4297 background-position: -80px -256px; 4298 } 4299 .ui-extra-icon-new-document { 4300 background-position: -96px -256px; 4301 } 4302 .ui-extra-icon-facebook { 4303 background-position: -112px -256px; 4304 } 4305 .ui-extra-icon-googleplus { 4306 background-position: -128px -256px; 4307 } 4308 .ui-extra-icon-linkedin { 4309 background-position: -144px -256px; 4310 } 4311 .ui-extra-icon-twitter { 4312 background-position: -160px -256px; 4313 } 4314 .ui-extra-icon-github { 4315 background-position: -176px -256px; 4316 } 4317 /* Draggable 4318 ========================================================================== */ 4319 /** 4320 * jQuery UI Draggable. 4321 * 4322 * Some classes and HTML elements generally added via JavaScript, more info - 4323 * https://jqueryui.com/draggable/ 4324 * 4325 * Example HTML: 4326 * 4327 * <div class="ui-draggable"> 4328 * Content 4329 * </div> 4330 */ 4331 .ui-draggable { 4332 transition: box-shadow 0.1s linear; 4333 } 4334 .ui-draggable-handle { 4335 -ms-touch-action: none; 4336 touch-action: none; 4337 } 4338 /** 4339 * Class added when element is actively being dragged. 4340 */ 4341 .ui-draggable-dragging { 4342 box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.2); 4343 z-index: 1000; 4344 } 4345 /* Resizable 4346 ========================================================================== */ 4347 /** 4348 * jQuery UI Selectable. 4349 * 4350 * Some classes and HTML elements generally added via JavaScript, more info - 4351 * https://jqueryui.com/resizable/ 4352 * 4353 * Example HTML: 4354 * 4355 * <div class="ui-resizable"> 4356 * <strong>Resize me!</strong> 4357 * <div class="ui-resizable-handle ui-resizable-e"></div> 4358 * <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se"></div> 4359 * </div> 4360 */ 4361 .ui-resizable { 4362 position: relative; 4363 } 4364 .ui-resizable-handle { 4365 display: block; 4366 position: absolute; 4367 font-size: 0.1px; 4368 -ms-touch-action: none; 4369 touch-action: none; 4370 } 4371 /** 4372 * Disabled or auto-hidden resizables. 4373 */ 4374 .ui-resizable-disabled .ui-resizable-handle, 4375 .ui-resizable-autohide .ui-resizable-handle { 4376 display: none; 4377 } 4378 /** 4379 * Resize handle positioning options. 4380 */ 4381 .ui-resizable-n { 4382 top: -5px; 4383 left: 0; 4384 width: 100%; 4385 height: 7px; 4386 cursor: n-resize; 4387 } 4388 .ui-resizable-s { 4389 bottom: -5px; 4390 left: 0; 4391 width: 100%; 4392 height: 7px; 4393 cursor: s-resize; 4394 } 4395 .ui-resizable-e { 4396 top: 0; 4397 right: -5px; 4398 width: 7px; 4399 height: 100%; 4400 cursor: e-resize; 4401 } 4402 .ui-resizable-w { 4403 top: 0; 4404 left: -5px; 4405 width: 7px; 4406 height: 100%; 4407 cursor: w-resize; 4408 } 4409 .ui-resizable-se { 4410 right: 1px; 4411 bottom: 1px; 4412 width: 12px; 4413 height: 12px; 4414 cursor: se-resize; 4415 } 4416 .ui-resizable-sw { 4417 bottom: -5px; 4418 left: -5px; 4419 width: 9px; 4420 height: 9px; 4421 cursor: sw-resize; 4422 } 4423 .ui-resizable-nw { 4424 top: -5px; 4425 left: -5px; 4426 width: 9px; 4427 height: 9px; 4428 cursor: nw-resize; 4429 } 4430 .ui-resizable-ne { 4431 top: -5px; 4432 right: -5px; 4433 width: 9px; 4434 height: 9px; 4435 cursor: ne-resize; 4436 } 4437 /* Selectable 4438 ========================================================================== */ 4439 /** 4440 * jQuery UI Selectable. 4441 * 4442 * Some classes and HTML elements generally added via JavaScript, more info - 4443 * https://jqueryui.com/selectable/ 4444 * 4445 * Example HTML: 4446 * 4447 * <ol class="ui-selectable"> 4448 * <li class="ui-selectee">Item 1</li> 4449 * <li class="ui-selectee ui-selected">Item 2 (selected)</li> 4450 * <li class="ui-selectee">Item 3</li> 4451 * <li class="ui-selectee">Item 4</li> 4452 * </ol> 4453 */ 4454 .ui-selectable { 4455 -ms-touch-action: none; 4456 touch-action: none; 4457 } 4458 /** 4459 * Drag to select. 4460 */ 4461 .ui-selectable-helper { 4462 position: absolute; 4463 border: 1px dotted #004cbf; 4464 z-index: 100; 4465 } 4466 /* Sortable 4467 ========================================================================== */ 4468 /** 4469 * jQuery UI Sortable. 4470 * 4471 * Some classes and HTML elements generally added via JavaScript, more info - 4472 * https://jqueryui.com/sortable/ 4473 * 4474 * Example HTML: 4475 * 4476 * <ul class="ui-sortable"> 4477 * <li> 4478 * Item 1 4479 * </li> 4480 * <li class="ui-sortable-helper"> 4481 * Item 2 (this item is currently being actively sorted) 4482 * </li> 4483 * <li class="ui-sortable-placeholder"></li> 4484 * <li> 4485 * Item 3 4486 * </li> 4487 * </ul> 4488 */ 4489 .ui-sortable-helper { 4490 box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.2); 4491 } 4492 .ui-sortable-handle { 4493 -ms-touch-action: none; 4494 touch-action: none; 4495 } 4496 .ui-sortable-placeholder { 4497 border: 1px dotted #004cbf; 4498 } 4499 /* Accordion 4500 ========================================================================== */ 4501 /** 4502 * jQuery UI Accordion. 4503 * 4504 * Some classes and HTML elements generally added via JavaScript, more info - 4505 * https://jqueryui.com/accordion/ 4506 * 4507 * Example HTML: 4508 * 4509 * <div class="ui-accordion"> 4510 * <h3 class="ui-accordion-header"> 4511 * <span class="ui-accordion-header-icon"></span> 4512 * <a>Section 1 lever</a> 4513 * </h3> 4514 * <div class="ui-accordion-content"> 4515 * Section 1 content 4516 * </div> 4517 * <h3 class="ui-accordion-header"> 4518 * <span class="ui-accordion-header-icon"></span> 4519 * <a>Section 2 lever</a> 4520 * </h3> 4521 * <div class="ui-accordion-content"> 4522 * Section 2 content 4523 * </div> 4524 * </div> 4525 */ 4526 .ui-accordion .ui-accordion-header { 4527 display: block; 4528 position: relative; 4529 margin: 2px 0 0; 4530 padding: 0.5em 1em; 4531 font-size: 13px; 4532 cursor: pointer; 4533 } 4534 .ui-accordion .ui-accordion-header a { 4535 color: #333333; 4536 text-decoration: none; 4537 } 4538 .ui-accordion .ui-accordion-header .ui-accordion-header-icon { 4539 position: absolute; 4540 top: 50%; 4541 left: 0.5em; 4542 margin-top: -8px; 4543 } 4544 .ui-accordion .ui-accordion-content { 4545 padding: 1px 1em; 4546 border-top: 0; 4547 overflow: auto; 4548 } 4549 .ui-accordion .ui-accordion-icons, 4550 .ui-accordion .ui-accordion-icons .ui-accordion-icons { 4551 padding-left: 2em; 4552 } 4553 /** 4554 * Accordion RTL support. 4555 */ 4556 [dir="rtl"] .ui-accordion .ui-accordion-header .ui-accordion-header-icon { 4557 right: 0.5em; 4558 left: auto; 4559 } 4560 [dir="rtl"] .ui-accordion .ui-accordion-icons, 4561 [dir="rtl"] .ui-accordion .ui-accordion-icons .ui-accordion-icons { 4562 padding-right: 2em; 4563 padding-left: 0; 4564 } 4565 /* Autocomplete 4566 ========================================================================== */ 4567 /** 4568 * jQuery UI Autocomplete. 4569 * 4570 * Some classes and HTML elements generally added via JavaScript, more info - 4571 * https://jqueryui.com/autocomplete/ 4572 * 4573 * Example HTML: 4574 * 4575 * <input type="text" class="ui-autocomplete-input"> 4576 * <ul class="ui-autocomplete"> 4577 * <li><a></a></li> 4578 * <li><a></a></li> 4579 * <li><a></a></li> 4580 * </ul> 4581 */ 4582 .ui-autocomplete { 4583 position: absolute; 4584 top: 0; 4585 left: 0; 4586 cursor: default; 4587 } 4588 /* Button 4589 ========================================================================== */ 4590 /** 4591 * jQuery UI Button. 4592 * 4593 * Some classes and HTML elements generally added via JavaScript, more info - 4594 * https://jqueryui.com/button/ 4595 * 4596 * 1. Correct font size not being inherited in all browsers. 4597 * 2. Improve usability and consistency of cursor style between image-type 4598 * `input` and others. 4599 * 3. The `overflow` property removes extra width in IE. 4600 * 4. Remove iOS Safari default styling. 4601 * 4602 * Example HTML: 4603 * 4604 * <a class="ui-button ui-corner-all ui-widget">Button</a> 4605 */ 4606 .ui-button { 4607 background-color: #dddddd; 4608 background-image: linear-gradient(#eeeeee, #dddddd); 4609 display: inline-block; 4610 position: relative; 4611 height: 2.1538462em; 4612 margin: 0 0.1em 0 0; 4613 padding: 0.30769230769231em 0.61538461538462em; 4614 border: 1px solid #cccccc; 4615 background-clip: padding-box; 4616 color: #333333; 4617 font-family: Helvetica, Arial, sans-serif; 4618 /* 1 */ 4619 font-size: 13px; 4620 line-height: 1.3846154em; 4621 text-align: center; 4622 text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5); 4623 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); 4624 /* 2 */ 4625 cursor: pointer; 4626 /* 3 */ 4627 overflow: visible; 4628 vertical-align: baseline; 4629 box-sizing: border-box; 4630 /* 4 */ 4631 -webkit-appearance: none; 4632 -moz-appearance: none; 4633 appearance: none; 4634 -webkit-user-select: none; 4635 -moz-user-select: none; 4636 -ms-user-select: none; 4637 user-select: none; 4638 } 4639 .ui-button:hover { 4640 background-color: #e8e8e8; 4641 background-image: linear-gradient(#f8f8f8, #e8e8e8); 4642 border-color: #aaaaaa; 4643 color: #333333; 4644 text-decoration: none; 4645 } 4646 .ui-button:active { 4647 background-color: #d6d6d6; 4648 background-image: linear-gradient(#e6e6e6, #d6d6d6); 4649 border-color: #aaaaaa; 4650 color: #1a1a1a; 4651 text-decoration: none; 4652 box-shadow: inset 0 0.2em 0.25em rgba(0, 0, 0, 0.15); 4653 } 4654 .ui-button:focus { 4655 border-color: #0066ff; 4656 outline: 0; 4657 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); 4658 } 4659 /** 4660 * Focus styling for buttons. 4661 * 4662 * 1. `!important` required to override specificity. 4663 */ 4664 .ui-button.ui-state-focus { 4665 /* 1 */ 4666 border-color: #0066ff !important; 4667 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); 4668 } 4669 /** 4670 * Single-icon-only button. 4671 * 4672 * To make room for the icon, a width needs to be set here. 4673 * 4674 * Example HTML: 4675 * 4676 * <a class="ui-button ui-corner-all ui-widget ui-button-icon-only"> 4677 * <span class="ui-button-icon ui-icon ui-icon-gear"></span> 4678 * <span class="ui-button-icon-space"> </span> 4679 * Button one icon, no text 4680 * </a> 4681 */ 4682 .ui-button-icon-only { 4683 width: 2.1538462em; 4684 text-indent: -9999px; 4685 white-space: nowrap; 4686 box-sizing: border-box; 4687 } 4688 /** 4689 * No icon support for input elements. 4690 */ 4691 input.ui-button.ui-button-icon-only { 4692 text-indent: 0; 4693 } 4694 .ui-button.ui-corner-all { 4695 border-radius: 0.5em; 4696 } 4697 .ui-button.ui-corner-right { 4698 border-radius: 0 0.5em 0.5em 0; 4699 } 4700 [dir="rtl"] .ui-button.ui-corner-right { 4701 border-radius: 0.5em 0 0 0.5em; 4702 } 4703 .ui-button.ui-corner-left { 4704 border-radius: 0.5em 0 0 0.5em; 4705 } 4706 [dir="rtl"] .ui-button.ui-corner-left { 4707 border-radius: 0 0.5em 0.5em 0; 4708 } 4709 /** 4710 * Button icon element(s). 4711 */ 4712 .ui-button-icon-only .ui-icon { 4713 position: absolute; 4714 top: 50%; 4715 left: 50%; 4716 margin-top: -8px; 4717 margin-left: -8px; 4718 } 4719 .ui-button.ui-icon-notext .ui-icon { 4720 padding: 0; 4721 text-indent: -9999px; 4722 white-space: nowrap; 4723 } 4724 input.ui-button.ui-icon-notext .ui-icon { 4725 padding: 0.4em 1em; 4726 text-indent: 0; 4727 white-space: normal; 4728 } 4729 /* Checkboxradio 4730 ========================================================================== */ 4731 /** 4732 * jQuery UI Checkboxradio. 4733 * 4734 * Some classes and HTML elements generally added via JavaScript, more info - 4735 * https://jqueryui.com/checkboxradio/ 4736 * 4737 * Example HTML: 4738 * 4739 * <fieldset> 4740 * <legend>Select a Location:</legend> 4741 * <label for="radio-1">New York</label> 4742 * <input id="radio-1" name="radio-1" type="radio"> 4743 * <label for="radio-2">Paris</label> 4744 * <input id="radio-2" name="radio-1" type="radio"> 4745 * <label for="radio-3">London</label> 4746 * <input id="radio-3" name="radio-1" type="radio"> 4747 * </fieldset> 4748 */ 4749 .ui-checkboxradio-label .ui-icon-background { 4750 border: 0; 4751 border-radius: 0.12em; 4752 box-shadow: inset 1px 1px 1px #cccccc; 4753 } 4754 .ui-checkboxradio-radio-label .ui-icon-background { 4755 width: 16px; 4756 height: 16px; 4757 border: 0; 4758 border-radius: 1em; 4759 overflow: visible; 4760 } 4761 .ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon, .ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon { 4762 width: 8px; 4763 height: 8px; 4764 border-width: 4px; 4765 border-style: solid; 4766 background-image: none; 4767 } 4768 .ui-checkboxradio-disabled { 4769 pointer-events: none; 4770 } 4771 /** 4772 * Checkboxes as buttons - pressed state. 4773 * 4774 * Example HTML: 4775 * 4776 * <input class="ui-checkboxradio ui-helper-hidden-accessible" id="check" type="checkbox"> 4777 * <label for="check" class="ui-checkboxradio-label ui-corner-all ui-button ui-widget ui-checkboxradio-checked ui-state-active">Dogs</label> 4778 */ 4779 .ui-checkboxradio-checked.ui-button { 4780 background-color: #cce0ff; 4781 background-image: linear-gradient(#e6f0ff, #cce0ff); 4782 border-color: #96bfff; 4783 } 4784 .ui-checkboxradio-checked.ui-button:hover { 4785 background-color: #d6e6ff; 4786 background-image: linear-gradient(#f5f9ff, #d6e6ff); 4787 border-color: #4a91ff; 4788 } 4789 .ui-checkboxradio-checked.ui-button:active { 4790 background-color: #b3d1ff; 4791 background-image: linear-gradient(#cde1ff, #b3d1ff); 4792 border-color: #4a91ff; 4793 } 4794 /* Controlgroup 4795 ========================================================================== */ 4796 /** 4797 * jQuery UI Controlgroup. 4798 * 4799 * Some classes and HTML elements generally added via JavaScript, more info - 4800 * https://jqueryui.com/controlgroup/ 4801 * 4802 * Example HTML: 4803 * 4804 * <fieldset> 4805 * <legend>Favourite drink</legend> 4806 * <div id="radio"> 4807 * <input id="tea" name="drink" type="radio"> 4808 * <label for="tea">Tea</label> 4809 * <input id="coffee" name="drink" type="radio" checked="checked"> 4810 * <label for="coffee">Coffee</label> 4811 * <input id="tequila" name="drink" type="radio"> 4812 * <label for="tequila">Tequila</label> 4813 * </div> 4814 * </fieldset> 4815 */ 4816 .ui-controlgroup { 4817 display: -ms-inline-flexbox; 4818 display: inline-flex; 4819 -ms-flex-flow: row wrap; 4820 flex-flow: row wrap; 4821 } 4822 .ui-controlgroup .ui-controlgroup-item { 4823 margin-right: 0; 4824 margin-left: 0; 4825 } 4826 .ui-controlgroup .ui-controlgroup-item:focus, .ui-controlgroup .ui-controlgroup-item.ui-visual-focus { 4827 z-index: 9999; 4828 } 4829 .ui-controlgroup .ui-controlgroup-label { 4830 padding: 0.4em 1em; 4831 } 4832 .ui-controlgroup .ui-controlgroup-label span { 4833 font-size: 80%; 4834 } 4835 .ui-controlgroup .ui-state-highlight { 4836 border-color: #cce0ff; 4837 background-color: #e6f0ff; 4838 } 4839 .ui-controlgroup-horizontal .ui-controlgroup-label + .ui-controlgroup-item { 4840 border-left: 0; 4841 } 4842 .ui-controlgroup-horizontal .ui-controlgroup-label.ui-widget-content { 4843 border-right: 0; 4844 } 4845 .ui-controlgroup-vertical { 4846 -ms-flex-flow: column; 4847 flex-flow: column; 4848 } 4849 .ui-controlgroup-vertical .ui-controlgroup-item { 4850 display: block; 4851 width: 100%; 4852 margin-top: 0; 4853 margin-bottom: 0; 4854 text-align: left; 4855 box-sizing: border-box; 4856 } 4857 [dir="rtl"] .ui-controlgroup-vertical .ui-controlgroup-item { 4858 text-align: right; 4859 } 4860 .ui-controlgroup-vertical .ui-controlgroup-label + .ui-controlgroup-item { 4861 border-top: 0; 4862 } 4863 .ui-controlgroup-vertical .ui-controlgroup-label.ui-widget-content { 4864 border-bottom: 0; 4865 } 4866 /** 4867 * Spinner specific style fixes. 4868 */ 4869 .ui-controlgroup-vertical .ui-spinner-input { 4870 width: calc(100% - 2.4em); 4871 } 4872 .ui-controlgroup-vertical .ui-spinner .ui-spinner-up { 4873 border-top-style: solid; 4874 } 4875 /* Datepicker 4876 ========================================================================== */ 4877 /** 4878 * jQuery UI Datepicker. 4879 * 4880 * Some classes and HTML elements generally added via JavaScript, more info - 4881 * https://jqueryui.com/datepicker/ 4882 * 4883 * Example HTML: 4884 * 4885 * <div class="ui-datepicker"> 4886 * <div class="ui-datepicker-header"> 4887 * <a class="ui-datepicker-prev"> 4888 * <span>Prev</span> 4889 * </a> 4890 * <a class="ui-datepicker-next"> 4891 * <span>Next</span> 4892 * </a> 4893 * <div class="ui-datepicker-title"> 4894 * <span class="ui-datepicker-month">April</span> 4895 * <span class="ui-datepicker-year">2014</span> 4896 * </div> 4897 * </div> 4898 * <table class="ui-datepicker-calendar"> 4899 * <thead> 4900 * <tr> 4901 * <th class="ui-datepicker-week-end"> 4902 * <span>Su</span> 4903 * </th> 4904 * <th> 4905 * <span>Mo</span> 4906 * </th> 4907 * <th> 4908 * <span>Tu</span> 4909 * </th> 4910 * <th> 4911 * <span>We</span> 4912 * </th> 4913 * <th> 4914 * <span>Th</span> 4915 * </th> 4916 * <th> 4917 * <span>Fr</span> 4918 * </th> 4919 * <th class="ui-datepicker-week-end"> 4920 * <span>Sa</span> 4921 * </th> 4922 * </tr> 4923 * </thead> 4924 * <tbody> 4925 * <tr> 4926 * <td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable"> 4927 * 4928 * </td> 4929 * <td class="ui-datepicker-other-month ui-datepicker-unselectable"> 4930 * 4931 * </td> 4932 * <td> 4933 * <a>1</a> 4934 * </td> 4935 * <td> 4936 * <a>2</a> 4937 * </td> 4938 * <td> 4939 * <a>3</a> 4940 * </td> 4941 * <td class="ui-datepicker-days-cell-over ui-datepicker-current-day ui-datepicker-today"> 4942 * <a class="ui-state-highlight ui-state-active">4</a> 4943 * </td> 4944 * <td> 4945 * <a>5</a> 4946 * </td> 4947 * </tr> 4948 * ...etc... 4949 * </tbody> 4950 * </table> 4951 * </div> 4952 */ 4953 .ui-datepicker { 4954 display: none; 4955 width: 17em; 4956 padding: 0.2em 0.2em 0; 4957 box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.2); 4958 } 4959 .ui-datepicker .ui-datepicker-header { 4960 position: relative; 4961 padding: 0.2em 0; 4962 } 4963 .ui-datepicker .ui-datepicker-prev, 4964 .ui-datepicker .ui-datepicker-next { 4965 position: absolute; 4966 top: 0.2em; 4967 width: 1.8em; 4968 height: 1.8em; 4969 border-radius: 0.5em; 4970 background-color: transparent; 4971 } 4972 .ui-datepicker .ui-datepicker-prev { 4973 left: 0.2em; 4974 } 4975 .ui-datepicker .ui-datepicker-next { 4976 right: 0.2em; 4977 } 4978 .ui-datepicker .ui-datepicker-prev span, 4979 .ui-datepicker .ui-datepicker-next span { 4980 display: block; 4981 position: absolute; 4982 top: 50%; 4983 left: 50%; 4984 margin-top: -8px; 4985 margin-left: -8px; 4986 } 4987 .ui-datepicker .ui-datepicker-prev-hover, 4988 .ui-datepicker .ui-datepicker-next-hover { 4989 background-color: #f7f7f7; 4990 } 4991 .ui-datepicker .ui-datepicker-title { 4992 margin: 0 2.2em; 4993 line-height: 1.8em; 4994 text-align: center; 4995 } 4996 .ui-datepicker .ui-datepicker-title select { 4997 margin: 0; 4998 } 4999 .ui-datepicker select.ui-datepicker-month, 5000 .ui-datepicker select.ui-datepicker-year { 5001 width: 45%; 5002 } 5003 .ui-datepicker table { 5004 width: 100%; 5005 margin: 0 0 0.2em; 5006 } 5007 .ui-datepicker th { 5008 padding: 0.5em 0.2em; 5009 border: 0; 5010 text-align: center; 5011 } 5012 .ui-datepicker td { 5013 padding: 1px; 5014 border: 0; 5015 } 5016 .ui-datepicker td a, 5017 .ui-datepicker td span { 5018 display: block; 5019 padding: 0.2em; 5020 text-align: center; 5021 } 5022 .ui-datepicker td a.ui-state-active { 5023 border-color: #96c0ff; 5024 background-color: #e6f0ff; 5025 } 5026 .ui-datepicker td a.ui-state-highlight:hover { 5027 border-color: #f5a800; 5028 } 5029 .ui-datepicker td a.ui-state-active:hover { 5030 border-color: #4a92ff; 5031 } 5032 .ui-datepicker td.ui-datepicker-week-col { 5033 padding: 0.32em 0; 5034 text-align: center; 5035 } 5036 .ui-datepicker .ui-datepicker-buttonpane { 5037 margin: 0.7em 0 0; 5038 padding: 0 0.2em; 5039 border-right: 0; 5040 border-bottom: 0; 5041 border-left: 0; 5042 background-image: none; 5043 } 5044 .ui-datepicker .ui-datepicker-buttonpane button { 5045 width: auto; 5046 margin: 0.5em 0.2em 0.4em; 5047 padding: 0.2em 0.6em 0.3em; 5048 float: right; 5049 cursor: pointer; 5050 overflow: visible; 5051 } 5052 .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { 5053 float: left; 5054 } 5055 .ui-datepicker .ui-icon { 5056 display: block; 5057 top: 0.3em; 5058 left: 0.5em; 5059 background-repeat: no-repeat; 5060 text-indent: -9999px; 5061 overflow: hidden; 5062 } 5063 /** 5064 * Multiple calendars. 5065 */ 5066 .ui-datepicker.ui-datepicker-multi { 5067 width: auto; 5068 } 5069 .ui-datepicker-multi .ui-datepicker-group { 5070 float: left; 5071 } 5072 .ui-datepicker-multi .ui-datepicker-group table { 5073 width: 95%; 5074 margin: 0 auto 0.4em; 5075 } 5076 .ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header, 5077 .ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { 5078 border-left-width: 0; 5079 } 5080 .ui-datepicker-multi .ui-datepicker-buttonpane { 5081 clear: left; 5082 } 5083 .ui-datepicker-multi-2 .ui-datepicker-group { 5084 width: 50%; 5085 } 5086 .ui-datepicker-multi-3 .ui-datepicker-group { 5087 width: 33.3%; 5088 } 5089 .ui-datepicker-multi-4 .ui-datepicker-group { 5090 width: 25%; 5091 } 5092 .ui-datepicker-row-break { 5093 width: 100%; 5094 clear: both; 5095 font-size: 0; 5096 } 5097 /** 5098 * Datepicker RTL support. 5099 */ 5100 [dir="rtl"] .ui-datepicker-prev { 5101 right: 0.2em; 5102 left: auto; 5103 } 5104 [dir="rtl"] .ui-datepicker-prev span { 5105 background-position: -48px -192px; 5106 } 5107 [dir="rtl"] .ui-datepicker-next { 5108 right: auto; 5109 left: 0.2em; 5110 } 5111 [dir="rtl"] .ui-datepicker-next span { 5112 background-position: -80px -192px; 5113 } 5114 [dir="rtl"] .ui-datepicker-buttonpane { 5115 clear: right; 5116 } 5117 [dir="rtl"] .ui-datepicker-buttonpane button { 5118 float: left; 5119 } 5120 [dir="rtl"] .ui-datepicker-buttonpane button.ui-datepicker-current, 5121 [dir="rtl"] .ui-datepicker-group { 5122 float: right; 5123 } 5124 [dir="rtl"] .ui-datepicker-group-last .ui-datepicker-header, 5125 [dir="rtl"] .ui-datepicker-group-middle .ui-datepicker-header { 5126 border-right-width: 0; 5127 border-left-width: 1px; 5128 } 5129 /* Dialog 5130 ========================================================================== */ 5131 /** 5132 * jQuery UI Dialog. 5133 * 5134 * Some classes and HTML elements generally added via JavaScript, more info - 5135 * https://jqueryui.com/dialog/ 5136 * 5137 * Example HTML: 5138 * 5139 * <div class="ui-dialog ui-front ui-dialog-buttons ui-draggable"> 5140 * <div class="ui-dialog-titlebar"> 5141 * <span class="ui-dialog-title">Modal dialog example</span> 5142 * <button class="ui-button ui-button-icon-only ui-dialog-titlebar-close"> 5143 * <span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span> 5144 * <span class="ui-button-text">close</span> 5145 * </button> 5146 * </div> 5147 * <div class="ui-dialog-content"> 5148 * Content 5149 * </div> 5150 * <div class="ui-dialog-buttonpane"> 5151 * <div class="ui-dialog-buttonset"> 5152 * <button class="ui-button ui-button-text-only"> 5153 * <span class="ui-button-text">Cancel</span> 5154 * </button> 5155 * <button class="ui-button ui-button-text-only"> 5156 * <span class="ui-button-text">Ok</span> 5157 * </button> 5158 * </div> 5159 * </div> 5160 * </div> 5161 */ 5162 .ui-dialog { 5163 position: absolute; 5164 top: 0; 5165 left: 0; 5166 padding: 0.2em; 5167 outline: 0; 5168 box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.2); 5169 z-index: 1002; 5170 } 5171 .ui-dialog .ui-dialog-titlebar { 5172 position: relative; 5173 padding: 0.4em 1em; 5174 } 5175 .ui-dialog .ui-dialog-title { 5176 width: 90%; 5177 margin: 0.1em 0; 5178 float: left; 5179 text-overflow: ellipsis; 5180 white-space: nowrap; 5181 overflow: hidden; 5182 } 5183 [dir="rtl"] .ui-dialog .ui-dialog-title { 5184 float: right; 5185 } 5186 .ui-dialog .ui-dialog-titlebar-close { 5187 position: absolute; 5188 top: 50%; 5189 right: 0.3em; 5190 width: 20px; 5191 height: 20px; 5192 margin: -10px 0 0; 5193 } 5194 [dir="rtl"] .ui-dialog .ui-dialog-titlebar-close { 5195 right: auto; 5196 left: 0.3em; 5197 } 5198 .ui-dialog .ui-dialog-content { 5199 position: relative; 5200 padding: 0.5em 1em; 5201 border: 0; 5202 background: none; 5203 overflow: auto; 5204 } 5205 .ui-dialog .ui-dialog-buttonpane { 5206 margin-top: 0.5em; 5207 padding: 0.5em; 5208 border-width: 1px 0 0; 5209 background-image: none; 5210 text-align: left; 5211 } 5212 .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { 5213 float: right; 5214 } 5215 [dir="rtl"] .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { 5216 float: left; 5217 } 5218 .ui-dialog .ui-dialog-buttonpane button { 5219 margin: 0.5em 0.4em 0.5em 0; 5220 cursor: pointer; 5221 } 5222 [dir="rtl"] .ui-dialog .ui-dialog-buttonpane button { 5223 margin: 0.5em 0 0.5em 0.4em; 5224 } 5225 /** 5226 * Change cursor when window is being dragged. 5227 */ 5228 .ui-draggable .ui-dialog-titlebar { 5229 cursor: move; 5230 } 5231 /* Menu 5232 ========================================================================== */ 5233 /** 5234 * jQuery UI Menu. 5235 * 5236 * Menus are vertical format only. Horizontal format menus are not provided by 5237 * jQuery UI. 5238 * 5239 * Some classes and HTML elements generally added via JavaScript, more info - 5240 * https://jqueryui.com/menu/ 5241 * 5242 * 1. Correct font size not being inherited in all browsers. 5243 * 2. Workaround for IE 11 and Edge incorrectly displaying a list marker. 5244 * 5245 * Example HTML: 5246 * 5247 * <ul class="ui-menu"> 5248 * <li class="ui-state-disabled ui-menu-item"> 5249 * <a>Item 1 (disabled)</a> 5250 * </li> 5251 * <li class="ui-menu-item"> 5252 * <a>Item 2</a> 5253 * </li> 5254 * <li class="ui-menu-item"> 5255 * <a> 5256 * <span class="ui-menu-icon ui-icon ui-icon-caret-1-e"></span> 5257 * Item 3 5258 * </a> 5259 * <ul class="ui-menu"> 5260 * <li class="ui-menu-item"> 5261 * <a>Item 3 subitem 1</a> 5262 * </li> 5263 * <li class="ui-menu-item"> 5264 * <a>Item 3 subitem 2</a> 5265 * </li> 5266 * </ul> 5267 * </li> 5268 * <li class="ui-menu-item"> 5269 * <a> 5270 * <span class="ui-menu-icon ui-icon ui-icon-caret-1-e"></span> 5271 * Item 4 5272 * </a> 5273 * <ul class="ui-menu"> 5274 * <li class="ui-menu-item"> 5275 * <span class="ui-menu-icon ui-icon ui-icon-caret-1-e"></span> 5276 * <a>Item 4 subitem 1</a> 5277 * <ul class="ui-menu"> 5278 * <li class="ui-menu-item"> 5279 * <a>Item 4 subitem 1 subsubitem 1</a> 5280 * </li> 5281 * <li class="ui-menu-item"> 5282 * <a>Item 4 subitem 1 subsubitem 2</a> 5283 * </li> 5284 * </ul> 5285 * </li> 5286 * <li class="ui-menu-item"> 5287 * <a>Item 3 subitem 2</a> 5288 * </li> 5289 * </ul> 5290 * </li> 5291 * </ul> 5292 */ 5293 .ui-menu { 5294 display: block; 5295 margin: 0; 5296 padding: 0; 5297 border-color: #d4d4d4; 5298 outline: 0; 5299 /* 1 */ 5300 font-size: 13px; 5301 line-height: 1.38461538461538em; 5302 list-style: none; 5303 box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.2); 5304 } 5305 .ui-menu .ui-menu { 5306 position: absolute; 5307 } 5308 .ui-menu .ui-menu-item { 5309 margin: 0; 5310 cursor: pointer; 5311 /* 2 */ 5312 list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"); 5313 } 5314 .ui-menu .ui-menu-item a { 5315 color: #333333; 5316 text-decoration: none; 5317 } 5318 .ui-menu .ui-menu-item-wrapper { 5319 position: relative; 5320 padding: 0.30769230769231em 1em 0.30769230769231em 0.61538461538462em; 5321 } 5322 .ui-menu .ui-menu-divider { 5323 height: 0; 5324 margin: 0.30769230769231em 0; 5325 border-width: 1px 0 0; 5326 font-size: 0; 5327 line-height: 0; 5328 } 5329 .ui-menu .ui-state-focus, 5330 .ui-menu .ui-state-active { 5331 background-color: #e6f0ff; 5332 } 5333 .ui-menu .ui-icon { 5334 position: absolute; 5335 top: 0; 5336 bottom: 0; 5337 left: 0.25em; 5338 margin: auto 0; 5339 } 5340 .ui-menu .ui-menu-icon { 5341 right: 0; 5342 left: auto; 5343 } 5344 /** 5345 * Allow additional icons in menu items. 5346 */ 5347 .ui-menu-icons { 5348 position: relative; 5349 } 5350 .ui-menu-icons .ui-menu-item-wrapper { 5351 padding-left: 2em; 5352 } 5353 /** 5354 * Menu RTL support. 5355 */ 5356 [dir="rtl"] .ui-menu { 5357 padding: 0; 5358 } 5359 [dir="rtl"] .ui-menu .ui-menu-item-wrapper { 5360 padding: 0.30769230769231em 0.61538461538462em 0.30769230769231em 1em; 5361 } 5362 [dir="rtl"] .ui-menu .ui-icon { 5363 right: 0.25em; 5364 left: auto; 5365 } 5366 [dir="rtl"] .ui-menu .ui-menu-icon { 5367 right: auto; 5368 left: 0; 5369 } 5370 /* Progressbar 5371 ========================================================================== */ 5372 /** 5373 * jQuery UI Progressbar. 5374 * 5375 * Some classes and HTML elements generally added via JavaScript, more info - 5376 * https://jqueryui.com/progressbar/ 5377 * 5378 * Example HTML: 5379 * 5380 * <div class="ui-progressbar"> 5381 * <div class="ui-progressbar-value" style="width: 37%;"></div> 5382 * </div> 5383 */ 5384 .ui-progressbar { 5385 margin-bottom: 1em; 5386 text-align: left; 5387 overflow: hidden; 5388 } 5389 .ui-progressbar-value { 5390 background-image: url("../img/ui-progressbar.gif"); 5391 background-size: 16px 16px; 5392 height: 16px; 5393 background-color: #cce0ff; 5394 } 5395 } 5396 5397 @media screen and (-webkit-min-device-pixel-ratio: 1.25), screen and (min-resolution: 1.25dppx), screen and (min-resolution: 120dpi) { 5398 .ui-progressbar-value { 5399 background-image: url("../img/ui-progressbar@2x.gif"); 5400 } 5401 } 5402 5403 @media screen { 5404 /** 5405 * Progressbar with indeterminate value. 5406 * 5407 * Example HTML: 5408 * 5409 * <div class="ui-progressbar ui-progressbar-indeterminate"> 5410 * <div class="ui-progressbar-value" style="width:100%;"> 5411 * <div class="ui-progressbar-overlay"></div> 5412 * </div> 5413 * </div> 5414 */ 5415 .ui-progressbar-indeterminate .ui-progressbar-value { 5416 background-image: url("../img/ui-progressbar-indeterminate.gif"); 5417 background-size: 16px 16px; 5418 background-color: #cccccc; 5419 } 5420 } 5421 5422 @media screen and (-webkit-min-device-pixel-ratio: 1.25), screen and (min-resolution: 1.25dppx), screen and (min-resolution: 120dpi) { 5423 .ui-progressbar-indeterminate .ui-progressbar-value { 5424 background-image: url("../img/ui-progressbar-indeterminate@2x.gif"); 5425 } 5426 } 5427 5428 @media screen { 5429 /* Selectmenu 5430 ========================================================================== */ 5431 /** 5432 * jQuery UI Selectmenu. 5433 * 5434 * Some classes and HTML elements generally added via JavaScript, more info - 5435 * https://jqueryui.com/selectmenu/ 5436 * 5437 * 1. Correct font size not being inherited in all browsers. 5438 * 5439 * Example HTML: 5440 * 5441 * <p> 5442 * <label>Select a speed</label><br> 5443 * <select class="jquery-ui-selectmenu" style="display:none;"> 5444 * <option>Slower</option> 5445 * <option>Slow</option> 5446 * <option selected="selected">Medium</option> 5447 * <option>Fast</option> 5448 * <option>Faster</option> 5449 * </select> 5450 * <span class="ui-selectmenu-button ui-widget ui-state-default ui-corner-all"> 5451 * <span class="ui-icon ui-icon-triangle-1-s"></span> 5452 * <span class="ui-selectmenu-text">Medium</span> 5453 * </span> 5454 * </p> 5455 * <div class="ui-selectmenu-menu ui-front ui-selectmenu-open"> 5456 * <ul class="ui-menu ui-widget ui-widget-content ui-corner-bottom"> 5457 * <li class="ui-menu-item ui-state-focus">Slower</li> 5458 * <li class="ui-menu-item">Slow</li> 5459 * <li class="ui-menu-item">Medium</li> 5460 * <li class="ui-menu-item">Fast</li> 5461 * <li class="ui-menu-item">Faster</li> 5462 * </ul> 5463 * </div> 5464 */ 5465 .ui-selectmenu-button { 5466 display: -ms-inline-flexbox; 5467 display: inline-flex; 5468 } 5469 .ui-selectmenu-button:not(.ui-controlgroup-item) { 5470 border-radius: 0.5em; 5471 } 5472 .ui-selectmenu-button.ui-controlgroup-item.ui-corner-tr { 5473 border-radius: 0 0.5em 0.5em 0; 5474 } 5475 .ui-selectmenu-button.ui-controlgroup-item.ui-corner-tl { 5476 border-radius: 0.5em 0 0 0.5em; 5477 } 5478 .ui-selectmenu-icon { 5479 -ms-flex: none; 5480 flex: none; 5481 -ms-flex-order: 2; 5482 order: 2; 5483 margin: 0 -0.25em 0 0.25em; 5484 } 5485 .ui-selectmenu-text { 5486 display: block; 5487 text-overflow: ellipsis; 5488 white-space: nowrap; 5489 overflow: hidden; 5490 } 5491 .ui-selectmenu-menu { 5492 display: none; 5493 position: absolute; 5494 top: 0; 5495 left: 0; 5496 margin: 0; 5497 padding: 0; 5498 } 5499 .ui-selectmenu-menu .ui-menu { 5500 overflow: auto; 5501 overflow-x: hidden; 5502 } 5503 .ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup { 5504 height: auto; 5505 margin: 0.5em 0 0; 5506 padding: 2px 0.61538461538462em; 5507 border-top: 1px solid #cccccc; 5508 font-size: 13px; 5509 font-weight: bold; 5510 line-height: 1.5; 5511 } 5512 .ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup:first-child { 5513 margin: 0; 5514 border: 0; 5515 } 5516 .ui-selectmenu-open { 5517 display: block; 5518 } 5519 /** 5520 * Selectmenu RTL support. 5521 */ 5522 [dir="rtl"] .ui-selectmenu-button.ui-controlgroup-item.ui-corner-tr { 5523 border-radius: 0.5em 0 0 0.5em; 5524 } 5525 [dir="rtl"] .ui-selectmenu-button.ui-controlgroup-item.ui-corner-tl { 5526 border-radius: 0 0.5em 0.5em 0; 5527 } 5528 [dir="rtl"] .ui-selectmenu-icon { 5529 margin: 0 0.25em 0 -0.25em; 5530 } 5531 /* Slider 5532 ========================================================================== */ 5533 /** 5534 * jQuery UI Slider. 5535 * 5536 * Some classes and HTML elements generally added via JavaScript, more info - 5537 * https://jqueryui.com/slider/ 5538 * 5539 * Example HTML: 5540 * 5541 * <div class="ui-slider ui-slider-horizontal"> 5542 * <div class="ui-slider-range" style="left: 17%; width: 50%;"></div> 5543 * <a class="ui-slider-handle" style="left: 17%;"></a> 5544 * <a class="ui-slider-handle" style="left: 67%;"></a> 5545 * </div> 5546 */ 5547 .ui-slider { 5548 position: relative; 5549 text-align: left; 5550 } 5551 .ui-slider .ui-slider-handle { 5552 position: absolute; 5553 width: 20px; 5554 height: 20px; 5555 border-radius: 50%; 5556 background-color: #ffffff; 5557 box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.2); 5558 cursor: default; 5559 z-index: 2; 5560 -ms-touch-action: none; 5561 touch-action: none; 5562 } 5563 .ui-slider .ui-slider-range { 5564 display: block; 5565 position: absolute; 5566 border: 0; 5567 background-position: 0 0; 5568 font-size: 0.7em; 5569 z-index: 1; 5570 } 5571 /** 5572 * Slider - horizontal format. 5573 * 5574 * Example HTML: 5575 * 5576 * <div class="ui-slider ui-slider-horizontal"> 5577 */ 5578 .ui-slider-horizontal { 5579 height: 12px; 5580 margin-bottom: 1em; 5581 } 5582 .ui-slider-horizontal .ui-slider-handle { 5583 top: -5px; 5584 margin-left: -10px; 5585 } 5586 .ui-slider-horizontal .ui-slider-range { 5587 top: 0; 5588 height: 100%; 5589 } 5590 .ui-slider-horizontal .ui-slider-range-min { 5591 left: 0; 5592 } 5593 .ui-slider-horizontal .ui-slider-range-max { 5594 right: 0; 5595 } 5596 /** 5597 * Slider - vertical format. 5598 * 5599 * Example HTML: 5600 * 5601 * <div class="ui-slider ui-slider-vertical"> 5602 */ 5603 .ui-slider-vertical { 5604 width: 12px; 5605 height: 100px; 5606 } 5607 .ui-slider-vertical .ui-slider-handle { 5608 left: -20px; 5609 margin-bottom: -10px; 5610 } 5611 .ui-slider-vertical .ui-slider-range { 5612 left: 0; 5613 width: 100%; 5614 } 5615 .ui-slider-vertical .ui-slider-range-min { 5616 bottom: 0; 5617 } 5618 .ui-slider-vertical .ui-slider-range-max { 5619 top: 0; 5620 } 5621 /* Spinner 5622 ========================================================================== */ 5623 /** 5624 * jQuery UI Spinner. 5625 * 5626 * Some classes and HTML elements generally added via JavaScript, more info - 5627 * https://jqueryui.com/spinner/ 5628 * 5629 * Example HTML: 5630 * 5631 * <span class="ui-spinner"> 5632 * <input type="text" class="ui-spinner-input"> 5633 * <a class="ui-spinner-button ui-spinner-up ui-button ui-button-text-only"> 5634 * <span class="ui-button-text"> 5635 * <span class="ui-icon ui-icon-triangle-1-n">+</span> 5636 * </span> 5637 * </a> 5638 * <a class="ui-spinner-button ui-spinner-down ui-button ui-button-text-only"> 5639 * <span class="ui-button-text"> 5640 * <span class="ui-icon ui-icon-triangle-1-s">-</span> 5641 * </span> 5642 * </a> 5643 * </span> 5644 */ 5645 .ui-spinner { 5646 display: inline-block; 5647 position: relative; 5648 padding: 0; 5649 border: 0; 5650 vertical-align: baseline; 5651 } 5652 .ui-spinner .ui-spinner-input { 5653 padding-right: 24px; 5654 } 5655 .ui-spinner-button { 5656 display: block; 5657 position: absolute; 5658 right: 0; 5659 width: 18px; 5660 height: 42%; 5661 margin: 0; 5662 padding: 0; 5663 font-size: 0.53846153846154em; 5664 line-height: 1.57142857142857em; 5665 cursor: default; 5666 overflow: hidden; 5667 } 5668 .ui-spinner-up { 5669 top: 0; 5670 } 5671 .ui-spinner-down { 5672 bottom: 0; 5673 } 5674 /** 5675 * Spinner RTL support. 5676 */ 5677 [dir="rtl"] .ui-spinner .ui-spinner-input { 5678 padding-right: 4px; 5679 padding-left: 24px; 5680 } 5681 [dir="rtl"] .ui-spinner-button { 5682 right: auto; 5683 left: 0; 5684 } 5685 /* Tabs 5686 ========================================================================== */ 5687 /** 5688 * jQuery UI Tabs. 5689 * 5690 * Some classes and HTML elements generally added via JavaScript, more info - 5691 * https://jqueryui.com/tabs/ 5692 * 5693 * 1. `position: relative` prevents IE scroll bug (elements with 5694 * `position: relative` inside a parent container with `overflow: auto` 5695 * appear as "fixed") 5696 * 5697 * Example HTML: 5698 * 5699 * <div class="ui-tabs> 5700 * <ul class="ui-tabs-nav"> 5701 * <li class="ui-tabs-active"> 5702 * <a class="ui-tabs-anchor">Tab 1</a> 5703 * </li> 5704 * <li> 5705 * <a class="ui-tabs-anchor">Tab 2</a> 5706 * </li> 5707 * <li> 5708 * <a class="ui-tabs-anchor">Tab 3</a> 5709 * </li> 5710 * </ul> 5711 * <div class="ui-tabs-panel" aria-expanded="true"> 5712 * Tab 1 content 5713 * </div> 5714 * <div class="ui-tabs-panel aria-expanded="false" aria-hidden="true"> 5715 * Tab 2 content 5716 * </div> 5717 * <div class="ui-tabs-panel aria-expanded="false" aria-hidden="true"> 5718 * Tab 3 content 5719 * </div> 5720 * </div> 5721 */ 5722 .ui-tabs:not(.ui-tabs-vertical) { 5723 /* 1 */ 5724 position: relative; 5725 border: 0; 5726 } 5727 .ui-tabs:not(.ui-tabs-vertical) .ui-tabs-nav { 5728 margin: 0; 5729 padding: 0; 5730 background: none; 5731 } 5732 .ui-tabs:not(.ui-tabs-vertical) .ui-tabs-nav li { 5733 position: relative; 5734 top: 0; 5735 margin-right: 2px; 5736 float: left; 5737 border-bottom-width: 0; 5738 list-style: none; 5739 white-space: nowrap; 5740 box-shadow: inset 0 -0.2em 0.4em rgba(102, 102, 102, 0.15); 5741 } 5742 .ui-tabs:not(.ui-tabs-vertical) .ui-tabs-nav li.ui-tabs-active { 5743 margin-bottom: -1px; 5744 padding-bottom: 1px; 5745 box-shadow: none; 5746 } 5747 .ui-tabs:not(.ui-tabs-vertical) .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor, 5748 .ui-tabs:not(.ui-tabs-vertical) .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor, 5749 .ui-tabs:not(.ui-tabs-vertical) .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor { 5750 cursor: text; 5751 } 5752 .ui-tabs:not(.ui-tabs-vertical) .ui-tabs-nav .ui-tabs-anchor { 5753 padding: 0.5em 1em; 5754 float: left; 5755 color: #333333; 5756 text-decoration: none; 5757 } 5758 .ui-tabs:not(.ui-tabs-vertical) .ui-tabs-panel { 5759 display: block; 5760 margin: 0 0 1em; 5761 padding: 1px 0; 5762 border-width: 1px 0; 5763 background: none; 5764 } 5765 /** 5766 * Maintain cursor style when collapsing a collapsible tab. 5767 */ 5768 .ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor { 5769 cursor: pointer; 5770 } 5771 /** 5772 * Tabs RTL support. 5773 */ 5774 [dir="rtl"] .ui-tabs .ui-tabs-nav li { 5775 margin-right: 0; 5776 margin-left: 2px; 5777 float: right; 5778 } 5779 [dir="rtl"] .ui-tabs .ui-tabs-nav .ui-tabs-anchor { 5780 float: right; 5781 } 5782 /** 5783 * Additonal styling for tabs vertical. 5784 */ 5785 .ui-tabs-vertical .ui-tabs-nav .ui-tabs-active { 5786 background: #fff9e1; 5787 } 5788 .ui-tabs-vertical .ui-tabs-nav .ui-state-focus a { 5789 outline: thin solid #0066ff; 5790 } 5791 /* Tooltip 5792 ========================================================================== */ 5793 /** 5794 * jQuery UI Tooltip. 5795 * 5796 * Some classes and HTML elements generally added via JavaScript, more info - 5797 * https://jqueryui.com/tooltip/ 5798 * 5799 * Example HTML: 5800 * 5801 * <a>Link with a tooltip</a> 5802 * <div class="ui-tooltip"> 5803 * <div class="ui-tooltip-content"> 5804 * Content 5805 * </div> 5806 * </div> 5807 */ 5808 .ui-tooltip { 5809 position: absolute; 5810 max-width: 22em; 5811 padding: 0.5em 1em; 5812 box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.2); 5813 z-index: 9999; 5814 } 5815 } 5816 5817 /* ========================================================================== 5818 Responsive layout for screen media 5819 ========================================================================== */ 5820 /* ========================================================================== 5821 Additional layout for devices < 768px 5822 ========================================================================== */ 5823 @media (max-width: 60em) { 5824 /** 5825 * Adjust right/left padding of body. 5826 */ 5827 body { 5828 padding: 4em 2em 0; 5829 } 5830 .setup, 5831 .login { 5832 padding: 1em 2em 0; 5833 } 5834 /** 5835 * Grid column cell changes at 1st breakpoint downwards. 5836 * 5837 * Cells for 4 column layout become 2 column layout. 5838 * Cells for 4 column span variations become 1 column layout. 5839 */ 5840 .txp-layout-4col { 5841 width: 50%; 5842 } 5843 .txp-layout-4col-alt, 5844 .txp-layout-4col-2span, 5845 .txp-layout-4col-3span { 5846 width: 100%; 5847 } 5848 /** 5849 * Adjust right/left padding of header area. 5850 */ 5851 .txp-header { 5852 padding: 0 2em; 5853 } 5854 /** 5855 * Smaller version of Textpattern logo. 5856 */ 5857 .txp-header h1 { 5858 width: 1.75em; 5859 } 5860 .txp-header h1 a { 5861 width: 1.75em; 5862 } 5863 /** 5864 * 'View site' link. 5865 * 5866 * Example HTML: 5867 * 5868 * <p class="txp-view-site"> 5869 * <a> 5870 * <span class="txp-view-site-name">My site</span> 5871 * </a> 5872 * </p> 5873 */ 5874 .txp-view-site { 5875 margin: 0.0625em 0.375em 0; 5876 padding: 0; 5877 font-size: 16px; 5878 overflow: inherit; 5879 } 5880 .txp-view-site a { 5881 text-indent: 110%; 5882 text-transform: capitalize; 5883 white-space: nowrap; 5884 overflow: hidden; 5885 display: block; 5886 width: 2em; 5887 height: 2em; 5888 background: url("../img/sprite.svg") no-repeat -8em 0; 5889 background-size: 13em 2em; 5890 } 5891 /** 5892 * Search widget at top of lists. 5893 */ 5894 .txp-search, 5895 [dir="rtl"] .txp-search { 5896 -ms-flex-wrap: wrap; 5897 flex-wrap: wrap; 5898 -ms-flex-pack: start; 5899 justify-content: flex-start; 5900 margin-top: 0; 5901 } 5902 /** 5903 * Reposition search clearer. 5904 */ 5905 .txp-search-clear { 5906 -ms-flex: 1 0 auto; 5907 flex: 1 0 auto; 5908 width: 100%; 5909 margin: 0 0 0.5em; 5910 text-align: left; 5911 } 5912 [dir="rtl"] .txp-search-clear { 5913 text-align: right; 5914 } 5915 /** 5916 * Reset Form panel 'name' and 'type' fields to blocks. 5917 */ 5918 #page-form .name, 5919 #page-form .type { 5920 display: block; 5921 margin: 1em 0; 5922 } 5923 #page-form .txp-actions a { 5924 margin-top: 0.5em; 5925 } 5926 } 5927 5928 /* ========================================================================== 5929 Additional layout for devices < 547px 5930 ========================================================================== */ 5931 @media (max-width: 47em) { 5932 /** 5933 * Grid column cell changes at 2nd breakpoint downwards. 5934 * 5935 * Cells for 2 column layout become 1 column layout. 5936 * Cells for 4 column layout become 1 column layout. 5937 */ 5938 .txp-layout-2col, 5939 .txp-layout-4col { 5940 width: 100%; 5941 } 5942 /** 5943 * Non-fixed header on mobile layout (because mobile nav menu couldn't scroll otherwise). 5944 */ 5945 .txp-header { 5946 position: absolute; 5947 } 5948 /** 5949 * Show the navigation menu toggle button on mobile layout. 5950 * 5951 * Example HTML: 5952 * 5953 * <button class="txp-nav-toggle"> 5954 */ 5955 button.txp-nav-toggle { 5956 text-indent: 110%; 5957 text-transform: capitalize; 5958 white-space: nowrap; 5959 overflow: hidden; 5960 display: block; 5961 width: 2em; 5962 height: 2em; 5963 margin: 0.0625em 0 0; 5964 padding: 0; 5965 float: left; 5966 border: 0; 5967 border-radius: 0; 5968 background: transparent url("../img/sprite.svg") -10em 0; 5969 background-size: 13em 2em; 5970 font-size: 16px; 5971 text-shadow: none; 5972 box-shadow: none; 5973 } 5974 button.txp-nav-toggle:focus { 5975 outline: thin solid #0066ff; 5976 } 5977 button.txp-nav-toggle:not(.collapsed) { 5978 background-color: rgba(255, 255, 255, 0.33); 5979 } 5980 /** 5981 * Hide the navigation menu by default on mobile layout. 5982 */ 5983 .txp-nav .data-dropdown { 5984 display: none; 5985 } 5986 /** 5987 * Show the navigation menu when toggled on mobile layout. 5988 */ 5989 .txp-nav.in .data-dropdown { 5990 display: block; 5991 position: absolute; 5992 top: 3em; 5993 right: 0; 5994 left: 0; 5995 background: #fff9e1; 5996 box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.2); 5997 } 5998 .txp-nav.in .data-dropdown::before { 5999 position: absolute; 6000 top: -0.5em; 6001 left: 4.375em; 6002 width: 1em; 6003 height: 0.5em; 6004 background: url("../img/sprite.svg") no-repeat -12em 0; 6005 background-size: 13em 2em; 6006 font-size: 16px; 6007 content: ""; 6008 z-index: 2; 6009 } 6010 [dir="rtl"] .txp-nav.in .data-dropdown::before { 6011 right: 4.375em; 6012 left: auto; 6013 } 6014 .txp-nav > ul > li { 6015 float: none; 6016 border: 0; 6017 border-bottom: 1px solid #d4d4d4; 6018 } 6019 .txp-nav > ul > li:first-child { 6020 border-left: 0; 6021 } 6022 .txp-nav > ul > li > a, 6023 .txp-nav > ul > li > a.dropdown-toggle { 6024 padding: 0 2em; 6025 } 6026 [dir="rtl"] .txp-nav > ul > li > a, [dir="rtl"] 6027 .txp-nav > ul > li > a.dropdown-toggle { 6028 padding: 0 2em; 6029 } 6030 .txp-nav > ul > li a.dropdown-toggle::after { 6031 right: 1em; 6032 } 6033 [dir="rtl"] .txp-nav > ul > li a.dropdown-toggle::after { 6034 right: auto; 6035 left: 1em; 6036 } 6037 /** 6038 * Secondary-level navigation menu items (submenus). 6039 */ 6040 .dropdown-menu { 6041 position: static; 6042 min-width: 0; 6043 border: 0; 6044 border-radius: 0; 6045 box-shadow: none; 6046 } 6047 .dropdown-menu a { 6048 padding: 0.5em 2em 0.5em 3em; 6049 } 6050 [dir="rtl"] .dropdown-menu a { 6051 padding: 0.5em 3em 0.5em 2em; 6052 } 6053 .dropdown-menu::before { 6054 display: none; 6055 } 6056 /** 6057 * Collapse 2 column form fields to 1 column (remove flexbox). 6058 */ 6059 .txp-edit .txp-form-field:not(.txp-form-field-textarea), 6060 .txp-prefs-group .txp-form-field:not(.txp-form-field-textarea) { 6061 display: block; 6062 } 6063 /** 6064 * Label/value one-column layouts within panes. 6065 * 6066 * Collapsed from two-column format on desktop layout (remove flexbox). 6067 */ 6068 .txp-edit .txp-form-field-label, 6069 .txp-edit .txp-form-field-value, 6070 .txp-prefs-group .txp-form-field-label, 6071 .txp-prefs-group .txp-form-field-value { 6072 -ms-flex: none; 6073 flex: none; 6074 min-height: inherit; 6075 } 6076 /** 6077 * Remove inline alignment margin values when collapsed. 6078 */ 6079 .txp-form-field-value input, 6080 .txp-form-field-value select, 6081 .txp-form-field-value .jquery-ui-controlgroup { 6082 margin: 0; 6083 } 6084 /** 6085 * Remove float from list navigators on list panels. 6086 */ 6087 .pageby, 6088 .prev-next { 6089 float: none; 6090 } 6091 /** 6092 * Collapse progress meters responsively. 6093 */ 6094 .progress-meter ol { 6095 display: block; 6096 margin-bottom: 1em; 6097 text-align: left; 6098 } 6099 .progress-meter li { 6100 display: block; 6101 margin: 0; 6102 float: none; 6103 } 6104 .progress-meter li::after { 6105 display: none; 6106 } 6107 /** 6108 * Override specifity on collapsed progress meters in RTL languages. 6109 */ 6110 [dir="rtl"] .progress-meter ol { 6111 text-align: right; 6112 } 6113 [dir="rtl"] .progress-meter li { 6114 margin: 0; 6115 } 6116 [dir="rtl"] .progress-meter li::after { 6117 display: none; 6118 } 6119 /** 6120 * Collapse jQuery UI tabs responsively. 6121 */ 6122 .ui-tabs:not(.ui-tabs-vertical) .ui-tabs-nav li { 6123 margin: 0; 6124 float: none; 6125 border-bottom-width: 1px; 6126 box-shadow: none; 6127 } 6128 .ui-tabs:not(.ui-tabs-vertical) .ui-tabs-nav li.ui-tabs-active { 6129 margin-bottom: 0; 6130 padding-bottom: 0; 6131 } 6132 [dir="rtl"] .ui-tabs:not(.ui-tabs-vertical) .ui-tabs-nav li { 6133 float: none; 6134 } 6135 .ui-tabs:not(.ui-tabs-vertical) .ui-tabs-nav .ui-tabs-anchor { 6136 display: block; 6137 float: none; 6138 } 6139 [dir="rtl"] .ui-tabs:not(.ui-tabs-vertical) .ui-tabs-nav .ui-tabs-anchor { 6140 float: none; 6141 } 6142 /** 6143 * Remove top border from jQuery UI tabs panel. 6144 */ 6145 .ui-tabs .ui-tabs-panel { 6146 border-top-width: 0; 6147 } 6148 /** 6149 * Remove float from inline the action links. 6150 */ 6151 .txp-actions-inline, 6152 [dir="rtl"] .txp-actions-inline { 6153 margin-top: 0; 6154 float: none; 6155 } 6156 } 6157 6158 /* ========================================================================== 6159 Animation `keyframes` need to appear outside of `screen` rules 6160 ========================================================================== */ 6161 @keyframes messageflash { 6162 0% { 6163 opacity: 0; 6164 } 6165 75% { 6166 opacity: 0.5; 6167 } 6168 50%, 6169 100% { 6170 opacity: 1; 6171 } 6172 } 6173 6174 /* ========================================================================== 6175 Styling and layout for print media 6176 ========================================================================== */ 6177 @media print { 6178 /** 6179 * Remove unnecessary global styling from printed media. 6180 */ 6181 *, 6182 *::before, 6183 *::after, 6184 *::first-letter, 6185 p::first-line, 6186 div::first-line, 6187 blockquote::first-line, 6188 li::first-line { 6189 background: transparent !important; 6190 color: #000000 !important; 6191 text-shadow: none !important; 6192 box-shadow: none !important; 6193 } 6194 /** 6195 * Use a print-friendly font and size. 6196 */ 6197 body { 6198 font-family: sans-serif; 6199 font-size: 8pt; 6200 line-height: 1.5; 6201 } 6202 /** 6203 * Hide unnecessary content from print. 6204 */ 6205 nav, 6206 audio, 6207 video, 6208 .txp-header, 6209 .txp-footer, 6210 .txp-search, 6211 .txp-navigation, 6212 .txp-actions, 6213 .txp-control-panel, 6214 .txp-list-options, 6215 .txp-list-col-multi-edit, 6216 .multi-edit, 6217 .pophelp, 6218 .pophelpsubtle, 6219 #messagepane, 6220 #content_switcher, 6221 #view_modes { 6222 display: none; 6223 } 6224 /** 6225 * Make sure links are not underlined. 6226 */ 6227 a { 6228 text-decoration: none; 6229 } 6230 /** 6231 * Ensure monospaced font is used. 6232 */ 6233 pre, 6234 code, 6235 kbd, 6236 samp, 6237 var, 6238 .code { 6239 font-family: monospace; 6240 } 6241 /** 6242 * Ensure pre blocks are wrapped when printed. 6243 */ 6244 pre { 6245 white-space: pre-wrap; 6246 } 6247 /** 6248 * Basic preformatted/blockquote styling. 6249 */ 6250 pre, 6251 blockquote { 6252 border: 1px solid #000000; 6253 page-break-inside: avoid; 6254 } 6255 /** 6256 * Avoid images breaking across multiple pages. 6257 */ 6258 img { 6259 page-break-inside: avoid; 6260 } 6261 /** 6262 * Borders on various elements. 6263 */ 6264 table, 6265 input, 6266 textarea { 6267 border: 1px solid #000000; 6268 } 6269 /** 6270 * Display table head across multi-page tables. 6271 */ 6272 thead { 6273 display: table-header-group; 6274 } 6275 /** 6276 * Avoid table rows breaking across multiple pages. 6277 */ 6278 tr { 6279 page-break-inside: avoid; 6280 } 6281 /** 6282 * Avoid paragraph orphans and widows. 6283 */ 6284 p, 6285 h1, 6286 h2, 6287 h3, 6288 h4, 6289 h5, 6290 h6 { 6291 orphans: 2; 6292 widows: 2; 6293 } 6294 /** 6295 * Avoid headings breaking across multiple pages. 6296 */ 6297 h1, 6298 h2, 6299 h3, 6300 h4, 6301 h5, 6302 h6 { 6303 page-break-after: avoid; 6304 } 6305 }
title
Description
Body
title
Description
Body
title
Description
Body
title
Body
title