| @@ -44,17 +44,56 @@ | ||
| 44 | 44 | margin-right: 5px; |
| 45 | 45 | } |
| 46 | 46 | |
| 47 | 47 | .remove-schema-type { |
| 48 | + display: inline-flex; | |
| 49 | + align-items: center; | |
| 50 | + gap: 4px; | |
| 48 | 51 | color: #dc3232; |
| 49 | 52 | text-decoration: none; |
| 50 | 53 | font-size: 12px; |
| 54 | + padding: 6px 12px !important; | |
| 55 | + /* Match the border to the red label/icon (monochromatic) instead of WP core's | |
| 56 | + blue admin-theme border, which clashes with the red content. */ | |
| 57 | + border-color: #dc3232 !important; | |
| 51 | 58 | } |
| 52 | 59 | |
| 60 | +.remove-schema-type .dashicons { | |
| 61 | + display: inline-flex; | |
| 62 | + align-items: center; | |
| 63 | + justify-content: center; | |
| 64 | + color: #dc3232 !important; | |
| 65 | + flex-shrink: 0; | |
| 66 | + width: 16px; | |
| 67 | + height: 16px; | |
| 68 | + font-size: 16px; | |
| 69 | + /* Override WP core's higher-specificity `.wp-core-ui .button .dashicons` | |
| 70 | + (line-height: 1.9; vertical-align: top), which otherwise offsets the glyph. */ | |
| 71 | + line-height: 1 !important; | |
| 72 | + vertical-align: middle !important; | |
| 73 | + margin-bottom: 0.15rem; | |
| 74 | +} | |
| 75 | + | |
| 76 | +.remove-schema-type:hover, | |
| 77 | +.remove-schema-type:hover .dashicons { | |
| 78 | + color: #a00; | |
| 79 | +} | |
| 80 | + | |
| 53 | 81 | .remove-schema-type:hover { |
| 54 | - color: #a00; | |
| 82 | + border-color: #a00 !important; | |
| 83 | + background: rgba(220, 50, 50, 0.06) !important; | |
| 55 | 84 | } |
| 56 | 85 | |
| 86 | +/* Keep the focus/active (clicked) state red — WP core otherwise paints a blue | |
| 87 | + border and blue box-shadow focus ring from the admin-theme color. */ | |
| 88 | +.remove-schema-type:focus, | |
| 89 | +.remove-schema-type:active { | |
| 90 | + color: #a00 !important; | |
| 91 | + border-color: #a00 !important; | |
| 92 | + box-shadow: 0 0 0 1px #a00 !important; | |
| 93 | + outline: 2px solid transparent; | |
| 94 | +} | |
| 95 | + | |
| 57 | 96 | .no-schema-types { |
| 58 | 97 | text-align: center; |
| 59 | 98 | padding: 20px; |
| 60 | 99 | background: #f9f9f9; |
| @@ -75,10 +114,25 @@ | ||
| 75 | 114 | |
| 76 | 115 | .add-schema-type-section .button { |
| 77 | 116 | font-size: 14px; |
| 78 | 117 | padding: 8px 16px; |
| 118 | + display: inline-flex; | |
| 119 | + align-items: center; | |
| 120 | + gap: 6px; | |
| 79 | 121 | } |
| 80 | 122 | |
| 123 | +.add-schema-type-section .button .dashicons { | |
| 124 | + flex-shrink: 0; | |
| 125 | + width: 16px; | |
| 126 | + height: 16px; | |
| 127 | + font-size: 16px; | |
| 128 | + line-height: 1; | |
| 129 | +} | |
| 130 | + | |
| 131 | +#add_schema_type_button.button.button-primary .dashicons { | |
| 132 | + color: #fff !important; | |
| 133 | +} | |
| 134 | + | |
| 81 | 135 | /* Schema Type Modal */ |
| 82 | 136 | #schema-type-modal { |
| 83 | 137 | position: fixed; |
| 84 | 138 | top: 0; |
| @@ -303,8 +357,19 @@ | ||
| 303 | 357 | } |
| 304 | 358 | |
| 305 | 359 | .schema-preview-section .button { |
| 306 | 360 | margin-right: 10px; |
| 361 | + display: inline-flex; | |
| 362 | + align-items: center; | |
| 363 | + gap: 6px; | |
| 364 | +} | |
| 365 | + | |
| 366 | +.schema-preview-section .button .dashicons { | |
| 367 | + flex-shrink: 0; | |
| 368 | + width: 16px; | |
| 369 | + height: 16px; | |
| 370 | + font-size: 16px; | |
| 371 | + line-height: 1; | |
| 307 | 372 | } |
| 308 | 373 | |
| 309 | 374 | #schema-preview-output { |
| 310 | 375 | margin-top: 15px; |
