[ Index ] |
PHP Cross Reference of WordPress Trunk (Updated Daily) |
[Summary view] [Print] [Text view]
1 /* General Widgets Styles */ 2 3 .widget { 4 margin: 0 auto 10px; 5 position: relative; 6 box-sizing: border-box; 7 } 8 9 .widget.open { 10 z-index: 99; 11 } 12 .widget.open:focus-within { 13 z-index: 100; 14 } 15 16 .widget-top { 17 font-size: 13px; 18 font-weight: 600; 19 background: #f6f7f7; 20 } 21 22 .widget-top .widget-action { 23 border: 0; 24 margin: 0; 25 padding: 10px; 26 background: none; 27 cursor: pointer; 28 } 29 30 .widget-title h3, 31 .widget-title h4 { 32 margin: 0; 33 padding: 15px; 34 font-size: 1em; 35 line-height: 1; 36 overflow: hidden; 37 white-space: nowrap; 38 text-overflow: ellipsis; 39 -webkit-user-select: none; 40 user-select: none; 41 } 42 43 .widgets-holder-wrap .widget-inside { 44 border-top: none; 45 padding: 1px 15px 15px; 46 line-height: 1.23076923; 47 } 48 49 .widget.widget-dirty .widget-control-close-wrapper { 50 display: none; 51 } 52 53 .in-widget-title, 54 #widgets-right a.widget-control-edit, 55 #available-widgets .widget-description { 56 color: #646970; 57 } 58 59 .deleting .widget-title, 60 .deleting .widget-top .widget-action .toggle-indicator:before { 61 color: #a7aaad; 62 } 63 64 /* Media Widgets */ 65 .wp-core-ui .media-widget-control.selected .placeholder, 66 .wp-core-ui .media-widget-control.selected .not-selected, 67 .wp-core-ui .media-widget-control .selected { 68 display: none; 69 } 70 71 .media-widget-control.selected .selected { 72 display: inline-block; 73 } 74 75 .media-widget-buttons { 76 text-align: left; 77 margin-top: 0; 78 } 79 80 .media-widget-control .media-widget-buttons .button { 81 width: auto; 82 height: auto; 83 margin-top: 12px; 84 white-space: normal; 85 } 86 87 .media-widget-buttons .button:first-child { 88 margin-right: 8px; 89 } 90 91 .media-widget-control .attachment-media-view .button-add-media, 92 .media-widget-control .placeholder { 93 border: 1px dashed #c3c4c7; 94 box-sizing: border-box; 95 cursor: pointer; 96 line-height: 1.6; 97 padding: 9px 0; 98 position: relative; 99 text-align: center; 100 width: 100%; 101 } 102 103 .media-widget-control .attachment-media-view .button-add-media { 104 cursor: pointer; 105 background-color: #f0f0f1; 106 color: #2c3338; 107 } 108 109 .media-widget-control .attachment-media-view .button-add-media:hover { 110 background-color: #fff; 111 } 112 113 .media-widget-control .attachment-media-view .button-add-media:focus { 114 background-color: #fff; 115 border-style: solid; 116 border-color: #4f94d4; 117 box-shadow: 0 0 3px rgba(34, 113, 177, 0.8); 118 /* Only visible in Windows High Contrast mode */ 119 outline: 2px solid transparent; 120 outline-offset: -2px; 121 } 122 123 .media-widget-control .media-widget-preview { 124 background: transparent; 125 text-align: center; 126 } 127 .media-widget-control .media-widget-preview .notice { 128 text-align: initial; 129 } 130 .media-frame .media-widget-embed-notice p code, 131 .media-widget-control .notice p code { 132 padding: 0 3px 0 0; 133 } 134 .media-frame .media-widget-embed-notice { 135 margin-top: 16px; 136 } 137 .media-widget-control .media-widget-preview img { 138 max-width: 100%; 139 vertical-align: middle; 140 background-image: linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7), linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7); 141 background-position: 0 0, 10px 10px; 142 background-size: 20px 20px; 143 } 144 .media-widget-control .media-widget-preview .wp-video-shortcode { 145 background: #000; 146 } 147 148 .media-frame.media-widget .media-toolbar-secondary { 149 min-width: 300px; 150 } 151 152 .media-frame.media-widget .image-details .embed-media-settings .setting.align, 153 .media-frame.media-widget .attachment-display-settings .setting.align, 154 .media-frame.media-widget .embed-media-settings .setting.align, 155 .media-frame.media-widget .embed-media-settings .legend-inline, 156 .media-frame.media-widget .embed-link-settings .setting.link-text, 157 .media-frame.media-widget .replace-attachment, 158 .media-frame.media-widget .checkbox-setting.autoplay { 159 display: none; 160 } 161 162 .media-widget-video-preview { 163 width: 100%; 164 } 165 166 .media-widget-video-link { 167 display: inline-block; 168 min-height: 132px; 169 width: 100%; 170 background: #000; 171 } 172 173 .media-widget-video-link .dashicons { 174 font: normal 60px/1 'dashicons'; 175 position: relative; 176 width: 100%; 177 top: -90px; 178 color: #fff; 179 text-decoration: none; 180 } 181 182 .media-widget-video-link.no-poster .dashicons { 183 top: 30px; 184 } 185 186 .media-frame #embed-url-field.invalid, 187 .media-widget-image-link > .link:invalid { 188 border: 1px solid #d63638; 189 } 190 191 .media-widget-image-link { 192 margin: 1em 0; 193 } 194 195 .media-widget-gallery-preview { 196 display: flex; 197 justify-content: flex-start; 198 flex-wrap: wrap; 199 margin: -1.79104477%; 200 } 201 202 .media-widget-preview.media_gallery, 203 .media-widget-preview.media_image { 204 cursor: pointer; 205 } 206 207 .media-widget-preview .placeholder { 208 background: #f0f0f1; 209 } 210 211 .media-widget-gallery-preview .gallery-item { 212 box-sizing: border-box; 213 width: 50%; 214 margin: 0; 215 background: transparent; 216 } 217 218 .media-widget-gallery-preview .gallery-item .gallery-icon { 219 margin: 4.5%; 220 } 221 222 /* 223 * Use targeted nth-last-child selectors to control the size of each image 224 * based on how many gallery items are present in the grid. 225 * See: https://alistapart.com/article/quantity-queries-for-css 226 */ 227 .media-widget-gallery-preview .gallery-item:nth-last-child(3):first-child, 228 .media-widget-gallery-preview .gallery-item:nth-last-child(3):first-child ~ .gallery-item, 229 .media-widget-gallery-preview .gallery-item:nth-last-child(n+5), 230 .media-widget-gallery-preview .gallery-item:nth-last-child(n+5) ~ .gallery-item, 231 .media-widget-gallery-preview .gallery-item:nth-last-child(n+6), 232 .media-widget-gallery-preview .gallery-item:nth-last-child(n+6) ~ .gallery-item { 233 max-width: 33.33%; 234 } 235 236 .media-widget-gallery-preview .gallery-item img { 237 height: auto; 238 vertical-align: bottom; 239 } 240 241 .media-widget-gallery-preview .gallery-icon { 242 position: relative; 243 } 244 245 .media-widget-gallery-preview .gallery-icon-placeholder { 246 position: absolute; 247 top: 0; 248 bottom: 0; 249 width: 100%; 250 box-sizing: border-box; 251 display: flex; 252 align-items: center; 253 justify-content: center; 254 background-color: rgba(0, 0, 0, 0.5); 255 } 256 257 .media-widget-gallery-preview .gallery-icon-placeholder-text { 258 font-weight: 600; 259 font-size: 2em; 260 color: #fff; 261 } 262 263 264 /* Widget Dragging Helpers */ 265 .widget.ui-draggable-dragging { 266 min-width: 100%; 267 } 268 269 .widget.ui-sortable-helper { 270 opacity: 0.8; 271 } 272 273 .widget-placeholder { 274 border: 1px dashed #c3c4c7; 275 margin: 0 auto 10px; 276 height: 45px; 277 width: 100%; 278 box-sizing: border-box; 279 } 280 281 #widgets-right .widget-placeholder { 282 margin-top: 0; 283 } 284 285 #widgets-right .closed .widget-placeholder { 286 height: 0; 287 border: 0; 288 margin-top: -10px; 289 } 290 291 /* Widget Sidebars */ 292 .sidebar-name { 293 position: relative; 294 box-sizing: border-box; 295 } 296 297 .js .sidebar-name { 298 cursor: pointer; 299 } 300 301 .sidebar-name .handlediv { 302 float: right; 303 width: 38px; 304 height: 38px; 305 border: 0; 306 margin: 0; 307 padding: 8px; 308 background: none; 309 cursor: pointer; 310 outline: none; 311 } 312 313 #widgets-right .sidebar-name .handlediv { 314 margin: 5px 3px 0 0; 315 } 316 317 .sidebar-name .handlediv:focus { 318 box-shadow: none; 319 /* Only visible in Windows High Contrast mode */ 320 outline: 1px solid transparent; 321 } 322 323 #widgets-left .sidebar-name .toggle-indicator { 324 display: none; 325 } 326 327 #widgets-left .widgets-holder-wrap.closed .sidebar-name .toggle-indicator, 328 #widgets-left .sidebar-name:hover .toggle-indicator, 329 #widgets-left .sidebar-name .handlediv:focus .toggle-indicator { 330 display: block; 331 } 332 333 .sidebar-name .toggle-indicator:before { 334 padding: 1px 2px 1px 0; 335 border-radius: 50%; 336 } 337 338 .sidebar-name .handlediv:focus .toggle-indicator:before { 339 box-shadow: 0 0 0 2px #2271b1; 340 /* Only visible in Windows High Contrast mode */ 341 outline: 2px solid transparent; 342 } 343 344 .sidebar-name h2, 345 .sidebar-name h3 { 346 margin: 0; 347 padding: 8px 10px; 348 overflow: hidden; 349 white-space: normal; 350 line-height: 1.5; 351 } 352 353 .widgets-holder-wrap .description { 354 padding: 0 0 15px; 355 margin: 0; 356 font-style: normal; 357 color: #646970; 358 } 359 360 .widget-holder .description, 361 .inactive-sidebar .description { 362 color: #50575e; 363 } 364 365 #widgets-right .widgets-holder-wrap .description { 366 padding-left: 7px; 367 padding-right: 7px; 368 } 369 370 /* Widgets 2-col Layout */ 371 div.widget-liquid-left { 372 margin: 0; 373 width: 38%; 374 float: left; 375 } 376 377 div.widget-liquid-right { 378 float: right; 379 width: 58%; 380 } 381 382 /* Widgets Left - Available Widgets */ 383 384 div#widgets-left { 385 padding-top: 12px; 386 } 387 388 div#widgets-left .closed .sidebar-name, 389 div#widgets-left .inactive-sidebar.closed .sidebar-name { 390 margin-bottom: 10px; 391 } 392 393 div#widgets-left .sidebar-name h2, 394 div#widgets-left .sidebar-name h3 { 395 padding: 10px 0; 396 margin: 0 10px 0 0; 397 } 398 399 #widgets-left .widgets-holder-wrap, 400 div#widgets-left .widget-holder { 401 background: transparent; 402 border: none; 403 } 404 405 #widgets-left .widgets-holder-wrap { 406 border: none; 407 box-shadow: none; 408 } 409 410 #available-widgets .widget { 411 margin: 0; 412 } 413 414 #available-widgets .widget:nth-child(odd) { 415 clear: both; 416 } 417 418 #available-widgets .widget .widget-description { 419 display: block; 420 padding: 10px 15px; 421 font-size: 12px; 422 overflow-wrap: break-word; 423 word-wrap: break-word; 424 -ms-word-break: break-all; 425 word-break: break-word; 426 hyphens: auto; 427 } 428 429 #available-widgets #widget-list { 430 position: relative; 431 } 432 433 /* Inactive Sidebars */ 434 #widgets-left .inactive-sidebar { 435 clear: both; 436 width: 100%; 437 background: transparent; 438 padding: 0; 439 margin: 0 0 20px; 440 border: none; 441 box-shadow: none; 442 } 443 444 #widgets-left .inactive-sidebar.first { 445 margin-top: 40px; 446 } 447 448 /* Not sure what this is for... */ 449 div#widgets-left .inactive-sidebar .widget.expanded { 450 left: auto; 451 } 452 453 .widget-title-action { 454 float: right; 455 position: relative; 456 } 457 458 div#widgets-left .inactive-sidebar .widgets-sortables { 459 min-height: 42px; 460 padding: 0; 461 background: transparent; 462 margin: 0; 463 position: relative; 464 } 465 466 /* Widgets Right */ 467 468 div#widgets-right .sidebars-column-1, 469 div#widgets-right .sidebars-column-2 { 470 max-width: 450px; 471 } 472 473 div#widgets-right .widgets-holder-wrap { 474 margin: 10px 0 0; 475 } 476 477 div#widgets-right .sidebar-description { 478 min-height: 20px; 479 margin-top: -5px; 480 } 481 482 div#widgets-right .sidebar-name h2, 483 div#widgets-right .sidebar-name h3 { 484 padding: 15px 15px 15px 7px; 485 } 486 487 div#widgets-right .widget-top { 488 padding: 0; 489 } 490 491 div#widgets-right .widgets-sortables { 492 padding: 0 8px; 493 margin-bottom: 9px; 494 position: relative; 495 min-height: 123px; 496 } 497 498 div#widgets-right .closed .widgets-sortables { 499 min-height: 0; 500 margin-bottom: 0; 501 } 502 503 .sidebar-name .spinner, 504 .remove-inactive-widgets .spinner { 505 float: none; 506 position: relative; 507 top: -2px; 508 margin: -5px 5px; 509 } 510 511 .sidebar-name .spinner { 512 position: absolute; 513 top: 18px; 514 right: 30px; 515 } 516 517 /* Dragging a widget over a closed sidebar */ 518 #widgets-right .widgets-holder-wrap.widget-hover { 519 border-color: #787c82; 520 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); 521 } 522 523 /* Accessibility Mode */ 524 .widget-access-link { 525 float: right; 526 margin: -5px 0 10px 10px; 527 } 528 529 .widgets_access #widgets-left .widget .widget-top { 530 cursor: auto; 531 } 532 533 .widgets_access #wpwrap .widgets-holder-wrap.closed .sidebar-description, 534 .widgets_access #wpwrap .widgets-holder-wrap.closed .widget, 535 .widgets_access #wpwrap .widget-control-edit { 536 display: block; 537 } 538 539 .widgets_access #widgets-left .widget .widget-top:hover, 540 .widgets_access #widgets-right .widget .widget-top:hover { 541 border-color: #dcdcde; 542 } 543 544 #available-widgets .widget-control-edit .edit, 545 #available-widgets .widget-action .edit, 546 #widgets-left .inactive-sidebar .widget-control-edit .add, 547 #widgets-left .inactive-sidebar .widget-action .add, 548 #widgets-right .widget-control-edit .add, 549 #widgets-right .widget-action .add { 550 display: none; 551 } 552 553 .widget-control-edit { 554 display: block; 555 color: #646970; 556 background: #f0f0f1; 557 padding: 0 15px; 558 line-height: 3.30769230; 559 border-left: 1px solid #dcdcde; 560 } 561 562 #widgets-left .widget-control-edit:hover, 563 #widgets-right .widget-control-edit:hover { 564 color: #fff; 565 background: #3c434a; 566 border-left: 0; 567 outline: 1px solid #3c434a; 568 } 569 570 .widgets-holder-wrap .sidebar-name, 571 .widgets-holder-wrap .sidebar-description { 572 -webkit-user-select: none; 573 user-select: none; 574 } 575 576 .editwidget { 577 margin: 0 auto; 578 } 579 580 .editwidget .widget-inside { 581 display: block; 582 padding: 0 15px; 583 } 584 585 .editwidget .widget-control-actions { 586 margin-top: 20px; 587 } 588 589 .js .widgets-holder-wrap.closed .widget, 590 .js .widgets-holder-wrap.closed .sidebar-description, 591 .js .widgets-holder-wrap.closed .remove-inactive-widgets, 592 .js .widgets-holder-wrap.closed .description, 593 .js .closed br.clear { 594 display: none; 595 } 596 597 .js .widgets-holder-wrap.closed .widget.ui-sortable-helper { 598 display: block; 599 } 600 601 /* Hide Widget Settings by Default */ 602 .widget-inside, 603 .widget-description { 604 display: none; 605 } 606 607 .widget-inside { 608 background: #fff; 609 } 610 611 .widget-inside select { 612 max-width: 100%; 613 } 614 615 /* Dragging widgets over the available widget area show's a "Deactivate" message */ 616 #removing-widget { 617 display: none; 618 font-weight: 400; 619 padding-left: 15px; 620 font-size: 12px; 621 line-height: 1; 622 color: #000; 623 } 624 625 .js #removing-widget { 626 color: #72aee6; 627 } 628 629 .widget-control-noform, 630 #access-off, 631 .widgets_access .widget-action, 632 .widgets_access .handlediv, 633 .widgets_access #access-on, 634 .widgets_access .widget-holder .description, 635 .no-js .widget-holder .description { 636 display: none; 637 } 638 639 .widgets_access .widget-holder, 640 .widgets_access #widget-list { 641 padding-top: 10px; 642 } 643 644 .widgets_access #access-off { 645 display: inline; 646 } 647 648 .widgets_access .sidebar-name, 649 .widgets_access .widget .widget-top { 650 cursor: default; 651 } 652 653 654 /* Widgets Area Chooser */ 655 .widget-liquid-left #widgets-left.chooser #available-widgets .widget, 656 .widget-liquid-left #widgets-left.chooser .inactive-sidebar { 657 transition: opacity 0.1s linear; 658 } 659 660 .widget-liquid-left #widgets-left.chooser #available-widgets .widget, 661 .widget-liquid-left #widgets-left.chooser .inactive-sidebar { 662 /* -webkit-filter: blur(1px); */ 663 opacity: 0.2; 664 pointer-events: none; 665 } 666 667 .widget-liquid-left #widgets-left.chooser #available-widgets .widget-in-question { 668 /* -webkit-filter: none; */ 669 opacity: 1; 670 pointer-events: auto; 671 } 672 673 .widgets-chooser ul, 674 #widgets-left .widget-in-question .widget-top, 675 #available-widgets .widget-top:hover, 676 div#widgets-right .widget-top:hover, 677 #widgets-left .widget-top:hover { 678 border-color: #8c8f94; 679 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); 680 } 681 682 .widgets-chooser ul.widgets-chooser-sidebars { 683 margin: 0; 684 list-style-type: none; 685 max-height: 300px; 686 overflow: auto; 687 } 688 689 .widgets-chooser { 690 display: none; 691 } 692 693 .widgets-chooser ul { 694 border: 1px solid #c3c4c7; 695 } 696 697 .widgets-chooser li { 698 border-bottom: 1px solid #c3c4c7; 699 background: #fff; 700 margin: 0; 701 position: relative; 702 } 703 704 .widgets-chooser .widgets-chooser-button { 705 width: 100%; 706 padding: 10px 15px 10px 35px; 707 background: transparent; 708 border: 0; 709 box-sizing: border-box; 710 text-align: left; 711 cursor: pointer; 712 transition: background 0.2s ease-in-out; 713 } 714 715 /* @todo looks like these hover/focus states are overridden by .widgets-chooser-selected */ 716 .widgets-chooser .widgets-chooser-button:hover, 717 .widgets-chooser .widgets-chooser-button:focus { 718 outline: none; 719 text-decoration: underline; 720 } 721 722 .widgets-chooser li:last-child { 723 border: none; 724 } 725 726 .widgets-chooser .widgets-chooser-selected .widgets-chooser-button { 727 background: #2271b1; 728 color: #fff; 729 } 730 731 .widgets-chooser .widgets-chooser-selected:before { 732 content: "\f147"; 733 display: block; 734 -webkit-font-smoothing: antialiased; 735 font: normal 26px/1 dashicons; 736 color: #fff; 737 position: absolute; 738 top: 7px; 739 left: 5px; 740 } 741 742 .widgets-chooser .widgets-chooser-actions { 743 padding: 10px 0 12px; 744 text-align: center; 745 } 746 747 #available-widgets .widget .widget-top { 748 cursor: pointer; 749 } 750 751 #available-widgets .widget.ui-draggable-dragging .widget-top { 752 cursor: move; 753 } 754 755 /* =Specific widget styling 756 -------------------------------------------------------------- */ 757 .text-widget-fields { 758 position: relative; 759 } 760 .text-widget-fields [hidden] { 761 display: none; 762 } 763 .text-widget-fields .wp-pointer.wp-pointer-top { 764 position: absolute; 765 z-index: 3; 766 top: 100px; 767 right: 10px; 768 left: 10px; 769 } 770 .text-widget-fields .wp-pointer .wp-pointer-arrow { 771 left: auto; 772 right: 15px; 773 } 774 .text-widget-fields .wp-pointer .wp-pointer-buttons { 775 line-height: 1.4; 776 } 777 778 .custom-html-widget-fields > p > .CodeMirror { 779 border: 1px solid #dcdcde; 780 } 781 .custom-html-widget-fields code { 782 padding-top: 1px; 783 padding-bottom: 1px; 784 } 785 ul.CodeMirror-hints { 786 z-index: 101; /* Due to z-index 100 set on .widget.open */ 787 } 788 .widget-control-actions .custom-html-widget-save-button.button.validation-blocked { 789 cursor: not-allowed; 790 } 791 792 /* =Media Queries 793 -------------------------------------------------------------- */ 794 795 @media screen and (max-width: 782px) { 796 .widgets-holder-wrap .widget-inside input[type="checkbox"], 797 .widgets-holder-wrap .widget-inside input[type="radio"], 798 .editwidget .widget-inside input[type="checkbox"], /* Selectors for the "accessibility mode" page. */ 799 .editwidget .widget-inside input[type="radio"] { 800 margin: 0.25rem 0.25rem 0.25rem 0; 801 } 802 } 803 804 @media screen and (max-width: 480px) { 805 div.widget-liquid-left { 806 width: 100%; 807 float: none; 808 border-right: none; 809 padding-right: 0; 810 } 811 812 #widgets-left .sidebar-name { 813 margin-right: 0; 814 } 815 816 #widgets-left #available-widgets .widget-top { 817 margin-right: 0; 818 } 819 820 #widgets-left .inactive-sidebar .widgets-sortables { 821 margin-right: 0; 822 } 823 824 div.widget-liquid-right { 825 width: 100%; 826 float: none; 827 } 828 829 div.widget { 830 max-width: 480px; 831 } 832 833 .widget-access-link { 834 float: none; 835 margin: 15px 0 0; 836 } 837 } 838 839 @media screen and (max-width: 320px) { 840 div.widget { 841 max-width: 320px; 842 } 843 } 844 845 @media only screen and (min-width: 1250px) { 846 #widgets-left #available-widgets .widget { 847 width: 49%; 848 float: left; 849 } 850 851 .widget.ui-draggable-dragging { 852 min-width: 49%; 853 } 854 855 #widgets-left #available-widgets .widget:nth-child(even) { 856 float: right; 857 } 858 859 #widgets-right .sidebars-column-1, 860 #widgets-right .sidebars-column-2 { 861 float: left; 862 width: 49%; 863 } 864 865 #widgets-right .sidebars-column-1 { 866 margin-right: 2%; 867 } 868 869 #widgets-right.single-sidebar .sidebars-column-1, 870 #widgets-right.single-sidebar .sidebars-column-2 { 871 float: none; 872 width: 100%; 873 margin: 0; 874 } 875 }
title
Description
Body
title
Description
Body
title
Description
Body
title
Body
Generated : Wed Nov 13 08:20:01 2024 | Cross-referenced by PHPXref |