/** * MLSImport block editor — inspector styling. * * Re-skins the @wordpress/components controls in MLSImport block inspector panels * to the shared wp-admin "2025" design system (the field_options tab / the * standalone settings page), so block settings match the rest of the plugin's admin. * * Scope: `.mlsimport-block-inspector` is added to every MLSImport PanelBody (the * `.components-panel__body`) by the PanelBody wrapper in the block editor scripts — * so these rules touch ONLY MLSImport block panels, never core/other-plugin * inspectors. Mirrors the override block in mlsimport-standalone-settings.css * (same tokens; see that file and the design-system memory). The class scope * (specificity 0,2,0) beats wp-components' single-class base rules; `!important` * is used only where WP's emotion styling forces a value (select box-shadow, * the InputControl backdrop border, and the label transform/size). */ /* Text / number / email / textarea / select — bordered, rounded, soft shadow. */ .mlsimport-block-inspector .components-text-control__input, .mlsimport-block-inspector .components-textarea-control__input, .mlsimport-block-inspector .components-select-control__input { padding: 6px 12px; min-height: 36px; box-sizing: border-box; background: #ffffff; color: #1c1917; border: 1px solid rgba( 28, 25, 23, 0.12 ); border-radius: 10px; box-shadow: 0px 1px 2px rgba( 28, 25, 23, 0.06 ); } .mlsimport-block-inspector .components-textarea-control__input { min-height: 0; } /* SelectControl draws its visible border on the .components-input-control__backdrop overlay (default 1px #949494), covering the border set on the inner via an emotion class — re-assert the soft shadow so the select isn't flat next to the inputs. */ .mlsimport-block-inspector .components-select-control__input { box-shadow: 0px 1px 2px rgba( 28, 25, 23, 0.06 ) !important; } /* Focus: Sunny Bento orange accent ring, consistent across every field. */ .mlsimport-block-inspector .components-text-control__input:focus, .mlsimport-block-inspector .components-textarea-control__input:focus, .mlsimport-block-inspector .components-select-control__input:focus { border-color: #e85d3c; box-shadow: 0 0 0 1px #e85d3c; outline: none; } /* Field labels — block, 14px, medium weight, dark, sentence-case. Covers BOTH label classes: TextControl/TextareaControl use .components-base-control__label, while SelectControl renders its label as an InputControl label (.components-input-control__label). WP renders both small + uppercase via emotion, so transform + size are forced with !important. */ .mlsimport-block-inspector .components-base-control__label, .mlsimport-block-inspector .components-input-control__label { display: block; margin-bottom: 4px; font-size: 14px !important; font-weight: 500; color: #1c1917; text-transform: none !important; letter-spacing: normal; } /* Help / explanation text under a field — muted. */ .mlsimport-block-inspector .components-base-control__help { color: #9a9285; font-size: 12px; } /* Buttons, if a panel uses them — primary: solid near-black pill, secondary: white bordered pill — matching .button.mlsimport_button (Sunny Bento). */ .mlsimport-block-inspector .components-button.is-primary { color: #ffffff; background: #1c1917; border: 1px solid #1c1917; border-radius: 999px; box-shadow: 0px 1px 2px rgba( 28, 25, 23, 0.08 ); } .mlsimport-block-inspector .components-button.is-primary:hover { background: #33302b; border-color: #33302b; box-shadow: 0 10px 24px -10px rgba( 0, 0, 0, 0.45 ); } .mlsimport-block-inspector .components-button.is-secondary { background: #ffffff; color: #1c1917; border: 1px solid rgba( 28, 25, 23, 0.12 ); border-radius: 999px; box-shadow: 0px 1px 2px rgba( 28, 25, 23, 0.06 ); } .mlsimport-block-inspector .components-button.is-secondary:hover { background: #f3efe7; }