| [ Index ] |
PHP Cross Reference of WordPress Trunk (Updated Daily) |
[Summary view] [Print] [Text view]
1 @charset "UTF-8"; 2 /** 3 * Typography 4 */ 5 /** 6 * SCSS Variables. 7 * 8 * Please use variables from this sheet to ensure consistency across the UI. 9 * Don't add to this sheet unless you're pretty sure the value will be reused in many places. 10 * For example, don't add rules to this sheet that affect block visuals. It's purely for UI. 11 */ 12 /** 13 * Colors 14 */ 15 /** 16 * Fonts & basic variables. 17 */ 18 /** 19 * Typography 20 */ 21 /** 22 * Grid System. 23 * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/ 24 */ 25 /** 26 * Radius scale. 27 */ 28 /** 29 * Elevation scale. 30 */ 31 /** 32 * Dimensions. 33 */ 34 /** 35 * Mobile specific styles 36 */ 37 /** 38 * Editor styles. 39 */ 40 /** 41 * Block & Editor UI. 42 */ 43 /** 44 * Block paddings. 45 */ 46 /** 47 * React Native specific. 48 * These variables do not appear to be used anywhere else. 49 */ 50 /** 51 * Breakpoints & Media Queries 52 */ 53 /** 54 * Converts a hex value into the rgb equivalent. 55 * 56 * @param {string} hex - the hexadecimal value to convert 57 * @return {string} comma separated rgb values 58 */ 59 /** 60 * Long content fade mixin 61 * 62 * Creates a fading overlay to signify that the content is longer 63 * than the space allows. 64 */ 65 /** 66 * Breakpoint mixins 67 */ 68 /** 69 * Focus styles. 70 */ 71 /** 72 * Standard focus rings for the WordPress Design System. 73 * 74 * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site, 75 * e.g. `&:focus { @include outset-ring__focus(); }`. 76 */ 77 /** 78 * Applies editor left position to the selector passed as argument 79 */ 80 /** 81 * Styles that are reused verbatim in a few places 82 */ 83 /** 84 * Allows users to opt-out of animations via OS-level preferences. 85 */ 86 /** 87 * Reset default styles for JavaScript UI based pages. 88 * This is a WP-admin agnostic reset 89 */ 90 /** 91 * Reset the WP Admin page styles for Gutenberg-like pages. 92 */ 93 /** 94 * Creates a checkerboard pattern background to indicate transparency. 95 * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px. 96 */ 97 :root { 98 --wp-block-synced-color: #7a00df; 99 --wp-block-synced-color--rgb: 122, 0, 223; 100 --wp-bound-block-color: var(--wp-block-synced-color); 101 --wp-editor-canvas-background: #ddd; 102 --wp-admin-theme-color: #007cba; 103 --wp-admin-theme-color--rgb: 0, 124, 186; 104 --wp-admin-theme-color-darker-10: rgb(0, 107, 160.5); 105 --wp-admin-theme-color-darker-10--rgb: 0, 107, 160.5; 106 --wp-admin-theme-color-darker-20: #005a87; 107 --wp-admin-theme-color-darker-20--rgb: 0, 90, 135; 108 --wp-admin-border-width-focus: 2px; 109 } 110 @media (min-resolution: 192dpi) { 111 :root { 112 --wp-admin-border-width-focus: 1.5px; 113 } 114 } 115 116 /** 117 * Colors 118 */ 119 /** 120 * SCSS Variables. 121 * 122 * Please use variables from this sheet to ensure consistency across the UI. 123 * Don't add to this sheet unless you're pretty sure the value will be reused in many places. 124 * For example, don't add rules to this sheet that affect block visuals. It's purely for UI. 125 */ 126 /** 127 * Fonts & basic variables. 128 */ 129 /** 130 * Typography 131 */ 132 /** 133 * Grid System. 134 * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/ 135 */ 136 /** 137 * Radius scale. 138 */ 139 /** 140 * Elevation scale. 141 */ 142 /** 143 * Dimensions. 144 */ 145 /** 146 * Mobile specific styles 147 */ 148 /** 149 * Editor styles. 150 */ 151 /** 152 * Block & Editor UI. 153 */ 154 /** 155 * Block paddings. 156 */ 157 /** 158 * React Native specific. 159 * These variables do not appear to be used anywhere else. 160 */ 161 .interface-complementary-area-header { 162 background: #fff; 163 padding-left: 8px; 164 gap: 4px; 165 } 166 167 .interface-complementary-area-header .interface-complementary-area-header__title { 168 margin: 0 0 0 auto; 169 } 170 171 /** 172 * Typography 173 */ 174 /** 175 * Breakpoints & Media Queries 176 */ 177 /** 178 * Converts a hex value into the rgb equivalent. 179 * 180 * @param {string} hex - the hexadecimal value to convert 181 * @return {string} comma separated rgb values 182 */ 183 /** 184 * Long content fade mixin 185 * 186 * Creates a fading overlay to signify that the content is longer 187 * than the space allows. 188 */ 189 /** 190 * Breakpoint mixins 191 */ 192 /** 193 * Focus styles. 194 */ 195 /** 196 * Standard focus rings for the WordPress Design System. 197 * 198 * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site, 199 * e.g. `&:focus { @include outset-ring__focus(); }`. 200 */ 201 /** 202 * Applies editor left position to the selector passed as argument 203 */ 204 /** 205 * Styles that are reused verbatim in a few places 206 */ 207 /** 208 * Allows users to opt-out of animations via OS-level preferences. 209 */ 210 /** 211 * Reset default styles for JavaScript UI based pages. 212 * This is a WP-admin agnostic reset 213 */ 214 /** 215 * Reset the WP Admin page styles for Gutenberg-like pages. 216 */ 217 /** 218 * Creates a checkerboard pattern background to indicate transparency. 219 * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px. 220 */ 221 .interface-complementary-area { 222 background: #fff; 223 color: #1e1e1e; 224 height: 100%; 225 overflow: auto; 226 } 227 228 @media (min-width: 782px) { 229 .interface-complementary-area { 230 width: 280px; 231 } 232 } 233 .interface-complementary-area .components-panel { 234 border: none; 235 position: relative; 236 z-index: 0; 237 } 238 239 .interface-complementary-area .components-panel__header { 240 position: sticky; 241 top: 0; 242 z-index: 1; 243 } 244 245 .interface-complementary-area .components-panel__header.editor-sidebar__panel-tabs { 246 top: 0; 247 } 248 249 .interface-complementary-area p:not(.components-base-control__help, .components-form-token-field__help) { 250 margin-top: 0; 251 } 252 253 .interface-complementary-area h2 { 254 font-size: 13px; 255 font-weight: var(--wpds-typography-font-weight-emphasis, 600); 256 color: #1e1e1e; 257 margin-bottom: 1.5em; 258 } 259 260 .interface-complementary-area h3 { 261 font-size: 11px; 262 text-transform: uppercase; 263 font-weight: var(--wpds-typography-font-weight-emphasis, 600); 264 color: #1e1e1e; 265 margin-bottom: 1.5em; 266 } 267 268 .interface-complementary-area hr { 269 border-top: none; 270 border-bottom: 1px solid #f0f0f0; 271 margin: 1.5em 0; 272 } 273 274 .interface-complementary-area div.components-toolbar-group, 275 .interface-complementary-area div.components-toolbar { 276 box-shadow: none; 277 margin-bottom: 1.5em; 278 } 279 280 .interface-complementary-area div.components-toolbar-group:last-child, 281 .interface-complementary-area div.components-toolbar:last-child { 282 margin-bottom: 0; 283 } 284 285 .interface-complementary-area .block-editor-skip-to-selected-block:focus { 286 top: auto; 287 left: 10px; 288 bottom: 10px; 289 right: auto; 290 } 291 292 .interface-complementary-area__fill { 293 height: 100%; 294 } 295 296 @media (min-width: 782px) { 297 body.js.is-fullscreen-mode #adminmenumain { 298 display: none; 299 } 300 body.js.is-fullscreen-mode #wpcontent, 301 body.js.is-fullscreen-mode #wpfooter { 302 margin-right: 0; 303 } 304 } 305 html.interface-interface-skeleton__html-container { 306 position: fixed; 307 width: 100%; 308 } 309 310 @media (min-width: 782px) { 311 html.interface-interface-skeleton__html-container:not(:has(.is-zoom-out)) { 312 position: initial; 313 width: initial; 314 } 315 } 316 .interface-interface-skeleton { 317 display: flex; 318 flex-direction: row; 319 height: auto; 320 max-height: 100%; 321 position: fixed; 322 top: 46px; 323 right: 0; 324 left: 0; 325 bottom: 0; 326 } 327 328 @media (min-width: 783px) { 329 .interface-interface-skeleton { 330 top: 32px; 331 } 332 .is-fullscreen-mode .interface-interface-skeleton { 333 top: var(--wp-admin--admin-bar--height, 0); 334 } 335 } 336 .interface-interface-skeleton__editor { 337 display: flex; 338 flex-direction: column; 339 flex: 0 1 100%; 340 overflow: hidden; 341 } 342 343 .interface-interface-skeleton { /* Set left position when auto-fold is not on the body element. */ 344 right: 0; 345 } 346 347 @media (min-width: 783px) { 348 .interface-interface-skeleton { 349 right: 160px; 350 } 351 } 352 .auto-fold .interface-interface-skeleton { /* Auto fold is when on smaller breakpoints, nav menu auto collapses. */ } 353 354 @media (min-width: 783px) { 355 .auto-fold .interface-interface-skeleton { 356 right: 36px; 357 } 358 } 359 @media (min-width: 961px) { 360 .auto-fold .interface-interface-skeleton { 361 right: 160px; 362 } 363 } 364 /* Sidebar manually collapsed. */ 365 .folded .interface-interface-skeleton { 366 right: 0; 367 } 368 369 @media (min-width: 783px) { 370 .folded .interface-interface-skeleton { 371 right: 36px; 372 } 373 } 374 body.is-fullscreen-mode .interface-interface-skeleton { 375 right: 0 !important; 376 } 377 378 .interface-interface-skeleton__body { 379 position: relative; 380 flex-grow: 1; 381 display: flex; 382 overflow: auto; 383 overscroll-behavior-y: none; 384 } 385 386 @media (min-width: 782px) { 387 .has-footer .interface-interface-skeleton__body { 388 padding-bottom: 25px; 389 } 390 } 391 .interface-interface-skeleton__content { 392 flex-grow: 1; 393 display: flex; 394 flex-direction: column; 395 overflow: auto; 396 z-index: 20; 397 } 398 399 @media (min-width: 782px) { 400 .interface-interface-skeleton__content { 401 z-index: auto; 402 } 403 } 404 .interface-interface-skeleton__secondary-sidebar, 405 .interface-interface-skeleton__sidebar { 406 flex-shrink: 0; 407 position: absolute; 408 z-index: 100000; 409 top: 0; 410 right: 0; 411 bottom: 0; 412 background: #fff; 413 color: #1e1e1e; 414 width: auto; 415 } 416 417 @media (min-width: 782px) { 418 .interface-interface-skeleton__secondary-sidebar, 419 .interface-interface-skeleton__sidebar { 420 position: relative !important; 421 } 422 } 423 .interface-interface-skeleton__sidebar { 424 border-top: 1px solid #e0e0e0; 425 overflow: hidden; 426 } 427 428 @media (min-width: 782px) { 429 .interface-interface-skeleton__sidebar { 430 box-shadow: 1px 0 0 0 rgba(0, 0, 0, 0.133); 431 outline: 1px solid transparent; 432 } 433 } 434 .interface-interface-skeleton__secondary-sidebar { 435 border-top: 1px solid #e0e0e0; 436 left: 0; 437 } 438 439 @media (min-width: 782px) { 440 .interface-interface-skeleton__secondary-sidebar { 441 box-shadow: -1px 0 0 0 rgba(0, 0, 0, 0.133); 442 outline: 1px solid transparent; 443 } 444 } 445 .interface-interface-skeleton__header { 446 flex-shrink: 0; 447 height: auto; 448 box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.133); 449 z-index: 30; 450 color: #1e1e1e; 451 outline: 1px solid transparent; 452 } 453 454 .interface-interface-skeleton__footer { 455 height: auto; 456 flex-shrink: 0; 457 border-top: 1px solid #e0e0e0; 458 color: #1e1e1e; 459 position: absolute; 460 bottom: 0; 461 right: 0; 462 width: 100%; 463 background-color: #fff; 464 z-index: 90; 465 display: none; 466 } 467 468 @media (min-width: 782px) { 469 .interface-interface-skeleton__footer { 470 display: flex; 471 } 472 } 473 .interface-interface-skeleton__footer .block-editor-block-breadcrumb { 474 z-index: 30; 475 display: flex; 476 background: #fff; 477 height: 24px; 478 align-items: center; 479 font-size: 13px; 480 padding: 0 18px; 481 } 482 483 .interface-interface-skeleton__actions { 484 z-index: 100000; 485 position: fixed !important; 486 top: -9999em; 487 bottom: auto; 488 right: auto; 489 left: 0; 490 color: #1e1e1e; 491 background: #fff; 492 width: 100vw; 493 } 494 495 @media (min-width: 782px) { 496 .interface-interface-skeleton__actions { 497 width: 280px; 498 } 499 } 500 .interface-interface-skeleton__actions:focus, .interface-interface-skeleton__actions:focus-within { 501 top: auto; 502 bottom: 0; 503 } 504 505 .is-entity-save-view-open .interface-interface-skeleton__actions:focus, .is-entity-save-view-open .interface-interface-skeleton__actions:focus-within { 506 top: 46px; 507 } 508 509 @media (min-width: 782px) { 510 .is-entity-save-view-open .interface-interface-skeleton__actions:focus, .is-entity-save-view-open .interface-interface-skeleton__actions:focus-within { 511 border-right: 1px solid #ddd; 512 top: 32px; 513 } 514 .is-fullscreen-mode .is-entity-save-view-open .interface-interface-skeleton__actions:focus, .is-fullscreen-mode .is-entity-save-view-open .interface-interface-skeleton__actions:focus-within { 515 top: var(--wp-admin--admin-bar--height, 0); 516 } 517 } 518 .interface-pinned-items { 519 display: flex; 520 } 521 522 .interface-pinned-items .components-button { 523 display: none; 524 margin: 0; 525 } 526 527 .interface-pinned-items .components-button[aria-controls="edit-post:document"], .interface-pinned-items .components-button[aria-controls="edit-post:block"], .interface-pinned-items .components-button[aria-controls="edit-site:template"], .interface-pinned-items .components-button[aria-controls="edit-site:block-inspector"] { 528 display: flex; 529 } 530 531 .interface-pinned-items .components-button svg { 532 max-width: 24px; 533 max-height: 24px; 534 } 535 536 @media (min-width: 600px) { 537 .interface-pinned-items .components-button { 538 display: flex; 539 } 540 } 541 .interface-pinned-items { 542 gap: 8px; 543 } 544 545 /** 546 * SCSS Variables. 547 * 548 * Please use variables from this sheet to ensure consistency across the UI. 549 * Don't add to this sheet unless you're pretty sure the value will be reused in many places. 550 * For example, don't add rules to this sheet that affect block visuals. It's purely for UI. 551 */ 552 /** 553 * Colors 554 */ 555 /** 556 * Fonts & basic variables. 557 */ 558 /** 559 * Typography 560 */ 561 /** 562 * Grid System. 563 * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/ 564 */ 565 /** 566 * Radius scale. 567 */ 568 /** 569 * Elevation scale. 570 */ 571 /** 572 * Dimensions. 573 */ 574 /** 575 * Mobile specific styles 576 */ 577 /** 578 * Editor styles. 579 */ 580 /** 581 * Block & Editor UI. 582 */ 583 /** 584 * Block paddings. 585 */ 586 /** 587 * React Native specific. 588 * These variables do not appear to be used anywhere else. 589 */ 590 /** 591 * Typography 592 */ 593 /** 594 * Breakpoints & Media Queries 595 */ 596 /** 597 * Converts a hex value into the rgb equivalent. 598 * 599 * @param {string} hex - the hexadecimal value to convert 600 * @return {string} comma separated rgb values 601 */ 602 /** 603 * Long content fade mixin 604 * 605 * Creates a fading overlay to signify that the content is longer 606 * than the space allows. 607 */ 608 /** 609 * Breakpoint mixins 610 */ 611 /** 612 * Focus styles. 613 */ 614 /** 615 * Standard focus rings for the WordPress Design System. 616 * 617 * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site, 618 * e.g. `&:focus { @include outset-ring__focus(); }`. 619 */ 620 /** 621 * Applies editor left position to the selector passed as argument 622 */ 623 /** 624 * Styles that are reused verbatim in a few places 625 */ 626 /** 627 * Allows users to opt-out of animations via OS-level preferences. 628 */ 629 /** 630 * Reset default styles for JavaScript UI based pages. 631 * This is a WP-admin agnostic reset 632 */ 633 /** 634 * Reset the WP Admin page styles for Gutenberg-like pages. 635 */ 636 /** 637 * Creates a checkerboard pattern background to indicate transparency. 638 * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px. 639 */ 640 @media (min-width: 782px) { 641 .font-library-modal.font-library-modal { 642 width: 65vw; 643 } 644 } 645 .font-library-modal .components-modal__header { 646 border-bottom: none; 647 } 648 649 .font-library-modal .components-modal__content { 650 padding: 0; 651 margin-bottom: 90px; 652 } 653 654 .font-library-modal .font-library__subtitle { 655 text-transform: uppercase; 656 font-weight: var(--wpds-typography-font-weight-emphasis, 600); 657 font-size: 11px; 658 } 659 660 .font-library-modal__tab-panel { 661 height: calc(100% - 50px); 662 } 663 664 .font-library__tabpanel-layout { 665 height: 100%; 666 display: flex; 667 flex-direction: column; 668 } 669 670 .font-library__tabpanel-layout > div { 671 flex-grow: 1; 672 } 673 674 .font-library__tabpanel-layout .font-library__loading { 675 width: 100%; 676 height: 100%; 677 display: flex; 678 position: absolute; 679 right: 0; 680 top: 0; 681 align-items: center; 682 justify-content: center; 683 padding-top: 124px; 684 box-sizing: border-box; 685 } 686 687 .font-library__tabpanel-layout .components-navigator-screen { 688 padding: 24px; 689 width: 100%; 690 } 691 692 .font-library__footer { 693 position: absolute; 694 width: 100%; 695 bottom: 0; 696 border-top: 1px solid #ddd; 697 padding: 24px; 698 background-color: #fff; 699 box-sizing: border-box; 700 flex-grow: 0 !important; 701 flex-shrink: 0; 702 height: 90px; 703 } 704 705 .font-library__page-selection { 706 font-size: 11px; 707 font-weight: var(--wpds-typography-font-weight-emphasis, 600); 708 text-transform: uppercase; 709 } 710 711 @media (min-width: 600px) { 712 .font-library__page-selection .font-library__page-selection-trigger { 713 font-size: 11px !important; 714 font-weight: var(--wpds-typography-font-weight-emphasis, 600); 715 } 716 } 717 .font-library__fonts-title { 718 text-transform: uppercase; 719 font-size: 11px; 720 font-weight: var(--wpds-typography-font-weight-emphasis, 600); 721 margin-top: 0; 722 margin-bottom: 0; 723 } 724 725 .font-library__fonts-list { 726 list-style: none; 727 padding: 0; 728 margin-top: 0; 729 margin-bottom: 0; 730 } 731 732 .font-library__fonts-list-item { 733 margin-bottom: 0; 734 } 735 736 .font-library__font-card { 737 box-sizing: border-box; 738 border: 1px solid #ddd; 739 width: 100%; 740 height: auto !important; 741 padding: 16px; 742 margin-top: -1px; /* To collapse the margin with the previous element */ 743 } 744 745 .font-library__font-card:hover { 746 background-color: #f0f0f0; 747 } 748 749 .font-library__font-card:focus { 750 position: relative; 751 } 752 753 .font-library__font-card .font-library__font-card__name { 754 font-weight: bold; 755 } 756 757 .font-library__font-card .font-library__font-card__count { 758 color: #757575; 759 } 760 761 .font-library__font-card .font-library__font-variant_demo-image { 762 display: block; 763 height: 24px; 764 width: auto; 765 } 766 767 .font-library__font-card .font-library__font-variant_demo-text { 768 white-space: nowrap; 769 flex-shrink: 0; 770 } 771 772 @media not (prefers-reduced-motion) { 773 .font-library__font-card .font-library__font-variant_demo-text { 774 transition: opacity 0.3s ease-in-out; 775 } 776 } 777 .font-library-modal__tablist-container { 778 position: sticky; 779 top: 0; 780 border-bottom: 1px solid #ddd; 781 background: #fff; 782 z-index: 1; 783 } 784 785 .font-library__upload-area { 786 align-items: center; 787 display: flex; 788 justify-content: center; 789 height: 256px !important; 790 width: 100%; 791 } 792 793 button.font-library__upload-area { 794 background-color: #f0f0f0; 795 } 796 797 .font-library__local-fonts { 798 margin: 24px auto; 799 width: 80%; 800 } 801 802 .font-library__local-fonts .font-library__upload-area__text { 803 color: #757575; 804 } 805 806 .font-library__google-fonts-confirm { 807 display: flex; 808 justify-content: center; 809 align-items: center; 810 margin-top: 64px; 811 } 812 813 .font-library__google-fonts-confirm p { 814 line-height: 1.4; 815 } 816 817 .font-library__google-fonts-confirm h2 { 818 font-size: 1.2rem; 819 font-weight: 400; 820 } 821 822 .font-library__google-fonts-confirm .components-card { 823 padding: 16px; 824 width: 400px; 825 } 826 827 .font-library__google-fonts-confirm .components-button { 828 width: 100%; 829 justify-content: center; 830 } 831 832 .font-library__select-all { 833 padding: 16px 17px 16px 16px; 834 } 835 836 .font-library__select-all .components-checkbox-control__label { 837 padding-right: 16px; 838 } 839 840 .global-styles-ui-pagination .components-button.is-tertiary { 841 width: 32px; 842 height: 32px; 843 justify-content: center; 844 } 845 846 .global-styles-ui-screen-revisions__revisions-list { 847 list-style: none; 848 margin: 0 16px 16px 16px; 849 flex-grow: 1; 850 } 851 852 .global-styles-ui-screen-revisions__revisions-list li { 853 margin-bottom: 0; 854 } 855 856 .global-styles-ui-screen-revisions__revision-item { 857 position: relative; 858 cursor: var(--wpds-cursor-control, pointer); 859 display: flex; 860 flex-direction: column; 861 } 862 863 .global-styles-ui-screen-revisions__revision-item[role=option]:active, .global-styles-ui-screen-revisions__revision-item[role=option]:focus { 864 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); 865 outline: 2px solid transparent; 866 } 867 868 .global-styles-ui-screen-revisions__revision-item:hover { 869 background: rgba(var(--wp-admin-theme-color--rgb), 0.04); 870 } 871 872 .global-styles-ui-screen-revisions__revision-item:hover .global-styles-ui-screen-revisions__date { 873 color: var(--wp-admin-theme-color); 874 } 875 876 .global-styles-ui-screen-revisions__revision-item::before, .global-styles-ui-screen-revisions__revision-item::after { 877 position: absolute; 878 content: "\a"; 879 display: block; 880 } 881 882 .global-styles-ui-screen-revisions__revision-item::before { 883 background: #ddd; 884 border-radius: 50%; 885 height: 8px; 886 width: 8px; 887 top: 18px; 888 right: 17px; 889 transform: translate(50%, -50%); 890 z-index: 1; 891 border: 4px solid transparent; 892 } 893 894 .global-styles-ui-screen-revisions__revision-item[aria-selected=true] { 895 border-radius: 2px; 896 outline: 3px solid transparent; 897 outline-offset: -2px; 898 color: var(--wp-admin-theme-color); 899 background: rgba(var(--wp-admin-theme-color--rgb), 0.04); 900 } 901 902 .global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__date { 903 color: var(--wp-admin-theme-color); 904 } 905 906 .global-styles-ui-screen-revisions__revision-item[aria-selected=true]::before { 907 background: var(--wp-admin-theme-color); 908 } 909 910 .global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__changes > li, 911 .global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__meta { 912 color: #1e1e1e; 913 } 914 915 .global-styles-ui-screen-revisions__revision-item::after { 916 height: 100%; 917 right: 16px; 918 top: 0; 919 width: 0; 920 border: 0.5px solid #ddd; 921 } 922 923 .global-styles-ui-screen-revisions__revision-item:first-child::after { 924 top: 18px; 925 } 926 927 .global-styles-ui-screen-revisions__revision-item:last-child::after { 928 height: 18px; 929 } 930 931 .global-styles-ui-screen-revisions__revision-item-wrapper { 932 display: block; 933 padding: 12px 40px 4px 12px; 934 } 935 936 .global-styles-ui-screen-revisions__apply-button.is-primary, 937 .global-styles-ui-screen-revisions__active-badge { 938 align-self: flex-start; 939 margin: 0 40px 12px 12px; 940 } 941 942 .global-styles-ui-screen-revisions__changes, 943 .global-styles-ui-screen-revisions__meta { 944 color: #757575; 945 font-size: 12px; 946 } 947 948 .global-styles-ui-screen-revisions__description { 949 display: flex; 950 flex-direction: column; 951 align-items: flex-start; 952 gap: 8px; 953 } 954 955 .global-styles-ui-screen-revisions__description .global-styles-ui-screen-revisions__date { 956 text-transform: uppercase; 957 font-weight: var(--wpds-typography-font-weight-emphasis, 600); 958 font-size: 12px; 959 } 960 961 .global-styles-ui-screen-revisions__meta { 962 display: flex; 963 justify-content: start; 964 width: 100%; 965 align-items: flex-start; 966 text-align: right; 967 margin-bottom: 4px; 968 } 969 970 .global-styles-ui-screen-revisions__meta img { 971 width: 16px; 972 height: 16px; 973 border-radius: 100%; 974 margin-left: 8px; 975 } 976 977 .global-styles-ui-screen-revisions__loading { 978 margin: 24px auto !important; 979 } 980 981 .global-styles-ui-screen-revisions__changes { 982 text-align: right; 983 line-height: 1.4; 984 margin-right: 12px; 985 list-style: disc; 986 } 987 988 .global-styles-ui-screen-revisions__changes li { 989 margin-bottom: 4px; 990 } 991 992 .global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination { 993 justify-content: space-between; 994 gap: 2px; 995 } 996 997 .global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .edit-site-pagination__total { 998 position: absolute; 999 right: -1000px; 1000 height: 1px; 1001 margin: -1px; 1002 overflow: hidden; 1003 } 1004 1005 .global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-text { 1006 font-size: 12px; 1007 will-change: opacity; 1008 } 1009 1010 .global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-button.is-tertiary { 1011 color: #1e1e1e; 1012 } 1013 1014 .global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-button.is-tertiary:disabled, 1015 .global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-button.is-tertiary[aria-disabled=true] { 1016 color: #949494; 1017 } 1018 1019 .global-styles-ui-screen-revisions__footer { 1020 height: 56px; 1021 z-index: 1; 1022 position: sticky; 1023 min-width: 100%; 1024 bottom: 0; 1025 background: #fff; 1026 padding: 12px; 1027 border-top: 1px solid #ddd; 1028 box-sizing: border-box; 1029 } 1030 1031 .global-styles-ui-variations_item { 1032 box-sizing: border-box; 1033 cursor: var(--wpds-cursor-control, pointer); 1034 } 1035 1036 .global-styles-ui-variations_item .global-styles-ui-variations_item-preview { 1037 border-radius: 2px; 1038 outline: 1px solid rgba(0, 0, 0, 0.1); 1039 outline-offset: -1px; 1040 overflow: hidden; 1041 position: relative; 1042 } 1043 1044 @media not (prefers-reduced-motion) { 1045 .global-styles-ui-variations_item .global-styles-ui-variations_item-preview { 1046 transition: outline 0.1s linear; 1047 } 1048 } 1049 .global-styles-ui-variations_item .global-styles-ui-variations_item-preview.is-pill { 1050 height: 32px; 1051 } 1052 1053 .global-styles-ui-variations_item .global-styles-ui-variations_item-preview.is-pill .block-editor-iframe__scale-container { 1054 overflow: hidden; 1055 } 1056 1057 .global-styles-ui-variations_item:not(.is-active):hover .global-styles-ui-variations_item-preview { 1058 outline-color: rgba(0, 0, 0, 0.3); 1059 } 1060 1061 .global-styles-ui-variations_item.is-active .global-styles-ui-variations_item-preview, .global-styles-ui-variations_item:focus-visible .global-styles-ui-variations_item-preview { 1062 outline-color: #1e1e1e; 1063 outline-offset: 1px; 1064 outline-width: var(--wp-admin-border-width-focus); 1065 } 1066 1067 .global-styles-ui-variations_item:focus-visible .global-styles-ui-variations_item-preview { 1068 outline-color: var(--wp-admin-theme-color); 1069 } 1070 1071 .global-styles-ui-preview__wrapper { 1072 max-width: 100%; 1073 display: block; 1074 width: 100%; 1075 } 1076 1077 .global-styles-ui-preview__wrapper.is-hoverable { 1078 cursor: var(--wpds-cursor-control, pointer); 1079 } 1080 1081 .global-styles-ui-typography-preview { 1082 display: flex; 1083 align-items: center; 1084 justify-content: center; 1085 min-height: 100px; 1086 margin-bottom: 20px; 1087 background: #f0f0f0; 1088 border-radius: 2px; 1089 overflow: hidden; 1090 } 1091 1092 .global-styles-ui-font-size__item { 1093 white-space: nowrap; 1094 text-overflow: ellipsis; 1095 overflow: hidden; 1096 line-break: anywhere; 1097 } 1098 1099 .global-styles-ui-font-size__item-value { 1100 color: #757575; 1101 } 1102 1103 .global-styles-ui-screen-typography__indicator { 1104 height: 24px; 1105 width: 24px; 1106 font-size: 14px; 1107 display: flex !important; 1108 align-items: center; 1109 justify-content: center; 1110 border-radius: 2px; 1111 } 1112 1113 .global-styles-ui-block-types-search { 1114 margin-bottom: 10px; 1115 padding: 0 16px; 1116 } 1117 1118 .global-styles-ui-screen-typography__font-variants-count { 1119 color: #757575; 1120 } 1121 1122 .global-styles-ui-font-families__manage-fonts { 1123 justify-content: center; 1124 } 1125 1126 .global-styles-ui-screen .color-block-support-panel { 1127 padding-right: 0; 1128 padding-left: 0; 1129 padding-top: 0; 1130 border-top: none; 1131 row-gap: 12px; 1132 } 1133 1134 .global-styles-ui-header { 1135 margin-bottom: 0 !important; 1136 line-height: 1.9 !important; 1137 } 1138 1139 .global-styles-ui-subtitle { 1140 margin-bottom: 0 !important; 1141 text-transform: uppercase; 1142 font-weight: var(--wpds-typography-font-weight-emphasis, 600) !important; 1143 font-size: 11px !important; 1144 } 1145 1146 .global-styles-ui-section-title { 1147 color: #2f2f2f; 1148 font-weight: var(--wpds-typography-font-weight-emphasis, 600); 1149 line-height: 1.2; 1150 padding: 16px 16px 0; 1151 margin: 0; 1152 } 1153 1154 .global-styles-ui-icon-with-current-color { 1155 fill: currentColor; 1156 } 1157 1158 .global-styles-ui__color-indicator-wrapper { 1159 height: 24px; 1160 flex-shrink: 0; 1161 } 1162 1163 .global-styles-ui__shadows-panel__options-container, 1164 .global-styles-ui__typography-panel__options-container { 1165 height: 24px; 1166 } 1167 1168 .global-styles-ui__block-preview-panel { 1169 position: relative; 1170 width: 100%; 1171 border: #ddd 1px solid; 1172 border-radius: 2px; 1173 overflow: hidden; 1174 } 1175 1176 .global-styles-ui__shadow-preview-panel { 1177 height: 144px; 1178 border: #ddd 1px solid; 1179 border-radius: 2px; 1180 overflow: auto; 1181 background-image: repeating-linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0), repeating-linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0); 1182 background-position: 0 0, 8px 8px; 1183 background-size: 16px 16px; 1184 } 1185 1186 .global-styles-ui__shadow-preview-panel .global-styles-ui__shadow-preview-block { 1187 border: #ddd 1px solid; 1188 border-radius: 2px; 1189 background-color: #fff; 1190 width: 60%; 1191 height: 60px; 1192 } 1193 1194 .global-styles-ui__shadow-editor__dropdown-content { 1195 width: 280px; 1196 } 1197 1198 .global-styles-ui__shadow-editor-panel { 1199 margin-bottom: 4px; 1200 } 1201 1202 .global-styles-ui__shadow-editor__dropdown { 1203 width: 100%; 1204 position: relative; 1205 } 1206 1207 .global-styles-ui__shadow-editor__dropdown-toggle { 1208 width: 100%; 1209 height: auto; 1210 padding-top: 8px; 1211 padding-bottom: 8px; 1212 text-align: right; 1213 border-radius: inherit; 1214 } 1215 1216 .global-styles-ui__shadow-editor__dropdown-toggle.is-open { 1217 background: #f0f0f0; 1218 color: var(--wp-admin-theme-color); 1219 } 1220 1221 .global-styles-ui__shadow-editor__remove-button { 1222 position: absolute; 1223 left: 8px; 1224 top: 8px; 1225 opacity: 0; 1226 } 1227 1228 .global-styles-ui__shadow-editor__remove-button.global-styles-ui__shadow-editor__remove-button { 1229 border: none; 1230 } 1231 1232 .global-styles-ui__shadow-editor__dropdown-toggle:hover + .global-styles-ui__shadow-editor__remove-button, .global-styles-ui__shadow-editor__remove-button:focus, .global-styles-ui__shadow-editor__remove-button:hover { 1233 opacity: 1; 1234 } 1235 1236 @media (hover: none) { 1237 .global-styles-ui__shadow-editor__remove-button { 1238 opacity: 1; 1239 } 1240 } 1241 .global-styles-ui-screen-css { 1242 flex: 1 1 auto; 1243 display: flex; 1244 flex-direction: column; 1245 margin: 16px; 1246 } 1247 1248 .global-styles-ui-screen-css .block-editor-global-styles-advanced-panel { 1249 flex: 1 1 auto; 1250 } 1251 1252 .global-styles-ui-screen-css .block-editor-global-styles-advanced-panel__custom-css-input { 1253 flex: 1 1 auto; 1254 display: flex; 1255 flex-direction: column; 1256 } 1257 1258 .global-styles-ui-screen-css .block-editor-global-styles-advanced-panel__custom-css-input .components-base-control__field { 1259 flex: 1 1 auto; 1260 display: flex; 1261 flex-direction: column; 1262 } 1263 1264 .global-styles-ui-screen-css .block-editor-global-styles-advanced-panel__custom-css-input textarea { 1265 flex: 1 1 auto; 1266 } 1267 1268 .global-styles-ui-screen-css-help-link { 1269 display: inline-block; 1270 margin-top: 8px; 1271 } 1272 1273 .global-styles-ui-screen-variations { 1274 margin-top: 16px; 1275 border-top: 1px solid #ddd; 1276 } 1277 1278 .global-styles-ui-screen-variations > * { 1279 margin: 24px 16px; 1280 } 1281 1282 .global-styles-ui-sidebar__navigator-provider { 1283 height: 100%; 1284 } 1285 1286 .global-styles-ui-sidebar__navigator-screen { 1287 display: flex; 1288 flex-direction: column; 1289 height: 100%; 1290 } 1291 1292 .global-styles-ui-color-palette__tablist-container { 1293 border-bottom: 1px solid #ddd; 1294 } 1295 1296 .global-styles-ui-color-palette__tablist { 1297 margin-bottom: -1px; 1298 } 1299 1300 .global-styles-ui-sidebar__navigator-screen .single-column { 1301 grid-column: span 1; 1302 } 1303 1304 .global-styles-ui-screen-root.global-styles-ui-screen-root, 1305 .global-styles-ui-screen-style-variations.global-styles-ui-screen-style-variations { 1306 background: unset; 1307 color: inherit; 1308 } 1309 1310 .global-styles-ui-sidebar__panel .block-editor-block-icon svg { 1311 fill: currentColor; 1312 } 1313 1314 .global-styles-ui-screen-root__active-style-tile.global-styles-ui-screen-root__active-style-tile, .global-styles-ui-screen-root__active-style-tile.global-styles-ui-screen-root__active-style-tile .global-styles-ui-screen-root__active-style-tile-preview { 1315 border-radius: 2px; 1316 } 1317 1318 .global-styles-ui-screen-root__active-style-tile-preview { 1319 clip-path: border-box; 1320 } 1321 1322 .global-styles-ui-color-palette-panel, 1323 .global-styles-ui-gradient-palette-panel { 1324 padding: 16px; 1325 } 1326 1327 /** 1328 * Typography 1329 */ 1330 /** 1331 * SCSS Variables. 1332 * 1333 * Please use variables from this sheet to ensure consistency across the UI. 1334 * Don't add to this sheet unless you're pretty sure the value will be reused in many places. 1335 * For example, don't add rules to this sheet that affect block visuals. It's purely for UI. 1336 */ 1337 /** 1338 * Colors 1339 */ 1340 /** 1341 * Fonts & basic variables. 1342 */ 1343 /** 1344 * Typography 1345 */ 1346 /** 1347 * Grid System. 1348 * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/ 1349 */ 1350 /** 1351 * Radius scale. 1352 */ 1353 /** 1354 * Elevation scale. 1355 */ 1356 /** 1357 * Dimensions. 1358 */ 1359 /** 1360 * Mobile specific styles 1361 */ 1362 /** 1363 * Editor styles. 1364 */ 1365 /** 1366 * Block & Editor UI. 1367 */ 1368 /** 1369 * Block paddings. 1370 */ 1371 /** 1372 * React Native specific. 1373 * These variables do not appear to be used anywhere else. 1374 */ 1375 /** 1376 * Breakpoints & Media Queries 1377 */ 1378 /** 1379 * Converts a hex value into the rgb equivalent. 1380 * 1381 * @param {string} hex - the hexadecimal value to convert 1382 * @return {string} comma separated rgb values 1383 */ 1384 /** 1385 * Long content fade mixin 1386 * 1387 * Creates a fading overlay to signify that the content is longer 1388 * than the space allows. 1389 */ 1390 /** 1391 * Breakpoint mixins 1392 */ 1393 /** 1394 * Focus styles. 1395 */ 1396 /** 1397 * Standard focus rings for the WordPress Design System. 1398 * 1399 * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site, 1400 * e.g. `&:focus { @include outset-ring__focus(); }`. 1401 */ 1402 /** 1403 * Applies editor left position to the selector passed as argument 1404 */ 1405 /** 1406 * Styles that are reused verbatim in a few places 1407 */ 1408 /** 1409 * Allows users to opt-out of animations via OS-level preferences. 1410 */ 1411 /** 1412 * Reset default styles for JavaScript UI based pages. 1413 * This is a WP-admin agnostic reset 1414 */ 1415 /** 1416 * Reset the WP Admin page styles for Gutenberg-like pages. 1417 */ 1418 /** 1419 * Creates a checkerboard pattern background to indicate transparency. 1420 * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px. 1421 */ 1422 .dataviews-wrapper, 1423 .dataviews-picker-wrapper { 1424 height: 100%; 1425 flex-grow: 1; 1426 min-height: 0; 1427 box-sizing: border-box; 1428 scroll-padding-bottom: 64px; 1429 container: dataviews-wrapper/inline-size; 1430 display: flex; 1431 flex-direction: column; 1432 font-size: var(--wpds-typography-font-size-md, 13px); 1433 line-height: var(--wpds-typography-line-height-sm, 20px); 1434 background-color: var(--wp-dataviews-color-background, var(--wpds-color-background-surface-neutral-strong, #fff)); 1435 } 1436 1437 .dataviews__view-actions, 1438 .dataviews-filters__container { 1439 box-sizing: border-box; 1440 padding: var(--wpds-dimension-padding-lg, 16px) var(--wpds-dimension-padding-2xl, 24px); 1441 flex-shrink: 0; 1442 position: sticky; 1443 right: 0; 1444 background-color: inherit; 1445 } 1446 1447 @media not (prefers-reduced-motion) { 1448 .dataviews__view-actions, 1449 .dataviews-filters__container { 1450 transition: padding ease-out 0.1s; 1451 } 1452 } 1453 .dataviews-no-results, 1454 .dataviews-loading { 1455 padding: 0 var(--wpds-dimension-padding-2xl, 24px); 1456 flex-grow: 1; 1457 display: flex; 1458 align-items: center; 1459 justify-content: center; 1460 } 1461 1462 @media not (prefers-reduced-motion) { 1463 .dataviews-no-results, 1464 .dataviews-loading { 1465 transition: padding ease-out 0.1s; 1466 } 1467 } 1468 .dataviews-no-results.is-refreshing { 1469 opacity: 0.5; 1470 pointer-events: none; 1471 } 1472 1473 @media not (prefers-reduced-motion) { 1474 .dataviews-no-results.is-refreshing { 1475 opacity: 1; 1476 animation: dataviews-pulse 1s ease-in-out infinite; 1477 } 1478 } 1479 @keyframes dataviews-pulse { 1480 0%, 100% { 1481 opacity: 1; 1482 } 1483 50% { 1484 opacity: 0.5; 1485 } 1486 } 1487 .dataviews-loading-more { 1488 text-align: center; 1489 } 1490 1491 .dataviews-loading-more[aria-hidden=true] { 1492 visibility: hidden; 1493 } 1494 1495 @container (max-width: 430px) { 1496 .dataviews__view-actions, 1497 .dataviews-filters__container { 1498 padding: var(--wpds-dimension-padding-md, 12px) var(--wpds-dimension-padding-2xl, 24px); 1499 } 1500 } 1501 .dataviews-title-field { 1502 font-size: var(--wpds-typography-font-size-md, 13px); 1503 font-weight: var(--wpds-typography-font-weight-emphasis, 600); 1504 color: var(--wpds-color-foreground-content-neutral, #1e1e1e); 1505 text-overflow: ellipsis; 1506 white-space: nowrap; 1507 width: 100%; 1508 } 1509 1510 .dataviews-title-field a { 1511 text-decoration: none; 1512 text-overflow: ellipsis; 1513 white-space: nowrap; 1514 overflow: hidden; 1515 display: block; 1516 flex-grow: 0; 1517 color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e); 1518 } 1519 1520 .dataviews-title-field a:hover { 1521 color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9)); 1522 } 1523 1524 .dataviews-title-field a:focus { 1525 color: var(--wp-admin-theme-color--rgb); 1526 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color, #007cba); 1527 border-radius: 2px; 1528 } 1529 1530 .dataviews-title-field button.components-button.is-link { 1531 text-decoration: none; 1532 font-weight: inherit; 1533 text-overflow: ellipsis; 1534 white-space: nowrap; 1535 overflow: hidden; 1536 display: block; 1537 width: 100%; 1538 color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e); 1539 } 1540 1541 .dataviews-title-field button.components-button.is-link:hover { 1542 color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9)); 1543 } 1544 1545 .dataviews-title-field--clickable { 1546 cursor: var(--wpds-cursor-control, pointer); 1547 color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e); 1548 } 1549 1550 .dataviews-title-field--clickable:hover { 1551 color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9)); 1552 } 1553 1554 .dataviews-title-field--clickable:focus { 1555 color: var(--wp-admin-theme-color--rgb); 1556 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color, #007cba); 1557 border-radius: 2px; 1558 } 1559 1560 .dataviews__view-actions--infinite-scroll { 1561 position: sticky; 1562 top: 0; 1563 z-index: 2; 1564 background-color: #fff; 1565 } 1566 1567 /** 1568 * When DataViews are placed within cards, apply a consistent top padding. 1569 */ 1570 .components-card__body:has(> .dataviews-wrapper), 1571 .components-card__body:has(> .dataviews-picker-wrapper) { 1572 padding: var(--wpds-dimension-padding-sm, 8px) 0 0; 1573 overflow: hidden; 1574 } 1575 1576 .dataviews-bulk-actions-footer__item-count { 1577 color: var(--wpds-color-foreground-content-neutral, #1e1e1e); 1578 } 1579 1580 .dataviews-bulk-actions-footer__container { 1581 margin-left: auto; 1582 min-height: var(--wpds-dimension-size-md, 32px); 1583 } 1584 1585 .dataviews-layout__container { 1586 flex: 1; 1587 min-height: 0; 1588 overflow: auto; 1589 display: flex; 1590 flex-direction: column; 1591 background-color: inherit; 1592 } 1593 1594 .dataviews-filters__button { 1595 position: relative; 1596 } 1597 1598 .dataviews-filters__container { 1599 padding-top: 0; 1600 } 1601 1602 .dataviews-filters__reset-button.dataviews-filters__reset-button[aria-disabled=true], .dataviews-filters__reset-button.dataviews-filters__reset-button[aria-disabled=true]:hover { 1603 opacity: 0; 1604 } 1605 1606 .dataviews-filters__reset-button.dataviews-filters__reset-button[aria-disabled=true]:focus { 1607 opacity: 1; 1608 } 1609 1610 .dataviews-filters__summary-popover { 1611 font-size: var(--wpds-typography-font-size-md, 13px); 1612 line-height: var(--wpds-typography-line-height-sm, 20px); 1613 } 1614 1615 .dataviews-filters__summary-popover .components-popover__content { 1616 width: 100%; 1617 min-width: 230px; 1618 max-width: 250px; 1619 border-radius: var(--wpds-border-radius-md, 4px); 1620 } 1621 1622 .dataviews-filters__summary-popover.components-dropdown__content .components-popover__content { 1623 padding: 0; 1624 } 1625 1626 .dataviews-filters__summary-operators-container { 1627 padding: var(--wpds-dimension-padding-sm, 8px) var(--wpds-dimension-padding-lg, 16px); 1628 } 1629 1630 .dataviews-filters__summary-operators-container:has(+ .dataviews-filters__search-widget-listbox), .dataviews-filters__summary-operators-container:has(+ .dataviews-filters__search-widget-no-elements), .dataviews-filters__summary-operators-container:has(+ .dataviews-filters__user-input-widget) { 1631 border-bottom: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb); 1632 } 1633 1634 .dataviews-filters__summary-operators-container:empty { 1635 display: none; 1636 } 1637 1638 .dataviews-filters__summary-operators-container .dataviews-filters__summary-operators-filter-name { 1639 color: var(--wpds-color-foreground-content-neutral-weak, #707070); 1640 white-space: nowrap; 1641 overflow: hidden; 1642 text-overflow: ellipsis; 1643 flex-shrink: 0; /* Prevents this element from shrinking */ 1644 max-width: calc(100% - 55px); 1645 } 1646 1647 .dataviews-filters__summary-operators-container .dataviews-filters__summary-operators-filter-select { 1648 width: 100%; 1649 white-space: nowrap; 1650 overflow: hidden; 1651 } 1652 1653 .dataviews-filters__summary-chip-container { 1654 position: relative; 1655 white-space: pre-wrap; 1656 } 1657 1658 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip { 1659 border-radius: var(--wpds-border-radius-lg, 8px); 1660 border: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-interactive-neutral, #8d8d8d); 1661 cursor: var(--wpds-cursor-control, pointer); 1662 padding: var(--wpds-dimension-padding-xs, 4px) var(--wpds-dimension-padding-md, 12px); 1663 min-height: var(--wpds-dimension-size-md, 32px); 1664 color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e); 1665 position: relative; 1666 display: flex; 1667 align-items: center; 1668 box-sizing: border-box; 1669 } 1670 1671 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.is-not-clickable { 1672 cursor: default; 1673 } 1674 1675 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.has-reset { 1676 padding-inline-end: calc(var(--wpds-dimension-size-sm, 24px) + var(--wpds-dimension-padding-xs, 4px)); 1677 } 1678 1679 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip:hover:not(.dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.is-not-clickable), .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip:focus-visible, .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip[aria-expanded=true] { 1680 color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e); 1681 border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e); 1682 background-color: var(--wpds-color-background-interactive-neutral-weak-active, #ededed); 1683 } 1684 1685 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.has-values { 1686 color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9)); 1687 background: var(--wpds-color-background-interactive-brand-weak, rgba(0, 0, 0, 0)); 1688 border-color: var(--wpds-color-stroke-interactive-brand, var(--wp-admin-theme-color, #3858e9)); 1689 } 1690 1691 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.has-values:hover:not(.dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.has-values.is-not-clickable), .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.has-values[aria-expanded=true] { 1692 color: var(--wpds-color-foreground-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 52%, black)); 1693 background: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white)); 1694 border-color: var(--wpds-color-stroke-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black)); 1695 } 1696 1697 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip:focus-visible { 1698 outline: none; 1699 box-shadow: 0 0 0 var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)); 1700 } 1701 1702 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip .dataviews-filters-__summary-filter-text-name { 1703 font-weight: var(--wpds-typography-font-weight-emphasis, 600); 1704 } 1705 1706 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove { 1707 width: var(--wpds-dimension-size-sm, 24px); 1708 height: var(--wpds-dimension-size-sm, 24px); 1709 border-radius: var(--wpds-border-radius-md, 4px); 1710 border: 0; 1711 padding: 0; 1712 position: absolute; 1713 left: var(--wpds-dimension-padding-xs, 4px); 1714 top: 50%; 1715 transform: translateY(-50%); 1716 display: flex; 1717 align-items: center; 1718 justify-content: center; 1719 background: transparent; 1720 cursor: var(--wpds-cursor-control, pointer); 1721 } 1722 1723 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove svg { 1724 fill: var(--wpds-color-foreground-interactive-neutral, #1e1e1e); 1725 } 1726 1727 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:hover, .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:focus { 1728 background: var(--wpds-color-background-interactive-neutral-weak-active, #ededed); 1729 } 1730 1731 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:hover svg, .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:focus svg { 1732 fill: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e); 1733 } 1734 1735 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove.has-values svg { 1736 fill: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9)); 1737 } 1738 1739 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove.has-values:hover { 1740 background: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white)); 1741 } 1742 1743 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:focus-visible { 1744 outline: none; 1745 box-shadow: 0 0 0 var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)); 1746 } 1747 1748 .dataviews-filters__search-widget-filter-combobox-list { 1749 max-height: 184px; 1750 padding: var(--wpds-dimension-padding-xs, 4px); 1751 overflow: auto; 1752 border-top: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb); 1753 } 1754 1755 .dataviews-filters__search-widget-filter-combobox-list .dataviews-filters__search-widget-filter-combobox-item-value [data-user-value] { 1756 font-weight: var(--wpds-typography-font-weight-emphasis, 600); 1757 } 1758 1759 .dataviews-filters__search-widget-listbox { 1760 padding: var(--wpds-dimension-padding-xs, 4px); 1761 overflow: auto; 1762 } 1763 1764 .dataviews-filters__search-widget-listitem { 1765 display: flex; 1766 align-items: center; 1767 gap: var(--wpds-dimension-gap-md, 12px); 1768 border-radius: var(--wpds-border-radius-sm, 2px); 1769 box-sizing: border-box; 1770 padding: var(--wpds-dimension-padding-xs, 4px) var(--wpds-dimension-padding-md, 12px); 1771 cursor: default; 1772 min-height: var(--wpds-dimension-size-md, 32px); 1773 font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 1774 font-weight: var(--wpds-typography-font-weight-default, 400); 1775 font-size: 13px; 1776 line-height: 20px; 1777 } 1778 1779 .dataviews-filters__search-widget-listitem:last-child { 1780 margin-block-end: 0; 1781 } 1782 1783 .dataviews-filters__search-widget-listitem:hover, .dataviews-filters__search-widget-listitem[data-active-item], .dataviews-filters__search-widget-listitem:focus { 1784 background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white)); 1785 } 1786 1787 .dataviews-filters__search-widget-listitem:hover .dataviews-filters__search-widget-listitem-single-selection, .dataviews-filters__search-widget-listitem[data-active-item] .dataviews-filters__search-widget-listitem-single-selection, .dataviews-filters__search-widget-listitem:focus .dataviews-filters__search-widget-listitem-single-selection { 1788 border-color: var(--wpds-color-stroke-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black)); 1789 background: var(--wpds-color-background-surface-neutral-strong, #fff); 1790 } 1791 1792 .dataviews-filters__search-widget-listitem:hover .dataviews-filters__search-widget-listitem-single-selection.is-selected, .dataviews-filters__search-widget-listitem[data-active-item] .dataviews-filters__search-widget-listitem-single-selection.is-selected, .dataviews-filters__search-widget-listitem:focus .dataviews-filters__search-widget-listitem-single-selection.is-selected { 1793 border-color: var(--wpds-color-stroke-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black)); 1794 background: var(--wpds-color-background-interactive-brand-strong-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 93%, black)); 1795 } 1796 1797 .dataviews-filters__search-widget-listitem:hover .dataviews-filters__search-widget-listitem-multi-selection, .dataviews-filters__search-widget-listitem[data-active-item] .dataviews-filters__search-widget-listitem-multi-selection, .dataviews-filters__search-widget-listitem:focus .dataviews-filters__search-widget-listitem-multi-selection { 1798 border-color: var(--wpds-color-stroke-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black)); 1799 background: var(--wpds-color-background-surface-neutral-strong, #fff); 1800 } 1801 1802 .dataviews-filters__search-widget-listitem:hover .dataviews-filters__search-widget-listitem-multi-selection.is-selected, .dataviews-filters__search-widget-listitem[data-active-item] .dataviews-filters__search-widget-listitem-multi-selection.is-selected, .dataviews-filters__search-widget-listitem:focus .dataviews-filters__search-widget-listitem-multi-selection.is-selected { 1803 border-color: var(--wpds-color-stroke-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black)); 1804 background: var(--wpds-color-background-interactive-brand-strong-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 93%, black)); 1805 } 1806 1807 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-value { 1808 overflow: hidden; 1809 text-overflow: ellipsis; 1810 white-space: nowrap; 1811 min-width: 0; 1812 } 1813 1814 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-description { 1815 display: block; 1816 overflow: hidden; 1817 text-overflow: ellipsis; 1818 font-size: var(--wpds-typography-font-size-sm, 12px); 1819 line-height: 16px; 1820 color: var(--wpds-color-foreground-content-neutral-weak, #707070); 1821 } 1822 1823 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection { 1824 border: 1px solid #1e1e1e; 1825 margin-left: 12px; 1826 transition: none; 1827 border-radius: 50%; 1828 width: 24px; 1829 height: 24px; 1830 min-width: 24px; 1831 max-width: 24px; 1832 position: relative; 1833 } 1834 1835 @media not (prefers-reduced-motion) { 1836 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection { 1837 transition: box-shadow 0.1s linear; 1838 } 1839 } 1840 @media (min-width: 600px) { 1841 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection { 1842 height: 16px; 1843 width: 16px; 1844 min-width: 16px; 1845 max-width: 16px; 1846 } 1847 } 1848 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection:checked::before { 1849 box-sizing: inherit; 1850 width: 12px; 1851 height: 12px; 1852 position: absolute; 1853 top: 50%; 1854 right: 50%; 1855 transform: translate(50%, -50%); 1856 margin: 0; 1857 background-color: #fff; 1858 border: 4px solid #fff; 1859 } 1860 1861 @media (min-width: 600px) { 1862 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection:checked::before { 1863 width: 8px; 1864 height: 8px; 1865 } 1866 } 1867 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection:focus { 1868 box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color); 1869 outline: 2px solid transparent; 1870 } 1871 1872 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection:checked { 1873 background: var(--wp-admin-theme-color); 1874 border: none; 1875 } 1876 1877 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection { 1878 margin: 0; 1879 padding: 0; 1880 } 1881 1882 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection.is-selected { 1883 background: var(--wpds-color-background-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9)); 1884 border-color: var(--wpds-color-stroke-interactive-brand, var(--wp-admin-theme-color, #3858e9)); 1885 } 1886 1887 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection.is-selected::before { 1888 content: ""; 1889 border-radius: 50%; 1890 box-sizing: inherit; 1891 width: 12px; 1892 height: 12px; 1893 position: absolute; 1894 top: 50%; 1895 right: 50%; 1896 transform: translate(50%, -50%); 1897 margin: 0; 1898 background-color: var(--wpds-color-foreground-interactive-brand-strong, #fff); 1899 border: 4px solid var(--wpds-color-foreground-interactive-brand-strong, #fff); 1900 } 1901 1902 @media (min-width: 600px) { 1903 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection.is-selected::before { 1904 width: 8px; 1905 height: 8px; 1906 } 1907 } 1908 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection { 1909 --checkbox-size: 24px; 1910 flex-shrink: 0; 1911 border: 1px solid #1e1e1e; 1912 margin-left: 12px; 1913 transition: none; 1914 border-radius: 2px; 1915 font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 1916 padding: 6px 8px; 1917 /* Fonts smaller than 16px causes mobile safari to zoom. */ 1918 font-size: 16px; 1919 /* Override core line-height. To be reviewed. */ 1920 line-height: normal; 1921 box-shadow: 0 0 0 transparent; 1922 border-radius: 2px; 1923 border: 1px solid #949494; 1924 } 1925 1926 @media not (prefers-reduced-motion) { 1927 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection { 1928 transition: box-shadow 0.1s linear; 1929 } 1930 } 1931 @media (min-width: 600px) { 1932 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection { 1933 font-size: 13px; 1934 /* Override core line-height. To be reviewed. */ 1935 line-height: normal; 1936 } 1937 } 1938 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:focus { 1939 border-color: var(--wp-admin-theme-color); 1940 box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color); 1941 outline: 2px solid transparent; 1942 } 1943 1944 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection::-moz-placeholder { 1945 color: rgba(30, 30, 30, 0.62); 1946 } 1947 1948 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection::placeholder { 1949 color: rgba(30, 30, 30, 0.62); 1950 } 1951 1952 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:focus { 1953 box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color); 1954 outline: 2px solid transparent; 1955 } 1956 1957 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:checked { 1958 background: var(--wp-admin-theme-color); 1959 border-color: var(--wp-admin-theme-color); 1960 } 1961 1962 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:checked::before, .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection[aria-checked=mixed]::before { 1963 margin: -3px -5px; 1964 color: #fff; 1965 } 1966 1967 @media (min-width: 782px) { 1968 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:checked::before, .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection[aria-checked=mixed]::before { 1969 margin: -4px -5px 0 0; 1970 } 1971 } 1972 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection[aria-checked=mixed] { 1973 background: var(--wp-admin-theme-color); 1974 border-color: var(--wp-admin-theme-color); 1975 } 1976 1977 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection[aria-checked=mixed]::before { 1978 content: "\f460"; 1979 float: right; 1980 display: inline-block; 1981 vertical-align: middle; 1982 width: 16px; 1983 /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword -- dashicons don't need a generic family keyword. */ 1984 font: normal 30px/1 dashicons; 1985 speak: none; 1986 -webkit-font-smoothing: antialiased; 1987 -moz-osx-font-smoothing: grayscale; 1988 } 1989 1990 @media (min-width: 782px) { 1991 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection[aria-checked=mixed]::before { 1992 float: none; 1993 font-size: 21px; 1994 } 1995 } 1996 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection[aria-disabled=true], .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:disabled { 1997 background: #f0f0f0; 1998 border-color: #ddd; 1999 cursor: default; 2000 opacity: 1; 2001 } 2002 2003 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection { 2004 position: relative; 2005 background: var(--wpds-color-background-interactive-neutral-weak, rgba(0, 0, 0, 0)); 2006 color: var(--wpds-color-foreground-content-neutral, #1e1e1e); 2007 margin: 0; 2008 padding: 0; 2009 width: var(--checkbox-size); 2010 height: var(--checkbox-size); 2011 } 2012 2013 @media (min-width: 600px) { 2014 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection { 2015 --checkbox-size: 16px; 2016 } 2017 } 2018 @media not (prefers-reduced-motion) { 2019 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection { 2020 transition: 0.1s border-color ease-in-out; 2021 } 2022 } 2023 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection.is-selected { 2024 background: var(--wpds-color-background-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9)); 2025 border-color: var(--wpds-color-stroke-interactive-brand, var(--wp-admin-theme-color, #3858e9)); 2026 } 2027 2028 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection.is-selected svg { 2029 --checkmark-size: var(--checkbox-size); 2030 fill: var(--wpds-color-foreground-interactive-neutral-strong, #f0f0f0); 2031 position: absolute; 2032 right: 50%; 2033 top: 50%; 2034 transform: translate(50%, -50%); 2035 width: var(--checkmark-size); 2036 height: var(--checkmark-size); 2037 } 2038 2039 @media (min-width: 600px) { 2040 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection.is-selected svg { 2041 --checkmark-size: calc(var(--checkbox-size) + 4px); 2042 } 2043 } 2044 .dataviews-filters__search-widget-filter-combobox__wrapper { 2045 position: relative; 2046 padding: var(--wpds-dimension-padding-sm, 8px); 2047 } 2048 2049 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input { 2050 font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 2051 padding: 6px 8px; 2052 /* Fonts smaller than 16px causes mobile safari to zoom. */ 2053 font-size: 16px; 2054 /* Override core line-height. To be reviewed. */ 2055 line-height: normal; 2056 box-shadow: 0 0 0 transparent; 2057 border-radius: 2px; 2058 border: 1px solid #949494; 2059 } 2060 2061 @media not (prefers-reduced-motion) { 2062 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input { 2063 transition: box-shadow 0.1s linear; 2064 } 2065 } 2066 @media (min-width: 600px) { 2067 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input { 2068 font-size: 13px; 2069 /* Override core line-height. To be reviewed. */ 2070 line-height: normal; 2071 } 2072 } 2073 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:focus { 2074 border-color: var(--wp-admin-theme-color); 2075 box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color); 2076 outline: 2px solid transparent; 2077 } 2078 2079 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-moz-placeholder { 2080 color: rgba(30, 30, 30, 0.62); 2081 } 2082 2083 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::placeholder { 2084 color: rgba(30, 30, 30, 0.62); 2085 } 2086 2087 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input { 2088 display: block; 2089 padding: 0 var(--wpds-dimension-size-md, 32px) 0 var(--wpds-dimension-padding-sm, 8px); 2090 width: 100%; 2091 height: var(--wpds-dimension-size-md, 32px); 2092 margin-right: 0; 2093 margin-left: 0; 2094 /* Fonts smaller than 16px causes mobile safari to zoom. */ 2095 font-size: 16px; 2096 } 2097 2098 @media (min-width: 600px) { 2099 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input { 2100 font-size: var(--wpds-typography-font-size-md, 13px); 2101 } 2102 } 2103 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:focus { 2104 background: var(--wpds-color-background-surface-neutral-strong, #fff); 2105 box-shadow: inset 0 0 0 var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)); 2106 } 2107 2108 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-moz-placeholder { 2109 color: var(--wpds-color-foreground-content-neutral-weak, #707070); 2110 } 2111 2112 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::placeholder { 2113 color: var(--wpds-color-foreground-content-neutral-weak, #707070); 2114 } 2115 2116 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-webkit-search-decoration, .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-webkit-search-cancel-button, .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-webkit-search-results-button, .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-webkit-search-results-decoration { 2117 -webkit-appearance: none; 2118 } 2119 2120 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__icon { 2121 position: absolute; 2122 inset-inline-start: var(--wpds-dimension-gap-md, 12px); 2123 top: 0; 2124 bottom: 0; 2125 display: flex; 2126 align-items: center; 2127 justify-content: center; 2128 width: var(--wpds-dimension-size-sm, 24px); 2129 } 2130 2131 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__icon:dir(ltr) { 2132 transform: scaleX(-1); 2133 } 2134 2135 .dataviews-filters__container-visibility-toggle { 2136 position: relative; 2137 flex-shrink: 0; 2138 } 2139 2140 .dataviews-filters-toggle__count { 2141 position: absolute; 2142 top: 0; 2143 left: 0; 2144 transform: translate(-50%, -50%); 2145 background: var(--wpds-color-background-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9)); 2146 height: var(--wpds-dimension-size-2xs, 16px); 2147 min-width: var(--wpds-dimension-size-2xs, 16px); 2148 line-height: var(--wpds-typography-line-height-xs, 16px); 2149 padding: 0 var(--wpds-dimension-padding-xs, 4px); 2150 text-align: center; 2151 border-radius: var(--wpds-border-radius-lg, 8px); 2152 font-size: 11px; 2153 outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--wpds-color-background-surface-neutral-strong, #fff); 2154 color: var(--wpds-color-foreground-interactive-neutral-strong, #f0f0f0); 2155 box-sizing: border-box; 2156 } 2157 2158 .dataviews-search { 2159 width: -moz-fit-content; 2160 width: fit-content; 2161 } 2162 2163 .dataviews-filters__user-input-widget { 2164 padding: var(--wpds-dimension-padding-lg, 16px); 2165 } 2166 2167 .dataviews-filters__user-input-widget .components-input-control__prefix { 2168 padding-right: var(--wpds-dimension-padding-sm, 8px); 2169 } 2170 2171 .dataviews-filters__search-widget-no-elements { 2172 display: flex; 2173 align-items: center; 2174 justify-content: center; 2175 padding: var(--wpds-dimension-padding-lg, 16px); 2176 } 2177 2178 .dataviews-footer { 2179 position: sticky; 2180 bottom: 0; 2181 right: 0; 2182 background-color: inherit; 2183 padding: var(--wpds-dimension-padding-md, 12px) var(--wpds-dimension-padding-2xl, 24px); 2184 border-top: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-surface-neutral-weak, #f0f0f0); 2185 flex-shrink: 0; 2186 } 2187 2188 @media not (prefers-reduced-motion) { 2189 .dataviews-footer { 2190 transition: padding ease-out 0.1s; 2191 } 2192 } 2193 .dataviews-footer { 2194 z-index: 1; 2195 } 2196 2197 .dataviews-footer .is-refreshing { 2198 opacity: 0.5; 2199 pointer-events: none; 2200 } 2201 2202 @media not (prefers-reduced-motion) { 2203 .dataviews-footer .is-refreshing { 2204 opacity: 1; 2205 animation: dataviews-pulse 1s ease-in-out infinite; 2206 } 2207 } 2208 @container (max-width: 560px) { 2209 .dataviews-footer__content { 2210 flex-direction: column !important; 2211 } 2212 .dataviews-footer__content .dataviews-bulk-actions-footer__container { 2213 width: 100%; 2214 } 2215 .dataviews-footer__content .dataviews-bulk-actions-footer__item-count { 2216 flex-grow: 1; 2217 } 2218 .dataviews-footer__content .dataviews-pagination { 2219 width: 100%; 2220 justify-content: space-between; 2221 } 2222 } 2223 .dataviews-pagination__page-select { 2224 font-size: 11px; 2225 font-weight: var(--wpds-typography-font-weight-emphasis, 600); 2226 text-transform: uppercase; 2227 } 2228 2229 @media (min-width: 600px) { 2230 .dataviews-pagination__page-select .components-select-control__input { 2231 font-size: 11px !important; 2232 font-weight: var(--wpds-typography-font-weight-emphasis, 600); 2233 } 2234 } 2235 .dataviews-action-modal { 2236 z-index: 1000001; 2237 } 2238 2239 .dataviews-item-actions .components-button:not(.dataviews-all-actions-button) { 2240 padding: 0 var(--wpds-dimension-padding-xs, 4px); 2241 } 2242 2243 .dataviews-selection-checkbox { 2244 --checkbox-input-size: 24px; 2245 } 2246 2247 @media (min-width: 600px) { 2248 .dataviews-selection-checkbox { 2249 --checkbox-input-size: 16px; 2250 } 2251 } 2252 .dataviews-selection-checkbox { 2253 line-height: 0; 2254 flex-shrink: 0; 2255 } 2256 2257 .dataviews-selection-checkbox .components-checkbox-control__input-container { 2258 margin: 0; 2259 } 2260 2261 .dataviews-view-config { 2262 width: 320px; 2263 container-type: inline-size; 2264 font-size: var(--wpds-typography-font-size-md, 13px); 2265 line-height: var(--wpds-typography-line-height-sm, 20px); 2266 } 2267 2268 .dataviews-config__popover.is-expanded .dataviews-config__popover-content-wrapper { 2269 overflow-y: scroll; 2270 height: 100%; 2271 } 2272 2273 .dataviews-config__popover.is-expanded .dataviews-config__popover-content-wrapper .dataviews-view-config { 2274 width: auto; 2275 } 2276 2277 .dataviews-view-config__sort-direction .components-toggle-group-control-option-base { 2278 text-transform: uppercase; 2279 } 2280 2281 .dataviews-settings-section__title.dataviews-settings-section__title { 2282 line-height: var(--wpds-typography-line-height-md, 24px); 2283 font-size: 15px; 2284 } 2285 2286 .dataviews-settings-section__sidebar { 2287 grid-column: span 4; 2288 } 2289 2290 .dataviews-settings-section__content, 2291 .dataviews-settings-section__content > * { 2292 grid-column: span 8; 2293 } 2294 2295 .dataviews-settings-section__content .is-divided-in-two { 2296 display: contents; 2297 } 2298 2299 .dataviews-settings-section__content .is-divided-in-two > * { 2300 grid-column: span 4; 2301 } 2302 2303 .dataviews-settings-section:has(.dataviews-settings-section__content:empty) { 2304 display: none; 2305 } 2306 2307 @container (max-width: 500px) { 2308 .dataviews-settings-section.dataviews-settings-section { 2309 grid-template-columns: repeat(2, 1fr); 2310 } 2311 .dataviews-settings-section.dataviews-settings-section .dataviews-settings-section__sidebar { 2312 grid-column: span 2; 2313 } 2314 .dataviews-settings-section.dataviews-settings-section .dataviews-settings-section__content { 2315 grid-column: span 2; 2316 } 2317 } 2318 .dataviews-view-config__sort-controls > * { 2319 flex: 1; 2320 } 2321 2322 .dataviews-view-config__label { 2323 text-wrap: nowrap; 2324 } 2325 2326 .dataviews-view-config__toggle-wrapper { 2327 position: relative; 2328 display: inline-flex; 2329 } 2330 2331 .dataviews-view-config__modified-indicator { 2332 position: absolute; 2333 top: var(--wpds-dimension-gap-xs, 4px); 2334 left: var(--wpds-dimension-gap-xs, 4px); 2335 width: var(--wpds-dimension-gap-xs, 4px); 2336 height: var(--wpds-dimension-gap-xs, 4px); 2337 background: var(--wpds-color-background-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9)); 2338 border-radius: 50%; 2339 pointer-events: none; 2340 } 2341 2342 .dataviews-view-grid-items { 2343 margin-bottom: auto; 2344 display: grid; 2345 gap: var(--wpds-dimension-gap-xl, 24px); 2346 grid-template-rows: max-content; 2347 grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); 2348 padding: 0 var(--wpds-dimension-padding-2xl, 24px) var(--wpds-dimension-padding-2xl, 24px); 2349 container-type: inline-size; 2350 } 2351 2352 @media not (prefers-reduced-motion) { 2353 .dataviews-view-grid-items { 2354 transition: padding ease-out 0.1s; 2355 } 2356 } 2357 .dataviews-view-grid-items.has-compact-density { 2358 gap: var(--wpds-dimension-gap-lg, 16px); 2359 } 2360 2361 .dataviews-view-grid-items.has-comfortable-density { 2362 gap: var(--wpds-dimension-gap-2xl, 32px); 2363 } 2364 2365 .dataviews-view-grid { 2366 padding: 0 var(--wpds-dimension-padding-2xl, 24px) var(--wpds-dimension-padding-2xl, 24px); 2367 display: flex; 2368 flex-direction: column; 2369 gap: var(--wpds-dimension-gap-xl, 24px); 2370 container-type: inline-size; 2371 margin-bottom: auto; 2372 } 2373 2374 @media not (prefers-reduced-motion) { 2375 .dataviews-view-grid { 2376 transition: padding ease-out 0.1s; 2377 } 2378 } 2379 .dataviews-view-grid.has-compact-density { 2380 gap: var(--wpds-dimension-gap-lg, 16px); 2381 } 2382 2383 .dataviews-view-grid.has-compact-density .dataviews-view-grid__row { 2384 gap: var(--wpds-dimension-gap-lg, 16px); 2385 } 2386 2387 .dataviews-view-grid.has-comfortable-density { 2388 gap: var(--wpds-dimension-gap-2xl, 32px); 2389 } 2390 2391 .dataviews-view-grid.has-comfortable-density .dataviews-view-grid__row { 2392 gap: var(--wpds-dimension-gap-2xl, 32px); 2393 } 2394 2395 .dataviews-view-grid .dataviews-view-grid__row { 2396 display: grid; 2397 gap: var(--wpds-dimension-gap-xl, 24px); 2398 } 2399 2400 .dataviews-view-grid .dataviews-view-grid__row .dataviews-view-grid__row__gridcell { 2401 border-radius: var(--wpds-border-radius-md, 4px); 2402 position: relative; 2403 } 2404 2405 .dataviews-view-grid .dataviews-view-grid__row .dataviews-view-grid__row__gridcell[data-focus-visible]::after { 2406 content: ""; 2407 position: absolute; 2408 top: 0; 2409 right: 0; 2410 width: 100%; 2411 height: 100%; 2412 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)); 2413 border-radius: var(--wpds-border-radius-md, 4px); 2414 pointer-events: none; 2415 outline: 2px solid transparent; 2416 } 2417 2418 .dataviews-view-grid .dataviews-view-grid__card, 2419 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card { 2420 height: 100%; 2421 justify-content: flex-start; 2422 position: relative; 2423 isolation: isolate; 2424 } 2425 2426 .dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__title-actions, 2427 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card .dataviews-view-grid__title-actions { 2428 padding: var(--wpds-dimension-padding-sm, 8px) 0 var(--wpds-dimension-padding-xs, 4px); 2429 } 2430 2431 .dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__title-field, 2432 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card .dataviews-view-grid__title-field { 2433 min-height: var(--wpds-dimension-size-sm, 24px); 2434 overflow: hidden; 2435 align-content: center; 2436 text-align: start; 2437 } 2438 2439 .dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__title-field--clickable, 2440 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card .dataviews-view-grid__title-field--clickable { 2441 width: -moz-fit-content; 2442 width: fit-content; 2443 } 2444 2445 .dataviews-view-grid .dataviews-view-grid__card.is-selected .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value, 2446 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card.is-selected .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value { 2447 color: var(--wpds-color-foreground-content-neutral, #1e1e1e); 2448 } 2449 2450 .dataviews-view-grid .dataviews-view-grid__card.is-selected .dataviews-view-grid__media::after, 2451 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card.is-selected .dataviews-view-grid__media::after { 2452 box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) var(--wpds-color-stroke-interactive-brand, var(--wp-admin-theme-color, #3858e9)), inset 0 0 0 var(--wpds-border-width-sm, 2px) var(--wpds-color-background-surface-neutral-strong, #fff); 2453 } 2454 2455 .dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__media:focus::after, 2456 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card .dataviews-view-grid__media:focus::after { 2457 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)); 2458 } 2459 2460 .dataviews-view-grid .dataviews-view-grid__media, 2461 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__media { 2462 width: 100%; 2463 aspect-ratio: 1/1; 2464 background-color: var(--wpds-color-background-surface-neutral-strong, #fff); 2465 border-radius: var(--wpds-border-radius-md, 4px); 2466 overflow: hidden; 2467 position: relative; 2468 } 2469 2470 .dataviews-view-grid .dataviews-view-grid__media.dataviews-view-grid__media--placeholder, 2471 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__media.dataviews-view-grid__media--placeholder { 2472 aspect-ratio: 3/1; 2473 } 2474 2475 .dataviews-view-grid .dataviews-view-grid__media img, 2476 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__media img { 2477 -o-object-fit: cover; 2478 object-fit: cover; 2479 width: 100%; 2480 height: 100%; 2481 } 2482 2483 .dataviews-view-grid .dataviews-view-grid__media::after, 2484 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__media::after { 2485 content: ""; 2486 position: absolute; 2487 top: 0; 2488 right: 0; 2489 width: 100%; 2490 height: 100%; 2491 box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) rgba(0, 0, 0, 0.1); 2492 border-radius: var(--wpds-border-radius-md, 4px); 2493 pointer-events: none; 2494 } 2495 2496 .dataviews-view-grid .dataviews-view-grid__media .dataviews-view-grid__media-placeholder, 2497 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__media .dataviews-view-grid__media-placeholder { 2498 width: 100%; 2499 height: 100%; 2500 display: block; 2501 border-radius: var(--wpds-border-radius-md, 4px); 2502 box-shadow: none; 2503 background: var(--wpds-color-background-surface-neutral, #fcfcfc); 2504 } 2505 2506 .dataviews-view-grid .dataviews-view-grid__fields, 2507 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields { 2508 position: relative; 2509 font-size: 12px; 2510 line-height: 16px; 2511 } 2512 2513 .dataviews-view-grid .dataviews-view-grid__fields:not(:empty), 2514 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields:not(:empty) { 2515 padding: 0 0 var(--wpds-dimension-padding-md, 12px); 2516 } 2517 2518 .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field-value:not(:empty), 2519 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields .dataviews-view-grid__field-value:not(:empty) { 2520 min-height: var(--wpds-dimension-size-sm, 24px); 2521 line-height: var(--wpds-typography-line-height-sm, 20px); 2522 padding-top: calc((var(--wpds-dimension-size-sm, 24px) - var(--wpds-typography-line-height-sm, 20px)) / 2); 2523 } 2524 2525 .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field, 2526 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields .dataviews-view-grid__field { 2527 min-height: var(--wpds-dimension-size-sm, 24px); 2528 align-items: center; 2529 } 2530 2531 .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-name, 2532 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-name { 2533 width: 35%; 2534 color: var(--wpds-color-foreground-content-neutral-weak, #707070); 2535 overflow: hidden; 2536 text-overflow: ellipsis; 2537 white-space: nowrap; 2538 } 2539 2540 .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value, 2541 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value { 2542 width: 65%; 2543 overflow: hidden; 2544 text-overflow: ellipsis; 2545 white-space: nowrap; 2546 } 2547 2548 .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field:not(:has(.dataviews-view-grid__field-value:not(:empty))), 2549 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields .dataviews-view-grid__field:not(:has(.dataviews-view-grid__field-value:not(:empty))) { 2550 display: none; 2551 } 2552 2553 .dataviews-view-grid .dataviews-view-grid__badge-fields:not(:empty), 2554 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__badge-fields:not(:empty) { 2555 padding-bottom: var(--wpds-dimension-padding-md, 12px); 2556 } 2557 2558 .dataviews-view-grid.is-refreshing, 2559 .dataviews-view-grid-infinite-scroll.is-refreshing { 2560 opacity: 0.5; 2561 pointer-events: none; 2562 } 2563 2564 @media not (prefers-reduced-motion) { 2565 .dataviews-view-grid.is-refreshing, 2566 .dataviews-view-grid-infinite-scroll.is-refreshing { 2567 opacity: 1; 2568 animation: dataviews-pulse 1s ease-in-out infinite; 2569 } 2570 } 2571 .dataviews-view-grid__field-value:empty, 2572 .dataviews-view-grid__field:empty { 2573 display: none; 2574 } 2575 2576 .dataviews-view-grid__card .dataviews-selection-checkbox { 2577 position: absolute; 2578 top: -9999em; 2579 right: var(--wpds-dimension-padding-sm, 8px); 2580 z-index: 1; 2581 opacity: 0; 2582 } 2583 2584 @media not (prefers-reduced-motion) { 2585 .dataviews-view-grid__card .dataviews-selection-checkbox { 2586 transition: opacity 0.1s linear; 2587 } 2588 } 2589 @media (hover: none) { 2590 .dataviews-view-grid__card .dataviews-selection-checkbox { 2591 opacity: 1; 2592 top: var(--wpds-dimension-padding-sm, 8px); 2593 } 2594 } 2595 .dataviews-view-grid__card:hover .dataviews-selection-checkbox, 2596 .dataviews-view-grid__card:focus-within .dataviews-selection-checkbox, 2597 .dataviews-view-grid__card.is-selected .dataviews-selection-checkbox { 2598 opacity: 1; 2599 top: var(--wpds-dimension-padding-sm, 8px); 2600 } 2601 2602 .dataviews-view-grid__card .dataviews-view-grid__media-actions { 2603 position: absolute; 2604 z-index: 1; 2605 top: var(--wpds-dimension-padding-xs, 4px); 2606 opacity: 0; 2607 left: var(--wpds-dimension-padding-xs, 4px); 2608 } 2609 2610 .dataviews-view-grid__card .dataviews-view-grid__media-actions .dataviews-all-actions-button { 2611 background-color: var(--wpds-color-background-surface-neutral-strong, #fff); 2612 } 2613 2614 @media not (prefers-reduced-motion) { 2615 .dataviews-view-grid__card .dataviews-view-grid__media-actions { 2616 transition: opacity 0.1s linear; 2617 } 2618 } 2619 @media (hover: none) { 2620 .dataviews-view-grid__card .dataviews-view-grid__media-actions { 2621 opacity: 1; 2622 top: var(--wpds-dimension-padding-xs, 4px); 2623 } 2624 } 2625 .dataviews-view-grid__card:hover .dataviews-view-grid__media-actions, 2626 .dataviews-view-grid__card:focus-within .dataviews-view-grid__media-actions, 2627 .dataviews-view-grid__card .dataviews-view-grid__media-actions:has(.dataviews-all-actions-button[aria-expanded=true]) { 2628 opacity: 1; 2629 } 2630 2631 .dataviews-view-grid__media--clickable { 2632 cursor: var(--wpds-cursor-control, pointer); 2633 } 2634 2635 .dataviews-view-grid__group-header { 2636 font-size: var(--wpds-typography-font-size-lg, 15px); 2637 font-weight: var(--wpds-typography-font-weight-emphasis, 600); 2638 color: var(--wpds-color-foreground-content-neutral, #1e1e1e); 2639 margin: 0 0 var(--wpds-dimension-gap-sm, 8px) 0; 2640 padding: 0 var(--wpds-dimension-padding-2xl, 24px); 2641 container-type: inline-size; 2642 } 2643 2644 div.dataviews-view-list { 2645 list-style-type: none; 2646 } 2647 2648 .dataviews-view-list { 2649 margin: 0 0 auto; 2650 } 2651 2652 .dataviews-view-list div[role=row], 2653 .dataviews-view-list div[role=article] { 2654 margin: 0; 2655 border-top: 1px solid var(--wpds-color-stroke-surface-neutral-weak, #f0f0f0); 2656 } 2657 2658 .dataviews-view-list div[role=row] .dataviews-view-list__item-wrapper, 2659 .dataviews-view-list div[role=article] .dataviews-view-list__item-wrapper { 2660 position: relative; 2661 padding: var(--wpds-dimension-padding-lg, 16px) var(--wpds-dimension-padding-2xl, 24px); 2662 box-sizing: border-box; 2663 } 2664 2665 .dataviews-view-list div[role=row] .dataviews-view-list__item-actions, 2666 .dataviews-view-list div[role=article] .dataviews-view-list__item-actions { 2667 display: flex; 2668 width: -moz-max-content; 2669 width: max-content; 2670 flex: 0 0 auto; 2671 gap: var(--wpds-dimension-gap-xs, 4px); 2672 white-space: nowrap; 2673 } 2674 2675 .dataviews-view-list div[role=row] .dataviews-view-list__item-actions .components-button, 2676 .dataviews-view-list div[role=article] .dataviews-view-list__item-actions .components-button { 2677 position: relative; 2678 z-index: 1; 2679 } 2680 2681 .dataviews-view-list div[role=row] .dataviews-view-list__item-actions > div, 2682 .dataviews-view-list div[role=article] .dataviews-view-list__item-actions > div { 2683 height: var(--wpds-dimension-size-sm, 24px); 2684 } 2685 2686 .dataviews-view-list div[role=row] .dataviews-view-list__item-actions > :not(:last-child), 2687 .dataviews-view-list div[role=article] .dataviews-view-list__item-actions > :not(:last-child) { 2688 flex: 0; 2689 overflow: hidden; 2690 width: 0; 2691 } 2692 2693 .dataviews-view-list div[role=row]:where(.is-selected, .is-hovered, :focus-within) .dataviews-view-list__item-actions > :not(:last-child), 2694 .dataviews-view-list div[role=article]:where(.is-selected, .is-hovered, :focus-within) .dataviews-view-list__item-actions > :not(:last-child) { 2695 flex-basis: min-content; 2696 width: auto; 2697 overflow: unset; 2698 } 2699 2700 @media (hover: none) { 2701 .dataviews-view-list div[role=row] .dataviews-view-list__item-actions > :not(:last-child), 2702 .dataviews-view-list div[role=article] .dataviews-view-list__item-actions > :not(:last-child) { 2703 flex-basis: min-content; 2704 width: auto; 2705 overflow: unset; 2706 } 2707 } 2708 .dataviews-view-list div[role=row].is-selected.is-selected, 2709 .dataviews-view-list div[role=article].is-selected.is-selected { 2710 border-top: 1px solid var(--wpds-color-stroke-surface-brand, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 40%, white)); 2711 } 2712 2713 .dataviews-view-list div[role=row].is-selected.is-selected + div[role=row], .dataviews-view-list div[role=row].is-selected.is-selected + div[role=article], 2714 .dataviews-view-list div[role=article].is-selected.is-selected + div[role=row], 2715 .dataviews-view-list div[role=article].is-selected.is-selected + div[role=article] { 2716 border-top: 1px solid var(--wpds-color-stroke-surface-brand, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 40%, white)); 2717 } 2718 2719 .dataviews-view-list div[role=row]:not(.is-selected):hover, .dataviews-view-list div[role=row]:not(.is-selected).is-hovered, .dataviews-view-list div[role=row]:not(.is-selected):focus-within, 2720 .dataviews-view-list div[role=article]:not(.is-selected):hover, 2721 .dataviews-view-list div[role=article]:not(.is-selected).is-hovered, 2722 .dataviews-view-list div[role=article]:not(.is-selected):focus-within { 2723 color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9)); 2724 background-color: var(--wpds-color-background-interactive-brand-weak, rgba(0, 0, 0, 0)); 2725 } 2726 2727 .dataviews-view-list div[role=row]:not(.is-selected):hover .dataviews-title-field, 2728 .dataviews-view-list div[role=row]:not(.is-selected):hover .dataviews-view-list__field, .dataviews-view-list div[role=row]:not(.is-selected).is-hovered .dataviews-title-field, 2729 .dataviews-view-list div[role=row]:not(.is-selected).is-hovered .dataviews-view-list__field, .dataviews-view-list div[role=row]:not(.is-selected):focus-within .dataviews-title-field, 2730 .dataviews-view-list div[role=row]:not(.is-selected):focus-within .dataviews-view-list__field, 2731 .dataviews-view-list div[role=article]:not(.is-selected):hover .dataviews-title-field, 2732 .dataviews-view-list div[role=article]:not(.is-selected):hover .dataviews-view-list__field, 2733 .dataviews-view-list div[role=article]:not(.is-selected).is-hovered .dataviews-title-field, 2734 .dataviews-view-list div[role=article]:not(.is-selected).is-hovered .dataviews-view-list__field, 2735 .dataviews-view-list div[role=article]:not(.is-selected):focus-within .dataviews-title-field, 2736 .dataviews-view-list div[role=article]:not(.is-selected):focus-within .dataviews-view-list__field { 2737 color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9)); 2738 } 2739 2740 .dataviews-view-list div[role=row].is-selected .dataviews-view-list__item-wrapper, 2741 .dataviews-view-list div[role=row].is-selected:focus-within .dataviews-view-list__item-wrapper, 2742 .dataviews-view-list div[role=article].is-selected .dataviews-view-list__item-wrapper, 2743 .dataviews-view-list div[role=article].is-selected:focus-within .dataviews-view-list__item-wrapper { 2744 background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white)); 2745 color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e); 2746 } 2747 2748 .dataviews-view-list div[role=row].is-selected .dataviews-view-list__item-wrapper .dataviews-title-field, 2749 .dataviews-view-list div[role=row].is-selected .dataviews-view-list__item-wrapper .dataviews-view-list__field, 2750 .dataviews-view-list div[role=row].is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-title-field, 2751 .dataviews-view-list div[role=row].is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-view-list__field, 2752 .dataviews-view-list div[role=article].is-selected .dataviews-view-list__item-wrapper .dataviews-title-field, 2753 .dataviews-view-list div[role=article].is-selected .dataviews-view-list__item-wrapper .dataviews-view-list__field, 2754 .dataviews-view-list div[role=article].is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-title-field, 2755 .dataviews-view-list div[role=article].is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-view-list__field { 2756 color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e); 2757 } 2758 2759 .dataviews-view-list .dataviews-view-list__item { 2760 position: absolute; 2761 z-index: 1; 2762 inset: 0; 2763 scroll-margin: var(--wpds-dimension-gap-sm, 8px) 0; 2764 -webkit-appearance: none; 2765 -moz-appearance: none; 2766 appearance: none; 2767 border: none; 2768 background: none; 2769 padding: 0; 2770 cursor: var(--wpds-cursor-control, pointer); 2771 } 2772 2773 .dataviews-view-list .dataviews-view-list__item:focus-visible { 2774 outline: none; 2775 } 2776 2777 .dataviews-view-list .dataviews-view-list__item:focus-visible::before { 2778 position: absolute; 2779 content: ""; 2780 inset: var(--wp-admin-border-width-focus); 2781 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)); 2782 border-radius: var(--wpds-border-radius-sm, 2px); 2783 outline: 2px solid transparent; 2784 } 2785 2786 .dataviews-view-list .dataviews-view-list__title-field { 2787 flex: 1; 2788 min-height: var(--wpds-dimension-size-sm, 24px); 2789 line-height: var(--wpds-typography-line-height-md, 24px); 2790 overflow: hidden; 2791 } 2792 2793 .dataviews-view-list .dataviews-view-list__title-field:has(a, button) { 2794 z-index: 1; 2795 } 2796 2797 .dataviews-view-list .dataviews-view-list__media-wrapper { 2798 width: 48px; 2799 height: 48px; 2800 overflow: hidden; 2801 position: relative; 2802 flex-shrink: 0; 2803 background-color: var(--wpds-color-background-surface-neutral-strong, #fff); 2804 border-radius: var(--wpds-border-radius-md, 4px); 2805 } 2806 2807 .dataviews-view-list .dataviews-view-list__media-wrapper img { 2808 width: 100%; 2809 height: 100%; 2810 -o-object-fit: cover; 2811 object-fit: cover; 2812 } 2813 2814 .dataviews-view-list .dataviews-view-list__media-wrapper::after { 2815 content: ""; 2816 position: absolute; 2817 top: 0; 2818 right: 0; 2819 width: 100%; 2820 height: 100%; 2821 box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) rgba(0, 0, 0, 0.1); 2822 border-radius: var(--wpds-border-radius-md, 4px); 2823 } 2824 2825 .dataviews-view-list .dataviews-view-list__field-wrapper { 2826 min-height: 48px; 2827 flex-grow: 1; 2828 min-width: 0; 2829 } 2830 2831 .dataviews-view-list .dataviews-view-list__field { 2832 color: var(--wpds-color-foreground-interactive-neutral-weak, #707070); 2833 } 2834 2835 .dataviews-view-list .dataviews-view-list__fields { 2836 display: flex; 2837 gap: var(--wpds-dimension-gap-md, 12px); 2838 row-gap: var(--wpds-dimension-gap-xs, 4px); 2839 flex-wrap: wrap; 2840 font-size: 12px; 2841 } 2842 2843 .dataviews-view-list .dataviews-view-list__fields:empty { 2844 display: none; 2845 } 2846 2847 .dataviews-view-list .dataviews-view-list__fields .dataviews-view-list__field:has(.dataviews-view-list__field-value:empty) { 2848 display: none; 2849 } 2850 2851 .dataviews-view-list .dataviews-view-list__fields .dataviews-view-list__field-value { 2852 min-height: var(--wpds-dimension-size-sm, 24px); 2853 line-height: var(--wpds-typography-line-height-sm, 20px); 2854 display: flex; 2855 align-items: center; 2856 } 2857 2858 .dataviews-view-list + .dataviews-pagination { 2859 justify-content: space-between; 2860 } 2861 2862 .dataviews-view-list.has-compact-density div[role=row] .dataviews-view-list__item-wrapper { 2863 padding: var(--wpds-dimension-padding-sm, 8px) var(--wpds-dimension-padding-2xl, 24px); 2864 } 2865 2866 .dataviews-view-list.has-compact-density div[role=row] .dataviews-view-list__title-field { 2867 min-height: var(--wpds-dimension-size-2xs, 16px); 2868 line-height: var(--wpds-typography-line-height-xs, 16px); 2869 } 2870 2871 .dataviews-view-list.has-compact-density div[role=row] .dataviews-view-list__media-wrapper { 2872 width: var(--wpds-dimension-size-md, 32px); 2873 height: var(--wpds-dimension-size-md, 32px); 2874 } 2875 2876 .dataviews-view-list.has-compact-density div[role=row] .dataviews-view-list__field-wrapper { 2877 min-height: var(--wpds-dimension-size-md, 32px); 2878 } 2879 2880 .dataviews-view-list.has-compact-density div[role=row] .dataviews-view-list__fields { 2881 gap: var(--wpds-dimension-gap-sm, 8px); 2882 row-gap: var(--wpds-dimension-gap-xs, 4px); 2883 } 2884 2885 .dataviews-view-list.has-compact-density div[role=row] .dataviews-view-list__fields .dataviews-view-list__field-value { 2886 min-height: var(--wpds-dimension-size-2xs, 16px); 2887 line-height: var(--wpds-typography-line-height-xs, 16px); 2888 } 2889 2890 .dataviews-view-list.has-comfortable-density div[role=row] .dataviews-view-list__item-wrapper { 2891 padding: var(--wpds-dimension-padding-2xl, 24px) var(--wpds-dimension-padding-2xl, 24px); 2892 } 2893 2894 .dataviews-view-list.has-comfortable-density div[role=row] .dataviews-view-list__title-field { 2895 min-height: var(--wpds-dimension-size-md, 32px); 2896 line-height: var(--wpds-typography-line-height-xl, 32px); 2897 } 2898 2899 .dataviews-view-list.has-comfortable-density div[role=row] .dataviews-view-list__media-wrapper { 2900 width: 64px; 2901 height: 64px; 2902 } 2903 2904 .dataviews-view-list.has-comfortable-density div[role=row] .dataviews-view-list__field-wrapper { 2905 min-height: 64px; 2906 } 2907 2908 .dataviews-view-list.has-comfortable-density div[role=row] .dataviews-view-list__fields { 2909 gap: var(--wpds-dimension-gap-lg, 16px); 2910 row-gap: var(--wpds-dimension-gap-sm, 8px); 2911 } 2912 2913 .dataviews-view-list.has-comfortable-density div[role=row] .dataviews-view-list__fields .dataviews-view-list__field-value { 2914 min-height: var(--wpds-dimension-size-md, 32px); 2915 line-height: var(--wpds-typography-line-height-md, 24px); 2916 } 2917 2918 .dataviews-view-list.is-refreshing { 2919 opacity: 0.5; 2920 pointer-events: none; 2921 } 2922 2923 @media not (prefers-reduced-motion) { 2924 .dataviews-view-list.is-refreshing { 2925 opacity: 1; 2926 animation: dataviews-pulse 1s ease-in-out infinite; 2927 } 2928 } 2929 .dataviews-view-list__group-header { 2930 font-size: var(--wpds-typography-font-size-lg, 15px); 2931 font-weight: var(--wpds-typography-font-weight-emphasis, 600); 2932 color: var(--wpds-color-foreground-content-neutral, #1e1e1e); 2933 margin: 0 0 var(--wpds-dimension-gap-sm, 8px) 0; 2934 padding: 0 var(--wpds-dimension-padding-2xl, 24px); 2935 } 2936 2937 .dataviews-view-table { 2938 width: 100%; 2939 text-indent: 0; 2940 border-color: inherit; 2941 border-collapse: collapse; 2942 position: relative; 2943 color: var(--wpds-color-foreground-content-neutral-weak, #707070); 2944 margin-bottom: auto; 2945 background-color: inherit; 2946 } 2947 2948 .dataviews-view-table th { 2949 text-align: right; 2950 color: var(--wpds-color-foreground-content-neutral, #1e1e1e); 2951 font-weight: normal; 2952 font-size: var(--wpds-typography-font-size-md, 13px); 2953 } 2954 2955 .dataviews-view-table td, 2956 .dataviews-view-table th { 2957 padding: var(--wpds-dimension-padding-md, 12px); 2958 } 2959 2960 .dataviews-view-table td.dataviews-view-table__actions-column, 2961 .dataviews-view-table th.dataviews-view-table__actions-column { 2962 text-align: left; 2963 } 2964 2965 .dataviews-view-table td.dataviews-view-table__actions-column--sticky, 2966 .dataviews-view-table th.dataviews-view-table__actions-column--sticky { 2967 position: sticky; 2968 left: 0; 2969 background-color: var(--wp-dataviews-color-background, var(--wpds-color-background-surface-neutral-strong, #fff)); 2970 } 2971 2972 .dataviews-view-table td.dataviews-view-table__actions-column--stuck::after, 2973 .dataviews-view-table th.dataviews-view-table__actions-column--stuck::after { 2974 display: block; 2975 content: ""; 2976 position: absolute; 2977 top: 0; 2978 bottom: 0; 2979 right: 0; 2980 width: 1px; 2981 background-color: var(--wpds-color-background-surface-neutral, #fcfcfc); 2982 } 2983 2984 .dataviews-view-table td.dataviews-view-table__checkbox-column, 2985 .dataviews-view-table th.dataviews-view-table__checkbox-column { 2986 padding-left: 0; 2987 } 2988 2989 .dataviews-view-table td.dataviews-view-table__checkbox-column .dataviews-view-table__cell-content-wrapper, 2990 .dataviews-view-table th.dataviews-view-table__checkbox-column .dataviews-view-table__cell-content-wrapper { 2991 max-width: auto; 2992 min-width: auto; 2993 } 2994 2995 .dataviews-view-table tr { 2996 border-top: 1px solid var(--wpds-color-stroke-surface-neutral-weak, #f0f0f0); 2997 background-color: inherit; 2998 } 2999 3000 .dataviews-view-table tr td:first-child, 3001 .dataviews-view-table tr th:first-child { 3002 padding-right: var(--wpds-dimension-padding-2xl, 24px); 3003 } 3004 3005 .dataviews-view-table tr td:last-child, 3006 .dataviews-view-table tr th:last-child { 3007 padding-left: var(--wpds-dimension-padding-2xl, 24px); 3008 } 3009 3010 .dataviews-view-table tr:last-child { 3011 border-bottom: 0; 3012 } 3013 3014 .dataviews-view-table tr .dataviews-item-actions .components-button:not(.dataviews-all-actions-button) { 3015 opacity: 0; 3016 } 3017 3018 @media (hover: none) { 3019 .dataviews-view-table tr .dataviews-item-actions .components-button:not(.dataviews-all-actions-button) { 3020 opacity: 1; 3021 } 3022 } 3023 .dataviews-view-table tr.is-selected { 3024 background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white)); 3025 color: var(--wpds-color-foreground-content-neutral, #1e1e1e); 3026 } 3027 3028 .dataviews-view-table tr.is-selected, .dataviews-view-table tr.is-selected + tr { 3029 border-top: 1px solid var(--wpds-color-stroke-surface-brand, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 40%, white)); 3030 } 3031 3032 .dataviews-view-table tr.is-selected .dataviews-view-table__actions-column--sticky { 3033 background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white)); 3034 } 3035 3036 .dataviews-view-table tr:focus-within .dataviews-item-actions .components-button:not(.dataviews-all-actions-button), .dataviews-view-table tr.is-hovered .dataviews-item-actions .components-button:not(.dataviews-all-actions-button), .dataviews-view-table tr:hover .dataviews-item-actions .components-button:not(.dataviews-all-actions-button) { 3037 opacity: 1; 3038 } 3039 3040 .dataviews-view-table.has-bulk-actions tr:focus-within .dataviews-view-table__actions-column--sticky, .dataviews-view-table.has-bulk-actions tr:hover .dataviews-view-table__actions-column--sticky { 3041 background-color: var(--wp-dataviews-color-background, var(--wpds-color-background-surface-neutral-strong, #fff)); 3042 } 3043 3044 .dataviews-view-table.has-bulk-actions tr.is-selected .dataviews-view-table__actions-column--sticky, .dataviews-view-table.has-bulk-actions tr.is-selected:hover .dataviews-view-table__actions-column--sticky { 3045 background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white)); 3046 } 3047 3048 .dataviews-view-table thead { 3049 position: sticky; 3050 inset-block-start: 0; 3051 z-index: 1; 3052 background-color: inherit; 3053 } 3054 3055 .dataviews-view-table thead.dataviews-view-table__thead--stuck::after { 3056 display: block; 3057 content: ""; 3058 position: absolute; 3059 bottom: 0; 3060 right: 0; 3061 left: 0; 3062 height: 1px; 3063 background-color: var(--wpds-color-stroke-surface-neutral-weak, #f0f0f0); 3064 } 3065 3066 .dataviews-view-table thead tr { 3067 border: 0; 3068 } 3069 3070 .dataviews-view-table thead th { 3071 background-color: inherit; 3072 padding-top: var(--wpds-dimension-padding-sm, 8px); 3073 padding-bottom: var(--wpds-dimension-padding-sm, 8px); 3074 font-size: 11px; 3075 text-transform: uppercase; 3076 font-weight: var(--wpds-typography-font-weight-emphasis, 600); 3077 } 3078 3079 .dataviews-view-table thead th:has(.dataviews-view-table-header-button) { 3080 padding-right: var(--wpds-dimension-padding-xs, 4px); 3081 padding-left: var(--wpds-dimension-padding-xs, 4px); 3082 } 3083 3084 .dataviews-view-table thead th:has(.dataviews-view-table-header-button) .dataviews-view-table-header-button { 3085 gap: var(--wpds-dimension-gap-xs, 4px); 3086 } 3087 3088 .dataviews-view-table thead th:has(.dataviews-view-table-header-button):first-child { 3089 padding-right: var(--wpds-dimension-padding-lg, 16px); 3090 } 3091 3092 .dataviews-view-table thead th:has(.dataviews-view-table-header-button):last-child { 3093 padding-left: var(--wpds-dimension-padding-lg, 16px); 3094 } 3095 3096 .dataviews-view-table tbody td { 3097 vertical-align: top; 3098 } 3099 3100 .dataviews-view-table tbody .dataviews-view-table__cell-content-wrapper { 3101 min-height: var(--wpds-dimension-size-md, 32px); 3102 display: flex; 3103 align-items: center; 3104 white-space: nowrap; 3105 } 3106 3107 .dataviews-view-table tbody .dataviews-view-table__cell-content-wrapper.dataviews-view-table__cell-align-end { 3108 justify-content: flex-end; 3109 font-variant-numeric: tabular-nums; 3110 } 3111 3112 .dataviews-view-table tbody .dataviews-view-table__cell-content-wrapper.dataviews-view-table__cell-align-center { 3113 justify-content: center; 3114 } 3115 3116 .dataviews-view-table tbody .components-v-stack > .dataviews-view-table__cell-content-wrapper:not(:first-child) { 3117 min-height: 0; 3118 } 3119 3120 .dataviews-view-table .dataviews-view-table-header-button { 3121 padding: var(--wpds-dimension-padding-xs, 4px) var(--wpds-dimension-padding-sm, 8px); 3122 font-size: 11px; 3123 text-transform: uppercase; 3124 font-weight: var(--wpds-typography-font-weight-emphasis, 600); 3125 } 3126 3127 .dataviews-view-table .dataviews-view-table-header-button:not(:hover) { 3128 color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e); 3129 } 3130 3131 .dataviews-view-table .dataviews-view-table-header-button span { 3132 speak: none; 3133 } 3134 3135 .dataviews-view-table .dataviews-view-table-header-button span:empty { 3136 display: none; 3137 } 3138 3139 .dataviews-view-table .dataviews-view-table-header { 3140 padding-right: var(--wpds-dimension-padding-xs, 4px); 3141 } 3142 3143 .dataviews-view-table .dataviews-view-table__actions-column { 3144 width: auto; 3145 white-space: nowrap; 3146 } 3147 3148 .dataviews-view-table.has-compact-density thead th:has(.dataviews-view-table-header-button):not(:first-child) { 3149 padding-right: 0; 3150 } 3151 3152 .dataviews-view-table.has-compact-density thead th:has(.dataviews-view-table-header-button):not(:last-child) { 3153 padding-left: 0; 3154 } 3155 3156 .dataviews-view-table.has-compact-density td, 3157 .dataviews-view-table.has-compact-density th { 3158 padding: var(--wpds-dimension-padding-xs, 4px) var(--wpds-dimension-padding-sm, 8px); 3159 } 3160 3161 .dataviews-view-table.has-comfortable-density td, 3162 .dataviews-view-table.has-comfortable-density th { 3163 padding: var(--wpds-dimension-padding-lg, 16px) var(--wpds-dimension-padding-md, 12px); 3164 } 3165 3166 .dataviews-view-table.has-compact-density td.dataviews-view-table__checkbox-column, 3167 .dataviews-view-table.has-compact-density th.dataviews-view-table__checkbox-column, .dataviews-view-table.has-comfortable-density td.dataviews-view-table__checkbox-column, 3168 .dataviews-view-table.has-comfortable-density th.dataviews-view-table__checkbox-column { 3169 padding-left: 0; 3170 } 3171 3172 .dataviews-view-table-selection-checkbox { 3173 --checkbox-input-size: 24px; 3174 } 3175 3176 @media (min-width: 600px) { 3177 .dataviews-view-table-selection-checkbox { 3178 --checkbox-input-size: 16px; 3179 } 3180 } 3181 .dataviews-column-primary__media { 3182 max-width: 60px; 3183 min-width: var(--wpds-dimension-size-md, 32px); 3184 min-height: var(--wpds-dimension-size-md, 32px); 3185 overflow: hidden; 3186 position: relative; 3187 flex-shrink: 0; 3188 background-color: var(--wpds-color-background-surface-neutral-strong, #fff); 3189 border-radius: var(--wpds-border-radius-md, 4px); 3190 } 3191 3192 .dataviews-column-primary__media img { 3193 width: var(--wpds-dimension-size-md, 32px); 3194 height: var(--wpds-dimension-size-md, 32px); 3195 -o-object-fit: cover; 3196 object-fit: cover; 3197 } 3198 3199 .dataviews-column-primary__media::after { 3200 content: ""; 3201 position: absolute; 3202 top: 0; 3203 right: 0; 3204 width: 100%; 3205 height: 100%; 3206 box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) rgba(0, 0, 0, 0.1); 3207 border-radius: var(--wpds-border-radius-md, 4px); 3208 } 3209 3210 .dataviews-view-table__cell-content-wrapper:not(.dataviews-column-primary__media), 3211 .dataviews-view-table__primary-column-content:not(.dataviews-column-primary__media) { 3212 min-width: 15ch; 3213 max-width: 80ch; 3214 } 3215 3216 .dataviews-view-table__group-header-row .dataviews-view-table__group-header-cell { 3217 font-weight: var(--wpds-typography-font-weight-emphasis, 600); 3218 padding: var(--wpds-dimension-padding-md, 12px) var(--wpds-dimension-padding-2xl, 24px); 3219 color: var(--wpds-color-foreground-content-neutral, #1e1e1e); 3220 } 3221 3222 /* Column width intents via colgroup: make non-primary columns shrink-to-fit */ 3223 .dataviews-view-table col[class^=dataviews-view-table__col-]:not(.dataviews-view-table__col-first-data):not(.dataviews-view-table__col-expand) { 3224 width: 1%; 3225 } 3226 3227 .dataviews-view-table.is-refreshing { 3228 opacity: 0.5; 3229 pointer-events: none; 3230 } 3231 3232 @media not (prefers-reduced-motion) { 3233 .dataviews-view-table.is-refreshing { 3234 opacity: 1; 3235 animation: dataviews-pulse 1s ease-in-out infinite; 3236 } 3237 } 3238 .dataviews-view-picker-grid.has-compact-density .dataviews-view-grid-items { 3239 gap: var(--wpds-dimension-gap-lg, 16px); 3240 } 3241 3242 .dataviews-view-picker-grid.has-comfortable-density .dataviews-view-grid-items { 3243 gap: var(--wpds-dimension-gap-2xl, 32px); 3244 } 3245 3246 .dataviews-view-picker-grid .dataviews-view-picker-grid__card { 3247 height: 100%; 3248 justify-content: flex-start; 3249 position: relative; 3250 isolation: isolate; 3251 } 3252 3253 .dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__title-actions { 3254 padding: var(--wpds-dimension-padding-sm, 8px) 0 var(--wpds-dimension-padding-xs, 4px); 3255 } 3256 3257 .dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__title-field { 3258 min-height: var(--wpds-dimension-size-sm, 24px); 3259 overflow: hidden; 3260 align-content: center; 3261 text-align: start; 3262 } 3263 3264 .dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__title-field--clickable { 3265 width: -moz-fit-content; 3266 width: fit-content; 3267 } 3268 3269 .dataviews-view-picker-grid .dataviews-view-picker-grid__card.is-selected .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field .dataviews-view-picker-grid__field-value { 3270 color: var(--wpds-color-foreground-content-neutral, #1e1e1e); 3271 } 3272 3273 .dataviews-view-picker-grid .dataviews-view-picker-grid__card.is-selected .dataviews-view-picker-grid__media::after { 3274 box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) var(--wpds-color-stroke-interactive-brand, var(--wp-admin-theme-color, #3858e9)), inset 0 0 0 var(--wpds-border-width-sm, 2px) var(--wpds-color-background-surface-neutral-strong, #fff); 3275 } 3276 3277 .dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__media:focus::after { 3278 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)); 3279 } 3280 3281 .dataviews-view-picker-grid:focus-visible[aria-activedescendant] { 3282 outline: none; 3283 } 3284 3285 .dataviews-view-picker-grid:focus-visible [data-active-item=true] { 3286 outline: 2px solid var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)); 3287 } 3288 3289 .dataviews-view-picker-grid .dataviews-selection-checkbox { 3290 top: var(--wpds-dimension-padding-sm, 8px) !important; 3291 } 3292 3293 .dataviews-view-picker-grid .dataviews-selection-checkbox input { 3294 pointer-events: none; 3295 } 3296 3297 .dataviews-view-picker-grid .dataviews-view-picker-grid__media { 3298 width: 100%; 3299 aspect-ratio: 1/1; 3300 min-height: 0; 3301 background-color: var(--wpds-color-background-surface-neutral-strong, #fff); 3302 border-radius: var(--wpds-border-radius-md, 4px); 3303 position: relative; 3304 } 3305 3306 .dataviews-view-picker-grid .dataviews-view-picker-grid__media img { 3307 -o-object-fit: cover; 3308 object-fit: cover; 3309 width: 100%; 3310 height: 100%; 3311 } 3312 3313 .dataviews-view-picker-grid .dataviews-view-picker-grid__media::after { 3314 content: ""; 3315 position: absolute; 3316 top: 0; 3317 right: 0; 3318 width: 100%; 3319 height: 100%; 3320 box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) rgba(0, 0, 0, 0.1); 3321 border-radius: var(--wpds-border-radius-md, 4px); 3322 pointer-events: none; 3323 } 3324 3325 .dataviews-view-picker-grid .dataviews-view-picker-grid__fields { 3326 position: relative; 3327 font-size: 12px; 3328 line-height: 16px; 3329 } 3330 3331 .dataviews-view-picker-grid .dataviews-view-picker-grid__fields:not(:empty) { 3332 padding: 0 0 var(--wpds-dimension-padding-md, 12px); 3333 } 3334 3335 .dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field-value:not(:empty) { 3336 min-height: var(--wpds-dimension-size-sm, 24px); 3337 line-height: var(--wpds-typography-line-height-sm, 20px); 3338 padding-top: calc((var(--wpds-dimension-size-sm, 24px) - var(--wpds-typography-line-height-sm, 20px)) / 2); 3339 } 3340 3341 .dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field { 3342 min-height: var(--wpds-dimension-size-sm, 24px); 3343 align-items: center; 3344 } 3345 3346 .dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field .dataviews-view-picker-grid__field-name { 3347 width: 35%; 3348 color: var(--wpds-color-foreground-content-neutral-weak, #707070); 3349 overflow: hidden; 3350 text-overflow: ellipsis; 3351 white-space: nowrap; 3352 } 3353 3354 .dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field .dataviews-view-picker-grid__field-value { 3355 width: 65%; 3356 overflow: hidden; 3357 text-overflow: ellipsis; 3358 white-space: nowrap; 3359 } 3360 3361 .dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field:not(:has(.dataviews-view-picker-grid__field-value:not(:empty))) { 3362 display: none; 3363 } 3364 3365 .dataviews-view-picker-grid .dataviews-view-picker-grid__badge-fields:not(:empty) { 3366 padding-bottom: var(--wpds-dimension-padding-md, 12px); 3367 } 3368 3369 .dataviews-view-picker-grid__field-value:empty, 3370 .dataviews-view-picker-grid__field:empty { 3371 display: none; 3372 } 3373 3374 .dataviews-view-picker-grid__card .dataviews-selection-checkbox { 3375 position: absolute; 3376 top: -9999em; 3377 right: var(--wpds-dimension-padding-sm, 8px); 3378 z-index: 1; 3379 } 3380 3381 @media (hover: none) { 3382 .dataviews-view-picker-grid__card .dataviews-selection-checkbox { 3383 top: var(--wpds-dimension-padding-sm, 8px); 3384 } 3385 } 3386 .dataviews-view-picker-grid__card:hover .dataviews-selection-checkbox, 3387 .dataviews-view-picker-grid__card:focus-within .dataviews-selection-checkbox, 3388 .dataviews-view-picker-grid__card.is-selected .dataviews-selection-checkbox { 3389 top: var(--wpds-dimension-padding-sm, 8px); 3390 } 3391 3392 .dataviews-view-picker-grid__media--clickable { 3393 cursor: var(--wpds-cursor-control, pointer); 3394 } 3395 3396 .dataviews-view-picker-grid-group__header { 3397 font-size: var(--wpds-typography-font-size-lg, 15px); 3398 font-weight: var(--wpds-typography-font-weight-emphasis, 600); 3399 color: var(--wpds-color-foreground-content-neutral, #1e1e1e); 3400 margin: 0 0 var(--wpds-dimension-gap-sm, 8px) 0; 3401 padding: 0 48px; 3402 } 3403 3404 .dataviews-view-picker-table { 3405 background-color: inherit; 3406 } 3407 3408 .dataviews-view-picker-table .dataviews-view-table__checkbox-column { 3409 width: 48px; 3410 } 3411 3412 .dataviews-view-picker-table tbody:focus-visible[aria-activedescendant] { 3413 outline: none; 3414 } 3415 3416 .dataviews-view-picker-table tbody:focus-visible [data-active-item=true] { 3417 outline: 2px solid var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)); 3418 } 3419 3420 .dataviews-view-picker-table .dataviews-selection-checkbox .components-checkbox-control__input.components-checkbox-control__input { 3421 pointer-events: none; 3422 opacity: 1; 3423 } 3424 3425 .dataviews-view-picker-table .dataviews-view-table__row { 3426 cursor: var(--wpds-cursor-control, pointer); 3427 } 3428 3429 .dataviews-view-picker-table .dataviews-view-table__row.is-selected { 3430 background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white)); 3431 } 3432 3433 .dataviews-view-picker-table .dataviews-view-table__row.is-hovered { 3434 background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white)); 3435 } 3436 3437 .dataviews-view-picker-table .dataviews-view-table__row.is-selected.is-hovered { 3438 background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white)); 3439 } 3440 3441 .dataviews-view-activity { 3442 margin: 0 0 auto; 3443 padding: 0 var(--wpds-dimension-padding-2xl, 24px); 3444 } 3445 3446 .dataviews-view-activity .dataviews-view-activity__group-header { 3447 font-size: var(--wpds-typography-font-size-lg, 15px); 3448 font-weight: var(--wpds-typography-font-weight-emphasis, 600); 3449 color: var(--wpds-color-foreground-content-neutral-weak, #707070); 3450 margin: 0 0 var(--wpds-dimension-gap-sm, 8px) 0; 3451 padding: 0; 3452 } 3453 3454 .dataviews-view-activity .dataviews-view-activity__item-actions { 3455 min-width: var(--wpds-dimension-size-sm, 24px); 3456 } 3457 3458 .dataviews-view-activity .dataviews-view-activity__item-content { 3459 flex-grow: 1; 3460 } 3461 3462 .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-title, 3463 .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-description, 3464 .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-fields { 3465 min-height: var(--wpds-dimension-size-2xs, 16px); 3466 } 3467 3468 .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-title { 3469 position: relative; 3470 display: flex; 3471 align-items: center; 3472 flex: 1; 3473 overflow: hidden; 3474 } 3475 3476 .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-title--clickable { 3477 cursor: var(--wpds-cursor-control, pointer); 3478 } 3479 3480 .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-title--clickable:focus-visible { 3481 outline: var(--wp-admin-border-width-focus) solid var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)); 3482 outline-offset: var(--wp-admin-border-width-focus); 3483 border-radius: var(--wpds-border-radius-sm, 2px); 3484 } 3485 3486 .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__primary-actions { 3487 display: flex; 3488 width: -moz-max-content; 3489 width: max-content; 3490 flex: 0 0 auto; 3491 } 3492 3493 .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__primary-actions .components-button { 3494 position: relative; 3495 z-index: 1; 3496 } 3497 3498 .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-fields { 3499 color: var(--wpds-color-foreground-content-neutral-weak, #707070); 3500 display: flex; 3501 gap: var(--wpds-dimension-gap-md, 12px); 3502 row-gap: var(--wpds-dimension-gap-xs, 4px); 3503 flex-wrap: wrap; 3504 } 3505 3506 .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-fields:empty { 3507 display: none; 3508 } 3509 3510 .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-fields .dataviews-view-activity__item-field:has(.dataviews-view-activity__item-field-value:empty) { 3511 display: none; 3512 } 3513 3514 .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-fields .dataviews-view-activity__item-field-value { 3515 display: flex; 3516 align-items: center; 3517 } 3518 3519 .dataviews-view-activity .dataviews-view-activity__item-type { 3520 align-self: stretch; 3521 flex-shrink: 0; 3522 } 3523 3524 .dataviews-view-activity .dataviews-view-activity__item-type::after { 3525 content: ""; 3526 flex: 1 1 auto; 3527 width: 1px; 3528 margin: 0 auto; 3529 background-color: var(--wpds-color-stroke-surface-neutral, #dbdbdb); 3530 } 3531 3532 .dataviews-view-activity .dataviews-view-activity__item-type::before { 3533 content: ""; 3534 flex: 0 0 auto; 3535 width: 1px; 3536 margin: 0 auto; 3537 background-color: var(--wpds-color-stroke-surface-neutral, #dbdbdb); 3538 } 3539 3540 .dataviews-view-activity .dataviews-view-activity__item.is-compact .dataviews-view-activity__item-type { 3541 width: var(--wpds-dimension-padding-md, 12px); 3542 } 3543 3544 .dataviews-view-activity .dataviews-view-activity__item.is-compact .dataviews-view-activity__item-type::before { 3545 height: var(--wpds-dimension-size-3xs, 12px); 3546 } 3547 3548 .dataviews-view-activity .dataviews-view-activity__item.is-compact .dataviews-view-activity__item-type-icon { 3549 width: calc(var(--wpds-dimension-size-3xs, 12px) - 1px); 3550 height: calc(var(--wpds-dimension-size-3xs, 12px) - 1px); 3551 } 3552 3553 .dataviews-view-activity .dataviews-view-activity__item.is-compact .dataviews-view-activity__item-content { 3554 margin: var(--wpds-dimension-gap-md, 12px) 0; 3555 } 3556 3557 .dataviews-view-activity .dataviews-view-activity__item.is-balanced .dataviews-view-activity__item-type { 3558 width: var(--wpds-dimension-size-sm, 24px); 3559 } 3560 3561 .dataviews-view-activity .dataviews-view-activity__item.is-balanced .dataviews-view-activity__item-type::before { 3562 height: var(--wpds-dimension-size-3xs, 12px); 3563 } 3564 3565 .dataviews-view-activity .dataviews-view-activity__item.is-balanced .dataviews-view-activity__item-type-icon { 3566 width: calc(var(--wpds-dimension-size-sm, 24px) + 1px); 3567 height: calc(var(--wpds-dimension-size-sm, 24px) + 1px); 3568 } 3569 3570 .dataviews-view-activity .dataviews-view-activity__item.is-balanced .dataviews-view-activity__item-content { 3571 margin: var(--wpds-dimension-gap-md, 12px) 0; 3572 padding-top: var(--wpds-dimension-padding-sm, 8px); 3573 } 3574 3575 .dataviews-view-activity .dataviews-view-activity__item.is-comfortable .dataviews-view-activity__item-type { 3576 width: var(--wpds-dimension-size-md, 32px); 3577 } 3578 3579 .dataviews-view-activity .dataviews-view-activity__item.is-comfortable .dataviews-view-activity__item-type::before { 3580 height: var(--wpds-dimension-size-4xs, 8px); 3581 } 3582 3583 .dataviews-view-activity .dataviews-view-activity__item.is-comfortable .dataviews-view-activity__item-type-icon { 3584 width: calc(var(--wpds-dimension-size-md, 32px) + 1px); 3585 height: calc(var(--wpds-dimension-size-md, 32px) + 1px); 3586 } 3587 3588 .dataviews-view-activity .dataviews-view-activity__item.is-comfortable .dataviews-view-activity__item-content { 3589 margin: var(--wpds-dimension-gap-sm, 8px) 0 var(--wpds-dimension-gap-lg, 16px); 3590 padding-top: var(--wpds-dimension-padding-md, 12px); 3591 } 3592 3593 .dataviews-view-activity .dataviews-view-activity__item.is-comfortable .dataviews-view-activity__item-bullet, .dataviews-view-activity .dataviews-view-activity__item.is-balanced .dataviews-view-activity__item-bullet { 3594 width: calc(var(--wpds-dimension-size-4xs, 8px) + 1px); 3595 height: calc(var(--wpds-dimension-size-4xs, 8px) + 1px); 3596 position: relative; 3597 top: 50%; 3598 transform: translateY(-50%); 3599 } 3600 3601 .dataviews-view-activity .dataviews-view-activity__item:first-child .dataviews-view-activity__item-type::before { 3602 visibility: hidden; 3603 } 3604 3605 .dataviews-view-activity .dataviews-view-activity__group:last-of-type > .dataviews-view-activity__item:last-of-type .dataviews-view-activity__item-type::after, .dataviews-view-activity > .dataviews-view-activity__item:last-child .dataviews-view-activity__item-type::after { 3606 background: linear-gradient(to bottom, var(--wpds-color-stroke-surface-neutral, #dbdbdb) 0%, color-mix(in srgb, var(--wpds-color-stroke-surface-neutral, #dbdbdb) 20%, transparent) 60%, transparent 100%); 3607 } 3608 3609 .dataviews-view-activity .dataviews-view-activity__item-type-icon { 3610 overflow: hidden; 3611 flex-shrink: 0; 3612 background-color: var(--wpds-color-background-surface-neutral-strong, #fff); 3613 } 3614 3615 .dataviews-view-activity .dataviews-view-activity__item-type-icon img, 3616 .dataviews-view-activity .dataviews-view-activity__item-type-icon svg, 3617 .dataviews-view-activity .dataviews-view-activity__item-type-icon .dataviews-view-activity__item-bullet { 3618 display: block; 3619 width: 100%; 3620 height: 100%; 3621 margin: 0 auto; 3622 -o-object-fit: cover; 3623 object-fit: cover; 3624 border-radius: 50%; 3625 box-sizing: border-box; 3626 box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) var(--wpds-color-stroke-surface-neutral, #dbdbdb); 3627 } 3628 3629 .dataviews-view-activity .dataviews-view-activity__item-type-icon svg { 3630 padding: var(--wpds-dimension-padding-xs, 4px); 3631 } 3632 3633 .dataviews-view-activity .dataviews-view-activity__item-type-icon .dataviews-view-activity__item-bullet { 3634 content: ""; 3635 background-color: var(--wpds-color-stroke-surface-neutral, #dbdbdb); 3636 } 3637 3638 .dataviews-view-activity.is-refreshing { 3639 opacity: 0.5; 3640 pointer-events: none; 3641 } 3642 3643 @media not (prefers-reduced-motion) { 3644 .dataviews-view-activity.is-refreshing { 3645 opacity: 1; 3646 animation: dataviews-pulse 1s ease-in-out infinite; 3647 } 3648 } 3649 .dataviews-view-activity + .dataviews-pagination { 3650 justify-content: space-between; 3651 } 3652 3653 .dataviews-view-picker-activity { 3654 margin: 0; 3655 padding: 0; 3656 flex-grow: 1; 3657 } 3658 3659 .dataviews-view-picker-activity:focus-visible[aria-activedescendant] { 3660 outline: none; 3661 } 3662 3663 .dataviews-view-picker-activity:focus-visible .dataviews-view-picker-activity__item[data-active-item=true] { 3664 outline: 2px solid var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)); 3665 outline-offset: -2px; 3666 } 3667 3668 .dataviews-view-picker-activity .dataviews-view-picker-activity__item { 3669 cursor: var(--wpds-cursor-control, pointer); 3670 border-radius: var(--wpds-border-radius-sm, 2px); 3671 padding-inline: var(--wpds-dimension-padding-2xl, 24px); 3672 transition: background-color 0.1s ease; 3673 } 3674 3675 .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-selected, .dataviews-view-picker-activity .dataviews-view-picker-activity__item:hover { 3676 background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white)); 3677 } 3678 3679 .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-selected { 3680 outline: 3px solid transparent; 3681 outline-offset: -2px; 3682 } 3683 3684 .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-compact .dataviews-view-picker-activity__item-type { 3685 width: var(--wpds-dimension-padding-md, 12px); 3686 } 3687 3688 .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-compact .dataviews-view-picker-activity__item-type::before { 3689 height: var(--wpds-dimension-size-3xs, 12px); 3690 } 3691 3692 .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-compact .dataviews-view-picker-activity__item-type-icon { 3693 width: calc(var(--wpds-dimension-size-3xs, 12px) - 1px); 3694 height: calc(var(--wpds-dimension-size-3xs, 12px) - 1px); 3695 } 3696 3697 .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-compact .dataviews-view-picker-activity__item-content { 3698 margin: var(--wpds-dimension-gap-md, 12px) 0; 3699 } 3700 3701 .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-balanced .dataviews-view-picker-activity__item-type { 3702 width: var(--wpds-dimension-size-sm, 24px); 3703 } 3704 3705 .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-balanced .dataviews-view-picker-activity__item-type::before { 3706 height: var(--wpds-dimension-size-3xs, 12px); 3707 } 3708 3709 .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-balanced .dataviews-view-picker-activity__item-type-icon { 3710 width: calc(var(--wpds-dimension-size-sm, 24px) + 1px); 3711 height: calc(var(--wpds-dimension-size-sm, 24px) + 1px); 3712 } 3713 3714 .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-balanced .dataviews-view-picker-activity__item-content { 3715 margin: var(--wpds-dimension-gap-md, 12px) 0; 3716 padding-top: var(--wpds-dimension-padding-sm, 8px); 3717 } 3718 3719 .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-comfortable .dataviews-view-picker-activity__item-type { 3720 width: var(--wpds-dimension-size-md, 32px); 3721 } 3722 3723 .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-comfortable .dataviews-view-picker-activity__item-type::before { 3724 height: var(--wpds-dimension-size-4xs, 8px); 3725 } 3726 3727 .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-comfortable .dataviews-view-picker-activity__item-type-icon { 3728 width: calc(var(--wpds-dimension-size-md, 32px) + 1px); 3729 height: calc(var(--wpds-dimension-size-md, 32px) + 1px); 3730 } 3731 3732 .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-comfortable .dataviews-view-picker-activity__item-content { 3733 margin: var(--wpds-dimension-gap-sm, 8px) 0 var(--wpds-dimension-gap-lg, 16px); 3734 padding-top: var(--wpds-dimension-padding-md, 12px); 3735 } 3736 3737 .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-comfortable .dataviews-view-picker-activity__item-bullet, .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-balanced .dataviews-view-picker-activity__item-bullet { 3738 width: calc(var(--wpds-dimension-size-4xs, 8px) + 1px); 3739 height: calc(var(--wpds-dimension-size-4xs, 8px) + 1px); 3740 position: relative; 3741 top: 50%; 3742 transform: translateY(-50%); 3743 } 3744 3745 .dataviews-view-picker-activity .dataviews-view-picker-activity__item-content { 3746 flex-grow: 1; 3747 } 3748 3749 .dataviews-view-picker-activity .dataviews-view-picker-activity__item-content .dataviews-view-picker-activity__item-title, 3750 .dataviews-view-picker-activity .dataviews-view-picker-activity__item-content .dataviews-view-picker-activity__item-description, 3751 .dataviews-view-picker-activity .dataviews-view-picker-activity__item-content .dataviews-view-picker-activity__item-fields { 3752 min-height: var(--wpds-dimension-size-2xs, 16px); 3753 } 3754 3755 .dataviews-view-picker-activity .dataviews-view-picker-activity__item-content .dataviews-view-picker-activity__item-title { 3756 position: relative; 3757 display: flex; 3758 align-items: center; 3759 flex: 1; 3760 overflow: hidden; 3761 } 3762 3763 .dataviews-view-picker-activity .dataviews-view-picker-activity__item-content .dataviews-view-picker-activity__item-description:empty { 3764 display: none; 3765 } 3766 3767 .dataviews-view-picker-activity .dataviews-view-picker-activity__item-content .dataviews-view-picker-activity__item-fields { 3768 color: var(--wpds-color-foreground-content-neutral-weak, #707070); 3769 display: flex; 3770 gap: var(--wpds-dimension-gap-md, 12px); 3771 row-gap: var(--wpds-dimension-gap-xs, 4px); 3772 flex-wrap: wrap; 3773 } 3774 3775 .dataviews-view-picker-activity .dataviews-view-picker-activity__item-content .dataviews-view-picker-activity__item-fields:empty { 3776 display: none; 3777 } 3778 3779 .dataviews-view-picker-activity .dataviews-view-picker-activity__item-content .dataviews-view-picker-activity__item-fields .dataviews-view-picker-activity__item-field:has(.dataviews-view-picker-activity__item-field-value:empty) { 3780 display: none; 3781 } 3782 3783 .dataviews-view-picker-activity .dataviews-view-picker-activity__item-content .dataviews-view-picker-activity__item-fields .dataviews-view-picker-activity__item-field-value { 3784 display: flex; 3785 align-items: center; 3786 } 3787 3788 .dataviews-view-picker-activity .dataviews-view-picker-activity__item-type { 3789 align-self: stretch; 3790 flex-shrink: 0; 3791 } 3792 3793 .dataviews-view-picker-activity .dataviews-view-picker-activity__item-type::after { 3794 content: ""; 3795 flex: 1 1 auto; 3796 width: 1px; 3797 margin: 0 auto; 3798 background-color: var(--wpds-color-stroke-surface-neutral, #dbdbdb); 3799 } 3800 3801 .dataviews-view-picker-activity .dataviews-view-picker-activity__item-type::before { 3802 content: ""; 3803 flex: 0 0 auto; 3804 width: 1px; 3805 margin: 0 auto; 3806 background-color: var(--wpds-color-stroke-surface-neutral, #dbdbdb); 3807 } 3808 3809 .dataviews-view-picker-activity .dataviews-view-picker-activity__item:first-child .dataviews-view-picker-activity__item-type::before { 3810 visibility: hidden; 3811 } 3812 3813 .dataviews-view-picker-activity .dataviews-view-picker-activity-group:last-of-type > .dataviews-view-picker-activity__item:last-of-type .dataviews-view-picker-activity__item-type::after, .dataviews-view-picker-activity > .dataviews-view-picker-activity__item:last-child .dataviews-view-picker-activity__item-type::after { 3814 background: linear-gradient(to bottom, var(--wpds-color-stroke-surface-neutral, #dbdbdb) 0%, color-mix(in srgb, var(--wpds-color-stroke-surface-neutral, #dbdbdb) 20%, transparent) 60%, transparent 100%); 3815 } 3816 3817 .dataviews-view-picker-activity .dataviews-view-picker-activity-group__header { 3818 font-size: var(--wpds-typography-font-size-lg, 15px); 3819 font-weight: var(--wpds-typography-font-weight-emphasis, 600); 3820 color: var(--wpds-color-foreground-content-neutral-weak, #707070); 3821 margin: 0 0 var(--wpds-dimension-gap-sm, 8px) 0; 3822 padding: 0; 3823 padding-inline-start: var(--wpds-dimension-padding-2xl, 24px); 3824 } 3825 3826 .dataviews-view-picker-activity .dataviews-view-picker-activity__item-type-icon { 3827 overflow: hidden; 3828 flex-shrink: 0; 3829 background-color: transparent; 3830 } 3831 3832 .dataviews-view-picker-activity .dataviews-view-picker-activity__item-type-icon img, 3833 .dataviews-view-picker-activity .dataviews-view-picker-activity__item-type-icon svg, 3834 .dataviews-view-picker-activity .dataviews-view-picker-activity__item-type-icon .dataviews-view-picker-activity__item-bullet { 3835 display: block; 3836 width: 100%; 3837 height: 100%; 3838 margin: 0 auto; 3839 -o-object-fit: cover; 3840 object-fit: cover; 3841 border-radius: 50%; 3842 box-sizing: border-box; 3843 box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) var(--wpds-color-stroke-surface-neutral, #dbdbdb); 3844 } 3845 3846 .dataviews-view-picker-activity .dataviews-view-picker-activity__item-type-icon svg { 3847 padding: var(--wpds-dimension-padding-xs, 4px); 3848 } 3849 3850 .dataviews-view-picker-activity .dataviews-view-picker-activity__item-type-icon .dataviews-view-picker-activity__item-bullet { 3851 background-color: var(--wpds-color-stroke-surface-neutral, #dbdbdb); 3852 } 3853 3854 .dataviews-picker-footer__bulk-selection { 3855 align-self: flex-start; 3856 height: var(--wpds-dimension-size-md, 32px); 3857 } 3858 3859 .dataviews-picker-footer__actions { 3860 align-self: flex-end; 3861 } 3862 3863 .dataviews-controls__richtext [data-rich-text-placeholder]::after { 3864 content: attr(data-rich-text-placeholder); 3865 color: color-mix(in srgb, currentColor, transparent 38%); 3866 } 3867 3868 .dataviews-controls__datetime { 3869 border: none; 3870 padding: 0; 3871 } 3872 3873 .dataviews-controls__relative-date-number, 3874 .dataviews-controls__relative-date-unit { 3875 flex: 1 1 50%; 3876 } 3877 3878 .dataviews-controls__date input[type=date]::-webkit-inner-spin-button, 3879 .dataviews-controls__date input[type=date]::-webkit-calendar-picker-indicator { 3880 display: none; 3881 -webkit-appearance: none; 3882 } 3883 3884 .dataviews-controls__date-range-inputs > * { 3885 min-width: 0; 3886 } 3887 3888 .dataviews-controls__color-picker-dropdown { 3889 display: flex; 3890 } 3891 3892 .dataviews-controls__date-preset { 3893 border: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb); 3894 } 3895 3896 .dataviews-controls__date-preset:active { 3897 background-color: var(--wpds-color-background-interactive-neutral-strong-active, #1e1e1e); 3898 } 3899 3900 .dataforms-layouts-panel__field-trigger { 3901 position: relative; 3902 color: inherit; 3903 display: flex; 3904 width: 100%; 3905 min-height: var(--wpds-dimension-size-sm, 24px); 3906 cursor: var(--wpds-cursor-control, pointer); 3907 align-items: flex-start; 3908 border-radius: var(--wpds-border-radius-sm, 2px); 3909 isolation: isolate; 3910 } 3911 3912 .dataforms-layouts-panel__field-trigger--label-side { 3913 flex-direction: row; 3914 gap: var(--wpds-dimension-gap-sm, 8px); 3915 } 3916 3917 .dataforms-layouts-panel__field-trigger--label-top { 3918 display: grid; 3919 grid-template-columns: 1fr auto; 3920 } 3921 3922 .dataforms-layouts-panel__field-trigger--label-none { 3923 align-items: center; 3924 } 3925 3926 .dataforms-layouts-panel__field-trigger:not(.is-disabled):hover { 3927 color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9)); 3928 } 3929 3930 .dataforms-layouts-panel__field-trigger:not(.is-disabled):hover .dataforms-layouts-panel__field-trigger-icon { 3931 opacity: 1; 3932 } 3933 3934 .dataforms-layouts-panel__field-trigger:not(.is-disabled):hover .dataforms-layouts-panel__field-label { 3935 color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9)); 3936 } 3937 3938 .dataforms-layouts-panel__field-trigger.is-disabled { 3939 cursor: default; 3940 } 3941 3942 .dataforms-layouts-panel__field-trigger.is-disabled .dataforms-layouts-panel__field-control { 3943 color: var(--wpds-color-foreground-content-neutral-weak, #707070); 3944 font-weight: var(--wpds-typography-font-weight-default, 400); 3945 } 3946 3947 .dataforms-layouts-panel__field-trigger--edit-always .dataforms-layouts-panel__field-trigger-icon { 3948 opacity: 1; 3949 fill: currentColor; 3950 } 3951 3952 .dataforms-layouts-panel__field-trigger--edit-always .dataforms-layouts-panel__field-trigger-icon:hover, .dataforms-layouts-panel__field-trigger--edit-always .dataforms-layouts-panel__field-trigger-icon:focus-visible { 3953 fill: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9)); 3954 } 3955 3956 .dataforms-layouts-panel__field-trigger-icon { 3957 padding: 0; 3958 color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9)); 3959 flex: 0 0 auto; 3960 opacity: 0; 3961 border-radius: var(--wpds-border-radius-xs, 1px); 3962 } 3963 3964 .dataforms-layouts-panel__field-trigger-icon:focus-visible { 3965 opacity: 1; 3966 outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)); 3967 } 3968 3969 .dataforms-layouts-panel__field-dropdown-anchor { 3970 width: 100%; 3971 } 3972 3973 .dataforms-layouts-panel__field-dropdown-anchor .components-dropdown { 3974 width: 100%; 3975 } 3976 3977 .dataforms-layouts-panel__field-label { 3978 width: 38%; 3979 flex-shrink: 0; 3980 min-height: var(--wpds-dimension-size-sm, 24px); 3981 display: flex; 3982 align-items: center; 3983 line-height: var(--wpds-typography-line-height-sm, 20px); 3984 hyphens: auto; 3985 color: var(--wpds-color-foreground-content-neutral-weak, #707070); 3986 } 3987 3988 .dataforms-layouts-panel__field-label .components-base-control__label { 3989 display: inline; 3990 margin-bottom: 0; 3991 line-height: inherit; 3992 } 3993 3994 .dataforms-layouts-panel__field-label.has-error { 3995 color: var(--wpds-color-foreground-content-error-weak, #cc1818); 3996 } 3997 3998 .dataforms-layouts-panel__field-label-error-content { 3999 position: relative; 4000 z-index: 1; 4001 cursor: help; 4002 color: var(--wpds-color-foreground-content-error-weak, #cc1818); 4003 display: inline-flex; 4004 flex-direction: row; 4005 align-items: center; 4006 gap: var(--wpds-dimension-gap-xs, 4px); 4007 } 4008 4009 .dataforms-layouts-panel__field-control { 4010 flex-grow: 1; 4011 min-width: 0; 4012 min-height: var(--wpds-dimension-size-sm, 24px); 4013 line-height: var(--wpds-typography-line-height-md, 24px); 4014 display: flex; 4015 align-items: center; 4016 overflow: clip; 4017 padding-inline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)); 4018 margin-inline: calc(-1 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px))); 4019 word-break: break-word; 4020 font-weight: var(--wpds-typography-font-weight-emphasis, 600); 4021 } 4022 4023 .dataforms-layouts-panel__field-control > * { 4024 min-width: 0; 4025 } 4026 4027 .dataforms-layouts-panel__field-trigger--label-top .dataforms-layouts-panel__field-label { 4028 width: 100%; 4029 } 4030 4031 .dataforms-layouts-panel__field-trigger--label-top .dataforms-layouts-panel__field-control { 4032 grid-column: 1/-1; 4033 } 4034 4035 .dataforms-layouts-panel__field-trigger--label-top .dataforms-layouts-panel__field-trigger-icon { 4036 grid-row: 1; 4037 grid-column: 2; 4038 } 4039 4040 .dataforms-layouts-panel__field-dropdown .components-popover__content { 4041 min-width: 320px; 4042 padding: var(--wpds-dimension-padding-lg, 16px); 4043 } 4044 4045 .dataforms-layouts-panel__dropdown-header { 4046 margin-bottom: var(--wpds-dimension-gap-lg, 16px); 4047 } 4048 4049 .dataforms-layouts-panel__modal-footer { 4050 margin-top: var(--wpds-dimension-gap-lg, 16px); 4051 } 4052 4053 .components-popover.components-dropdown__content.dataforms-layouts-panel__field-dropdown { 4054 z-index: 159990; 4055 } 4056 4057 .dataforms-layouts-panel__summary-button:empty { 4058 min-width: 160px; 4059 } 4060 4061 .dataforms-layouts-regular__field { 4062 width: 100%; 4063 min-height: var(--wpds-dimension-size-md, 32px); 4064 justify-content: flex-start !important; 4065 align-items: flex-start !important; 4066 } 4067 4068 .dataforms-layouts-regular__field .components-base-control__label, 4069 .dataforms-layouts-regular__field .components-input-control__label, 4070 .dataforms-layouts-regular__field .components-form-token-field__label { 4071 color: var(--wpds-color-foreground-content-neutral, #1e1e1e); 4072 } 4073 4074 .dataforms-layouts-regular__field-label { 4075 width: 38%; 4076 flex-shrink: 0; 4077 min-height: var(--wpds-dimension-size-md, 32px); 4078 display: flex; 4079 align-items: center; 4080 line-height: var(--wpds-typography-line-height-sm, 20px); 4081 hyphens: auto; 4082 } 4083 4084 .dataforms-layouts-regular__field-label--label-position-side { 4085 align-self: center; 4086 } 4087 4088 .dataforms-layouts-regular__field-label .components-base-control__label { 4089 margin-bottom: 0; 4090 } 4091 4092 .dataforms-layouts-regular__field-control { 4093 flex-grow: 1; 4094 min-height: var(--wpds-dimension-size-md, 32px); 4095 display: flex; 4096 align-items: center; 4097 } 4098 4099 .dataforms-layouts-card__field { 4100 width: 100%; 4101 } 4102 4103 .dataforms-layouts-card__field-header-content { 4104 min-height: 24px; 4105 } 4106 4107 .dataforms-layouts-card__field-header-content-description { 4108 display: contents; 4109 } 4110 4111 .dataforms-layouts-card__field-description { 4112 color: var(--wpds-color-foreground-content-neutral-weak, #707070); 4113 display: block; 4114 font-size: var(--wpds-typography-font-size-md, 13px); 4115 margin-bottom: var(--wpds-dimension-gap-lg, 16px); 4116 } 4117 4118 .dataforms-layouts-card__field-summary { 4119 display: flex; 4120 flex-direction: row; 4121 gap: var(--wpds-dimension-gap-lg, 16px); 4122 align-items: center; 4123 } 4124 4125 .dataforms-layouts-details__summary-content { 4126 display: inline-flex; 4127 min-height: var(--wpds-dimension-size-sm, 24px); 4128 } 4129 4130 .dataforms-layouts-details__content { 4131 padding-top: var(--wpds-dimension-padding-md, 12px); 4132 } 4133 4134 .dataforms-layouts-row__field-control { 4135 width: 100%; 4136 } 4137 4138 .dataforms-layouts__wrapper { 4139 font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 4140 font-weight: var(--wpds-typography-font-weight-default, 400); 4141 font-size: 13px; 4142 line-height: 20px; 4143 } 4144 4145 /** 4146 * Typography 4147 */ 4148 /** 4149 * SCSS Variables. 4150 * 4151 * Please use variables from this sheet to ensure consistency across the UI. 4152 * Don't add to this sheet unless you're pretty sure the value will be reused in many places. 4153 * For example, don't add rules to this sheet that affect block visuals. It's purely for UI. 4154 */ 4155 /** 4156 * Colors 4157 */ 4158 /** 4159 * Fonts & basic variables. 4160 */ 4161 /** 4162 * Typography 4163 */ 4164 /** 4165 * Grid System. 4166 * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/ 4167 */ 4168 /** 4169 * Radius scale. 4170 */ 4171 /** 4172 * Elevation scale. 4173 */ 4174 /** 4175 * Dimensions. 4176 */ 4177 /** 4178 * Mobile specific styles 4179 */ 4180 /** 4181 * Editor styles. 4182 */ 4183 /** 4184 * Block & Editor UI. 4185 */ 4186 /** 4187 * Block paddings. 4188 */ 4189 /** 4190 * React Native specific. 4191 * These variables do not appear to be used anywhere else. 4192 */ 4193 /** 4194 * Breakpoints & Media Queries 4195 */ 4196 /** 4197 * Converts a hex value into the rgb equivalent. 4198 * 4199 * @param {string} hex - the hexadecimal value to convert 4200 * @return {string} comma separated rgb values 4201 */ 4202 /** 4203 * Long content fade mixin 4204 * 4205 * Creates a fading overlay to signify that the content is longer 4206 * than the space allows. 4207 */ 4208 /** 4209 * Breakpoint mixins 4210 */ 4211 /** 4212 * Focus styles. 4213 */ 4214 /** 4215 * Standard focus rings for the WordPress Design System. 4216 * 4217 * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site, 4218 * e.g. `&:focus { @include outset-ring__focus(); }`. 4219 */ 4220 /** 4221 * Applies editor left position to the selector passed as argument 4222 */ 4223 /** 4224 * Styles that are reused verbatim in a few places 4225 */ 4226 /** 4227 * Allows users to opt-out of animations via OS-level preferences. 4228 */ 4229 /** 4230 * Reset default styles for JavaScript UI based pages. 4231 * This is a WP-admin agnostic reset 4232 */ 4233 /** 4234 * Reset the WP Admin page styles for Gutenberg-like pages. 4235 */ 4236 /** 4237 * Creates a checkerboard pattern background to indicate transparency. 4238 * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px. 4239 */ 4240 :root { 4241 --wp-block-synced-color: #7a00df; 4242 --wp-block-synced-color--rgb: 122, 0, 223; 4243 --wp-bound-block-color: var(--wp-block-synced-color); 4244 --wp-editor-canvas-background: #ddd; 4245 --wp-admin-theme-color: #007cba; 4246 --wp-admin-theme-color--rgb: 0, 124, 186; 4247 --wp-admin-theme-color-darker-10: rgb(0, 107, 160.5); 4248 --wp-admin-theme-color-darker-10--rgb: 0, 107, 160.5; 4249 --wp-admin-theme-color-darker-20: #005a87; 4250 --wp-admin-theme-color-darker-20--rgb: 0, 90, 135; 4251 --wp-admin-border-width-focus: 2px; 4252 } 4253 4254 @media (min-resolution: 192dpi) { 4255 :root { 4256 --wp-admin-border-width-focus: 1.5px; 4257 } 4258 } 4259 .fields-create-template-part-modal { 4260 z-index: 1000001; 4261 } 4262 4263 .fields-create-template-part-modal__area-fieldset { 4264 border: 0; 4265 padding: 0; 4266 margin: 0; 4267 } 4268 4269 .fields-create-template-part-modal__area-radio-group { 4270 border: 1px solid #949494; 4271 border-radius: 2px; 4272 } 4273 4274 .fields-create-template-part-modal__area-radio-wrapper { 4275 position: relative; 4276 padding: 12px; 4277 display: grid; 4278 align-items: center; 4279 grid-template-columns: min-content 1fr min-content; 4280 grid-gap: 4px 8px; 4281 color: #1e1e1e; 4282 } 4283 4284 .fields-create-template-part-modal__area-radio-wrapper + .fields-create-template-part-modal__area-radio-wrapper { 4285 border-top: 1px solid #949494; 4286 } 4287 4288 .fields-create-template-part-modal__area-radio-wrapper input[type=radio] { 4289 position: absolute; 4290 opacity: 0; 4291 } 4292 4293 .fields-create-template-part-modal__area-radio-wrapper:has(input[type=radio]:checked) { 4294 z-index: 1; 4295 } 4296 4297 .fields-create-template-part-modal__area-radio-wrapper:has(input[type=radio]:not(:checked)):hover { 4298 color: var(--wp-admin-theme-color); 4299 } 4300 4301 .fields-create-template-part-modal__area-radio-wrapper > *:not(.fields-create-template-part-modal__area-radio-label) { 4302 pointer-events: none; 4303 } 4304 4305 .fields-create-template-part-modal__area-radio-label::before { 4306 content: ""; 4307 position: absolute; 4308 inset: 0; 4309 } 4310 4311 input[type=radio]:not(:checked) ~ .fields-create-template-part-modal__area-radio-label::before { 4312 cursor: var(--wpds-cursor-control, pointer); 4313 } 4314 4315 input[type=radio]:focus-visible ~ .fields-create-template-part-modal__area-radio-label::before { 4316 outline: 4px solid transparent; 4317 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); 4318 } 4319 4320 .fields-create-template-part-modal__area-radio-icon, 4321 .fields-create-template-part-modal__area-radio-checkmark { 4322 fill: currentColor; 4323 } 4324 4325 input[type=radio]:not(:checked) ~ .fields-create-template-part-modal__area-radio-checkmark { 4326 opacity: 0; 4327 } 4328 4329 .fields-create-template-part-modal__area-radio-description { 4330 grid-column: 2/3; 4331 margin: 0; 4332 color: #757575; 4333 font-size: 12px; 4334 line-height: normal; 4335 text-wrap: pretty; 4336 } 4337 4338 input[type=radio]:not(:checked):hover ~ .fields-create-template-part-modal__area-radio-description { 4339 color: inherit; 4340 } 4341 4342 fieldset.fields__media-edit { 4343 border: 0; 4344 padding: 0; 4345 margin: 0; 4346 width: 100%; 4347 } 4348 4349 fieldset.fields__media-edit .components-base-control__label { 4350 color: #1e1e1e; 4351 } 4352 4353 fieldset.fields__media-edit .fields__media-edit-description { 4354 font-size: 12px; 4355 line-height: 1.5; 4356 } 4357 4358 fieldset.fields__media-edit { 4359 container-type: inline-size; 4360 } 4361 4362 fieldset.fields__media-edit .fields__media-edit-compact-group { 4363 border: 1px dashed #949494; 4364 border-radius: 4px; 4365 overflow: hidden; 4366 } 4367 4368 fieldset.fields__media-edit .fields__media-edit-compact-group.is-single { 4369 border-radius: 2px; 4370 } 4371 4372 fieldset.fields__media-edit .fields__media-edit-compact-group .fields__media-edit-picker-button { 4373 border: 0; 4374 border-radius: 0; 4375 } 4376 4377 fieldset.fields__media-edit .fields__media-edit-compact-group .fields__media-edit-picker-button:focus-visible { 4378 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); 4379 } 4380 4381 fieldset.fields__media-edit .fields__media-edit-compact-group .fields__media-edit-compact:not(:last-child) { 4382 border-bottom: 1px solid #f0f0f0; 4383 } 4384 4385 fieldset.fields__media-edit .fields__media-edit-compact .components-drop-zone .components-drop-zone__content-inner { 4386 display: flex; 4387 align-items: center; 4388 gap: 8px; 4389 } 4390 4391 fieldset.fields__media-edit .fields__media-edit-compact .components-drop-zone .components-drop-zone__content-inner .components-drop-zone__content-icon { 4392 margin: 0; 4393 } 4394 4395 fieldset.fields__media-edit .fields__media-edit-compact { 4396 position: relative; 4397 min-width: 0; 4398 } 4399 4400 fieldset.fields__media-edit .fields__media-edit-compact:hover .fields__media-edit-compact-movers, fieldset.fields__media-edit .fields__media-edit-compact:focus-within .fields__media-edit-compact-movers { 4401 opacity: 1; 4402 } 4403 4404 fieldset.fields__media-edit .fields__media-edit-compact .fields__media-edit-compact-movers { 4405 position: absolute; 4406 left: 8px; 4407 top: 50%; 4408 transform: translateY(-50%); 4409 opacity: 0; 4410 pointer-events: none; 4411 z-index: 1; 4412 border-radius: 2px; 4413 background: #fff; 4414 } 4415 4416 fieldset.fields__media-edit .fields__media-edit-compact .fields__media-edit-compact-movers * { 4417 pointer-events: auto; 4418 } 4419 4420 fieldset.fields__media-edit .fields__media-edit-picker-button:has(.fields__media-edit-placeholder):not(.fields__media-edit-expanded *) .components-drop-zone .components-drop-zone__content-inner { 4421 display: flex; 4422 align-items: center; 4423 gap: 8px; 4424 } 4425 4426 fieldset.fields__media-edit .fields__media-edit-picker-button:has(.fields__media-edit-placeholder):not(.fields__media-edit-expanded *) .components-drop-zone .components-drop-zone__content-inner .components-drop-zone__content-icon { 4427 margin: 0; 4428 } 4429 4430 fieldset.fields__media-edit .fields__media-edit-picker-button { 4431 position: relative; 4432 display: flex; 4433 align-items: center; 4434 gap: 8px; 4435 border: 1px dashed #949494; 4436 border-radius: 2px; 4437 padding: 4px 8px; 4438 min-height: 40px; 4439 cursor: var(--wpds-cursor-control, pointer); 4440 min-width: 0; 4441 } 4442 4443 fieldset.fields__media-edit .fields__media-edit-picker-button:not(.has-attachment) { 4444 border-color: var(--wp-admin-theme-color); 4445 color: var(--wp-admin-theme-color); 4446 } 4447 4448 fieldset.fields__media-edit .fields__media-edit-picker-button:not(.has-attachment):hover { 4449 background-color: color-mix(in srgb, var(--wp-admin-theme-color, #3858e9) 4%, transparent); 4450 color: var(--wp-admin-theme-color-darker-20); 4451 border-color: var(--wp-admin-theme-color-darker-20); 4452 } 4453 4454 fieldset.fields__media-edit .fields__media-edit-picker-button:hover { 4455 color: var(--wp-admin-theme-color); 4456 } 4457 4458 fieldset.fields__media-edit .fields__media-edit-picker-button:focus-visible { 4459 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); 4460 outline: none; 4461 } 4462 4463 fieldset.fields__media-edit .fields__media-edit-picker-button[aria-disabled=true] { 4464 opacity: 0.6; 4465 cursor: default; 4466 } 4467 4468 fieldset.fields__media-edit .fields__media-edit-picker-button .fields__media-edit-picker-button-spinner { 4469 position: absolute; 4470 top: 50%; 4471 right: 50%; 4472 transform: translate(50%, -50%); 4473 z-index: 1; 4474 } 4475 4476 fieldset.fields__media-edit .fields__media-edit-filename, 4477 fieldset.fields__media-edit .fields__media-edit-placeholder { 4478 flex: 1; 4479 width: 100%; 4480 min-width: 0; 4481 } 4482 4483 fieldset.fields__media-edit .fields__media-edit-placeholder { 4484 text-align: center; 4485 } 4486 4487 fieldset.fields__media-edit .fields__media-edit-thumbnail { 4488 width: 24px; 4489 aspect-ratio: 1/1; 4490 flex-shrink: 0; 4491 border-radius: 2px; 4492 } 4493 4494 fieldset.fields__media-edit .fields__media-edit-expanded { 4495 display: grid; 4496 gap: 8px; 4497 } 4498 4499 fieldset.fields__media-edit .fields__media-edit-expanded.is-empty .components-drop-zone .components-drop-zone__content-inner { 4500 display: flex; 4501 align-items: center; 4502 gap: 8px; 4503 } 4504 4505 fieldset.fields__media-edit .fields__media-edit-expanded.is-empty .components-drop-zone .components-drop-zone__content-inner .components-drop-zone__content-icon { 4506 margin: 0; 4507 } 4508 4509 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-preview { 4510 position: relative; 4511 width: 100%; 4512 aspect-ratio: var(--fields-media-edit-expanded-multiple-aspect-ratio, 3/2); 4513 border-radius: 2px; 4514 padding: 4px; 4515 overflow: hidden; 4516 display: flex; 4517 align-items: center; 4518 justify-content: center; 4519 } 4520 4521 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-preview .fields__media-edit-expanded-preview-stack { 4522 width: 100%; 4523 height: 100%; 4524 } 4525 4526 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-overlay { 4527 position: absolute; 4528 top: 0; 4529 right: 0; 4530 left: 0; 4531 bottom: 0; 4532 opacity: 0; 4533 pointer-events: none; 4534 } 4535 4536 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-overlay * { 4537 pointer-events: auto; 4538 } 4539 4540 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-actions { 4541 position: absolute; 4542 top: 4px; 4543 left: 4px; 4544 border-radius: 2px; 4545 background: #fff; 4546 } 4547 4548 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-item { 4549 position: relative; 4550 min-width: 0; 4551 border-radius: 4px; 4552 } 4553 4554 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-item:hover .fields__media-edit-expanded-overlay, fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-item:focus-within .fields__media-edit-expanded-overlay { 4555 opacity: 1; 4556 } 4557 4558 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-item:not(.has-preview-image) .fields__media-edit-expanded-preview-stack { 4559 padding: 8px; 4560 } 4561 4562 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-thumbnail { 4563 width: 100%; 4564 height: 100%; 4565 -o-object-fit: cover; 4566 object-fit: cover; 4567 -o-object-position: 50% 50%; 4568 object-position: 50% 50%; 4569 } 4570 4571 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-filename { 4572 text-align: center; 4573 flex: none; 4574 } 4575 4576 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-picker-button-spinner svg { 4577 margin: 0; 4578 } 4579 4580 fieldset.fields__media-edit .fields__media-edit-expanded.is-single { 4581 grid-template-columns: 1fr; 4582 } 4583 4584 fieldset.fields__media-edit .fields__media-edit-expanded.is-single .fields__media-edit-expanded-preview { 4585 aspect-ratio: 2/1; 4586 } 4587 4588 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-picker-button { 4589 border-radius: 4px; 4590 } 4591 4592 fieldset.fields__media-edit .fields__media-edit-expanded.is-empty .fields__media-edit-picker-button { 4593 border-radius: 2px; 4594 } 4595 4596 fieldset.fields__media-edit .fields__media-edit-expanded.is-multiple:not(.is-empty) { 4597 grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); 4598 } 4599 4600 @container (max-width: 500px) { 4601 fieldset.fields__media-edit .fields__media-edit-expanded.is-multiple:not(.is-empty) { 4602 grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); 4603 } 4604 } 4605 fieldset.fields__media-edit .fields__media-edit-expanded:not(.is-empty) .fields__media-edit-picker-button { 4606 padding: 0; 4607 } 4608 4609 fieldset.fields__media-edit .fields__media-edit-expanded:not(.is-empty) .fields__media-edit-placeholder { 4610 display: flex; 4611 align-items: center; 4612 justify-content: center; 4613 aspect-ratio: var(--fields-media-edit-expanded-multiple-aspect-ratio, 3/2); 4614 } 4615 4616 .fields-controls__author-avatar { 4617 flex-shrink: 0; 4618 overflow: hidden; 4619 width: 24px; 4620 height: 24px; 4621 align-items: center; 4622 justify-content: right; 4623 display: flex; 4624 } 4625 4626 .fields-controls__author-avatar img { 4627 width: 16px; 4628 height: 16px; 4629 -o-object-fit: cover; 4630 object-fit: cover; 4631 opacity: 0; 4632 border-radius: 100%; 4633 } 4634 4635 @media not (prefers-reduced-motion) { 4636 .fields-controls__author-avatar img { 4637 transition: opacity 0.1s linear; 4638 } 4639 } 4640 .fields-controls__author-avatar.is-loaded img { 4641 opacity: 1; 4642 } 4643 4644 .fields-controls__author-icon { 4645 display: flex; 4646 flex-shrink: 0; 4647 width: 24px; 4648 height: 24px; 4649 } 4650 4651 .fields-controls__author-icon svg { 4652 margin-right: -4px; 4653 fill: currentColor; 4654 } 4655 4656 .fields-controls__author-name { 4657 text-overflow: ellipsis; 4658 overflow: hidden; 4659 } 4660 4661 .fields-controls__slug { 4662 border: 0; 4663 padding: 0; 4664 margin: 0; 4665 } 4666 4667 .fields-controls__slug .fields-controls__slug-external-icon { 4668 margin-right: 5ch; 4669 } 4670 4671 .fields-controls__slug .fields-controls__slug-input input.components-input-control__input { 4672 padding-inline-start: 0 !important; 4673 } 4674 4675 .fields-controls__slug .fields-controls__slug-help-link { 4676 word-break: break-word; 4677 } 4678 4679 .fields-controls__slug .fields-controls__slug-help { 4680 display: flex; 4681 flex-direction: column; 4682 } 4683 4684 .fields-controls__slug .fields-controls__slug-help .fields-controls__slug-help-slug { 4685 font-weight: var(--wpds-typography-font-weight-emphasis, 600); 4686 } 4687 4688 .fields-controls__featured-image-image, 4689 .fields-controls__featured-image-placeholder { 4690 width: 100%; 4691 height: 100%; 4692 display: block; 4693 border-radius: 4px; 4694 } 4695 4696 .fields-controls__featured-image-placeholder { 4697 box-shadow: none; 4698 background: #f0f0f0; 4699 } 4700 4701 .fields-controls__parent { 4702 border: 0; 4703 padding: 0; 4704 margin: 0; 4705 } 4706 4707 .fields-controls__password { 4708 border: 0; 4709 padding: 0; 4710 margin: 0; 4711 } 4712 4713 .fields-controls__status-icon { 4714 height: 24px; 4715 width: 24px; 4716 } 4717 4718 .fields-controls__status-icon svg { 4719 fill: currentColor; 4720 margin-right: -4px; 4721 } 4722 4723 .fields-field__title > span:first-child { 4724 text-overflow: ellipsis; 4725 overflow: hidden; 4726 text-decoration: none; 4727 white-space: nowrap; 4728 display: block; 4729 flex-grow: 0; 4730 } 4731 4732 .fields-field__pattern-title span:first-child { 4733 flex: 1; 4734 } 4735 4736 /** 4737 * Colors 4738 */ 4739 /** 4740 * SCSS Variables. 4741 * 4742 * Please use variables from this sheet to ensure consistency across the UI. 4743 * Don't add to this sheet unless you're pretty sure the value will be reused in many places. 4744 * For example, don't add rules to this sheet that affect block visuals. It's purely for UI. 4745 */ 4746 /** 4747 * Fonts & basic variables. 4748 */ 4749 /** 4750 * Typography 4751 */ 4752 /** 4753 * Grid System. 4754 * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/ 4755 */ 4756 /** 4757 * Radius scale. 4758 */ 4759 /** 4760 * Elevation scale. 4761 */ 4762 /** 4763 * Dimensions. 4764 */ 4765 /** 4766 * Mobile specific styles 4767 */ 4768 /** 4769 * Editor styles. 4770 */ 4771 /** 4772 * Block & Editor UI. 4773 */ 4774 /** 4775 * Block paddings. 4776 */ 4777 /** 4778 * React Native specific. 4779 * These variables do not appear to be used anywhere else. 4780 */ 4781 .media-editor-preview { 4782 box-sizing: border-box; 4783 display: flex; 4784 justify-content: center; 4785 align-items: center; 4786 min-height: 100%; 4787 padding: 32px; 4788 position: relative; 4789 } 4790 4791 .media-editor-preview__spinner { 4792 position: absolute; 4793 top: 50%; 4794 right: 50%; 4795 transform: translate(50%, -50%); 4796 } 4797 4798 .media-editor-preview--loading { 4799 width: 100%; 4800 height: 100%; 4801 } 4802 4803 .media-editor-preview--image img { 4804 max-width: 100%; 4805 max-height: 100%; 4806 -o-object-fit: contain; 4807 object-fit: contain; 4808 width: auto; 4809 height: auto; 4810 opacity: 0; 4811 } 4812 4813 @keyframes __wp-base-styles-fade-in { 4814 from { 4815 opacity: 0; 4816 } 4817 to { 4818 opacity: 1; 4819 } 4820 } 4821 @media not (prefers-reduced-motion) { 4822 .media-editor-preview--image img.loaded { 4823 animation: __wp-base-styles-fade-in 0.08s linear 0s; 4824 animation-fill-mode: forwards; 4825 } 4826 } 4827 .media-editor-preview--video video { 4828 max-width: 100%; 4829 max-height: 100%; 4830 -o-object-fit: contain; 4831 object-fit: contain; 4832 width: auto; 4833 height: auto; 4834 } 4835 4836 .media-editor-preview--audio audio { 4837 max-width: 100%; 4838 } 4839 4840 .media-editor-preview--file { 4841 text-align: center; 4842 } 4843 4844 .media-editor-preview__file-info { 4845 background: #f0f0f0; 4846 padding: 24px; 4847 border-radius: 2px; 4848 } 4849 4850 .media-editor-preview__file-name { 4851 font-weight: var(--wpds-typography-font-weight-emphasis, 600); 4852 margin-bottom: 8px; 4853 } 4854 4855 .media-editor-preview__mime-type { 4856 color: #757575; 4857 font-size: 0.9em; 4858 margin-bottom: 16px; 4859 } 4860 4861 .media-editor-preview__download-link { 4862 display: inline-block; 4863 margin-top: 8px; 4864 } 4865 4866 .media-editor-preview--error, .media-editor-preview--empty { 4867 color: #757575; 4868 text-align: center; 4869 } 4870 4871 .media-editor-preview__url { 4872 font-size: 0.9em; 4873 color: #949494; 4874 word-break: break-all; 4875 margin-top: 8px; 4876 } 4877 4878 .wp-media-editor-image-editor { 4879 position: relative; 4880 overflow: hidden; 4881 width: 100%; 4882 height: 100%; 4883 touch-action: none; 4884 -webkit-user-select: none; 4885 -moz-user-select: none; 4886 user-select: none; 4887 cursor: grab; 4888 } 4889 4890 .wp-media-editor-image-editor__canvas { 4891 position: absolute; 4892 inset: 24px; 4893 min-height: 100px; 4894 min-width: 100px; 4895 } 4896 4897 .wp-media-editor-image-editor__canvas:focus { 4898 outline: none; 4899 } 4900 4901 .wp-media-editor-image-editor__stage { 4902 position: absolute; 4903 inset: 0; 4904 } 4905 4906 .wp-media-editor-image-editor--dragging { 4907 cursor: grabbing; 4908 } 4909 4910 .wp-media-editor-image-editor__image { 4911 position: absolute; 4912 top: 0; 4913 right: 0; 4914 will-change: transform; 4915 transform-origin: center center; 4916 } 4917 4918 .wp-media-editor-image-editor__stencil { 4919 position: absolute; 4920 pointer-events: none; 4921 } 4922 4923 .wp-media-editor-image-editor__dimming { 4924 position: absolute; 4925 pointer-events: none; 4926 /* Large shadow spread washes everything outside the crop area 4927 toward the canvas grey ($gray-200). Slightly stronger at rest 4928 for clear crop framing, lighter during drag so the user can see 4929 where they're panning. */ 4930 box-shadow: 0 0 0 9999px rgba(224, 224, 224, 0.6); 4931 transition: box-shadow 0.15s ease; 4932 } 4933 4934 .wp-media-editor-image-editor--dragging .wp-media-editor-image-editor__dimming { 4935 box-shadow: 0 0 0 9999px rgba(224, 224, 224, 0.4); 4936 } 4937 4938 .wp-media-editor-image-editor__grid { 4939 position: absolute; 4940 pointer-events: none; 4941 overflow: hidden; 4942 transition: opacity 0.15s ease; 4943 } 4944 4945 .wp-media-editor-image-editor__canvas--grid-interactive .wp-media-editor-image-editor__grid { 4946 opacity: 0; 4947 transition-delay: 0.1s; 4948 } 4949 4950 .wp-media-editor-image-editor__canvas--show-grid .wp-media-editor-image-editor__grid { 4951 opacity: 1; 4952 transition-delay: 0s; 4953 } 4954 4955 .wp-media-editor-image-editor__canvas--settling .wp-media-editor-image-editor__grid { 4956 opacity: 0; 4957 transition: none; 4958 } 4959 4960 .wp-media-editor-image-editor__grid-line { 4961 position: absolute; 4962 background: rgba(255, 255, 255, 0.4); 4963 } 4964 4965 .wp-media-editor-image-editor__grid-line--horizontal { 4966 right: 0; 4967 width: 100%; 4968 height: 1px; 4969 } 4970 4971 .wp-media-editor-image-editor__grid-line--vertical { 4972 top: 0; 4973 height: 100%; 4974 width: 1px; 4975 } 4976 4977 .wp-media-editor-image-editor__dimensions-tooltip { 4978 position: absolute; 4979 padding: 2px 6px; 4980 background: #fff; 4981 color: #1e1e1e; 4982 font-size: 11px; 4983 line-height: 1.4; 4984 font-variant-numeric: tabular-nums; 4985 box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.08); 4986 pointer-events: none; 4987 white-space: nowrap; 4988 z-index: 2; 4989 } 4990 4991 .wp-media-editor-image-editor__stencil-rect { 4992 position: absolute; 4993 border: 1px solid #1e1e1e; 4994 box-sizing: border-box; 4995 pointer-events: none; 4996 transition: border-color 0.15s ease, box-shadow 0.15s ease; 4997 } 4998 4999 .wp-media-editor-image-editor__canvas--focus-visible:focus .wp-media-editor-image-editor__stencil-rect { 5000 border-color: var(--wp-image-editor-focus-color, var(--wp-admin-theme-color, #007cba)); 5001 box-shadow: 0 0 0 1px var(--wp-image-editor-focus-color, var(--wp-admin-theme-color, #007cba)); 5002 } 5003 5004 .wp-media-editor-image-editor__handle { 5005 -webkit-appearance: none; 5006 -moz-appearance: none; 5007 appearance: none; 5008 margin: 0; 5009 padding: 0; 5010 font: inherit; 5011 cursor: default; 5012 position: absolute; 5013 width: 12px; 5014 height: 12px; 5015 background: #fff; 5016 border: 1px solid var(--wp-admin-theme-color, #007cba); 5017 border-radius: 50%; 5018 box-sizing: border-box; 5019 pointer-events: auto; 5020 transition: background-color 0.15s ease, box-shadow 0.15s ease; 5021 } 5022 5023 .wp-media-editor-image-editor__handle:focus { 5024 outline: none; 5025 } 5026 5027 .wp-media-editor-image-editor__canvas--focus-visible .wp-media-editor-image-editor__handle:focus { 5028 background: var(--wp-image-editor-focus-color, var(--wp-admin-theme-color, #007cba)); 5029 border-color: transparent; 5030 box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-image-editor-focus-color, var(--wp-admin-theme-color, #007cba)); 5031 } 5032 5033 .wp-media-editor-image-editor__handle::before { 5034 content: ""; 5035 position: absolute; 5036 top: 50%; 5037 right: 50%; 5038 width: 44px; 5039 height: 44px; 5040 transform: translate(50%, -50%); 5041 } 5042 5043 .wp-media-editor-image-editor__handle { 5044 /* Offset by half the handle width (12px / 2 = 6px) to center on crop edge */ 5045 } 5046 5047 .wp-media-editor-image-editor__handle--n { 5048 top: -6px; 5049 right: 50%; 5050 margin-right: -6px; 5051 cursor: ns-resize; 5052 } 5053 5054 .wp-media-editor-image-editor__handle--s { 5055 bottom: -6px; 5056 right: 50%; 5057 margin-right: -6px; 5058 cursor: ns-resize; 5059 } 5060 5061 .wp-media-editor-image-editor__handle--e { 5062 top: 50%; 5063 left: -6px; 5064 margin-top: -6px; 5065 cursor: ew-resize; 5066 } 5067 5068 .wp-media-editor-image-editor__handle--w { 5069 top: 50%; 5070 right: -6px; 5071 margin-top: -6px; 5072 cursor: ew-resize; 5073 } 5074 5075 .wp-media-editor-image-editor__handle--nw { 5076 top: -6px; 5077 right: -6px; 5078 cursor: nesw-resize; 5079 } 5080 5081 .wp-media-editor-image-editor__handle--ne { 5082 top: -6px; 5083 left: -6px; 5084 cursor: nwse-resize; 5085 } 5086 5087 .wp-media-editor-image-editor__handle--sw { 5088 bottom: -6px; 5089 right: -6px; 5090 cursor: nwse-resize; 5091 } 5092 5093 .wp-media-editor-image-editor__handle--se { 5094 bottom: -6px; 5095 left: -6px; 5096 cursor: nesw-resize; 5097 } 5098 5099 /** 5100 * Breakpoints & Media Queries 5101 */ 5102 /** 5103 * Typography 5104 */ 5105 /** 5106 * Converts a hex value into the rgb equivalent. 5107 * 5108 * @param {string} hex - the hexadecimal value to convert 5109 * @return {string} comma separated rgb values 5110 */ 5111 /** 5112 * Long content fade mixin 5113 * 5114 * Creates a fading overlay to signify that the content is longer 5115 * than the space allows. 5116 */ 5117 /** 5118 * Breakpoint mixins 5119 */ 5120 /** 5121 * Focus styles. 5122 */ 5123 /** 5124 * Standard focus rings for the WordPress Design System. 5125 * 5126 * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site, 5127 * e.g. `&:focus { @include outset-ring__focus(); }`. 5128 */ 5129 /** 5130 * Applies editor left position to the selector passed as argument 5131 */ 5132 /** 5133 * Styles that are reused verbatim in a few places 5134 */ 5135 /** 5136 * Allows users to opt-out of animations via OS-level preferences. 5137 */ 5138 /** 5139 * Reset default styles for JavaScript UI based pages. 5140 * This is a WP-admin agnostic reset 5141 */ 5142 /** 5143 * Reset the WP Admin page styles for Gutenberg-like pages. 5144 */ 5145 /** 5146 * Creates a checkerboard pattern background to indicate transparency. 5147 * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px. 5148 */ 5149 .media-editor { 5150 display: flex; 5151 flex: 1; 5152 flex-direction: column; 5153 height: 100%; 5154 min-height: 0; 5155 } 5156 5157 .media-editor .media-editor__loading { 5158 height: 100%; 5159 display: flex; 5160 align-items: center; 5161 justify-content: center; 5162 } 5163 5164 .media-editor .interface-interface-skeleton { 5165 position: relative; 5166 top: auto; 5167 left: auto; 5168 bottom: auto; 5169 right: auto; 5170 height: 100%; 5171 max-height: none; 5172 flex: 1; 5173 flex-direction: column; 5174 } 5175 5176 .media-editor-modal .media-editor .interface-interface-skeleton.interface-interface-skeleton { 5177 top: auto; 5178 } 5179 5180 .media-editor .interface-interface-skeleton__editor { 5181 min-width: 0; 5182 flex: 1; 5183 } 5184 5185 .media-editor .media-editor__content { 5186 display: flex; 5187 flex: 1; 5188 flex-direction: column; 5189 min-height: 0; 5190 margin: 0 24px; 5191 border-radius: 8px; 5192 overflow: hidden; 5193 } 5194 5195 .media-editor .media-editor__canvas-toolbar { 5196 display: flex; 5197 flex-shrink: 0; 5198 justify-content: center; 5199 background: #e0e0e0; 5200 padding: 8px 16px; 5201 } 5202 5203 .media-editor .media-editor__canvas-toolbar .media-editor-fine-rotation { 5204 flex: 0 1 360px; 5205 min-width: 0; 5206 } 5207 5208 .media-editor .media-editor__canvas-area { 5209 display: flex; 5210 align-items: center; 5211 justify-content: center; 5212 background: #e0e0e0; 5213 overflow: auto; 5214 flex: 1; 5215 min-height: 0; 5216 } 5217 5218 .media-editor .media-editor__canvas-area .media-editor-preview { 5219 height: 100%; 5220 } 5221 5222 .media-editor .media-editor__canvas-area img, 5223 .media-editor .media-editor__canvas-area video { 5224 max-width: 100%; 5225 max-height: 100%; 5226 -o-object-fit: contain; 5227 object-fit: contain; 5228 } 5229 5230 .media-editor .media-editor__sidebar { 5231 box-sizing: border-box; 5232 } 5233 5234 .media-editor .media-editor__sidebar *, 5235 .media-editor .media-editor__sidebar *::before, 5236 .media-editor .media-editor__sidebar *::after { 5237 box-sizing: inherit; 5238 } 5239 5240 @media (min-width: 600px) { 5241 .media-editor .media-editor__sidebar { 5242 padding-right: 1px; 5243 } 5244 } 5245 .media-editor .media-editor__sidebar-panel { 5246 padding-bottom: 24px; 5247 } 5248 5249 .media-editor .interface-interface-skeleton__sidebar { 5250 border-top: 0; 5251 box-shadow: none; 5252 outline: 1px solid transparent; 5253 } 5254 5255 .media-editor .media-editor__panel { 5256 padding: 16px; 5257 } 5258 5259 @media (min-width: 600px) { 5260 .media-editor .media-editor__panel { 5261 padding: 24px 0 0 24px; 5262 } 5263 } 5264 .media-editor .components-panel__header.media-editor__sidebar-header { 5265 padding-right: 0; 5266 padding-left: 8px; 5267 margin-left: 24px; 5268 margin-left: 0; 5269 } 5270 5271 @media (min-width: 600px) { 5272 .media-editor .components-panel__header.media-editor__sidebar-header { 5273 margin-left: 24px; 5274 } 5275 } 5276 .media-editor .components-panel__header.media-editor__sidebar-header .components-button.has-icon { 5277 padding: 0; 5278 } 5279 5280 @media (min-width: 600px) { 5281 .media-editor .components-panel__header.media-editor__sidebar-header .components-button.has-icon { 5282 display: flex; 5283 } 5284 } 5285 @media (min-width: 600px) and (max-width: 781px) { 5286 .media-editor .interface-interface-skeleton__sidebar:has(.interface-complementary-area__fill) { 5287 position: relative !important; 5288 } 5289 .media-editor .interface-complementary-area__fill, 5290 .media-editor .interface-complementary-area { 5291 width: 280px !important; 5292 } 5293 } 5294 @media (max-width: 599px) { 5295 .media-editor .interface-interface-skeleton__sidebar:has(.interface-complementary-area__fill) { 5296 width: 100%; 5297 } 5298 .media-editor .interface-complementary-area__fill, 5299 .media-editor .interface-complementary-area { 5300 width: 100% !important; 5301 } 5302 } 5303 .media-editor__snackbar { 5304 position: fixed; 5305 bottom: 24px; 5306 right: 0; 5307 left: 0; 5308 padding-inline: 16px; 5309 box-sizing: border-box; 5310 display: flex; 5311 flex-direction: column; 5312 pointer-events: none; 5313 } 5314 5315 .media-editor__snackbar .components-snackbar { 5316 margin-inline: auto; 5317 } 5318 5319 .media-editor-form .dataforms-layouts-panel__field-control { 5320 text-wrap: pretty; 5321 } 5322 5323 .media-editor-modal.components-modal__frame .components-modal__content { 5324 padding: 0; 5325 margin-bottom: 0; 5326 display: flex; 5327 flex-direction: column; 5328 min-height: 0; 5329 } 5330 5331 .media-editor-modal.components-modal__frame .components-modal__children-container { 5332 display: flex; 5333 flex: 1; 5334 flex-direction: column; 5335 min-height: 0; 5336 } 5337 5338 .media-editor-modal.components-modal__frame .media-editor-modal__footer { 5339 flex-shrink: 0; 5340 display: flex; 5341 gap: 16px; 5342 padding: 16px 32px 24px; 5343 background: #fff; 5344 z-index: 1000001; 5345 } 5346 5347 .media-editor-modal.components-modal__frame .media-editor-modal__footer.is-wide { 5348 flex-direction: row; 5349 align-items: center; 5350 } 5351 5352 .media-editor-modal.components-modal__frame .media-editor-modal__footer.is-wide .media-editor__footer-actions { 5353 margin-right: auto; 5354 } 5355 5356 .media-editor-modal.components-modal__frame .media-editor-modal__footer.is-narrow { 5357 flex-direction: column; 5358 } 5359 5360 .media-editor-modal.components-modal__frame .media-editor-modal__footer.is-narrow > .media-editor-image-controls { 5361 align-self: center; 5362 } 5363 5364 .media-editor-modal__footer-row { 5365 display: flex; 5366 flex-wrap: wrap; 5367 align-items: center; 5368 gap: 16px; 5369 } 5370 5371 .media-editor-modal__footer-row .media-editor-image-controls, 5372 .media-editor-modal__footer-row .media-editor__footer-actions { 5373 margin-right: auto; 5374 } 5375 5376 .media-editor__history-actions .components-button.has-icon:not([aria-disabled=true]) { 5377 color: var(--wp-admin-theme-color); 5378 } 5379 5380 .media-editor-modal { 5381 display: flex; 5382 flex-direction: column; 5383 } 5384 5385 .media-editor-modal__snackbar { 5386 position: fixed; 5387 bottom: 24px; 5388 right: 0; 5389 left: 0; 5390 padding-inline: 16px; 5391 box-sizing: border-box; 5392 display: flex; 5393 flex-direction: column; 5394 pointer-events: none; 5395 } 5396 5397 .media-editor-modal__snackbar .components-snackbar { 5398 margin-inline: auto; 5399 } 5400 5401 .media-editor-modal__snackbar { 5402 z-index: 1000001; 5403 } 5404 5405 .media-editor-canvas { 5406 position: relative; 5407 width: 100%; 5408 height: 100%; 5409 } 5410 5411 .media-editor-canvas__cropper { 5412 width: 100%; 5413 height: 100%; 5414 opacity: 0; 5415 pointer-events: none; 5416 } 5417 5418 .media-editor-canvas__cropper.is-loaded { 5419 opacity: 1; 5420 pointer-events: auto; 5421 } 5422 5423 @keyframes __wp-base-styles-fade-in { 5424 from { 5425 opacity: 0; 5426 } 5427 to { 5428 opacity: 1; 5429 } 5430 } 5431 @media not (prefers-reduced-motion) { 5432 .media-editor-canvas__cropper.is-loaded { 5433 animation: __wp-base-styles-fade-in 0.2s linear 0s; 5434 animation-fill-mode: forwards; 5435 } 5436 } 5437 .media-editor-canvas__spinner { 5438 position: absolute; 5439 top: 50%; 5440 right: 50%; 5441 transform: translate(50%, -50%); 5442 } 5443 5444 .media-editor-canvas__error { 5445 display: flex; 5446 align-items: center; 5447 justify-content: center; 5448 width: 100%; 5449 height: 100%; 5450 color: #757575; 5451 text-align: center; 5452 } 5453 5454 .media-editor-image-controls { 5455 display: flex; 5456 flex-wrap: nowrap; 5457 align-items: center; 5458 gap: 8px; 5459 } 5460 5461 .media-editor-image-controls.is-stacked { 5462 flex-direction: column; 5463 align-items: flex-start; 5464 gap: 24px; 5465 } 5466 5467 .media-editor-image-controls__transforms { 5468 display: flex; 5469 gap: 48px; 5470 } 5471 5472 .media-editor-image-controls__group { 5473 display: flex; 5474 flex-direction: column; 5475 gap: 4px; 5476 } 5477 5478 .media-editor-image-controls__label { 5479 font-size: 11px; 5480 font-weight: var(--wpds-typography-font-weight-emphasis, 600); 5481 line-height: 1.4; 5482 text-transform: uppercase; 5483 } 5484 5485 .media-editor-image-controls__buttons { 5486 display: flex; 5487 gap: 8px; 5488 padding-inline: 2px 0; 5489 } 5490 5491 .media-editor-keyboard-shortcuts-modal { 5492 min-width: 280px; 5493 } 5494 5495 .media-editor-keyboard-shortcuts-modal .media-editor-keyboard-shortcuts-modal__note { 5496 margin: 0 0 16px; 5497 color: #757575; 5498 font-size: 13px; 5499 } 5500 5501 .media-editor-keyboard-shortcuts-modal .media-editor-keyboard-shortcuts-modal__shortcut-list { 5502 list-style: none; 5503 margin: 0; 5504 padding: 0; 5505 } 5506 5507 .media-editor-keyboard-shortcuts-modal .media-editor-keyboard-shortcuts-modal__shortcut { 5508 display: flex; 5509 align-items: baseline; 5510 padding: 0.6rem 0; 5511 border-top: 1px solid #ddd; 5512 margin-bottom: 0; 5513 } 5514 5515 .media-editor-keyboard-shortcuts-modal .media-editor-keyboard-shortcuts-modal__shortcut:last-child { 5516 border-bottom: 1px solid #ddd; 5517 } 5518 5519 .media-editor-keyboard-shortcuts-modal .media-editor-keyboard-shortcuts-modal__shortcut-description { 5520 flex: 1; 5521 margin: 0; 5522 } 5523 5524 .media-editor-keyboard-shortcuts-modal .media-editor-keyboard-shortcuts-modal__shortcut-term { 5525 background: none; 5526 font-weight: var(--wpds-typography-font-weight-emphasis, 600); 5527 margin: 0 1rem 0 0; 5528 padding: 0; 5529 text-align: left; 5530 } 5531 5532 .media-editor-keyboard-shortcuts-modal .media-editor-keyboard-shortcuts-modal__shortcut-key { 5533 padding: 0.25rem 0.5rem; 5534 border-radius: 8%; 5535 margin: 0 0.2rem 0 0.2rem; 5536 } 5537 5538 .media-editor-keyboard-shortcuts-modal .media-editor-keyboard-shortcuts-modal__shortcut-key:last-child { 5539 margin: 0 0.2rem 0 0; 5540 } 5541 5542 .rotation-ruler { 5543 position: relative; 5544 min-width: 180px; 5545 height: 32px; 5546 padding: 0 8px; 5547 box-sizing: border-box; 5548 color: #1e1e1e; 5549 font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 5550 -webkit-user-select: none; 5551 -moz-user-select: none; 5552 user-select: none; 5553 touch-action: none; 5554 cursor: ew-resize; 5555 container-type: inline-size; 5556 } 5557 5558 .rotation-ruler[data-disabled] { 5559 opacity: 0.5; 5560 pointer-events: none; 5561 cursor: default; 5562 } 5563 5564 .rotation-ruler:has(.rotation-ruler__input:focus-visible) { 5565 outline: 2px solid var(--wp-admin-theme-color, #3858e9); 5566 outline-offset: 2px; 5567 border-radius: 4px; 5568 } 5569 5570 .rotation-ruler__input { 5571 position: absolute; 5572 width: 1px; 5573 height: 1px; 5574 margin: -1px; 5575 padding: 0; 5576 border: 0; 5577 clip: rect(0 0 0 0); 5578 overflow: hidden; 5579 white-space: nowrap; 5580 } 5581 5582 .rotation-ruler__pointer { 5583 position: absolute; 5584 bottom: 0; 5585 right: 50%; 5586 width: 2px; 5587 height: 18px; 5588 background: var(--wp-admin-theme-color, #3858e9); 5589 border-radius: 1px; 5590 transform: translateX(50%); 5591 pointer-events: none; 5592 } 5593 5594 .rotation-ruler__strip { 5595 position: absolute; 5596 inset: 0; 5597 overflow: hidden; 5598 mask-image: linear-gradient(to right, transparent 0, #000 8px, #000 calc(100% - 8px), transparent 100%); 5599 -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8px, #000 calc(100% - 8px), transparent 100%); 5600 } 5601 5602 .rotation-ruler__ticks { 5603 position: absolute; 5604 left: 50%; 5605 top: 0; 5606 display: block; 5607 overflow: visible; 5608 } 5609 5610 .rotation-ruler__tick { 5611 stroke: currentColor; 5612 stroke-width: 1; 5613 } 5614 5615 .rotation-ruler__tick--minor { 5616 opacity: 0.35; 5617 } 5618 5619 .rotation-ruler__tick--mid { 5620 opacity: 0.6; 5621 } 5622 5623 .rotation-ruler__tick--major { 5624 opacity: 1; 5625 } 5626 5627 .rotation-ruler__label { 5628 fill: currentColor; 5629 font-size: 10px; 5630 font-weight: 400; 5631 opacity: 0.45; 5632 } 5633 5634 .rotation-ruler__active-label { 5635 position: absolute; 5636 top: 0; 5637 right: 50%; 5638 height: 14px; 5639 transform: translateX(50%); 5640 font-size: 12px; 5641 font-weight: var(--wpds-typography-font-weight-emphasis, 600); 5642 line-height: 14px; 5643 color: #1e1e1e; 5644 pointer-events: none; 5645 } 5646 5647 .rotation-ruler__active-label::before { 5648 content: ""; 5649 position: absolute; 5650 top: 0; 5651 right: 50%; 5652 width: 60px; 5653 height: 100%; 5654 transform: translateX(50%); 5655 background: linear-gradient(to left, transparent 0, #e0e0e0 12px, #e0e0e0 calc(100% - 12px), transparent 100%); 5656 } 5657 5658 .rotation-ruler__active-label-number { 5659 position: relative; 5660 display: inline-block; 5661 } 5662 5663 .rotation-ruler__active-label-sign { 5664 position: absolute; 5665 top: 0; 5666 left: 100%; 5667 } 5668 5669 .rotation-ruler__active-label-unit { 5670 position: absolute; 5671 top: 0; 5672 right: 100%; 5673 } 5674 5675 @container (max-width: 220px) { 5676 .rotation-ruler__tick--minor { 5677 opacity: 0; 5678 } 5679 } 5680 @media (prefers-reduced-motion: reduce) { 5681 .rotation-ruler__ticks { 5682 transition: none; 5683 } 5684 } 5685 .editor-autocompleters__link { 5686 white-space: nowrap; 5687 gap: 8px; 5688 } 5689 5690 .editor-autocompleters__user .editor-autocompleters__no-avatar::before { 5691 /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword -- dashicons don't need a generic family keyword. */ 5692 font: normal 20px/1 dashicons; 5693 content: "\f110"; 5694 margin-left: 5px; 5695 vertical-align: middle; 5696 } 5697 .editor-autocompleters__user .editor-autocompleters__user-avatar { 5698 margin-left: 8px; 5699 flex-grow: 0; 5700 flex-shrink: 0; 5701 max-width: none; 5702 width: 24px; 5703 height: 24px; 5704 } 5705 .editor-autocompleters__user .editor-autocompleters__user-name { 5706 white-space: nowrap; 5707 text-overflow: ellipsis; 5708 overflow: hidden; 5709 max-width: 200px; 5710 flex-shrink: 0; 5711 flex-grow: 1; 5712 } 5713 .editor-autocompleters__user .editor-autocompleters__user-slug { 5714 margin-right: 8px; 5715 white-space: nowrap; 5716 text-overflow: ellipsis; 5717 overflow: hidden; 5718 max-width: 100px; 5719 flex-grow: 0; 5720 flex-shrink: 0; 5721 } 5722 .editor-autocompleters__user:not(.is-primary) .editor-autocompleters__user-slug { 5723 color: #757575; 5724 } 5725 5726 .interface-interface-skeleton__sidebar:has(.editor-collab-sidebar) { 5727 box-shadow: none; 5728 } 5729 .interface-interface-skeleton__sidebar:has(.editor-collab-sidebar) .interface-complementary-area-header { 5730 display: none; 5731 } 5732 5733 .editor-collab-sidebar { 5734 height: 100%; 5735 overflow: hidden; 5736 } 5737 5738 .editor-collab-sidebar-panel { 5739 position: relative; 5740 padding: 16px 16px 24px; 5741 height: 100%; 5742 overflow: hidden; 5743 } 5744 5745 .editor-collab-sidebar-panel__thread { 5746 position: relative; 5747 padding: 16px; 5748 border-radius: 8px; 5749 border: 1px solid #ddd; 5750 background-color: #f0f0f0; 5751 overflow: hidden; 5752 width: auto; 5753 } 5754 .editor-collab-sidebar-panel__thread.is-selected { 5755 background-color: #fff; 5756 box-shadow: 0 2px 3px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.04), 0 12px 12px rgba(0, 0, 0, 0.03), 0 16px 16px rgba(0, 0, 0, 0.02); 5757 z-index: 1; 5758 } 5759 .editor-collab-sidebar-panel__thread:focus { 5760 outline: var(--wp-admin-border-width-focus) solid var(--wp-admin-theme-color); 5761 outline-offset: calc(-1 * var(--wp-admin-border-width-focus)); 5762 } 5763 .editor-collab-sidebar-panel__thread.is-floating { 5764 right: 16px; 5765 left: 16px; 5766 position: absolute; 5767 margin-top: 16px; 5768 transform: translateY(var(--canvas-scroll, 0)); 5769 will-change: transform; 5770 max-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px) - 128px); 5771 overflow-y: auto; 5772 } 5773 5774 .editor-collab-sidebar-panel__user-name { 5775 font-size: 12px; 5776 font-weight: 400; 5777 line-height: 16px; 5778 text-align: right; 5779 color: #757575; 5780 text-transform: capitalize; 5781 } 5782 5783 .editor-collab-sidebar-panel__user-time { 5784 font-size: 12px; 5785 font-weight: 400; 5786 line-height: 16px; 5787 text-align: right; 5788 color: #757575; 5789 } 5790 5791 .editor-collab-sidebar-panel__show-more-button { 5792 width: -moz-fit-content; 5793 width: fit-content; 5794 color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9)); 5795 cursor: var(--wpds-cursor-control, pointer); 5796 } 5797 .editor-collab-sidebar-panel__show-more-button:hover, .editor-collab-sidebar-panel__show-more-button:focus, .editor-collab-sidebar-panel__show-more-button:active { 5798 color: var(--wpds-color-foreground-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 52%, black)); 5799 } 5800 5801 .editor-collab-sidebar-panel__note-content p:last-child { 5802 margin-bottom: 0; 5803 } 5804 .editor-collab-sidebar-panel__note-content.is-collapsed { 5805 -webkit-line-clamp: 3; 5806 line-clamp: 3; 5807 display: -webkit-box; 5808 -webkit-box-orient: vertical; 5809 overflow: hidden; 5810 } 5811 5812 .editor-collab-sidebar-panel__user-avatar { 5813 border-radius: 50%; 5814 flex-shrink: 0; 5815 border-width: var(--wp-admin-border-width-focus); 5816 border-style: solid; 5817 padding: var(--wp-admin-border-width-focus); 5818 background: #fff; 5819 } 5820 5821 .editor-collab-sidebar-panel__note-actions { 5822 margin-right: auto; 5823 } 5824 .editor-collab-sidebar-panel__note-actions button.has-icon:not(.has-text) { 5825 min-width: 24px; 5826 padding: 0; 5827 width: 24px; 5828 height: 24px; 5829 flex-shrink: 0; 5830 } 5831 5832 .editor-collab-sidebar-panel__more-reply-separator::before, .editor-collab-sidebar-panel__more-reply-separator::after, 5833 .editor-collab-sidebar-panel__status-separator::before, 5834 .editor-collab-sidebar-panel__status-separator::after { 5835 content: ""; 5836 flex: 1; 5837 height: 1px; 5838 background-color: #ddd; 5839 } 5840 5841 .editor-collab-sidebar-panel__more-reply-button { 5842 font-weight: var(--wpds-typography-font-weight-emphasis, 600); 5843 } 5844 5845 .editor-collab-sidebar-panel__deleted-block-notice { 5846 font-weight: var(--wpds-typography-font-weight-emphasis, 600); 5847 color: #757575; 5848 } 5849 5850 .editor-collab-sidebar-panel__resolution-text { 5851 font-style: italic; 5852 } 5853 5854 .editor-collab-sidebar-panel__note-form [role=textbox] { 5855 line-height: 20px; 5856 max-height: 418px; 5857 overflow-y: auto; 5858 white-space: pre-wrap; 5859 word-wrap: break-word; 5860 } 5861 .editor-collab-sidebar-panel__note-form [role=textbox] code { 5862 font-family: Menlo, Consolas, monaco, monospace; 5863 font-size: 0.9em; 5864 padding: 0 2px; 5865 background: #f0f0f0; 5866 border-radius: 2px; 5867 } 5868 .editor-collab-sidebar-panel__note-form [role=textbox] a:not(.wp-note-mention) { 5869 color: var(--wp-admin-theme-color); 5870 text-decoration: underline; 5871 } 5872 5873 .editor-collab-sidebar-panel__skip-to-note, 5874 .editor-collab-sidebar-panel__skip-to-block { 5875 position: absolute; 5876 top: -9999px; 5877 left: -9999px; 5878 overflow: hidden; 5879 clip-path: inset(50%); 5880 background: #fff !important; 5881 z-index: -1; 5882 } 5883 .editor-collab-sidebar-panel__skip-to-note:focus, 5884 .editor-collab-sidebar-panel__skip-to-block:focus { 5885 overflow: visible; 5886 clip-path: none; 5887 z-index: 1; 5888 left: 8px; 5889 } 5890 5891 .editor-collab-sidebar-panel__skip-to-note:focus { 5892 top: 8px; 5893 } 5894 5895 .editor-collab-sidebar-panel__skip-to-block:focus { 5896 top: auto; 5897 bottom: 8px; 5898 } 5899 5900 .editor-note-indicator__avatar { 5901 width: 24px; 5902 border-radius: 50%; 5903 margin-right: -12px; 5904 border-width: var(--wp-admin-border-width-focus); 5905 border-style: solid; 5906 padding: var(--wp-admin-border-width-focus); 5907 background: #fff; 5908 box-sizing: border-box; 5909 } 5910 .editor-note-indicator__avatar:first-child { 5911 margin-right: 0; 5912 } 5913 5914 .editor-note-indicator__overflow { 5915 font-weight: var(--wpds-typography-font-weight-emphasis, 600); 5916 } 5917 5918 .show-icon-labels .editor-note-indicator { 5919 width: auto; 5920 } 5921 .show-icon-labels .editor-note-indicator div { 5922 display: none; 5923 } 5924 .show-icon-labels .editor-note-indicator::after { 5925 content: attr(aria-label); 5926 font-size: 12px; 5927 } 5928 5929 mark.wp-note { 5930 border-radius: 1px; 5931 transition: background-color 0.1s ease-in-out; 5932 } 5933 5934 .wp-note-mention { 5935 display: inline; 5936 padding: 0 4px; 5937 border-radius: 2px; 5938 background: color-mix(in srgb, var(--wp-admin-theme-color) 12%, transparent); 5939 color: var(--wp-admin-theme-color); 5940 font-weight: var(--wpds-typography-font-weight-emphasis, 600); 5941 white-space: nowrap; 5942 text-decoration: none; 5943 } 5944 5945 .editor-collab-sidebar-panel__mention-suggestion .editor-autocompleters__user-avatar { 5946 border-radius: 50%; 5947 } 5948 5949 .editor-avatar { 5950 position: relative; 5951 display: inline-flex; 5952 align-items: center; 5953 border-radius: 9999px; 5954 flex-shrink: 0; 5955 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff, 0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01); 5956 } 5957 5958 .editor-avatar__image { 5959 box-sizing: border-box; 5960 position: relative; 5961 width: 32px; 5962 height: 32px; 5963 border-radius: 9999px; 5964 border: 0; 5965 background-color: var(--wp-admin-theme-color, #3858e9); 5966 overflow: hidden; 5967 overflow: clip; 5968 flex-shrink: 0; 5969 font-size: 0; 5970 color: #fff; 5971 } 5972 .is-small > .editor-avatar__image { 5973 width: 24px; 5974 height: 24px; 5975 } 5976 .has-avatar-border-color > .editor-avatar__image { 5977 border: var(--wp-admin-border-width-focus) solid var(--editor-avatar-outline-color); 5978 background-clip: padding-box; 5979 } 5980 .has-avatar-border-color > .editor-avatar__image::after { 5981 content: ""; 5982 position: absolute; 5983 inset: 0; 5984 border-radius: inherit; 5985 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus, 2px) #fff; 5986 pointer-events: none; 5987 z-index: 1; 5988 } 5989 5990 .editor-avatar__img { 5991 position: absolute; 5992 inset: 0; 5993 width: 100%; 5994 height: 100%; 5995 -o-object-fit: cover; 5996 object-fit: cover; 5997 border-radius: inherit; 5998 opacity: 0; 5999 } 6000 .has-src > .editor-avatar__image > .editor-avatar__img { 6001 opacity: 1; 6002 } 6003 6004 .editor-avatar:not(.has-src) > .editor-avatar__image { 6005 display: flex; 6006 align-items: center; 6007 justify-content: center; 6008 font-size: 11px; 6009 font-weight: var(--wpds-typography-font-weight-emphasis, 600); 6010 border: 0; 6011 background-clip: border-box; 6012 } 6013 .editor-avatar:not(.has-src) > .editor-avatar__image::after { 6014 content: none; 6015 } 6016 6017 .editor-avatar:not(.has-src).has-avatar-border-color > .editor-avatar__image { 6018 background-color: var(--editor-avatar-outline-color); 6019 } 6020 6021 .editor-avatar__name { 6022 font-size: 13px; 6023 font-weight: var(--wpds-typography-font-weight-emphasis, 600); 6024 line-height: 20px; 6025 color: var(--editor-avatar-name-color, #fff); 6026 min-width: 0; 6027 padding-bottom: 2px; 6028 overflow: hidden; 6029 opacity: 0; 6030 white-space: nowrap; 6031 transition: opacity 0.15s cubic-bezier(0.15, 0, 0.15, 1); 6032 } 6033 6034 .editor-avatar.is-badge { 6035 display: inline-grid; 6036 grid-template-columns: min-content 0fr; 6037 -moz-column-gap: 0; 6038 column-gap: 0; 6039 padding-inline-end: 0; 6040 background-color: var(--wp-admin-theme-color, #3858e9); 6041 transition: grid-template-columns 0.3s cubic-bezier(0.15, 0, 0.15, 1), column-gap 0.3s cubic-bezier(0.15, 0, 0.15, 1), padding-inline-end 0.3s cubic-bezier(0.15, 0, 0.15, 1); 6042 transition: grid-template-columns 0.3s cubic-bezier(0.15, 0, 0.15, 1), column-gap 0.3s cubic-bezier(0.15, 0, 0.15, 1), padding-inline-end 0.3s cubic-bezier(0.15, 0, 0.15, 1), -moz-column-gap 0.3s cubic-bezier(0.15, 0, 0.15, 1); 6043 } 6044 .editor-avatar.is-badge:hover { 6045 grid-template-columns: min-content 1fr; 6046 -moz-column-gap: 4px; 6047 column-gap: 4px; 6048 padding-inline-end: 8px; 6049 transition-timing-function: cubic-bezier(0.85, 0, 0.85, 1); 6050 } 6051 .editor-avatar.is-badge:hover .editor-avatar__name { 6052 opacity: 1; 6053 transition-timing-function: cubic-bezier(0.85, 0, 0.85, 1); 6054 } 6055 6056 .editor-avatar.is-badge.has-avatar-border-color { 6057 background-color: var(--editor-avatar-outline-color); 6058 } 6059 6060 .editor-avatar.is-dimmed > .editor-avatar__image { 6061 opacity: 0.5; 6062 background-color: #757575; 6063 } 6064 6065 .editor-avatar.is-dimmed.has-avatar-border-color > .editor-avatar__image { 6066 border-color: #757575; 6067 } 6068 6069 .editor-avatar.is-dimmed .editor-avatar__img { 6070 filter: grayscale(1); 6071 } 6072 6073 .editor-avatar__status-indicator { 6074 position: absolute; 6075 top: 0; 6076 right: 0; 6077 width: 32px; 6078 height: 32px; 6079 display: flex; 6080 align-items: center; 6081 justify-content: center; 6082 z-index: 1; 6083 color: #1e1e1e; 6084 fill: #1e1e1e; 6085 } 6086 .is-small > .editor-avatar__status-indicator { 6087 width: 24px; 6088 height: 24px; 6089 } 6090 .editor-avatar__status-indicator svg { 6091 width: 75%; 6092 height: 75%; 6093 } 6094 6095 @media (prefers-reduced-motion: reduce) { 6096 .editor-avatar.is-badge, 6097 .editor-avatar__name { 6098 transition: none; 6099 } 6100 } 6101 .editor-avatar-group { 6102 display: flex; 6103 align-items: center; 6104 } 6105 .editor-avatar-group > .editor-avatar + .editor-avatar { 6106 margin-inline-start: -8px; 6107 } 6108 .editor-avatar-group > .editor-avatar { 6109 position: relative; 6110 } 6111 .editor-avatar-group > .editor-avatar:nth-child(1) { 6112 z-index: 10; 6113 } 6114 .editor-avatar-group > .editor-avatar:nth-child(2) { 6115 z-index: 9; 6116 } 6117 .editor-avatar-group > .editor-avatar:nth-child(3) { 6118 z-index: 8; 6119 } 6120 .editor-avatar-group > .editor-avatar:nth-child(4) { 6121 z-index: 7; 6122 } 6123 .editor-avatar-group > .editor-avatar:nth-child(5) { 6124 z-index: 6; 6125 } 6126 .editor-avatar-group > .editor-avatar:nth-child(6) { 6127 z-index: 5; 6128 } 6129 .editor-avatar-group > .editor-avatar:nth-child(7) { 6130 z-index: 4; 6131 } 6132 .editor-avatar-group > .editor-avatar:nth-child(8) { 6133 z-index: 3; 6134 } 6135 .editor-avatar-group > .editor-avatar:nth-child(9) { 6136 z-index: 2; 6137 } 6138 .editor-avatar-group > .editor-avatar:nth-child(10) { 6139 z-index: 1; 6140 } 6141 6142 .editor-avatar-group__overflow { 6143 margin-inline-start: 4px; 6144 margin-inline-end: 4px; 6145 font-size: 12px; 6146 line-height: 20px; 6147 color: #1e1e1e; 6148 white-space: nowrap; 6149 } 6150 6151 .editor-collaborators-presence__list.components-popover .components-popover__content { 6152 border: 1px solid #ddd; 6153 border-width: 1px 1px 0 0; 6154 border-radius: 8px; 6155 background: #fff; 6156 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.04), 0 6px 6px rgba(0, 0, 0, 0.03), 0 8px 8px rgba(0, 0, 0, 0.02); 6157 } 6158 .editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-content { 6159 min-width: 280px; 6160 } 6161 .editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header { 6162 display: flex; 6163 justify-content: space-between; 6164 align-items: center; 6165 padding: 8px 16px; 6166 } 6167 .editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header-title { 6168 font-size: 13px; 6169 font-weight: var(--wpds-typography-font-weight-emphasis, 600); 6170 line-height: 20px; 6171 display: flex; 6172 gap: 4px; 6173 } 6174 .editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header-title span { 6175 color: #757575; 6176 } 6177 .editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header-action { 6178 padding: 0; 6179 } 6180 .editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header-action button { 6181 color: #1e1e1e; 6182 height: 32px; 6183 width: 32px; 6184 padding: 0; 6185 } 6186 .editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-items { 6187 display: flex; 6188 flex-direction: column; 6189 padding-bottom: 16px; 6190 } 6191 .editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item { 6192 all: unset; 6193 box-sizing: border-box; 6194 display: flex; 6195 align-items: center; 6196 padding: 12px 16px; 6197 gap: 8px; 6198 width: 100%; 6199 cursor: var(--wpds-cursor-control, pointer); 6200 transition: background-color 0.2s ease; 6201 } 6202 .editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item:hover:not(:disabled) { 6203 background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04); 6204 } 6205 .editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item:active:not(:disabled) { 6206 background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08); 6207 } 6208 .editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item:focus-visible { 6209 outline: 2px solid var(--wp-admin-theme-color, #3858e9); 6210 outline-offset: -2px; 6211 } 6212 .editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item:disabled { 6213 cursor: default; 6214 } 6215 .editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item-info { 6216 display: flex; 6217 flex-direction: column; 6218 flex: 1; 6219 min-width: 0; 6220 } 6221 .editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item-name { 6222 font-size: 13px; 6223 font-weight: var(--wpds-typography-font-weight-emphasis, 600); 6224 line-height: 20px; 6225 color: #1e1e1e; 6226 overflow: hidden; 6227 text-overflow: ellipsis; 6228 white-space: nowrap; 6229 } 6230 6231 .editor-collaborators-presence { 6232 display: flex; 6233 align-items: center; 6234 flex-shrink: 0; 6235 height: 32px; 6236 background: #f0f0f0; 6237 border-radius: 4px; 6238 } 6239 .editor-collaborators-presence:hover { 6240 background-color: #e0e0e0; 6241 } 6242 .editor-collaborators-presence:has(.is-pressed) { 6243 background-color: #e0e0e0; 6244 } 6245 6246 .editor-header__center .editor-collaborators-presence { 6247 margin-left: 8px; 6248 } 6249 6250 .editor-collaborators-presence__button.editor-collaborators-presence__button.components-button { 6251 display: flex; 6252 align-items: center; 6253 cursor: var(--wpds-cursor-control, pointer); 6254 position: relative; 6255 padding: 4px; 6256 border-radius: 4px; 6257 height: 100%; 6258 box-sizing: border-box; 6259 color: #2f2f2f; 6260 background: transparent; 6261 } 6262 .editor-collaborators-presence__button.editor-collaborators-presence__button.components-button:hover { 6263 background: transparent; 6264 color: #2f2f2f; 6265 } 6266 .editor-collaborators-presence__button.editor-collaborators-presence__button.components-button.is-pressed, .editor-collaborators-presence__button.editor-collaborators-presence__button.components-button.is-pressed:hover { 6267 background: transparent; 6268 color: #2f2f2f; 6269 } 6270 .editor-collaborators-presence__button.editor-collaborators-presence__button.components-button:focus:not(:active) { 6271 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus, 2px) var(--wp-admin-theme-color, #007cba); 6272 outline: none; 6273 } 6274 6275 .editor-collapsible-block-toolbar { 6276 overflow: hidden; 6277 display: flex; 6278 align-items: center; 6279 height: 64px; 6280 } 6281 .editor-collapsible-block-toolbar .block-editor-block-contextual-toolbar { 6282 border-bottom: 0; 6283 height: 100%; 6284 background: transparent; 6285 } 6286 .editor-collapsible-block-toolbar .block-editor-block-toolbar { 6287 height: 100%; 6288 padding-top: 17px; 6289 } 6290 .editor-collapsible-block-toolbar .block-editor-block-toolbar .components-button:not(.block-editor-block-mover-button) { 6291 height: 32px; 6292 } 6293 .editor-collapsible-block-toolbar::after { 6294 content: ""; 6295 width: 1px; 6296 height: 24px; 6297 background-color: #ddd; 6298 margin-left: 7px; 6299 } 6300 .editor-collapsible-block-toolbar .components-toolbar-group, 6301 .editor-collapsible-block-toolbar .components-toolbar { 6302 border-left: none; 6303 position: relative; 6304 } 6305 .editor-collapsible-block-toolbar .components-toolbar-group::after, 6306 .editor-collapsible-block-toolbar .components-toolbar::after { 6307 content: ""; 6308 width: 1px; 6309 height: 24px; 6310 background-color: #ddd; 6311 top: 4px; 6312 position: absolute; 6313 left: -1px; 6314 } 6315 .editor-collapsible-block-toolbar .components-toolbar-group .components-toolbar-group.components-toolbar-group::after, 6316 .editor-collapsible-block-toolbar .components-toolbar .components-toolbar-group.components-toolbar-group::after { 6317 display: none; 6318 } 6319 .editor-collapsible-block-toolbar .block-editor-block-mover.is-horizontal .block-editor-block-mover-button { 6320 height: 32px; 6321 overflow: visible; 6322 } 6323 @media (min-width: 600px) { 6324 .editor-collapsible-block-toolbar .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container { 6325 height: 40px; 6326 position: relative; 6327 top: -4px; 6328 } 6329 } 6330 .editor-collapsible-block-toolbar.is-collapsed { 6331 display: none; 6332 } 6333 6334 .editor-block-visibility__disabled-blocks-count { 6335 border: 1px solid #ddd; 6336 border-width: 1px 0; 6337 box-shadow: 32px 0 0 0 #fff, -32px 0 0 0 #fff; 6338 padding: 8px; 6339 background-color: #fff; 6340 text-align: center; 6341 position: sticky; 6342 top: -5px; 6343 z-index: 1; 6344 } 6345 .editor-block-visibility__disabled-blocks-count ~ .block-editor-block-manager__content .block-editor-block-manager__category-title { 6346 top: 31px; 6347 } 6348 .editor-block-visibility__disabled-blocks-count .is-link { 6349 margin-right: 12px; 6350 } 6351 6352 .editor-blog-title-dropdown__content .components-popover__content { 6353 min-width: 320px; 6354 padding: 16px; 6355 } 6356 6357 .editor-document-bar { 6358 display: flex; 6359 align-items: center; 6360 height: 32px; 6361 justify-content: space-between; 6362 min-width: 0; 6363 background: #f0f0f0; 6364 border-radius: 4px; 6365 width: min(100%, 450px); 6366 } 6367 .editor-document-bar:hover { 6368 background-color: #e0e0e0; 6369 } 6370 .editor-document-bar .components-button { 6371 border-radius: 4px; 6372 } 6373 @media not (prefers-reduced-motion) { 6374 .editor-document-bar .components-button { 6375 transition: background-color 0.1s ease-out; 6376 } 6377 } 6378 .editor-document-bar .components-button:hover { 6379 background: #e0e0e0; 6380 } 6381 @media screen and (min-width: 782px) and (max-width: 960px) { 6382 .editor-document-bar.has-back-button .editor-document-bar__post-type-label { 6383 display: none; 6384 } 6385 } 6386 6387 .editor-document-bar__command { 6388 flex-grow: 1; 6389 color: var(--wp-block-synced-color); 6390 overflow: hidden; 6391 } 6392 6393 .editor-document-bar__title { 6394 overflow: hidden; 6395 color: #1e1e1e; 6396 margin: 0 auto; 6397 max-width: 70%; 6398 } 6399 .editor-document-bar__title h1 { 6400 display: flex; 6401 align-items: center; 6402 justify-content: center; 6403 font-weight: 400; 6404 white-space: nowrap; 6405 overflow: hidden; 6406 } 6407 6408 .editor-document-bar__post-title { 6409 color: currentColor; 6410 flex: 1; 6411 overflow: hidden; 6412 text-overflow: ellipsis; 6413 } 6414 6415 .editor-document-bar__post-type-label { 6416 flex: 0; 6417 color: #2f2f2f; 6418 padding-right: 4px; 6419 } 6420 @media screen and (max-width: 600px) { 6421 .editor-document-bar__post-type-label { 6422 display: none; 6423 } 6424 } 6425 6426 .editor-document-bar__back.components-button.has-icon.has-text { 6427 min-width: 36px; 6428 flex-shrink: 0; 6429 color: #757575; 6430 gap: 0; 6431 z-index: 1; 6432 position: absolute; 6433 } 6434 .editor-document-bar__back.components-button.has-icon.has-text:hover { 6435 color: #1e1e1e; 6436 background-color: transparent; 6437 } 6438 6439 .editor-document-bar__icon-layout.editor-document-bar__icon-layout { 6440 position: absolute; 6441 margin-right: 12px; 6442 display: none; 6443 pointer-events: none; 6444 } 6445 .editor-document-bar__icon-layout.editor-document-bar__icon-layout svg { 6446 fill: #949494; 6447 } 6448 @media (min-width: 600px) { 6449 .editor-document-bar__icon-layout.editor-document-bar__icon-layout { 6450 display: flex; 6451 } 6452 } 6453 6454 .document-outline ul { 6455 margin: 0; 6456 padding: 0; 6457 } 6458 6459 .document-outline__item { 6460 display: flex; 6461 margin: 4px 0; 6462 } 6463 .document-outline__item a { 6464 text-decoration: none; 6465 } 6466 .document-outline__item .document-outline__emdash::before { 6467 color: #ddd; 6468 margin-left: 4px; 6469 } 6470 .document-outline__item.is-h2 .document-outline__emdash::before { 6471 content: "—"; 6472 } 6473 .document-outline__item.is-h3 .document-outline__emdash::before { 6474 content: "——"; 6475 } 6476 .document-outline__item.is-h4 .document-outline__emdash::before { 6477 content: "———"; 6478 } 6479 .document-outline__item.is-h5 .document-outline__emdash::before { 6480 content: "————"; 6481 } 6482 .document-outline__item.is-h6 .document-outline__emdash::before { 6483 content: "—————"; 6484 } 6485 6486 .document-outline__button { 6487 cursor: var(--wpds-cursor-control, pointer); 6488 background: none; 6489 border: none; 6490 display: flex; 6491 align-items: flex-start; 6492 margin: 0 -1px 0 0; 6493 padding: 2px 1px 2px 5px; 6494 color: #1e1e1e; 6495 text-align: right; 6496 border-radius: 2px; 6497 } 6498 .document-outline__button[aria-disabled=true], .document-outline__button:disabled { 6499 cursor: default; 6500 color: #757575; 6501 } 6502 .document-outline__button:focus { 6503 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); 6504 outline: 2px solid transparent; 6505 } 6506 6507 .document-outline__level { 6508 background: #ddd; 6509 color: #1e1e1e; 6510 border-radius: 3px; 6511 font-size: 13px; 6512 padding: 1px 6px; 6513 margin-left: 4px; 6514 } 6515 .is-invalid .document-outline__level { 6516 background: #f0b849; 6517 } 6518 6519 .document-outline__item-content { 6520 padding: 1px 0; 6521 } 6522 6523 .editor-document-outline.has-no-headings > svg { 6524 margin-top: 28px; 6525 } 6526 .editor-document-outline.has-no-headings > p { 6527 padding-right: 32px; 6528 padding-left: 32px; 6529 } 6530 .editor-document-outline.has-no-headings { 6531 text-align: center; 6532 color: #757575; 6533 } 6534 6535 .editor-document-tools { 6536 display: inline-flex; 6537 align-items: center; 6538 } 6539 .editor-document-tools .editor-document-tools__left > .editor-history__redo, 6540 .editor-document-tools .editor-document-tools__left > .editor-history__undo { 6541 display: none; 6542 } 6543 @media (min-width: 782px) { 6544 .editor-document-tools .editor-document-tools__left > .editor-history__redo, 6545 .editor-document-tools .editor-document-tools__left > .editor-history__undo { 6546 display: inline-flex; 6547 } 6548 } 6549 .editor-document-tools .editor-document-tools__left > .editor-document-tools__inserter-toggle { 6550 display: inline-flex; 6551 } 6552 @media not (prefers-reduced-motion) { 6553 .editor-document-tools .editor-document-tools__left > .editor-document-tools__inserter-toggle svg { 6554 transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s; 6555 } 6556 } 6557 .editor-document-tools .editor-document-tools__left > .editor-document-tools__inserter-toggle.is-pressed svg { 6558 transform: rotate(-45deg); 6559 } 6560 .editor-document-tools .block-editor-list-view { 6561 display: none; 6562 } 6563 @media (min-width: 600px) { 6564 .editor-document-tools .block-editor-list-view { 6565 display: flex; 6566 } 6567 } 6568 .editor-document-tools .editor-document-tools__left > .components-button.has-icon, 6569 .editor-document-tools .editor-document-tools__left > .components-dropdown > .components-button.has-icon { 6570 height: 32px; 6571 min-width: 32px; 6572 padding: 4px; 6573 } 6574 .editor-document-tools .editor-document-tools__left > .components-button.has-icon.is-pressed, 6575 .editor-document-tools .editor-document-tools__left > .components-dropdown > .components-button.has-icon.is-pressed { 6576 background: #1e1e1e; 6577 } 6578 .editor-document-tools .editor-document-tools__left > .components-button.has-icon:focus:not(:disabled), 6579 .editor-document-tools .editor-document-tools__left > .components-dropdown > .components-button.has-icon:focus:not(:disabled) { 6580 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 1px #fff; 6581 outline: 1px solid transparent; 6582 } 6583 .editor-document-tools .editor-document-tools__left > .components-button.has-icon::before, 6584 .editor-document-tools .editor-document-tools__left > .components-dropdown > .components-button.has-icon::before { 6585 display: none; 6586 } 6587 6588 .editor-document-tools__left { 6589 display: inline-flex; 6590 align-items: center; 6591 gap: 8px; 6592 } 6593 .editor-document-tools__left:not(:last-child) { 6594 margin-inline-end: 8px; 6595 } 6596 6597 .show-icon-labels .editor-document-tools .editor-document-tools__left > .editor-document-tools__inserter-toggle.has-icon { 6598 width: auto; 6599 padding: 0 8px; 6600 } 6601 6602 .show-icon-labels .editor-document-tools__left > * + * { 6603 margin-right: 8px; 6604 } 6605 6606 .editor-editor-interface .entities-saved-states__panel-header { 6607 height: 65px; 6608 } 6609 6610 .editor-editor-interface .interface-interface-skeleton__content { 6611 isolation: isolate; 6612 } 6613 6614 .editor-editor-interface .editor-notices { 6615 padding: var(--wpds-dimension-padding-md, 12px); 6616 } 6617 6618 .editor-visual-editor { 6619 flex: 1 0 auto; 6620 } 6621 6622 .editor-notices__dismissible, 6623 .editor-notices__pinned { 6624 position: relative; 6625 right: 0; 6626 top: 0; 6627 left: 0; 6628 } 6629 6630 .entities-saved-states__panel-header { 6631 box-sizing: border-box; 6632 background: #fff; 6633 padding-right: 16px; 6634 padding-left: 16px; 6635 height: 64px; 6636 border-bottom: 1px solid #ddd; 6637 } 6638 6639 .entities-saved-states__text-prompt { 6640 padding: 16px; 6641 padding-bottom: 4px; 6642 } 6643 .entities-saved-states__text-prompt .entities-saved-states__text-prompt--header { 6644 display: block; 6645 margin-bottom: 12px; 6646 } 6647 6648 .entities-saved-states__panel.is-inline .entities-saved-states__text-prompt { 6649 padding: 0; 6650 } 6651 .entities-saved-states__panel.is-inline .entities-saved-states__panel-body { 6652 padding-right: 0; 6653 padding-left: 0; 6654 border: 0; 6655 } 6656 .entities-saved-states__panel.is-inline .entities-saved-states__panel-body > h2 { 6657 margin-right: -16px; 6658 margin-left: -16px; 6659 margin-bottom: 0; 6660 } 6661 .entities-saved-states__panel.is-inline .entities-saved-states__panel-body > h2 button { 6662 font-size: 11px; 6663 text-transform: uppercase; 6664 } 6665 .entities-saved-states__panel.is-inline .entities-saved-states__text-prompt--header-wrapper { 6666 display: none; 6667 } 6668 .entities-saved-states__panel.is-inline .entities-saved-states__text-prompt--changes-count { 6669 margin-top: 0; 6670 margin-bottom: 8px; 6671 } 6672 .entities-saved-states__panel.is-inline .entities-saved-states__panel-footer { 6673 margin-top: 16px; 6674 } 6675 6676 .entities-saved-states__change-control { 6677 flex: 1; 6678 } 6679 6680 .entities-saved-states__changes { 6681 font-size: 13px; 6682 margin: 4px 24px 0 16px; 6683 list-style: disc; 6684 } 6685 .entities-saved-states__changes li { 6686 margin-bottom: 4px; 6687 } 6688 6689 .editor-error-boundary { 6690 font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 6691 margin: auto; 6692 max-width: 780px; 6693 padding: 1em; 6694 margin-top: 64px; 6695 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08), 0 15px 27px rgba(0, 0, 0, 0.07), 0 30px 36px rgba(0, 0, 0, 0.04), 0 50px 43px rgba(0, 0, 0, 0.02); 6696 border: 1px solid #1e1e1e; 6697 border-radius: 2px; 6698 background-color: #fff; 6699 } 6700 6701 .editor-global-styles-header__description { 6702 padding: 0 16px; 6703 } 6704 6705 .editor-global-styles-header { 6706 margin-bottom: 0 !important; 6707 } 6708 6709 .editor-global-styles-sidebar { 6710 display: flex; 6711 flex-direction: column; 6712 min-height: 100%; 6713 } 6714 .editor-global-styles-sidebar__panel { 6715 flex: 1; 6716 } 6717 6718 .editor-global-styles-sidebar .editor-global-styles-sidebar__header-title { 6719 margin: 0; 6720 } 6721 6722 .editor-global-styles-sidebar .editor-global-styles-sidebar__header-actions { 6723 flex: 1; 6724 } 6725 6726 .editor-global-styles-sidebar .block-editor-panel-color-gradient-settings { 6727 border: 0; 6728 } 6729 6730 .editor-global-styles-sidebar .single-column { 6731 grid-column: span 1; 6732 } 6733 6734 .editor-global-styles-sidebar .components-tools-panel .span-columns { 6735 grid-column: 1/-1; 6736 } 6737 6738 .editor-global-styles-sidebar__blocks-group { 6739 padding-top: 24px; 6740 border-top: 1px solid #e0e0e0; 6741 } 6742 6743 .editor-global-styles-sidebar__blocks-group-help { 6744 padding: 0 16px; 6745 } 6746 6747 .global-styles-ui-color-palette-panel, 6748 .global-styles-ui-gradient-palette-panel { 6749 padding: 16px; 6750 } 6751 6752 .editor-global-styles-sidebar hr { 6753 margin: 0; 6754 } 6755 6756 .show-icon-labels .editor-global-styles-sidebar__header .components-button.has-icon { 6757 width: auto; 6758 } 6759 .show-icon-labels .editor-global-styles-sidebar__header .components-button.has-icon svg { 6760 display: none; 6761 } 6762 .show-icon-labels .editor-global-styles-sidebar__header .components-button.has-icon::after { 6763 content: attr(aria-label); 6764 font-size: 12px; 6765 } 6766 6767 .editor-welcome-guide { 6768 width: 312px; 6769 } 6770 .editor-welcome-guide.guide-styles .editor-welcome-guide__image { 6771 background: #00a0d2; 6772 } 6773 .editor-welcome-guide__image { 6774 margin: 0 0 16px; 6775 } 6776 .editor-welcome-guide__image > img { 6777 display: block; 6778 max-width: 100%; 6779 -o-object-fit: cover; 6780 object-fit: cover; 6781 } 6782 .editor-welcome-guide__heading { 6783 font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 6784 font-size: 24px; 6785 line-height: 1.4; 6786 margin: 16px 0 16px 0; 6787 padding: 0 32px; 6788 } 6789 .editor-welcome-guide__text { 6790 font-size: 13px; 6791 line-height: 1.4; 6792 margin: 0 0 16px 0; 6793 padding: 0 32px; 6794 } 6795 .editor-welcome-guide__text img { 6796 vertical-align: bottom; 6797 } 6798 .editor-welcome-guide .components-button:hover svg { 6799 fill: #fff; 6800 } 6801 6802 .editor-header { 6803 box-sizing: border-box; 6804 } 6805 .editor-header *, 6806 .editor-header *::before, 6807 .editor-header *::after { 6808 box-sizing: inherit; 6809 } 6810 .editor-header { 6811 height: 64px; 6812 background: #fff; 6813 display: grid; 6814 grid-auto-flow: row; 6815 grid-template: auto/32px minmax(0, max-content) minmax(min-content, 1fr) 64px; 6816 } 6817 .editor-header:has(> .editor-header__center) { 6818 grid-template: auto/32px min-content 1fr min-content 64px; 6819 } 6820 @media (min-width: 782px) { 6821 .editor-header:has(> .editor-header__center) { 6822 grid-template: auto/32px minmax(min-content, 2fr) 2.5fr minmax(min-content, 2fr) 64px; 6823 } 6824 } 6825 @media (min-width: 480px) { 6826 .editor-header { 6827 gap: 16px; 6828 } 6829 } 6830 .editor-header { 6831 align-items: center; 6832 max-width: 100vw; 6833 justify-content: space-between; 6834 } 6835 @media (min-width: 280px) { 6836 .editor-header { 6837 flex-wrap: nowrap; 6838 } 6839 } 6840 6841 .editor-header__back-button { 6842 padding-right: 8px; 6843 } 6844 6845 .editor-header__toolbar { 6846 grid-column: 1/3; 6847 } 6848 .editor-header__toolbar > :first-child { 6849 margin-inline: 16px 0; 6850 } 6851 .editor-header__back-button + .editor-header__toolbar { 6852 grid-column: 2/3; 6853 } 6854 @media (min-width: 480px) { 6855 .editor-header__back-button + .editor-header__toolbar > :first-child { 6856 margin-inline: 0; 6857 } 6858 } 6859 .editor-header__toolbar { 6860 display: flex; 6861 min-width: 0; 6862 align-items: center; 6863 clip-path: inset(-2px); 6864 } 6865 @media (min-width: 480px) { 6866 .editor-header__toolbar { 6867 clip-path: none; 6868 } 6869 } 6870 .editor-header__toolbar .table-of-contents { 6871 display: none; 6872 } 6873 @media (min-width: 600px) { 6874 .editor-header__toolbar .table-of-contents { 6875 display: block; 6876 } 6877 } 6878 .editor-header__toolbar .editor-collapsible-block-toolbar { 6879 margin-inline: 8px 0; 6880 } 6881 .editor-header__toolbar .editor-collapsible-block-toolbar.is-collapsed ~ .editor-collapsible-block-toolbar__toggle { 6882 margin-inline: 8px 0; 6883 } 6884 6885 .editor-header__center { 6886 grid-column: 3/4; 6887 display: flex; 6888 justify-content: center; 6889 align-items: center; 6890 min-width: 0; 6891 } 6892 @media (max-width: 479px) { 6893 .editor-header__center > :first-child { 6894 margin-inline-start: 8px; 6895 } 6896 .editor-header__center > :last-child { 6897 margin-inline-end: 8px; 6898 } 6899 } 6900 6901 /** 6902 * Buttons on the right side 6903 */ 6904 .editor-header__settings { 6905 grid-column: 3/-1; 6906 } 6907 .editor-header:has(> .editor-header__center) .editor-header__settings { 6908 grid-column: 4/-1; 6909 } 6910 .editor-header__settings { 6911 justify-self: end; 6912 display: inline-flex; 6913 align-items: center; 6914 flex-wrap: nowrap; 6915 padding-left: 4px; 6916 } 6917 @media (min-width: 600px) { 6918 .editor-header__settings { 6919 padding-left: 8px; 6920 } 6921 } 6922 .editor-header__settings { 6923 gap: 8px; 6924 } 6925 6926 /** 6927 * Show icon labels. 6928 */ 6929 .show-icon-labels.interface-pinned-items .components-button.has-icon, 6930 .show-icon-labels .editor-header .components-button.has-icon { 6931 width: auto; 6932 } 6933 .show-icon-labels.interface-pinned-items .components-button.has-icon svg, 6934 .show-icon-labels .editor-header .components-button.has-icon svg { 6935 display: none; 6936 } 6937 .show-icon-labels.interface-pinned-items .components-button.has-icon::after, 6938 .show-icon-labels .editor-header .components-button.has-icon::after { 6939 content: attr(aria-label); 6940 white-space: nowrap; 6941 } 6942 .show-icon-labels.interface-pinned-items .components-button.has-icon[aria-disabled=true], 6943 .show-icon-labels .editor-header .components-button.has-icon[aria-disabled=true] { 6944 background-color: transparent; 6945 } 6946 .show-icon-labels.interface-pinned-items .is-tertiary:active, 6947 .show-icon-labels .editor-header .is-tertiary:active { 6948 box-shadow: 0 0 0 1.5px var(--wp-admin-theme-color); 6949 background-color: transparent; 6950 } 6951 .show-icon-labels.interface-pinned-items .components-button.has-icon.button-toggle svg, 6952 .show-icon-labels .editor-header .components-button.has-icon.button-toggle svg { 6953 display: block; 6954 } 6955 .show-icon-labels.interface-pinned-items .components-button.has-icon.button-toggle::after, 6956 .show-icon-labels .editor-header .components-button.has-icon.button-toggle::after { 6957 content: none; 6958 } 6959 .show-icon-labels.interface-pinned-items .components-menu-items-choice .components-menu-items__item-icon.components-menu-items__item-icon, 6960 .show-icon-labels .editor-header .components-menu-items-choice .components-menu-items__item-icon.components-menu-items__item-icon { 6961 display: block; 6962 } 6963 .show-icon-labels.interface-pinned-items .editor-document-tools__inserter-toggle.editor-document-tools__inserter-toggle, 6964 .show-icon-labels.interface-pinned-items .interface-pinned-items .components-button, 6965 .show-icon-labels .editor-header .editor-document-tools__inserter-toggle.editor-document-tools__inserter-toggle, 6966 .show-icon-labels .editor-header .interface-pinned-items .components-button { 6967 padding-right: 8px; 6968 padding-left: 8px; 6969 } 6970 @media (min-width: 600px) { 6971 .show-icon-labels.interface-pinned-items .editor-document-tools__inserter-toggle.editor-document-tools__inserter-toggle, 6972 .show-icon-labels.interface-pinned-items .interface-pinned-items .components-button, 6973 .show-icon-labels .editor-header .editor-document-tools__inserter-toggle.editor-document-tools__inserter-toggle, 6974 .show-icon-labels .editor-header .interface-pinned-items .components-button { 6975 padding-right: 12px; 6976 padding-left: 12px; 6977 } 6978 } 6979 .show-icon-labels.interface-pinned-items .editor-post-save-draft.editor-post-save-draft::after, 6980 .show-icon-labels.interface-pinned-items .editor-post-saved-state.editor-post-saved-state::after, 6981 .show-icon-labels .editor-header .editor-post-save-draft.editor-post-save-draft::after, 6982 .show-icon-labels .editor-header .editor-post-saved-state.editor-post-saved-state::after { 6983 content: none; 6984 } 6985 6986 .show-icon-labels .editor-header__toolbar .block-editor-block-mover { 6987 border-right: none; 6988 } 6989 .show-icon-labels .editor-header__toolbar .block-editor-block-mover::before { 6990 content: ""; 6991 width: 1px; 6992 height: 24px; 6993 background-color: #ddd; 6994 margin-top: 4px; 6995 margin-right: 8px; 6996 } 6997 .show-icon-labels .editor-header__toolbar .block-editor-block-mover .block-editor-block-mover__move-button-container::before { 6998 width: calc(100% - 24px); 6999 background: #ddd; 7000 right: calc(50% + 1px); 7001 } 7002 7003 .show-icon-labels.interface-pinned-items { 7004 padding: 6px 12px 12px; 7005 margin-top: 0; 7006 margin-bottom: 0; 7007 margin-right: -12px; 7008 margin-left: -12px; 7009 border-bottom: 1px solid #ccc; 7010 display: block; 7011 } 7012 .show-icon-labels.interface-pinned-items > .components-button.has-icon { 7013 margin: 0; 7014 padding: 6px 8px 6px 6px; 7015 width: 14.625rem; 7016 justify-content: flex-start; 7017 } 7018 .show-icon-labels.interface-pinned-items > .components-button.has-icon[aria-expanded=true] svg { 7019 display: block; 7020 max-width: 24px; 7021 } 7022 .show-icon-labels.interface-pinned-items > .components-button.has-icon[aria-expanded=false] { 7023 padding-right: 40px; 7024 } 7025 .show-icon-labels.interface-pinned-items > .components-button.has-icon svg { 7026 margin-left: 8px; 7027 } 7028 7029 @media (min-width: 480px) { 7030 .editor-header__post-preview-button { 7031 display: none; 7032 } 7033 } 7034 7035 .editor-editor-interface.is-distraction-free .interface-interface-skeleton__header { 7036 border-bottom: none; 7037 } 7038 .editor-editor-interface.is-distraction-free .editor-header { 7039 background-color: #fff; 7040 width: 100%; 7041 } 7042 @media (min-width: 782px) { 7043 .editor-editor-interface.is-distraction-free .editor-header { 7044 box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.133); 7045 position: absolute; 7046 } 7047 } 7048 .editor-editor-interface.is-distraction-free .editor-header > .edit-post-header__settings > .edit-post-header__post-preview-button { 7049 visibility: hidden; 7050 } 7051 .editor-editor-interface.is-distraction-free .editor-header > .editor-header__toolbar .editor-document-tools__document-overview-toggle, .editor-editor-interface.is-distraction-free .editor-header > .editor-header__settings > .editor-preview-dropdown, .editor-editor-interface.is-distraction-free .editor-header > .editor-header__settings > .interface-pinned-items, .editor-editor-interface.is-distraction-free .editor-header > .editor-header__settings > .editor-zoom-out-toggle { 7052 display: none; 7053 } 7054 .editor-editor-interface.is-distraction-free .interface-interface-skeleton__header:focus-within { 7055 opacity: 1 !important; 7056 } 7057 .editor-editor-interface.is-distraction-free .interface-interface-skeleton__header:focus-within div { 7058 transform: translateX(0) translateZ(0) !important; 7059 } 7060 .editor-editor-interface.is-distraction-free .components-editor-notices__dismissible { 7061 position: absolute; 7062 z-index: 35; 7063 } 7064 7065 .components-popover.more-menu-dropdown__content { 7066 z-index: 99998; 7067 } 7068 7069 .editor-inserter-sidebar { 7070 box-sizing: border-box; 7071 } 7072 .editor-inserter-sidebar *, 7073 .editor-inserter-sidebar *::before, 7074 .editor-inserter-sidebar *::after { 7075 box-sizing: inherit; 7076 } 7077 .editor-inserter-sidebar { 7078 height: 100%; 7079 display: flex; 7080 flex-direction: column; 7081 } 7082 7083 .editor-inserter-sidebar__content { 7084 height: 100%; 7085 } 7086 7087 .editor-keyboard-shortcut-help-modal__section { 7088 margin: 0 0 2rem 0; 7089 } 7090 .editor-keyboard-shortcut-help-modal__section-title { 7091 font-size: 0.9rem; 7092 font-weight: var(--wpds-typography-font-weight-emphasis, 600); 7093 } 7094 .editor-keyboard-shortcut-help-modal__shortcut { 7095 display: flex; 7096 align-items: baseline; 7097 padding: 0.6rem 0; 7098 border-top: 1px solid #ddd; 7099 margin-bottom: 0; 7100 } 7101 .editor-keyboard-shortcut-help-modal__shortcut:last-child { 7102 border-bottom: 1px solid #ddd; 7103 } 7104 .editor-keyboard-shortcut-help-modal__shortcut:empty { 7105 display: none; 7106 } 7107 .editor-keyboard-shortcut-help-modal__shortcut-term { 7108 font-weight: var(--wpds-typography-font-weight-emphasis, 600); 7109 margin: 0 1rem 0 0; 7110 text-align: left; 7111 } 7112 .editor-keyboard-shortcut-help-modal__shortcut-description { 7113 flex: 1; 7114 margin: 0; 7115 } 7116 .editor-keyboard-shortcut-help-modal__shortcut-key-combination { 7117 display: block; 7118 background: none; 7119 margin: 0; 7120 padding: 0; 7121 } 7122 .editor-keyboard-shortcut-help-modal__shortcut-key-combination + .editor-keyboard-shortcut-help-modal__shortcut-key-combination { 7123 margin-top: 10px; 7124 } 7125 .editor-keyboard-shortcut-help-modal__shortcut-key { 7126 padding: 0.25rem 0.5rem; 7127 border-radius: 8%; 7128 margin: 0 0.2rem 0 0.2rem; 7129 } 7130 .editor-keyboard-shortcut-help-modal__shortcut-key:last-child { 7131 margin: 0 0.2rem 0 0; 7132 } 7133 7134 .editor-list-view-sidebar { 7135 height: 100%; 7136 } 7137 @media (min-width: 782px) { 7138 .editor-list-view-sidebar { 7139 width: 350px; 7140 } 7141 } 7142 7143 .editor-list-view-sidebar__list-view-panel-content, 7144 .editor-list-view-sidebar__list-view-container > .document-outline { 7145 height: 100%; 7146 } 7147 .editor-list-view-sidebar__list-view-panel-content::-webkit-scrollbar, 7148 .editor-list-view-sidebar__list-view-container > .document-outline::-webkit-scrollbar { 7149 width: 12px; 7150 height: 12px; 7151 } 7152 .editor-list-view-sidebar__list-view-panel-content::-webkit-scrollbar-track, 7153 .editor-list-view-sidebar__list-view-container > .document-outline::-webkit-scrollbar-track { 7154 background-color: transparent; 7155 } 7156 .editor-list-view-sidebar__list-view-panel-content::-webkit-scrollbar-thumb, 7157 .editor-list-view-sidebar__list-view-container > .document-outline::-webkit-scrollbar-thumb { 7158 background-color: transparent; 7159 border-radius: 8px; 7160 border: 3px solid transparent; 7161 background-clip: padding-box; 7162 } 7163 .editor-list-view-sidebar__list-view-panel-content:hover::-webkit-scrollbar-thumb, .editor-list-view-sidebar__list-view-panel-content:focus::-webkit-scrollbar-thumb, .editor-list-view-sidebar__list-view-panel-content:focus-within::-webkit-scrollbar-thumb, 7164 .editor-list-view-sidebar__list-view-container > .document-outline:hover::-webkit-scrollbar-thumb, 7165 .editor-list-view-sidebar__list-view-container > .document-outline:focus::-webkit-scrollbar-thumb, 7166 .editor-list-view-sidebar__list-view-container > .document-outline:focus-within::-webkit-scrollbar-thumb { 7167 background-color: #949494; 7168 } 7169 .editor-list-view-sidebar__list-view-panel-content, 7170 .editor-list-view-sidebar__list-view-container > .document-outline { 7171 scrollbar-width: thin; 7172 scrollbar-gutter: stable both-edges; 7173 scrollbar-color: transparent transparent; 7174 } 7175 .editor-list-view-sidebar__list-view-panel-content:hover, .editor-list-view-sidebar__list-view-panel-content:focus, .editor-list-view-sidebar__list-view-panel-content:focus-within, 7176 .editor-list-view-sidebar__list-view-container > .document-outline:hover, 7177 .editor-list-view-sidebar__list-view-container > .document-outline:focus, 7178 .editor-list-view-sidebar__list-view-container > .document-outline:focus-within { 7179 scrollbar-color: #949494 transparent; 7180 } 7181 .editor-list-view-sidebar__list-view-panel-content, 7182 .editor-list-view-sidebar__list-view-container > .document-outline { 7183 will-change: transform; 7184 } 7185 @media (hover: none) { 7186 .editor-list-view-sidebar__list-view-panel-content, 7187 .editor-list-view-sidebar__list-view-container > .document-outline { 7188 scrollbar-color: #949494 transparent; 7189 } 7190 } 7191 .editor-list-view-sidebar__list-view-panel-content, 7192 .editor-list-view-sidebar__list-view-container > .document-outline { 7193 overflow: auto; 7194 scrollbar-gutter: auto; 7195 } 7196 7197 .editor-list-view-sidebar__list-view-panel-content { 7198 padding: 4px; 7199 } 7200 7201 .editor-list-view-sidebar__list-view-container { 7202 display: flex; 7203 flex-direction: column; 7204 height: 100%; 7205 } 7206 .editor-list-view-sidebar__list-view-container > .document-outline { 7207 padding: 16px; 7208 } 7209 7210 .editor-list-view-sidebar__tab-panel { 7211 height: 100%; 7212 } 7213 7214 .editor-list-view-sidebar__outline { 7215 display: flex; 7216 flex-direction: column; 7217 gap: 8px; 7218 border-bottom: 1px solid #ddd; 7219 padding: 16px; 7220 } 7221 .editor-list-view-sidebar__outline > div > span:first-child { 7222 width: 90px; 7223 display: inline-block; 7224 } 7225 .editor-list-view-sidebar__outline > div > span { 7226 font-size: 12px; 7227 line-height: 1.4; 7228 color: #757575; 7229 } 7230 7231 .editor-post-parent__panel, 7232 .editor-post-order__panel { 7233 padding-top: 8px; 7234 } 7235 .editor-post-parent__panel .editor-post-panel__row-control > div, 7236 .editor-post-order__panel .editor-post-panel__row-control > div { 7237 width: 100%; 7238 } 7239 7240 .editor-post-parent__panel-dialog .editor-post-parent, 7241 .editor-post-parent__panel-dialog .editor-post-order, 7242 .editor-post-order__panel-dialog .editor-post-parent, 7243 .editor-post-order__panel-dialog .editor-post-order { 7244 margin: 8px; 7245 } 7246 .editor-post-parent__panel-dialog .components-popover__content, 7247 .editor-post-order__panel-dialog .components-popover__content { 7248 min-width: 320px; 7249 } 7250 7251 .editor-post-author__panel { 7252 padding-top: 8px; 7253 } 7254 7255 .editor-post-author__panel .editor-post-panel__row-control > div { 7256 width: 100%; 7257 } 7258 7259 .editor-post-author__panel-dialog .editor-post-author { 7260 min-width: 248px; 7261 margin: 8px; 7262 } 7263 7264 .editor-action-modal { 7265 z-index: 1000001; 7266 } 7267 7268 .editor-post-card-panel__content { 7269 flex-grow: 1; 7270 } 7271 .editor-post-card-panel__title { 7272 width: 100%; 7273 } 7274 .editor-post-card-panel__title.editor-post-card-panel__title { 7275 font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 7276 font-weight: var(--wpds-typography-font-weight-emphasis, 600); 7277 font-size: 13px; 7278 line-height: 20px; 7279 margin: 0; 7280 display: flex; 7281 align-items: center; 7282 flex-wrap: wrap; 7283 -moz-column-gap: 8px; 7284 column-gap: 8px; 7285 row-gap: 4px; 7286 word-break: break-word; 7287 } 7288 .editor-post-card-panel__icon { 7289 flex: 0 0 24px; 7290 width: 24px; 7291 height: 24px; 7292 } 7293 .editor-post-card-panel__header { 7294 display: flex; 7295 justify-content: space-between; 7296 } 7297 .editor-post-card-panel.has-description .editor-post-card-panel__header { 7298 margin-bottom: 8px; 7299 } 7300 .editor-post-card-panel .editor-post-card-panel__title-name { 7301 padding: 2px 0; 7302 } 7303 .editor-post-card-panel .editor-post-card-panel__description { 7304 color: #757575; 7305 } 7306 7307 .editor-post-content-information { 7308 color: #757575; 7309 } 7310 .editor-post-content-information .components-text { 7311 color: inherit; 7312 } 7313 7314 .editor-post-discussion__panel-dialog .editor-post-discussion { 7315 min-width: 248px; 7316 margin: 8px; 7317 } 7318 7319 .editor-post-discussion__panel-toggle .components-text { 7320 color: inherit; 7321 } 7322 7323 .editor-post-discussion__panel-dialog .components-popover__content { 7324 min-width: 320px; 7325 } 7326 7327 .editor-post-excerpt__textarea { 7328 width: 100%; 7329 margin-bottom: 10px; 7330 } 7331 7332 .editor-post-excerpt__dropdown__content .components-popover__content { 7333 min-width: 320px; 7334 padding: 16px; 7335 } 7336 7337 .editor-post-featured-image { 7338 padding: 0; 7339 } 7340 .editor-post-featured-image .hidden { 7341 display: none; 7342 } 7343 .editor-post-featured-image .components-spinner { 7344 position: absolute; 7345 top: 50%; 7346 right: 50%; 7347 margin-top: -9px; 7348 margin-right: -9px; 7349 } 7350 7351 .editor-post-featured-image__container { 7352 position: relative; 7353 } 7354 .editor-post-featured-image__container:hover .editor-post-featured-image__actions:not(.editor-post-featured-image__actions-is-requesting-image), .editor-post-featured-image__container:focus .editor-post-featured-image__actions:not(.editor-post-featured-image__actions-is-requesting-image), .editor-post-featured-image__container:focus-within .editor-post-featured-image__actions:not(.editor-post-featured-image__actions-is-requesting-image) { 7355 opacity: 1; 7356 } 7357 .editor-post-featured-image__container .editor-post-featured-image__actions.editor-post-featured-image__actions-missing-image { 7358 opacity: 1; 7359 margin-top: 16px; 7360 } 7361 .editor-post-featured-image__container .components-drop-zone__content { 7362 border-radius: 2px; 7363 } 7364 .editor-post-featured-image__container:has(.editor-post-featured-image__toggle) .components-drop-zone .components-drop-zone__content-inner { 7365 display: flex; 7366 align-items: center; 7367 gap: 8px; 7368 } 7369 .editor-post-featured-image__container:has(.editor-post-featured-image__toggle) .components-drop-zone .components-drop-zone__content-inner .components-drop-zone__content-icon { 7370 margin: 0; 7371 } 7372 7373 .editor-post-featured-image__toggle, 7374 .editor-post-featured-image__preview { 7375 width: 100%; 7376 padding: 0; 7377 border-color: #ccc; 7378 overflow: hidden; 7379 outline-offset: -1px; 7380 min-height: 40px; 7381 display: flex; 7382 justify-content: center; 7383 } 7384 7385 .editor-post-featured-image__preview { 7386 height: auto !important; 7387 outline: 1px solid rgba(0, 0, 0, 0.1); 7388 background-image: repeating-linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0), repeating-linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0); 7389 background-position: 0 0, 12px 12px; 7390 background-size: 24px 24px; 7391 } 7392 .editor-post-featured-image__preview .editor-post-featured-image__preview-image { 7393 -o-object-fit: cover; 7394 object-fit: cover; 7395 width: 100%; 7396 -o-object-position: 50% 50%; 7397 object-position: 50% 50%; 7398 aspect-ratio: 2/1; 7399 } 7400 7401 .editor-post-featured-image__actions:not(.editor-post-featured-image__actions-missing-image) { 7402 bottom: 0; 7403 opacity: 0; 7404 padding: 8px; 7405 position: absolute; 7406 } 7407 @media not (prefers-reduced-motion) { 7408 .editor-post-featured-image__actions:not(.editor-post-featured-image__actions-missing-image) { 7409 transition: opacity 50ms ease-out; 7410 } 7411 } 7412 .editor-post-featured-image__actions:not(.editor-post-featured-image__actions-missing-image) .editor-post-featured-image__action { 7413 backdrop-filter: blur(16px) saturate(180%); 7414 background: rgba(255, 255, 255, 0.75); 7415 } 7416 .editor-post-featured-image__actions .editor-post-featured-image__action { 7417 flex-grow: 1; 7418 justify-content: center; 7419 } 7420 7421 [class].editor-post-format__suggestion { 7422 margin: 4px 0 0 0; 7423 } 7424 7425 .editor-post-format__dialog .editor-post-format__dialog-content { 7426 min-width: 248px; 7427 margin: 8px; 7428 } 7429 7430 .editor-post-last-edited-panel { 7431 color: #757575; 7432 } 7433 .editor-post-last-edited-panel .components-text { 7434 color: inherit; 7435 } 7436 7437 .editor-post-last-revision__title { 7438 width: 100%; 7439 font-weight: var(--wpds-typography-font-weight-emphasis, 600); 7440 } 7441 7442 .editor-post-last-revision__title.components-button.has-icon { 7443 height: 100%; 7444 justify-content: space-between; 7445 } 7446 .editor-post-last-revision__title.components-button.has-icon:hover, .editor-post-last-revision__title.components-button.has-icon:active { 7447 background: #f0f0f0; 7448 } 7449 .editor-post-last-revision__title.components-button.has-icon:focus { 7450 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); 7451 border-radius: 0; 7452 } 7453 7454 .components-panel__body.is-opened.editor-post-last-revision__panel { 7455 padding: 0; 7456 height: 48px; 7457 } 7458 .components-panel__body.is-opened.editor-post-last-revision__panel .editor-post-last-revision__title.components-button.components-button { 7459 padding: 16px; 7460 } 7461 7462 .editor-post-locked-modal__buttons { 7463 margin-top: 24px; 7464 } 7465 7466 .editor-post-locked-modal__avatar { 7467 border-radius: 50%; 7468 margin-top: 16px; 7469 min-width: initial !important; 7470 } 7471 7472 .editor-post-panel__row { 7473 width: 100%; 7474 min-height: 32px; 7475 justify-content: flex-start !important; 7476 align-items: flex-start !important; 7477 } 7478 7479 .editor-post-panel__row-label { 7480 width: 38%; 7481 flex-shrink: 0; 7482 min-height: 32px; 7483 display: flex; 7484 align-items: center; 7485 padding: 6px 0; 7486 line-height: 20px; 7487 hyphens: auto; 7488 word-break: break-word; 7489 } 7490 7491 .editor-post-panel__row-control { 7492 flex-grow: 1; 7493 min-height: 32px; 7494 display: flex; 7495 align-items: center; 7496 } 7497 .editor-post-panel__row-control .components-button { 7498 max-width: 100%; 7499 text-align: right; 7500 white-space: normal; 7501 text-wrap: balance; 7502 text-wrap: pretty; 7503 height: auto; 7504 min-height: 32px; 7505 font-weight: var(--wpds-typography-font-weight-default, 400); 7506 } 7507 .editor-post-panel__row-control .components-dropdown { 7508 max-width: 100%; 7509 } 7510 7511 .editor-post-panel__section { 7512 padding: 16px; 7513 } 7514 7515 .editor-post-publish-panel__content { 7516 min-height: calc(100% - 148px); 7517 } 7518 .editor-post-publish-panel__content > .components-spinner { 7519 display: block; 7520 margin: 100px auto 0; 7521 } 7522 7523 .editor-post-publish-panel__header { 7524 background: #fff; 7525 padding-right: 16px; 7526 padding-left: 16px; 7527 height: 65px; 7528 border-bottom: 1px solid #ddd; 7529 display: flex; 7530 align-items: center; 7531 align-content: space-between; 7532 } 7533 .editor-post-publish-panel__header .components-button { 7534 width: 100%; 7535 justify-content: center; 7536 } 7537 .editor-post-publish-panel__header .has-icon { 7538 margin-right: auto; 7539 width: auto; 7540 } 7541 7542 .components-site-card { 7543 display: flex; 7544 align-items: center; 7545 margin: 16px 0; 7546 } 7547 7548 .components-site-icon { 7549 border: none; 7550 border-radius: 2px; 7551 margin-left: 12px; 7552 flex-shrink: 0; 7553 height: 36px; 7554 width: 36px; 7555 } 7556 7557 .components-site-name { 7558 display: block; 7559 font-size: 14px; 7560 } 7561 7562 .components-site-home { 7563 display: block; 7564 color: #757575; 7565 font-size: 12px; 7566 word-break: break-word; 7567 } 7568 7569 .editor-post-publish-panel__header-publish-button, 7570 .editor-post-publish-panel__header-cancel-button { 7571 flex: 1; 7572 } 7573 @media (min-width: 480px) { 7574 .editor-post-publish-panel__header-publish-button, 7575 .editor-post-publish-panel__header-cancel-button { 7576 max-width: 160px; 7577 } 7578 } 7579 7580 .editor-post-publish-panel__header-publish-button { 7581 padding-right: 4px; 7582 justify-content: center; 7583 } 7584 7585 .editor-post-publish-panel__header-cancel-button { 7586 padding-left: 4px; 7587 } 7588 7589 .editor-post-publish-panel__header-published { 7590 flex-grow: 1; 7591 } 7592 7593 .editor-post-publish-panel__footer { 7594 padding: 16px; 7595 } 7596 7597 .components-button.editor-post-publish-panel__toggle.is-primary { 7598 display: inline-flex; 7599 align-items: center; 7600 } 7601 .components-button.editor-post-publish-panel__toggle.is-primary.is-busy .dashicon { 7602 display: none; 7603 } 7604 .components-button.editor-post-publish-panel__toggle.is-primary .dashicon { 7605 margin-left: -4px; 7606 } 7607 7608 .editor-post-publish-panel__link { 7609 font-weight: 400; 7610 padding-right: 4px; 7611 } 7612 7613 .editor-post-publish-panel__prepublish { 7614 padding: 16px; 7615 } 7616 .editor-post-publish-panel__prepublish strong { 7617 color: #1e1e1e; 7618 } 7619 .editor-post-publish-panel__prepublish .components-panel__body { 7620 background: #fff; 7621 margin-right: -16px; 7622 margin-left: -16px; 7623 } 7624 .editor-post-publish-panel__prepublish .editor-post-visibility__dialog-legend { 7625 display: none; 7626 } 7627 .editor-post-publish-panel__prepublish .components-panel__body-title .components-button { 7628 align-items: flex-start; 7629 text-wrap: balance; 7630 text-wrap: pretty; 7631 } 7632 7633 .post-publish-panel__postpublish .components-panel__body { 7634 border-bottom: 1px solid #e0e0e0; 7635 border-top: none; 7636 word-break: break-word; 7637 } 7638 7639 .post-publish-panel__postpublish-buttons { 7640 display: flex; 7641 align-content: space-between; 7642 flex-wrap: wrap; 7643 gap: 16px; 7644 } 7645 .post-publish-panel__postpublish-buttons .components-button, 7646 .post-publish-panel__postpublish-buttons .components-button.has-icon { 7647 justify-content: center; 7648 flex: 1; 7649 min-width: unset; 7650 } 7651 .post-publish-panel__postpublish-buttons .components-clipboard-button { 7652 width: 100%; 7653 } 7654 7655 .post-publish-panel__postpublish-post-address-container { 7656 display: flex; 7657 align-items: flex-end; 7658 margin-bottom: 16px; 7659 } 7660 .post-publish-panel__postpublish-post-address-container .post-publish-panel__postpublish-post-address { 7661 flex: 1; 7662 } 7663 .post-publish-panel__postpublish-post-address-container input[readonly] { 7664 padding: 12px; 7665 background: #f0f0f0; 7666 border-color: #ccc; 7667 overflow: hidden; 7668 text-overflow: ellipsis; 7669 height: 36px; 7670 } 7671 7672 .post-publish-panel__postpublish-post-address__copy-button-wrap { 7673 flex-shrink: 0; 7674 margin-right: 16px; 7675 } 7676 7677 .post-publish-panel__postpublish-header { 7678 font-weight: var(--wpds-typography-font-weight-emphasis, 600); 7679 } 7680 7681 .post-publish-panel__postpublish-subheader { 7682 margin: 0 0 8px; 7683 } 7684 7685 .post-publish-panel__tip { 7686 color: #f0b849; 7687 } 7688 7689 @media screen and (max-width: 782px) { 7690 .post-publish-panel__postpublish-post-address__button-wrap .components-button { 7691 height: 40px; 7692 } 7693 } 7694 .editor-post-publish-panel { 7695 box-sizing: border-box; 7696 } 7697 .editor-post-publish-panel *, 7698 .editor-post-publish-panel *::before, 7699 .editor-post-publish-panel *::after { 7700 box-sizing: inherit; 7701 } 7702 .editor-post-publish-panel { 7703 position: fixed; 7704 z-index: 100001; 7705 background: #fff; 7706 top: 46px; 7707 bottom: 0; 7708 left: 0; 7709 right: 0; 7710 overflow: auto; 7711 } 7712 @media (min-width: 782px) { 7713 .editor-post-publish-panel { 7714 z-index: 99998; 7715 top: 32px; 7716 right: auto; 7717 width: 281px; 7718 border-right: 1px solid #ddd; 7719 } 7720 } 7721 @media (min-width: 782px) and (not (prefers-reduced-motion)) { 7722 .editor-post-publish-panel { 7723 transform: translateX(-100%); 7724 animation: editor-post-publish-panel__slide-in-animation 0.1s forwards; 7725 } 7726 } 7727 @media (min-width: 782px) { 7728 body.is-fullscreen-mode .editor-post-publish-panel { 7729 top: var(--wp-admin--admin-bar--height, 0); 7730 } 7731 [role=region]:focus .editor-post-publish-panel { 7732 transform: translateX(0%); 7733 } 7734 } 7735 7736 @keyframes editor-post-publish-panel__slide-in-animation { 7737 100% { 7738 transform: translateX(0%); 7739 } 7740 } 7741 .editor-revisions-header__slider { 7742 width: 100%; 7743 } 7744 .editor-revisions-header__slider .components-range-control__tooltip { 7745 white-space: nowrap; 7746 } 7747 7748 .editor-revisions-header__no-revisions { 7749 color: #757575; 7750 font-size: 13px; 7751 } 7752 7753 .editor-revisions-canvas__loading { 7754 display: flex; 7755 align-items: center; 7756 justify-content: center; 7757 height: 100%; 7758 } 7759 7760 .editor-revisions-canvas__content { 7761 display: flex; 7762 height: 100%; 7763 } 7764 .editor-revisions-canvas__content .editor-visual-editor { 7765 flex: 1; 7766 min-width: 0; 7767 } 7768 7769 .revision-diff-markers { 7770 position: relative; 7771 flex-shrink: 0; 7772 width: max(16px, 1rem); 7773 background: rgba(0, 0, 0, 0.05); 7774 } 7775 .revision-diff-markers .revision-diff-marker { 7776 position: absolute; 7777 width: 100%; 7778 min-height: 4px; 7779 border: none; 7780 padding: 0; 7781 cursor: var(--wpds-cursor-control, pointer); 7782 transition: opacity 0.1s ease; 7783 } 7784 .revision-diff-markers .revision-diff-marker.is-added { 7785 background: #008a20; 7786 } 7787 .revision-diff-markers .revision-diff-marker.is-removed { 7788 background: repeating-linear-gradient(-45deg, #d63638, #d63638 6px, rgba(214, 54, 56, 0.45) 6px, rgba(214, 54, 56, 0.45) 8px); 7789 } 7790 .revision-diff-markers .revision-diff-marker.is-modified { 7791 background: repeating-linear-gradient(45deg, #9a7000, #9a7000 6px, rgba(154, 112, 0, 0.45) 6px, rgba(154, 112, 0, 0.45) 8px); 7792 } 7793 .revision-diff-markers .revision-diff-marker:hover { 7794 opacity: 0.7; 7795 } 7796 .revision-diff-markers .revision-diff-marker:focus { 7797 outline: 2px solid #1e1e1e; 7798 outline-offset: -2px; 7799 } 7800 7801 .interface-complementary-area:has(.editor-post-revisions-timeline) { 7802 display: flex; 7803 flex-direction: column; 7804 overflow: hidden; 7805 } 7806 .interface-complementary-area:has(.editor-post-revisions-timeline) .editor-sidebar__panel-tabs { 7807 flex-shrink: 0; 7808 } 7809 7810 .editor-sidebar__panel:has(.editor-post-revisions-timeline) { 7811 display: flex; 7812 flex-direction: column; 7813 flex: 1; 7814 min-height: 0; 7815 } 7816 .editor-sidebar__panel:has(.editor-post-revisions-timeline) [role=tabpanel]:has(.editor-post-revisions-timeline) { 7817 display: flex; 7818 flex-direction: column; 7819 flex: 1; 7820 min-height: 0; 7821 } 7822 .editor-sidebar__panel:has(.editor-post-revisions-timeline) .editor-revision-meta-diff__content { 7823 max-height: 80px; 7824 overflow-y: auto; 7825 } 7826 .editor-sidebar__panel:has(.editor-post-revisions-timeline) .editor-post-revisions-timeline { 7827 flex: 1; 7828 min-height: 0; 7829 } 7830 7831 .editor-revision-fields-diff__value { 7832 word-break: break-word; 7833 } 7834 7835 .editor-revision-fields-diff__added { 7836 background-color: color-mix(in srgb, currentColor 5%, #00a32a 15%); 7837 text-decoration: none; 7838 } 7839 7840 .editor-revision-fields-diff__removed { 7841 text-decoration: line-through; 7842 color: #d63638; 7843 } 7844 7845 .editor-post-saved-state { 7846 display: flex; 7847 align-items: center; 7848 width: 28px; 7849 padding: 12px 4px; 7850 color: #757575; 7851 overflow: hidden; 7852 white-space: nowrap; 7853 } 7854 .editor-post-saved-state.is-saving[aria-disabled=true], .editor-post-saved-state.is-saving[aria-disabled=true]:hover, .editor-post-saved-state.is-saved[aria-disabled=true], .editor-post-saved-state.is-saved[aria-disabled=true]:hover { 7855 background: transparent; 7856 color: #757575; 7857 } 7858 .editor-post-saved-state svg { 7859 display: inline-block; 7860 flex: 0 0 auto; 7861 fill: currentColor; 7862 margin-left: 8px; 7863 } 7864 @media (min-width: 600px) { 7865 .editor-post-saved-state { 7866 width: auto; 7867 padding: 8px 12px; 7868 text-indent: inherit; 7869 } 7870 .editor-post-saved-state svg { 7871 margin-left: 0; 7872 } 7873 } 7874 7875 .editor-post-save-draft.has-text.has-icon svg { 7876 margin-left: 0; 7877 } 7878 7879 .editor-post-schedule__panel-dropdown { 7880 width: 100%; 7881 } 7882 7883 .editor-post-schedule__dialog .components-popover__content { 7884 min-width: 320px; 7885 padding: 16px; 7886 } 7887 7888 .editor-post-status { 7889 max-width: 100%; 7890 } 7891 .editor-post-status.is-read-only { 7892 padding: 6px 12px; 7893 } 7894 .editor-post-status .editor-post-status__toggle.editor-post-status__toggle { 7895 padding-top: 4px; 7896 padding-bottom: 4px; 7897 } 7898 7899 .editor-change-status__password-fieldset, 7900 .editor-change-status__publish-date-wrapper { 7901 border-top: 1px solid #e0e0e0; 7902 padding-top: 16px; 7903 } 7904 7905 .editor-change-status__content .components-popover__content { 7906 min-width: 320px; 7907 padding: 16px; 7908 } 7909 .editor-change-status__content .editor-change-status__password-legend { 7910 padding: 0; 7911 margin-bottom: 8px; 7912 } 7913 .editor-change-status__content p.components-base-control__help:has(.components-checkbox-control__help) { 7914 margin-top: 4px; 7915 } 7916 7917 .editor-post-sticky__checkbox-control { 7918 border-top: 1px solid #e0e0e0; 7919 padding-top: 16px; 7920 } 7921 7922 .editor-post-sync-status__value { 7923 padding: 6px 12px 6px 0; 7924 } 7925 7926 .editor-post-taxonomies__hierarchical-terms-list { 7927 max-height: 14em; 7928 overflow: auto; 7929 margin-right: -6px; 7930 padding-right: 6px; 7931 margin-top: -6px; 7932 padding-top: 6px; 7933 } 7934 7935 .editor-post-taxonomies__hierarchical-terms-choice { 7936 margin-bottom: 8px; 7937 } 7938 .editor-post-taxonomies__hierarchical-terms-choice:last-child { 7939 margin-bottom: 4px; 7940 } 7941 7942 .editor-post-taxonomies__hierarchical-terms-subchoices { 7943 margin-top: 8px; 7944 margin-right: 16px; 7945 } 7946 7947 .editor-post-taxonomies__flat-term-most-used .editor-post-taxonomies__flat-term-most-used-label { 7948 margin-bottom: 4px; 7949 } 7950 7951 .editor-post-taxonomies__flat-term-most-used-list { 7952 margin: 0; 7953 } 7954 .editor-post-taxonomies__flat-term-most-used-list li { 7955 display: inline-block; 7956 margin-left: 8px; 7957 } 7958 7959 .editor-sync-connection-error-modal { 7960 z-index: 1000001; 7961 } 7962 7963 .editor-sync-connection-error-modal p { 7964 margin: 0; 7965 } 7966 7967 .editor-sync-connection-error-modal__retry-countdown { 7968 color: #757575; 7969 } 7970 7971 .editor-post-template__swap-template-modal { 7972 z-index: 1000001; 7973 } 7974 .editor-post-template__swap-template-modal .editor-post-template__swap-template-search { 7975 background: #fff; 7976 position: sticky; 7977 top: 0; 7978 padding: 16px 0; 7979 transform: translateY(-4px); 7980 margin-bottom: -4px; 7981 z-index: 2; 7982 } 7983 7984 .editor-post-template__create-template-modal { 7985 z-index: 1000001; 7986 } 7987 7988 .editor-post-template__swap-template-modal-content .block-editor-block-patterns-list { 7989 -moz-column-count: 2; 7990 column-count: 2; 7991 -moz-column-gap: 24px; 7992 column-gap: 24px; 7993 padding-top: 2px; 7994 } 7995 @media (min-width: 782px) { 7996 .editor-post-template__swap-template-modal-content .block-editor-block-patterns-list { 7997 -moz-column-count: 3; 7998 column-count: 3; 7999 } 8000 } 8001 @media (min-width: 1280px) { 8002 .editor-post-template__swap-template-modal-content .block-editor-block-patterns-list { 8003 -moz-column-count: 4; 8004 column-count: 4; 8005 } 8006 } 8007 .editor-post-template__swap-template-modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item { 8008 -moz-column-break-inside: avoid; 8009 break-inside: avoid-column; 8010 } 8011 8012 .editor-post-template__dropdown .components-popover__content { 8013 min-width: 240px; 8014 } 8015 .editor-post-template__dropdown .components-button.is-pressed, 8016 .editor-post-template__dropdown .components-button.is-pressed:hover { 8017 background: inherit; 8018 color: inherit; 8019 } 8020 8021 .editor-post-template__classic-theme-dropdown { 8022 padding: 8px; 8023 } 8024 8025 .editor-template-actions-panel__preview .block-editor-block-preview__container { 8026 display: flex; 8027 aspect-ratio: 4/3; 8028 overflow: hidden; 8029 border-radius: 4px; 8030 } 8031 .editor-template-actions-panel__preview .block-editor-block-preview__container::after { 8032 outline: 1px solid rgba(0, 0, 0, 0.1); 8033 outline-offset: -1px; 8034 border-radius: 4px; 8035 } 8036 @media not (prefers-reduced-motion) { 8037 .editor-template-actions-panel__preview .block-editor-block-preview__container::after { 8038 transition: outline 0.1s linear; 8039 } 8040 } 8041 .editor-template-actions-panel__preview[role=button] { 8042 cursor: var(--wpds-cursor-control, pointer); 8043 } 8044 .editor-template-actions-panel__preview[role=button]:hover .block-editor-block-preview__container::after { 8045 outline-color: rgba(0, 0, 0, 0.3); 8046 } 8047 .editor-template-actions-panel__preview[role=button]:focus-visible .block-editor-block-preview__container::after { 8048 outline-color: var(--wp-admin-theme-color); 8049 outline-width: var(--wp-admin-border-width-focus); 8050 outline-offset: calc(-1 * var(--wp-admin-border-width-focus)); 8051 } 8052 8053 .editor-template-actions-panel__action { 8054 flex: 1; 8055 justify-content: center; 8056 } 8057 8058 textarea.editor-post-text-editor { 8059 border: 1px solid #949494; 8060 border-radius: 0; 8061 display: block; 8062 margin: 0; 8063 width: 100%; 8064 box-shadow: none; 8065 resize: none; 8066 overflow: hidden; 8067 font-family: Menlo, Consolas, monaco, monospace; 8068 line-height: 2.4; 8069 min-height: 200px; 8070 } 8071 @media not (prefers-reduced-motion) { 8072 textarea.editor-post-text-editor { 8073 transition: border 0.1s ease-out, box-shadow 0.1s linear; 8074 } 8075 } 8076 textarea.editor-post-text-editor { 8077 padding: 16px; 8078 } 8079 @media (min-width: 600px) { 8080 textarea.editor-post-text-editor { 8081 padding: 24px; 8082 } 8083 } 8084 textarea.editor-post-text-editor { 8085 /* Fonts smaller than 16px causes mobile safari to zoom. */ 8086 font-size: 16px !important; 8087 } 8088 @media (min-width: 600px) { 8089 textarea.editor-post-text-editor { 8090 font-size: 15px !important; 8091 } 8092 } 8093 textarea.editor-post-text-editor:focus { 8094 border-color: var(--wp-admin-theme-color); 8095 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); 8096 position: relative; 8097 } 8098 textarea.editor-post-text-editor::-moz-placeholder { 8099 color: rgba(30, 30, 30, 0.62); 8100 } 8101 textarea.editor-post-text-editor::placeholder { 8102 color: rgba(30, 30, 30, 0.62); 8103 } 8104 8105 .editor-post-title.is-raw-text { 8106 margin-bottom: 24px; 8107 margin-top: 2px; 8108 max-width: none; 8109 } 8110 8111 .editor-post-url__panel-dropdown { 8112 width: 100%; 8113 } 8114 8115 .editor-post-url__panel-dialog .editor-post-url { 8116 min-width: 248px; 8117 margin: 8px; 8118 } 8119 .editor-post-url__link, 8120 .editor-post-url__front-page-link { 8121 direction: ltr; 8122 word-break: break-word; 8123 } 8124 .editor-post-url__front-page-link { 8125 padding: 6px 12px; 8126 border-radius: 2px; 8127 color: var(--wp-admin-theme-color); 8128 } 8129 .editor-post-url__front-page-link:hover { 8130 background: color-mix(in srgb, var(--wp-admin-theme-color) 4%, transparent); 8131 color: var(--wp-admin-theme-color-darker-20, #183ad6); 8132 } 8133 .editor-post-url__front-page-link:focus { 8134 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); 8135 color: var(--wp-admin-theme-color); 8136 outline: 3px solid rgba(0, 0, 0, 0); 8137 } 8138 8139 .editor-post-url__link-slug { 8140 font-weight: var(--wpds-typography-font-weight-emphasis, 600); 8141 } 8142 8143 .editor-post-url__input input.components-input-control__input { 8144 padding-inline-start: 0 !important; 8145 } 8146 8147 .editor-post-url__panel-toggle, 8148 .editor-post-parent__panel-toggle { 8149 word-break: break-word; 8150 } 8151 8152 .editor-post-url__intro { 8153 margin: 0; 8154 } 8155 8156 .editor-post-url__permalink { 8157 margin-top: 8px; 8158 margin-bottom: 0; 8159 } 8160 .editor-post-url__permalink-visual-label { 8161 display: block; 8162 } 8163 8164 .editor-posts-per-page-dropdown__content .components-popover__content { 8165 min-width: 320px; 8166 padding: 16px; 8167 } 8168 8169 .editor-post-trash.components-button { 8170 flex-grow: 1; 8171 justify-content: center; 8172 } 8173 8174 .editor-preview-dropdown .editor-preview-dropdown__toggle.has-icon.has-text { 8175 padding-left: 4px; 8176 padding-right: 6px; 8177 } 8178 8179 @media (prefers-reduced-motion: no-preference) { 8180 .editor-resizable-editor:not(.is-resizing) { 8181 transition: width 0.2s ease-out; 8182 } 8183 } 8184 8185 .editor-resizable-editor.is-resizable { 8186 overflow: visible; 8187 margin: 0 auto; 8188 } 8189 8190 .editor-resizable-editor__resize-handle { 8191 position: absolute; 8192 top: 0; 8193 bottom: 0; 8194 padding: 0; 8195 margin: auto 0; 8196 width: 12px; 8197 -webkit-appearance: none; 8198 -moz-appearance: none; 8199 appearance: none; 8200 cursor: ew-resize; 8201 outline: none; 8202 background: none; 8203 border-radius: 9999px; 8204 border: 0; 8205 height: 100px; 8206 } 8207 .editor-resizable-editor__resize-handle::after { 8208 position: absolute; 8209 top: 16px; 8210 right: 4px; 8211 left: 0; 8212 bottom: 16px; 8213 content: ""; 8214 width: 4px; 8215 background-color: rgba(117, 117, 117, 0.4); 8216 border-radius: 9999px; 8217 } 8218 .editor-resizable-editor__resize-handle.is-left { 8219 right: -18px; 8220 } 8221 .editor-resizable-editor__resize-handle.is-right { 8222 left: -18px; 8223 } 8224 .editor-resizable-editor__resize-handle:hover, .editor-resizable-editor__resize-handle:focus, .editor-resizable-editor__resize-handle:active { 8225 opacity: 1; 8226 } 8227 .editor-resizable-editor__resize-handle:hover::after, .editor-resizable-editor__resize-handle:focus::after, .editor-resizable-editor__resize-handle:active::after { 8228 background-color: var(--wp-admin-theme-color); 8229 } 8230 8231 .editor-layout__toggle-publish-panel, 8232 .editor-layout__toggle-sidebar-panel, 8233 .editor-layout__toggle-entities-saved-states-panel { 8234 z-index: 100000; 8235 position: fixed !important; 8236 top: -9999em; 8237 bottom: auto; 8238 right: auto; 8239 left: 0; 8240 box-sizing: border-box; 8241 width: 280px; 8242 background-color: #fff; 8243 border: 1px dotted #ddd; 8244 height: auto !important; 8245 padding: 24px; 8246 display: flex; 8247 justify-content: center; 8248 } 8249 8250 .interface-interface-skeleton__actions:focus .editor-layout__toggle-entities-saved-states-panel, .interface-interface-skeleton__actions:focus-within .editor-layout__toggle-entities-saved-states-panel, 8251 .interface-interface-skeleton__actions:focus .editor-layout__toggle-publish-panel, 8252 .interface-interface-skeleton__actions:focus-within .editor-layout__toggle-publish-panel { 8253 top: auto; 8254 bottom: 0; 8255 } 8256 8257 .editor-start-page-options__modal .editor-start-page-options__modal__actions { 8258 position: absolute; 8259 bottom: 0; 8260 width: 100%; 8261 height: 72px; 8262 background-color: #fff; 8263 margin-right: -32px; 8264 margin-left: -32px; 8265 padding-right: 32px; 8266 padding-left: 32px; 8267 border-top: 1px solid #ddd; 8268 z-index: 1; 8269 } 8270 .editor-start-page-options__modal .block-editor-block-patterns-list { 8271 padding-bottom: 72px; 8272 } 8273 8274 .editor-start-page-options__modal-content .block-editor-block-patterns-list { 8275 -moz-column-count: 2; 8276 column-count: 2; 8277 -moz-column-gap: 24px; 8278 column-gap: 24px; 8279 } 8280 @media (min-width: 782px) { 8281 .editor-start-page-options__modal-content .block-editor-block-patterns-list { 8282 -moz-column-count: 3; 8283 column-count: 3; 8284 } 8285 } 8286 @media (min-width: 1280px) { 8287 .editor-start-page-options__modal-content .block-editor-block-patterns-list { 8288 -moz-column-count: 4; 8289 column-count: 4; 8290 } 8291 } 8292 .editor-start-page-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item { 8293 -moz-column-break-inside: avoid; 8294 break-inside: avoid-column; 8295 margin-bottom: 24px; 8296 } 8297 .editor-start-page-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item .block-editor-block-preview__container { 8298 min-height: 100px; 8299 } 8300 .editor-start-page-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item .block-editor-block-preview__content { 8301 width: 100%; 8302 } 8303 8304 .editor-start-template-options__modal .editor-start-template-options__modal__actions { 8305 position: absolute; 8306 bottom: 0; 8307 width: 100%; 8308 height: 92px; 8309 background-color: #fff; 8310 margin-right: -32px; 8311 margin-left: -32px; 8312 padding-right: 32px; 8313 padding-left: 32px; 8314 border-top: 1px solid #ddd; 8315 z-index: 1; 8316 } 8317 .editor-start-template-options__modal .block-editor-block-patterns-list { 8318 padding-bottom: 92px; 8319 } 8320 8321 .editor-start-template-options__modal-content .block-editor-block-patterns-list { 8322 -moz-column-count: 2; 8323 column-count: 2; 8324 -moz-column-gap: 24px; 8325 column-gap: 24px; 8326 } 8327 @media (min-width: 782px) { 8328 .editor-start-template-options__modal-content .block-editor-block-patterns-list { 8329 -moz-column-count: 3; 8330 column-count: 3; 8331 } 8332 } 8333 @media (min-width: 1280px) { 8334 .editor-start-template-options__modal-content .block-editor-block-patterns-list { 8335 -moz-column-count: 4; 8336 column-count: 4; 8337 } 8338 } 8339 .editor-start-template-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item { 8340 -moz-column-break-inside: avoid; 8341 break-inside: avoid-column; 8342 } 8343 .editor-start-template-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item .block-editor-block-patterns-list__item-title { 8344 display: none; 8345 } 8346 8347 .components-panel__header.editor-sidebar__panel-tabs { 8348 padding-right: 0; 8349 padding-left: 8px; 8350 } 8351 .components-panel__header.editor-sidebar__panel-tabs .components-button.has-icon { 8352 padding: 0; 8353 } 8354 @media (min-width: 782px) { 8355 .components-panel__header.editor-sidebar__panel-tabs .components-button.has-icon { 8356 display: flex; 8357 } 8358 } 8359 8360 .editor-post-summary .components-v-stack:empty { 8361 display: none; 8362 } 8363 8364 .editor-sidebar { 8365 box-sizing: border-box; 8366 } 8367 .editor-sidebar *, 8368 .editor-sidebar *::before, 8369 .editor-sidebar *::after { 8370 box-sizing: inherit; 8371 } 8372 .editor-sidebar__revisions-block-message { 8373 padding: 16px; 8374 color: #757575; 8375 font-size: 13px; 8376 } 8377 8378 .fields-controls__password { 8379 border-top: 1px solid #e0e0e0; 8380 padding-top: 16px; 8381 } 8382 8383 .editor-site-discussion-dropdown__content .components-popover__content { 8384 min-width: 320px; 8385 padding: 16px; 8386 } 8387 8388 .editor-style-book { 8389 height: 100%; 8390 } 8391 .editor-style-book.is-button { 8392 border-radius: 8px; 8393 } 8394 8395 .editor-style-book__iframe { 8396 display: block; 8397 height: 100%; 8398 width: 100%; 8399 } 8400 .editor-style-book__iframe.is-button { 8401 border-radius: 8px; 8402 } 8403 .editor-style-book__iframe.is-focused { 8404 outline: calc(2 * var(--wp-admin-border-width-focus)) solid var(--wp-admin-theme-color); 8405 outline-offset: calc(-2 * var(--wp-admin-border-width-focus)); 8406 } 8407 8408 .editor-style-book__tabs { 8409 height: 100%; 8410 display: flex; 8411 flex-direction: column; 8412 } 8413 8414 .editor-style-book__tablist-container { 8415 flex: none; 8416 display: flex; 8417 width: 100%; 8418 padding-left: 56px; 8419 background: #fff; 8420 } 8421 8422 .editor-style-book__tabpanel { 8423 flex: 1 0 auto; 8424 overflow: auto; 8425 } 8426 8427 .editor-styles-canvas { 8428 height: 100%; 8429 padding: 24px; 8430 background-color: var(--wp-editor-canvas-background); 8431 } 8432 .editor-styles-canvas iframe { 8433 display: block; 8434 width: 100%; 8435 height: 100%; 8436 } 8437 8438 .editor-styles-canvas__section { 8439 background: #fff; 8440 bottom: 0; 8441 right: 0; 8442 overflow: hidden; 8443 position: absolute; 8444 left: 0; 8445 top: 0; 8446 } 8447 @media not (prefers-reduced-motion) { 8448 .editor-styles-canvas__section { 8449 transition: all 0.3s; 8450 } 8451 } 8452 8453 .editor-styles-canvas__close-button { 8454 position: absolute; 8455 left: 8px; 8456 top: 8px; 8457 z-index: 2; 8458 background: #fff; 8459 } 8460 8461 .table-of-contents__popover.components-popover .components-popover__content { 8462 min-width: 380px; 8463 } 8464 8465 .components-popover.table-of-contents__popover { 8466 z-index: 99998; 8467 } 8468 8469 .table-of-contents__popover .components-popover__content { 8470 padding: 16px; 8471 } 8472 @media (min-width: 600px) { 8473 .table-of-contents__popover .components-popover__content { 8474 max-height: calc(100vh - 120px); 8475 overflow-y: auto; 8476 } 8477 } 8478 .table-of-contents__popover hr { 8479 margin: 10px -16px 0; 8480 } 8481 8482 .table-of-contents__wrapper:focus::before { 8483 content: ""; 8484 display: block; 8485 position: absolute; 8486 top: 0; 8487 left: 0; 8488 bottom: 0; 8489 right: 0; 8490 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); 8491 pointer-events: none; 8492 } 8493 8494 .table-of-contents__counts { 8495 display: flex; 8496 flex-wrap: wrap; 8497 margin: 0; 8498 margin-top: -8px; 8499 } 8500 8501 .table-of-contents__count { 8502 flex-basis: 33%; 8503 display: flex; 8504 flex-direction: column; 8505 font-size: 13px; 8506 color: #1e1e1e; 8507 padding-left: 8px; 8508 margin-bottom: 0; 8509 margin-top: 8px; 8510 } 8511 .table-of-contents__count:nth-child(4n) { 8512 padding-left: 0; 8513 } 8514 8515 .table-of-contents__number, 8516 .table-of-contents__popover .word-count { 8517 font-size: 21px; 8518 font-weight: 400; 8519 line-height: 30px; 8520 color: #1e1e1e; 8521 } 8522 8523 .table-of-contents__title { 8524 display: block; 8525 margin-top: 20px; 8526 font-size: 15px; 8527 font-weight: var(--wpds-typography-font-weight-emphasis, 600); 8528 } 8529 8530 .editor-text-editor { 8531 box-sizing: border-box; 8532 } 8533 .editor-text-editor *, 8534 .editor-text-editor *::before, 8535 .editor-text-editor *::after { 8536 box-sizing: inherit; 8537 } 8538 .editor-text-editor { 8539 position: relative; 8540 isolation: isolate; 8541 width: 100%; 8542 background-color: #fff; 8543 flex-grow: 1; 8544 } 8545 .editor-text-editor .editor-post-title:not(.is-raw-text), 8546 .editor-text-editor .editor-post-title.is-raw-text textarea { 8547 max-width: none; 8548 line-height: 1.4; 8549 font-family: Menlo, Consolas, monaco, monospace; 8550 font-size: 2.5em; 8551 font-weight: normal; 8552 border: 1px solid #949494; 8553 border-radius: 0; 8554 padding: 16px; 8555 } 8556 @media (min-width: 600px) { 8557 .editor-text-editor .editor-post-title:not(.is-raw-text), 8558 .editor-text-editor .editor-post-title.is-raw-text textarea { 8559 padding: 24px; 8560 } 8561 } 8562 .editor-text-editor .editor-post-title:not(.is-raw-text):focus, 8563 .editor-text-editor .editor-post-title.is-raw-text textarea:focus { 8564 border-color: var(--wp-admin-theme-color); 8565 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); 8566 } 8567 8568 .editor-text-editor__body { 8569 width: 100%; 8570 padding: 0 12px 12px 12px; 8571 max-width: 1080px; 8572 margin-right: auto; 8573 margin-left: auto; 8574 } 8575 @media (min-width: 960px) { 8576 .editor-text-editor__body { 8577 padding: 0 24px 24px 24px; 8578 } 8579 } 8580 8581 .editor-text-editor__toolbar { 8582 position: sticky; 8583 z-index: 1; 8584 top: 0; 8585 right: 0; 8586 left: 0; 8587 display: flex; 8588 background: rgba(255, 255, 255, 0.8); 8589 padding: 4px 12px; 8590 } 8591 @media (min-width: 600px) { 8592 .editor-text-editor__toolbar { 8593 padding: 12px; 8594 } 8595 } 8596 @media (min-width: 960px) { 8597 .editor-text-editor__toolbar { 8598 padding: 12px 24px; 8599 } 8600 } 8601 .editor-text-editor__toolbar h2 { 8602 line-height: 40px; 8603 margin: 0 0 0 auto; 8604 font-size: 13px; 8605 color: #1e1e1e; 8606 } 8607 8608 .editor-upload-progress-snackbar__spinner, 8609 .editor-upload-progress-snackbar__check { 8610 display: inline-flex; 8611 align-items: center; 8612 justify-content: center; 8613 width: 24px; 8614 height: 24px; 8615 } 8616 8617 .editor-upload-progress-snackbar__spinner .components-spinner { 8618 margin: 0; 8619 } 8620 8621 .editor-upload-progress-snackbar__check svg { 8622 width: 24px; 8623 height: 24px; 8624 fill: currentColor; 8625 } 8626 8627 .editor-visual-editor { 8628 position: relative; 8629 display: flex; 8630 max-height: 100%; 8631 background-color: var(--wp-editor-canvas-background); 8632 } 8633 .editor-visual-editor iframe[name=editor-canvas] { 8634 background-color: transparent; 8635 } 8636 .editor-visual-editor { 8637 align-items: center; 8638 } 8639 @media (prefers-reduced-motion: no-preference) { 8640 .editor-visual-editor { 8641 transition: padding 0.2s ease-out; 8642 } 8643 } 8644 .editor-visual-editor.has-vertical-padding { 8645 padding-top: 24px; 8646 padding-bottom: 24px; 8647 } 8648 .editor-visual-editor.has-horizontal-padding { 8649 padding-right: 24px; 8650 padding-left: 24px; 8651 } 8652 .editor-visual-editor { 8653 overflow: hidden; 8654 } 8655 .editor-visual-editor .components-button { 8656 font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 8657 font-size: 13px; 8658 padding: 6px 12px; 8659 } 8660 .editor-visual-editor .components-button.is-tertiary, .editor-visual-editor .components-button.has-icon { 8661 padding: 6px; 8662 } 8663 8664 .editor-fields-content-preview { 8665 display: flex; 8666 flex-direction: column; 8667 height: 100%; 8668 border-radius: 4px; 8669 } 8670 .dataviews-view-table .editor-fields-content-preview { 8671 width: 96px; 8672 flex-grow: 0; 8673 } 8674 .editor-fields-content-preview .block-editor-block-preview__container, 8675 .editor-fields-content-preview .editor-fields-content-preview__empty { 8676 margin-top: auto; 8677 margin-bottom: auto; 8678 } 8679 8680 .editor-fields-content-preview__empty { 8681 text-align: center; 8682 } 8683 8684 .editor-push-changes-to-global-styles-control .components-button { 8685 justify-content: center; 8686 width: 100%; 8687 }
title
Description
Body
title
Description
Body
title
Description
Body
title
Body
| Generated : Wed Jul 15 08:20:16 2026 | Cross-referenced by PHPXref |