[ Index ] |
PHP Cross Reference of WordPress Trunk (Updated Daily) |
[Summary view] [Print] [Text view]
1 @charset "UTF-8"; 2 /** 3 * Colors 4 */ 5 /** 6 * Breakpoints & Media Queries 7 */ 8 /** 9 * SCSS Variables. 10 * 11 * Please use variables from this sheet to ensure consistency across the UI. 12 * Don't add to this sheet unless you're pretty sure the value will be reused in many places. 13 * For example, don't add rules to this sheet that affect block visuals. It's purely for UI. 14 */ 15 /** 16 * Colors 17 */ 18 /** 19 * Fonts & basic variables. 20 */ 21 /** 22 * Grid System. 23 * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/ 24 */ 25 /** 26 * Dimensions. 27 */ 28 /** 29 * Shadows. 30 */ 31 /** 32 * Editor widths. 33 */ 34 /** 35 * Block & Editor UI. 36 */ 37 /** 38 * Block paddings. 39 */ 40 /** 41 * React Native specific. 42 * These variables do not appear to be used anywhere else. 43 */ 44 /** 45 * Breakpoint mixins 46 */ 47 /** 48 * Long content fade mixin 49 * 50 * Creates a fading overlay to signify that the content is longer 51 * than the space allows. 52 */ 53 /** 54 * Focus styles. 55 */ 56 /** 57 * Applies editor left position to the selector passed as argument 58 */ 59 /** 60 * Styles that are reused verbatim in a few places 61 */ 62 /** 63 * Allows users to opt-out of animations via OS-level preferences. 64 */ 65 /** 66 * Reset default styles for JavaScript UI based pages. 67 * This is a WP-admin agnostic reset 68 */ 69 /** 70 * Reset the WP Admin page styles for Gutenberg-like pages. 71 */ 72 :root { 73 --wp-admin-theme-color: #007cba; 74 --wp-admin-theme-color-darker-10: #006ba1; 75 --wp-admin-theme-color-darker-20: #005a87; 76 --wp-admin-border-width-focus: 2px; 77 } 78 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 79 :root { 80 --wp-admin-border-width-focus: 1.5px; 81 } 82 } 83 84 #start-resizable-editor-section { 85 display: none; 86 } 87 88 .block-editor-autocompleters__block { 89 white-space: nowrap; 90 } 91 .block-editor-autocompleters__block .block-editor-block-icon { 92 margin-right: 8px; 93 } 94 95 .block-editor-block-alignment-matrix-control__popover .components-popover__content { 96 min-width: 0; 97 width: auto; 98 } 99 .block-editor-block-alignment-matrix-control__popover .components-popover__content > div { 100 padding: 8px; 101 } 102 103 .block-editor-block-icon { 104 display: flex; 105 align-items: center; 106 justify-content: center; 107 width: 24px; 108 height: 24px; 109 } 110 .block-editor-block-icon.has-colors svg { 111 fill: currentColor; 112 } 113 .block-editor-block-icon svg { 114 min-width: 20px; 115 min-height: 20px; 116 max-width: 24px; 117 max-height: 24px; 118 } 119 120 .block-editor-block-inspector p { 121 margin-top: 0; 122 } 123 .block-editor-block-inspector h2, 124 .block-editor-block-inspector h3 { 125 font-size: 13px; 126 color: #1e1e1e; 127 margin-bottom: 1.5em; 128 } 129 .block-editor-block-inspector .components-base-control { 130 margin-bottom: 24px; 131 } 132 .block-editor-block-inspector .components-base-control:last-child { 133 margin-bottom: 8px; 134 } 135 .block-editor-block-inspector .components-panel__body { 136 border: none; 137 border-top: 1px solid #e0e0e0; 138 } 139 .block-editor-block-inspector .block-editor-block-card { 140 padding: 16px; 141 } 142 143 .block-editor-block-inspector__no-blocks { 144 display: block; 145 font-size: 13px; 146 background: #fff; 147 padding: 32px 16px; 148 text-align: center; 149 } 150 151 .block-editor-block-styles .block-editor-block-list__block { 152 margin: 0; 153 } 154 155 /** 156 * Notices & Block Selected/Hover Styles. 157 */ 158 /** 159 * Cross-Block Selection 160 */ 161 .block-editor-block-list__layout { 162 position: relative; 163 } 164 .block-editor-block-list__layout.is-navigate-mode { 165 cursor: default; 166 } 167 .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected::after, .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-hovered::after, 168 .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted::after, 169 .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected::after { 170 position: absolute; 171 z-index: 1; 172 pointer-events: none; 173 content: ""; 174 top: 1px; 175 bottom: 1px; 176 left: 1px; 177 right: 1px; 178 box-shadow: 0 0 0 1px var(--wp-admin-theme-color); 179 border-radius: 1px; 180 outline: 2px solid transparent; 181 } 182 .is-dark-theme .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected::after, .is-dark-theme .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-hovered::after, 183 .is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted::after, 184 .is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected::after { 185 box-shadow: 0 0 0 1px #fff; 186 } 187 .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected .components-placeholder ::selection, .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-hovered .components-placeholder ::selection, 188 .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted .components-placeholder ::selection, 189 .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected .components-placeholder ::selection { 190 background: transparent; 191 } 192 .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-hovered:not(.is-selected)::after { 193 box-shadow: 0 0 0 1px #949494; 194 } 195 .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted::after, 196 .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected::after, .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected::after, .block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.has-child-selected { 197 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); 198 outline: var(--wp-admin-border-width-focus) solid transparent; 199 } 200 .block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.is-selected::before { 201 content: ""; 202 position: absolute; 203 z-index: 0; 204 pointer-events: none; 205 transition: border-color 0.1s linear, border-style 0.1s linear, box-shadow 0.1s linear; 206 right: 0; 207 left: 0; 208 top: -14px; 209 border-radius: 2px; 210 border-top: 4px solid #ccc; 211 } 212 .block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.is-selected::after { 213 content: none; 214 } 215 .block-editor-block-list__layout .is-block-moving-mode.can-insert-moving-block.block-editor-block-list__block.is-selected::before { 216 border-color: var(--wp-admin-theme-color); 217 } 218 219 .is-block-moving-mode.block-editor-block-list__block-selection-button { 220 opacity: 0; 221 font-size: 1px; 222 height: 1px; 223 padding: 0; 224 } 225 226 .block-editor-block-list__layout .block-editor-block-list__block { 227 position: relative; 228 overflow-wrap: break-word; 229 /** 230 * Notices 231 */ 232 /** 233 * Block Layout 234 */ 235 /** 236 * Block styles and alignments 237 */ 238 } 239 .block-editor-block-list__layout .block-editor-block-list__block .reusable-block-edit-panel * { 240 z-index: 1; 241 } 242 .block-editor-block-list__layout .block-editor-block-list__block .components-placeholder .components-with-notices-ui { 243 margin: -10px 0 12px 0; 244 } 245 .block-editor-block-list__layout .block-editor-block-list__block .components-with-notices-ui { 246 margin: 0 0 12px 0; 247 width: 100%; 248 } 249 .block-editor-block-list__layout .block-editor-block-list__block .components-with-notices-ui .components-notice { 250 margin-left: 0; 251 margin-right: 0; 252 } 253 .block-editor-block-list__layout .block-editor-block-list__block .components-with-notices-ui .components-notice .components-notice__content { 254 font-size: 13px; 255 } 256 .block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable]):focus { 257 outline: none; 258 } 259 .block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable]):focus::after { 260 position: absolute; 261 z-index: 1; 262 pointer-events: none; 263 content: ""; 264 top: 1px; 265 bottom: 1px; 266 left: 1px; 267 right: 1px; 268 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); 269 border-radius: 1px; 270 } 271 .is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable]):focus::after { 272 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff; 273 } 274 .block-editor-block-list__layout .block-editor-block-list__block::after { 275 content: ""; 276 pointer-events: none; 277 position: absolute; 278 top: 0; 279 right: 0; 280 bottom: 0; 281 left: 0; 282 border-radius: 2px; 283 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) transparent; 284 } 285 .block-editor-block-list__layout .block-editor-block-list__block.has-warning { 286 min-height: 48px; 287 } 288 .block-editor-block-list__layout .block-editor-block-list__block.has-warning > * { 289 pointer-events: none; 290 -webkit-user-select: none; 291 user-select: none; 292 } 293 .block-editor-block-list__layout .block-editor-block-list__block.has-warning .block-editor-warning { 294 pointer-events: all; 295 } 296 .block-editor-block-list__layout .block-editor-block-list__block.has-warning::after { 297 content: ""; 298 position: absolute; 299 top: 0; 300 right: 0; 301 bottom: 0; 302 left: 0; 303 border-radius: 2px; 304 background-color: rgba(255, 255, 255, 0.4); 305 } 306 .block-editor-block-list__layout .block-editor-block-list__block.has-warning.is-multi-selected::after { 307 background-color: transparent; 308 } 309 .block-editor-block-list__layout .block-editor-block-list__block.is-reusable > .block-editor-inner-blocks > .block-editor-block-list__layout.has-overlay::after { 310 display: none; 311 } 312 .block-editor-block-list__layout .block-editor-block-list__block.is-reusable > .block-editor-inner-blocks > .block-editor-block-list__layout.has-overlay .block-editor-block-list__layout.has-overlay::after { 313 display: block; 314 } 315 .block-editor-block-list__layout .block-editor-block-list__block.is-reusable.has-child-selected::after { 316 box-shadow: 0 0 0 1px var(--wp-admin-theme-color); 317 } 318 .block-editor-block-list__layout .block-editor-block-list__block[data-clear=true] { 319 float: none; 320 } 321 .block-editor-block-list__layout .block-editor-block-list__block .block-editor-block-list__layout .block-editor-default-block-appender .block-editor-inserter { 322 left: auto; 323 right: 8px; 324 } 325 326 .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-hovered { 327 cursor: default; 328 } 329 .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-hovered::after { 330 top: 1px; 331 left: 1px; 332 right: 1px; 333 bottom: 1px; 334 box-shadow: 0 0 0 1px var(--wp-admin-theme-color); 335 border-radius: 1px; 336 } 337 .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected { 338 cursor: unset; 339 } 340 .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected::after { 341 box-shadow: 0 0 0 1px var(--wp-admin-theme-color); 342 top: 1px; 343 left: 1px; 344 right: 1px; 345 bottom: 1px; 346 border-radius: 1px; 347 } 348 .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected:focus::after { 349 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); 350 } 351 352 .is-focus-mode .block-editor-block-list__block:not(.has-child-selected) { 353 opacity: 0.5; 354 transition: opacity 0.1s linear; 355 } 356 @media (prefers-reduced-motion: reduce) { 357 .is-focus-mode .block-editor-block-list__block:not(.has-child-selected) { 358 transition-duration: 0s; 359 transition-delay: 0s; 360 } 361 } 362 .is-focus-mode .block-editor-block-list__block:not(.has-child-selected) .block-editor-block-list__block, .is-focus-mode .block-editor-block-list__block:not(.has-child-selected).is-selected, .is-focus-mode .block-editor-block-list__block:not(.has-child-selected).is-multi-selected { 363 opacity: 1; 364 } 365 366 .is-root-container:not(.is-focus-mode) .block-editor-block-list__block.has-active-entity { 367 opacity: 0.5; 368 transition: opacity 0.1s linear; 369 } 370 @media (prefers-reduced-motion: reduce) { 371 .is-root-container:not(.is-focus-mode) .block-editor-block-list__block.has-active-entity { 372 transition-duration: 0s; 373 transition-delay: 0s; 374 } 375 } 376 .is-root-container:not(.is-focus-mode) .block-editor-block-list__block.has-active-entity.is-active-entity, .is-root-container:not(.is-focus-mode) .block-editor-block-list__block.has-active-entity.has-child-selected, .is-root-container:not(.is-focus-mode) .block-editor-block-list__block.has-active-entity:not(.has-child-selected) .block-editor-block-list__block, .is-root-container:not(.is-focus-mode) .block-editor-block-list__block.has-active-entity.is-active-entity .block-editor-block-list__block, 377 .is-root-container:not(.is-focus-mode) .block-editor-block-list__block.has-active-entity .is-active-entity .block-editor-block-list__block { 378 opacity: 1; 379 } 380 381 .wp-block[data-align=left] > *, 382 .wp-block[data-align=right] > * { 383 z-index: 21; 384 } 385 386 /** 387 * In-Canvas Inserter 388 */ 389 .block-editor-block-list .block-editor-inserter { 390 margin: 8px; 391 cursor: move; 392 cursor: grab; 393 } 394 395 @keyframes block-editor-inserter__toggle__fade-in-animation { 396 from { 397 opacity: 0; 398 } 399 to { 400 opacity: 1; 401 } 402 } 403 .wp-block .block-list-appender .block-editor-inserter__toggle { 404 animation: block-editor-inserter__toggle__fade-in-animation 0.1s ease; 405 animation-fill-mode: forwards; 406 } 407 @media (prefers-reduced-motion: reduce) { 408 .wp-block .block-list-appender .block-editor-inserter__toggle { 409 animation-duration: 1ms; 410 animation-delay: 0s; 411 } 412 } 413 414 .block-editor-block-list__block:not(.is-selected):not(.has-child-selected) .block-editor-default-block-appender { 415 display: none; 416 } 417 .block-editor-block-list__block:not(.is-selected):not(.has-child-selected) .block-editor-default-block-appender .block-editor-inserter__toggle { 418 opacity: 0; 419 transform: scale(0); 420 } 421 422 .block-editor-block-list__block .block-editor-block-list__block-html-textarea { 423 display: block; 424 margin: 0; 425 padding: 12px; 426 width: 100%; 427 border: none; 428 outline: none; 429 border-radius: 2px; 430 box-shadow: inset 0 0 0 1px #1e1e1e; 431 resize: none; 432 overflow: hidden; 433 font-family: Menlo, Consolas, monaco, monospace; 434 font-size: 15px; 435 line-height: 1.5; 436 transition: padding 0.2s linear; 437 } 438 @media (prefers-reduced-motion: reduce) { 439 .block-editor-block-list__block .block-editor-block-list__block-html-textarea { 440 transition-duration: 0s; 441 transition-delay: 0s; 442 } 443 } 444 .block-editor-block-list__block .block-editor-block-list__block-html-textarea:focus { 445 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); 446 } 447 448 /** 449 * Warnings. 450 */ 451 .block-editor-block-list__block .block-editor-warning { 452 z-index: 5; 453 position: relative; 454 } 455 .block-editor-block-list__block .block-editor-warning.block-editor-block-list__block-crash-warning { 456 margin-bottom: auto; 457 } 458 459 /** 460 * Insertion Point. 461 */ 462 .block-editor-block-list__insertion-point { 463 position: absolute; 464 } 465 466 .block-editor-block-list__insertion-point-indicator { 467 position: absolute; 468 background: var(--wp-admin-theme-color); 469 animation: block-editor-inserter__toggle__fade-in-animation-delayed 0.3s ease; 470 animation-fill-mode: forwards; 471 } 472 @media (prefers-reduced-motion: reduce) { 473 .block-editor-block-list__insertion-point-indicator { 474 animation-duration: 1ms; 475 animation-delay: 0s; 476 } 477 } 478 .block-editor-block-list__insertion-point.is-vertical > .block-editor-block-list__insertion-point-indicator { 479 top: 50%; 480 right: 0; 481 left: 0; 482 height: 1px; 483 } 484 .block-editor-block-list__insertion-point.is-horizontal > .block-editor-block-list__insertion-point-indicator { 485 top: 0; 486 right: 0; 487 left: 50%; 488 height: 100%; 489 width: 1px; 490 } 491 492 .block-editor-block-list__insertion-point-inserter { 493 display: none; 494 position: absolute; 495 justify-content: center; 496 top: calc(50% - 12px); 497 left: calc(50% - 12px); 498 } 499 @media (min-width: 480px) { 500 .block-editor-block-list__insertion-point-inserter { 501 display: flex; 502 } 503 } 504 505 .block-editor-block-list__block-popover-inserter { 506 position: absolute; 507 top: -9999em; 508 margin-bottom: 14px; 509 } 510 .block-editor-block-list__block-popover-inserter.is-visible { 511 position: static; 512 } 513 514 .block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle.components-button.has-icon, 515 .block-editor-default-block-appender .block-editor-inserter__toggle.components-button.has-icon, 516 .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon, 517 .block-editor-block-list__block-popover-inserter .block-editor-inserter__toggle.components-button.has-icon { 518 background: #1e1e1e; 519 border-radius: 2px; 520 color: #fff; 521 padding: 0; 522 min-width: 24px; 523 height: 24px; 524 } 525 .block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle.components-button.has-icon:hover, 526 .block-editor-default-block-appender .block-editor-inserter__toggle.components-button.has-icon:hover, 527 .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon:hover, 528 .block-editor-block-list__block-popover-inserter .block-editor-inserter__toggle.components-button.has-icon:hover { 529 color: #fff; 530 background: var(--wp-admin-theme-color); 531 } 532 533 .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon { 534 background: var(--wp-admin-theme-color); 535 } 536 .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon:hover { 537 background: #1e1e1e; 538 } 539 540 .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button, 541 .block-editor-block-list__block-popover-inserter .block-editor-inserter__toggle.components-button { 542 animation: block-editor-inserter__toggle__fade-in-animation-delayed 0.3s ease; 543 animation-fill-mode: forwards; 544 } 545 @media (prefers-reduced-motion: reduce) { 546 .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button, 547 .block-editor-block-list__block-popover-inserter .block-editor-inserter__toggle.components-button { 548 animation-duration: 1ms; 549 animation-delay: 0s; 550 } 551 } 552 553 @keyframes block-editor-inserter__toggle__fade-in-animation-delayed { 554 0% { 555 opacity: 0; 556 } 557 60% { 558 opacity: 0; 559 } 560 100% { 561 opacity: 1; 562 } 563 } 564 /** 565 * Block Toolbar when contextual. 566 */ 567 .block-editor-block-contextual-toolbar { 568 display: inline-flex; 569 border: 1px solid #1e1e1e; 570 border-radius: 2px; 571 background-color: #fff; 572 } 573 .block-editor-block-contextual-toolbar .block-editor-block-toolbar .components-toolbar-group, 574 .block-editor-block-contextual-toolbar .block-editor-block-toolbar .components-toolbar { 575 border-right-color: #1e1e1e; 576 } 577 .block-editor-block-contextual-toolbar.is-fixed { 578 position: sticky; 579 top: 0; 580 width: 100%; 581 z-index: 31; 582 min-height: 48px; 583 display: block; 584 border: none; 585 border-bottom: 1px solid #e0e0e0; 586 border-radius: 0; 587 } 588 .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar .components-toolbar-group, 589 .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar .components-toolbar { 590 border-right-color: #e0e0e0; 591 } 592 .block-editor-block-contextual-toolbar .block-editor-block-mover-button { 593 overflow: hidden; 594 } 595 .block-editor-block-contextual-toolbar .block-editor-block-mover.is-horizontal .block-editor-block-mover-button.block-editor-block-mover-button { 596 min-width: 24px; 597 width: 24px; 598 } 599 .block-editor-block-contextual-toolbar .block-editor-block-mover.is-horizontal .block-editor-block-mover-button.block-editor-block-mover-button svg { 600 min-width: 24px; 601 } 602 603 .block-editor-block-contextual-toolbar .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover-button:focus::before { 604 left: 0 !important; 605 min-width: 0; 606 width: 100%; 607 } 608 @media (min-width: 600px) { 609 .block-editor-block-contextual-toolbar .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover-button.is-up-button svg { 610 top: 5px; 611 } 612 .block-editor-block-contextual-toolbar .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover-button.is-down-button svg { 613 bottom: 5px; 614 } 615 } 616 617 /** 618 * Block Label for Navigation/Selection Mode 619 */ 620 .block-editor-block-list__block-selection-button { 621 display: inline-flex; 622 padding: 0 13px; 623 z-index: 22; 624 border-radius: 2px; 625 background-color: #1e1e1e; 626 font-size: 13px; 627 height: 48px; 628 } 629 .block-editor-block-list__block-selection-button .block-editor-block-list__block-selection-button__content { 630 margin: auto; 631 display: inline-flex; 632 align-items: center; 633 } 634 .block-editor-block-list__block-selection-button .block-editor-block-list__block-selection-button__content > .components-flex__item { 635 margin-right: 6px; 636 } 637 .block-editor-block-list__block-selection-button .components-button.has-icon.block-selection-button_drag-handle { 638 cursor: grab; 639 padding: 0; 640 height: 24px; 641 min-width: 24px; 642 } 643 .block-editor-block-list__block-selection-button .components-button.has-icon.block-selection-button_drag-handle svg { 644 min-width: 18px; 645 min-height: 18px; 646 } 647 .block-editor-block-list__block-selection-button .block-editor-block-icon { 648 font-size: 13px; 649 color: #fff; 650 height: 48px; 651 } 652 .block-editor-block-list__block-selection-button .components-button { 653 min-width: 36px; 654 color: #fff; 655 height: 48px; 656 display: flex; 657 } 658 .block-editor-block-list__block-selection-button .components-button:focus { 659 box-shadow: none; 660 border: none; 661 } 662 .block-editor-block-list__block-selection-button .components-button:active { 663 color: #fff; 664 } 665 .block-editor-block-list__block-selection-button .block-selection-button_select-button.components-button { 666 padding: 0; 667 } 668 669 /** 670 * Popovers. 671 */ 672 .block-editor-block-list__insertion-point-popover.is-without-arrow { 673 z-index: 28; 674 position: absolute; 675 pointer-events: none; 676 } 677 .block-editor-block-list__insertion-point-popover.is-without-arrow * { 678 pointer-events: none; 679 } 680 .block-editor-block-list__insertion-point-popover.is-without-arrow .is-with-inserter { 681 pointer-events: all; 682 } 683 .block-editor-block-list__insertion-point-popover.is-without-arrow .is-with-inserter * { 684 pointer-events: all; 685 } 686 .block-editor-block-list__insertion-point-popover.is-without-arrow .components-popover__content.components-popover__content { 687 background: none; 688 border: none; 689 box-shadow: none; 690 overflow-y: visible; 691 margin-left: 0; 692 } 693 694 @keyframes hide-during-dragging { 695 to { 696 position: fixed; 697 transform: translate(9999px, 9999px); 698 } 699 } 700 .components-popover.block-editor-block-list__block-popover { 701 z-index: 31; 702 position: absolute; 703 } 704 .components-popover.block-editor-block-list__block-popover .components-popover__content { 705 margin: 0 !important; 706 min-width: auto; 707 width: max-content; 708 background: none; 709 border: none; 710 box-shadow: none; 711 overflow-y: visible; 712 pointer-events: none; 713 } 714 .components-popover.block-editor-block-list__block-popover .components-popover__content .block-editor-block-list__block-selection-button, 715 .components-popover.block-editor-block-list__block-popover .components-popover__content .block-editor-block-contextual-toolbar, 716 .components-popover.block-editor-block-list__block-popover .components-popover__content .block-editor-block-list__empty-block-inserter { 717 pointer-events: all; 718 } 719 .components-popover.block-editor-block-list__block-popover .components-popover__content .block-editor-block-list__block-selection-button, 720 .components-popover.block-editor-block-list__block-popover .components-popover__content .block-editor-block-contextual-toolbar { 721 margin-top: 12px; 722 margin-bottom: 12px; 723 } 724 .components-popover.block-editor-block-list__block-popover.is-insertion-point-visible { 725 visibility: hidden; 726 } 727 .is-dragging-components-draggable .components-popover.block-editor-block-list__block-popover { 728 opacity: 0; 729 animation: hide-during-dragging 1ms linear forwards; 730 } 731 732 .is-dragging-components-draggable .components-tooltip { 733 display: none; 734 } 735 736 .block-editor-block-list__block .block-list-appender { 737 align-self: center; 738 padding: 0; 739 list-style: none; 740 margin: 0 auto 0 0; 741 } 742 .block-editor-block-list__block .block-list-appender.wp-block { 743 max-width: none; 744 } 745 .block-editor-block-list__block .block-list-appender .block-editor-default-block-appender { 746 margin: 8px 0; 747 } 748 .block-editor-block-list__block .block-list-appender .block-list-appender__toggle { 749 padding: 0; 750 opacity: 1; 751 transform: scale(1); 752 transition: all 0.1s ease; 753 margin-left: 8px; 754 } 755 @media (prefers-reduced-motion: reduce) { 756 .block-editor-block-list__block .block-list-appender .block-list-appender__toggle { 757 transition-duration: 0s; 758 transition-delay: 0s; 759 } 760 } 761 .block-editor-block-list__block .block-list-appender:first-of-type .block-list-appender__toggle { 762 margin-left: 0; 763 } 764 765 .is-vertical .block-list-appender { 766 width: 24px; 767 margin-right: auto; 768 margin-top: 12px; 769 margin-left: 12px; 770 } 771 772 .block-list-appender > .block-editor-inserter { 773 display: block; 774 } 775 776 .block-editor-block-list__block:not(.is-selected):not(.has-child-selected):not(.block-editor-block-list__layout) .block-editor-block-list__layout > .block-list-appender .block-list-appender__toggle { 777 opacity: 0; 778 transform: scale(0); 779 } 780 781 .block-editor-block-breadcrumb { 782 list-style: none; 783 padding: 0; 784 margin: 0; 785 } 786 .block-editor-block-breadcrumb li { 787 display: inline-block; 788 margin: 0; 789 } 790 .block-editor-block-breadcrumb li:not(:last-child)::after { 791 content: "→" /*rtl:"←"*/; 792 } 793 794 .block-editor-block-breadcrumb__button.components-button { 795 height: 24px; 796 line-height: 24px; 797 padding: 0; 798 position: relative; 799 } 800 .block-editor-block-breadcrumb__button.components-button:hover:not(:disabled) { 801 text-decoration: underline; 802 box-shadow: none; 803 } 804 .block-editor-block-breadcrumb__button.components-button:focus { 805 box-shadow: none; 806 } 807 .block-editor-block-breadcrumb__button.components-button:focus::before { 808 content: ""; 809 display: block; 810 position: absolute; 811 border-radius: 2px; 812 top: 1px; 813 right: 1px; 814 bottom: 1px; 815 left: 1px; 816 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); 817 } 818 819 .block-editor-block-breadcrumb__current { 820 cursor: default; 821 } 822 823 .block-editor-block-breadcrumb__button.components-button, 824 .block-editor-block-breadcrumb__current { 825 color: #1e1e1e; 826 padding: 0 8px; 827 font-size: inherit; 828 } 829 830 .block-editor-block-card { 831 display: flex; 832 align-items: flex-start; 833 } 834 835 .block-editor-block-card__content { 836 flex-grow: 1; 837 margin-bottom: 4px; 838 } 839 840 .block-editor-block-card__title { 841 font-weight: 500; 842 } 843 .block-editor-block-card__title.block-editor-block-card__title { 844 line-height: 24px; 845 margin: 0 0 4px; 846 } 847 848 .block-editor-block-card__description { 849 font-size: 13px; 850 } 851 852 .block-editor-block-card .block-editor-block-icon { 853 flex: 0 0 24px; 854 margin-left: 0; 855 margin-right: 12px; 856 width: 24px; 857 height: 24px; 858 } 859 860 /** 861 * Invalid block comparison 862 */ 863 .block-editor-block-compare { 864 overflow: auto; 865 height: auto; 866 } 867 @media (min-width: 600px) { 868 .block-editor-block-compare { 869 max-height: 70%; 870 } 871 } 872 873 .block-editor-block-compare__wrapper { 874 display: flex; 875 padding-bottom: 16px; 876 } 877 .block-editor-block-compare__wrapper > div { 878 display: flex; 879 justify-content: space-between; 880 flex-direction: column; 881 width: 50%; 882 padding: 0 16px 0 0; 883 min-width: 200px; 884 } 885 .block-editor-block-compare__wrapper > div button { 886 float: right; 887 } 888 .block-editor-block-compare__wrapper .block-editor-block-compare__converted { 889 border-left: 1px solid #ddd; 890 padding-left: 15px; 891 padding-right: 0; 892 } 893 .block-editor-block-compare__wrapper .block-editor-block-compare__html { 894 font-family: Menlo, Consolas, monaco, monospace; 895 font-size: 12px; 896 color: #1e1e1e; 897 border-bottom: 1px solid #ddd; 898 padding-bottom: 15px; 899 line-height: 1.7; 900 } 901 .block-editor-block-compare__wrapper .block-editor-block-compare__html span { 902 background-color: #e6ffed; 903 padding-top: 3px; 904 padding-bottom: 3px; 905 } 906 .block-editor-block-compare__wrapper .block-editor-block-compare__html span.block-editor-block-compare__added { 907 background-color: #acf2bd; 908 } 909 .block-editor-block-compare__wrapper .block-editor-block-compare__html span.block-editor-block-compare__removed { 910 background-color: #cc1818; 911 } 912 .block-editor-block-compare__wrapper .block-editor-block-compare__preview { 913 padding: 0; 914 padding-top: 16px; 915 } 916 .block-editor-block-compare__wrapper .block-editor-block-compare__preview p { 917 font-size: 12px; 918 margin-top: 0; 919 } 920 .block-editor-block-compare__wrapper .block-editor-block-compare__action { 921 margin-top: 16px; 922 } 923 .block-editor-block-compare__wrapper .block-editor-block-compare__heading { 924 font-size: 1em; 925 font-weight: 400; 926 margin: 0.67em 0; 927 } 928 929 .block-editor-block-draggable-chip-wrapper { 930 position: absolute; 931 top: -24px; 932 left: 0; 933 } 934 935 .block-editor-block-draggable-chip { 936 background-color: #1e1e1e; 937 border-radius: 2px; 938 box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3); 939 color: #fff; 940 cursor: grabbing; 941 display: inline-flex; 942 height: 48px; 943 padding: 0 13px; 944 -webkit-user-select: none; 945 user-select: none; 946 } 947 .block-editor-block-draggable-chip svg { 948 fill: currentColor; 949 } 950 .block-editor-block-draggable-chip .block-editor-block-draggable-chip__content { 951 margin: auto; 952 justify-content: flex-start; 953 } 954 .block-editor-block-draggable-chip .block-editor-block-draggable-chip__content > .components-flex__item { 955 margin-right: 6px; 956 } 957 .block-editor-block-draggable-chip .block-editor-block-draggable-chip__content > .components-flex__item:last-child { 958 margin-right: 0; 959 } 960 .block-editor-block-draggable-chip .block-editor-block-draggable-chip__content .block-editor-block-icon svg { 961 min-width: 18px; 962 min-height: 18px; 963 } 964 .block-editor-block-draggable-chip .components-flex__item { 965 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 966 font-size: 13px; 967 } 968 969 .is-dragging { 970 display: none !important; 971 } 972 973 .block-editor-block-mobile-toolbar { 974 display: flex; 975 flex-direction: row; 976 border-right: 1px solid #ddd; 977 } 978 .block-editor-block-mobile-toolbar .block-editor-block-mover-button { 979 width: 36px; 980 height: 36px; 981 border-radius: 2px; 982 padding: 3px; 983 margin: 0; 984 justify-content: center; 985 align-items: center; 986 } 987 .block-editor-block-mobile-toolbar .block-editor-block-mover-button .dashicon { 988 margin: auto; 989 } 990 .block-editor-block-mobile-toolbar .block-editor-block-mover { 991 display: flex; 992 margin-right: auto; 993 } 994 .block-editor-block-mobile-toolbar .block-editor-block-mover .block-editor-block-mover-button { 995 float: left; 996 } 997 998 .block-editor-block-mover-button__description { 999 display: none; 1000 } 1001 1002 .block-editor-block-mover-button.has-icon { 1003 padding: 0; 1004 } 1005 1006 .block-editor-block-mover { 1007 display: inline-flex; 1008 flex-direction: row; 1009 } 1010 .block-editor-block-mover .block-editor-block-mover__move-button-container, 1011 .block-editor-block-mover .components-toolbar { 1012 flex: 1; 1013 flex-direction: row; 1014 border-right: none !important; 1015 } 1016 @media (min-width: 600px) { 1017 .block-editor-block-mover .block-editor-block-mover__move-button-container, 1018 .block-editor-block-mover .components-toolbar { 1019 flex-direction: column; 1020 } 1021 } 1022 .block-editor-block-mover.is-horizontal .block-editor-block-mover__move-button-container, .block-editor-block-mover.is-horizontal .components-toolbar { 1023 flex-direction: row; 1024 } 1025 .block-editor-block-mover .block-editor-block-mover-button.block-editor-block-mover-button { 1026 padding-right: 0; 1027 padding-left: 0; 1028 min-width: 36px; 1029 } 1030 @media (min-width: 600px) { 1031 .block-editor-block-mover .block-editor-block-mover-button { 1032 height: 24px; 1033 width: 42px; 1034 padding-right: 11px !important; 1035 padding-left: 6px !important; 1036 } 1037 .block-editor-block-mover .block-editor-block-mover-button.block-editor-block-mover-button { 1038 min-width: 42px; 1039 } 1040 } 1041 @media (min-width: 600px) { 1042 .block-editor-block-mover .block-editor-block-mover-button::before { 1043 left: 8px !important; 1044 right: 8px !important; 1045 } 1046 } 1047 .block-editor-block-mover .block-editor-block-mover__drag-handle { 1048 width: 24px; 1049 cursor: grab; 1050 min-width: 24px !important; 1051 padding: 0 !important; 1052 } 1053 .block-editor-block-mover .block-editor-block-mover__drag-handle:focus::before { 1054 left: 0 !important; 1055 right: 0 !important; 1056 } 1057 @media (min-width: 600px) { 1058 .block-editor-block-mover .components-toolbar-group .block-editor-block-mover-button, 1059 .block-editor-block-mover .components-toolbar .block-editor-block-mover-button { 1060 margin: 0 auto 0 0; 1061 } 1062 .block-editor-block-mover .components-toolbar-group .block-editor-block-mover-button.is-up-button::before, 1063 .block-editor-block-mover .components-toolbar .block-editor-block-mover-button.is-up-button::before { 1064 bottom: 0; 1065 height: calc(100% - 1px); 1066 } 1067 .block-editor-block-mover .components-toolbar-group .block-editor-block-mover-button.is-down-button::before, 1068 .block-editor-block-mover .components-toolbar .block-editor-block-mover-button.is-down-button::before { 1069 top: 0; 1070 height: calc(100% - 1px); 1071 } 1072 } 1073 .block-editor-block-mover.is-horizontal .block-editor-block-mover-button.has-icon { 1074 height: 48px; 1075 width: 24px; 1076 padding-left: 0; 1077 padding-right: 0; 1078 } 1079 .block-editor-block-mover.is-horizontal .block-editor-block-mover-button.has-icon::before { 1080 top: 1px; 1081 bottom: 1px; 1082 min-width: 0; 1083 width: auto; 1084 height: auto; 1085 } 1086 .block-editor-block-mover.is-horizontal .block-editor-block-mover-button.is-up-button.has-icon svg { 1087 margin-left: 0; 1088 margin-right: -8px; 1089 margin-bottom: 0; 1090 } 1091 .block-editor-block-mover.is-horizontal .block-editor-block-mover-button.is-up-button.has-icon::before { 1092 left: 0 !important; 1093 right: 0 !important; 1094 } 1095 .block-editor-block-mover.is-horizontal .block-editor-block-mover-button.is-down-button.has-icon svg { 1096 margin-left: -8px; 1097 margin-right: 0; 1098 margin-top: 0; 1099 } 1100 .block-editor-block-mover.is-horizontal .block-editor-block-mover-button.is-down-button.has-icon::before { 1101 left: 0 !important; 1102 right: 0 !important; 1103 width: calc(100% + 1px); 1104 } 1105 1106 .block-editor-block-navigation__label { 1107 margin: 0 0 12px; 1108 color: #757575; 1109 text-transform: uppercase; 1110 font-size: 11px; 1111 font-weight: 500; 1112 } 1113 1114 .block-editor-block-navigation__container { 1115 min-width: 280px; 1116 } 1117 1118 .block-editor-block-navigation-tree { 1119 width: 100%; 1120 border-collapse: collapse; 1121 padding: 0; 1122 margin: 0; 1123 } 1124 .components-modal__content .block-editor-block-navigation-tree { 1125 margin: -12px -6px 0; 1126 width: calc(100% + 12px); 1127 } 1128 1129 .block-editor-block-navigation-leaf { 1130 position: relative; 1131 } 1132 .block-editor-block-navigation-leaf.is-selected .block-editor-block-navigation-block-contents { 1133 background: var(--wp-admin-theme-color); 1134 color: #fff; 1135 } 1136 .block-editor-block-navigation-leaf.is-selected .block-editor-block-navigation-block-contents:focus { 1137 box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); 1138 } 1139 .block-editor-block-navigation-leaf.is-branch-selected.is-selected .block-editor-block-navigation-block-contents { 1140 border-radius: 2px 2px 0 0; 1141 } 1142 .block-editor-block-navigation-leaf.is-branch-selected:not(.is-selected) .block-editor-block-navigation-block-contents { 1143 background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), linear-gradient(var(--wp-admin-theme-color), var(--wp-admin-theme-color)); 1144 border-radius: 0; 1145 } 1146 .block-editor-block-navigation-leaf.is-branch-selected.is-last-of-selected-branch .block-editor-block-navigation-block-contents { 1147 border-radius: 0 0 2px 2px; 1148 } 1149 .block-editor-block-navigation-leaf.is-dragging { 1150 display: none; 1151 } 1152 .block-editor-block-navigation-leaf .block-editor-block-navigation-block-contents { 1153 display: flex; 1154 align-items: center; 1155 width: 100%; 1156 height: auto; 1157 padding: 6px 12px; 1158 text-align: left; 1159 color: #1e1e1e; 1160 border-radius: 2px; 1161 position: relative; 1162 white-space: nowrap; 1163 } 1164 .block-editor-block-navigation-leaf .block-editor-block-navigation-block-contents:hover, .block-editor-block-navigation-leaf .block-editor-block-navigation-block-contents:focus { 1165 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); 1166 } 1167 .block-editor-block-navigation-leaf .block-editor-block-navigation-block-contents:focus { 1168 z-index: 1; 1169 } 1170 .block-editor-block-navigation-leaf .block-editor-block-navigation-block-contents.is-dropping-before::before { 1171 content: ""; 1172 position: absolute; 1173 pointer-events: none; 1174 transition: border-color 0.1s linear, border-style 0.1s linear, box-shadow 0.1s linear; 1175 top: -2px; 1176 right: 0; 1177 left: 0; 1178 border-top: 4px solid var(--wp-admin-theme-color); 1179 } 1180 .block-editor-block-navigation-leaf .block-editor-block-navigation-block-contents.is-dropping-after::before { 1181 content: ""; 1182 position: absolute; 1183 pointer-events: none; 1184 transition: border-color 0.1s linear, border-style 0.1s linear, box-shadow 0.1s linear; 1185 bottom: -2px; 1186 right: 0; 1187 left: 0; 1188 border-bottom: 4px solid var(--wp-admin-theme-color); 1189 } 1190 .block-editor-block-navigation-leaf .block-editor-block-navigation-block-contents.is-dropping-to-inner-blocks::before { 1191 content: ""; 1192 position: absolute; 1193 pointer-events: none; 1194 transition: border-color 0.1s linear, border-style 0.1s linear, box-shadow 0.1s linear; 1195 bottom: -2px; 1196 right: 0; 1197 left: 24px; 1198 border-bottom: 4px solid var(--wp-admin-theme-color); 1199 } 1200 .components-modal__content .block-editor-block-navigation-leaf .block-editor-block-navigation-block-contents { 1201 padding-left: 0; 1202 padding-right: 0; 1203 } 1204 .block-editor-block-navigation-leaf.is-visible .block-editor-block-navigation-block-contents { 1205 opacity: 1; 1206 animation: edit-post__fade-in-animation 0.2s ease-out 0s; 1207 animation-fill-mode: forwards; 1208 } 1209 @media (prefers-reduced-motion: reduce) { 1210 .block-editor-block-navigation-leaf.is-visible .block-editor-block-navigation-block-contents { 1211 animation-duration: 1ms; 1212 animation-delay: 0s; 1213 } 1214 } 1215 .block-editor-block-navigation-leaf .block-editor-block-icon { 1216 align-self: flex-start; 1217 margin-right: 10px; 1218 width: 20px; 1219 } 1220 .block-editor-block-navigation-leaf .block-editor-block-navigation-block__menu-cell, 1221 .block-editor-block-navigation-leaf .block-editor-block-navigation-block__mover-cell, 1222 .block-editor-block-navigation-leaf .block-editor-block-navigation-block__contents-cell { 1223 padding-top: 0; 1224 padding-bottom: 0; 1225 } 1226 .block-editor-block-navigation-leaf .block-editor-block-navigation-block__menu-cell, 1227 .block-editor-block-navigation-leaf .block-editor-block-navigation-block__mover-cell { 1228 line-height: 0; 1229 width: 36px; 1230 opacity: 0; 1231 vertical-align: top; 1232 } 1233 @media (prefers-reduced-motion: reduce) { 1234 .block-editor-block-navigation-leaf .block-editor-block-navigation-block__menu-cell, 1235 .block-editor-block-navigation-leaf .block-editor-block-navigation-block__mover-cell { 1236 transition-duration: 0s; 1237 transition-delay: 0s; 1238 } 1239 } 1240 .block-editor-block-navigation-leaf .block-editor-block-navigation-block__menu-cell:hover, .block-editor-block-navigation-leaf .block-editor-block-navigation-block__menu-cell.is-visible, 1241 .block-editor-block-navigation-leaf .block-editor-block-navigation-block__mover-cell:hover, 1242 .block-editor-block-navigation-leaf .block-editor-block-navigation-block__mover-cell.is-visible { 1243 position: relative; 1244 z-index: 1; 1245 opacity: 1; 1246 animation: edit-post__fade-in-animation 0.2s ease-out 0s; 1247 animation-fill-mode: forwards; 1248 } 1249 @media (prefers-reduced-motion: reduce) { 1250 .block-editor-block-navigation-leaf .block-editor-block-navigation-block__menu-cell:hover, .block-editor-block-navigation-leaf .block-editor-block-navigation-block__menu-cell.is-visible, 1251 .block-editor-block-navigation-leaf .block-editor-block-navigation-block__mover-cell:hover, 1252 .block-editor-block-navigation-leaf .block-editor-block-navigation-block__mover-cell.is-visible { 1253 animation-duration: 1ms; 1254 animation-delay: 0s; 1255 } 1256 } 1257 .block-editor-block-navigation-leaf .block-editor-block-navigation-block__menu-cell, 1258 .block-editor-block-navigation-leaf .block-editor-block-navigation-block__menu-cell .components-button.has-icon, 1259 .block-editor-block-navigation-leaf .block-editor-block-navigation-block__mover-cell, 1260 .block-editor-block-navigation-leaf .block-editor-block-navigation-block__mover-cell .components-button.has-icon { 1261 width: 24px; 1262 min-width: 24px; 1263 padding: 0; 1264 } 1265 .block-editor-block-navigation-leaf .block-editor-block-navigation-block__menu-cell { 1266 padding-top: 8px; 1267 } 1268 .block-editor-block-navigation-leaf .block-editor-block-navigation-block__mover-cell-alignment-wrapper { 1269 display: flex; 1270 height: 100%; 1271 flex-direction: column; 1272 align-items: center; 1273 } 1274 .block-editor-block-navigation-leaf .block-editor-block-mover-button { 1275 position: relative; 1276 width: 36px; 1277 height: 24px; 1278 } 1279 .block-editor-block-navigation-leaf .block-editor-block-mover-button svg { 1280 position: relative; 1281 height: 24px; 1282 } 1283 .block-editor-block-navigation-leaf .block-editor-block-mover-button.is-up-button { 1284 margin-top: -6px; 1285 align-items: flex-end; 1286 } 1287 .block-editor-block-navigation-leaf .block-editor-block-mover-button.is-up-button svg { 1288 bottom: -4px; 1289 } 1290 .block-editor-block-navigation-leaf .block-editor-block-mover-button.is-down-button { 1291 margin-bottom: -6px; 1292 align-items: flex-start; 1293 } 1294 .block-editor-block-navigation-leaf .block-editor-block-mover-button.is-down-button svg { 1295 top: -4px; 1296 } 1297 .block-editor-block-navigation-leaf .block-editor-block-mover-button:focus:enabled { 1298 box-shadow: none; 1299 outline: none; 1300 } 1301 .block-editor-block-navigation-leaf .block-editor-block-mover-button:focus { 1302 box-shadow: none; 1303 outline: none; 1304 } 1305 .block-editor-block-navigation-leaf .block-editor-block-mover-button:focus::before { 1306 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 4px #fff; 1307 outline: 2px solid transparent; 1308 } 1309 .block-editor-block-navigation-leaf .block-editor-block-mover-button::before { 1310 content: ""; 1311 position: absolute; 1312 display: block; 1313 border-radius: 2px; 1314 height: 16px; 1315 min-width: 100%; 1316 left: 0; 1317 right: 0; 1318 animation: components-button__appear-animation 0.1s ease; 1319 animation-fill-mode: forwards; 1320 } 1321 @media (prefers-reduced-motion: reduce) { 1322 .block-editor-block-navigation-leaf .block-editor-block-mover-button::before { 1323 animation-duration: 1ms; 1324 animation-delay: 0s; 1325 } 1326 } 1327 .block-editor-block-navigation-leaf .block-editor-inserter__toggle { 1328 background: #1e1e1e; 1329 color: #fff; 1330 height: 24px; 1331 margin: 6px 6px 6px 1px; 1332 min-width: 24px; 1333 } 1334 .block-editor-block-navigation-leaf .block-editor-inserter__toggle:active { 1335 color: #fff; 1336 } 1337 .block-editor-block-navigation-leaf .block-editor-block-navigation-block-select-button__anchor { 1338 background: rgba(0, 0, 0, 0.1); 1339 border-radius: 2px; 1340 display: inline-block; 1341 padding: 2px 6px; 1342 margin: 0 8px; 1343 max-width: 120px; 1344 overflow: hidden; 1345 text-overflow: ellipsis; 1346 } 1347 .block-editor-block-navigation-leaf.is-selected .block-editor-block-navigation-block-select-button__anchor { 1348 background: rgba(0, 0, 0, 0.3); 1349 } 1350 1351 .block-editor-block-navigation-block-slot__description, 1352 .block-editor-block-navigation-block-select-button__description, 1353 .block-editor-block-navigation-appender__description { 1354 display: none; 1355 } 1356 1357 .block-editor-block-navigation-block__contents-cell .block-editor-block-navigation-block__contents-container, 1358 .block-editor-block-navigation-block__contents-cell .block-editor-block-navigation-appender__container, 1359 .block-editor-block-navigation-appender__cell .block-editor-block-navigation-block__contents-container, 1360 .block-editor-block-navigation-appender__cell .block-editor-block-navigation-appender__container { 1361 display: flex; 1362 } 1363 1364 .block-editor-block-navigation-leaf[aria-level] .block-editor-block-icon { 1365 margin-left: 224px; 1366 } 1367 1368 .block-editor-block-navigation-leaf[aria-level="1"] .block-editor-block-icon { 1369 margin-left: 0px; 1370 } 1371 1372 .block-editor-block-navigation-leaf[aria-level="2"] .block-editor-block-icon { 1373 margin-left: 28px; 1374 } 1375 1376 .block-editor-block-navigation-leaf[aria-level="3"] .block-editor-block-icon { 1377 margin-left: 56px; 1378 } 1379 1380 .block-editor-block-navigation-leaf[aria-level="4"] .block-editor-block-icon { 1381 margin-left: 84px; 1382 } 1383 1384 .block-editor-block-navigation-leaf[aria-level="5"] .block-editor-block-icon { 1385 margin-left: 112px; 1386 } 1387 1388 .block-editor-block-navigation-leaf[aria-level="6"] .block-editor-block-icon { 1389 margin-left: 140px; 1390 } 1391 1392 .block-editor-block-navigation-leaf[aria-level="7"] .block-editor-block-icon { 1393 margin-left: 168px; 1394 } 1395 1396 .block-editor-block-navigation-leaf[aria-level="8"] .block-editor-block-icon { 1397 margin-left: 196px; 1398 } 1399 1400 .block-editor-block-navigation-leaf[aria-level="9"] .block-editor-block-icon { 1401 margin-left: 224px; 1402 } 1403 1404 .block-editor-block-parent-selector { 1405 background: #fff; 1406 border-radius: 2px; 1407 } 1408 .block-editor-block-parent-selector .block-editor-block-parent-selector__button { 1409 width: 48px; 1410 height: 48px; 1411 border: 1px solid #1e1e1e; 1412 border-radius: 2px; 1413 } 1414 1415 .block-editor-block-patterns-list__list-item { 1416 cursor: pointer; 1417 margin-top: 16px; 1418 } 1419 .block-editor-block-patterns-list__list-item.is-placeholder { 1420 min-height: 100px; 1421 } 1422 .block-editor-block-patterns-list__list-item[draggable=true] .block-editor-block-preview__container { 1423 cursor: grab; 1424 } 1425 1426 .block-editor-block-patterns-list__item { 1427 height: 100%; 1428 border-radius: 2px; 1429 transition: all 0.05s ease-in-out; 1430 position: relative; 1431 border: 1px solid transparent; 1432 } 1433 .block-editor-block-patterns-list__item:hover { 1434 border: 1px solid var(--wp-admin-theme-color); 1435 } 1436 .block-editor-block-patterns-list__item:focus { 1437 box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); 1438 outline: 2px solid transparent; 1439 } 1440 1441 .block-editor-block-patterns-list__item-title { 1442 padding: 4px; 1443 font-size: 12px; 1444 text-align: center; 1445 } 1446 1447 .block-editor-block-preview__container { 1448 position: relative; 1449 width: 100%; 1450 overflow: hidden; 1451 } 1452 .block-editor-block-preview__container.editor-styles-wrapper { 1453 padding: 0; 1454 margin: 0; 1455 } 1456 .block-editor-block-preview__container .block-editor-block-preview__content { 1457 position: absolute; 1458 top: 0; 1459 left: 0; 1460 transform-origin: top left; 1461 text-align: initial; 1462 margin: 0; 1463 overflow: visible; 1464 min-height: auto; 1465 } 1466 .block-editor-block-preview__container .block-editor-block-preview__content .block-editor-block-list__insertion-point, 1467 .block-editor-block-preview__container .block-editor-block-preview__content .block-editor-block-drop-zone, 1468 .block-editor-block-preview__container .block-editor-block-preview__content .reusable-block-indicator, 1469 .block-editor-block-preview__container .block-editor-block-preview__content .block-list-appender { 1470 display: none; 1471 } 1472 .block-editor-block-preview__container .block-editor-block-preview__content .block-editor-block-list__layout.is-root-container { 1473 padding-left: 0; 1474 padding-right: 0; 1475 } 1476 .block-editor-block-preview__container .block-editor-block-preview__content .block-editor-block-list__layout.is-root-container > .wp-block[data-align=full] { 1477 margin-left: 0; 1478 margin-right: 0; 1479 } 1480 1481 .block-editor-block-settings-menu__popover .components-dropdown-menu__menu { 1482 padding: 0; 1483 } 1484 1485 .block-editor-block-styles { 1486 display: flex; 1487 flex-wrap: wrap; 1488 justify-content: space-between; 1489 } 1490 1491 .block-editor-block-styles__item { 1492 width: calc(50% - 4px); 1493 margin: 4px 0; 1494 flex-shrink: 0; 1495 cursor: pointer; 1496 overflow: hidden; 1497 border-radius: 2px; 1498 padding: 6px; 1499 display: flex; 1500 flex-direction: column; 1501 } 1502 .block-editor-block-styles__item:focus { 1503 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); 1504 outline: 2px solid transparent; 1505 } 1506 .block-editor-block-styles__item:hover .block-editor-block-styles__item-preview { 1507 border-color: var(--wp-admin-theme-color); 1508 } 1509 .block-editor-block-styles__item.is-active .block-editor-block-styles__item-label { 1510 font-weight: bold; 1511 } 1512 .block-editor-block-styles__item.is-active .block-editor-block-styles__item-preview { 1513 margin: 0; 1514 border: 2px solid #1e1e1e; 1515 } 1516 .block-editor-block-styles__item .block-editor-block-preview__container { 1517 cursor: inherit; 1518 } 1519 1520 .block-editor-block-styles__item-preview { 1521 outline: 1px solid transparent; 1522 padding: 0; 1523 margin: 2px; 1524 border-radius: 2px; 1525 display: flex; 1526 overflow: hidden; 1527 background: #fff; 1528 align-items: center; 1529 flex-grow: 1; 1530 min-height: 80px; 1531 max-height: 160px; 1532 } 1533 1534 .block-editor-block-switcher__styles__menugroup { 1535 position: relative; 1536 } 1537 1538 .block-editor-block-styles__item-label { 1539 text-align: center; 1540 padding: 4px 0; 1541 } 1542 1543 .block-editor-block-switcher { 1544 position: relative; 1545 } 1546 1547 .block-editor-block-switcher__no-switcher-icon, 1548 .block-editor-block-switcher__toggle { 1549 position: relative; 1550 } 1551 1552 .components-button.block-editor-block-switcher__toggle, 1553 .components-button.block-editor-block-switcher__no-switcher-icon { 1554 margin: 0; 1555 display: block; 1556 height: 48px; 1557 } 1558 .components-button.block-editor-block-switcher__toggle .block-editor-block-icon, 1559 .components-button.block-editor-block-switcher__no-switcher-icon .block-editor-block-icon { 1560 margin: auto; 1561 } 1562 1563 .block-editor-block-switcher__toggle-text { 1564 margin-left: 8px; 1565 } 1566 .show-icon-labels .block-editor-block-switcher__toggle-text { 1567 display: none; 1568 } 1569 1570 .show-icon-labels .block-editor-block-toolbar .block-editor-block-switcher .components-button.has-icon::after { 1571 font-size: 14px; 1572 } 1573 1574 .block-editor-block-switcher__popover { 1575 margin-left: 6px; 1576 } 1577 1578 .components-button.block-editor-block-switcher__no-switcher-icon { 1579 width: 48px; 1580 } 1581 .components-button.block-editor-block-switcher__no-switcher-icon .block-editor-blocks-icon { 1582 margin-right: auto; 1583 margin-left: auto; 1584 } 1585 1586 .components-button.block-editor-block-switcher__no-switcher-icon:disabled { 1587 opacity: 1; 1588 } 1589 .components-button.block-editor-block-switcher__no-switcher-icon:disabled, 1590 .components-button.block-editor-block-switcher__no-switcher-icon:disabled .block-editor-block-icon.has-colors { 1591 color: #1e1e1e; 1592 } 1593 1594 .block-editor-block-toolbar .components-toolbar-group .components-button.block-editor-block-switcher__no-switcher-icon.has-icon.has-icon .block-editor-block-icon, 1595 .block-editor-block-toolbar .components-toolbar .components-button.block-editor-block-switcher__no-switcher-icon.has-icon.has-icon .block-editor-block-icon, 1596 .block-editor-block-toolbar .components-toolbar-group .components-button.block-editor-block-switcher__toggle.has-icon.has-icon .block-editor-block-icon, 1597 .block-editor-block-toolbar .components-toolbar .components-button.block-editor-block-switcher__toggle.has-icon.has-icon .block-editor-block-icon { 1598 height: 100%; 1599 position: relative; 1600 margin: 0 auto; 1601 display: flex; 1602 align-items: center; 1603 min-width: 100%; 1604 } 1605 .block-editor-block-toolbar .components-toolbar-group .components-button.block-editor-block-switcher__no-switcher-icon.has-icon.has-icon::before, 1606 .block-editor-block-toolbar .components-toolbar .components-button.block-editor-block-switcher__no-switcher-icon.has-icon.has-icon::before, 1607 .block-editor-block-toolbar .components-toolbar-group .components-button.block-editor-block-switcher__toggle.has-icon.has-icon::before, 1608 .block-editor-block-toolbar .components-toolbar .components-button.block-editor-block-switcher__toggle.has-icon.has-icon::before { 1609 top: 8px; 1610 right: 8px; 1611 bottom: 8px; 1612 left: 8px; 1613 } 1614 1615 .components-popover.block-editor-block-switcher__popover .components-popover__content { 1616 min-width: 300px; 1617 } 1618 1619 .components-popover.block-editor-block-switcher__popover .components-popover__content > div { 1620 min-width: auto; 1621 display: flex; 1622 background: #fff; 1623 padding: 0; 1624 } 1625 .components-popover.block-editor-block-switcher__popover .components-popover__content > div .components-menu-group { 1626 margin: 0; 1627 } 1628 1629 .block-editor-block-switcher__popover .components-popover__content .block-editor-block-styles { 1630 margin: 0 -3px; 1631 } 1632 .block-editor-block-switcher__popover .components-popover__content .components-panel__body { 1633 border: 0; 1634 position: relative; 1635 z-index: 1; 1636 } 1637 .block-editor-block-switcher__popover .components-popover__content .components-panel__body + .components-panel__body { 1638 border-top: 1px solid #e0e0e0; 1639 } 1640 1641 .block-editor-block-switcher__popover__preview__parent .block-editor-block-switcher__popover__preview__container { 1642 position: absolute; 1643 top: -12px; 1644 left: calc(100% + 32px); 1645 } 1646 1647 .block-editor-block-switcher__preview__popover { 1648 display: none; 1649 } 1650 .block-editor-block-switcher__preview__popover.components-popover { 1651 margin-left: 4px; 1652 margin-top: 11px; 1653 } 1654 @media (min-width: 782px) { 1655 .block-editor-block-switcher__preview__popover { 1656 display: block; 1657 } 1658 } 1659 .block-editor-block-switcher__preview__popover .components-popover__content { 1660 box-shadow: none; 1661 border: 1px solid #1e1e1e; 1662 background: #fff; 1663 border-radius: 2px; 1664 } 1665 .block-editor-block-switcher__preview__popover .block-editor-block-switcher__preview { 1666 width: 300px; 1667 height: auto; 1668 max-height: 500px; 1669 padding: 16px; 1670 } 1671 1672 .block-editor-block-switcher__preview-title { 1673 margin-bottom: 12px; 1674 color: #757575; 1675 text-transform: uppercase; 1676 font-size: 11px; 1677 font-weight: 500; 1678 } 1679 1680 .block-editor-block-contextual-toolbar .components-button.block-editor-block-switcher__no-switcher-icon { 1681 width: 48px; 1682 } 1683 .block-editor-block-contextual-toolbar .components-button.block-editor-block-switcher__no-switcher-icon, 1684 .block-editor-block-contextual-toolbar .components-button.block-editor-block-switcher__toggle { 1685 height: 48px; 1686 } 1687 .block-editor-block-contextual-toolbar .components-button.block-editor-block-switcher__no-switcher-icon .block-editor-block-icon, 1688 .block-editor-block-contextual-toolbar .components-button.block-editor-block-switcher__no-switcher-icon .block-editor-block-switcher__transform, 1689 .block-editor-block-contextual-toolbar .components-button.block-editor-block-switcher__toggle .block-editor-block-icon, 1690 .block-editor-block-contextual-toolbar .components-button.block-editor-block-switcher__toggle .block-editor-block-switcher__transform { 1691 width: 48px; 1692 height: 48px; 1693 } 1694 .block-editor-block-contextual-toolbar .components-button.block-editor-block-switcher__no-switcher-icon .block-editor-block-switcher__transform, 1695 .block-editor-block-contextual-toolbar .components-button.block-editor-block-switcher__toggle .block-editor-block-switcher__transform { 1696 padding: 12px; 1697 } 1698 1699 .block-editor-block-switcher__preview-patterns-container { 1700 padding-bottom: 16px; 1701 } 1702 .block-editor-block-switcher__preview-patterns-container .block-editor-block-switcher__preview-patterns-container-list__list-item { 1703 margin-top: 16px; 1704 } 1705 .block-editor-block-switcher__preview-patterns-container .block-editor-block-switcher__preview-patterns-container-list__list-item .block-editor-block-preview__container { 1706 cursor: pointer; 1707 } 1708 .block-editor-block-switcher__preview-patterns-container .block-editor-block-switcher__preview-patterns-container-list__list-item .block-editor-block-switcher__preview-patterns-container-list__item { 1709 height: 100%; 1710 border-radius: 2px; 1711 transition: all 0.05s ease-in-out; 1712 position: relative; 1713 border: 1px solid transparent; 1714 } 1715 .block-editor-block-switcher__preview-patterns-container .block-editor-block-switcher__preview-patterns-container-list__list-item .block-editor-block-switcher__preview-patterns-container-list__item:hover, .block-editor-block-switcher__preview-patterns-container .block-editor-block-switcher__preview-patterns-container-list__list-item .block-editor-block-switcher__preview-patterns-container-list__item:focus { 1716 box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); 1717 outline: 2px solid transparent; 1718 } 1719 .block-editor-block-switcher__preview-patterns-container .block-editor-block-switcher__preview-patterns-container-list__list-item .block-editor-block-switcher__preview-patterns-container-list__item:hover { 1720 box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) #1e1e1e; 1721 } 1722 .block-editor-block-switcher__preview-patterns-container .block-editor-block-switcher__preview-patterns-container-list__list-item .block-editor-block-switcher__preview-patterns-container-list__item .block-editor-block-switcher__preview-patterns-container-list__item-title { 1723 padding: 4px; 1724 font-size: 12px; 1725 text-align: center; 1726 cursor: pointer; 1727 } 1728 1729 .block-editor-block-types-list > [role=presentation] { 1730 padding: 4px; 1731 margin-left: -4px; 1732 margin-right: -4px; 1733 overflow: hidden; 1734 display: flex; 1735 flex-wrap: wrap; 1736 } 1737 1738 .block-editor-block-variation-picker .components-placeholder__instructions { 1739 margin-bottom: 0; 1740 } 1741 .block-editor-block-variation-picker .components-placeholder__fieldset { 1742 flex-direction: column; 1743 } 1744 .block-editor-block-variation-picker.has-many-variations .components-placeholder__fieldset { 1745 max-width: 90%; 1746 } 1747 1748 .block-editor-block-variation-picker__variations.block-editor-block-variation-picker__variations { 1749 display: flex; 1750 justify-content: flex-start; 1751 flex-direction: row; 1752 flex-wrap: wrap; 1753 width: 100%; 1754 margin: 16px 0; 1755 padding: 0; 1756 list-style: none; 1757 } 1758 .block-editor-block-variation-picker__variations.block-editor-block-variation-picker__variations > li { 1759 list-style: none; 1760 margin: 8px 20px 0 0; 1761 flex-shrink: 1; 1762 width: 75px; 1763 text-align: center; 1764 } 1765 .block-editor-block-variation-picker__variations.block-editor-block-variation-picker__variations > li button { 1766 display: inline-flex; 1767 margin-right: 0; 1768 } 1769 .block-editor-block-variation-picker__variations.block-editor-block-variation-picker__variations .block-editor-block-variation-picker__variation { 1770 padding: 8px; 1771 } 1772 .block-editor-block-variation-picker__variations.block-editor-block-variation-picker__variations .block-editor-block-variation-picker__variation-label { 1773 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 1774 font-size: 12px; 1775 display: block; 1776 line-height: 1.4; 1777 } 1778 1779 .block-editor-block-variation-picker__variation { 1780 width: 100%; 1781 } 1782 .block-editor-block-variation-picker__variation.components-button.has-icon { 1783 justify-content: center; 1784 width: auto; 1785 } 1786 .block-editor-block-variation-picker__variation.components-button.has-icon.is-secondary { 1787 background-color: #fff; 1788 } 1789 .block-editor-block-variation-picker__variation.components-button { 1790 height: auto; 1791 padding: 0; 1792 } 1793 .block-editor-block-variation-picker__variation::before { 1794 content: ""; 1795 padding-bottom: 100%; 1796 } 1797 .block-editor-block-variation-picker__variation:first-child { 1798 margin-left: 0; 1799 } 1800 .block-editor-block-variation-picker__variation:last-child { 1801 margin-right: 0; 1802 } 1803 1804 .block-editor-block-pattern-setup { 1805 display: flex; 1806 flex-direction: column; 1807 justify-content: center; 1808 align-items: flex-start; 1809 width: 100%; 1810 border-radius: 2px; 1811 box-shadow: inset 0 0 0 1px #1e1e1e; 1812 outline: 1px solid transparent; 1813 } 1814 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__toolbar { 1815 justify-content: center; 1816 } 1817 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container { 1818 display: grid; 1819 grid-template-columns: 1fr 1fr; 1820 grid-gap: 16px; 1821 padding: 16px; 1822 max-height: 550px; 1823 overflow: auto; 1824 margin: 0 1px 1px 1px; 1825 width: calc(100% - 2px); 1826 background: #fff; 1827 } 1828 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-preview__container, 1829 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container div[role=button] { 1830 cursor: pointer; 1831 } 1832 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__item-title { 1833 padding: 4px; 1834 font-size: 12px; 1835 text-align: center; 1836 } 1837 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-preview__container { 1838 border-radius: 2px; 1839 border: 1px solid #ddd; 1840 } 1841 .block-editor-block-pattern-setup .block-editor-block-pattern-setup__toolbar { 1842 box-sizing: border-box; 1843 position: relative; 1844 padding: 16px; 1845 width: 100%; 1846 text-align: left; 1847 margin: 0; 1848 color: #1e1e1e; 1849 border-radius: 2px 2px 0 0; 1850 background-color: #fff; 1851 box-shadow: inset 0 0 0 1px #1e1e1e; 1852 outline: 1px solid transparent; 1853 display: flex; 1854 flex-direction: row; 1855 align-items: center; 1856 justify-content: space-between; 1857 } 1858 .block-editor-block-pattern-setup .block-editor-block-pattern-setup__toolbar .block-editor-block-pattern-setup__display-controls { 1859 display: flex; 1860 } 1861 .block-editor-block-pattern-setup .block-editor-block-pattern-setup__toolbar .block-editor-block-pattern-setup__navigation, 1862 .block-editor-block-pattern-setup .block-editor-block-pattern-setup__toolbar .block-editor-block-pattern-setup__actions { 1863 width: calc(50% - 36px); 1864 display: flex; 1865 } 1866 .block-editor-block-pattern-setup .block-editor-block-pattern-setup__toolbar .block-editor-block-pattern-setup__actions { 1867 justify-content: flex-end; 1868 } 1869 .block-editor-block-pattern-setup .block-editor-block-pattern-setup__container { 1870 display: flex; 1871 flex-direction: column; 1872 width: 100%; 1873 box-sizing: border-box; 1874 } 1875 .block-editor-block-pattern-setup .block-editor-block-pattern-setup__container .carousel-container { 1876 overflow: hidden; 1877 position: relative; 1878 padding: 0; 1879 margin: 0; 1880 list-style: none; 1881 transform-style: preserve-3d; 1882 } 1883 .block-editor-block-pattern-setup .block-editor-block-pattern-setup__container .carousel-container * { 1884 box-sizing: border-box; 1885 } 1886 .block-editor-block-pattern-setup .block-editor-block-pattern-setup__container .carousel-container .pattern-slide { 1887 opacity: 0; 1888 position: absolute; 1889 top: 0; 1890 width: 100%; 1891 margin: auto; 1892 padding: 16px; 1893 transition: transform 0.5s, opacity 0.5s, z-index 0.5s; 1894 z-index: 100; 1895 } 1896 .block-editor-block-pattern-setup .block-editor-block-pattern-setup__container .carousel-container .pattern-slide.active-slide { 1897 opacity: 1; 1898 position: relative; 1899 z-index: 102; 1900 } 1901 .block-editor-block-pattern-setup .block-editor-block-pattern-setup__container .carousel-container .pattern-slide.previous-slide { 1902 transform: translateX(-100%); 1903 z-index: 101; 1904 } 1905 .block-editor-block-pattern-setup .block-editor-block-pattern-setup__container .carousel-container .pattern-slide.next-slide { 1906 transform: translateX(100%); 1907 z-index: 101; 1908 } 1909 .block-editor-block-pattern-setup .block-editor-block-pattern-setup__container .block-list-appender { 1910 display: none; 1911 } 1912 1913 .block-editor-block-variation-transforms { 1914 padding: 0 16px 16px 56px; 1915 width: 100%; 1916 } 1917 .block-editor-block-variation-transforms .components-dropdown-menu__toggle { 1918 border: 1px solid #757575; 1919 border-radius: 2px; 1920 min-height: 30px; 1921 width: 100%; 1922 position: relative; 1923 text-align: left; 1924 justify-content: left; 1925 padding: 6px 12px; 1926 } 1927 .block-editor-block-variation-transforms .components-dropdown-menu__toggle.components-dropdown-menu__toggle { 1928 padding-right: 24px; 1929 } 1930 .block-editor-block-variation-transforms .components-dropdown-menu__toggle:focus:not(:disabled) { 1931 border-color: var(--wp-admin-theme-color); 1932 box-shadow: 0 0 0 calc(var(--wp-admin-border-width-focus) - 1px) var(--wp-admin-theme-color); 1933 } 1934 .block-editor-block-variation-transforms .components-dropdown-menu__toggle svg { 1935 height: 100%; 1936 padding: 0; 1937 position: absolute; 1938 right: 0; 1939 top: 0; 1940 } 1941 1942 .block-editor-block-variation-transforms__popover .components-popover__content { 1943 min-width: 230px; 1944 } 1945 1946 .components-border-style-control__select { 1947 margin-bottom: 24px; 1948 } 1949 .components-border-style-control__select button { 1950 width: 100%; 1951 } 1952 .components-border-style-control__select ul li, 1953 .components-border-style-control__select ul li:last-child { 1954 margin: 6px; 1955 } 1956 1957 .block-editor-button-block-appender { 1958 display: flex; 1959 flex-direction: column; 1960 align-items: center; 1961 justify-content: center; 1962 padding: 8px; 1963 width: 100%; 1964 height: auto; 1965 color: #1e1e1e; 1966 box-shadow: inset 0 0 0 1px #1e1e1e; 1967 } 1968 .is-dark-theme .block-editor-button-block-appender { 1969 color: rgba(255, 255, 255, 0.65); 1970 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65); 1971 } 1972 .block-editor-button-block-appender:hover { 1973 color: var(--wp-admin-theme-color); 1974 box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color); 1975 } 1976 .block-editor-button-block-appender:focus { 1977 box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color); 1978 } 1979 .block-editor-button-block-appender:active { 1980 color: #000; 1981 } 1982 .block-editor-button-block-appender.block-list-appender__toggle { 1983 display: flex; 1984 flex-direction: row; 1985 box-shadow: none; 1986 height: 24px; 1987 width: 24px; 1988 } 1989 .block-editor-button-block-appender.block-list-appender__toggle > svg { 1990 width: 24px; 1991 background-color: #1e1e1e; 1992 color: #fff; 1993 border-radius: 2px; 1994 flex: 1 0 auto; 1995 } 1996 1997 .block-editor-color-gradient-control .block-editor-color-gradient-control__color-indicator { 1998 margin-bottom: 12px; 1999 } 2000 .block-editor-color-gradient-control .block-editor-color-gradient-control__button-tabs { 2001 display: block; 2002 margin-bottom: 12px; 2003 } 2004 2005 .block-editor-panel-color-gradient-settings .component-color-indicator { 2006 vertical-align: text-bottom; 2007 } 2008 .block-editor-panel-color-gradient-settings__panel-title .component-color-indicator { 2009 display: inline-block; 2010 } 2011 .block-editor-panel-color-gradient-settings.is-opened .block-editor-panel-color-gradient-settings__panel-title .component-color-indicator { 2012 display: none; 2013 } 2014 @media screen and (min-width: 782px) { 2015 .block-editor-panel-color-gradient-settings .components-circular-option-picker__swatches { 2016 margin-right: 0; 2017 } 2018 .block-editor-panel-color-gradient-settings .components-circular-option-picker__option-wrapper { 2019 margin-right: calc((100% - (28px * 6)) / 5); 2020 } 2021 .block-editor-panel-color-gradient-settings .components-circular-option-picker__option-wrapper:nth-child(6n+6) { 2022 margin-right: 0; 2023 } 2024 } 2025 2026 .block-editor-contrast-checker > .components-notice { 2027 margin: 0; 2028 } 2029 2030 .block-editor-default-block-appender { 2031 clear: both; 2032 margin-left: auto; 2033 margin-right: auto; 2034 position: relative; 2035 } 2036 .block-editor-default-block-appender[data-root-client-id=""] .block-editor-default-block-appender__content:hover { 2037 outline: 1px solid transparent; 2038 } 2039 .block-editor-default-block-appender .block-editor-default-block-appender__content { 2040 opacity: 0.62; 2041 } 2042 .block-editor-default-block-appender .components-drop-zone__content-icon { 2043 display: none; 2044 } 2045 2046 .block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter, 2047 .block-editor-default-block-appender .block-editor-inserter { 2048 position: absolute; 2049 top: 0; 2050 height: 32px; 2051 } 2052 .block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle, 2053 .block-editor-default-block-appender .block-editor-inserter .block-editor-inserter__toggle { 2054 margin-right: 0; 2055 } 2056 2057 .block-editor-block-list__empty-block-inserter, 2058 .block-editor-default-block-appender .block-editor-inserter { 2059 right: 8px; 2060 } 2061 @media (min-width: 600px) { 2062 .block-editor-block-list__empty-block-inserter, 2063 .block-editor-default-block-appender .block-editor-inserter { 2064 display: flex; 2065 height: 100%; 2066 } 2067 } 2068 .block-editor-block-list__empty-block-inserter:disabled, 2069 .block-editor-default-block-appender .block-editor-inserter:disabled { 2070 display: none; 2071 } 2072 2073 .block-editor-duotone-control__popover .components-popover__content { 2074 border: 1px solid #1e1e1e; 2075 min-width: 214px; 2076 } 2077 .block-editor-duotone-control__popover .components-circular-option-picker { 2078 padding: 12px; 2079 } 2080 .block-editor-duotone-control__popover .components-menu-group__label { 2081 padding: 12px 12px 0 12px; 2082 width: 100%; 2083 box-sizing: border-box; 2084 } 2085 2086 .block-editor-duotone-control__popover > .components-popover__content { 2087 width: 334px; 2088 } 2089 2090 .block-editor-duotone-control__popover:not([data-y-axis=middle][data-x-axis=right]) > .components-popover__content { 2091 margin-left: -14px; 2092 } 2093 2094 .components-font-appearance-control__select { 2095 margin-bottom: 24px; 2096 } 2097 .components-font-appearance-control__select ul li { 2098 color: #1e1e1e; 2099 text-transform: capitalize; 2100 } 2101 2102 .items-justified-left { 2103 justify-content: flex-start; 2104 } 2105 2106 .items-justified-center { 2107 justify-content: center; 2108 } 2109 2110 .items-justified-right { 2111 justify-content: flex-end; 2112 } 2113 2114 .items-justified-space-between { 2115 justify-content: space-between; 2116 } 2117 2118 .block-editor-link-control { 2119 position: relative; 2120 min-width: 360px; 2121 } 2122 .components-popover__content .block-editor-link-control { 2123 min-width: auto; 2124 width: 90vw; 2125 max-width: 360px; 2126 } 2127 2128 .block-editor-link-control__search-input-wrapper { 2129 position: relative; 2130 } 2131 2132 .block-editor-link-control .block-editor-link-control__search-input.block-editor-link-control__search-input input[type=text] { 2133 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 2134 padding: 6px 8px; 2135 box-shadow: 0 0 0 transparent; 2136 transition: box-shadow 0.1s linear; 2137 border-radius: 2px; 2138 border: 1px solid #757575; 2139 /* Fonts smaller than 16px causes mobile safari to zoom. */ 2140 font-size: 16px; 2141 /* Override core line-height. To be reviewed. */ 2142 line-height: normal; 2143 width: calc(100% - 32px); 2144 display: block; 2145 padding: 11px 16px; 2146 padding-right: 36px; 2147 margin: 16px; 2148 position: relative; 2149 border: 1px solid #ddd; 2150 border-radius: 2px; 2151 } 2152 @media (prefers-reduced-motion: reduce) { 2153 .block-editor-link-control .block-editor-link-control__search-input.block-editor-link-control__search-input input[type=text] { 2154 transition-duration: 0s; 2155 transition-delay: 0s; 2156 } 2157 } 2158 @media (min-width: 600px) { 2159 .block-editor-link-control .block-editor-link-control__search-input.block-editor-link-control__search-input input[type=text] { 2160 font-size: 13px; 2161 /* Override core line-height. To be reviewed. */ 2162 line-height: normal; 2163 } 2164 } 2165 .block-editor-link-control .block-editor-link-control__search-input.block-editor-link-control__search-input input[type=text]:focus { 2166 border-color: var(--wp-admin-theme-color); 2167 box-shadow: 0 0 0 1px var(--wp-admin-theme-color); 2168 outline: 2px solid transparent; 2169 } 2170 .block-editor-link-control .block-editor-link-control__search-input.block-editor-link-control__search-input input[type=text]::-webkit-input-placeholder { 2171 color: rgba(30, 30, 30, 0.62); 2172 } 2173 .block-editor-link-control .block-editor-link-control__search-input.block-editor-link-control__search-input input[type=text]::-moz-placeholder { 2174 opacity: 1; 2175 color: rgba(30, 30, 30, 0.62); 2176 } 2177 .block-editor-link-control .block-editor-link-control__search-input.block-editor-link-control__search-input input[type=text]:-ms-input-placeholder { 2178 color: rgba(30, 30, 30, 0.62); 2179 } 2180 .block-editor-link-control .block-editor-link-control__search-input .components-base-control__field { 2181 margin-bottom: 0; 2182 } 2183 2184 .block-editor-link-control__search-error { 2185 margin: -8px 16px 16px; 2186 } 2187 2188 .block-editor-link-control__search-actions { 2189 position: absolute; 2190 /* 2191 * Actions must be positioned on top of URLInput, since the input will grow 2192 * when suggestions are rendered. 2193 * 2194 * Compensate for: 2195 * - Input margin ($grid-unit-20) 2196 * - Border (1px) 2197 * - Vertically, for the difference in height between the input (40px) and 2198 * the icon buttons. 2199 * - Horizontally, pad to the minimum of: default input padding, or the 2200 * equivalent of the vertical padding. 2201 */ 2202 top: 19px; 2203 right: 19px; 2204 } 2205 2206 .components-button .block-editor-link-control__search-submit .has-icon { 2207 margin: -1px; 2208 } 2209 2210 .block-editor-link-control__search-results-wrapper { 2211 position: relative; 2212 margin-top: -15px; 2213 } 2214 .block-editor-link-control__search-results-wrapper::before, .block-editor-link-control__search-results-wrapper::after { 2215 content: ""; 2216 position: absolute; 2217 left: -1px; 2218 right: 16px; 2219 display: block; 2220 pointer-events: none; 2221 z-index: 100; 2222 } 2223 .block-editor-link-control__search-results-wrapper::before { 2224 height: 8px; 2225 top: 0; 2226 bottom: auto; 2227 } 2228 .block-editor-link-control__search-results-wrapper::after { 2229 height: 16px; 2230 bottom: 0; 2231 top: auto; 2232 } 2233 2234 .block-editor-link-control__search-results-label { 2235 padding: 16px 32px 0; 2236 display: block; 2237 font-weight: 600; 2238 } 2239 2240 .block-editor-link-control__search-results { 2241 margin: 0; 2242 padding: 8px 16px 8px; 2243 max-height: 200px; 2244 overflow-y: auto; 2245 } 2246 .block-editor-link-control__search-results.is-loading { 2247 opacity: 0.2; 2248 } 2249 2250 .block-editor-link-control__search-item { 2251 position: relative; 2252 display: flex; 2253 align-items: center; 2254 font-size: 13px; 2255 cursor: pointer; 2256 background: #fff; 2257 width: 100%; 2258 border: none; 2259 text-align: left; 2260 padding: 12px 16px; 2261 border-radius: 5px; 2262 height: auto; 2263 } 2264 .block-editor-link-control__search-item:hover, .block-editor-link-control__search-item:focus { 2265 background-color: #ddd; 2266 } 2267 .block-editor-link-control__search-item:focus:not(:disabled) { 2268 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color) inset; 2269 } 2270 .block-editor-link-control__search-item.is-selected { 2271 background: #f0f0f0; 2272 } 2273 .block-editor-link-control__search-item.is-selected .block-editor-link-control__search-item-type { 2274 background: #fff; 2275 } 2276 .block-editor-link-control__search-item.is-current { 2277 background: transparent; 2278 border: 0; 2279 width: 100%; 2280 cursor: default; 2281 padding: 16px; 2282 padding-left: 24px; 2283 } 2284 .block-editor-link-control__search-item .block-editor-link-control__search-item-header { 2285 display: block; 2286 margin-right: 8px; 2287 overflow: hidden; 2288 white-space: nowrap; 2289 } 2290 .block-editor-link-control__search-item .block-editor-link-control__search-item-icon { 2291 margin-right: 1em; 2292 min-width: 24px; 2293 } 2294 .block-editor-link-control__search-item .block-editor-link-control__search-item-info, 2295 .block-editor-link-control__search-item .block-editor-link-control__search-item-title { 2296 overflow: hidden; 2297 text-overflow: ellipsis; 2298 padding-right: 24px; 2299 } 2300 .block-editor-link-control__search-item .block-editor-link-control__search-item-info .components-external-link__icon, 2301 .block-editor-link-control__search-item .block-editor-link-control__search-item-title .components-external-link__icon { 2302 position: absolute; 2303 right: 0; 2304 margin-top: 0; 2305 } 2306 .block-editor-link-control__search-item .block-editor-link-control__search-item-title { 2307 display: block; 2308 margin-bottom: 0.2em; 2309 font-weight: 500; 2310 position: relative; 2311 } 2312 .block-editor-link-control__search-item .block-editor-link-control__search-item-title mark { 2313 font-weight: 700; 2314 color: #000; 2315 background-color: transparent; 2316 } 2317 .block-editor-link-control__search-item .block-editor-link-control__search-item-title span { 2318 font-weight: normal; 2319 } 2320 .block-editor-link-control__search-item .block-editor-link-control__search-item-info { 2321 display: block; 2322 color: #757575; 2323 font-size: 0.9em; 2324 line-height: 1.3; 2325 } 2326 .block-editor-link-control__search-item .block-editor-link-control__search-item-type { 2327 display: block; 2328 padding: 3px 8px; 2329 margin-left: auto; 2330 font-size: 0.9em; 2331 background-color: #f0f0f0; 2332 border-radius: 2px; 2333 } 2334 2335 .block-editor-link-control__loading { 2336 margin: 16px; 2337 display: flex; 2338 align-items: center; 2339 } 2340 .block-editor-link-control__loading .components-spinner { 2341 margin-top: 0; 2342 } 2343 2344 .components-button + .block-editor-link-control__search-create { 2345 overflow: visible; 2346 padding: 12px 16px; 2347 } 2348 .components-button + .block-editor-link-control__search-create::before { 2349 content: ""; 2350 position: absolute; 2351 top: -10px; 2352 left: 0; 2353 display: block; 2354 width: 100%; 2355 } 2356 2357 .block-editor-link-control__search-results div[role=menu] > .block-editor-link-control__search-item.block-editor-link-control__search-item { 2358 padding: 10px; 2359 } 2360 2361 .block-editor-link-control__settings { 2362 border-top: 1px solid #ddd; 2363 margin: 0; 2364 padding: 16px 24px; 2365 } 2366 .block-editor-link-control__settings :last-child { 2367 margin-bottom: 0; 2368 } 2369 .is-alternate .block-editor-link-control__settings { 2370 border-top: 1px solid #1e1e1e; 2371 } 2372 2373 .block-editor-link-control__setting { 2374 margin-bottom: 16px; 2375 } 2376 .block-editor-link-control__setting :last-child { 2377 margin-bottom: 0; 2378 } 2379 2380 .block-editor-link-control .block-editor-link-control__search-input .components-spinner { 2381 display: block; 2382 } 2383 .block-editor-link-control .block-editor-link-control__search-input .components-spinner.components-spinner { 2384 position: absolute; 2385 left: auto; 2386 bottom: auto; 2387 /* 2388 * Position spinner to the left of the actions. 2389 * 2390 * Compensate for: 2391 * - Input margin ($grid-unit-20) 2392 * - Border (1px) 2393 * - Vertically, for the difference in height between the input (40px) 2394 * and the spinner. 2395 * - Horizontally, adjust for the width occupied by the icon buttons, 2396 * then artificially create spacing that mimics as if the spinner 2397 * were center-padded to the same width as an icon button. 2398 */ 2399 top: 28px; 2400 right: 62px; 2401 } 2402 2403 .block-editor-link-control__search-item-action { 2404 margin-left: auto; 2405 flex-shrink: 0; 2406 } 2407 2408 .block-editor-line-height-control { 2409 margin-bottom: 24px; 2410 } 2411 .block-editor-line-height-control input { 2412 display: block; 2413 max-width: 60px; 2414 } 2415 2416 .block-editor-image-size-control { 2417 margin-bottom: 1em; 2418 } 2419 .block-editor-image-size-control .block-editor-image-size-control__row { 2420 display: flex; 2421 justify-content: space-between; 2422 } 2423 .block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__width, 2424 .block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__height { 2425 margin-bottom: 0.5em; 2426 } 2427 .block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__width input, 2428 .block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__height input { 2429 line-height: 1.25; 2430 } 2431 .block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__width { 2432 margin-right: 5px; 2433 } 2434 .block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__height { 2435 margin-left: 5px; 2436 } 2437 2438 .block-editor-block-list__layout.has-overlay::after { 2439 content: ""; 2440 position: absolute; 2441 top: -14px; 2442 right: -14px; 2443 bottom: -14px; 2444 left: -14px; 2445 z-index: 60; 2446 } 2447 2448 [data-align=full] .has-overlay::after { 2449 right: 0; 2450 left: 0; 2451 } 2452 2453 .block-editor-block-types-list__list-item { 2454 display: block; 2455 width: 33.33%; 2456 padding: 0; 2457 margin: 0; 2458 } 2459 2460 .components-button.block-editor-block-types-list__item { 2461 display: flex; 2462 flex-direction: column; 2463 width: 100%; 2464 font-size: 13px; 2465 color: #1e1e1e; 2466 padding: 8px; 2467 align-items: stretch; 2468 justify-content: center; 2469 cursor: pointer; 2470 background: transparent; 2471 word-break: break-word; 2472 border-radius: 2px; 2473 border: 1px solid transparent; 2474 transition: all 0.05s ease-in-out; 2475 position: relative; 2476 height: auto; 2477 } 2478 @media (prefers-reduced-motion: reduce) { 2479 .components-button.block-editor-block-types-list__item { 2480 transition-duration: 0s; 2481 transition-delay: 0s; 2482 } 2483 } 2484 .components-button.block-editor-block-types-list__item:disabled { 2485 opacity: 0.6; 2486 cursor: default; 2487 } 2488 .components-button.block-editor-block-types-list__item:not(:disabled):hover { 2489 border-color: var(--wp-admin-theme-color); 2490 color: var(--wp-admin-theme-color) !important; 2491 } 2492 .components-button.block-editor-block-types-list__item:not(:disabled).is-active { 2493 color: #fff; 2494 background: #1e1e1e; 2495 outline: 2px solid transparent; 2496 outline-offset: -2px; 2497 } 2498 2499 .block-editor-block-types-list__item-icon { 2500 padding: 12px 20px; 2501 border-radius: 2px; 2502 color: #1e1e1e; 2503 transition: all 0.05s ease-in-out; 2504 } 2505 @media (prefers-reduced-motion: reduce) { 2506 .block-editor-block-types-list__item-icon { 2507 transition-duration: 0s; 2508 transition-delay: 0s; 2509 } 2510 } 2511 .block-editor-block-types-list__item-icon .block-editor-block-icon { 2512 margin-left: auto; 2513 margin-right: auto; 2514 } 2515 .block-editor-block-types-list__item-icon svg { 2516 transition: all 0.15s ease-out; 2517 } 2518 @media (prefers-reduced-motion: reduce) { 2519 .block-editor-block-types-list__item-icon svg { 2520 transition-duration: 0s; 2521 transition-delay: 0s; 2522 } 2523 } 2524 .block-editor-block-types-list__list-item[draggable=true] .block-editor-block-types-list__item-icon { 2525 cursor: grab; 2526 } 2527 2528 .block-editor-block-types-list__item-title { 2529 padding: 4px 2px 8px; 2530 font-size: 12px; 2531 } 2532 2533 .modal-open .block-editor-media-replace-flow__options { 2534 display: none; 2535 } 2536 2537 .block-editor-media-replace-flow__options .components-popover__content > div { 2538 padding-top: 16px; 2539 } 2540 2541 .block-editor-media-replace-flow__indicator { 2542 margin-left: 4px; 2543 } 2544 2545 .block-editor-media-flow__url-input { 2546 border-top: 1px solid #1e1e1e; 2547 margin-top: 12px; 2548 margin-right: -12px; 2549 margin-left: -12px; 2550 padding: 12px 24px 0; 2551 } 2552 .block-editor-media-flow__url-input .block-editor-media-replace-flow__image-url-label { 2553 top: 16px; 2554 } 2555 .block-editor-media-flow__url-input .block-editor-link-control { 2556 margin-top: -16px; 2557 width: auto; 2558 } 2559 .block-editor-media-flow__url-input .block-editor-link-control .components-base-control .components-base-control__field { 2560 margin-bottom: 0; 2561 } 2562 .block-editor-media-flow__url-input .block-editor-link-control .block-editor-link-control__search-item-title { 2563 max-width: 180px; 2564 margin-top: 16px; 2565 } 2566 .block-editor-media-flow__url-input .block-editor-link-control .block-editor-link-control__search-item.is-current { 2567 width: auto; 2568 padding: 0; 2569 } 2570 .block-editor-media-flow__url-input .block-editor-link-control .block-editor-link-control__search-input.block-editor-link-control__search-input input[type=text] { 2571 margin: 16px 0 0 0; 2572 width: 100%; 2573 } 2574 .block-editor-media-flow__url-input .block-editor-link-control .block-editor-link-control__search-actions { 2575 right: 4px; 2576 } 2577 2578 .block-editor-media-flow__error { 2579 padding: 0 20px 20px 20px; 2580 max-width: 255px; 2581 } 2582 .block-editor-media-flow__error .components-with-notices-ui { 2583 max-width: 255px; 2584 } 2585 .block-editor-media-flow__error .components-with-notices-ui .components-notice__content { 2586 overflow: hidden; 2587 word-wrap: break-word; 2588 } 2589 .block-editor-media-flow__error .components-with-notices-ui .components-notice__dismiss { 2590 position: absolute; 2591 right: 10px; 2592 } 2593 2594 .block-editor-media-placeholder__url-input-container .block-editor-media-placeholder__button { 2595 margin-bottom: 0; 2596 } 2597 2598 .block-editor-media-placeholder__url-input-form { 2599 display: flex; 2600 } 2601 .block-editor-media-placeholder__url-input-form input[type=url].block-editor-media-placeholder__url-input-field { 2602 width: 100%; 2603 flex-grow: 1; 2604 border: none; 2605 border-radius: 0; 2606 margin: 2px; 2607 } 2608 @media (min-width: 600px) { 2609 .block-editor-media-placeholder__url-input-form input[type=url].block-editor-media-placeholder__url-input-field { 2610 width: 300px; 2611 } 2612 } 2613 2614 .block-editor-media-placeholder__url-input-submit-button { 2615 flex-shrink: 1; 2616 } 2617 2618 .block-editor-media-placeholder__button { 2619 margin-bottom: 0.5rem; 2620 } 2621 2622 .block-editor-media-placeholder__cancel-button.is-link { 2623 margin: 1em; 2624 display: block; 2625 } 2626 2627 .block-editor-media-placeholder.is-appender { 2628 min-height: 0; 2629 } 2630 .block-editor-media-placeholder.is-appender:hover { 2631 cursor: pointer; 2632 box-shadow: 0 0 0 1px var(--wp-admin-theme-color); 2633 } 2634 2635 .block-editor-multi-selection-inspector__card { 2636 display: flex; 2637 align-items: flex-start; 2638 padding: 16px; 2639 } 2640 2641 .block-editor-multi-selection-inspector__card-content { 2642 flex-grow: 1; 2643 } 2644 2645 .block-editor-multi-selection-inspector__card-title { 2646 font-weight: 500; 2647 margin-bottom: 5px; 2648 } 2649 2650 .block-editor-multi-selection-inspector__card-description { 2651 font-size: 13px; 2652 } 2653 2654 .block-editor-multi-selection-inspector__card .block-editor-block-icon { 2655 margin-left: -2px; 2656 margin-right: 10px; 2657 padding: 0 3px; 2658 width: 36px; 2659 height: 24px; 2660 } 2661 2662 .block-editor-plain-text { 2663 box-shadow: none; 2664 font-family: inherit; 2665 font-size: inherit; 2666 color: inherit; 2667 line-height: inherit; 2668 border: none; 2669 padding: 0; 2670 margin: 0; 2671 width: 100%; 2672 } 2673 2674 .block-editor-responsive-block-control { 2675 margin-bottom: 28px; 2676 border-bottom: 1px solid #ccc; 2677 padding-bottom: 14px; 2678 } 2679 .block-editor-responsive-block-control:last-child { 2680 padding-bottom: 0; 2681 border-bottom: 0; 2682 } 2683 2684 .block-editor-responsive-block-control__title { 2685 margin: 0; 2686 margin-bottom: 0.6em; 2687 margin-left: -3px; 2688 } 2689 2690 .block-editor-responsive-block-control__label { 2691 font-weight: 600; 2692 margin-bottom: 0.6em; 2693 margin-left: -3px; 2694 } 2695 2696 .block-editor-responsive-block-control__inner { 2697 margin-left: -1px; 2698 } 2699 2700 .block-editor-responsive-block-control__toggle { 2701 margin-left: 1px; 2702 } 2703 2704 .block-editor-responsive-block-control .components-base-control__help { 2705 border: 0; 2706 clip: rect(1px, 1px, 1px, 1px); 2707 -webkit-clip-path: inset(50%); 2708 clip-path: inset(50%); 2709 height: 1px; 2710 margin: -1px; 2711 overflow: hidden; 2712 padding: 0; 2713 position: absolute; 2714 width: 1px; 2715 word-wrap: normal !important; 2716 } 2717 2718 .block-editor-rich-text__editable > p:first-child { 2719 margin-top: 0; 2720 } 2721 .block-editor-rich-text__editable [data-rich-text-placeholder] { 2722 pointer-events: none; 2723 } 2724 .block-editor-rich-text__editable [data-rich-text-placeholder]::after { 2725 content: attr(data-rich-text-placeholder); 2726 opacity: 0.62; 2727 } 2728 .block-editor-rich-text__editable:focus { 2729 outline: none; 2730 } 2731 .block-editor-rich-text__editable:focus [data-rich-text-format-boundary] { 2732 border-radius: 2px; 2733 } 2734 2735 figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before { 2736 opacity: 0.8; 2737 } 2738 2739 .components-popover.block-editor-rich-text__inline-format-toolbar { 2740 z-index: 99998; 2741 } 2742 .components-popover.block-editor-rich-text__inline-format-toolbar .components-popover__content { 2743 width: auto; 2744 min-width: auto; 2745 margin-bottom: 8px; 2746 box-shadow: none; 2747 border: 1px solid #1e1e1e; 2748 border-radius: 2px; 2749 background-color: #fff; 2750 } 2751 .components-popover.block-editor-rich-text__inline-format-toolbar .components-toolbar-group, 2752 .components-popover.block-editor-rich-text__inline-format-toolbar .components-toolbar { 2753 border: none; 2754 } 2755 .components-popover.block-editor-rich-text__inline-format-toolbar .components-toolbar__control, 2756 .components-popover.block-editor-rich-text__inline-format-toolbar .components-dropdown-menu__toggle { 2757 min-width: 48px; 2758 min-height: 48px; 2759 padding-left: 12px; 2760 padding-right: 12px; 2761 } 2762 2763 .block-editor-rich-text__inline-format-toolbar-group .components-dropdown-menu__toggle { 2764 justify-content: center; 2765 } 2766 2767 .show-icon-labels .block-editor-rich-text__inline-format-toolbar-group .components-button.has-icon { 2768 width: auto; 2769 } 2770 .show-icon-labels .block-editor-rich-text__inline-format-toolbar-group .components-button.has-icon svg { 2771 display: none; 2772 } 2773 .show-icon-labels .block-editor-rich-text__inline-format-toolbar-group .components-button.has-icon::after { 2774 content: attr(aria-label); 2775 } 2776 2777 [data-rich-text-script] { 2778 display: inline; 2779 } 2780 [data-rich-text-script]::before { 2781 content: "</>"; 2782 background: yellow; 2783 } 2784 2785 .block-editor-skip-to-selected-block { 2786 position: absolute; 2787 top: -9999em; 2788 } 2789 .block-editor-skip-to-selected-block:focus { 2790 height: auto; 2791 width: auto; 2792 display: block; 2793 font-size: 14px; 2794 font-weight: 600; 2795 padding: 15px 23px 14px; 2796 background: #f1f1f1; 2797 color: var(--wp-admin-theme-color); 2798 line-height: normal; 2799 box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); 2800 text-decoration: none; 2801 outline: none; 2802 z-index: 100000; 2803 } 2804 2805 .block-editor-text-decoration-and-transform { 2806 display: flex; 2807 } 2808 2809 .block-editor-text-transform-control { 2810 flex: 0 0 50%; 2811 } 2812 .block-editor-text-transform-control legend { 2813 margin-bottom: 8px; 2814 } 2815 .block-editor-text-transform-control .block-editor-text-transform-control__buttons { 2816 display: inline-flex; 2817 margin-bottom: 24px; 2818 } 2819 .block-editor-text-transform-control .block-editor-text-transform-control__buttons .components-button.has-icon { 2820 min-width: 24px; 2821 padding: 0; 2822 margin-right: 4px; 2823 } 2824 2825 .block-editor-text-decoration-control { 2826 flex: 0 0 50%; 2827 } 2828 .block-editor-text-decoration-control legend { 2829 margin-bottom: 8px; 2830 } 2831 .block-editor-text-decoration-control .block-editor-text-decoration-control__buttons { 2832 display: inline-flex; 2833 margin-bottom: 24px; 2834 } 2835 .block-editor-text-decoration-control .block-editor-text-decoration-control__buttons .components-button.has-icon { 2836 min-width: 24px; 2837 padding: 0; 2838 margin-right: 4px; 2839 } 2840 2841 .block-editor-tool-selector__help { 2842 margin-top: 8px; 2843 margin-left: -12px; 2844 margin-right: -12px; 2845 margin-bottom: -12px; 2846 padding: 12px 20px; 2847 border-top: 1px solid #ddd; 2848 color: #757575; 2849 min-width: 280px; 2850 } 2851 2852 .block-editor-block-list__block .block-editor-url-input, 2853 .components-popover .block-editor-url-input, 2854 .block-editor-url-input { 2855 flex-grow: 1; 2856 position: relative; 2857 padding: 1px; 2858 } 2859 .block-editor-block-list__block .block-editor-url-input input[type=text], 2860 .components-popover .block-editor-url-input input[type=text], 2861 .block-editor-url-input input[type=text] { 2862 width: 100%; 2863 padding: 8px 8px 8px 12px; 2864 border: none; 2865 border-radius: 0; 2866 margin-left: 0; 2867 margin-right: 0; 2868 /* Fonts smaller than 16px causes mobile safari to zoom. */ 2869 font-size: 16px; 2870 } 2871 @media (min-width: 600px) { 2872 .block-editor-block-list__block .block-editor-url-input input[type=text], 2873 .components-popover .block-editor-url-input input[type=text], 2874 .block-editor-url-input input[type=text] { 2875 width: 300px; 2876 } 2877 } 2878 @media (min-width: 600px) { 2879 .block-editor-block-list__block .block-editor-url-input input[type=text], 2880 .components-popover .block-editor-url-input input[type=text], 2881 .block-editor-url-input input[type=text] { 2882 font-size: 13px; 2883 } 2884 } 2885 .block-editor-block-list__block .block-editor-url-input input[type=text]::-ms-clear, 2886 .components-popover .block-editor-url-input input[type=text]::-ms-clear, 2887 .block-editor-url-input input[type=text]::-ms-clear { 2888 display: none; 2889 } 2890 .block-editor-block-list__block .block-editor-url-input.is-full-width, 2891 .components-popover .block-editor-url-input.is-full-width, 2892 .block-editor-url-input.is-full-width { 2893 width: 100%; 2894 } 2895 .block-editor-block-list__block .block-editor-url-input.is-full-width .block-editor-url-input__input[type=text], 2896 .components-popover .block-editor-url-input.is-full-width .block-editor-url-input__input[type=text], 2897 .block-editor-url-input.is-full-width .block-editor-url-input__input[type=text] { 2898 width: 100%; 2899 } 2900 .block-editor-block-list__block .block-editor-url-input.is-full-width__suggestions, 2901 .components-popover .block-editor-url-input.is-full-width__suggestions, 2902 .block-editor-url-input.is-full-width__suggestions { 2903 width: 100%; 2904 } 2905 .block-editor-block-list__block .block-editor-url-input .components-spinner, 2906 .components-popover .block-editor-url-input .components-spinner, 2907 .block-editor-url-input .components-spinner { 2908 position: absolute; 2909 right: 8px 8px 8px 12px; 2910 bottom: 8px 8px 8px 12px8px1; 2911 margin: 0; 2912 } 2913 2914 .block-editor-url-input__input[type=text] { 2915 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 2916 padding: 6px 8px; 2917 box-shadow: 0 0 0 transparent; 2918 transition: box-shadow 0.1s linear; 2919 border-radius: 2px; 2920 border: 1px solid #757575; 2921 /* Fonts smaller than 16px causes mobile safari to zoom. */ 2922 font-size: 16px; 2923 /* Override core line-height. To be reviewed. */ 2924 line-height: normal; 2925 } 2926 @media (prefers-reduced-motion: reduce) { 2927 .block-editor-url-input__input[type=text] { 2928 transition-duration: 0s; 2929 transition-delay: 0s; 2930 } 2931 } 2932 @media (min-width: 600px) { 2933 .block-editor-url-input__input[type=text] { 2934 font-size: 13px; 2935 /* Override core line-height. To be reviewed. */ 2936 line-height: normal; 2937 } 2938 } 2939 .block-editor-url-input__input[type=text]:focus { 2940 border-color: var(--wp-admin-theme-color); 2941 box-shadow: 0 0 0 1px var(--wp-admin-theme-color); 2942 outline: 2px solid transparent; 2943 } 2944 .block-editor-url-input__input[type=text]::-webkit-input-placeholder { 2945 color: rgba(30, 30, 30, 0.62); 2946 } 2947 .block-editor-url-input__input[type=text]::-moz-placeholder { 2948 opacity: 1; 2949 color: rgba(30, 30, 30, 0.62); 2950 } 2951 .block-editor-url-input__input[type=text]:-ms-input-placeholder { 2952 color: rgba(30, 30, 30, 0.62); 2953 } 2954 2955 .block-editor-url-input__suggestions { 2956 max-height: 200px; 2957 transition: all 0.15s ease-in-out; 2958 padding: 4px 0; 2959 width: 302px; 2960 overflow-y: auto; 2961 } 2962 @media (prefers-reduced-motion: reduce) { 2963 .block-editor-url-input__suggestions { 2964 transition-duration: 0s; 2965 transition-delay: 0s; 2966 } 2967 } 2968 2969 .block-editor-url-input__suggestions, 2970 .block-editor-url-input .components-spinner { 2971 display: none; 2972 } 2973 @media (min-width: 600px) { 2974 .block-editor-url-input__suggestions, 2975 .block-editor-url-input .components-spinner { 2976 display: inherit; 2977 } 2978 } 2979 2980 .block-editor-url-input__suggestion { 2981 padding: 4px 8px 8px 8px 12px; 2982 color: #757575; 2983 display: block; 2984 font-size: 13px; 2985 cursor: pointer; 2986 background: #fff; 2987 width: 100%; 2988 border: none; 2989 text-align: left; 2990 box-shadow: none; 2991 } 2992 .block-editor-url-input__suggestion:hover { 2993 background: #ddd; 2994 } 2995 .block-editor-url-input__suggestion:focus, .block-editor-url-input__suggestion.is-selected { 2996 background: var(--wp-admin-theme-color-darker-20); 2997 color: #fff; 2998 outline: none; 2999 } 3000 3001 .components-toolbar-group > .block-editor-url-input__button, 3002 .components-toolbar > .block-editor-url-input__button { 3003 position: inherit; 3004 } 3005 3006 .block-editor-url-input__button .block-editor-url-input__back { 3007 margin-right: 4px; 3008 overflow: visible; 3009 } 3010 .block-editor-url-input__button .block-editor-url-input__back::after { 3011 content: ""; 3012 position: absolute; 3013 display: block; 3014 width: 1px; 3015 height: 24px; 3016 right: -1px; 3017 background: #ddd; 3018 } 3019 3020 .block-editor-url-input__button-modal { 3021 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); 3022 border: 1px solid #ddd; 3023 background: #fff; 3024 } 3025 3026 .block-editor-url-input__button-modal-line { 3027 display: flex; 3028 flex-direction: row; 3029 flex-grow: 1; 3030 flex-shrink: 1; 3031 min-width: 0; 3032 align-items: flex-start; 3033 } 3034 .block-editor-url-input__button-modal-line .components-button { 3035 flex-shrink: 0; 3036 width: 36px; 3037 height: 36px; 3038 } 3039 3040 .block-editor-url-popover__additional-controls { 3041 border-top: 1px solid #ddd; 3042 } 3043 3044 .block-editor-url-popover__additional-controls > div[role=menu] .components-button:not(:disabled):not([aria-disabled=true]):not(.is-secondary) > svg { 3045 box-shadow: none; 3046 } 3047 3048 .block-editor-url-popover__additional-controls div[role=menu] > .components-button { 3049 padding-left: 12px; 3050 } 3051 3052 .block-editor-url-popover__row { 3053 display: flex; 3054 } 3055 3056 .block-editor-url-popover__row > :not(.block-editor-url-popover__settings-toggle) { 3057 flex-grow: 1; 3058 } 3059 3060 .block-editor-url-popover .components-button.has-icon { 3061 padding: 3px; 3062 } 3063 .block-editor-url-popover .components-button.has-icon > svg { 3064 padding: 5px; 3065 border-radius: 2px; 3066 height: 30px; 3067 width: 30px; 3068 } 3069 .block-editor-url-popover .components-button.has-icon:not(:disabled):focus { 3070 box-shadow: none; 3071 } 3072 .block-editor-url-popover .components-button.has-icon:not(:disabled):focus > svg { 3073 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 4px #fff; 3074 outline: 2px solid transparent; 3075 } 3076 3077 .block-editor-url-popover__settings-toggle { 3078 flex-shrink: 0; 3079 border-radius: 0; 3080 border-left: 1px solid #ddd; 3081 margin-left: 1px; 3082 } 3083 .block-editor-url-popover__settings-toggle[aria-expanded=true] .dashicon { 3084 transform: rotate(180deg); 3085 } 3086 3087 .block-editor-url-popover__input-container .components-base-control:last-child, 3088 .block-editor-url-popover__input-container .components-base-control:last-child .components-base-control__field { 3089 margin-bottom: 0; 3090 } 3091 3092 .block-editor-url-popover__settings { 3093 display: block; 3094 padding: 16px; 3095 border-top: 1px solid #ddd; 3096 } 3097 3098 .block-editor-url-popover__link-editor, 3099 .block-editor-url-popover__link-viewer { 3100 display: flex; 3101 } 3102 .block-editor-url-popover__link-editor .block-editor-url-input .components-base-control__field, 3103 .block-editor-url-popover__link-viewer .block-editor-url-input .components-base-control__field { 3104 margin-bottom: 0; 3105 } 3106 .block-editor-url-popover__link-editor .block-editor-url-input .components-spinner, 3107 .block-editor-url-popover__link-viewer .block-editor-url-input .components-spinner { 3108 bottom: 8px 8px 8px 12px1; 3109 } 3110 3111 .block-editor-url-popover__link-viewer-url { 3112 margin: 7px; 3113 flex-grow: 1; 3114 flex-shrink: 1; 3115 overflow: hidden; 3116 text-overflow: ellipsis; 3117 white-space: nowrap; 3118 min-width: 150px; 3119 max-width: 500px; 3120 } 3121 .block-editor-url-popover__link-viewer-url.has-invalid-link { 3122 color: #cc1818; 3123 } 3124 3125 .block-editor-warning { 3126 align-items: center; 3127 display: flex; 3128 flex-wrap: wrap; 3129 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 3130 padding: 1em; 3131 border: 1px solid #1e1e1e; 3132 border-radius: 2px; 3133 background-color: #fff; 3134 } 3135 .block-editor-warning .block-editor-warning__message { 3136 line-height: 1.4; 3137 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 3138 font-size: 13px; 3139 color: #1e1e1e; 3140 margin: 0; 3141 } 3142 .block-editor-warning p.block-editor-warning__message.block-editor-warning__message { 3143 min-height: auto; 3144 } 3145 .block-editor-warning .block-editor-warning__contents { 3146 display: flex; 3147 flex-direction: row; 3148 justify-content: space-between; 3149 flex-wrap: wrap; 3150 align-items: baseline; 3151 width: 100%; 3152 } 3153 .block-editor-warning .block-editor-warning__actions { 3154 display: flex; 3155 margin-top: 1em; 3156 } 3157 .block-editor-warning .block-editor-warning__action { 3158 margin: 0 8px 0 0; 3159 } 3160 3161 .block-editor-warning__secondary { 3162 margin: auto 0 auto 8px; 3163 } 3164 3165 .components-popover.block-editor-warning__dropdown { 3166 z-index: 99998; 3167 } 3168 3169 .html-anchor-control .components-external-link { 3170 display: block; 3171 margin-top: 8px; 3172 } 3173 3174 .block-editor-hooks__layout-controls { 3175 display: flex; 3176 margin-bottom: 16px; 3177 } 3178 .block-editor-hooks__layout-controls .block-editor-hooks__layout-controls-unit { 3179 display: flex; 3180 margin-right: 24px; 3181 } 3182 .block-editor-hooks__layout-controls .block-editor-hooks__layout-controls-unit svg { 3183 margin: auto 0 4px 8px; 3184 } 3185 3186 .block-editor-hooks__layout-controls-reset { 3187 display: flex; 3188 justify-content: flex-end; 3189 margin-bottom: 24px; 3190 } 3191 3192 .block-editor-hooks__layout-controls-helptext { 3193 font-size: 12px; 3194 } 3195 3196 #end-resizable-editor-section { 3197 display: none; 3198 } 3199 3200 /** 3201 * Block Toolbar 3202 */ 3203 .block-editor-block-toolbar { 3204 display: flex; 3205 flex-grow: 1; 3206 width: 100%; 3207 overflow: auto; 3208 position: relative; 3209 transition: border-color 0.1s linear, box-shadow 0.1s linear; 3210 } 3211 @media (prefers-reduced-motion: reduce) { 3212 .block-editor-block-toolbar { 3213 transition-duration: 0s; 3214 transition-delay: 0s; 3215 } 3216 } 3217 @media (min-width: 600px) { 3218 .block-editor-block-toolbar { 3219 overflow: inherit; 3220 } 3221 } 3222 .block-editor-block-toolbar .components-toolbar-group, 3223 .block-editor-block-toolbar .components-toolbar { 3224 background: none; 3225 line-height: 0; 3226 margin-top: -1px; 3227 margin-bottom: -1px; 3228 border: 0; 3229 border-right: 1px solid #ddd; 3230 } 3231 .block-editor-block-toolbar > :last-child, 3232 .block-editor-block-toolbar > :last-child .components-toolbar-group, 3233 .block-editor-block-toolbar > :last-child .components-toolbar { 3234 border-right: none; 3235 } 3236 3237 .block-editor-block-contextual-toolbar.has-parent:not(.is-fixed) { 3238 margin-left: calc(48px + 8px); 3239 } 3240 .show-icon-labels .block-editor-block-contextual-toolbar.has-parent:not(.is-fixed) { 3241 margin-left: 0; 3242 } 3243 3244 .block-editor-block-parent-selector { 3245 position: absolute; 3246 top: -1px; 3247 left: calc(-48px - 8px - 1px); 3248 } 3249 .show-icon-labels .block-editor-block-parent-selector { 3250 position: relative; 3251 left: auto; 3252 top: auto; 3253 margin-top: -1px; 3254 margin-left: -1px; 3255 margin-bottom: -1px; 3256 } 3257 3258 .block-editor-block-toolbar__block-controls { 3259 height: auto !important; 3260 padding: 0 !important; 3261 margin-left: -1px; 3262 } 3263 .block-editor-block-toolbar__block-controls .block-editor-block-switcher .components-dropdown-menu__toggle .block-editor-block-icon, 3264 .block-editor-block-toolbar__block-controls .block-editor-block-switcher__no-switcher-icon .block-editor-block-icon { 3265 width: 24px !important; 3266 margin: 0 !important; 3267 } 3268 .block-editor-block-toolbar__block-controls .block-editor-block-switcher .components-dropdown-menu__toggle:focus::before, 3269 .block-editor-block-toolbar__block-controls .block-editor-block-switcher__no-switcher-icon:focus::before { 3270 right: 4px !important; 3271 } 3272 .block-editor-block-toolbar__block-controls .block-editor-block-mover { 3273 margin-left: -6px; 3274 } 3275 3276 .block-editor-block-toolbar .components-toolbar-group, 3277 .block-editor-block-toolbar .components-toolbar, 3278 .block-editor-rich-text__inline-format-toolbar-group .components-toolbar-group, 3279 .block-editor-rich-text__inline-format-toolbar-group .components-toolbar { 3280 display: flex; 3281 flex-wrap: nowrap; 3282 } 3283 3284 .block-editor-block-toolbar__slot { 3285 display: inline-block; 3286 line-height: 0; 3287 } 3288 @supports (position: sticky) { 3289 .block-editor-block-toolbar__slot { 3290 display: inline-flex; 3291 } 3292 } 3293 3294 .show-icon-labels .block-editor-block-toolbar .components-button.has-icon { 3295 width: auto; 3296 } 3297 .show-icon-labels .block-editor-block-toolbar .components-button.has-icon svg { 3298 display: none; 3299 } 3300 .show-icon-labels .block-editor-block-toolbar .components-button.has-icon::after { 3301 content: attr(aria-label); 3302 font-size: 12px; 3303 } 3304 .show-icon-labels .components-accessible-toolbar .components-toolbar-group > div:first-child:last-child > .components-button.has-icon { 3305 padding-left: 6px; 3306 padding-right: 6px; 3307 } 3308 .show-icon-labels .block-editor-block-switcher { 3309 border-right: 1px solid #1e1e1e; 3310 } 3311 .show-icon-labels .block-editor-block-switcher .components-dropdown-menu__toggle { 3312 margin-left: 0; 3313 } 3314 .show-icon-labels .block-editor-block-switcher .components-dropdown-menu__toggle .block-editor-block-icon, 3315 .show-icon-labels .block-editor-block-switcher__no-switcher-icon .block-editor-block-icon { 3316 width: 0 !important; 3317 height: 0 !important; 3318 } 3319 .show-icon-labels .block-editor-block-switcher .components-dropdown-menu__toggle:focus::before, 3320 .show-icon-labels .block-editor-block-switcher__no-switcher-icon:focus::before { 3321 right: 4px !important; 3322 } 3323 .show-icon-labels .block-editor-block-parent-selector__button .block-editor-block-icon { 3324 width: 0; 3325 } 3326 .show-icon-labels .block-editor-block-toolbar__block-controls .block-editor-block-mover { 3327 margin-left: 0; 3328 white-space: nowrap; 3329 } 3330 .show-icon-labels .block-editor-block-mover-button { 3331 padding-left: 8px !important; 3332 padding-right: 8px !important; 3333 } 3334 .show-icon-labels .block-editor-block-mover__drag-handle.has-icon { 3335 padding-left: 6px !important; 3336 padding-right: 6px !important; 3337 border-right: 1px solid #1e1e1e; 3338 } 3339 @media (min-width: 600px) { 3340 .show-icon-labels .is-up-button.is-up-button.is-up-button { 3341 border-bottom: 1px solid #1e1e1e; 3342 margin-right: 0; 3343 border-radius: 0; 3344 } 3345 } 3346 .show-icon-labels .block-editor-block-contextual-toolbar .block-editor-block-mover.is-horizontal .block-editor-block-mover-button.block-editor-block-mover-button { 3347 width: auto; 3348 } 3349 .show-icon-labels .components-toolbar, 3350 .show-icon-labels .components-toolbar-group { 3351 flex-shrink: 1; 3352 } 3353 .show-icon-labels .block-editor-rich-text__inline-format-toolbar-group .components-button + .components-button { 3354 margin-left: 6px; 3355 } 3356 3357 .block-editor-inserter { 3358 display: inline-block; 3359 background: none; 3360 border: none; 3361 padding: 0; 3362 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 3363 font-size: 13px; 3364 line-height: 0; 3365 } 3366 @media (min-width: 782px) { 3367 .block-editor-inserter { 3368 position: relative; 3369 } 3370 } 3371 3372 .block-editor-inserter__popover.is-quick .components-popover__content { 3373 border: none; 3374 } 3375 .block-editor-inserter__popover.is-quick .components-popover__content .block-editor-inserter__quick-inserter > * { 3376 border-left: 1px solid #ccc; 3377 border-right: 1px solid #ccc; 3378 } 3379 .block-editor-inserter__popover.is-quick .components-popover__content .block-editor-inserter__quick-inserter > *:first-child { 3380 border-top: 1px solid #ccc; 3381 } 3382 .block-editor-inserter__popover.is-quick .components-popover__content .block-editor-inserter__quick-inserter > *:last-child { 3383 border-bottom: 1px solid #ccc; 3384 } 3385 .block-editor-inserter__popover.is-quick .components-popover__content .block-editor-inserter__quick-inserter > *.components-button { 3386 border: 1px solid #1e1e1e; 3387 } 3388 3389 .block-editor-inserter__popover .block-editor-inserter__menu { 3390 margin: -12px; 3391 } 3392 .block-editor-inserter__popover .block-editor-inserter__menu .block-editor-inserter__tabs .components-tab-panel__tabs { 3393 top: 60px; 3394 } 3395 .block-editor-inserter__popover .block-editor-inserter__menu .block-editor-inserter__main-area { 3396 overflow: visible; 3397 height: auto; 3398 } 3399 .block-editor-inserter__popover .block-editor-inserter__menu .block-editor-inserter__preview-container { 3400 display: none; 3401 } 3402 3403 .block-editor-inserter__toggle.components-button { 3404 display: inline-flex; 3405 align-items: center; 3406 cursor: pointer; 3407 border: none; 3408 outline: none; 3409 padding: 0; 3410 transition: color 0.2s ease; 3411 } 3412 @media (prefers-reduced-motion: reduce) { 3413 .block-editor-inserter__toggle.components-button { 3414 transition-duration: 0s; 3415 transition-delay: 0s; 3416 } 3417 } 3418 3419 .block-editor-inserter__menu { 3420 height: 100%; 3421 position: relative; 3422 overflow: visible; 3423 } 3424 3425 .block-editor-inserter__main-area { 3426 width: auto; 3427 overflow-y: auto; 3428 height: 100%; 3429 } 3430 @media (min-width: 782px) { 3431 .block-editor-inserter__main-area { 3432 width: 350px; 3433 } 3434 } 3435 3436 .block-editor-inserter__inline-elements { 3437 margin-top: -1px; 3438 } 3439 3440 .block-editor-inserter__menu.is-bottom::after { 3441 border-bottom-color: #fff; 3442 } 3443 3444 .components-popover.block-editor-inserter__popover { 3445 z-index: 99999; 3446 } 3447 3448 .block-editor-inserter__search { 3449 padding: 16px; 3450 position: sticky; 3451 top: 0; 3452 background: #fff; 3453 z-index: 1; 3454 } 3455 .block-editor-inserter__search input[type=search].block-editor-inserter__search-input { 3456 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 3457 padding: 6px 8px; 3458 box-shadow: 0 0 0 transparent; 3459 transition: box-shadow 0.1s linear; 3460 border-radius: 2px; 3461 border: 1px solid #757575; 3462 /* Fonts smaller than 16px causes mobile safari to zoom. */ 3463 font-size: 16px; 3464 /* Override core line-height. To be reviewed. */ 3465 line-height: normal; 3466 display: block; 3467 padding: 16px 48px 16px 16px; 3468 background: #f0f0f0; 3469 border: none; 3470 width: 100%; 3471 height: 48px; 3472 /* Fonts smaller than 16px causes mobile safari to zoom. */ 3473 font-size: 16px; 3474 } 3475 @media (prefers-reduced-motion: reduce) { 3476 .block-editor-inserter__search input[type=search].block-editor-inserter__search-input { 3477 transition-duration: 0s; 3478 transition-delay: 0s; 3479 } 3480 } 3481 @media (min-width: 600px) { 3482 .block-editor-inserter__search input[type=search].block-editor-inserter__search-input { 3483 font-size: 13px; 3484 /* Override core line-height. To be reviewed. */ 3485 line-height: normal; 3486 } 3487 } 3488 .block-editor-inserter__search input[type=search].block-editor-inserter__search-input:focus { 3489 border-color: var(--wp-admin-theme-color); 3490 box-shadow: 0 0 0 1px var(--wp-admin-theme-color); 3491 outline: 2px solid transparent; 3492 } 3493 .block-editor-inserter__search input[type=search].block-editor-inserter__search-input::-webkit-input-placeholder { 3494 color: rgba(30, 30, 30, 0.62); 3495 } 3496 .block-editor-inserter__search input[type=search].block-editor-inserter__search-input::-moz-placeholder { 3497 opacity: 1; 3498 color: rgba(30, 30, 30, 0.62); 3499 } 3500 .block-editor-inserter__search input[type=search].block-editor-inserter__search-input:-ms-input-placeholder { 3501 color: rgba(30, 30, 30, 0.62); 3502 } 3503 @media (min-width: 600px) { 3504 .block-editor-inserter__search input[type=search].block-editor-inserter__search-input { 3505 font-size: 13px; 3506 } 3507 } 3508 .block-editor-inserter__search input[type=search].block-editor-inserter__search-input:focus { 3509 background: #fff; 3510 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); 3511 } 3512 .block-editor-inserter__search input[type=search].block-editor-inserter__search-input::placeholder { 3513 color: #757575; 3514 } 3515 .block-editor-inserter__search input[type=search].block-editor-inserter__search-input::-webkit-search-decoration, .block-editor-inserter__search input[type=search].block-editor-inserter__search-input::-webkit-search-cancel-button, .block-editor-inserter__search input[type=search].block-editor-inserter__search-input::-webkit-search-results-button, .block-editor-inserter__search input[type=search].block-editor-inserter__search-input::-webkit-search-results-decoration { 3516 -webkit-appearance: none; 3517 } 3518 3519 .block-editor-inserter__search-icon { 3520 position: absolute; 3521 top: 0; 3522 right: 20px; 3523 bottom: 0; 3524 display: flex; 3525 align-items: center; 3526 } 3527 .block-editor-inserter__search-icon > svg { 3528 margin: 8px; 3529 } 3530 3531 .block-editor-inserter__tabs { 3532 display: flex; 3533 flex-direction: column; 3534 margin-top: -8px; 3535 } 3536 .block-editor-inserter__tabs .components-tab-panel__tabs { 3537 position: sticky; 3538 top: 72px; 3539 background: #fff; 3540 z-index: 1; 3541 border-bottom: 1px solid #ddd; 3542 } 3543 .block-editor-inserter__tabs .components-tab-panel__tabs .components-tab-panel__tabs-item { 3544 flex-grow: 1; 3545 margin-bottom: -1px; 3546 } 3547 .block-editor-inserter__tabs .components-tab-panel__tab-content { 3548 display: flex; 3549 flex-grow: 1; 3550 flex-direction: column; 3551 position: relative; 3552 z-index: 0; 3553 } 3554 3555 .block-editor-inserter__panel-header { 3556 display: inline-flex; 3557 align-items: center; 3558 padding: 16px 16px 0; 3559 } 3560 3561 .block-editor-inserter__panel-header-patterns { 3562 padding: 16px 16px 0; 3563 } 3564 3565 .block-editor-inserter__panel-content { 3566 padding: 16px; 3567 } 3568 3569 .block-editor-inserter__panel-title, 3570 .block-editor-inserter__panel-title button { 3571 margin: 0 12px 0 0; 3572 color: #757575; 3573 text-transform: uppercase; 3574 font-size: 11px; 3575 font-weight: 500; 3576 } 3577 3578 .block-editor-inserter__panel-dropdown select.components-select-control__input.components-select-control__input.components-select-control__input { 3579 line-height: 1.2; 3580 } 3581 3582 .block-editor-inserter__panel-dropdown select { 3583 border: none; 3584 } 3585 3586 .block-editor-inserter__block-list { 3587 flex-grow: 1; 3588 position: relative; 3589 } 3590 3591 .block-editor-inserter__popover .block-editor-block-types-list { 3592 margin: -8px; 3593 } 3594 3595 .block-editor-inserter__reusable-blocks-panel { 3596 position: relative; 3597 text-align: right; 3598 } 3599 3600 .block-editor-inserter__manage-reusable-blocks { 3601 display: inline-block; 3602 margin: 16px; 3603 } 3604 3605 .block-editor-inserter__no-results { 3606 padding: 32px; 3607 margin-top: 64px; 3608 text-align: center; 3609 } 3610 3611 .block-editor-inserter__no-results-icon { 3612 fill: #949494; 3613 } 3614 3615 .block-editor-inserter__child-blocks { 3616 padding: 0 16px; 3617 } 3618 3619 .block-editor-inserter__parent-block-header { 3620 display: flex; 3621 align-items: center; 3622 } 3623 .block-editor-inserter__parent-block-header h2 { 3624 font-size: 13px; 3625 } 3626 .block-editor-inserter__parent-block-header .block-editor-block-icon { 3627 margin-right: 8px; 3628 } 3629 3630 .block-editor-inserter__preview-container { 3631 display: none; 3632 width: 300px; 3633 background: #fff; 3634 border-radius: 2px; 3635 border: 1px solid #ddd; 3636 position: absolute; 3637 top: 16px; 3638 left: calc(100% + 16px); 3639 max-height: calc(100% - 32px); 3640 overflow-y: hidden; 3641 } 3642 @media (min-width: 782px) { 3643 .block-editor-inserter__preview-container { 3644 display: block; 3645 } 3646 } 3647 .block-editor-inserter__preview-container .block-editor-block-card { 3648 padding: 16px; 3649 } 3650 .block-editor-inserter__preview-container .block-editor-block-card__title { 3651 font-size: 13px; 3652 } 3653 3654 .block-editor-inserter__preview-content { 3655 min-height: 144px; 3656 background: #f0f0f0; 3657 display: grid; 3658 flex-grow: 1; 3659 align-items: center; 3660 } 3661 3662 .block-editor-inserter__preview-content-missing { 3663 flex: 1; 3664 display: flex; 3665 justify-content: center; 3666 align-items: center; 3667 min-height: 144px; 3668 color: #757575; 3669 background: #f0f0f0; 3670 } 3671 3672 .block-editor-inserter__tips { 3673 border-top: 1px solid #ddd; 3674 padding: 16px; 3675 flex-shrink: 0; 3676 position: relative; 3677 } 3678 3679 .block-editor-inserter__manage-reusable-blocks-container { 3680 padding: 16px; 3681 } 3682 3683 .block-editor-inserter__quick-inserter { 3684 width: 100%; 3685 max-width: 100%; 3686 } 3687 @media (min-width: 782px) { 3688 .block-editor-inserter__quick-inserter { 3689 width: 350px; 3690 } 3691 } 3692 3693 .block-editor-inserter__quick-inserter-results .block-editor-inserter__panel-header { 3694 height: 0; 3695 padding: 0; 3696 float: left; 3697 } 3698 3699 .block-editor-inserter__quick-inserter.has-search .block-editor-inserter__panel-content, 3700 .block-editor-inserter__quick-inserter.has-expand .block-editor-inserter__panel-content { 3701 padding: 16px; 3702 } 3703 3704 .block-editor-inserter__quick-inserter-patterns .block-editor-block-patterns-list { 3705 display: grid; 3706 grid-template-columns: 1fr 1fr; 3707 grid-gap: 8px; 3708 } 3709 3710 .block-editor-inserter__quick-inserter-separator { 3711 border-top: 1px solid #ddd; 3712 } 3713 3714 .block-editor-inserter__popover.is-quick > .components-popover__content > div { 3715 padding: 0; 3716 } 3717 3718 .block-editor-inserter__quick-inserter-expand.components-button { 3719 display: block; 3720 background: #1e1e1e; 3721 color: #fff; 3722 width: 100%; 3723 height: 44px; 3724 border-radius: 0; 3725 } 3726 .block-editor-inserter__quick-inserter-expand.components-button:hover { 3727 color: #fff; 3728 } 3729 .block-editor-inserter__quick-inserter-expand.components-button:active { 3730 color: #ccc; 3731 } 3732 .block-editor-inserter__quick-inserter-expand.components-button:focus:not(:disabled) { 3733 box-shadow: inset 0 0 0 1.5px var(--wp-admin-theme-color), inset 0 0 0 3px #fff; 3734 } 3735 3736 .block-editor-post-preview__dropdown { 3737 padding: 0; 3738 } 3739 3740 .block-editor-post-preview__button-resize.block-editor-post-preview__button-resize { 3741 padding-left: 40px; 3742 } 3743 .block-editor-post-preview__button-resize.block-editor-post-preview__button-resize.has-icon { 3744 padding-left: 8px; 3745 } 3746 3747 .block-editor-post-preview__dropdown-content .components-popover__content { 3748 overflow-y: visible; 3749 } 3750 .block-editor-post-preview__dropdown-content.edit-post-post-preview-dropdown .components-menu-group:first-child { 3751 padding-bottom: 8px; 3752 } 3753 .block-editor-post-preview__dropdown-content.edit-post-post-preview-dropdown .components-menu-group:last-child { 3754 margin-bottom: 0; 3755 } 3756 .block-editor-post-preview__dropdown-content .components-menu-group + .components-menu-group { 3757 padding: 8px; 3758 } 3759 3760 @media (min-width: 600px) { 3761 .edit-post-header__settings .editor-post-preview, 3762 .edit-site-header__actions .editor-post-preview { 3763 display: none; 3764 } 3765 } 3766 3767 @media (min-width: 600px) { 3768 .edit-post-header.has-reduced-ui .edit-post-header__settings .editor-post-save-draft, 3769 .edit-post-header.has-reduced-ui .edit-post-header__settings .editor-post-saved-state, 3770 .edit-post-header.has-reduced-ui .edit-post-header__settings .block-editor-post-preview__button-toggle { 3771 transition: opacity 0.1s linear; 3772 } 3773 } 3774 @media (min-width: 600px) and (prefers-reduced-motion: reduce) { 3775 .edit-post-header.has-reduced-ui .edit-post-header__settings .editor-post-save-draft, 3776 .edit-post-header.has-reduced-ui .edit-post-header__settings .editor-post-saved-state, 3777 .edit-post-header.has-reduced-ui .edit-post-header__settings .block-editor-post-preview__button-toggle { 3778 transition-duration: 0s; 3779 transition-delay: 0s; 3780 } 3781 } 3782 @media (min-width: 600px) { 3783 .edit-post-header.has-reduced-ui:not(:hover) .edit-post-header__settings .editor-post-save-draft, 3784 .edit-post-header.has-reduced-ui:not(:hover) .edit-post-header__settings .editor-post-saved-state, 3785 .edit-post-header.has-reduced-ui:not(:hover) .edit-post-header__settings .block-editor-post-preview__button-toggle { 3786 opacity: 0; 3787 } 3788 .edit-post-header.has-reduced-ui:not(:hover) .edit-post-header__settings .block-editor-post-preview__button-toggle.is-opened { 3789 opacity: 1; 3790 } 3791 } 3792 3793 body.admin-color-light { 3794 --wp-admin-theme-color: #0085ba; 3795 --wp-admin-theme-color-darker-10: #0073a1; 3796 --wp-admin-theme-color-darker-20: #006187; 3797 --wp-admin-border-width-focus: 2px; 3798 } 3799 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 3800 body.admin-color-light { 3801 --wp-admin-border-width-focus: 1.5px; 3802 } 3803 } 3804 3805 body.admin-color-modern { 3806 --wp-admin-theme-color: #3858e9; 3807 --wp-admin-theme-color-darker-10: #2145e6; 3808 --wp-admin-theme-color-darker-20: #183ad6; 3809 --wp-admin-border-width-focus: 2px; 3810 } 3811 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 3812 body.admin-color-modern { 3813 --wp-admin-border-width-focus: 1.5px; 3814 } 3815 } 3816 3817 body.admin-color-blue { 3818 --wp-admin-theme-color: #096484; 3819 --wp-admin-theme-color-darker-10: #07526c; 3820 --wp-admin-theme-color-darker-20: #064054; 3821 --wp-admin-border-width-focus: 2px; 3822 } 3823 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 3824 body.admin-color-blue { 3825 --wp-admin-border-width-focus: 1.5px; 3826 } 3827 } 3828 3829 body.admin-color-coffee { 3830 --wp-admin-theme-color: #46403c; 3831 --wp-admin-theme-color-darker-10: #383330; 3832 --wp-admin-theme-color-darker-20: #2b2724; 3833 --wp-admin-border-width-focus: 2px; 3834 } 3835 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 3836 body.admin-color-coffee { 3837 --wp-admin-border-width-focus: 1.5px; 3838 } 3839 } 3840 3841 body.admin-color-ectoplasm { 3842 --wp-admin-theme-color: #523f6d; 3843 --wp-admin-theme-color-darker-10: #46365d; 3844 --wp-admin-theme-color-darker-20: #3a2c4d; 3845 --wp-admin-border-width-focus: 2px; 3846 } 3847 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 3848 body.admin-color-ectoplasm { 3849 --wp-admin-border-width-focus: 1.5px; 3850 } 3851 } 3852 3853 body.admin-color-midnight { 3854 --wp-admin-theme-color: #e14d43; 3855 --wp-admin-theme-color-darker-10: #dd382d; 3856 --wp-admin-theme-color-darker-20: #d02c21; 3857 --wp-admin-border-width-focus: 2px; 3858 } 3859 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 3860 body.admin-color-midnight { 3861 --wp-admin-border-width-focus: 1.5px; 3862 } 3863 } 3864 3865 body.admin-color-ocean { 3866 --wp-admin-theme-color: #627c83; 3867 --wp-admin-theme-color-darker-10: #576e74; 3868 --wp-admin-theme-color-darker-20: #4c6066; 3869 --wp-admin-border-width-focus: 2px; 3870 } 3871 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 3872 body.admin-color-ocean { 3873 --wp-admin-border-width-focus: 1.5px; 3874 } 3875 } 3876 3877 body.admin-color-sunrise { 3878 --wp-admin-theme-color: #dd823b; 3879 --wp-admin-theme-color-darker-10: #d97426; 3880 --wp-admin-theme-color-darker-20: #c36922; 3881 --wp-admin-border-width-focus: 2px; 3882 } 3883 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 3884 body.admin-color-sunrise { 3885 --wp-admin-border-width-focus: 1.5px; 3886 } 3887 }
title
Description
Body
title
Description
Body
title
Description
Body
title
Body
Generated : Sun Dec 22 08:20:01 2024 | Cross-referenced by PHPXref |