| @@ -18,14 +18,28 @@ | ||
| 18 | 18 | .wz-repeater-item .repeater-item-header { |
| 19 | 19 | display: flex; |
| 20 | 20 | justify-content: space-between; |
| 21 | 21 | align-items: center; |
| 22 | + width: 100%; | |
| 23 | + margin: 0; | |
| 24 | + background: transparent; | |
| 25 | + color: inherit; | |
| 26 | + font: inherit; | |
| 27 | + text-align: start; | |
| 22 | 28 | border-bottom: 1px solid #ddd; |
| 29 | + border-top: 0; | |
| 30 | + border-left: 0; | |
| 31 | + border-right: 0; | |
| 23 | 32 | padding-bottom: 0.5rem; |
| 24 | 33 | cursor: pointer; |
| 25 | 34 | font-weight: bold; |
| 26 | 35 | } |
| 27 | 36 | |
| 37 | +.wz-repeater-item .repeater-item-header:focus-visible { | |
| 38 | + outline: 2px solid #2271b1; | |
| 39 | + outline-offset: 2px; | |
| 40 | +} | |
| 41 | + | |
| 28 | 42 | /* Header for repeater field */ |
| 29 | 43 | .wz-repeater-field-header { |
| 30 | 44 | margin-bottom: 0.5rem; |
| 31 | 45 | } |
| @@ -105,8 +119,22 @@ | ||
| 105 | 119 | .repeater-template { |
| 106 | 120 | display: none; |
| 107 | 121 | } |
| 108 | 122 | |
| 123 | +/* Disabled / pro-gated repeater: the subfields and the repeater's own buttons each | |
| 124 | + carry a disabled attribute, which is what actually blocks interaction. These rules | |
| 125 | + only supply the matching visual affordance on the wrapper, which cannot be disabled. */ | |
| 126 | +.wz-repeater-disabled .add-item, | |
| 127 | +.wz-repeater-disabled .repeater-item-actions .button { | |
| 128 | + pointer-events: none; | |
| 129 | + opacity: 0.5; | |
| 130 | + cursor: not-allowed; | |
| 131 | +} | |
| 132 | + | |
| 133 | +.wz-repeater-disabled .add-item:hover { | |
| 134 | + background-color: #0073aa; | |
| 135 | +} | |
| 136 | + | |
| 109 | 137 | /* Responsiveness for smaller screens */ |
| 110 | 138 | @media screen and (max-width: 768px) { |
| 111 | 139 | .wz-repeater-wrapper { |
| 112 | 140 | margin-bottom: 1rem; |
| @@ -333,12 +361,34 @@ | ||
| 333 | 361 | .wz-toggle input[type="checkbox"]:disabled + .wz-toggle-slider { |
| 334 | 362 | opacity: 0.5; |
| 335 | 363 | } |
| 336 | 364 | |
| 365 | +/* | |
| 366 | + * Settings page layout: content + sidebar, side by side. | |
| 367 | + * | |
| 368 | + * WP core lays out #post-body-content and #postbox-container-1 via floats, but a float can | |
| 369 | + * only avoid floats that precede it in source order — #post-body-content comes first, so it | |
| 370 | + * has nothing to avoid and renders at full width, overlapping the sidebar that floats beside | |
| 371 | + * it. Flexbox sidesteps the ordering problem entirely and (with align-items: flex-start) still | |
| 372 | + * lets the sidebar be shorter than the tab content, matching the old float layout's look. | |
| 373 | + */ | |
| 374 | +#post-body.wz-settings-post-body { | |
| 375 | + display: flex; | |
| 376 | + align-items: flex-start; | |
| 377 | + gap: 24px; | |
| 378 | +} | |
| 379 | + | |
| 380 | +#post-body.wz-settings-post-body > #postbox-container-1 { | |
| 381 | + flex: 0 0 280px; | |
| 382 | + width: 280px; | |
| 383 | +} | |
| 384 | + | |
| 337 | 385 | /* Vertical settings tabs. */ |
| 338 | 386 | .wz-vertical-tabs { |
| 339 | 387 | display: flex; |
| 340 | 388 | align-items: flex-start; |
| 389 | + flex: 1 1 auto; | |
| 390 | + min-width: 0; | |
| 341 | 391 | gap: 24px; |
| 342 | 392 | } |
| 343 | 393 | |
| 344 | 394 | .wz-vertical-tabs > ul.nav-tab-wrapper { |
| @@ -414,8 +464,12 @@ | ||
| 414 | 464 | } |
| 415 | 465 | |
| 416 | 466 | /* Horizontal tabs on small screens (WP admin breakpoint); pills keep their style. */ |
| 417 | 467 | @media screen and (max-width: 782px) { |
| 468 | + #post-body.wz-settings-post-body { | |
| 469 | + display: block; | |
| 470 | + } | |
| 471 | + | |
| 418 | 472 | .wz-vertical-tabs { |
| 419 | 473 | display: block; |
| 420 | 474 | } |
| 421 | 475 | |
| @@ -618,5 +672,7 @@ | ||
| 618 | 672 | |
| 619 | 673 | .wz-default-value code { |
| 620 | 674 | font-size: 11px; |
| 621 | 675 | padding: 1px 5px; |
| 676 | + overflow-wrap: anywhere; | |
| 677 | + word-break: break-word; | |
| 622 | 678 | } |
