# mlsimport/7.2.1/admin/css/mlsimport-admin.css MLSImport: IDX Plugin & MLS Plugin for Real Estate Listings, version 7.2.1. 1,692 lines. - Page: https://pluginprobe.com/plugins/mlsimport/7.2.1/code/admin/css/mlsimport-admin.css - Raw: https://pluginprobe.com/plugins/mlsimport/7.2.1/raw/admin/css/mlsimport-admin.css - Modified: 2026-09-10T13:22:28+00:00 Line numbers below start at 1. Link to a line or a range by appending a fragment to the page URL, for example `https://pluginprobe.com/plugins/mlsimport/7.2.1/code/admin/css/mlsimport-admin.css#L10-L20`. ```css /* * mlsimport-admin.css * --------------------------------------------------------------------------- * Main admin stylesheet for the MLSImport plugin. Styles the wp-admin screens: * the import-task metaboxes, plugin settings/tools UI, field-mapping fieldsets, * progress bars and log viewer, the 2025 card/tab layout, custom form controls * (switches, styled checkboxes, pill buttons), the deactivation exit-survey * modal, and the activity-log / import-history banners. * Also carries a few per-theme admin tweaks (WpResidence, WpEstate, Houzez, * Real Homes) grouped under their own section headers below. * CSS custom properties (design tokens) live in the :root block. * Shared account notices use the same amber panel and large heading for every * login failure, with a high-contrast plans button when a subscription is needed. */ /* Base styling */ /* Design tokens: "Sunny Bento" palette shared with the mlsimport.com portal — warm near-black primary, orange accent, cream/warm-grey surfaces, pastel status colours (mint/butter/soft-red), soft shadows and rounded radii. */ :root { --primary-color: #1c1917; --primary-hover: #33302b; --accent-color: #e85d3c; --accent-soft: #fde4d8; --success-color: #2faa6a; --success-soft: #b8e6cc; --success-deep: #1c5c3a; --error-color: #c02617; --error-soft: #fbe6e3; --error-hover: #9a1e12; --warning-color: #dd9211; --warning-soft: #fae39a; --warning-deep: #7a5410; --text-primary: #1c1917; --text-secondary: #6b6358; --text-light: #9a9285; --border-color: rgba(28,25,23,0.12); --background-light: #faf8f3; --background-soft: #f3efe7; --background-white: #FFFFFF; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --border-radius: 10px; --radius-card: 18px; --radius-pill: 999px; --transition-speed: 0.2s; } /* Cream page canvas on the plugin's own admin screens only (menu/submenu pages whose body class contains "_page_mlsimport", plus the Import Tasks CPT list). Other wp-admin screens keep the core grey background. */ body.wp-admin[class*="_page_mlsimport"], body.wp-admin.post-type-mlsimport_item { background: var(--background-light); } /*Real Homes admin adjusments*/ /* Constrain the thumbnail column image on the Real Homes property list table. */ .post-type-property .column-property-thumbnail img{ width: 130px; height: auto; } /*Plugin CSS*/ /* Field-mapping row title. */ .mlsfield_import_title { margin: 0px 0px 10px 0px; font-size: 15px; } .mandatory_fields_wrapper_exp, .mls_mandatory_fields{ margin: 10px 0px 5px 0px; } .mls_mandatory_fields{ color: #6b6358; margin-bottom: 10px; max-width: 600px; } .mandatory_fields_wrapper_exp{ color: #6b6358; max-width: 600px; } /* Form field label (note: overridden later by the 2025 .mlsimport-label rule). */ .mlsimport-label{ font-weight: 600; display: inline-block; float: left; width: 100%; line-height: 1.6em; font-size: 14px; } /* Helper / explanation text under fields. */ .mls_explanations{ line-height: 1.6em; } .mlsimport-fieldset.mlsfield_map_post_meta, .mlsimport-fieldset.mlsfield_label{ margin: 0px; } .mlsimport-fieldset select.mlsfield_map_post_tax_select{ max-width: 200px; min-width: 200px; padding: 0px 12px } input.mlsimport_select_import_all, input.mlsimport_select_import_admin_all{ margin-top: 5px; } .mlsimport-exp{ margin: 0px; font-size: 14px; line-height: 1.6em; margin-bottom: 5px; max-width: 450px; } .mlsimport_hidden_field_button{ } .mlsimport-input-wrapper{ clear: both; } #mlsimport_mls_name_front{ border-color: rgba(28,25,23,0.18); min-width: 450px; padding: 5px 12px; } /* Styled dropdown used in field mapping/settings: bordered, rounded, subtle shadow. */ .wp-admin select.mlsimport-select{ max-width: 450px; padding: 5px 12px; width: 100%; box-sizing: border-box; display: inline-flex; flex-direction: column; align-items: flex-start; isolation: isolate; border: 1px solid rgba(28,25,23,0.18); box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.08); border-radius: 8px; flex: none; align-self: stretch; } .wp-admin select.mlsimport-select option{ padding: 3px 0px; } /* Grey rounded panel wrapping a group of import parameters. */ .mlsimport_param_wrapper{ background-color: #f3efe7; padding:20px; border-radius: 14px; } .postbox .inside .mlsimport_param_wrapper h2{ font-size: 20px!important; font-weight: 600; padding-left: 0px!important; padding-bottom: 19px!important; } /* Field-mapping layout: each item is a vertical column; wrapper lays items in a horizontal flex row with spacing. */ .mlsimport-fieldset-item{ display: flex; flex-direction: column; } .mlsimport-fieldset-wrapper{ display: flex; gap:30px; } .mlsimport-fieldset{ margin: 20px 0px; position: relative; } .mandatory_fields_wrapper fieldset.mlsimport-fieldset{ padding: 10px 20px; margin: 0px; } /* Zebra-stripe alternating fieldsets in the mandatory-fields list. */ .mandatory_fields_wrapper .mlsimport-fieldset:nth-child(even){ background-color: #f3efe7; } .mlsimport_auto_switch{ margin: 0px; padding: 10px; } /* "Select all" pill button (pink); darker on hover. */ .mls_import_selec_all_class { background-color: var(--primary-color); color: #fff; display: inline-block; padding: 5px; margin-right: 10px; margin-bottom: 5px; cursor: pointer; padding: 7px 14px; border-radius: var(--radius-pill); } .mls_import_selec_all_class:hover { background-color: #33302b; } /* ===== Import progress bar + transfer controls + live log ===== */ /* Outer progress wrapper (this selector is declared again below). */ #mlsimport_myProgress_wrapper{ width:800px; margin-top: 10px; /* display:none;*/ } /* "Stop transfer" button (red); note a later rule overrides display to none. */ #mlsimport_transfer_stop{ padding: 7px 16px; background: #c02617; color: #fff; border-radius: var(--radius-pill); display: inline-block; margin-top: 10px; cursor: pointer; } /* Progress fill bar — width is animated from 0% via JS as items import. */ #mlsimport_myBar{ width: 0%; height: 20px; background-color: #e85d3c; } #mlsimport_myProgress_wrapper{ width:800px; margin-top: 10px; /* display:none;*/ } /* Track background for the "monster" (full-width) progress bar. */ #mlsimport_monster_myProgress { width: 100%; background-color: #efe7dc; } /* Hide the stop button by default (JS shows it while a transfer runs). */ #mlsimport_transfer_stop{ display: none; } /* Scrollable live import log panel. */ #log_container{ width: 750px; background: #f3efe7; border-radius: var(--border-radius); padding: 15px; margin-top: 15px; max-height: 500px; overflow-y: auto; } .mlsimport_import_no{ font-size: 14px; max-width: 775px; margin-bottom: 10px; } #mlsimport_stop_item, #mlsimport-start_item{ display: inline-block; margin: 0px 10px 30px 0px; line-height: normal; } .mlsimport_hidden_field_button { max-width: 450px; } .mlsimport_param_wrapper input{ max-width: 450px; } .cron_job_explainin{ max-width: 800px; margin-top: 5px; } /* Tools-tab blocks are defined at the end of this file, so they win ties against the later 2025 overrides. */ /*==WpResidence*/ /* Cap uploaded property thumbnail preview size (selector name is misspelled "thumb_wrapepr" to match the markup). */ #property_uploaded_thumb_wrapepr img{ max-width: 200px; max-height: 200px; } table.media .column-title .media-icon img { width:60px; } /* Admin message banners (notification / validated / warning). Base is a pink box; individual variants below re-colour it. */ .mlsimport_notification, .mlsimport_validated, .mlsimport_warning{ background: var(--error-soft); color: var(--error-color); padding: 12px 16px; margin-bottom: 10px; border-radius: var(--border-radius); } /* Account login failures share one full-width notice and typography. The two-class selector wins over each screen's ordinary warning styles. */ .mlsimport_warning.mlsimport-account-notice { box-sizing: border-box; width: 100%; margin: 20px 0; padding: 24px; border: 1px solid #d97706; border-left: 6px solid #b45309; border-radius: 12px; background: #fff4d6; color: #451a03; font-size: 16px; font-weight: 400; line-height: 1.6; } .mlsimport-account-notice .mlsimport-account-notice-title { display: block; margin: 0 0 8px; color: #451a03; font-size: 22px; font-weight: 700; line-height: 1.3; } .mlsimport_warning.mlsimport-account-notice p { margin: 0; font-size: 16px; line-height: 1.6; } /* A dedicated button class keeps both admin surfaces visually consistent. */ .mlsimport-account-subscription a.mlsimport-account-subscription-action { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 44px; margin-top: 16px; padding: 10px 22px; border: 2px solid #1c1917; border-radius: 8px; background: #1c1917; color: #fff; font-size: 15px; font-weight: 700; line-height: 1.4; text-decoration: none; } .mlsimport-account-subscription a.mlsimport-account-subscription-action:hover { background: #44403c; border-color: #44403c; color: #fff; } .mlsimport-account-subscription a.mlsimport-account-subscription-action:focus-visible { outline: 3px solid #92400e; outline-offset: 3px; } /* Indigo "populate" info banner. */ .mlsimport_populate_warning{ background: var(--primary-color); color: #fff; padding: 12px 16px; margin-bottom: 10px; border-radius: var(--border-radius); } /* "Validated" variant: amber-tinted background with a warning left border. */ .mlsimport_validated{ padding: 0.75rem 1rem; margin-bottom: 1rem; border-radius: var(--border-radius); background-color: rgba(250, 227, 154, 0.4); border-left: 4px solid var(--warning-color); color: var(--text-primary); } .mlsimport_notification{ background: var(--warning-soft); color: var(--warning-deep); } #mlsimport_item_metaboxes-sectionid .mlsimport_notification{ background: var(--warning-soft); color: var(--warning-deep); max-width: 500px; } /* Scrollable status/output box inside the import-task metabox. */ #mlsimport_item_status{ width: auto; background-color: #f3efe7; overflow-y: scroll; padding: 10px; border-radius: var(--border-radius); margin-bottom: 15px; } /* ===== iOS-style on/off toggle switch ===== Absolutely positioned track; the real checkbox is hidden and a .slider pseudo-element renders the knob, translated on :checked. */ label.mlsimport_switch { position: absolute; display: inline-block; width: 53px!important; height: 25px; top: 7px; left: 205px; } .mlsimport_switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(28,25,23,0.18); -webkit-transition: .4s; transition: .4s; } .slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } /* Checked state: blue track, and the knob slides right (translateX below). */ .mlsimport_switch input:checked + .slider { background-color: #e85d3c; } .mlsimport_switch input:focus + .slider { box-shadow: 0 0 1px #e85d3c; } .mlsimport_switch input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } /* Rounded (pill) variant of the toggle track and knob. */ .slider.round { border-radius: 25px; } .slider.round:before { border-radius: 50%; } #mlsimport-delete-notification{ margin-bottom: 10px; } #mlsimport-delete-prop{ margin-top: 15px; } /* Provider-specific credential fieldsets are shown/hidden per selected MLS by PHP at render time (inline display:none in the credentials partials) and by mlsimport_token_on_load() on in-page MLS changes. No CSS default-hide here: a stylesheet rule would fight the server-rendered visibility. */ .mlsimport_param_wrapper input[type=text]{ min-width: 450px; border-color: rgba(28,25,23,0.18); padding: 5px 12px; } #mlsimport_item_min_price, #mlsimport_item_max_price{ min-width: 210px; max-width: 210px; } /* Sign-up / account CTA box shown when no account is connected. */ .mlsimport_signup{ display: inline-block; background-color: #f3efe7; border-radius: 14px; padding: 20px; font-size: 15px; margin-bottom: 15px; } .mlsimport_signup p{ font-size: 15px; } .mlsimport_signup_button{ float:left; clear:left; } /*==WpEstate*/ /*==Houzez*/ /* Houzez property list thumbnail column sizing. */ .column-thumbnail img { max-width: 100%; height: auto; min-width: 102px ; } /*==RealHomes*/ /*==2025*/ /* 2025 redesign: tabbed card UI. Tab panels are hidden by default and shown when the active class is applied by the tab JS. */ /* Tab content panel — hidden until activated. */ .content-nav-tab{ display:none; padding: 30px 15px; background: #fff; border: 1px solid rgba(28,25,23,0.18); border-top: 0px; } /* Active tab panel becomes a visible flex container. */ .content-nav-tab-active{ display: flex; } .content-nav-tab.mlsimport_2025_card{ width: auto; } /* White rounded card with layered shadow (2025 card container). */ .mlsimport_2025_card{ flex-direction: column; align-items: center; padding: 0px; background: #FFFFFF; box-shadow: 0px 0px 0px 1px rgba(28, 25, 23, 0.05), 0px 5px 22px rgba(28, 25, 23, 0.05); border-radius: var(--radius-card); flex: none; order: 0; flex-grow: 1; } .mlsimport_2025_card_left_oriented{ flex-direction: column; align-content: flex-start; align-items: flex-start; justify-content: flex-start; padding: 30px; } /* Tab strip container (overrides WP core nav-tab-wrapper border). */ .nav-tab-wrapper.mlsimport-tab-wrapper{ border: none; padding: 0px 15px; margin-top: 50px; } .nav-tab-wrapper.mlsimport-tab-wrapper .nav-tab { text-transform: uppercase; color: var(--text-secondary); padding: 15px 25px; background: #f3efe7; border-top-right-radius: 12px; border-top-left-radius: 12px; padding: 15px 30px; background: #fff; border: 1px solid var(--border-color); font-weight: 500; letter-spacing: 0.04em; transition: color var(--transition-speed), background var(--transition-speed); } .nav-tab-wrapper.mlsimport-tab-wrapper .nav-tab:hover { color: var(--text-primary); background: var(--background-soft); } /* Active tab: warm near-black background, white text (portal "seg" pattern). */ .nav-tab-wrapper.mlsimport-tab-wrapper .nav-tab.nav-tab-active{ background-color: var(--primary-color); color: #fff; border-color: var(--primary-color); font-weight: 600; } .content-nav-tab.mlsimport_2025_card form{ max-width: 500px; } .mlsimport_2025_card_admin_options { display: flex; flex-direction: row; } .mlsimport_2025_card_admin_options:empty{ display: none; } /* ===== Numbered "steps" list ===== Uses a CSS counter to render circular numbered badges before each
  • (see ::before rule) instead of native list markers. */ .mlsimport-steps{ font-size: 16px; display: flex; flex-direction: column; gap: 10px; margin-left: 74px; } .mlsimport-steps ol { list-style: none; counter-reset: step-counter; padding: 0; } .mlsimport-steps li { counter-increment: step-counter; position: relative; padding-left: 44px; margin-bottom: 20px; line-height: 27px; } /* Circular numbered badge rendered from the CSS counter value. */ .mlsimport-steps li::before { content: counter(step-counter); position: absolute; left: 0; top: 0; width: 30px; height: 30px; background-color: var(--accent-color); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 500; } /*==2025 Inputs*/ /* Shared styling for text/password/select inputs in the 2025 UI: bordered, rounded, subtle shadow, inline-flex layout. */ input[type=password].mlsimport-input.mlsimport-2025-input, input[type=text].mlsimport-input.mlsimport-2025-input, .mlsimport-input.mlsimport-2025-input{ padding: 5px 12px; box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; isolation: isolate; background: #FFFFFF; border: 1px solid rgba(28,25,23,0.18); box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.08); border-radius: 8px; flex: none; order: 1; align-self: stretch; flex-grow: 0; display: inline-flex; } /* 2025 label override (later in the file, so it wins over the earlier .mlsimport-label float rule for these screens). */ .mlsimport-label { display: block; margin-bottom: 0px; font-weight: 500; color: var(--text-primary); } select.mlsimport-2025-select{ padding: 5px 24px 5px 12px; width: 100%; max-width: 100%; box-sizing: border-box; display: inline-flex; flex-direction: column; align-items: flex-start; isolation: isolate; border: 1px solid rgba(28,25,23,0.18); box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.08); border-radius: 8px; flex: none; align-self: stretch; flex-grow: 0; } /* Default bordered look for fieldset inputs and the import "select all" boxes. */ .mlsimport-fieldset-wrapper input, input[type=checkbox].mlsimport_select_import_admin_all, input[type=checkbox].mlsimport_select_import_all { border: 1px solid rgba(28,25,23,0.18); border-radius: 2px; background-color: #fff!important; } /* ===== Pill action buttons (Sunny Bento) ===== Portal button standard: dark solid primary, pastel intents on top of it — save_data (mint), secondary (white + border), warning_action (butter) and error_action (solid red that darkens on hover). All are full pills. */ /* Primary button: solid warm near-black pill. */ .button.mlsimport_button{ font-size: 14px; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 9px 24px; line-height: 1.5; min-height: 0; background: var(--primary-color); border: 1px solid var(--primary-color); border-radius: var(--radius-pill); color:#fff; flex: none; order: 1; flex-grow: 0; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.08); transition: background var(--transition-speed), box-shadow var(--transition-speed); } .button.mlsimport_button:hover { background: var(--primary-hover); color:#fff; border: 1px solid var(--primary-hover); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.45); } /* Save button: mint pill with deep-green text. */ .button.save_data, .wp-core-ui .button.mlsimport_button.save_data { background: var(--success-soft); border: 1px solid var(--success-soft); color: var(--success-deep); box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.06); } .button.save_data:hover, .wp-core-ui .button.mlsimport_button.save_data:hover { background: #a5dfc0; border: 1px solid #a5dfc0; color: var(--success-deep); box-shadow: 0 8px 20px -10px rgba(28, 92, 58, 0.5); } /* Secondary button: white surface pill with hairline border. */ .button.secondary, .wp-core-ui .button.mlsimport_button.secondary { background: var(--background-white); border: 1px solid var(--border-color); /* !important needed: wpresidence-core/css/wpresidence2025.css line 817-818 forces white text + inset shadow with !important on .button.secondary. */ color: var(--text-primary) !important; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05) !important; border-radius: var(--radius-pill); } .button.secondary:hover, .wp-core-ui .button.mlsimport_button.secondary:hover { background: var(--background-soft); border: 1px solid var(--border-color); color: var(--text-primary) !important; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05) !important; border-radius: var(--radius-pill); } /* Field-selector bulk bar: only "Select all" stays the dark primary; the "Select none" twin (same classes in markup) is demoted to the white secondary look via its ID so the toolbar has a single primary action. */ #mlsimport-select-none-import.button.mlsimport_button { background: var(--background-white); border: 1px solid var(--border-color); color: var(--text-primary); box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05); } #mlsimport-select-none-import.button.mlsimport_button:hover { background: var(--background-soft); border: 1px solid var(--border-color); color: var(--text-primary); box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05); } /* Warning button: butter pill with deep-amber text. */ .button.warning_action, .wp-core-ui .button.mlsimport_button.warning_action { background: var(--warning-soft); border: 1px solid var(--warning-soft); color: var(--warning-deep); box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.06); } .button.warning_action:hover, .wp-core-ui .button.mlsimport_button.warning_action:hover { background: #f3d87c; border: 1px solid #f3d87c; color: var(--warning-deep); box-shadow: 0 8px 20px -10px rgba(122, 84, 16, 0.45); } /* Error/danger button: solid red pill with white text, darkening on hover - the same shape as the primary button (solid -> darker + lifted shadow), just in the danger colour. It reads as a real action at rest instead of waiting for a hover to look like one. */ .button.error_action, .wp-core-ui .button.mlsimport_button.error_action { background: var(--error-color); border: 1px solid var(--error-color); color: #fff; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.08); } .button.error_action:hover, .wp-core-ui .button.mlsimport_button.error_action:hover { background: var(--error-hover); border: 1px solid var(--error-hover); color: #fff; box-shadow: 0 10px 24px -10px rgba(192, 38, 23, 0.55); } #mlsimport_item_how_many{ max-width: 450px; } /* ===== Custom SVG checkboxes ===== Native appearance is removed; a :before pseudo-element paints an inline SVG (unchecked = grey outline, checked = filled indigo box with a tick), both embedded as data: URIs below. */ input[type=checkbox].mlsimport-import-checkbox, input[type=checkbox].mlsimport-admin-checkbox { appearance: none; -webkit-appearance: none; background: transparent; border: none; box-shadow: none; width: 24px; height: 24px; position: relative; display: inline-block; vertical-align: middle; } input[type=checkbox].mlsimport-import-checkbox:before, input[type=checkbox].mlsimport-admin-checkbox:before { content: ""; position: absolute; top: 0; left: 0; width: 24px; height: 24px; background-image: url("data:image/svg+xml;utf8,"); background-size: 24px 24px; background-position: center; background-repeat: no-repeat; margin: 0px; } /* Checked state swaps in the filled indigo box + white tick SVG. */ input[type=checkbox].mlsimport-import-checkbox:checked:before, input[type=checkbox].mlsimport-admin-checkbox:checked:before { background-image: url("data:image/svg+xml;utf8,"); } /* Initial save progress overlay */ /* Fixed, viewport-centered modal card (translate(-50%,-50%) trick); high z-index keeps it above the admin UI while the initial save runs. */ .mlsimport-save-progress { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9999; background: #fff; padding: 40px; border-radius: var(--radius-card); /* border: 1px solid #ddd; */ box-shadow: 0 7px 54px rgba(0, 0, 0, 0.15); width: 500px; min-height: 200px; text-align: center; font-size: 17px; display: flex; align-content: center; justify-content: center; align-items: center; line-height: 1.8em; } .mlsimport-save-progress-text { margin-bottom: 10px; } .mlsimport-save-progress-bar { height: 10px; background: #f3efe7; margin-top: 5px; border-radius: 5px; overflow: hidden; } /* Animated fill inside the save progress bar (width driven by JS). */ .mlsimport-save-progress-bar .progress-fill { width: 0%; height: 100%; background: var(--accent-color); border-radius: 5px; transition: width 0.3s; } /* Deactivation exit survey modal */ /* Full-screen overlay (inset:0) centering the survey card; very high z-index sits above the plugins-list deactivate flow. .mlsimport-es-hidden toggles it. */ #mlsimport-exit-survey-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; } #mlsimport-exit-survey-modal.mlsimport-es-hidden { display: none; } /* Semi-transparent dim layer behind the survey card. */ .mlsimport-es-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); } .mlsimport-es-card { position: relative; background: #fff; border-radius: var(--radius-card); padding: 26px 28px; width: 460px; max-width: 92vw; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); } .mlsimport-es-title { margin: 0 0 6px; font-size: 18px; } .mlsimport-es-intro { margin: 0 0 16px; color: #6b6358; } /* Selectable reason row in the exit survey. */ .mlsimport-es-option { display: block; padding: 8px 10px; margin: 4px 0; border: 1px solid rgba(28,25,23,0.18); border-radius: var(--border-radius); cursor: pointer; } .mlsimport-es-option:hover { background: #f3efe7; } .mlsimport-es-other { width: 100%; margin-top: 10px; box-sizing: border-box; } .mlsimport-es-actions { margin-top: 18px; display: flex; align-items: center; gap: 16px; } .mlsimport-es-skip { color: #9a9285; text-decoration: underline; } .mlsimport-es-hidden { display: none; } /* ------------------------------------------------------- Activity log — sync-status banner (Task 02 / Build 2) ------------------------------------------------------- */ .mlsimport-activity-banner { padding: 12px 14px; /* Re-chrome the core .notice.notice-info wrapper to Sunny Bento: warm hairline border, accent-orange status edge, rounded corners. */ border: 1px solid var(--border-color); border-left: 4px solid var(--accent-color); border-radius: var(--border-radius); } .mlsimport-activity-banner__counts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 10px; } .mlsimport-activity-banner__title { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; color: #1c1917; } .mlsimport-activity-banner__title::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #1c1917; } .mlsimport-activity-banner__period { font-weight: 500; font-size: 11px; color: #9a9285; text-transform: uppercase; letter-spacing: .05em; } .mlsimport-activity-banner__totals { display: inline-flex; flex-wrap: wrap; gap: 6px; } .mlsimport-activity-stat { display: inline-flex; align-items: baseline; gap: 4px; padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 500; line-height: 1.5; } .mlsimport-activity-stat strong { font-size: 13px; font-weight: 700; } /* Per-action tinted stat pills: added (green), edited (amber), deleted (red). */ .mlsimport-activity-stat--added { background: #b8e6cc; color: #1c5c3a; } .mlsimport-activity-stat--edited { background: #fae39a; color: #7a5410; } .mlsimport-activity-stat--deleted { background: #fbe6e3; color: #c02617; } .mlsimport-activity-banner__breakdown { margin: 0 0 10px; padding: 0; list-style: none; max-width: 900px; border: 1px solid rgba(28,25,23,0.12); border-radius: var(--border-radius); overflow: hidden; } .mlsimport-activity-banner__breakdown li { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 8px; margin: 0; padding: 7px 12px; font-size: 13px; background: #fff; } .mlsimport-activity-banner__breakdown li:nth-child(even) { background: #f3efe7; } /* Per-task name cell: grows to fill, truncates with an ellipsis when long (min-width:0 lets the flex item shrink below its content width). */ .mlsimport-activity-banner__task { flex: 1 1 auto; min-width: 0; font-weight: 600; color: #1c1917; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mlsimport-activity-banner__chips { display: inline-flex; flex: 0 0 auto; flex-wrap: nowrap; gap: 5px; } .mlsimport-activity-chip { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; line-height: 1.6; white-space: nowrap; color: #ffffff; border-radius: var(--radius-pill); } /* Pastel per-action count chips: added/edited/deleted colours. */ .mlsimport-activity-chip--added { background: var(--success-soft); color: var(--success-deep); } .mlsimport-activity-chip--edited { background: var(--warning-soft); color: var(--warning-deep); } .mlsimport-activity-chip--deleted { background: var(--error-soft); color: var(--error-color); } /* Muted styling for a zero-count chip. */ .mlsimport-activity-chip.is-zero { background: #f3efe7; color: #9a9285; } .mlsimport-activity-banner__actions { margin: 0; } .mlsimport-activity-banner__link { display: inline-flex; align-items: center; gap: 5px; padding: 5px 15px; background: #1c1917; color: #ffffff !important; text-decoration: none !important; font-size: 13px; font-weight: 600; border-radius: var(--radius-pill); } .mlsimport-activity-banner__link:hover, .mlsimport-activity-banner__link:focus { background: #33302b; color: #ffffff !important; } /* ------------------------------------------------------- Import History — filter form (styled like the activity banner) Uses core .notice .notice-info for the card chrome (white box, blue left border); the rules below handle layout + controls. ------------------------------------------------------- */ .mlsimport-history-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 14px; margin: 16px 0; /* Same Sunny Bento re-chrome as the activity banner (core .notice). */ border: 1px solid var(--border-color); border-left: 4px solid var(--accent-color); border-radius: var(--border-radius); } .mlsimport-history-filters label { font-size: 13px; font-weight: 600; color: #1c1917; } .mlsimport-history-filters input[type="search"], .mlsimport-history-filters select { height: 32px; border-radius: 8px; border-color: rgba(28,25,23,0.12); } .mlsimport-history-filters .button { background: #1c1917; border-color: #1c1917; color: #ffffff; border-radius: var(--radius-pill); height: 32px; padding: 0 14px; font-weight: 600; } .mlsimport-history-filters .button:hover, .mlsimport-history-filters .button:focus { background: #33302b; border-color: #33302b; color: #ffffff; } /* ------------------------------------------------------- Activity log — action column badges (Task 02 / Build 2) ------------------------------------------------------- */ .mlsimport-activity-action { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; line-height: 1.6; text-transform: capitalize; white-space: nowrap; } /* Added-action badge (mint). */ .mlsimport-activity-action--added { background-color: var(--success-soft); color: var(--success-deep); } .mlsimport-activity-action--edited { background-color: var(--warning-soft); color: var(--warning-deep); } .mlsimport-activity-action--deleted { background-color: var(--error-soft); color: var(--error-color); } /* Searchable City/County multi-select — filter input above the native list. */ .mlsimport-2025-select.mlsimport-searchable-select, .mlsimport-select-search { max-width: 450px; } .mlsimport-select-search { display: block; width: 100%; box-sizing: border-box; margin-bottom: 6px; padding: 6px 12px; border: 1px solid rgba(28,25,23,0.18); border-radius: 8px; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.08); } /* Chip tray showing currently selected City/County values. */ .mlsimport-selected-chips { display: flex; flex-wrap: wrap; gap: 6px; max-width: 450px; margin: 6px 0; } /* Collapse the tray when nothing is selected. */ .mlsimport-selected-chips:empty { display: none; } .mlsimport-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; background: #1c1917; color: #ffffff; border-radius: 12px; font-size: 12px; line-height: 1.8; } /* Round "x" remove button inside a selected chip. */ .mlsimport-chip-remove { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.25); color: #ffffff; font-size: 14px; line-height: 1; cursor: pointer; } .mlsimport-chip-remove:hover { background: rgba(255, 255, 255, 0.45); } /* ============================================================ Import Tasks list — Status column health badge (issue #200) Pill badge showing the task's run health: green = healthy, amber = sync overdue, red = failed/stuck, gray = neutral. ============================================================ */ .mlsimport-task-health { display: inline-block; padding: 3px 12px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; line-height: 1.6; color: var(--text-secondary); background: var(--background-soft); } .mlsimport-task-health--ok { background: var(--success-soft); color: var(--success-deep); } .mlsimport-task-health--warning { background: var(--warning-soft); color: var(--warning-deep); } .mlsimport-task-health--error { background: var(--error-soft); color: var(--error-color); } /* Explanation line under the badge (progress, error, or last sync time). */ .mlsimport-task-health__message { margin: 6px 0 0; font-size: 12px; color: #9a9285; } /* ===== Tools tab (Sunny Bento) ===== admin.php?page=mlsimport_plugin_options&tab=administrative_options This tab predates the restyle: three of its six blocks carried hardcoded inline styles (#eee / padding 10px / radius 5px) and the other three carried none, so half the tab rendered as a grey card and half as bare text. Spacing lived in per-element margins and
    tags and drifted out of step. Two classes: .mlsimport_tool_block every block - shared width and vertical rhythm .mlsimport_tool_card adds the card surface, for ACTION tools only The two settings behind the single Save Changes button (logs, history) and the Cron Jobs guidance stay plain, so a card always means "this block acts on its own". Three gaps, by role - the same everywhere on the tab: TIGHT 8px a control under its own label, a hint under its control NORMAL 16px ordinary siblings HEADING 20px anything directly under a heading */ .mlsimport_tool_block{ margin: 0 0 20px 0; max-width: 800px; box-sizing: border-box; } /* Reset every child, then space them with one top margin, so a single rule owns the rhythm and no child can drift on its own. */ .mlsimport_tool_block > *{ margin: 0; } .mlsimport_tool_block > * + *{ margin-top: 16px; } .mlsimport_tool_block > h3 + *, .mlsimport_tool_block > h4 + *{ margin-top: 20px; } /* Buttons need the .wp-core-ui prefix to outrank core's `.wp-core-ui .button { margin: 0 }` (0,2,0), which otherwise flattens the gap under a heading. */ .wp-core-ui .mlsimport_tool_block > h3 + .button, .wp-core-ui .mlsimport_tool_block > h4 + .button, .wp-core-ui .mlsimport_tool_block > h3 + input[type="button"], .wp-core-ui .mlsimport_tool_block > h4 + input[type="button"]{ margin-top: 20px; } /* Same reason for the ordinary 16px step and the side-by-side button gap. */ .wp-core-ui .mlsimport_tool_block > * + .button, .wp-core-ui .mlsimport_tool_block > * + input[type="button"]{ margin-top: 16px; } .wp-core-ui .mlsimport_tool_block input[type="button"] + input[type="button"]{ margin-top: 16px; margin-left: 10px; } .mlsimport_tool_block > .mlsimport-label + select, .mlsimport_tool_block > select + .mlsimport-exp{ margin-top: 8px; } /* Card surface - action tools only. */ .mlsimport_tool_card{ background-color: var(--background-soft); border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 20px; } .mlsimport_tool_block h3, .mlsimport_tool_block h4{ font-weight: 600; color: var(--text-primary); line-height: 1.3; } .mlsimport_tool_block .mlsimport-label{ font-weight: 500; color: var(--text-primary); } .mlsimport_tool_block .mlsimport-exp{ color: var(--text-secondary); } /* One width for every field on this tab. Select Terms used to be capped at max-width:400px inline while Select Taxonomy above it inherited width:100%/max-width:100% and ran the full width of its container. */ .mlsimport_tool_block select.mlsimport-2025-select{ width: 100%; max-width: 100%; box-sizing: border-box; } .mlsimport_tool_block select[multiple]{ min-height: 120px; } /* Action buttons keep their content width and sit on one row. */ .mlsimport_tool_block input[type="button"] + input[type="button"]{ margin-left: 10px; } /* Delete progress bar, on the palette instead of wp-admin blue (#0073aa). The bar's own width stays inline: mlsimport-admin.js animates it. */ .mlsimport-delete-progress-track{ background: var(--background-white); border: 1px solid var(--border-color); border-radius: var(--radius-pill); overflow: hidden; height: 20px; margin-bottom: 8px; } #mlsimport-delete-progress-bar{ background: var(--accent-color); height: 100%; transition: width var(--transition-speed) ease; } /* ===== Field height parity (2025 controls) ===== A dropdown must be exactly as tall as a text input beside it. wp-admin core (load-styles.php) sets `select { line-height: 2.71429; min-height: 40px }`, which at 14px is a 38px line box; with our 5px padding and 1px border that rendered every .mlsimport-2025-select at 50px next to a 40px .mlsimport-2025-input. 40px is wp-admin's own control height, so the select is the one corrected. Multi-selects are excluded - they size to their rows. */ select.mlsimport-2025-select:not([multiple]){ height: 40px; min-height: 40px; padding-top: 0; padding-bottom: 0; } /* Save Changes on the Tools tab belongs to the two dropdowns above it, so it gets no gap of its own on top; the space goes underneath, before the next block. wp-admin's default .submit padding (1.5em 0) put air on both sides. */ form[name="cleanup_options"] p.submit{ margin: 0 0 20px 0; padding: 0; } /* Focus ring on the palette. wp-admin core (forms.css) focuses controls with admin blue - `select:focus { border-color: #2271b1; box-shadow: 0 0 0 1px #2271b1 }` - which clashes with the warm neutrals. Same visual weight as core's (1px border + 1px ring), so the focus affordance stays as obvious as it was; only the hue changes. */ /* The selectors below repeat the full base-rule specificity plus :focus. The base rule is `input[type=text].mlsimport-input.mlsimport-2025-input` (0,3,1), which outranks core's `input:focus` (0,1,1) - so until now a focused text field kept its resting border and showed NO focus state at all, core's included. A field being typed into has to look different from one that is not. */ input[type=text].mlsimport-input.mlsimport-2025-input:focus, input[type=password].mlsimport-input.mlsimport-2025-input:focus, .mlsimport-input.mlsimport-2025-input:focus, select.mlsimport-2025-select:focus, /* #mlsimport_mls_name_front sets border-color from an ID (1,0,0), which outranks the class selectors above (0,4,1). Without naming the ID here the MLS search box keeps its resting border and shows no focus state at all. */ #mlsimport_mls_name_front:focus{ border-color: var(--primary-color); /* An actual border, not a glow. Width stays 1px so the padding box does not shrink on focus and the text never jiggles; the contrast jump from the rgba(28,25,23,0.18) hairline to solid near-black carries the state on its own. Both controls are border-box, so the 40px height is unaffected. */ box-shadow: none; outline: none; } /* ===== One accent for every active state ===== The plugin screens were showing three different "active" colours at once: the dark resting hairline, the accent focus ring, and wp-admin/browser blue on the open dropdown's highlighted row. Everything that signals focus or selection now uses --accent-color; the neutral hairline stays neutral, because a resting border is not a state. Focus and selection are BLACK (--primary-color), matching hover, so a control never shows two different "active" colours. accent-color still fills checked checkboxes and radios - that is a checked state, not a focus state. The open