/* Admin Edit Customer */ .select2-container .select2-selection--multiple, .wp-admin .fulfillment-header .custom-control .select2-container .select2-selection--multiple { max-height: 50px; overflow: auto; } /* ============================================================================ * Customer edit screen: product/address selects * * These controls (#edit_customer .customer-product-select and the address * selects driven by Address::get_address_select()) previously rendered with * no styling of their own -- Select2's box/dropdown chrome was untouched * default CSS. * * Scoped to #edit_customer (the whole customer-edit screen, all tabs) rather * than every select2 in wp-admin, so this doesn't reach into other admin * screens that use the same library. * * Colors are pulled from WordPress's own admin color scheme custom properties * (--wp-admin-theme-color and friends, set by core per user-selected scheme -- * Default/Fresh, Light, Blue, Coffee, Ectoplasm, Midnight, Ocean, Sunrise) so * this follows whichever scheme the logged-in user has chosen rather than a * fixed color. The #0085ba fallback matches core's own Fresh/default scheme. * ============================================================================ */ /* ---- Select2 / selectWoo: product + address dropdowns -------------------- */ #edit_customer .select2-container--default .select2-selection--single { height: 38px; border: 1px solid #8c8f94; border-radius: 4px; transition: border-color .1s ease-in-out, box-shadow .1s ease-in-out; } #edit_customer .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 36px; padding-left: 12px; padding-right: 32px; color: #1d2327; } #edit_customer .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #757575; } #edit_customer .select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; width: 30px; right: 4px; } #edit_customer .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: #646970 transparent transparent transparent; } /* Focus ring matches core's own focused-input treatment */ #edit_customer .select2-container--default.select2-container--focus .select2-selection--single, #edit_customer .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--wp-admin-theme-color, #0085ba); box-shadow: 0 0 0 1px var(--wp-admin-theme-color, #0085ba); outline: 2px solid transparent; } #edit_customer .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent #646970 transparent; } /* Multi-select (never-send, etc. within this screen) gets the same box treatment */ #edit_customer .select2-container--default .select2-selection--multiple { border: 1px solid #8c8f94; border-radius: 4px; min-height: 38px; } #edit_customer .select2-container--default.select2-container--focus .select2-selection--multiple { border-color: var(--wp-admin-theme-color, #0085ba); box-shadow: 0 0 0 1px var(--wp-admin-theme-color, #0085ba); } #edit_customer .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: #f0f0f1; border: 1px solid #dcdcde; border-radius: 3px; color: #1d2327; padding: 2px 8px; } #edit_customer .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: #787c82; margin-right: 6px; } #edit_customer .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { color: #a02722; } /* Dropdown panel: a real card instead of the bare browser box. * * Select2/selectWoo append the open dropdown to by default (see * AttachBody.prototype in selectWoo.full.js: `dropdownParent` defaults to * $(document.body)), so it is NOT a descendant of #edit_customer at open * time -- #edit_customer-scoped rules never match it. Each selectWoo() call * for these selects instead sets `dropdownCssClass: 'sol-edit-customer-select-dropdown'` * (edit-customer.js), which selectWoo adds directly to the dropdown element * wherever it renders, so that class is the real scoping hook here. */ .sol-edit-customer-select-dropdown.select2-dropdown { border: 1px solid #8c8f94; border-radius: 4px; box-shadow: 0 4px 12px rgba(0, 0, 0, .12); } .sol-edit-customer-select-dropdown .select2-search--dropdown { padding: 8px; } .sol-edit-customer-select-dropdown .select2-search--dropdown .select2-search__field { border: 1px solid #8c8f94; border-radius: 4px; padding: 6px 8px; } .sol-edit-customer-select-dropdown .select2-search--dropdown .select2-search__field:focus { border-color: var(--wp-admin-theme-color, #0085ba); box-shadow: 0 0 0 1px var(--wp-admin-theme-color, #0085ba); outline: 2px solid transparent; } .sol-edit-customer-select-dropdown .select2-results__option { padding: 7px 12px; } /* Plain-text rows (address list has no custom template) still get a clean hover/hold. * * Verified empirically (jsdom + the real selectWoo.full.js from this install, * not just reading the source): the rendered .select2-dropdown element never * carries select2-container--default -- only select2-dropdown, the custom * dropdownCssClass, and its above/below positioning class. So the scoping * hook is .sol-edit-customer-select-dropdown alone; requiring * select2-container--default as a compound would never match anything. */ .sol-edit-customer-select-dropdown .select2-results__option--highlighted[aria-selected], .sol-edit-customer-select-dropdown .select2-results__option--highlighted[data-selected] { background-color: var(--wp-admin-theme-color, #0085ba); } .sol-edit-customer-select-dropdown .select2-results__option[aria-selected=true], .sol-edit-customer-select-dropdown .select2-results__option[data-selected=true] { background-color: #f0f6fc; color: #1d2327; } .sol-edit-customer-select-dropdown .select2-results__option[aria-disabled=true] { color: #a7aaad; } #products .delivery-container:nth-child(even) { background-color: initial; } #products .delivery-container .delete-fee { cursor: pointer; } #products .delivery-container .delete-fee.disabled { color: #ccc; pointer-events: none; cursor: not-allowed; } .order-table tr.kf-packing-box.is-custom { background-color: #a0e2b0 !important; } .order-table tr.kf-packing-box.is-sub { background-color: rgb(178,194,253) !important; } .order-table tr.kf-packing-box { cursor:pointer; } .wp-list-table #visibility.manage-column.column-visibility { width: 60px; } #sol_menu tbody tr[id^='row_'] td.focus { outline: 0px !important; } #sol_menu tbody tr[id^='row_'] td:nth-of-type(3) { color: blue; min-width:100px !important; width: 15% !important; white-space: nowrap; } .menu-email-order thead tr th { color: #000; font-weight: 700; text-decoration: underline; background-color: rgba(199, 191, 191, 0.5) } .menu-email-order tbody tr td { color: #000; font-weight: 450; } .menu-email-order tbody tr:nth-child(odd) { background-color: rgba(209, 149, 86, 0.5); } .menu-email-order tbody tr:nth-child(even) { background-color: white; } button.payment-actions.void { border-color: rgb(226, 156, 0); background-color: rgb(226, 156, 0); box-shadow: none; text-shadow: none; color: rgb(255, 255, 255); width: 75%; } button.payment-actions.delete { border-color: rgb(170, 0, 0); background-color: rgb(170, 0, 0); box-shadow: none; text-shadow: none; color: rgb(255, 255, 255); width: 75%; } button.payment-actions.refund { border-color: rgb(0, 103, 170); background-color: rgb(0, 103, 170); box-shadow: none; text-shadow: none; color: rgb(255, 255, 255); width: 75%; } button.payment-actions.declined { border-color: rgb(180, 178, 0); background-color: rgb(180, 178, 0); box-shadow: none; text-shadow: none; color: rgb(255, 255, 255); width: 75%; } input#update_customer.update-customer-info{ display:none; } input#cancel_customer.update-customer-info{ display:none; background-color:#FFFFFF; color:#007cba; } input#delete_customer.update-customer-info{ display:none; border-color:#aa0000; background-color:#aa0000; box-shadow:none; text-shadow:none; color:#fff; } /* DataTables */ .kf-admin-table tr:nth-child(even) { background: #F1F1F1 } .kf-admin-table tr:nth-child(odd) { background: #fff } #customers-table_info { margin-top: 10px; } .dataTables_wrapper .dataTables_paginate .paginate_button { box-sizing: border-box; display: inline-block; min-width: 1.5em; padding: 0.5em 1em; margin-left: 2px; text-align: center; text-decoration: none !important; cursor: pointer; *cursor: hand; color: #333 !important; border: 1px solid transparent; border-radius: 2px } .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { color: #333 !important; border: 1px solid #979797; background-color: white; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(100%, #dcdcdc)); background: -webkit-linear-gradient(top, #fff 0%, #dcdcdc 100%); background: -moz-linear-gradient(top, #fff 0%, #dcdcdc 100%); background: -ms-linear-gradient(top, #fff 0%, #dcdcdc 100%); background: -o-linear-gradient(top, #fff 0%, #dcdcdc 100%); background: linear-gradient(to bottom, #fff 0%, #dcdcdc 100%) } .dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active { cursor: default; color: #666 !important; border: 1px solid transparent; background: transparent; box-shadow: none } .dataTables_wrapper .dataTables_paginate .paginate_button:hover { color: white !important; border: 1px solid #111; background-color: #585858; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #585858), color-stop(100%, #111)); background: -webkit-linear-gradient(top, #585858 0%, #111 100%); background: -moz-linear-gradient(top, #585858 0%, #111 100%); background: -ms-linear-gradient(top, #585858 0%, #111 100%); background: -o-linear-gradient(top, #585858 0%, #111 100%); background: linear-gradient(to bottom, #585858 0%, #111 100%) } .dataTables_wrapper .dataTables_paginate .paginate_button:active { outline: none; background-color: #2b2b2b; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2b2b2b), color-stop(100%, #0c0c0c)); background: -webkit-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%); background: -moz-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%); background: -ms-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%); background: -o-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%); background: linear-gradient(to bottom, #2b2b2b 0%, #0c0c0c 100%); box-shadow: inset 0 0 3px #111 } table.dataTable th.focus, table.dataTable td.focus { outline: 0; outline-offset: 0; } .dataTables_wrapper .dataTables_paginate .ellipsis { padding: 0 1em } @media screen and (max-width: 767px) { .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate { float: none; text-align: center } .dataTables_wrapper .dataTables_paginate { margin-top: 0.5em } } @media screen and (max-width: 640px) { .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter { float: none; text-align: center } .dataTables_wrapper .dataTables_filter { margin-top: 0.5em } } /* For whatever reason, the daterangepicker defaults to display, rather than wait for click on the element it's attached to */ .daterangepicker {display:none;} /*Make datatable rows taller so that the table doesn't move when the editor inputs are opened (particularly the select dropdowns) */ #sol_menu tbody tr { height:50px; } #sol_menu tbody td { vertical-align: middle; } /* Fix KF Route buttons from "jumping" when clicked */ ul.subsubsub li button.button-primary:active { vertical-align: initial; } /* Make all the note input/select fields the same height */ [name*="add_note"] { height:38px; } /* Make search in select2/Woo respect its container width */ .select2-container .select2-dropdown .select2-search .select2-search__field { min-width: 0px; } /* Product search results: featured image thumbnail beside the product label */ .sol-product-result { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; } .sol-product-result__thumb { flex: 0 0 auto; width: 32px; height: 32px; object-fit: cover; border-radius: 3px; background-color: #f0f0f1; } .sol-product-result__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* Placeholder for a product or variation with no image of its own, so rows stay aligned. The icon is an inline SVG data URI rather than a dashicon: dashicons is only enqueued on the frontend by this plugin, and a data URI costs no request. */ .sol-product-result__thumb--empty, .sol-product-group__thumb--empty { display: inline-block; border: 1px dashed #dcdcde; background-color: #fbfbfc; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a7aaad' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.6'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 18px 18px; box-sizing: border-box; } /* The group thumb is smaller, so scale the icon to match */ .sol-product-group__thumb--empty { background-size: 14px 14px; } /* ---- Variable product headings ------------------------------------------- selectWoo renders a result with children into a with role="presentation" and no data-selected attribute, so it can never be hovered or selected. These rules make that structural fact visible: the row is a heading for the variations beneath it, not an option that happens to be dead. */ .select2-results__group { /* Tinted band with a rule underneath, so the group reads as a section header */ background-color: #f6f7f7; border-bottom: 1px solid #dcdcde; padding: 8px 6px 7px !important; margin-bottom: 2px; cursor: default; } .sol-product-group { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; } .sol-product-group__thumb { flex: 0 0 auto; /* Deliberately smaller than a selectable row's 32px thumb */ width: 24px; height: 24px; object-fit: cover; border-radius: 3px; background-color: #f0f0f1; opacity: 0.85; } .sol-product-group__text { display: flex; flex-direction: column; min-width: 0; } .sol-product-group__label { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #50575e; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sol-product-group__hint { font-size: 11px; font-weight: 400; font-style: italic; color: #787c82; white-space: nowrap; } .sol-product-group--empty { opacity: 0.55; } /* Indent the selectable variations so the hierarchy is unmistakable. Select2 only applies 1em, which the 32px thumbnail swamps. */ .select2-results__options .select2-results__option .select2-results__option { padding-left: 22px; } /* Badges sit right-aligned so values line up down the list */ .sol-product-badges { flex: 0 0 auto; display: flex; align-items: center; gap: 5px; margin-left: auto; } /* Filled like the stock badge so it stays legible against the dark blue hover */ .sol-product-cogs { flex: 0 0 auto; padding: 1px 7px; border-radius: 9px; font-size: 11px; line-height: 1.6; font-weight: 600; background-color: #eef1f6; color: #3c434a; white-space: nowrap; } .sol-product-cogs--inherited { font-style: italic; color: #646970; } .sol-product-stock { flex: 0 0 auto; padding: 1px 7px; border-radius: 9px; font-size: 11px; line-height: 1.6; font-weight: 600; white-space: nowrap; } .sol-product-stock--in-stock { background-color: #edfaef; color: #1c6b30; } .sol-product-stock--low-stock { background-color: #fcf4e4; color: #8a5700; } .sol-product-stock--out-of-stock { background-color: #fcebea; color: #a02722; } .sol-product-stock--on-backorder { background-color: #f0f0f1; color: #50575e; } .sol-product-expiration { flex: 0 0 auto; padding: 1px 7px; border-radius: 9px; font-size: 11px; line-height: 1.6; font-weight: 600; white-space: nowrap; } .sol-product-expiration--soon { background-color: #fcf4e4; color: #8a5700; } .sol-product-expiration--expired { background-color: #fcebea; color: #a02722; } .sol-product-expiration--awaiting { background-color: #f0f0f1; color: #50575e; } .sol-product-expiration--inherited { font-style: italic; } /* The expiration badge on a group heading sits after the "N options" hint */ .sol-product-group .sol-product-expiration { margin-left: 8px; } /* Select2's hover rule sets `color: #fff` on the whole row, which would otherwise inherit into the badges and wash them out against the dark blue highlight. These selectors match its specificity so the badges keep their own colors. */ .select2-container--default .select2-results__option--highlighted[aria-selected] .sol-product-cogs, .select2-container--default .select2-results__option--highlighted[data-selected] .sol-product-cogs, .select2-container--classic .select2-results__option--highlighted[aria-selected] .sol-product-cogs, .select2-container--classic .select2-results__option--highlighted[data-selected] .sol-product-cogs { background-color: #fff; color: #3c434a; } .select2-container--default .select2-results__option--highlighted[aria-selected] .sol-product-cogs--inherited, .select2-container--default .select2-results__option--highlighted[data-selected] .sol-product-cogs--inherited, .select2-container--classic .select2-results__option--highlighted[aria-selected] .sol-product-cogs--inherited, .select2-container--classic .select2-results__option--highlighted[data-selected] .sol-product-cogs--inherited { color: #646970; } /* Same guard for the stock badges: their tints are pale, so inheriting white text from the highlighted row would make them unreadable too. */ .select2-container--default .select2-results__option--highlighted[aria-selected] .sol-product-stock--in-stock, .select2-container--default .select2-results__option--highlighted[data-selected] .sol-product-stock--in-stock, .select2-container--classic .select2-results__option--highlighted[aria-selected] .sol-product-stock--in-stock, .select2-container--classic .select2-results__option--highlighted[data-selected] .sol-product-stock--in-stock { color: #1c6b30; } .select2-container--default .select2-results__option--highlighted[aria-selected] .sol-product-stock--low-stock, .select2-container--default .select2-results__option--highlighted[data-selected] .sol-product-stock--low-stock, .select2-container--classic .select2-results__option--highlighted[aria-selected] .sol-product-stock--low-stock, .select2-container--classic .select2-results__option--highlighted[data-selected] .sol-product-stock--low-stock { color: #8a5700; } .select2-container--default .select2-results__option--highlighted[aria-selected] .sol-product-stock--out-of-stock, .select2-container--default .select2-results__option--highlighted[data-selected] .sol-product-stock--out-of-stock, .select2-container--classic .select2-results__option--highlighted[aria-selected] .sol-product-stock--out-of-stock, .select2-container--classic .select2-results__option--highlighted[data-selected] .sol-product-stock--out-of-stock { color: #a02722; } .select2-container--default .select2-results__option--highlighted[aria-selected] .sol-product-stock--on-backorder, .select2-container--default .select2-results__option--highlighted[data-selected] .sol-product-stock--on-backorder, .select2-container--classic .select2-results__option--highlighted[aria-selected] .sol-product-stock--on-backorder, .select2-container--classic .select2-results__option--highlighted[data-selected] .sol-product-stock--on-backorder { color: #50575e; } /* Same guard for the expiration badge */ .select2-container--default .select2-results__option--highlighted[aria-selected] .sol-product-expiration--soon, .select2-container--default .select2-results__option--highlighted[data-selected] .sol-product-expiration--soon, .select2-container--classic .select2-results__option--highlighted[aria-selected] .sol-product-expiration--soon, .select2-container--classic .select2-results__option--highlighted[data-selected] .sol-product-expiration--soon { color: #8a5700; } .select2-container--default .select2-results__option--highlighted[aria-selected] .sol-product-expiration--expired, .select2-container--default .select2-results__option--highlighted[data-selected] .sol-product-expiration--expired, .select2-container--classic .select2-results__option--highlighted[aria-selected] .sol-product-expiration--expired, .select2-container--classic .select2-results__option--highlighted[data-selected] .sol-product-expiration--expired { color: #a02722; } .select2-container--default .select2-results__option--highlighted[aria-selected] .sol-product-expiration--awaiting, .select2-container--default .select2-results__option--highlighted[data-selected] .sol-product-expiration--awaiting, .select2-container--classic .select2-results__option--highlighted[aria-selected] .sol-product-expiration--awaiting, .select2-container--classic .select2-results__option--highlighted[data-selected] .sol-product-expiration--awaiting { color: #50575e; } /* Variation rows sit inside an optgroup, so keep their thumbs a touch smaller */ .select2-results__option .select2-results__options .sol-product-result__thumb { width: 26px; height: 26px; } #add_payment_form .form-row { margin: auto; } #add_payment_form .form-row input { margin: auto; } .form-header { display: flex; padding: 0 10px; background-color: #fff; border: 1px solid #ccd0d4; box-shadow: 0 1px 1px rgba(0, 0, 0, .04); } .form-header.tab-content { border-top: none; } .form-header .filter-container { display: flex; flex: 1; flex-wrap: wrap; } .form-header .actions-container { display: flex; align-items: center; } .form-header .actions-container button { margin-right: 10px; } .form-header .filter-control { padding: 5px 0 10px 0; margin-right: 20px; } .form-header .filter-control.checkbox { padding-top: 32px; } .form-header .filter-label { margin-bottom: 5px; } #charge_balances .date-range { width: 175px; } #charge_balances input[name="min_balance"], #charge_balances input[name="limit"] { width: 80px; } #charge_balances .form-header { margin-bottom: 20px; } #update_account_details .dashicons { cursor:pointer; } .filter-control .form-row select { margin: 0; padding: 0 24px 0 8px; } .edit-customer .fulfillment-header .filter-container { margin: 0 !important; padding: 10px 0 5px 0; border-top: none; } .fulfillment-header .product-control { flex: 1; min-width: 250px; /* Widened from 350px: search results now carry a thumbnail plus up to three badges (stock, COGS, expiration). selectWoo's dropdownAutoWidth mirrors the trigger's width, so a trigger too narrow for that content leaves the dropdown wider than the search box above it -- this keeps the two edges lined up. */ max-width: 480px; } .fulfillment-header .address-control { flex: 1; min-width: 350px; max-width: 400px; } .fulfillment-header .custom-control { max-width: 350px; } #TB_ajaxContent #add_payment_method .woocommerce-error { color: red; } #addresses .fulfillment-header .select2-container .select2-selection--single { margin: 0 !important; } #addresses .header-checkbox-container { display: flex; align-items: center; height: 100%; } #addresses .header-checkbox-container label { display: block; } .delivery-container .box-header { padding: 10px 0; } .delivery-container .box-header-parent { align-items: center; } .delivery-container .box-header-child { padding-bottom: 0; } #delivery_container_parent { min-width: 960px; } #edit_customer .account-details-wrapper { position: sticky; top: 32px; background-color:#f0f0f1; z-index: 100; } .cal_page_edit-customer #ui-datepicker-div { z-index: 101 !important; } #edit_customer .scroll-container { overflow-x: scroll; padding-bottom: 25em; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; } #edit_customer .scroll-container::-webkit-scrollbar { display: none; } #edit_customer #customer_orders .button:hover { background: inherit; border-color: inherit; } #edit_customer #customer_orders > table { min-width: 700px; } @media screen and (max-width: 600px) { #edit_customer .account-details-wrapper { top: 0px; padding-top: 10px; } } .ui-datepicker-inline.ui-datepicker { padding-bottom: 0.4em; } .ui-datepicker-inline.ui-datepicker .ui-datepicker-next span { left: 0; } .multidatespicker .ui-datepicker-inline .ui-datepicker-calendar td.ui-datepicker-current-day { background-color: transparent !important; } .multidatespicker .ui-datepicker-inline .ui-datepicker-calendar td.ui-datepicker-today:not(.ui-state-highlight) { background-color: rgba(0, 116, 210, 0.3) !important; } .multidatespicker .ui-datepicker-inline .ui-datepicker-calendar td.ui-state-highlight { background-color: rgba(0, 128, 0, 0.6) !important; } .multidatespicker .ui-datepicker-inline .ui-datepicker-calendar td.ui-datepicker-current-day a { color: inherit; } .multidatespicker .ui-datepicker-inline .ui-datepicker-calendar td.ui-state-highlight a { color: white; } .report-table, table.widefat.report-table { margin-bottom: 32px; border: 1px solid rgba(0, 0, 0, 0.1); } .report-table td { border-bottom: 1px solid #e2e4e7; } .report-table th { font-weight: bold; padding: 16px 10px; } .report-table tr:last-child td { border: none; } .report-table tr.sub-row td:first-child { padding-left: 3em; } .report-table tr.total-row td { font-weight: bold; } .report-grid { display: grid; grid-template-columns: repeat(3, 1fr); background-color: white; border-top: 1px solid rgba(0, 0, 0, 0.1); border-left: 1px solid rgba(0, 0, 0, 0.1); } .report-grid-item { border-bottom: 1px solid rgba(0, 0, 0, 0.1); border-right: 1px solid rgba(0, 0, 0, 0.1); } .report-grid-item-data { display: table; width: 100%; } .report-grid-item-data > div { display: table-row; } .report-grid-item-data > div > div { display: table-cell; } .report-grid-item-header { font-size: 14px; padding: 8px 10px 4px 10px; } .report-grid-item-values { font-size: 14px; font-weight: bold; } .report-grid-item-value-labels { color: #888; } .report-grid-item-value-labels > div { padding: 0 10px 8px 10px; } .report-grid-item-values div { padding: 4px 10px; } /* google map hover label for AdvancedMarkerElement */ .polygon-label { position: absolute; background: rgba(0, 0, 0, 0.7); color: white; padding: 5px 10px; border-radius: 5px; font-size: 14px; white-space: nowrap; display: none; /* Hidden by default */ pointer-events: none; } /* //fix menu hover with bright blue background */ #kf-standard-menu table.dataTable>tbody>tr>.selected{font-weight: 800;background-color:rgba(150, 190, 253, 0.5);color:black} #kf-standard-menu table.dataTable tbody tr.selected>*{box-shadow:inset 0 0 0 9999px rgba(150, 190, 253, 0.5) !important;color:rgb(0, 0, 0) !important;font-weight: 800;} /* make google map drawing buttong larger */ div[class="gmnoprint"] div button { padding: 20px !important; } /* Native responsive modal for Email Customer (replaces Thickbox for this form) */ .sol-modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); z-index: 100050; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; } body.sol-modal-open { overflow: hidden; } .sol-modal-dialog { background: #fff; width: min(800px, 92vw); max-width: 92vw; max-height: 90vh; border-radius: 4px; box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3); display: flex; flex-direction: column; overflow: hidden; } .sol-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; border-bottom: 1px solid #dcdcde; flex-shrink: 0; } .sol-modal-header h2 { margin: 0; font-size: 1.3em; } .sol-modal-close { background: none; border: none; font-size: 28px; line-height: 1; cursor: pointer; color: #646970; padding: 0 5px; } .sol-modal-close:hover { color: #135e96; } .sol-modal-body { padding: 20px; overflow-y: auto; box-sizing: border-box; } @media screen and (max-width: 767px) { .sol-modal-overlay { padding: 0; } .sol-modal-dialog { width: 100vw; max-width: 100vw; height: 100%; max-height: 100%; border-radius: 0; } #admin_email_customer_form textarea, #admin_email_customer_form input[type="text"], #admin_email_customer_form select { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } #admin_email_customer_form .form-table th, #admin_email_customer_form .form-table td { display: block; width: 100%; } #admin_email_customer_form .form-table th { padding-bottom: 4px; } #admin_email_customer_form .wp-editor-wrap, #admin_email_customer_form .wp-editor-container, #admin_email_customer_form .mce-tinymce { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } #admin_email_customer_form .mce-toolbar-grp .mce-container-body { flex-wrap: wrap !important; } #email_vendor_form textarea, #email_vendor_form input[type="text"], #email_vendor_form select { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } #email_vendor_form .form-table th, #email_vendor_form .form-table td { display: block; width: 100%; } #email_vendor_form .form-table th { padding-bottom: 4px; } #email_vendor_form .wp-editor-wrap, #email_vendor_form .wp-editor-container, #email_vendor_form .mce-tinymce { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } #email_vendor_form .mce-toolbar-grp .mce-container-body { flex-wrap: wrap !important; } } /* Page Journey modal */ .sol-modal-dialog-narrow { width: min(560px, 92vw); } .sol-journey-list { margin: 0; padding-left: 0; list-style: none; counter-reset: journey-step; } .sol-journey-list li { counter-increment: journey-step; position: relative; padding: 0 0 18px 34px; margin: 0; } .sol-journey-list li::before { content: counter(journey-step); position: absolute; left: 0; top: 0; width: 22px; height: 22px; line-height: 22px; text-align: center; font-size: 11px; font-weight: 600; color: #fff; background: #2271b1; border-radius: 50%; } .sol-journey-list li::after { content: ''; position: absolute; left: 10px; top: 24px; bottom: -2px; width: 2px; background: #dcdcde; } .sol-journey-list li:last-child::after { display: none; } .sol-journey-list li:last-child::before { background: #2d5016; } .sol-journey-list a { display: inline-block; word-break: break-all; line-height: 1.4; } /* Styling for admin email result messages */ .admin-email-result-message { padding: 10px 12px; border-radius: 3px; display: none; } .admin-email-result-message.success { display: block; background-color: #c6e1b6; border: 1px solid #7ad03d; color: #2d5016; } .admin-email-result-message.error { display: block; background-color: #ffebe8; border: 1px solid #c00; color: #810000; } /* ========================================================================== Edit Customer — responsive The screen was authored desktop-only. Several fixed-width rules live in css/sol.css (loaded on the frontend too), so they are overridden here by ID-scoping under #edit_customer, which out-specifies the class selectors there. 782px matches WordPress's own admin breakpoint, so our layout switches at the same width WP collapses its admin menu. ========================================================================== */ @media screen and (max-width: 782px) { /* --- Summary bar ---------------------------------------------------- Overrides the 5-col grid at sol.css:101, which forces the email and phone cells to overlap once the viewport can't afford 5 tracks. */ #edit_customer .account-details-wrapper { top: 0; padding-top: 10px; } #edit_customer .flex-parent { grid-template-columns: 1fr 1fr; gap: 6px 12px; } /* flex-wrap matters here: the name cell holds an
plus two edit inputs that EDIT reveals — without wrapping they'd share one line. */ #edit_customer .flex-child { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; text-align: left; min-width: 0; /* lets the cell shrink below its content width */ overflow-wrap: anywhere; } #edit_customer .flex-child .dashicons { flex: 0 0 auto; color: #646970; font-size: 18px; width: 18px; height: 18px; } #edit_customer .flex-child h3.edit-account-details { margin: 0; font-size: 14px; line-height: 1.3; min-width: 0; overflow-wrap: anywhere; } #edit_customer .flex-child a.sol-open-modal { min-width: 0; overflow-wrap: anywhere; } /* Button cell spans the full row; EDIT gets a proper touch target. */ #edit_customer .flex-child:last-child { grid-column: 1 / -1; display: block; } #edit_customer .flex-child:last-child br { display: none; } #edit_customer input#update-customer-info { display: block; width: 100%; min-height: 44px; margin-top: 4px; } /* Inline edit fields (revealed by EDIT) stack full-width. 16px font-size stops iOS Safari zooming in on focus. */ #edit_customer .flex-child input.update-customer-info { width: 100%; max-width: 100%; box-sizing: border-box; font-size: 16px; min-height: 40px; margin: 3px 0; } /* --- Tab strip ------------------------------------------------------ 11 tabs wrap to 3 rows at this width. Collapse to one scrolling row. */ #edit_customer .nav-tab-wrapper { display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; padding-bottom: 2px; margin: 0; } #edit_customer .nav-tab-wrapper .nav-tab { flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start; padding: 8px 14px; font-size: 13px; margin: 0 4px 0 0; } /* Keep the horizontal overflow discoverable. */ #edit_customer .nav-tab-wrapper::-webkit-scrollbar { height: 4px; } #edit_customer .nav-tab-wrapper::-webkit-scrollbar-thumb { background: #c3c4c7; border-radius: 2px; } /* --- Order list container ------------------------------------------- admin.css:481 pins this to 960px inside .scroll-container, whose scrollbar is hidden — content was cut off with no way to know. */ #edit_customer #delivery_container_parent { min-width: 0; } #edit_customer .scroll-container { overflow-x: auto; padding-bottom: 4em; /* 25em of dead space is huge on a phone */ -ms-overflow-style: auto; scrollbar-width: thin; } #edit_customer .scroll-container::-webkit-scrollbar { display: block; height: 6px; } #edit_customer .scroll-container::-webkit-scrollbar-thumb { background: #c3c4c7; border-radius: 3px; } /* --- Filter row (Search Products / address / date) ------------------- Overrides the 250px + 350px min-widths at admin.css:437-447. */ #edit_customer .fulfillment-header .filter-container { flex-direction: column; align-items: stretch; margin-right: 0 !important; } #edit_customer .fulfillment-header .filter-control { width: 100%; margin-bottom: 8px; } #edit_customer .fulfillment-header .product-control, #edit_customer .fulfillment-header .address-control, #edit_customer .fulfillment-header .custom-control { min-width: 0; max-width: none; } /* select2/selectWoo writes inline pixel widths, so !important is needed. */ #edit_customer .fulfillment-header .select2-container { width: 100% !important; } #edit_customer .fulfillment-header .select2-container .select2-selection--single { min-height: 40px; display: flex; align-items: center; } /* Inline height:38px on this input (LegacyCustomer.php:1423) beats a min-height, so set height directly to reach a 40px touch target. */ #edit_customer .fulfillment-header input#delivery_date { width: 100%; box-sizing: border-box; height: 40px !important; font-size: 16px; } /* --- Order card header ---------------------------------------------- Overrides the 5-col grid at sol.css:1800 and its 6-col :has() variant at sol.css:1811, which clip the delivery address. */ #edit_customer .order-header, #edit_customer .order-header:has(> :nth-child(6)) { grid-template-columns: 1fr; gap: 8px; padding: 12px; text-align: left; } #edit_customer .order-header-name, #edit_customer .order-header-address, #edit_customer .order-header-total, #edit_customer .order-header-region { font-size: 1em; } /* Name and address read first; controls sit together below. */ #edit_customer .order-header-name { order: 1; } #edit_customer .order-header-address { order: 2; } #edit_customer .order-header-total { order: 3; } #edit_customer .order-header-date { order: 4; } #edit_customer .order-header-actions { order: 5; } #edit_customer .order-header-date input.date-picker { width: 100%; box-sizing: border-box; min-height: 40px; font-size: 16px; } /* Hover-reveal map is unreachable on touch. */ #edit_customer .order-header-address .hover_map_container { display: none !important; } /* --- Line-item table ------------------------------------------------- Kept as a real table (JS reads these inputs by class); each card scrolls on its own so column alignment survives. */ #edit_customer .delivery-container { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } #edit_customer .delivery-container::-webkit-scrollbar { height: 6px; } #edit_customer .delivery-container::-webkit-scrollbar-thumb { background: #c3c4c7; border-radius: 3px; } #edit_customer table.customer_products { min-width: 640px; } /* 16px prevents iOS Safari auto-zoom when these are focused. */ #edit_customer table.customer_products input.kf_qty, #edit_customer table.customer_products input.kf_price, #edit_customer table.customer_products input.kf_discount, #edit_customer table.customer_products input.kf_expires, #edit_customer table.customer_products input.kf_delivery_date, #edit_customer table.customer_products select.kf_frequency { font-size: 16px; min-height: 36px; } /* Row action icons become tappable. */ #edit_customer table.customer_products td .dashicons { font-size: 22px; width: 32px; height: 32px; line-height: 32px; text-align: center; } /* --- Totals footer --------------------------------------------------- .box-header-parent is row-nowrap (sol.css:879); with 6 children the fees/shipping labels crush together. Wrap them 2-up instead. */ #edit_customer .box-header-parent { flex-flow: row wrap; justify-content: flex-start !important; gap: 10px 12px; } /* Children carry inline word-wrap:unset (Order.php:516+), a legacy alias of overflow-wrap — so !important is required to let labels such as "Delivery Fee - Oak Harbor" wrap instead of forcing the row wider. */ #edit_customer .box-header-child { flex: 1 1 45%; min-width: 0; padding-left: 0; padding-right: 0; overflow-wrap: anywhere !important; } #edit_customer .box-header-child p { margin: 2px 0 0; } } /* Tightest tier — single-column summary bar. */ @media screen and (max-width: 480px) { #edit_customer .flex-parent { grid-template-columns: 1fr; } #edit_customer .box-header-child { flex-basis: 100%; } }