| [ 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 * Colors 10 */ 11 /** 12 * Fonts & basic variables. 13 */ 14 /** 15 * Grid System. 16 * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/ 17 */ 18 /** 19 * Dimensions. 20 */ 21 /** 22 * Shadows. 23 */ 24 /** 25 * Editor widths. 26 */ 27 /** 28 * Block UI. 29 */ 30 /** 31 * Border radii. 32 */ 33 /** 34 * Block paddings. 35 */ 36 /** 37 * Breakpoint mixins 38 */ 39 /** 40 * Long content fade mixin 41 * 42 * Creates a fading overlay to signify that the content is longer 43 * than the space allows. 44 */ 45 /** 46 * Focus styles. 47 */ 48 /** 49 * Applies editor left position to the selector passed as argument 50 */ 51 /** 52 * Styles that are reused verbatim in a few places 53 */ 54 /** 55 * Allows users to opt-out of animations via OS-level preferences. 56 */ 57 /** 58 * Reset default styles for JavaScript UI based pages. 59 * This is a WP-admin agnostic reset 60 */ 61 /** 62 * Reset the WP Admin page styles for Gutenberg-like pages. 63 */ 64 :root { 65 --wp-admin-theme-color: #007cba; 66 --wp-admin-theme-color-darker-10: #006ba1; 67 --wp-admin-theme-color-darker-20: #005a87; } 68 69 #start-resizable-editor-section { 70 display: none; } 71 72 .block-editor-autocompleters__block .block-editor-block-icon { 73 margin-left: 8px; } 74 75 .block-editor-block-alignment-matrix-toolbar__popover .components-popover__content { 76 min-width: 0; 77 width: auto; } 78 .block-editor-block-alignment-matrix-toolbar__popover .components-popover__content > div { 79 padding: 8px; } 80 81 .block-editor-block-icon { 82 display: flex; 83 align-items: center; 84 justify-content: center; 85 width: 24px; 86 height: 24px; } 87 .block-editor-block-icon.has-colors svg { 88 fill: currentColor; } 89 .block-editor-block-icon svg { 90 min-width: 20px; 91 min-height: 20px; 92 max-width: 24px; 93 max-height: 24px; } 94 95 .block-editor-block-inspector .components-base-control { 96 margin-bottom: 24px; } 97 .block-editor-block-inspector .components-base-control:last-child { 98 margin-bottom: 8px; } 99 100 .block-editor-block-inspector .components-panel__body { 101 border: none; 102 border-top: 1px solid #e0e0e0; } 103 104 .block-editor-block-inspector .block-editor-block-card { 105 padding: 16px; } 106 107 .block-editor-block-inspector__no-blocks { 108 display: block; 109 font-size: 13px; 110 background: #fff; 111 padding: 32px 16px; 112 text-align: center; } 113 114 .block-editor-block-styles .block-editor-block-list__block { 115 margin: 0; } 116 117 /** 118 * Notices & Block Selected/Hover Styles. 119 */ 120 .block-editor-block-list__layout .block-editor-block-list__block, 121 .block-editor-block-list__layout .block-list-appender { 122 position: relative; } 123 .block-editor-block-list__layout .block-editor-block-list__block.is-drop-target::before, 124 .block-editor-block-list__layout .block-list-appender.is-drop-target::before { 125 content: ""; 126 position: absolute; 127 z-index: 0; 128 pointer-events: none; 129 transition: border-color 0.1s linear, border-style 0.1s linear, box-shadow 0.1s linear; 130 top: -14px; 131 left: 0; 132 right: 0; 133 border-top: 4px solid #007cba; 134 border-top: 4px solid var(--wp-admin-theme-color); } 135 .block-editor-block-list__layout .block-editor-block-list__block.is-drop-target.is-dropping-horizontally::before, 136 .block-editor-block-list__layout .block-list-appender.is-drop-target.is-dropping-horizontally::before { 137 top: 0; 138 bottom: 0; 139 right: -6px; 140 border-top: none; 141 border-right: 4px solid #007cba; 142 border-right: 4px solid var(--wp-admin-theme-color); } 143 144 /** 145 * Cross-Block Selection 146 */ 147 .block-editor-block-list__layout { 148 position: relative; } 149 .is-navigate-mode .block-editor-block-list__layout .block-editor-block-list__block.is-selected::after, 150 .is-navigate-mode .block-editor-block-list__layout .block-editor-block-list__block.is-hovered::after, 151 .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted::after, 152 .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected::after { 153 position: absolute; 154 z-index: 1; 155 pointer-events: none; 156 content: ""; 157 top: 1px; 158 bottom: 1px; 159 right: 1px; 160 left: 1px; 161 box-shadow: 0 0 0 1.5px #007cba; 162 box-shadow: 0 0 0 1.5px var(--wp-admin-theme-color); 163 border-radius: 1px; 164 outline: 2px solid transparent; } 165 .is-dark-theme .is-navigate-mode .block-editor-block-list__layout .block-editor-block-list__block.is-selected::after, .is-dark-theme 166 .is-navigate-mode .block-editor-block-list__layout .block-editor-block-list__block.is-hovered::after, .is-dark-theme 167 .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted::after, .is-dark-theme 168 .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected::after { 169 box-shadow: 0 0 0 1.5px #fff; } 170 .is-navigate-mode .block-editor-block-list__layout .block-editor-block-list__block.is-selected .components-placeholder ::selection, 171 .is-navigate-mode .block-editor-block-list__layout .block-editor-block-list__block.is-hovered .components-placeholder ::selection, 172 .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted .components-placeholder ::selection, 173 .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected .components-placeholder ::selection { 174 background: transparent; } 175 .is-navigate-mode .block-editor-block-list__layout .block-editor-block-list__block.is-hovered:not(.is-selected)::after { 176 box-shadow: 0 0 0 1px #949494; } 177 .is-block-moving-mode .block-editor-block-list__layout .block-editor-block-list__block.has-child-selected { 178 box-shadow: 0 0 0 1.5px #007cba; 179 box-shadow: 0 0 0 1.5px var(--wp-admin-theme-color); 180 outline: 1.5px solid transparent; } 181 .is-block-moving-mode .block-editor-block-list__layout .block-editor-block-list__block.is-selected::before { 182 content: ""; 183 position: absolute; 184 z-index: 0; 185 pointer-events: none; 186 transition: border-color 0.1s linear, border-style 0.1s linear, box-shadow 0.1s linear; 187 left: 0; 188 right: 0; 189 top: -14px; 190 border-radius: 2px; 191 border-top: 4px solid #ccc; } 192 .is-block-moving-mode .block-editor-block-list__layout .block-editor-block-list__block.is-selected::after { 193 content: none; } 194 .is-block-moving-mode.can-insert-moving-block .block-editor-block-list__layout .block-editor-block-list__block.is-selected::before { 195 border-color: #007cba; 196 border-color: var(--wp-admin-theme-color); } 197 198 .is-block-moving-mode.block-editor-block-list__block-selection-button { 199 opacity: 0; 200 font-size: 1px; 201 height: 1px; 202 padding: 0; } 203 204 .block-editor-block-list__layout .block-editor-block-list__block { 205 position: relative; 206 overflow-wrap: break-word; 207 /** 208 * Notices 209 */ 210 /** 211 * Block Layout 212 */ 213 /** 214 * Block styles and alignments 215 */ } 216 .block-editor-block-list__layout .block-editor-block-list__block .reusable-block-edit-panel * { 217 z-index: 1; } 218 .block-editor-block-list__layout .block-editor-block-list__block .components-placeholder .components-with-notices-ui { 219 margin: -10px 0 12px 0; } 220 .block-editor-block-list__layout .block-editor-block-list__block .components-with-notices-ui { 221 margin: 0 0 12px 0; 222 width: 100%; } 223 .block-editor-block-list__layout .block-editor-block-list__block .components-with-notices-ui .components-notice { 224 margin-right: 0; 225 margin-left: 0; } 226 .block-editor-block-list__layout .block-editor-block-list__block .components-with-notices-ui .components-notice .components-notice__content { 227 font-size: 13px; } 228 .block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable]):focus { 229 outline: none; } 230 .block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable]):focus::after { 231 position: absolute; 232 z-index: 1; 233 pointer-events: none; 234 content: ""; 235 top: 1px; 236 bottom: 1px; 237 right: 1px; 238 left: 1px; 239 box-shadow: 0 0 0 1.5px #007cba; 240 box-shadow: 0 0 0 1.5px var(--wp-admin-theme-color); 241 border-radius: 1px; } 242 .is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable]):focus::after { 243 box-shadow: 0 0 0 1.5px #fff; } 244 .block-editor-block-list__layout .block-editor-block-list__block.is-focus-mode:not(.is-multi-selected) { 245 opacity: 0.5; 246 transition: opacity 0.1s linear; } 247 @media (prefers-reduced-motion: reduce) { 248 .block-editor-block-list__layout .block-editor-block-list__block.is-focus-mode:not(.is-multi-selected) { 249 transition-duration: 0s; } } 250 .block-editor-block-list__layout .block-editor-block-list__block.is-focus-mode:not(.is-multi-selected):not(.is-focused) .block-editor-block-list__block, .block-editor-block-list__layout .block-editor-block-list__block.is-focus-mode:not(.is-multi-selected).is-focused { 251 opacity: 1; } 252 .block-editor-block-list__layout .block-editor-block-list__block.has-active-entity:not(.is-focus-mode) { 253 opacity: 0.5; 254 transition: opacity 0.1s linear; } 255 @media (prefers-reduced-motion: reduce) { 256 .block-editor-block-list__layout .block-editor-block-list__block.has-active-entity:not(.is-focus-mode) { 257 transition-duration: 0s; } } 258 .block-editor-block-list__layout .block-editor-block-list__block.has-active-entity:not(.is-focus-mode).is-active-entity, .block-editor-block-list__layout .block-editor-block-list__block.has-active-entity:not(.is-focus-mode).has-child-selected, 259 .block-editor-block-list__layout .block-editor-block-list__block.has-active-entity:not(.is-focus-mode):not(.has-child-selected) .block-editor-block-list__block, 260 .block-editor-block-list__layout .block-editor-block-list__block.has-active-entity:not(.is-focus-mode).is-active-entity .block-editor-block-list__block, 261 .block-editor-block-list__layout .block-editor-block-list__block.has-active-entity:not(.is-focus-mode) .is-active-entity .block-editor-block-list__block { 262 opacity: 1; } 263 .block-editor-block-list__layout .block-editor-block-list__block::after { 264 content: ""; 265 pointer-events: none; 266 position: absolute; 267 top: 0; 268 left: 0; 269 bottom: 0; 270 right: 0; 271 border-radius: 2px; 272 box-shadow: 0 0 0 1.5px transparent; } 273 .block-editor-block-list__layout .block-editor-block-list__block.has-warning { 274 min-height: 36px; } 275 .block-editor-block-list__layout .block-editor-block-list__block.has-warning > * { 276 pointer-events: none; 277 -webkit-user-select: none; 278 -ms-user-select: none; 279 user-select: none; } 280 .block-editor-block-list__layout .block-editor-block-list__block.has-warning .block-editor-warning { 281 pointer-events: all; } 282 .block-editor-block-list__layout .block-editor-block-list__block.has-warning::after { 283 content: ""; 284 position: absolute; 285 top: 0; 286 left: 0; 287 bottom: 0; 288 right: 0; 289 border-radius: 2px; 290 background-color: rgba(255, 255, 255, 0.4); } 291 .block-editor-block-list__layout .block-editor-block-list__block.has-warning.is-multi-selected::after { 292 background-color: transparent; } 293 .block-editor-block-list__layout .block-editor-block-list__block.is-reusable > .block-editor-inner-blocks > .block-editor-block-list__layout.has-overlay::after { 294 display: none; } 295 .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 { 296 display: block; } 297 .is-navigate-mode .block-editor-block-list__layout .block-editor-block-list__block { 298 cursor: default; } 299 .block-editor-block-list__layout .block-editor-block-list__block[data-clear="true"] { 300 float: none; } 301 .block-editor-block-list__layout .block-editor-block-list__block .block-editor-block-list__layout .block-editor-default-block-appender .block-editor-inserter { 302 right: auto; 303 left: 8px; } 304 305 .block-editor-block-list__layout .wp-block { 306 margin-right: auto; 307 margin-left: auto; } 308 309 .wp-block[data-align="left"], .wp-block[data-align="right"] { 310 width: 100%; 311 height: 0; } 312 .wp-block[data-align="left"]::before, .wp-block[data-align="right"]::before { 313 content: none; } 314 315 .wp-block[data-align="left"] > *, 316 .wp-block[data-align="right"] > * { 317 z-index: 21; } 318 319 .wp-block[data-align="left"] > * { 320 float: left; 321 margin-right: 2em; } 322 323 .wp-block[data-align="right"] > * { 324 float: right; 325 margin-left: 2em; } 326 327 .wp-block[data-align="full"], .wp-block[data-align="wide"] { 328 clear: both; } 329 330 /** 331 * In-Canvas Inserter 332 */ 333 .block-editor-block-list .block-editor-inserter { 334 margin: 8px; 335 cursor: move; 336 cursor: grab; } 337 338 .block-editor-block-list__insertion-point { 339 position: relative; 340 z-index: 6; 341 margin-top: -14px; } 342 .block-editor-block-list__insertion-point.is-insert-after { 343 margin-top: 14px; } 344 345 .block-editor-block-list__insertion-point-indicator { 346 position: absolute; 347 top: calc(50% - 1px); 348 height: 1.5px; 349 right: 0; 350 left: 0; 351 background: #007cba; 352 background: var(--wp-admin-theme-color); } 353 354 .block-editor-block-list__insertion-point-inserter { 355 display: none; 356 justify-content: center; } 357 @media (min-width: 480px) { 358 .block-editor-block-list__insertion-point-inserter { 359 display: flex; } } 360 .block-editor-block-list__insertion-point-inserter.is-inserter-hidden .block-editor-inserter__toggle { 361 visibility: hidden; 362 pointer-events: none; } 363 364 .block-editor-block-list__block-popover-inserter { 365 position: absolute; 366 top: -9999em; 367 margin-bottom: 14px; } 368 .block-editor-block-list__block-popover-inserter.is-visible { 369 position: static; } 370 371 .block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle.components-button.has-icon, 372 .block-editor-default-block-appender .block-editor-inserter__toggle.components-button.has-icon, 373 .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon, 374 .block-editor-block-list__block-popover-inserter .block-editor-inserter__toggle.components-button.has-icon { 375 background: #1e1e1e; 376 border-radius: 2px; 377 color: #fff; 378 padding: 0; 379 min-width: 24px; 380 height: 24px; } 381 .block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle.components-button.has-icon:hover, 382 .block-editor-default-block-appender .block-editor-inserter__toggle.components-button.has-icon:hover, 383 .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon:hover, 384 .block-editor-block-list__block-popover-inserter .block-editor-inserter__toggle.components-button.has-icon:hover { 385 color: #fff; } 386 387 .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button, 388 .block-editor-block-list__block-popover-inserter .block-editor-inserter__toggle.components-button { 389 animation: block-editor-inserter__toggle__fade-in-animation-delayed 0.3s ease; 390 animation-fill-mode: forwards; } 391 @media (prefers-reduced-motion: reduce) { 392 .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button, 393 .block-editor-block-list__block-popover-inserter .block-editor-inserter__toggle.components-button { 394 animation-duration: 1ms; } } 395 396 @keyframes block-editor-inserter__toggle__fade-in-animation-delayed { 397 0% { 398 opacity: 0; } 399 80% { 400 opacity: 0; } 401 100% { 402 opacity: 1; } } 403 404 @keyframes block-editor-inserter__toggle__fade-in-animation { 405 from { 406 opacity: 0; 407 transform: scale(0); } 408 to { 409 opacity: 1; 410 transform: scale(1); } } 411 412 .wp-block .block-list-appender .block-editor-inserter__toggle { 413 animation: block-editor-inserter__toggle__fade-in-animation 0.1s ease; 414 animation-fill-mode: forwards; } 415 @media (prefers-reduced-motion: reduce) { 416 .wp-block .block-list-appender .block-editor-inserter__toggle { 417 animation-duration: 1ms; } } 418 419 .block-editor-block-list__block:not(.is-selected):not(.has-child-selected) .block-editor-default-block-appender { 420 display: none; } 421 .block-editor-block-list__block:not(.is-selected):not(.has-child-selected) .block-editor-default-block-appender .block-editor-inserter__toggle { 422 opacity: 0; 423 transform: scale(0); } 424 425 .block-editor-block-list__block > .block-editor-block-list__insertion-point { 426 position: absolute; 427 top: -16px; 428 height: 28px; 429 bottom: auto; 430 right: 14px; 431 left: 14px; } 432 433 .block-editor-block-list__block .block-editor-block-list__block-html-textarea { 434 display: block; 435 margin: 0; 436 padding: 12px; 437 width: 100%; 438 border: none; 439 outline: none; 440 border-radius: 2px; 441 box-shadow: inset 0 0 0 1px #1e1e1e; 442 resize: none; 443 overflow: hidden; 444 font-family: Menlo, Consolas, monaco, monospace; 445 font-size: 15px; 446 line-height: 1.5; 447 transition: padding 0.2s linear; } 448 @media (prefers-reduced-motion: reduce) { 449 .block-editor-block-list__block .block-editor-block-list__block-html-textarea { 450 transition-duration: 0s; } } 451 .block-editor-block-list__block .block-editor-block-list__block-html-textarea:focus { 452 box-shadow: inset 0 0 0 1.5px #007cba; 453 box-shadow: inset 0 0 0 1.5px var(--wp-admin-theme-color); } 454 455 /** 456 * Block Toolbar when contextual. 457 */ 458 .block-editor-block-contextual-toolbar { 459 border: 1px solid #1e1e1e; 460 border-radius: 2px; 461 background-color: #fff; } 462 .block-editor-block-contextual-toolbar .block-editor-block-toolbar .components-toolbar-group, 463 .block-editor-block-contextual-toolbar .block-editor-block-toolbar .components-toolbar { 464 border-left-color: #1e1e1e; } 465 .block-editor-block-contextual-toolbar .block-editor-block-mover-button { 466 overflow: hidden; } 467 .block-editor-block-contextual-toolbar .block-editor-block-mover.is-horizontal .block-editor-block-mover-button.block-editor-block-mover-button { 468 min-width: 24px; 469 width: 24px; } 470 .block-editor-block-contextual-toolbar .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover-button.is-up-button svg { 471 margin-top: 2px; } 472 .block-editor-block-contextual-toolbar .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover-button.is-down-button svg { 473 margin-bottom: 3px; } 474 .block-editor-block-contextual-toolbar .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover-button:focus::before { 475 right: 0 !important; 476 min-width: 0; 477 width: 100%; } 478 479 /** 480 * Block Label for Navigation/Selection Mode 481 */ 482 .block-editor-block-list__block-selection-button { 483 display: block; 484 z-index: 22; } 485 .block-editor-block-list__block-selection-button .components-button { 486 font-size: 13px; 487 height: 46px; 488 padding: 12px 16px; 489 position: relative; 490 top: -1px; 491 box-shadow: 0 0 0 1px #1e1e1e; 492 border-radius: 1px; 493 background-color: #fff; } 494 .block-editor-block-list__block-selection-button .components-button:focus { 495 box-shadow: 0 0 0 1.5px #007cba; 496 box-shadow: 0 0 0 1.5px var(--wp-admin-theme-color); } 497 498 /** 499 * Warnings. 500 */ 501 .block-editor-block-list__block .block-editor-warning { 502 z-index: 5; 503 position: relative; } 504 .block-editor-block-list__block .block-editor-warning.block-editor-block-list__block-crash-warning { 505 margin-bottom: auto; } 506 507 /** 508 * Popovers. 509 */ 510 .block-editor-block-list__insertion-point-popover.is-without-arrow { 511 z-index: 28; 512 position: absolute; } 513 .block-editor-block-list__insertion-point-popover.is-without-arrow .components-popover__content.components-popover__content { 514 background: none; 515 border: none; 516 box-shadow: none; 517 overflow-y: visible; 518 margin-right: 0; } 519 520 @keyframes hide-during-dragging { 521 to { 522 position: fixed; 523 transform: translate(-9999px, 9999px); } } 524 525 .components-popover.block-editor-block-list__block-popover { 526 z-index: 31; 527 position: absolute; } 528 .components-popover.block-editor-block-list__block-popover .components-popover__content { 529 margin: 0 !important; 530 min-width: auto; 531 width: -webkit-max-content; 532 width: max-content; 533 background: none; 534 border: none; 535 box-shadow: none; 536 overflow-y: visible; 537 pointer-events: none; } 538 .components-popover.block-editor-block-list__block-popover .components-popover__content > * { 539 pointer-events: all; } 540 .components-popover.block-editor-block-list__block-popover .components-popover__content .block-editor-block-list__block-selection-button, 541 .components-popover.block-editor-block-list__block-popover .components-popover__content .block-editor-block-contextual-toolbar { 542 margin-bottom: 12px; } 543 .is-dragging-components-draggable .components-popover.block-editor-block-list__block-popover { 544 opacity: 0; 545 animation: hide-during-dragging 1ms linear forwards; } 546 547 .is-dragging-components-draggable .components-tooltip { 548 display: none; } 549 550 .block-editor-block-list__block .block-list-appender { 551 margin: 8px 0; } 552 .has-background .block-editor-block-list__block .block-list-appender { 553 margin: 20px 8px; } 554 .block-editor-block-list__block .block-list-appender .block-list-appender__toggle { 555 padding: 0; 556 opacity: 1; 557 transform: scale(1); 558 transition: all 0.1s ease; } 559 @media (prefers-reduced-motion: reduce) { 560 .block-editor-block-list__block .block-list-appender .block-list-appender__toggle { 561 transition-duration: 0s; } } 562 563 .block-list-appender > .block-editor-inserter { 564 display: block; } 565 566 .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 { 567 opacity: 0; 568 transform: scale(0); } 569 570 .block-editor-block-breadcrumb { 571 list-style: none; 572 padding: 0; 573 margin: 0; } 574 .block-editor-block-breadcrumb li { 575 display: inline-block; 576 margin: 0; } 577 .block-editor-block-breadcrumb li:not(:last-child)::after { 578 content: "←"; } 579 580 .block-editor-block-breadcrumb__button.components-button { 581 height: 24px; 582 line-height: 24px; 583 padding: 0; 584 position: relative; } 585 .block-editor-block-breadcrumb__button.components-button:hover:not(:disabled) { 586 text-decoration: underline; 587 box-shadow: none; } 588 .block-editor-block-breadcrumb__button.components-button:focus { 589 box-shadow: none; } 590 .block-editor-block-breadcrumb__button.components-button:focus::before { 591 content: ""; 592 display: block; 593 position: absolute; 594 border-radius: 2px; 595 top: 1px; 596 left: 1px; 597 bottom: 1px; 598 right: 1px; 599 box-shadow: inset 0 0 0 1.5px #007cba; 600 box-shadow: inset 0 0 0 1.5px var(--wp-admin-theme-color); } 601 602 .block-editor-block-breadcrumb__current { 603 cursor: default; } 604 605 .block-editor-block-breadcrumb__button.components-button, 606 .block-editor-block-breadcrumb__current { 607 color: #1e1e1e; 608 padding: 0 8px; 609 font-size: inherit; } 610 611 .block-editor-block-card { 612 display: flex; 613 align-items: flex-start; } 614 615 .block-editor-block-card__icon { 616 border: 1px solid #ddd; 617 padding: 7px; 618 margin-left: 10px; 619 height: 36px; 620 width: 36px; } 621 622 .block-editor-block-card__content { 623 flex-grow: 1; } 624 625 .block-editor-block-card__title { 626 font-weight: 500; } 627 .block-editor-block-card__title.block-editor-block-card__title { 628 margin: 0 0 5px; } 629 630 .block-editor-block-card__description { 631 font-size: 13px; } 632 633 .block-editor-block-card .block-editor-block-icon { 634 margin-right: -2px; 635 margin-left: 10px; 636 padding: 0 3px; 637 width: 36px; 638 height: 24px; } 639 640 /** 641 * Invalid block comparison 642 */ 643 .block-editor-block-compare { 644 overflow: auto; 645 height: auto; } 646 @media (min-width: 600px) { 647 .block-editor-block-compare { 648 max-height: 70%; } } 649 650 .block-editor-block-compare__wrapper { 651 display: flex; 652 padding-bottom: 16px; } 653 .block-editor-block-compare__wrapper > div { 654 display: flex; 655 justify-content: space-between; 656 flex-direction: column; 657 width: 50%; 658 padding: 0 0 0 16px; 659 min-width: 200px; } 660 .block-editor-block-compare__wrapper > div button { 661 float: left; } 662 .block-editor-block-compare__wrapper .block-editor-block-compare__converted { 663 border-right: 1px solid #ddd; 664 padding-right: 15px; 665 padding-left: 0; } 666 .block-editor-block-compare__wrapper .block-editor-block-compare__html { 667 font-family: Menlo, Consolas, monaco, monospace; 668 font-size: 12px; 669 color: #1e1e1e; 670 border-bottom: 1px solid #ddd; 671 padding-bottom: 15px; 672 line-height: 1.7; } 673 .block-editor-block-compare__wrapper .block-editor-block-compare__html span { 674 background-color: #e6ffed; 675 padding-top: 3px; 676 padding-bottom: 3px; } 677 .block-editor-block-compare__wrapper .block-editor-block-compare__html span.block-editor-block-compare__added { 678 background-color: #acf2bd; } 679 .block-editor-block-compare__wrapper .block-editor-block-compare__html span.block-editor-block-compare__removed { 680 background-color: #cc1818; } 681 .block-editor-block-compare__wrapper .block-editor-block-compare__preview { 682 padding: 0; 683 padding-top: 14px; } 684 .block-editor-block-compare__wrapper .block-editor-block-compare__preview p { 685 font-size: 12px; 686 margin-top: 0; } 687 .block-editor-block-compare__wrapper .block-editor-block-compare__action { 688 margin-top: 14px; } 689 .block-editor-block-compare__wrapper .block-editor-block-compare__heading { 690 font-size: 1em; 691 font-weight: 400; 692 margin: 0.67em 0; } 693 694 .block-editor-block-draggable-chip-wrapper { 695 position: absolute; 696 top: -24px; 697 right: 0; } 698 699 .block-editor-block-draggable-chip { 700 background-color: #1e1e1e; 701 border-radius: 2px; 702 border: 1px solid #1e1e1e; 703 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); 704 color: #fff; 705 cursor: grabbing; 706 display: inline-flex; 707 height: 48px; 708 min-width: 72px; 709 padding: 0 12px; 710 -webkit-user-select: none; 711 -ms-user-select: none; 712 user-select: none; } 713 .block-editor-block-draggable-chip svg { 714 fill: currentColor; } 715 .block-editor-block-draggable-chip .block-editor-block-draggable-chip__content { 716 margin: auto; } 717 .block-editor-block-draggable-chip .components-flex__item { 718 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 719 font-size: 13px; } 720 721 .is-dragging { 722 display: none !important; } 723 724 .block-editor-block-mobile-toolbar { 725 display: flex; 726 flex-direction: row; 727 border-left: 1px solid #ddd; } 728 .block-editor-block-mobile-toolbar .block-editor-block-mover-button { 729 width: 36px; 730 height: 36px; 731 border-radius: 2px; 732 padding: 3px; 733 margin: 0; 734 justify-content: center; 735 align-items: center; } 736 .block-editor-block-mobile-toolbar .block-editor-block-mover-button .dashicon { 737 margin: auto; } 738 .block-editor-block-mobile-toolbar .block-editor-block-mover { 739 display: flex; 740 margin-left: auto; } 741 .block-editor-block-mobile-toolbar .block-editor-block-mover .block-editor-block-mover-button { 742 float: right; } 743 744 .block-editor-block-mover-button__description { 745 display: none; } 746 747 .block-editor-block-mover-button.has-icon { 748 padding: 0; } 749 750 .block-editor-block-mover { 751 display: inline-flex; 752 flex-direction: row; } 753 .block-editor-block-mover .block-editor-block-mover__move-button-container, 754 .block-editor-block-mover .components-toolbar { 755 flex: 1; 756 flex-direction: row; 757 border-left: none !important; } 758 @media (min-width: 600px) { 759 .block-editor-block-mover .block-editor-block-mover__move-button-container, 760 .block-editor-block-mover .components-toolbar { 761 flex-direction: column; } } 762 .block-editor-block-mover.is-horizontal .block-editor-block-mover__move-button-container, 763 .block-editor-block-mover.is-horizontal .components-toolbar { 764 flex-direction: row; } 765 @media (min-width: 600px) { 766 .block-editor-block-mover .block-editor-block-mover-button { 767 height: 24px; 768 width: 42px; 769 padding-left: 11px !important; 770 padding-right: 6px !important; } } 771 @media (min-width: 600px) { 772 .block-editor-block-mover .block-editor-block-mover-button::before { 773 right: 8px !important; 774 left: 8px !important; } } 775 .block-editor-block-mover .block-editor-block-mover__drag-handle { 776 width: 24px; 777 cursor: grab; 778 min-width: 24px !important; 779 padding: 0 !important; } 780 .block-editor-block-mover .block-editor-block-mover__drag-handle:focus::before { 781 right: 0 !important; 782 left: 0 !important; } 783 @media (min-width: 600px) { 784 .block-editor-block-mover .components-toolbar-group .block-editor-block-mover-button.is-up-button svg, 785 .block-editor-block-mover .components-toolbar .block-editor-block-mover-button.is-up-button svg { 786 margin-bottom: -8px; } 787 .block-editor-block-mover .components-toolbar-group .block-editor-block-mover-button.is-up-button::before, 788 .block-editor-block-mover .components-toolbar .block-editor-block-mover-button.is-up-button::before { 789 bottom: 0; 790 height: calc(100% - 1px); } 791 .block-editor-block-mover .components-toolbar-group .block-editor-block-mover-button.is-down-button svg, 792 .block-editor-block-mover .components-toolbar .block-editor-block-mover-button.is-down-button svg { 793 margin-top: -8px; } 794 .block-editor-block-mover .components-toolbar-group .block-editor-block-mover-button.is-down-button::before, 795 .block-editor-block-mover .components-toolbar .block-editor-block-mover-button.is-down-button::before { 796 top: 0; 797 height: calc(100% - 1px); } } 798 .block-editor-block-mover.is-horizontal .block-editor-block-mover-button.has-icon { 799 height: 48px; 800 width: 24px; 801 padding-right: 0; 802 padding-left: 0; } 803 .block-editor-block-mover.is-horizontal .block-editor-block-mover-button.has-icon::before { 804 top: 1px; 805 bottom: 1px; 806 min-width: 0; 807 width: auto; 808 height: auto; } 809 .block-editor-block-mover.is-horizontal .block-editor-block-mover-button.is-up-button.has-icon svg { 810 margin-right: 0; 811 margin-left: -8px; 812 margin-bottom: 0; } 813 .block-editor-block-mover.is-horizontal .block-editor-block-mover-button.is-up-button.has-icon::before { 814 right: 0 !important; 815 left: 0 !important; } 816 .block-editor-block-mover.is-horizontal .block-editor-block-mover-button.is-down-button.has-icon svg { 817 margin-right: -8px; 818 margin-left: 0; 819 margin-top: 0; } 820 .block-editor-block-mover.is-horizontal .block-editor-block-mover-button.is-down-button.has-icon::before { 821 right: 0 !important; 822 left: 0 !important; 823 width: calc(100% + 1px); } 824 825 .block-editor-block-navigation__label { 826 margin: 0 0 12px; 827 color: #757575; 828 text-transform: uppercase; 829 font-size: 11px; 830 font-weight: 500; } 831 832 .block-editor-block-navigation__container { 833 padding: 7px; } 834 835 .block-editor-block-navigation-tree { 836 width: 100%; 837 border-collapse: collapse; 838 padding: 0; 839 margin: 0; } 840 841 .block-editor-block-navigation-leaf { 842 position: relative; } 843 .block-editor-block-navigation-leaf.is-dragging { 844 display: none; } 845 .block-editor-block-navigation-leaf .block-editor-block-navigation-block-contents { 846 display: flex; 847 align-items: center; 848 width: 100%; 849 height: auto; 850 padding: 12px 6px; 851 margin-top: auto; 852 margin-bottom: auto; 853 text-align: right; 854 color: #1e1e1e; 855 border-radius: 2px; 856 position: relative; } 857 .block-editor-block-navigation-leaf .block-editor-block-navigation-block-contents.is-dropping-before::before { 858 content: ""; 859 position: absolute; 860 pointer-events: none; 861 transition: border-color 0.1s linear, border-style 0.1s linear, box-shadow 0.1s linear; 862 top: -2px; 863 left: 0; 864 right: 0; 865 border-top: 4px solid #007cba; 866 border-top: 4px solid var(--wp-admin-theme-color); } 867 .block-editor-block-navigation-leaf .block-editor-block-navigation-block-contents.is-dropping-after::before { 868 content: ""; 869 position: absolute; 870 pointer-events: none; 871 transition: border-color 0.1s linear, border-style 0.1s linear, box-shadow 0.1s linear; 872 bottom: -2px; 873 left: 0; 874 right: 0; 875 border-bottom: 4px solid #007cba; 876 border-bottom: 4px solid var(--wp-admin-theme-color); } 877 .block-editor-block-navigation-leaf .block-editor-block-navigation-block-contents.is-dropping-to-inner-blocks::before { 878 content: ""; 879 position: absolute; 880 pointer-events: none; 881 transition: border-color 0.1s linear, border-style 0.1s linear, box-shadow 0.1s linear; 882 bottom: -2px; 883 left: 0; 884 right: 24px; 885 border-bottom: 4px solid #007cba; 886 border-bottom: 4px solid var(--wp-admin-theme-color); } 887 .components-modal__content .block-editor-block-navigation-leaf .block-editor-block-navigation-block-contents { 888 padding-right: 0; 889 padding-left: 0; } 890 .block-editor-block-navigation-leaf.is-visible .block-editor-block-navigation-block-contents { 891 opacity: 1; 892 animation: edit-post__fade-in-animation 0.2s ease-out 0s; 893 animation-fill-mode: forwards; } 894 @media (prefers-reduced-motion: reduce) { 895 .block-editor-block-navigation-leaf.is-visible .block-editor-block-navigation-block-contents { 896 animation-duration: 1ms; } } 897 .block-editor-block-navigation-leaf .block-editor-block-icon { 898 align-self: flex-start; 899 margin-left: 6px; } 900 .block-editor-block-navigation-leaf.is-selected .block-editor-block-icon svg, 901 .block-editor-block-navigation-leaf.is-selected:focus .block-editor-block-icon svg { 902 color: #fff; 903 background: #1e1e1e; 904 box-shadow: 0 0 0 1px #1e1e1e; 905 border-radius: 1px; } 906 .block-editor-block-navigation-leaf .block-editor-block-navigation-block__menu-cell, 907 .block-editor-block-navigation-leaf .block-editor-block-navigation-block__mover-cell, 908 .block-editor-block-navigation-leaf .block-editor-block-navigation-block__contents-cell { 909 padding-top: 0; 910 padding-bottom: 0; } 911 .block-editor-block-navigation-leaf .block-editor-block-navigation-block__menu-cell, 912 .block-editor-block-navigation-leaf .block-editor-block-navigation-block__mover-cell { 913 line-height: 0; 914 width: 36px; 915 opacity: 0; 916 vertical-align: top; } 917 @media (prefers-reduced-motion: reduce) { 918 .block-editor-block-navigation-leaf .block-editor-block-navigation-block__menu-cell, 919 .block-editor-block-navigation-leaf .block-editor-block-navigation-block__mover-cell { 920 transition-duration: 0s; } } 921 .block-editor-block-navigation-leaf .block-editor-block-navigation-block__menu-cell.is-visible, 922 .block-editor-block-navigation-leaf .block-editor-block-navigation-block__mover-cell.is-visible { 923 opacity: 1; 924 animation: edit-post__fade-in-animation 0.2s ease-out 0s; 925 animation-fill-mode: forwards; } 926 @media (prefers-reduced-motion: reduce) { 927 .block-editor-block-navigation-leaf .block-editor-block-navigation-block__menu-cell.is-visible, 928 .block-editor-block-navigation-leaf .block-editor-block-navigation-block__mover-cell.is-visible { 929 animation-duration: 1ms; } } 930 .block-editor-block-navigation-leaf .block-editor-block-navigation-block__menu-cell, 931 .block-editor-block-navigation-leaf .block-editor-block-navigation-block__menu-cell .components-button.has-icon, 932 .block-editor-block-navigation-leaf .block-editor-block-navigation-block__mover-cell, 933 .block-editor-block-navigation-leaf .block-editor-block-navigation-block__mover-cell .components-button.has-icon { 934 width: 24px; 935 min-width: 24px; 936 padding: 0; } 937 .block-editor-block-navigation-leaf .block-editor-block-navigation-block__menu-cell { 938 padding-top: 8px; } 939 .block-editor-block-navigation-leaf .block-editor-block-navigation-block__mover-cell-alignment-wrapper { 940 display: flex; 941 height: 100%; 942 flex-direction: column; 943 align-items: center; } 944 .block-editor-block-navigation-leaf .block-editor-block-mover-button { 945 position: relative; 946 width: 36px; 947 height: 24px; } 948 .block-editor-block-navigation-leaf .block-editor-block-mover-button svg { 949 position: relative; 950 height: 24px; } 951 .block-editor-block-navigation-leaf .block-editor-block-mover-button.is-up-button { 952 align-items: flex-end; } 953 .block-editor-block-navigation-leaf .block-editor-block-mover-button.is-up-button svg { 954 bottom: -4px; } 955 .block-editor-block-navigation-leaf .block-editor-block-mover-button.is-down-button { 956 align-items: flex-start; } 957 .block-editor-block-navigation-leaf .block-editor-block-mover-button.is-down-button svg { 958 top: -4px; } 959 .block-editor-block-navigation-leaf .block-editor-block-mover-button:focus:enabled { 960 box-shadow: none; 961 outline: none; } 962 .block-editor-block-navigation-leaf .block-editor-block-mover-button:focus { 963 box-shadow: none; 964 outline: none; } 965 .block-editor-block-navigation-leaf .block-editor-block-mover-button:focus::before { 966 box-shadow: inset 0 0 0 1.5px #007cba, inset 0 0 0 4px #fff; 967 box-shadow: inset 0 0 0 1.5px var(--wp-admin-theme-color), inset 0 0 0 4px #fff; 968 outline: 2px solid transparent; } 969 .block-editor-block-navigation-leaf .block-editor-block-mover-button::before { 970 content: ""; 971 position: absolute; 972 display: block; 973 border-radius: 2px; 974 height: 16px; 975 min-width: 100%; 976 right: 0; 977 left: 0; 978 animation: components-button__appear-animation 0.1s ease; 979 animation-fill-mode: forwards; } 980 @media (prefers-reduced-motion: reduce) { 981 .block-editor-block-navigation-leaf .block-editor-block-mover-button::before { 982 animation-duration: 1ms; } } 983 .block-editor-block-navigation-leaf .block-editor-inserter__toggle { 984 background: #1e1e1e; 985 color: #fff; 986 height: 24px; 987 margin: 6px 1px 6px 6px; 988 min-width: 24px; } 989 .block-editor-block-navigation-leaf .block-editor-inserter__toggle:active { 990 color: #fff; } 991 992 .block-editor-block-navigation-block-slot__description, 993 .block-editor-block-navigation-block-select-button__description, 994 .block-editor-block-navigation-appender__description { 995 display: none; } 996 997 .block-editor-block-navigation-block__contents-cell .block-editor-block-navigation-block__contents-container, 998 .block-editor-block-navigation-block__contents-cell .block-editor-block-navigation-appender__container, 999 .block-editor-block-navigation-appender__cell .block-editor-block-navigation-block__contents-container, 1000 .block-editor-block-navigation-appender__cell .block-editor-block-navigation-appender__container { 1001 display: flex; } 1002 1003 .block-editor-block-navigation-block__contents-cell .block-editor-block-navigation-block__contents-container, 1004 .block-editor-block-navigation-appender__cell .block-editor-block-navigation-block__contents-container { 1005 min-height: 48px; } 1006 1007 .block-editor-block-navigation-block__contents-cell .block-editor-block-navigator-descender-line, 1008 .block-editor-block-navigation-appender__cell .block-editor-block-navigator-descender-line { 1009 position: relative; 1010 flex-shrink: 0; 1011 width: 24px; } 1012 .block-editor-block-navigation-block__contents-cell .block-editor-block-navigator-descender-line:first-child, 1013 .block-editor-block-navigation-appender__cell .block-editor-block-navigator-descender-line:first-child { 1014 width: 18px; } 1015 .block-editor-block-navigation-block__contents-cell .block-editor-block-navigator-descender-line.has-item, 1016 .block-editor-block-navigation-appender__cell .block-editor-block-navigator-descender-line.has-item { 1017 margin-left: 6px; } 1018 .block-editor-block-navigation-block__contents-cell .block-editor-block-navigator-descender-line::before, 1019 .block-editor-block-navigation-appender__cell .block-editor-block-navigator-descender-line::before { 1020 content: ""; 1021 display: block; 1022 position: absolute; 1023 top: 1px; 1024 bottom: -2px; 1025 left: -1px; 1026 border-left: 2px solid #949494; } 1027 .block-editor-block-navigation-block__contents-cell .block-editor-block-navigator-descender-line.is-terminated::before, 1028 .block-editor-block-navigation-appender__cell .block-editor-block-navigator-descender-line.is-terminated::before { 1029 border-color: transparent; } 1030 .block-editor-block-navigation-block__contents-cell .block-editor-block-navigator-descender-line.has-item.is-last-row, 1031 .block-editor-block-navigation-appender__cell .block-editor-block-navigator-descender-line.has-item.is-last-row { 1032 height: 26px; } 1033 .block-editor-block-navigation-block__contents-cell .block-editor-block-navigator-descender-line.has-item::after, 1034 .block-editor-block-navigation-appender__cell .block-editor-block-navigator-descender-line.has-item::after { 1035 content: ""; 1036 display: block; 1037 position: absolute; 1038 top: 26px; 1039 right: 100%; 1040 width: 5px; 1041 border-bottom: 2px solid #949494; } 1042 1043 .block-editor-block-navigation-appender__cell .block-editor-block-navigator-descender-line.has-item.is-last-row { 1044 height: 16px; } 1045 .block-editor-block-navigation-appender__cell .block-editor-block-navigator-descender-line.has-item.is-last-row::after { 1046 top: 100%; } 1047 1048 .block-editor-block-parent-selector { 1049 background: #fff; 1050 border-radius: 2px; } 1051 .block-editor-block-parent-selector .block-editor-block-parent-selector__button { 1052 width: 48px; 1053 height: 48px; 1054 border: 1px solid #1e1e1e; 1055 border-radius: 2px; } 1056 1057 .block-editor-block-patterns-list__item { 1058 border-radius: 2px; 1059 cursor: pointer; 1060 margin-top: 16px; 1061 transition: all 0.05s ease-in-out; 1062 position: relative; 1063 border: 1px solid transparent; } 1064 .block-editor-block-patterns-list__item:hover { 1065 border: 1px solid #007cba; 1066 border: 1px solid var(--wp-admin-theme-color); } 1067 .block-editor-block-patterns-list__item:focus { 1068 box-shadow: inset 0 0 0 1px #fff, 0 0 0 1.5px #007cba; 1069 box-shadow: inset 0 0 0 1px #fff, 0 0 0 1.5px var(--wp-admin-theme-color); 1070 outline: 2px solid transparent; } 1071 .block-editor-block-patterns-list__item.is-placeholder { 1072 min-height: 100px; } 1073 1074 .block-editor-block-patterns-list__item-title { 1075 padding: 4px; 1076 font-size: 12px; 1077 text-align: center; } 1078 1079 .block-editor-block-preview__container { 1080 position: relative; 1081 width: 100%; 1082 overflow: hidden; } 1083 .block-editor-block-preview__container.editor-styles-wrapper { 1084 padding: 0; 1085 margin: 0; } 1086 .block-editor-block-preview__container .block-editor-block-preview__content { 1087 position: absolute; 1088 top: 0; 1089 right: 0; 1090 transform-origin: top right; 1091 text-align: initial; 1092 margin: 0; 1093 overflow: visible; 1094 min-height: auto; } 1095 .block-editor-block-preview__container .block-editor-block-preview__content .block-editor-block-list__insertion-point, 1096 .block-editor-block-preview__container .block-editor-block-preview__content .block-editor-block-drop-zone, 1097 .block-editor-block-preview__container .block-editor-block-preview__content .reusable-block-indicator, 1098 .block-editor-block-preview__container .block-editor-block-preview__content .block-list-appender { 1099 display: none; } 1100 .block-editor-block-preview__container .block-editor-block-preview__content .block-editor-block-list__layout.is-root-container { 1101 padding-right: 0; 1102 padding-left: 0; } 1103 .block-editor-block-preview__container .block-editor-block-preview__content .block-editor-block-list__layout.is-root-container > .wp-block[data-align="full"] { 1104 margin-right: 0; 1105 margin-left: 0; } 1106 1107 .block-editor-block-settings-menu__popover .components-dropdown-menu__menu { 1108 padding: 0; } 1109 1110 .block-editor-block-styles { 1111 display: flex; 1112 flex-wrap: wrap; 1113 justify-content: space-between; } 1114 1115 .block-editor-block-styles__item { 1116 width: calc(50% - 4px); 1117 margin: 4px 0; 1118 flex-shrink: 0; 1119 cursor: pointer; 1120 overflow: hidden; 1121 border-radius: 2px; 1122 padding: 6px; 1123 display: flex; 1124 flex-direction: column; } 1125 .block-editor-block-styles__item:focus { 1126 box-shadow: 0 0 0 1.5px #007cba; 1127 box-shadow: 0 0 0 1.5px var(--wp-admin-theme-color); 1128 outline: 2px solid transparent; } 1129 .block-editor-block-styles__item:hover .block-editor-block-styles__item-preview { 1130 border-color: #007cba; 1131 border-color: var(--wp-admin-theme-color); } 1132 .block-editor-block-styles__item.is-active .block-editor-block-styles__item-label { 1133 font-weight: bold; } 1134 .block-editor-block-styles__item.is-active .block-editor-block-styles__item-preview { 1135 margin: 0; 1136 border: 2px solid #1e1e1e; } 1137 1138 .block-editor-block-styles__item-preview { 1139 outline: 1px solid transparent; 1140 padding: 0; 1141 margin: 2px; 1142 border-radius: 2px; 1143 display: flex; 1144 overflow: hidden; 1145 background: #fff; 1146 align-items: center; 1147 flex-grow: 1; 1148 min-height: 80px; 1149 max-height: 160px; } 1150 1151 .block-editor-block-switcher__styles__menugroup { 1152 position: relative; } 1153 1154 .block-editor-block-styles__item-label { 1155 text-align: center; 1156 padding: 4px 0; } 1157 1158 .block-editor-block-switcher { 1159 position: relative; } 1160 1161 .block-editor-block-switcher__no-switcher-icon, 1162 .block-editor-block-switcher__toggle { 1163 position: relative; } 1164 1165 .components-button.block-editor-block-switcher__toggle, 1166 .components-button.block-editor-block-switcher__no-switcher-icon { 1167 margin: 0; 1168 display: block; 1169 height: 48px; } 1170 .components-button.block-editor-block-switcher__toggle .block-editor-block-icon, 1171 .components-button.block-editor-block-switcher__no-switcher-icon .block-editor-block-icon { 1172 margin: auto; } 1173 1174 .block-editor-block-switcher__popover { 1175 margin-right: 6px; } 1176 1177 .components-button.block-editor-block-switcher__no-switcher-icon { 1178 width: 48px; } 1179 .components-button.block-editor-block-switcher__no-switcher-icon .block-editor-blocks-icon { 1180 margin-left: auto; 1181 margin-right: auto; } 1182 1183 .components-button.block-editor-block-switcher__no-switcher-icon:disabled { 1184 opacity: 1; } 1185 .components-button.block-editor-block-switcher__no-switcher-icon:disabled, 1186 .components-button.block-editor-block-switcher__no-switcher-icon:disabled .block-editor-block-icon.has-colors { 1187 color: #1e1e1e !important; } 1188 1189 .block-editor-block-toolbar .components-toolbar-group .components-button.block-editor-block-switcher__no-switcher-icon.has-icon.has-icon .block-editor-block-icon, 1190 .block-editor-block-toolbar .components-toolbar .components-button.block-editor-block-switcher__no-switcher-icon.has-icon.has-icon .block-editor-block-icon, 1191 .block-editor-block-toolbar .components-toolbar-group .components-button.block-editor-block-switcher__toggle.has-icon.has-icon .block-editor-block-icon, 1192 .block-editor-block-toolbar .components-toolbar .components-button.block-editor-block-switcher__toggle.has-icon.has-icon .block-editor-block-icon { 1193 height: 100%; 1194 position: relative; 1195 margin: 0 auto; 1196 display: flex; 1197 align-items: center; } 1198 1199 .block-editor-block-toolbar .components-toolbar-group .components-button.block-editor-block-switcher__no-switcher-icon.has-icon.has-icon::before, 1200 .block-editor-block-toolbar .components-toolbar .components-button.block-editor-block-switcher__no-switcher-icon.has-icon.has-icon::before, 1201 .block-editor-block-toolbar .components-toolbar-group .components-button.block-editor-block-switcher__toggle.has-icon.has-icon::before, 1202 .block-editor-block-toolbar .components-toolbar .components-button.block-editor-block-switcher__toggle.has-icon.has-icon::before { 1203 top: 8px; 1204 left: 8px; 1205 bottom: 8px; 1206 right: 8px; } 1207 1208 .components-popover.block-editor-block-switcher__popover .components-popover__content { 1209 min-width: 300px; } 1210 1211 .components-popover.block-editor-block-switcher__popover .components-popover__content > div { 1212 min-width: auto; 1213 display: flex; 1214 background: #fff; 1215 padding: 0; } 1216 .components-popover.block-editor-block-switcher__popover .components-popover__content > div .components-menu-group { 1217 padding: 16px; 1218 margin: 0; } 1219 1220 .block-editor-block-switcher__popover .components-popover__content .block-editor-block-styles { 1221 margin: 0 -3px; } 1222 1223 .block-editor-block-switcher__popover .components-popover__content .components-panel__body { 1224 border: 0; 1225 position: relative; 1226 z-index: 1; } 1227 1228 .block-editor-block-switcher__popover .components-popover__content .components-panel__body + .components-panel__body { 1229 border-top: 1px solid #e0e0e0; } 1230 1231 .block-editor-block-switcher__popover__preview__parent .block-editor-block-switcher__popover__preview__container { 1232 position: absolute; 1233 top: -12px; 1234 right: calc(100% + 32px); } 1235 1236 .block-editor-block-switcher__preview__popover { 1237 display: none; } 1238 .block-editor-block-switcher__preview__popover.components-popover { 1239 margin-right: 4px; 1240 margin-top: 11px; } 1241 @media (min-width: 782px) { 1242 .block-editor-block-switcher__preview__popover { 1243 display: block; } } 1244 .block-editor-block-switcher__preview__popover .components-popover__content { 1245 box-shadow: none; 1246 border: 1px solid #1e1e1e; 1247 background: #fff; 1248 border-radius: 2px; } 1249 .block-editor-block-switcher__preview__popover .block-editor-block-switcher__preview { 1250 width: 300px; 1251 height: auto; 1252 padding: 16px; } 1253 1254 .block-editor-block-switcher__preview-title { 1255 margin-bottom: 12px; 1256 color: #757575; 1257 text-transform: uppercase; 1258 font-size: 11px; 1259 font-weight: 500; } 1260 1261 .block-editor-block-contextual-toolbar .components-button.block-editor-block-switcher__no-switcher-icon { 1262 width: 48px; } 1263 1264 .block-editor-block-contextual-toolbar .components-button.block-editor-block-switcher__no-switcher-icon, 1265 .block-editor-block-contextual-toolbar .components-button.block-editor-block-switcher__toggle { 1266 height: 48px; } 1267 .block-editor-block-contextual-toolbar .components-button.block-editor-block-switcher__no-switcher-icon .block-editor-block-icon, 1268 .block-editor-block-contextual-toolbar .components-button.block-editor-block-switcher__no-switcher-icon .block-editor-block-switcher__transform, 1269 .block-editor-block-contextual-toolbar .components-button.block-editor-block-switcher__toggle .block-editor-block-icon, 1270 .block-editor-block-contextual-toolbar .components-button.block-editor-block-switcher__toggle .block-editor-block-switcher__transform { 1271 width: 48px; 1272 height: 48px; } 1273 .block-editor-block-contextual-toolbar .components-button.block-editor-block-switcher__no-switcher-icon .block-editor-block-switcher__transform, 1274 .block-editor-block-contextual-toolbar .components-button.block-editor-block-switcher__toggle .block-editor-block-switcher__transform { 1275 padding: 12px; } 1276 1277 .block-editor-block-types-list { 1278 list-style: none; 1279 padding: 4px; 1280 margin-right: -4px; 1281 margin-left: -4px; 1282 overflow: hidden; 1283 display: flex; 1284 flex-wrap: wrap; } 1285 1286 .block-editor-block-variation-picker .components-placeholder__instructions { 1287 margin-bottom: 0; } 1288 1289 .block-editor-block-variation-picker .components-placeholder__fieldset { 1290 flex-direction: column; } 1291 1292 .block-editor-block-variation-picker.has-many-variations .components-placeholder__fieldset { 1293 max-width: 90%; } 1294 1295 .block-editor-block-variation-picker__variations.block-editor-block-variation-picker__variations { 1296 display: flex; 1297 justify-content: flex-start; 1298 flex-direction: row; 1299 flex-wrap: wrap; 1300 width: 100%; 1301 margin: 16px 0; 1302 padding: 0; 1303 list-style: none; } 1304 .block-editor-block-variation-picker__variations.block-editor-block-variation-picker__variations > li { 1305 list-style: none; 1306 margin: 8px 0 0 20px; 1307 flex-shrink: 1; 1308 max-width: 100px; 1309 text-align: center; } 1310 .block-editor-block-variation-picker__variations.block-editor-block-variation-picker__variations > li button { 1311 display: inline-flex; 1312 margin-left: 0; } 1313 .block-editor-block-variation-picker__variations.block-editor-block-variation-picker__variations .block-editor-block-variation-picker__variation { 1314 padding: 8px; } 1315 .block-editor-block-variation-picker__variations.block-editor-block-variation-picker__variations .block-editor-block-variation-picker__variation-label { 1316 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 1317 font-size: 12px; 1318 display: block; } 1319 1320 .block-editor-block-variation-picker__variation { 1321 width: 100%; } 1322 .block-editor-block-variation-picker__variation.components-button.has-icon { 1323 justify-content: center; 1324 width: auto; } 1325 .block-editor-block-variation-picker__variation.components-button.has-icon.is-secondary { 1326 background-color: #fff; } 1327 .block-editor-block-variation-picker__variation.components-button { 1328 height: auto; 1329 padding: 0; } 1330 .block-editor-block-variation-picker__variation::before { 1331 content: ""; 1332 padding-bottom: 100%; } 1333 .block-editor-block-variation-picker__variation:first-child { 1334 margin-right: 0; } 1335 .block-editor-block-variation-picker__variation:last-child { 1336 margin-left: 0; } 1337 1338 .block-editor-button-block-appender { 1339 display: flex; 1340 flex-direction: column; 1341 align-items: center; 1342 justify-content: center; 1343 padding: 8px; 1344 width: 100%; 1345 height: auto; 1346 color: #1e1e1e; 1347 box-shadow: inset 0 0 0 1px #1e1e1e; } 1348 .block-editor-button-block-appender:hover { 1349 box-shadow: inset 0 0 0 1px #007cba; 1350 box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color); } 1351 .block-editor-button-block-appender:focus { 1352 box-shadow: inset 0 0 0 2px #007cba; 1353 box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color); } 1354 .block-editor-button-block-appender:active { 1355 color: #000; } 1356 .block-editor-button-block-appender.block-list-appender__toggle { 1357 display: flex; 1358 flex-direction: row; 1359 color: #1e1e1e; 1360 box-shadow: none; 1361 height: 24px; 1362 padding: 0; 1363 margin-right: 8px; } 1364 .block-editor-button-block-appender.block-list-appender__toggle:active { 1365 color: #fff; } 1366 .block-editor-button-block-appender.block-list-appender__toggle > svg { 1367 width: 24px; 1368 background-color: #1e1e1e; 1369 color: #fff; 1370 border-radius: 2px; } 1371 1372 .block-editor-color-gradient-control .block-editor-color-gradient-control__color-indicator { 1373 margin-bottom: 12px; } 1374 1375 .block-editor-color-gradient-control .block-editor-color-gradient-control__button-tabs { 1376 display: block; 1377 margin-bottom: 12px; } 1378 1379 .block-editor-panel-color-gradient-settings .component-color-indicator { 1380 vertical-align: text-bottom; } 1381 1382 .block-editor-panel-color-gradient-settings__panel-title .component-color-indicator { 1383 display: inline-block; } 1384 1385 .block-editor-panel-color-gradient-settings.is-opened .block-editor-panel-color-gradient-settings__panel-title .component-color-indicator { 1386 display: none; } 1387 1388 .block-editor-contrast-checker > .components-notice { 1389 margin: 0; } 1390 1391 .block-editor-default-block-appender { 1392 clear: both; 1393 margin-right: auto; 1394 margin-left: auto; 1395 position: relative; } 1396 .block-editor-default-block-appender[data-root-client-id=""] .block-editor-default-block-appender__content:hover { 1397 outline: 1px solid transparent; } 1398 .block-editor-default-block-appender textarea.block-editor-default-block-appender__content { 1399 font-family: inherit; 1400 font-size: inherit; 1401 border: none; 1402 background: none; 1403 box-shadow: none; 1404 display: block; 1405 cursor: text; 1406 width: 100%; 1407 outline: 1px solid transparent; 1408 transition: 0.2s outline; 1409 resize: none; 1410 margin-top: 28px; 1411 margin-bottom: 28px; 1412 padding: 0 0 0 50px; 1413 color: rgba(30, 30, 30, 0.62); } 1414 @media (prefers-reduced-motion: reduce) { 1415 .block-editor-default-block-appender textarea.block-editor-default-block-appender__content { 1416 transition-duration: 0s; } } 1417 .is-dark-theme .block-editor-default-block-appender textarea.block-editor-default-block-appender__content { 1418 color: rgba(255, 255, 255, 0.65); } 1419 .block-editor-default-block-appender .components-drop-zone__content-icon { 1420 display: none; } 1421 1422 .block-editor-default-block-appender__content { 1423 line-height: 1.8; } 1424 1425 .block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter, 1426 .block-editor-default-block-appender .block-editor-inserter { 1427 position: absolute; 1428 top: 0; 1429 height: 32px; } 1430 .block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle, 1431 .block-editor-default-block-appender .block-editor-inserter .block-editor-inserter__toggle { 1432 margin-left: 0; } 1433 1434 .block-editor-block-list__empty-block-inserter, 1435 .block-editor-default-block-appender .block-editor-inserter { 1436 left: 8px; } 1437 @media (min-width: 600px) { 1438 .block-editor-block-list__empty-block-inserter, 1439 .block-editor-default-block-appender .block-editor-inserter { 1440 display: flex; 1441 height: 100%; } } 1442 .block-editor-block-list__empty-block-inserter:disabled, 1443 .block-editor-default-block-appender .block-editor-inserter:disabled { 1444 display: none; } 1445 1446 @media (min-width: 600px) { 1447 .block-editor-default-block-appender .block-editor-inserter { 1448 align-items: center; } } 1449 1450 .block-editor-link-control { 1451 position: relative; 1452 min-width: 360px; } 1453 .components-popover__content .block-editor-link-control { 1454 min-width: auto; 1455 width: 90vw; 1456 max-width: 360px; } 1457 1458 .block-editor-link-control__search-input-wrapper { 1459 position: relative; } 1460 1461 .block-editor-link-control .block-editor-link-control__search-input.block-editor-link-control__search-input input[type="text"] { 1462 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 1463 padding: 6px 8px; 1464 box-shadow: 0 0 0 transparent; 1465 transition: box-shadow 0.1s linear; 1466 border-radius: 2px; 1467 border: 1px solid #757575; 1468 /* Fonts smaller than 16px causes mobile safari to zoom. */ 1469 font-size: 16px; 1470 /* Override core line-height. To be reviewed. */ 1471 line-height: normal; 1472 width: calc(100% - 32px); 1473 display: block; 1474 padding: 11px 16px; 1475 padding-left: 36px; 1476 margin: 16px; 1477 position: relative; 1478 border: 1px solid #ddd; 1479 border-radius: 2px; } 1480 @media (prefers-reduced-motion: reduce) { 1481 .block-editor-link-control .block-editor-link-control__search-input.block-editor-link-control__search-input input[type="text"] { 1482 transition-duration: 0s; } } 1483 @media (min-width: 600px) { 1484 .block-editor-link-control .block-editor-link-control__search-input.block-editor-link-control__search-input input[type="text"] { 1485 font-size: 13px; 1486 /* Override core line-height. To be reviewed. */ 1487 line-height: normal; } } 1488 .block-editor-link-control .block-editor-link-control__search-input.block-editor-link-control__search-input input[type="text"]:focus { 1489 border-color: #007cba; 1490 border-color: var(--wp-admin-theme-color); 1491 box-shadow: 0 0 0 0.5px #007cba; 1492 box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color); 1493 outline: 2px solid transparent; } 1494 .block-editor-link-control .block-editor-link-control__search-input.block-editor-link-control__search-input input[type="text"]::-webkit-input-placeholder { 1495 color: rgba(30, 30, 30, 0.62); } 1496 .block-editor-link-control .block-editor-link-control__search-input.block-editor-link-control__search-input input[type="text"]::-moz-placeholder { 1497 opacity: 1; 1498 color: rgba(30, 30, 30, 0.62); } 1499 .block-editor-link-control .block-editor-link-control__search-input.block-editor-link-control__search-input input[type="text"]:-ms-input-placeholder { 1500 color: rgba(30, 30, 30, 0.62); } 1501 .is-dark-theme .block-editor-link-control .block-editor-link-control__search-input.block-editor-link-control__search-input input[type="text"]::-webkit-input-placeholder { 1502 color: rgba(255, 255, 255, 0.65); } 1503 .is-dark-theme .block-editor-link-control .block-editor-link-control__search-input.block-editor-link-control__search-input input[type="text"]::-moz-placeholder { 1504 opacity: 1; 1505 color: rgba(255, 255, 255, 0.65); } 1506 .is-dark-theme .block-editor-link-control .block-editor-link-control__search-input.block-editor-link-control__search-input input[type="text"]:-ms-input-placeholder { 1507 color: rgba(255, 255, 255, 0.65); } 1508 1509 .block-editor-link-control .block-editor-link-control__search-input .components-base-control__field { 1510 margin-bottom: 0; } 1511 1512 .block-editor-link-control__search-error { 1513 margin: -8px 16px 16px; } 1514 1515 .block-editor-link-control__search-actions { 1516 position: absolute; 1517 /* 1518 * Actions must be positioned on top of URLInput, since the input will grow 1519 * when suggestions are rendered. 1520 * 1521 * Compensate for: 1522 * - Input margin ($grid-unit-20) 1523 * - Border (1px) 1524 * - Vertically, for the difference in height between the input (40px) and 1525 * the icon buttons. 1526 * - Horizontally, pad to the minimum of: default input padding, or the 1527 * equivalent of the vertical padding. 1528 */ 1529 top: 19px; 1530 left: 19px; } 1531 1532 .block-editor-link-control__search-results-wrapper { 1533 position: relative; 1534 margin-top: -15px; } 1535 .block-editor-link-control__search-results-wrapper::before, .block-editor-link-control__search-results-wrapper::after { 1536 content: ""; 1537 position: absolute; 1538 right: -1px; 1539 left: 16px; 1540 display: block; 1541 pointer-events: none; 1542 z-index: 100; } 1543 .block-editor-link-control__search-results-wrapper::before { 1544 height: 8px; 1545 top: 0; 1546 bottom: auto; 1547 background: linear-gradient(to bottom, white 0%, rgba(255, 255, 255, 0) 100%); } 1548 .block-editor-link-control__search-results-wrapper::after { 1549 height: 16px; 1550 bottom: 0; 1551 top: auto; 1552 background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 100%); } 1553 1554 .block-editor-link-control__search-results-label { 1555 padding: 15px 30px 0 30px; 1556 display: block; 1557 font-size: 1.1em; } 1558 1559 .block-editor-link-control__search-results { 1560 margin: 0; 1561 padding: 8px 16px 8px; 1562 max-height: 200px; 1563 overflow-y: auto; } 1564 .block-editor-link-control__search-results.is-loading { 1565 opacity: 0.2; } 1566 1567 .block-editor-link-control__search-item { 1568 position: relative; 1569 display: flex; 1570 align-items: center; 1571 font-size: 13px; 1572 cursor: pointer; 1573 background: #fff; 1574 width: 100%; 1575 border: none; 1576 text-align: right; 1577 padding: 10px 15px; 1578 border-radius: 5px; 1579 height: auto; } 1580 .block-editor-link-control__search-item:hover, .block-editor-link-control__search-item:focus { 1581 background-color: #ddd; } 1582 .block-editor-link-control__search-item:focus:not(:disabled) { 1583 box-shadow: 0 0 0 1.5px #007cba inset; 1584 box-shadow: 0 0 0 1.5px var(--wp-admin-theme-color) inset; } 1585 .block-editor-link-control__search-item.is-selected { 1586 background: #f0f0f0; } 1587 .block-editor-link-control__search-item.is-selected .block-editor-link-control__search-item-type { 1588 background: #fff; } 1589 .block-editor-link-control__search-item.is-current { 1590 background: transparent; 1591 border: 0; 1592 width: 100%; 1593 cursor: default; 1594 padding: 16px; 1595 padding-right: 24px; } 1596 .block-editor-link-control__search-item .block-editor-link-control__search-item-header { 1597 display: block; 1598 margin-left: 24px; 1599 overflow: hidden; 1600 white-space: nowrap; } 1601 .block-editor-link-control__search-item .block-editor-link-control__search-item-icon { 1602 margin-left: 1em; 1603 min-width: 24px; } 1604 .block-editor-link-control__search-item .block-editor-link-control__search-item-info, 1605 .block-editor-link-control__search-item .block-editor-link-control__search-item-title { 1606 max-width: 230px; 1607 overflow: hidden; 1608 text-overflow: ellipsis; } 1609 .block-editor-link-control__search-item .block-editor-link-control__search-item-title { 1610 display: block; 1611 margin-bottom: 0.2em; 1612 font-weight: 500; } 1613 .block-editor-link-control__search-item .block-editor-link-control__search-item-title mark { 1614 font-weight: 700; 1615 color: #000; 1616 background-color: transparent; } 1617 .block-editor-link-control__search-item .block-editor-link-control__search-item-title span { 1618 font-weight: normal; } 1619 .block-editor-link-control__search-item .block-editor-link-control__search-item-info { 1620 display: block; 1621 color: #757575; 1622 font-size: 0.9em; 1623 line-height: 1.3; } 1624 .block-editor-link-control__search-item .block-editor-link-control__search-item-type { 1625 display: block; 1626 padding: 3px 8px; 1627 margin-right: auto; 1628 font-size: 0.9em; 1629 background-color: #f0f0f0; 1630 border-radius: 2px; } 1631 1632 .block-editor-link-control__loading { 1633 margin: 16px; 1634 display: flex; 1635 align-items: center; } 1636 .block-editor-link-control__loading .components-spinner { 1637 margin-top: 0; } 1638 1639 .components-button + .block-editor-link-control__search-create { 1640 margin-top: 20px; 1641 overflow: visible; 1642 padding: 12px 15px; } 1643 .components-button + .block-editor-link-control__search-create::before { 1644 content: ""; 1645 position: absolute; 1646 top: -10px; 1647 right: 0; 1648 display: block; 1649 width: 100%; 1650 border-top: 1px solid #ddd; } 1651 1652 .block-editor-link-control__search-results div[role="menu"] > .block-editor-link-control__search-item.block-editor-link-control__search-item { 1653 padding: 10px; } 1654 1655 .block-editor-link-control__settings { 1656 border-top: 1px solid #ddd; 1657 margin: 0; 1658 padding: 16px 24px; } 1659 .block-editor-link-control__settings :last-child { 1660 margin-bottom: 0; } 1661 1662 .block-editor-link-control__setting { 1663 margin-bottom: 16px; } 1664 .block-editor-link-control__setting :last-child { 1665 margin-bottom: 0; } 1666 1667 .block-editor-link-control .block-editor-link-control__search-input .components-spinner { 1668 display: block; } 1669 .block-editor-link-control .block-editor-link-control__search-input .components-spinner.components-spinner { 1670 position: absolute; 1671 right: auto; 1672 bottom: auto; 1673 /* 1674 * Position spinner to the left of the actions. 1675 * 1676 * Compensate for: 1677 * - Input margin ($grid-unit-20) 1678 * - Border (1px) 1679 * - Vertically, for the difference in height between the input (40px) 1680 * and the spinner. 1681 * - Horizontally, adjust for the width occupied by the icon buttons, 1682 * then artificially create spacing that mimics as if the spinner 1683 * were center-padded to the same width as an icon button. 1684 */ 1685 top: 28px; 1686 left: 62px; } 1687 1688 .block-editor-link-control__search-item-action { 1689 margin-right: auto; 1690 flex-shrink: 0; } 1691 1692 .block-editor-line-height-control { 1693 margin-bottom: 24px; } 1694 .block-editor-line-height-control input { 1695 display: block; 1696 max-width: 60px; } 1697 1698 .block-editor-image-size-control { 1699 margin-bottom: 1em; } 1700 .block-editor-image-size-control .block-editor-image-size-control__row { 1701 display: flex; 1702 justify-content: space-between; } 1703 .block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__width, 1704 .block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__height { 1705 margin-bottom: 0.5em; } 1706 .block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__width input, 1707 .block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__height input { 1708 line-height: 1.25; } 1709 .block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__width { 1710 margin-left: 5px; } 1711 .block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__height { 1712 margin-right: 5px; } 1713 1714 .block-editor-block-list__layout.has-overlay::after { 1715 content: ""; 1716 position: absolute; 1717 top: -14px; 1718 left: -14px; 1719 bottom: -14px; 1720 right: -14px; 1721 z-index: 60; } 1722 1723 [data-align="full"] .has-overlay::after { 1724 left: 0; 1725 right: 0; } 1726 1727 .block-editor-block-types-list__list-item { 1728 display: block; 1729 width: 33.33%; 1730 padding: 0; 1731 margin: 0; } 1732 1733 .components-button.block-editor-block-types-list__item { 1734 display: flex; 1735 flex-direction: column; 1736 width: 100%; 1737 font-size: 13px; 1738 color: #1e1e1e; 1739 padding: 8px; 1740 align-items: stretch; 1741 justify-content: center; 1742 cursor: pointer; 1743 background: transparent; 1744 word-break: break-word; 1745 border-radius: 2px; 1746 border: 1px solid transparent; 1747 transition: all 0.05s ease-in-out; 1748 position: relative; 1749 height: auto; } 1750 @media (prefers-reduced-motion: reduce) { 1751 .components-button.block-editor-block-types-list__item { 1752 transition-duration: 0s; } } 1753 .components-button.block-editor-block-types-list__item:disabled { 1754 opacity: 0.6; 1755 cursor: default; } 1756 .components-button.block-editor-block-types-list__item:not(:disabled):hover { 1757 border-color: #007cba; 1758 border-color: var(--wp-admin-theme-color); 1759 color: #007cba !important; 1760 color: var(--wp-admin-theme-color) !important; } 1761 .components-button.block-editor-block-types-list__item:not(:disabled).is-active { 1762 color: #fff; 1763 background: #1e1e1e; 1764 outline: 2px solid transparent; 1765 outline-offset: -2px; } 1766 1767 .block-editor-block-types-list__item-icon { 1768 padding: 12px 20px; 1769 border-radius: 2px; 1770 color: #1e1e1e; 1771 transition: all 0.05s ease-in-out; } 1772 @media (prefers-reduced-motion: reduce) { 1773 .block-editor-block-types-list__item-icon { 1774 transition-duration: 0s; } } 1775 .block-editor-block-types-list__item-icon .block-editor-block-icon { 1776 margin-right: auto; 1777 margin-left: auto; } 1778 .block-editor-block-types-list__item-icon svg { 1779 transition: all 0.15s ease-out; } 1780 @media (prefers-reduced-motion: reduce) { 1781 .block-editor-block-types-list__item-icon svg { 1782 transition-duration: 0s; } } 1783 1784 .block-editor-block-types-list__item-title { 1785 padding: 4px 2px 8px; 1786 font-size: 12px; } 1787 1788 .modal-open .block-editor-media-replace-flow__options { 1789 display: none; } 1790 1791 .block-editor-media-replace-flow__options .components-popover__content > div { 1792 padding-top: 16px; } 1793 1794 .block-editor-media-replace-flow__indicator { 1795 margin-right: 4px; } 1796 1797 .block-editor-media-flow__url-input { 1798 border-top: 1px solid #1e1e1e; 1799 margin-top: 12px; 1800 margin-left: -12px; 1801 margin-right: -12px; 1802 padding: 12px 24px 0; } 1803 .block-editor-media-flow__url-input .block-editor-media-replace-flow__image-url-label { 1804 top: 16px; } 1805 .block-editor-media-flow__url-input .block-editor-link-control { 1806 margin-top: -16px; 1807 width: auto; } 1808 .block-editor-media-flow__url-input .block-editor-link-control .components-base-control .components-base-control__field { 1809 margin-bottom: 0; } 1810 .block-editor-media-flow__url-input .block-editor-link-control .block-editor-link-control__search-item-title { 1811 max-width: 180px; 1812 margin-top: 16px; } 1813 .block-editor-media-flow__url-input .block-editor-link-control .block-editor-link-control__search-item.is-current { 1814 width: auto; 1815 padding: 0; } 1816 .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"] { 1817 margin: 16px 0 0 0; 1818 width: 100%; } 1819 .block-editor-media-flow__url-input .block-editor-link-control .block-editor-link-control__search-actions { 1820 left: 4px; } 1821 1822 .block-editor-media-flow__error { 1823 padding: 0 20px 20px 20px; 1824 max-width: 255px; } 1825 .block-editor-media-flow__error .components-with-notices-ui { 1826 max-width: 255px; } 1827 .block-editor-media-flow__error .components-with-notices-ui .components-notice__content { 1828 overflow: hidden; 1829 word-wrap: break-word; } 1830 .block-editor-media-flow__error .components-with-notices-ui .components-notice__dismiss { 1831 position: absolute; 1832 left: 10px; } 1833 1834 .block-editor-media-placeholder__url-input-container .block-editor-media-placeholder__button { 1835 margin-bottom: 0; } 1836 1837 .block-editor-media-placeholder__url-input-form { 1838 display: flex; } 1839 .block-editor-media-placeholder__url-input-form input[type="url"].block-editor-media-placeholder__url-input-field { 1840 width: 100%; 1841 flex-grow: 1; 1842 border: none; 1843 border-radius: 0; 1844 margin: 2px; } 1845 @media (min-width: 600px) { 1846 .block-editor-media-placeholder__url-input-form input[type="url"].block-editor-media-placeholder__url-input-field { 1847 width: 300px; } } 1848 1849 .block-editor-media-placeholder__url-input-submit-button { 1850 flex-shrink: 1; } 1851 1852 .block-editor-media-placeholder__button { 1853 margin-bottom: 0.5rem; } 1854 1855 .block-editor-media-placeholder__cancel-button.is-link { 1856 margin: 1em; 1857 display: block; } 1858 1859 .block-editor-media-placeholder.is-appender { 1860 min-height: 0; } 1861 .block-editor-media-placeholder.is-appender:hover { 1862 cursor: pointer; 1863 box-shadow: 0 0 0 1px #007cba; 1864 box-shadow: 0 0 0 1px var(--wp-admin-theme-color); } 1865 1866 .block-editor-multi-selection-inspector__card { 1867 display: flex; 1868 align-items: flex-start; 1869 padding: 16px; } 1870 1871 .block-editor-multi-selection-inspector__card-content { 1872 flex-grow: 1; } 1873 1874 .block-editor-multi-selection-inspector__card-title { 1875 font-weight: 500; 1876 margin-bottom: 5px; } 1877 1878 .block-editor-multi-selection-inspector__card-description { 1879 font-size: 13px; } 1880 1881 .block-editor-multi-selection-inspector__card .block-editor-block-icon { 1882 margin-right: -2px; 1883 margin-left: 10px; 1884 padding: 0 3px; 1885 width: 36px; 1886 height: 24px; } 1887 1888 .block-editor .block-editor-plain-text { 1889 box-shadow: none; 1890 font-family: inherit; 1891 font-size: inherit; 1892 color: inherit; 1893 line-height: inherit; 1894 border: none; 1895 padding: 0; 1896 margin: 0; 1897 width: 100%; } 1898 1899 .block-editor-responsive-block-control { 1900 margin-bottom: 28px; 1901 border-bottom: 1px solid #ccc; 1902 padding-bottom: 14px; } 1903 .block-editor-responsive-block-control:last-child { 1904 padding-bottom: 0; 1905 border-bottom: 0; } 1906 1907 .block-editor-responsive-block-control__title { 1908 margin: 0; 1909 margin-bottom: 0.6em; 1910 margin-right: -3px; } 1911 1912 .block-editor-responsive-block-control__label { 1913 font-weight: 600; 1914 margin-bottom: 0.6em; 1915 margin-right: -3px; } 1916 1917 .block-editor-responsive-block-control__inner { 1918 margin-right: -1px; } 1919 1920 .block-editor-responsive-block-control__toggle { 1921 margin-right: 1px; } 1922 1923 .block-editor-responsive-block-control .components-base-control__help { 1924 border: 0; 1925 clip: rect(1px, 1px, 1px, 1px); 1926 -webkit-clip-path: inset(50%); 1927 clip-path: inset(50%); 1928 height: 1px; 1929 margin: -1px; 1930 overflow: hidden; 1931 padding: 0; 1932 position: absolute; 1933 width: 1px; 1934 word-wrap: normal !important; } 1935 1936 .block-editor-format-toolbar .components-dropdown-menu__toggle { 1937 justify-content: center; } 1938 1939 .block-editor-rich-text__editable > p:first-child { 1940 margin-top: 0; } 1941 1942 .block-editor-rich-text__editable [data-rich-text-placeholder] { 1943 pointer-events: none; } 1944 1945 .block-editor-rich-text__editable [data-rich-text-placeholder]::after { 1946 content: attr(data-rich-text-placeholder); 1947 opacity: 0.62; } 1948 1949 .block-editor-rich-text__editable:focus { 1950 outline: none; } 1951 .block-editor-rich-text__editable:focus [data-rich-text-format-boundary] { 1952 border-radius: 2px; } 1953 .block-editor-rich-text__editable:focus:not(.keep-placeholder-on-focus) [data-rich-text-placeholder]::after { 1954 display: none; } 1955 1956 figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before { 1957 opacity: 0.8; } 1958 1959 .components-popover.block-editor-rich-text__inline-format-toolbar { 1960 z-index: 99998; } 1961 .components-popover.block-editor-rich-text__inline-format-toolbar .components-popover__content { 1962 width: auto; 1963 min-width: auto; 1964 margin-bottom: 8px; 1965 box-shadow: none; 1966 border: 1px solid #1e1e1e; 1967 border-radius: 2px; 1968 background-color: #fff; } 1969 .components-popover.block-editor-rich-text__inline-format-toolbar .components-toolbar-group, 1970 .components-popover.block-editor-rich-text__inline-format-toolbar .components-toolbar { 1971 border: none; } 1972 .components-popover.block-editor-rich-text__inline-format-toolbar .components-toolbar__control, 1973 .components-popover.block-editor-rich-text__inline-format-toolbar .components-dropdown-menu__toggle { 1974 min-width: 48px; 1975 min-height: 48px; 1976 padding-right: 12px; 1977 padding-left: 12px; } 1978 1979 .block-editor-skip-to-selected-block { 1980 position: absolute; 1981 top: -9999em; } 1982 .block-editor-skip-to-selected-block:focus { 1983 height: auto; 1984 width: auto; 1985 display: block; 1986 font-size: 14px; 1987 font-weight: 600; 1988 padding: 15px 23px 14px; 1989 background: #f1f1f1; 1990 color: #007cba; 1991 color: var(--wp-admin-theme-color); 1992 line-height: normal; 1993 box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); 1994 text-decoration: none; 1995 outline: none; 1996 z-index: 100000; } 1997 1998 .block-editor-tool-selector__help { 1999 margin-top: 8px; 2000 margin-right: -12px; 2001 margin-left: -12px; 2002 margin-bottom: -12px; 2003 padding: 12px 20px; 2004 border-top: 1px solid #ddd; 2005 color: #757575; } 2006 2007 .block-editor-block-list__block .block-editor-url-input, 2008 .components-popover .block-editor-url-input, 2009 .block-editor-url-input { 2010 flex-grow: 1; 2011 position: relative; 2012 padding: 1px; } 2013 .block-editor-block-list__block .block-editor-url-input input[type="text"], 2014 .components-popover .block-editor-url-input input[type="text"], 2015 .block-editor-url-input input[type="text"] { 2016 width: 100%; 2017 padding: 8px; 2018 border: none; 2019 border-radius: 0; 2020 margin-right: 0; 2021 margin-left: 0; 2022 /* Fonts smaller than 16px causes mobile safari to zoom. */ 2023 font-size: 16px; } 2024 @media (min-width: 600px) { 2025 .block-editor-block-list__block .block-editor-url-input input[type="text"], 2026 .components-popover .block-editor-url-input input[type="text"], 2027 .block-editor-url-input input[type="text"] { 2028 width: 300px; } } 2029 @media (min-width: 600px) { 2030 .block-editor-block-list__block .block-editor-url-input input[type="text"], 2031 .components-popover .block-editor-url-input input[type="text"], 2032 .block-editor-url-input input[type="text"] { 2033 font-size: 13px; } } 2034 .block-editor-block-list__block .block-editor-url-input input[type="text"]::-ms-clear, 2035 .components-popover .block-editor-url-input input[type="text"]::-ms-clear, 2036 .block-editor-url-input input[type="text"]::-ms-clear { 2037 display: none; } 2038 .block-editor-block-list__block .block-editor-url-input.is-full-width, 2039 .components-popover .block-editor-url-input.is-full-width, 2040 .block-editor-url-input.is-full-width { 2041 width: 100%; } 2042 .block-editor-block-list__block .block-editor-url-input.is-full-width .block-editor-url-input__input[type="text"], 2043 .components-popover .block-editor-url-input.is-full-width .block-editor-url-input__input[type="text"], 2044 .block-editor-url-input.is-full-width .block-editor-url-input__input[type="text"] { 2045 width: 100%; } 2046 .block-editor-block-list__block .block-editor-url-input.is-full-width__suggestions, 2047 .components-popover .block-editor-url-input.is-full-width__suggestions, 2048 .block-editor-url-input.is-full-width__suggestions { 2049 width: 100%; } 2050 .block-editor-block-list__block .block-editor-url-input .components-spinner, 2051 .components-popover .block-editor-url-input .components-spinner, 2052 .block-editor-url-input .components-spinner { 2053 position: absolute; 2054 left: 8px; 2055 bottom: 17px; 2056 margin: 0; } 2057 2058 .block-editor-url-input__input[type="text"] { 2059 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 2060 padding: 6px 8px; 2061 box-shadow: 0 0 0 transparent; 2062 transition: box-shadow 0.1s linear; 2063 border-radius: 2px; 2064 border: 1px solid #757575; 2065 /* Fonts smaller than 16px causes mobile safari to zoom. */ 2066 font-size: 16px; 2067 /* Override core line-height. To be reviewed. */ 2068 line-height: normal; } 2069 @media (prefers-reduced-motion: reduce) { 2070 .block-editor-url-input__input[type="text"] { 2071 transition-duration: 0s; } } 2072 @media (min-width: 600px) { 2073 .block-editor-url-input__input[type="text"] { 2074 font-size: 13px; 2075 /* Override core line-height. To be reviewed. */ 2076 line-height: normal; } } 2077 .block-editor-url-input__input[type="text"]:focus { 2078 border-color: #007cba; 2079 border-color: var(--wp-admin-theme-color); 2080 box-shadow: 0 0 0 0.5px #007cba; 2081 box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color); 2082 outline: 2px solid transparent; } 2083 .block-editor-url-input__input[type="text"]::-webkit-input-placeholder { 2084 color: rgba(30, 30, 30, 0.62); } 2085 .block-editor-url-input__input[type="text"]::-moz-placeholder { 2086 opacity: 1; 2087 color: rgba(30, 30, 30, 0.62); } 2088 .block-editor-url-input__input[type="text"]:-ms-input-placeholder { 2089 color: rgba(30, 30, 30, 0.62); } 2090 .is-dark-theme .block-editor-url-input__input[type="text"]::-webkit-input-placeholder { 2091 color: rgba(255, 255, 255, 0.65); } 2092 .is-dark-theme .block-editor-url-input__input[type="text"]::-moz-placeholder { 2093 opacity: 1; 2094 color: rgba(255, 255, 255, 0.65); } 2095 .is-dark-theme .block-editor-url-input__input[type="text"]:-ms-input-placeholder { 2096 color: rgba(255, 255, 255, 0.65); } 2097 2098 .block-editor-url-input__suggestions { 2099 max-height: 200px; 2100 transition: all 0.15s ease-in-out; 2101 padding: 4px 0; 2102 width: 302px; 2103 overflow-y: auto; } 2104 @media (prefers-reduced-motion: reduce) { 2105 .block-editor-url-input__suggestions { 2106 transition-duration: 0s; } } 2107 2108 .block-editor-url-input__suggestions, 2109 .block-editor-url-input .components-spinner { 2110 display: none; } 2111 @media (min-width: 600px) { 2112 .block-editor-url-input__suggestions, 2113 .block-editor-url-input .components-spinner { 2114 display: inherit; } } 2115 2116 .block-editor-url-input__suggestion { 2117 padding: 4px 8px; 2118 color: #757575; 2119 display: block; 2120 font-size: 13px; 2121 cursor: pointer; 2122 background: #fff; 2123 width: 100%; 2124 border: none; 2125 text-align: right; 2126 box-shadow: none; } 2127 .block-editor-url-input__suggestion:hover { 2128 background: #ddd; } 2129 .block-editor-url-input__suggestion:focus, .block-editor-url-input__suggestion.is-selected { 2130 background: #005a87; 2131 background: var(--wp-admin-theme-color-darker-20); 2132 color: #fff; 2133 outline: none; } 2134 2135 .components-toolbar-group > .block-editor-url-input__button, 2136 .components-toolbar > .block-editor-url-input__button { 2137 position: inherit; } 2138 2139 .block-editor-url-input__button .block-editor-url-input__back { 2140 margin-left: 4px; 2141 overflow: visible; } 2142 .block-editor-url-input__button .block-editor-url-input__back::after { 2143 content: ""; 2144 position: absolute; 2145 display: block; 2146 width: 1px; 2147 height: 24px; 2148 left: -1px; 2149 background: #ddd; } 2150 2151 .block-editor-url-input__button-modal { 2152 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); 2153 border: 1px solid #ddd; 2154 background: #fff; } 2155 2156 .block-editor-url-input__button-modal-line { 2157 display: flex; 2158 flex-direction: row; 2159 flex-grow: 1; 2160 flex-shrink: 1; 2161 min-width: 0; 2162 align-items: flex-start; } 2163 .block-editor-url-input__button-modal-line .components-button { 2164 flex-shrink: 0; 2165 width: 36px; 2166 height: 36px; } 2167 2168 .block-editor-url-popover__additional-controls { 2169 border-top: 1px solid #ddd; } 2170 2171 .block-editor-url-popover__additional-controls > div[role="menu"] .components-button:not(:disabled):not([aria-disabled="true"]):not(.is-secondary) > svg { 2172 box-shadow: none; } 2173 2174 .block-editor-url-popover__additional-controls div[role="menu"] > .components-button { 2175 padding-right: 2px; } 2176 2177 .block-editor-url-popover__row { 2178 display: flex; } 2179 2180 .block-editor-url-popover__row > :not(.block-editor-url-popover__settings-toggle) { 2181 flex-grow: 1; } 2182 2183 .block-editor-url-popover .components-button.has-icon { 2184 padding: 3px; } 2185 .block-editor-url-popover .components-button.has-icon > svg { 2186 padding: 5px; 2187 border-radius: 2px; 2188 height: 30px; 2189 width: 30px; } 2190 .block-editor-url-popover .components-button.has-icon:not(:disabled):focus { 2191 box-shadow: none; } 2192 .block-editor-url-popover .components-button.has-icon:not(:disabled):focus > svg { 2193 box-shadow: inset 0 0 0 1.5px #007cba, inset 0 0 0 4px #fff; 2194 box-shadow: inset 0 0 0 1.5px var(--wp-admin-theme-color), inset 0 0 0 4px #fff; 2195 outline: 2px solid transparent; } 2196 2197 .block-editor-url-popover__settings-toggle { 2198 flex-shrink: 0; 2199 border-radius: 0; 2200 border-right: 1px solid #ddd; 2201 margin-right: 1px; } 2202 .block-editor-url-popover__settings-toggle[aria-expanded="true"] .dashicon { 2203 transform: rotate(-180deg); } 2204 2205 .block-editor-url-popover__input-container .components-base-control:last-child, 2206 .block-editor-url-popover__input-container .components-base-control:last-child .components-base-control__field { 2207 margin-bottom: 0; } 2208 2209 .block-editor-url-popover__settings { 2210 display: block; 2211 padding: 16px; 2212 border-top: 1px solid #ddd; } 2213 2214 .block-editor-url-popover__link-editor, 2215 .block-editor-url-popover__link-viewer { 2216 display: flex; } 2217 .block-editor-url-popover__link-editor .block-editor-url-input .components-base-control__field, 2218 .block-editor-url-popover__link-viewer .block-editor-url-input .components-base-control__field { 2219 margin-bottom: 0; } 2220 .block-editor-url-popover__link-editor .block-editor-url-input .components-spinner, 2221 .block-editor-url-popover__link-viewer .block-editor-url-input .components-spinner { 2222 bottom: 9px; } 2223 2224 .block-editor-url-popover__link-viewer-url { 2225 margin: 7px; 2226 flex-grow: 1; 2227 flex-shrink: 1; 2228 overflow: hidden; 2229 text-overflow: ellipsis; 2230 white-space: nowrap; 2231 min-width: 150px; 2232 max-width: 500px; } 2233 .block-editor-url-popover__link-viewer-url.has-invalid-link { 2234 color: #cc1818; } 2235 2236 .block-editor-warning { 2237 align-items: center; 2238 display: flex; 2239 flex-wrap: wrap; 2240 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 2241 padding: 1em; 2242 border: 1px solid #1e1e1e; 2243 border-radius: 2px; 2244 background-color: #fff; } 2245 .block-editor-warning .block-editor-warning__message { 2246 line-height: 1.4; 2247 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 2248 font-size: 13px; 2249 color: #1e1e1e; 2250 margin: 0 0 1em; } 2251 .block-editor-warning p.block-editor-warning__message.block-editor-warning__message { 2252 min-height: auto; } 2253 .block-editor-warning .block-editor-warning__contents { 2254 display: flex; 2255 flex-direction: row; 2256 justify-content: space-between; 2257 flex-wrap: wrap; 2258 align-items: baseline; 2259 width: 100%; } 2260 .block-editor-warning .block-editor-warning__actions { 2261 display: flex; } 2262 .block-editor-warning .block-editor-warning__action { 2263 margin: 0 0 0 8px; } 2264 2265 .block-editor-warning__secondary { 2266 margin: auto 8px auto 0; } 2267 2268 .components-popover.block-editor-warning__dropdown { 2269 z-index: 99998; } 2270 2271 .block-editor-writing-flow { 2272 display: flex; 2273 flex-direction: column; } 2274 2275 .block-editor-writing-flow__click-redirect { 2276 cursor: text; } 2277 2278 .html-anchor-control .components-external-link { 2279 display: block; 2280 margin-top: 8px; } 2281 2282 #end-resizable-editor-section { 2283 display: none; } 2284 2285 /** 2286 * Block Toolbar 2287 */ 2288 .block-editor-block-toolbar { 2289 display: flex; 2290 flex-grow: 1; 2291 width: 100%; 2292 overflow: auto; 2293 position: relative; 2294 transition: border-color 0.1s linear, box-shadow 0.1s linear; } 2295 @media (prefers-reduced-motion: reduce) { 2296 .block-editor-block-toolbar { 2297 transition-duration: 0s; } } 2298 @media (min-width: 600px) { 2299 .block-editor-block-toolbar { 2300 overflow: inherit; } } 2301 .block-editor-block-toolbar .components-toolbar-group, 2302 .block-editor-block-toolbar .components-toolbar { 2303 background: none; 2304 line-height: 0; 2305 margin-top: -1px; 2306 margin-bottom: -1px; 2307 border: 0; 2308 border-left: 1px solid #ddd; } 2309 .block-editor-block-toolbar > :last-child, 2310 .block-editor-block-toolbar > :last-child .components-toolbar-group, 2311 .block-editor-block-toolbar > :last-child .components-toolbar { 2312 border-left: none; } 2313 2314 .block-editor-block-toolbar__block-controls { 2315 height: auto !important; 2316 padding: 0 !important; } 2317 .block-editor-block-toolbar__block-controls .block-editor-block-switcher .components-dropdown-menu__toggle .block-editor-block-icon, 2318 .block-editor-block-toolbar__block-controls .block-editor-block-switcher__no-switcher-icon .block-editor-block-icon { 2319 width: 24px !important; 2320 margin: 0 !important; } 2321 .block-editor-block-toolbar__block-controls .block-editor-block-switcher .components-dropdown-menu__toggle:focus::before, 2322 .block-editor-block-toolbar__block-controls .block-editor-block-switcher__no-switcher-icon:focus::before { 2323 left: 4px !important; } 2324 .block-editor-block-toolbar__block-controls .block-editor-block-mover { 2325 margin-right: -6px; } 2326 2327 .block-editor-block-toolbar .components-toolbar-group, 2328 .block-editor-block-toolbar .components-toolbar, 2329 .block-editor-format-toolbar .components-toolbar-group, 2330 .block-editor-format-toolbar .components-toolbar { 2331 display: flex; 2332 flex-wrap: nowrap; } 2333 2334 .block-editor-block-toolbar__slot { 2335 display: inline-block; 2336 line-height: 0; } 2337 @supports ((position: -webkit-sticky) or (position: sticky)) { 2338 .block-editor-block-toolbar__slot { 2339 display: inline-flex; } } 2340 2341 .block-editor-block-toolbar__block-parent-selector-wrapper { 2342 position: absolute; 2343 top: -1px; 2344 right: -1px; 2345 opacity: 0; 2346 transition: all 60ms linear; 2347 z-index: -1; } 2348 @media (prefers-reduced-motion: reduce) { 2349 .block-editor-block-toolbar__block-parent-selector-wrapper { 2350 transition-duration: 0s; } } 2351 .is-showing-movers .block-editor-block-toolbar__block-parent-selector-wrapper { 2352 opacity: 1; 2353 transform: translateY(-60px); } 2354 2355 .block-editor-block-toolbar-animated-width-container { 2356 position: relative; 2357 overflow: hidden; 2358 transition: width 300ms; } 2359 2360 .block-editor-block-toolbar-content-enter { 2361 position: absolute; 2362 top: 0; 2363 right: 0; 2364 width: auto; 2365 opacity: 0; } 2366 2367 .block-editor-block-toolbar-content-enter-active { 2368 position: absolute; 2369 opacity: 1; 2370 transition: opacity 300ms; } 2371 2372 .block-editor-block-toolbar-content-exit { 2373 width: auto; 2374 opacity: 1; 2375 pointer-events: none; } 2376 2377 .block-editor-block-toolbar-content-exit-active { 2378 opacity: 0; 2379 transition: opacity 300ms; } 2380 2381 .block-editor-inserter { 2382 display: inline-block; 2383 background: none; 2384 border: none; 2385 padding: 0; 2386 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 2387 font-size: 13px; 2388 line-height: 0; } 2389 @media (min-width: 782px) { 2390 .block-editor-inserter { 2391 position: relative; } } 2392 2393 .block-editor-inserter__popover .block-editor-inserter__menu { 2394 margin: -12px; } 2395 .block-editor-inserter__popover .block-editor-inserter__menu .block-editor-inserter__tabs .components-tab-panel__tabs { 2396 top: 60px; } 2397 .block-editor-inserter__popover .block-editor-inserter__menu .block-editor-inserter__main-area { 2398 overflow: visible; 2399 height: auto; } 2400 .block-editor-inserter__popover .block-editor-inserter__menu .block-editor-inserter__preview-container { 2401 display: none; } 2402 2403 .block-editor-inserter__toggle.components-button { 2404 display: inline-flex; 2405 align-items: center; 2406 cursor: pointer; 2407 border: none; 2408 outline: none; 2409 padding: 0; 2410 transition: color 0.2s ease; } 2411 @media (prefers-reduced-motion: reduce) { 2412 .block-editor-inserter__toggle.components-button { 2413 transition-duration: 0s; } } 2414 2415 .block-editor-inserter__menu { 2416 height: 100%; 2417 position: relative; 2418 overflow: visible; } 2419 2420 .block-editor-inserter__main-area { 2421 width: auto; 2422 overflow-y: auto; 2423 height: 100%; } 2424 @media (min-width: 782px) { 2425 .block-editor-inserter__main-area { 2426 width: 350px; } } 2427 2428 .block-editor-inserter__inline-elements { 2429 margin-top: -1px; } 2430 2431 .block-editor-inserter__menu.is-bottom::after { 2432 border-bottom-color: #fff; } 2433 2434 .components-popover.block-editor-inserter__popover { 2435 z-index: 99999; } 2436 2437 .block-editor-inserter__search { 2438 padding: 16px; 2439 position: -webkit-sticky; 2440 position: sticky; 2441 top: 0; 2442 background: #fff; 2443 z-index: 1; } 2444 .block-editor-inserter__search input[type="search"].block-editor-inserter__search-input { 2445 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 2446 padding: 6px 8px; 2447 box-shadow: 0 0 0 transparent; 2448 transition: box-shadow 0.1s linear; 2449 border-radius: 2px; 2450 border: 1px solid #757575; 2451 /* Fonts smaller than 16px causes mobile safari to zoom. */ 2452 font-size: 16px; 2453 /* Override core line-height. To be reviewed. */ 2454 line-height: normal; 2455 display: block; 2456 padding: 16px 16px 16px 48px; 2457 background: #f0f0f0; 2458 border: none; 2459 width: 100%; 2460 height: 48px; 2461 /* Fonts smaller than 16px causes mobile safari to zoom. */ 2462 font-size: 16px; } 2463 @media (prefers-reduced-motion: reduce) { 2464 .block-editor-inserter__search input[type="search"].block-editor-inserter__search-input { 2465 transition-duration: 0s; } } 2466 @media (min-width: 600px) { 2467 .block-editor-inserter__search input[type="search"].block-editor-inserter__search-input { 2468 font-size: 13px; 2469 /* Override core line-height. To be reviewed. */ 2470 line-height: normal; } } 2471 .block-editor-inserter__search input[type="search"].block-editor-inserter__search-input:focus { 2472 border-color: #007cba; 2473 border-color: var(--wp-admin-theme-color); 2474 box-shadow: 0 0 0 0.5px #007cba; 2475 box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color); 2476 outline: 2px solid transparent; } 2477 .block-editor-inserter__search input[type="search"].block-editor-inserter__search-input::-webkit-input-placeholder { 2478 color: rgba(30, 30, 30, 0.62); } 2479 .block-editor-inserter__search input[type="search"].block-editor-inserter__search-input::-moz-placeholder { 2480 opacity: 1; 2481 color: rgba(30, 30, 30, 0.62); } 2482 .block-editor-inserter__search input[type="search"].block-editor-inserter__search-input:-ms-input-placeholder { 2483 color: rgba(30, 30, 30, 0.62); } 2484 .is-dark-theme .block-editor-inserter__search input[type="search"].block-editor-inserter__search-input::-webkit-input-placeholder { 2485 color: rgba(255, 255, 255, 0.65); } 2486 .is-dark-theme .block-editor-inserter__search input[type="search"].block-editor-inserter__search-input::-moz-placeholder { 2487 opacity: 1; 2488 color: rgba(255, 255, 255, 0.65); } 2489 .is-dark-theme .block-editor-inserter__search input[type="search"].block-editor-inserter__search-input:-ms-input-placeholder { 2490 color: rgba(255, 255, 255, 0.65); } 2491 @media (min-width: 600px) { 2492 .block-editor-inserter__search input[type="search"].block-editor-inserter__search-input { 2493 font-size: 13px; } } 2494 .block-editor-inserter__search input[type="search"].block-editor-inserter__search-input:focus { 2495 background: #fff; 2496 box-shadow: 0 0 0 1.5px #007cba; 2497 box-shadow: 0 0 0 1.5px var(--wp-admin-theme-color); } 2498 .block-editor-inserter__search input[type="search"].block-editor-inserter__search-input:-ms-input-placeholder { 2499 color: #757575; } 2500 .block-editor-inserter__search input[type="search"].block-editor-inserter__search-input::placeholder { 2501 color: #757575; } 2502 .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 { 2503 -webkit-appearance: none; } 2504 2505 .block-editor-inserter__search-icon { 2506 position: absolute; 2507 top: 0; 2508 left: 20px; 2509 bottom: 0; 2510 display: flex; 2511 align-items: center; } 2512 .block-editor-inserter__search-icon > svg { 2513 margin: 8px; } 2514 2515 .block-editor-inserter__tabs { 2516 display: flex; 2517 flex-direction: column; 2518 margin-top: -8px; } 2519 .block-editor-inserter__tabs .components-tab-panel__tabs { 2520 position: -webkit-sticky; 2521 position: sticky; 2522 top: 72px; 2523 background: #fff; 2524 z-index: 1; 2525 border-bottom: 1px solid #ddd; } 2526 .block-editor-inserter__tabs .components-tab-panel__tabs .components-tab-panel__tabs-item { 2527 flex-grow: 1; 2528 margin-bottom: -1px; } 2529 .block-editor-inserter__tabs .components-tab-panel__tab-content { 2530 display: flex; 2531 flex-grow: 1; 2532 flex-direction: column; 2533 position: relative; } 2534 2535 .block-editor-inserter__panel-header { 2536 display: inline-flex; 2537 align-items: center; 2538 padding: 16px 16px 0; } 2539 2540 .block-editor-inserter__panel-header-patterns { 2541 padding: 16px 8px 0 16px; } 2542 2543 .block-editor-inserter__panel-content { 2544 padding: 16px; } 2545 2546 .block-editor-inserter__panel-title, 2547 .block-editor-inserter__panel-title button, 2548 .components-custom-select-control__menu li { 2549 margin: 0 0 0 12px; 2550 color: #757575; 2551 text-transform: uppercase; 2552 font-size: 11px; 2553 font-weight: 500; } 2554 2555 .block-editor-inserter__panel-dropdown select.components-select-control__input.components-select-control__input.components-select-control__input { 2556 line-height: 1.2; } 2557 2558 .block-editor-inserter__panel-dropdown select { 2559 border: none; } 2560 2561 .block-editor-inserter__block-list { 2562 flex-grow: 1; 2563 position: relative; } 2564 2565 .block-editor-inserter__popover .block-editor-block-types-list { 2566 margin: -8px; } 2567 2568 .block-editor-inserter__reusable-blocks-panel { 2569 position: relative; 2570 text-align: left; } 2571 2572 .block-editor-inserter__manage-reusable-blocks { 2573 display: inline-block; 2574 margin: 16px; } 2575 2576 .block-editor-inserter__no-results { 2577 padding: 32px; 2578 margin-top: 64px; 2579 text-align: center; } 2580 2581 .block-editor-inserter__no-results-icon { 2582 fill: #949494; } 2583 2584 .block-editor-inserter__child-blocks { 2585 padding: 0 16px; } 2586 2587 .block-editor-inserter__parent-block-header { 2588 display: flex; 2589 align-items: center; } 2590 .block-editor-inserter__parent-block-header h2 { 2591 font-size: 13px; } 2592 .block-editor-inserter__parent-block-header .block-editor-block-icon { 2593 margin-left: 8px; } 2594 2595 .block-editor-inserter__preview-container { 2596 display: none; 2597 width: 300px; 2598 background: #fff; 2599 border-radius: 2px; 2600 border: 1px solid #ddd; 2601 position: absolute; 2602 top: 16px; 2603 right: calc(100% + 16px); 2604 max-height: calc(100% - 32px); 2605 overflow-y: hidden; } 2606 @media (min-width: 782px) { 2607 .block-editor-inserter__preview-container { 2608 display: block; } } 2609 .block-editor-inserter__preview-container .block-editor-block-card { 2610 padding: 16px; } 2611 .block-editor-inserter__preview-container .block-editor-block-card__title { 2612 font-size: 13px; } 2613 2614 .block-editor-inserter__preview-content { 2615 min-height: 144px; 2616 background: #f0f0f0; 2617 display: -ms-grid; 2618 display: grid; 2619 flex-grow: 1; 2620 align-items: center; } 2621 2622 .block-editor-inserter__preview-content-missing { 2623 flex: 1; 2624 display: flex; 2625 justify-content: center; 2626 align-items: center; 2627 min-height: 144px; 2628 color: #757575; 2629 background: #f0f0f0; } 2630 2631 .block-editor-inserter__tips { 2632 border-top: 1px solid #ddd; 2633 padding: 16px; 2634 flex-shrink: 0; } 2635 2636 .block-editor-inserter__manage-reusable-blocks-container { 2637 padding: 16px; } 2638 2639 .block-editor-inserter__quick-inserter { 2640 width: 100%; 2641 max-width: 100%; } 2642 @media (min-width: 782px) { 2643 .block-editor-inserter__quick-inserter { 2644 width: 350px; } } 2645 2646 .block-editor-inserter__quick-inserter-results .block-editor-inserter__panel-header { 2647 height: 0; 2648 padding: 0; 2649 float: right; } 2650 2651 .block-editor-inserter__quick-inserter .block-editor-inserter__panel-content { 2652 padding: 8px; } 2653 2654 .block-editor-inserter__quick-inserter.has-search .block-editor-inserter__panel-content, 2655 .block-editor-inserter__quick-inserter.has-expand .block-editor-inserter__panel-content { 2656 padding: 16px; } 2657 2658 .block-editor-inserter__quick-inserter-patterns { 2659 display: -ms-grid; 2660 display: grid; 2661 -ms-grid-columns: 1fr 1fr; 2662 grid-template-columns: 1fr 1fr; 2663 grid-gap: 8px; } 2664 2665 .block-editor-inserter__quick-inserter-separator { 2666 border-top: 1px solid #ddd; } 2667 2668 .block-editor-inserter__popover.is-quick > .components-popover__content > div { 2669 padding: 0; } 2670 2671 .block-editor-inserter__quick-inserter-expand.components-button { 2672 display: block; 2673 background: #1e1e1e; 2674 color: #fff; 2675 width: 100%; 2676 height: 44px; 2677 border-radius: 0; } 2678 .block-editor-inserter__quick-inserter-expand.components-button:hover { 2679 color: #fff; } 2680 .block-editor-inserter__quick-inserter-expand.components-button:active { 2681 color: #ccc; } 2682 .block-editor-inserter__quick-inserter-expand.components-button:focus:not(:disabled) { 2683 box-shadow: inset 0 0 0 1.5px #007cba, inset 0 0 0 3px #fff; 2684 box-shadow: inset 0 0 0 1.5px var(--wp-admin-theme-color), inset 0 0 0 3px #fff; } 2685 2686 .block-editor-post-preview__dropdown { 2687 padding: 0; } 2688 2689 .block-editor-post-preview__button-resize.block-editor-post-preview__button-resize { 2690 padding-right: 40px; } 2691 .block-editor-post-preview__button-resize.block-editor-post-preview__button-resize.has-icon { 2692 padding-right: 8px; } 2693 2694 .block-editor-post-preview__dropdown-content .components-popover__content { 2695 overflow-y: visible; } 2696 2697 .block-editor-post-preview__dropdown-content.edit-post-post-preview-dropdown .components-menu-group:first-child { 2698 padding-bottom: 8px; } 2699 2700 .block-editor-post-preview__dropdown-content.edit-post-post-preview-dropdown .components-menu-group:last-child { 2701 margin-bottom: 0; } 2702 2703 .block-editor-post-preview__dropdown-content .components-menu-group + .components-menu-group { 2704 padding: 8px; } 2705 2706 @media (min-width: 600px) { 2707 .edit-post-header__settings .editor-post-preview, 2708 .edit-site-header__actions .editor-post-preview { 2709 display: none; } }
title
Description
Body
title
Description
Body
title
Description
Body
title
Body
| Generated : Mon Jan 18 08:20:02 2021 | Cross-referenced by PHPXref |