| 1 |
/** |
| 2 |
* WP EasyCart Admin V2 - Modern Table Styles |
| 3 |
* All selectors namespaced under .ecv2-* to avoid conflicts. |
| 4 |
* @since 5.x.x |
| 5 |
*/ |
| 6 |
|
| 7 |
:root { |
| 8 |
--ecv2-primary: #22c55e; --ecv2-primary-hover: #16a34a; --ecv2-primary-light: rgba(34,197,94,0.1); |
| 9 |
--ecv2-danger: #ef4444; --ecv2-danger-hover: #dc2626; --ecv2-danger-light: rgba(239,68,68,0.1); |
| 10 |
--ecv2-amber: #f59e0b; --ecv2-amber-light: rgba(245,158,11,0.1); |
| 11 |
--ecv2-blue: #3b82f6; --ecv2-blue-light: rgba(59,130,246,0.1); |
| 12 |
--ecv2-g50: #f9fafb; --ecv2-g100: #f3f4f6; --ecv2-g200: #e5e7eb; --ecv2-g300: #d1d5db; |
| 13 |
--ecv2-g400: #9ca3af; --ecv2-g500: #6b7280; --ecv2-g600: #4b5563; --ecv2-g700: #374151; |
| 14 |
--ecv2-g800: #1f2937; --ecv2-g900: #111827; |
| 15 |
--ecv2-r: 8px; --ecv2-rs: 4px; --ecv2-rl: 12px; |
| 16 |
--ecv2-sh: 0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.06); |
| 17 |
--ecv2-shlg: 0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05); |
| 18 |
--ecv2-tr: 150ms ease; |
| 19 |
} |
| 20 |
.ecv2-wrap { container-type:inline-size; container-name:ecv2; max-width:100%; padding:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; color:var(--ecv2-g800); } |
| 21 |
.ecv2-wrap *, .ecv2-wrap *::before, .ecv2-wrap *::after { box-sizing:border-box; } |
| 22 |
|
| 23 |
/* Page Header */ |
| 24 |
.ecv2-page-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:20px; padding:10px; border-bottom:1px solid var(--ecv2-g200); background:white; } |
| 25 |
.ecv2-page-header-left { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; } |
| 26 |
.ecv2-page-title { font-size:22px; font-weight:600; margin:0; padding:0; line-height:1.3; color:var(--ecv2-g900); } |
| 27 |
.ecv2-page-title .dashicons { font-size:22px; width:22px; height:22px; vertical-align:middle; margin-right:4px; } |
| 28 |
.ecv2-record-count { font-size:13px; color:var(--ecv2-g500); background:var(--ecv2-g100); padding:2px 10px; border-radius:12px; } |
| 29 |
.ecv2-page-header-right { display:flex; align-items:center; gap:8px; flex-wrap:wrap; } |
| 30 |
.ecv2-keyboard-hint { font-size:12px; color:var(--ecv2-g400); display:flex; align-items:center; gap:4px; } |
| 31 |
.ecv2-keyboard-hint .dashicons { font-size:14px; width:14px; height:14px; } |
| 32 |
|
| 33 |
/* Buttons */ |
| 34 |
.ecv2-btn { display:inline-flex; align-items:center; gap:4px; padding:8px 16px; border:1px solid var(--ecv2-g300); border-radius:var(--ecv2-r); background:#fff; color:var(--ecv2-g700); font-size:13px !important; font-weight:500; cursor:pointer; transition:all var(--ecv2-tr); text-decoration:none; line-height:1.4; white-space:nowrap; } |
| 35 |
.ecv2-btn:hover { background:var(--ecv2-g50); border-color:var(--ecv2-g400); color:var(--ecv2-g800); text-decoration:none; } |
| 36 |
.ecv2-btn .dashicons { font-size:16px; width:16px; height:16px; line-height:16px; } |
| 37 |
.ecv2-btn-sm { padding:5px 10px; font-size:12px; } |
| 38 |
.ecv2-btn-primary { background:var(--ecv2-primary); border-color:var(--ecv2-primary); color:#fff; } |
| 39 |
.ecv2-btn-primary:hover { background:var(--ecv2-primary-hover); border-color:var(--ecv2-primary-hover); color:#fff; } |
| 40 |
.ecv2-btn-ghost { background:transparent; border-color:transparent; } |
| 41 |
.ecv2-btn-ghost:hover { background:var(--ecv2-g100); border-color:transparent; } |
| 42 |
.ecv2-btn-danger { background:var(--ecv2-danger); border-color:var(--ecv2-danger); color:#fff; } |
| 43 |
.ecv2-btn-danger:hover { background:var(--ecv2-danger-hover); border-color:var(--ecv2-danger-hover); color:#fff; } |
| 44 |
|
| 45 |
/* Inline SVG icon wrapper — sizes match dashicons (16px) for alignment parity */ |
| 46 |
.ecv2-icon { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; vertical-align:middle; } |
| 47 |
.ecv2-icon svg { width:100%; height:100%; display:block; } |
| 48 |
|
| 49 |
/* Vimeo mark — inherits color from the button text for ghost-button consistency */ |
| 50 |
.ecv2-icon-vimeo { color:var(--ecv2-g700); } |
| 51 |
.ecv2-btn:hover .ecv2-icon-vimeo, |
| 52 |
.ecv2-btn:focus .ecv2-icon-vimeo { color:var(--ecv2-primary); } |
| 53 |
|
| 54 |
/* Health Dashboard */ |
| 55 |
.ecv2-health-dashboard { display:flex; gap:12px; margin-bottom:20px; overflow-x:auto; padding-bottom:4px; } |
| 56 |
.ecv2-stat-card { flex:1; min-width:100px; padding:14px 16px; background:#fff; border:1px solid var(--ecv2-g200); border-radius:var(--ecv2-r); cursor:pointer; transition:all var(--ecv2-tr); text-align:center; } |
| 57 |
.ecv2-stat-card:hover { border-color:var(--ecv2-primary); box-shadow:var(--ecv2-sh); } |
| 58 |
.ecv2-stat-active { border-color:var(--ecv2-primary); background:var(--ecv2-primary-light); } |
| 59 |
.ecv2-stat-value { font-size:24px; font-weight:700; line-height:1; margin-bottom:4px; } |
| 60 |
.ecv2-stat-label { font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--ecv2-g500); font-weight:500; } |
| 61 |
.ecv2-stat-green .ecv2-stat-value { color:var(--ecv2-primary); } |
| 62 |
.ecv2-stat-red .ecv2-stat-value { color:var(--ecv2-danger); } |
| 63 |
.ecv2-stat-amber .ecv2-stat-value { color:var(--ecv2-amber); } |
| 64 |
.ecv2-stat-gray .ecv2-stat-value { color:var(--ecv2-g400); } |
| 65 |
.ecv2-stat-default .ecv2-stat-value { color:var(--ecv2-g800); } |
| 66 |
|
| 67 |
/* Stat card loading states */ |
| 68 |
.ecv2-stat-loading-dim { opacity:.4; pointer-events:none; } |
| 69 |
.ecv2-stat-loading { pointer-events:none; } |
| 70 |
.ecv2-stat-spinner { font-size:20px !important; width:20px !important; height:20px !important; color:var(--ecv2-g400); vertical-align:middle; } |
| 71 |
|
| 72 |
/* Stat card visibility toggle */ |
| 73 |
.ecv2-stat-toggle-bar { display:flex; align-items:center; gap:8px; margin-bottom:6px; } |
| 74 |
.ecv2-stat-toggle-btn { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border:1px solid var(--ecv2-g200); border-radius:var(--ecv2-r); background:#fff; cursor:pointer; color:var(--ecv2-g400); transition:all var(--ecv2-tr); padding:0; flex-shrink:0; } |
| 75 |
.ecv2-stat-toggle-btn:hover { border-color:var(--ecv2-primary); color:var(--ecv2-primary); } |
| 76 |
.ecv2-stat-toggle-btn[aria-expanded="true"] { border-color:var(--ecv2-primary); color:var(--ecv2-primary); background:var(--ecv2-primary-light); } |
| 77 |
.ecv2-stat-toggle-btn .dashicons { font-size:16px; width:16px; height:16px; line-height:16px; } |
| 78 |
.ecv2-stat-toggle-panel { display:none; align-items:center; gap:2px; flex-wrap:wrap; } |
| 79 |
.ecv2-stat-toggle-panel.ecv2-stat-toggle-open { display:flex; } |
| 80 |
.ecv2-stat-toggle-item { display:inline-flex; align-items:center; gap:4px; font-size:12px; color:var(--ecv2-g600); cursor:pointer; padding:3px 8px; border-radius:4px; white-space:nowrap; transition:background var(--ecv2-tr); user-select:none; } |
| 81 |
.ecv2-stat-toggle-item:hover { background:var(--ecv2-g50,#f9fafb); } |
| 82 |
.ecv2-stat-toggle-item span { line-height:1; } |
| 83 |
.ecv2-stat-toggle-hide-all { font-weight:600; color:var(--ecv2-g500); } |
| 84 |
.ecv2-stat-toggle-sep { display:inline-block; width:1px; height:16px; background:var(--ecv2-g200); margin:0 4px; flex-shrink:0; } |
| 85 |
.ecv2-stat-toggle-cb { width:14px; height:14px; margin:0; cursor:pointer; accent-color:var(--ecv2-primary); flex-shrink:0; } |
| 86 |
.ecv2-stat-toggle-cb:disabled { opacity:.4; cursor:not-allowed; } |
| 87 |
|
| 88 |
/* Hidden stat card */ |
| 89 |
.ecv2-stat-hidden { display:none !important; } |
| 90 |
.ecv2-stats-all-hidden { display:none !important; } |
| 91 |
|
| 92 |
/* Toolbar */ |
| 93 |
.ecv2-toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; flex-wrap:wrap; } |
| 94 |
.ecv2-toolbar-left, .ecv2-toolbar-right { display:flex; align-items:center; gap:8px; flex-wrap:wrap; } |
| 95 |
.ecv2-bulk-actions { display:flex; align-items:center; gap:6px; } |
| 96 |
.ecv2-bulk-count { font-size:12px; font-weight:600; color:var(--ecv2-primary); background:var(--ecv2-primary-light); padding:3px 10px; border-radius:12px; } |
| 97 |
|
| 98 |
/* Bulk action validation highlight */ |
| 99 |
@keyframes ecv2-shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-4px)} 40%{transform:translateX(4px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(2px)} } |
| 100 |
.ecv2-bulk-highlight { border-color:var(--ecv2-danger) !important; box-shadow:0 0 0 2px var(--ecv2-danger-light) !important; animation:ecv2-shake .4s ease; } |
| 101 |
|
| 102 |
/* ========== Bulk Edit Square Warning ========== */ |
| 103 |
.ecv2-bulk-notice { display:flex; align-items:flex-start; gap:8px; padding:10px 12px; border-radius:var(--ecv2-rs); font-size:13px; line-height:1.4; margin:0 0 14px; } |
| 104 |
.ecv2-bulk-notice .dashicons { font-size:16px; width:16px; height:16px; flex-shrink:0; margin-top:1px; } |
| 105 |
.ecv2-bulk-notice-square { background:#fff7e6; border:1px solid #ffd591; color:#874d00; } |
| 106 |
.ecv2-bulk-notice-square .dashicons { color:#FC0; } |
| 107 |
|
| 108 |
/* Locked field in bulk edit modal (Square-managed) */ |
| 109 |
.ecv2-modal-field-locked { opacity:.55; pointer-events:none; } |
| 110 |
.ecv2-modal-field-locked .ecv2-modal-label { color:var(--ecv2-g500); } |
| 111 |
.ecv2-modal-field-lock-note { display:inline-flex; align-items:center; gap:3px; font-size:11px; font-weight:500; color:#874d00; background:#fff7e6; border:1px solid #ffd591; padding:1px 6px; border-radius:10px; margin-left:6px; vertical-align:middle; } |
| 112 |
.ecv2-modal-field-lock-note .dashicons { font-size:11px; width:11px; height:11px; color:#FC0; } |
| 113 |
|
| 114 |
/* Select / Input */ |
| 115 |
.ecv2-select { padding:7px 32px 7px 12px !important; border:1px solid var(--ecv2-g200); border-radius:var(--ecv2-r) !important; background:#fff !important; font-size:13px !important; font-weight:500; color:var(--ecv2-g700) !important; cursor:pointer !important; max-width:200px !important; -webkit-appearance:none !important; -moz-appearance:none !important; appearance:none !important; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M3 4.5L6 8l3-3.5'/%3E%3C/svg%3E") !important; background-repeat:no-repeat !important; background-position:right 10px center !important; background-size:12px !important; transition:border-color var(--ecv2-tr), box-shadow var(--ecv2-tr); line-height:1.4 !important; } |
| 116 |
.ecv2-select:hover { border-color:var(--ecv2-g300); } |
| 117 |
.ecv2-select-sm { padding:5px 28px 5px 10px; font-size:12px; background-position:right 8px center; } |
| 118 |
.ecv2-input { padding:7px 12px; border:1px solid var(--ecv2-g200); border-radius:var(--ecv2-r); background:#fff; font-size:13px; color:var(--ecv2-g700); width:100%; transition:border-color var(--ecv2-tr), box-shadow var(--ecv2-tr); line-height:1.4; } |
| 119 |
.ecv2-input-sm { padding:5px 10px; font-size:12px; } |
| 120 |
.ecv2-input:focus, .ecv2-select:focus { outline:none; border-color:var(--ecv2-primary); box-shadow:0 0 0 2px var(--ecv2-primary-light); } |
| 121 |
|
| 122 |
/* Search */ |
| 123 |
.ecv2-search { position:relative; display:inline-flex; align-items:center; } |
| 124 |
.ecv2-search input { padding:7px 68px 7px 12px; border:1px solid var(--ecv2-g200); border-radius:var(--ecv2-r); font-size:13px; width:240px; background:#fff; transition:border-color var(--ecv2-tr), box-shadow var(--ecv2-tr); } |
| 125 |
.ecv2-search input:focus { outline:none; border-color:var(--ecv2-primary); box-shadow:0 0 0 2px var(--ecv2-primary-light); } |
| 126 |
/* Hide native browser clear button on search inputs */ |
| 127 |
.ecv2-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance:none; appearance:none; } |
| 128 |
|
| 129 |
.ecv2-search-clear { position:absolute; right:34px; top:50%; transform:translateY(-50%); border:none; background:none; padding:0; cursor:pointer; color:var(--ecv2-g400); line-height:1; display:flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; transition:all var(--ecv2-tr); } |
| 130 |
.ecv2-search-clear:hover { color:var(--ecv2-g700); background:var(--ecv2-g100); } |
| 131 |
.ecv2-search-clear .dashicons { font-size:16px; width:16px; height:16px; } |
| 132 |
|
| 133 |
.ecv2-search-submit { position:absolute; right:1px; top:1px; bottom:1px; width:32px; border:none; background:var(--ecv2-g50); border-left:1px solid var(--ecv2-g200); border-radius:0 calc(var(--ecv2-r) - 1px) calc(var(--ecv2-r) - 1px) 0; cursor:pointer; color:var(--ecv2-g500); display:flex; align-items:center; justify-content:center; transition:all var(--ecv2-tr); } |
| 134 |
.ecv2-search-submit:hover { background:var(--ecv2-primary); color:#fff; } |
| 135 |
.ecv2-search-submit .dashicons { font-size:16px; width:16px; height:16px; } |
| 136 |
|
| 137 |
.ecv2-search-loading { position:absolute; right:36px; top:50%; transform:translateY(-50%); color:var(--ecv2-g400); line-height:1; display:flex; align-items:center; justify-content:center; } |
| 138 |
.ecv2-search-loading .dashicons { font-size:14px; width:14px; height:14px; } |
| 139 |
.ecv2-search-loading-state { color:var(--ecv2-g400) !important; background:var(--ecv2-g50) !important; } |
| 140 |
|
| 141 |
/* View toggle */ |
| 142 |
.ecv2-view-toggle { display:flex; border:1px solid var(--ecv2-g300); border-radius:var(--ecv2-r); overflow:hidden; } |
| 143 |
.ecv2-view-btn { padding:6px 10px; border:none; background:#fff; cursor:pointer; color:var(--ecv2-g500); transition:all var(--ecv2-tr); display:flex; align-items:center; } |
| 144 |
.ecv2-view-btn:not(:last-child) { border-right:1px solid var(--ecv2-g300); } |
| 145 |
.ecv2-view-btn:hover { background:var(--ecv2-g50); color:var(--ecv2-g700); } |
| 146 |
.ecv2-view-btn-active { background:var(--ecv2-primary-light); color:var(--ecv2-primary); } |
| 147 |
.ecv2-view-btn .dashicons { font-size:18px; width:18px; height:18px; } |
| 148 |
.ecv2-filter-badge { background:var(--ecv2-primary); color:#fff; font-size:10px; font-weight:700; padding:1px 6px; border-radius:10px; margin-left:2px; } |
| 149 |
|
| 150 |
/* Filter Panel → Slide-out Drawer */ |
| 151 |
.ecv2-drawer-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.35); z-index:99999; transition:opacity 0.25s ease; opacity:0; } |
| 152 |
.ecv2-drawer-backdrop.ecv2-drawer-open { display:block; opacity:1; } |
| 153 |
|
| 154 |
.ecv2-filter-drawer { position:fixed; top:0; left:0; bottom:0; width:360px; max-width:90vw; background:#fff; z-index:100000; box-shadow:8px 0 30px rgba(0,0,0,.15); transform:translateX(-100%); transition:transform 0.3s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column; } |
| 155 |
.ecv2-filter-drawer.ecv2-drawer-open { transform:translateX(0); } |
| 156 |
|
| 157 |
.ecv2-drawer-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--ecv2-g200); flex-shrink:0; background:var(--ecv2-g50); } |
| 158 |
.ecv2-drawer-header-left { display:flex; align-items:center; gap:10px; } |
| 159 |
.ecv2-drawer-header-icon { font-size:18px; width:18px; height:18px; color:var(--ecv2-primary); } |
| 160 |
.ecv2-drawer-title { font-size:16px; font-weight:600; margin:0; padding:0; color:var(--ecv2-g900); line-height:1; } |
| 161 |
.ecv2-drawer-active-badge { font-size:11px; font-weight:600; background:var(--ecv2-primary); color:#fff; padding:2px 8px; border-radius:10px; line-height:1.3; } |
| 162 |
.ecv2-drawer-close { background:none; border:none; cursor:pointer; padding:4px; border-radius:var(--ecv2-rs); color:var(--ecv2-g400); transition:all var(--ecv2-tr); display:flex; align-items:center; justify-content:center; } |
| 163 |
.ecv2-drawer-close:hover { background:var(--ecv2-g100); color:var(--ecv2-g700); } |
| 164 |
.ecv2-drawer-close .dashicons { font-size:20px; width:20px; height:20px; } |
| 165 |
|
| 166 |
.ecv2-drawer-body { flex:1; overflow-y:auto; padding:8px 0; } |
| 167 |
|
| 168 |
.ecv2-drawer-filter-group { padding:14px 20px; border-bottom:1px solid var(--ecv2-g100); transition:background var(--ecv2-tr); } |
| 169 |
.ecv2-drawer-filter-group:last-child { border-bottom:none; } |
| 170 |
.ecv2-drawer-filter-group-active { background:rgba(34,197,94,.03); } |
| 171 |
.ecv2-drawer-filter-label { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; } |
| 172 |
.ecv2-drawer-filter-label > span { font-size:11px; text-transform:uppercase; letter-spacing:.7px; color:var(--ecv2-g500); font-weight:700; } |
| 173 |
.ecv2-drawer-filter-clear { background:none; border:none; cursor:pointer; padding:0; color:var(--ecv2-g400); transition:color var(--ecv2-tr); display:flex; align-items:center; } |
| 174 |
.ecv2-drawer-filter-clear:hover { color:var(--ecv2-danger); } |
| 175 |
.ecv2-drawer-filter-clear .dashicons { font-size:14px; width:14px; height:14px; } |
| 176 |
|
| 177 |
/* Drawer pills */ |
| 178 |
.ecv2-drawer-pills { display:flex; flex-wrap:wrap; gap:6px; } |
| 179 |
.ecv2-drawer-pill { display:inline-flex; align-items:center; gap:4px; padding:6px 14px; border:1px solid var(--ecv2-g200); border-radius:20px; background:#fff; font-size:12px; color:var(--ecv2-g600); cursor:pointer; transition:all var(--ecv2-tr); line-height:1.3; } |
| 180 |
.ecv2-drawer-pill:hover { border-color:var(--ecv2-primary); color:var(--ecv2-primary); background:var(--ecv2-primary-light); } |
| 181 |
.ecv2-drawer-pill .dashicons { font-size:13px; width:13px; height:13px; line-height:13px; } |
| 182 |
.ecv2-drawer-pill-active { background:var(--ecv2-primary); border-color:var(--ecv2-primary); color:#fff; } |
| 183 |
.ecv2-drawer-pill-active:hover { background:var(--ecv2-primary-hover); border-color:var(--ecv2-primary-hover); color:#fff; } |
| 184 |
.ecv2-drawer-pill-active .dashicons { color:#fff; } |
| 185 |
|
| 186 |
/* Drawer select (isolated from v1 select2 global styles) */ |
| 187 |
.ecv2-drawer-select-wrap { position:relative; } |
| 188 |
.ecv2-drawer-select-wrap .select2-container { width:100% !important; float:none !important; min-width:0 !important; margin:0 !important; } |
| 189 |
.ecv2-drawer-select-wrap .select2-container--default .select2-selection--single { height:38px; border:1px solid var(--ecv2-g300); border-radius:var(--ecv2-r); background:#fff; } |
| 190 |
.ecv2-drawer-select-wrap .select2-container--default .select2-selection--single .select2-selection__rendered { line-height:38px; padding-left:12px; font-size:13px; color:var(--ecv2-g700); } |
| 191 |
.ecv2-drawer-select-wrap .select2-container--default .select2-selection--single .select2-selection__arrow { height:38px; right:6px; } |
| 192 |
.ecv2-drawer-select-wrap .select2-container--default.select2-container--focus .select2-selection--single { border-color:var(--ecv2-primary); box-shadow:0 0 0 2px var(--ecv2-primary-light); } |
| 193 |
.ecv2-drawer-select { width:100%; } |
| 194 |
|
| 195 |
/* Drawer range inputs */ |
| 196 |
.ecv2-filter-drawer .select2-container--open .select2-dropdown { z-index:100001; } |
| 197 |
.ecv2-drawer-range { display:flex; align-items:flex-end; gap:8px; } |
| 198 |
.ecv2-drawer-range-field { flex:1; } |
| 199 |
.ecv2-drawer-range-label { display:block; font-size:11px; color:var(--ecv2-g400); margin-bottom:4px; font-weight:500; } |
| 200 |
.ecv2-drawer-range-input { width:100%; padding:7px 10px; border:1px solid var(--ecv2-g300); border-radius:var(--ecv2-r); font-size:13px; background:#fff; color:var(--ecv2-g700); box-sizing:border-box; } |
| 201 |
.ecv2-drawer-range-input:focus { outline:none; border-color:var(--ecv2-primary); box-shadow:0 0 0 2px var(--ecv2-primary-light); } |
| 202 |
.ecv2-drawer-range-input::placeholder { color:var(--ecv2-g300); } |
| 203 |
.ecv2-drawer-range-sep { color:var(--ecv2-g400); font-size:16px; font-weight:300; padding-bottom:8px; } |
| 204 |
.ecv2-drawer-range-apply { flex-shrink:0; } |
| 205 |
|
| 206 |
/* Drawer footer */ |
| 207 |
.ecv2-drawer-footer { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; border-top:1px solid var(--ecv2-g200); flex-shrink:0; background:var(--ecv2-g50); gap:12px; } |
| 208 |
.ecv2-drawer-clear-count { font-weight:400; opacity:.8; } |
| 209 |
|
| 210 |
/* Active filter tags (inline in toolbar) */ |
| 211 |
.ecv2-active-filter-tags { display:flex; flex-wrap:wrap; gap:6px; align-items:center; } |
| 212 |
.ecv2-active-tag { display:inline-flex; align-items:center; gap:4px; padding:3px 8px; background:var(--ecv2-primary-light); border:1px solid rgba(34,197,94,.2); border-radius:4px; font-size:11px; color:var(--ecv2-g700); line-height:1.4; white-space:nowrap; } |
| 213 |
.ecv2-active-tag-label { color:var(--ecv2-g400); font-weight:600; } |
| 214 |
.ecv2-active-tag-remove { background:none; border:none; cursor:pointer; color:var(--ecv2-g400); font-size:14px; line-height:1; padding:0 0 0 2px; transition:color var(--ecv2-tr); } |
| 215 |
.ecv2-active-tag-remove:hover { color:var(--ecv2-danger); } |
| 216 |
.ecv2-active-tag-clear-all { background:var(--ecv2-g100); border-color:var(--ecv2-g200); color:var(--ecv2-g500); cursor:pointer; font-weight:500; transition:all var(--ecv2-tr); } |
| 217 |
.ecv2-active-tag-clear-all:hover { background:var(--ecv2-g200); color:var(--ecv2-g700); } |
| 218 |
|
| 219 |
/* Filter Drawer (slide-in from right) */ |
| 220 |
.ecv2-drawer-backdrop { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.3); z-index:99998; } |
| 221 |
.ecv2-drawer-backdrop.ecv2-drawer-open { display:block; } |
| 222 |
.ecv2-filter-drawer { position:fixed; top:0; right:-380px; width:360px; max-width:90vw; height:100%; background:#fff; box-shadow:-4px 0 24px rgba(0,0,0,.12); z-index:99999; display:flex; flex-direction:column; transition:right .25s ease; } |
| 223 |
.ecv2-filter-drawer.ecv2-drawer-open { right:0; } |
| 224 |
.ecv2-drawer-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--ecv2-g200); flex-shrink:0; } |
| 225 |
.ecv2-drawer-header-left { display:flex; align-items:center; gap:8px; } |
| 226 |
.ecv2-drawer-header-icon { font-size:18px; width:18px; height:18px; color:var(--ecv2-g500); } |
| 227 |
.ecv2-drawer-title { font-size:16px; font-weight:600; margin:0; color:var(--ecv2-g800); } |
| 228 |
.ecv2-drawer-active-badge { font-size:11px; font-weight:600; color:var(--ecv2-primary); background:var(--ecv2-primary-light); padding:2px 8px; border-radius:10px; } |
| 229 |
.ecv2-drawer-close { border:none; background:none; cursor:pointer; color:var(--ecv2-g400); padding:4px; border-radius:var(--ecv2-rs); transition:all var(--ecv2-tr); } |
| 230 |
.ecv2-drawer-close:hover { color:var(--ecv2-g700); background:var(--ecv2-g100); } |
| 231 |
.ecv2-drawer-close .dashicons { font-size:20px; width:20px; height:20px; } |
| 232 |
.ecv2-drawer-body { flex:1; overflow-y:auto; padding:8px 0; } |
| 233 |
.ecv2-drawer-filter-group { padding:12px 20px; border-bottom:1px solid var(--ecv2-g100); } |
| 234 |
.ecv2-drawer-filter-group-active { background:rgba(34,197,94,.03); } |
| 235 |
.ecv2-drawer-filter-label { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; font-size:12px; font-weight:600; color:var(--ecv2-g500); text-transform:uppercase; letter-spacing:.5px; } |
| 236 |
.ecv2-drawer-filter-clear { border:none; background:none; cursor:pointer; color:var(--ecv2-g400); padding:0; transition:color var(--ecv2-tr); } |
| 237 |
.ecv2-drawer-filter-clear:hover { color:var(--ecv2-danger); } |
| 238 |
.ecv2-drawer-filter-clear .dashicons { font-size:16px; width:16px; height:16px; } |
| 239 |
.ecv2-drawer-pills { display:flex; flex-wrap:wrap; gap:6px; } |
| 240 |
.ecv2-drawer-pill { padding:5px 12px; border:1px solid var(--ecv2-g200); border-radius:20px; background:#fff; font-size:12px; font-weight:500; color:var(--ecv2-g600); cursor:pointer; transition:all var(--ecv2-tr); display:inline-flex; align-items:center; gap:4px; } |
| 241 |
.ecv2-drawer-pill:hover { border-color:var(--ecv2-primary); color:var(--ecv2-primary); } |
| 242 |
.ecv2-drawer-pill-active { background:var(--ecv2-primary); border-color:var(--ecv2-primary); color:#fff; } |
| 243 |
.ecv2-drawer-pill-active:hover { background:var(--ecv2-primary-hover); border-color:var(--ecv2-primary-hover); color:#fff; } |
| 244 |
.ecv2-drawer-pill .dashicons { font-size:14px; width:14px; height:14px; } |
| 245 |
.ecv2-drawer-select-wrap { max-width:100%; } |
| 246 |
.ecv2-drawer-select { width:100%; } |
| 247 |
.ecv2-drawer-range { display:flex; align-items:flex-end; gap:8px; } |
| 248 |
.ecv2-drawer-range-field { flex:1; } |
| 249 |
.ecv2-drawer-range-label { display:block; font-size:11px; color:var(--ecv2-g400); margin-bottom:3px; } |
| 250 |
.ecv2-drawer-range-input { width:100%; padding:6px 8px; border:1px solid var(--ecv2-g200); border-radius:var(--ecv2-r); font-size:13px; } |
| 251 |
.ecv2-drawer-range-input:focus { outline:none; border-color:var(--ecv2-primary); box-shadow:0 0 0 2px var(--ecv2-primary-light); } |
| 252 |
.ecv2-drawer-range-sep { color:var(--ecv2-g400); padding-bottom:6px; } |
| 253 |
.ecv2-drawer-range-apply { flex-shrink:0; } |
| 254 |
.ecv2-drawer-footer { display:flex; align-items:center; justify-content:space-between; padding:12px 20px; border-top:1px solid var(--ecv2-g200); flex-shrink:0; background:var(--ecv2-g50); } |
| 255 |
.ecv2-drawer-clear-count { font-weight:400; } |
| 256 |
|
| 257 |
/* Table View */ |
| 258 |
.ecv2-table { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--ecv2-g200); border-radius:var(--ecv2-r); overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,.05); } |
| 259 |
.ecv2-table thead { background:var(--ecv2-g50); border-bottom:2px solid var(--ecv2-g200); } |
| 260 |
.ecv2-table thead th { padding:10px 12px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:var(--ecv2-g500); text-align:left; white-space:nowrap; } |
| 261 |
.ecv2-col-check { width:40px; text-align:center !important; } |
| 262 |
.ecv2-col-check input[type="checkbox"] { margin:0; } |
| 263 |
.ecv2-col-actions { width:60px; text-align:center !important; } |
| 264 |
.ecv2-sort-link { color:var(--ecv2-g500); text-decoration:none; display:inline-flex; align-items:center; gap:4px; } |
| 265 |
.ecv2-sort-link:hover { color:var(--ecv2-g700); text-decoration:none; } |
| 266 |
.ecv2-sort-arrow { font-size:10px; line-height:1; } |
| 267 |
.ecv2-table tbody tr { border-bottom:1px solid var(--ecv2-g100); transition:background var(--ecv2-tr); } |
| 268 |
.ecv2-table tbody tr:last-child { border-bottom:none; } |
| 269 |
.ecv2-table tbody tr:hover { background:var(--ecv2-g50); } |
| 270 |
.ecv2-table tbody td { padding:10px 12px; font-size:13px; color:var(--ecv2-g700); vertical-align:middle; } |
| 271 |
.ecv2-cell[data-editable="true"] { cursor:text; position:relative; } |
| 272 |
.ecv2-cell[data-editable="true"]:hover { background:rgba(34,197,94,.04); } |
| 273 |
.ecv2-cell-editing { background:var(--ecv2-primary-light) !important; padding:4px 6px !important; } |
| 274 |
.ecv2-cell-editing input { width:100%; padding:4px 6px; border:2px solid var(--ecv2-primary); border-radius:var(--ecv2-rs); font-size:13px; outline:none; } |
| 275 |
.ecv2-empty-state { text-align:center; padding:40px 20px !important; color:var(--ecv2-g400); font-size:14px; } |
| 276 |
.ecv2-empty-state .dashicons { font-size:18px; width:18px; height:18px; vertical-align:middle; margin-right:4px; } |
| 277 |
.ecv2-card-grid > .ecv2-empty-state { grid-column:1/-1; background:#fff; border-radius:var(--ecv2-r); border:1px solid var(--ecv2-g200); min-height:200px; display:flex; align-items:center; justify-content:center; } |
| 278 |
|
| 279 |
/* Product Cells */ |
| 280 |
.ecv2-product-thumb { width:40px; height:40px; border-radius:var(--ecv2-rs); object-fit:cover; border:1px solid var(--ecv2-g200); } |
| 281 |
.ecv2-product-thumb-placeholder { width:40px; height:40px; border-radius:var(--ecv2-rs); background:var(--ecv2-g100); display:flex; align-items:center; justify-content:center; color:var(--ecv2-g300); } |
| 282 |
.ecv2-product-thumb-placeholder .dashicons { font-size:20px; width:20px; height:20px; } |
| 283 |
.ecv2-product-title-wrap { display:flex; flex-direction:column; gap:2px; } |
| 284 |
.ecv2-product-title-text { color:var(--ecv2-g800); font-weight:500; cursor:default; line-height:1.4; } |
| 285 |
.ecv2-product-row-actions { display:flex; align-items:center; gap:0; opacity:0; transition:opacity 0.15s ease; flex-wrap:wrap; line-height:1; } |
| 286 |
.ecv2-row:hover .ecv2-product-row-actions, |
| 287 |
.ecv2-cell-editing .ecv2-product-row-actions { opacity:1; } |
| 288 |
.ecv2-row-action-link { color:var(--ecv2-g500); font-size:12px; text-decoration:none; padding:1px 0; } |
| 289 |
.ecv2-row-action-link:hover { color:var(--ecv2-primary); } |
| 290 |
.ecv2-row-action-link-danger { color:var(--ecv2-g500); } |
| 291 |
.ecv2-row-action-link-danger:hover { color:#ef4444; } |
| 292 |
.ecv2-row-action-sep { color:var(--ecv2-g300); font-size:11px; margin:0 4px; user-select:none; } |
| 293 |
.ecv2-square-icon { width:16px; height:16px; } |
| 294 |
.ecv2-link-primary { color:var(--ecv2-g800); text-decoration:none; font-weight:500; } |
| 295 |
.ecv2-link-primary:hover { color:var(--ecv2-primary); text-decoration:none; } |
| 296 |
.ecv2-sku-chip { display:inline-block; padding:2px 8px; background:var(--ecv2-g100); border:1px solid var(--ecv2-g200); border-radius:var(--ecv2-rs); font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace; font-size:11px; color:var(--ecv2-g600); } |
| 297 |
.ecv2-sku-empty { color:var(--ecv2-g300); } |
| 298 |
.ecv2-price-wrap { display:flex; align-items:baseline; gap:6px; } |
| 299 |
.ecv2-price-current { font-weight:600; color:var(--ecv2-g800); } |
| 300 |
.ecv2-price-list { font-size:12px; color:var(--ecv2-g400); text-decoration:line-through; } |
| 301 |
.ecv2-stock-badge { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:12px; font-size:12px; font-weight:500; white-space:nowrap; } |
| 302 |
.ecv2-stock-out { background:var(--ecv2-danger-light); color:var(--ecv2-danger); } |
| 303 |
.ecv2-stock-low { background:var(--ecv2-amber-light); color:var(--ecv2-amber); } |
| 304 |
.ecv2-stock-ok { background:var(--ecv2-primary-light); color:var(--ecv2-primary); } |
| 305 |
.ecv2-stock-unlimited { background:var(--ecv2-g100); color:var(--ecv2-g500); } |
| 306 |
.ecv2-stock-option { background:var(--ecv2-blue-light); color:var(--ecv2-blue); } |
| 307 |
.ecv2-stock-option .dashicons { font-size:12px; width:12px; height:12px; } |
| 308 |
|
| 309 |
/* Toggle */ |
| 310 |
.ecv2-toggle { position:relative; display:inline-block; width:36px; height:20px; } |
| 311 |
.ecv2-toggle input { opacity:0; width:0; height:0; } |
| 312 |
.ecv2-toggle-slider { position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background:var(--ecv2-g300); border-radius:20px; transition:all var(--ecv2-tr); } |
| 313 |
.ecv2-toggle-slider::before { content:''; position:absolute; width:16px; height:16px; left:2px; bottom:2px; background:#fff; border-radius:50%; transition:all var(--ecv2-tr); box-shadow:0 1px 2px rgba(0,0,0,.05); } |
| 314 |
.ecv2-toggle input:checked + .ecv2-toggle-slider { background:var(--ecv2-primary); } |
| 315 |
.ecv2-toggle input:checked + .ecv2-toggle-slider::before { transform:translateX(16px); } |
| 316 |
|
| 317 |
/* Small toggle for spreadsheet view */ |
| 318 |
.ecv2-toggle-sm { width:28px; height:16px; } |
| 319 |
.ecv2-toggle-sm .ecv2-toggle-slider::before { width:12px; height:12px; } |
| 320 |
.ecv2-toggle-sm input:checked + .ecv2-toggle-slider::before { transform:translateX(12px); } |
| 321 |
|
| 322 |
/* Compact price cell for spreadsheet view */ |
| 323 |
.ecv2-price-badge-compact { font-size:12px; padding:0; } |
| 324 |
.ecv2-price-badge-compact .ecv2-price-current { font-size:12px; } |
| 325 |
.ecv2-price-badge-compact .ecv2-price-list { font-size:10px; } |
| 326 |
.ecv2-price-cell-compact { position:relative; display:inline-block; } |
| 327 |
.ecv2-price-cell-compact .ecv2-price-menu { min-width:200px; } |
| 328 |
|
| 329 |
/* Score ring */ |
| 330 |
.ecv2-score-ring { cursor:help; } |
| 331 |
.ecv2-score-text { font-size:9px; font-weight:700; } |
| 332 |
|
| 333 |
/* Row Menu */ |
| 334 |
.ecv2-row-menu-wrap { position:relative; display:inline-block; } |
| 335 |
.ecv2-row-menu-trigger { background:none; border:none; font-size:20px; cursor:pointer; padding:4px 8px; border-radius:var(--ecv2-rs); color:var(--ecv2-g400); transition:all var(--ecv2-tr); line-height:1; letter-spacing:1px; } |
| 336 |
.ecv2-row-menu-trigger:hover { background:var(--ecv2-g100); color:var(--ecv2-g700); } |
| 337 |
.ecv2-row-menu { display:none; position:absolute; right:0; top:100%; z-index:100; background:#fff; border:1px solid var(--ecv2-g200); border-radius:var(--ecv2-r); box-shadow:var(--ecv2-shlg); min-width:180px; padding:4px 0; } |
| 338 |
.ecv2-row-menu.ecv2-row-menu-open { display:block; } |
| 339 |
.ecv2-row-menu-item { display:flex; align-items:center; gap:8px; padding:8px 14px; font-size:13px; color:var(--ecv2-g700); text-decoration:none; transition:background var(--ecv2-tr); white-space:nowrap; } |
| 340 |
.ecv2-row-menu-item:hover { background:var(--ecv2-g50); color:var(--ecv2-g800); text-decoration:none; } |
| 341 |
.ecv2-row-menu-item .dashicons { font-size:16px; width:16px; height:16px; color:var(--ecv2-g400); } |
| 342 |
.ecv2-row-menu-item:hover .dashicons { color:var(--ecv2-g600); } |
| 343 |
.ecv2-row-menu-item-danger { color:var(--ecv2-danger); } |
| 344 |
.ecv2-row-menu-item-danger:hover { background:var(--ecv2-danger-light); color:var(--ecv2-danger); } |
| 345 |
.ecv2-row-menu-item-danger .dashicons { color:var(--ecv2-danger); } |
| 346 |
.ecv2-action-icon { display:inline-flex; padding:4px; color:var(--ecv2-g400); text-decoration:none; border-radius:var(--ecv2-rs); transition:all var(--ecv2-tr); } |
| 347 |
.ecv2-action-icon:hover { color:var(--ecv2-primary); background:var(--ecv2-primary-light); text-decoration:none; } |
| 348 |
.ecv2-action-icon .dashicons { font-size:16px; width:16px; height:16px; } |
| 349 |
.ecv2-row-menu-item-disabled { display:flex; align-items:center; gap:8px; padding:8px 14px; font-size:13px; color:var(--ecv2-g400); cursor:not-allowed; user-select:none; } |
| 350 |
.ecv2-row-menu-item-disabled:hover { background:transparent; color:var(--ecv2-g400); } |
| 351 |
.ecv2-row-menu-item-disabled .dashicons { font-size:16px; width:16px; height:16px; color:var(--ecv2-g300); } |
| 352 |
|
| 353 |
/* Card View */ |
| 354 |
.ecv2-card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; } |
| 355 |
.ecv2-card { background:#fff; border:1px solid var(--ecv2-g200); border-radius:var(--ecv2-r); transition:all var(--ecv2-tr); box-shadow:0 1px 2px rgba(0,0,0,.05); position:relative; } |
| 356 |
.ecv2-card:hover { box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06); border-color:var(--ecv2-g300); } |
| 357 |
.ecv2-card.ecv2-card-menu-active { z-index:120; } |
| 358 |
.ecv2-card-inactive::after { content:''; position:absolute; inset:0; background:rgba(255,255,255,0.5); border-radius:var(--ecv2-r); pointer-events:none; z-index:1; } |
| 359 |
.ecv2-row-inactive > td, .ecv2-ss-row-inactive > td { opacity:0.55; transition:opacity var(--ecv2-tr); } |
| 360 |
.ecv2-row-inactive:hover > td, .ecv2-ss-row-inactive:hover > td { opacity:1; } |
| 361 |
.ecv2-row-inactive:has(.ecv2-stock-menu-open) > td, .ecv2-row-inactive:has(.ecv2-price-menu-open) > td, .ecv2-row-inactive:has(.ecv2-row-menu-open) > td, .ecv2-row-inactive:has(.ecv2-cat-popover) > td, .ecv2-ss-row-inactive:has(.ecv2-stock-menu-open) > td, .ecv2-ss-row-inactive:has(.ecv2-row-menu-open) > td { opacity:1; } |
| 362 |
.ecv2-row-inactive .ecv2-toggle, .ecv2-ss-row-inactive .ecv2-toggle, .ecv2-row-inactive .ecv2-row-check, .ecv2-ss-row-inactive .ecv2-row-check { opacity:1; } |
| 363 |
.ecv2-card-image { position:relative; width:100%; aspect-ratio:1; background:var(--ecv2-g50); overflow:hidden; border-radius:var(--ecv2-r) var(--ecv2-r) 0 0; } |
| 364 |
.ecv2-card-image img { width:100%; height:100%; object-fit:cover; } |
| 365 |
.ecv2-card-image-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:var(--ecv2-g300); } |
| 366 |
.ecv2-card-image-placeholder .dashicons { font-size:48px; width:48px; height:48px; } |
| 367 |
.ecv2-card-toggle { position:absolute; top:8px; right:8px; } |
| 368 |
.ecv2-card-body { padding:12px; } |
| 369 |
.ecv2-card-title { font-size:14px; font-weight:500; margin:0 0 6px; line-height:1.3; } |
| 370 |
.ecv2-card-title a { color:var(--ecv2-g800); text-decoration:none; } |
| 371 |
.ecv2-card-title a:hover { color:var(--ecv2-primary); } |
| 372 |
.ecv2-card-meta { margin:6px 0; } |
| 373 |
.ecv2-card-meta .ecv2-price-cell { display:block; } |
| 374 |
.ecv2-card-meta .ecv2-price-badge-btn { padding:2px 0; } |
| 375 |
.ecv2-card-meta .ecv2-price-wrap { flex-wrap:wrap; } |
| 376 |
.ecv2-card-footer { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; border-top:1px solid var(--ecv2-g100); border-radius:0 0 var(--ecv2-r) var(--ecv2-r); } |
| 377 |
|
| 378 |
/* Spreadsheet */ |
| 379 |
.ecv2-spreadsheet-wrapper { overflow-x:auto; border:1px solid var(--ecv2-g200); border-radius:var(--ecv2-r); } |
| 380 |
.ecv2-spreadsheet { width:100%; border-collapse:collapse; background:#fff; font-size:13px; } |
| 381 |
.ecv2-spreadsheet thead { background:var(--ecv2-g50); position:sticky; top:0; z-index:10; } |
| 382 |
.ecv2-spreadsheet thead th { padding:8px 10px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:var(--ecv2-g500); text-align:left; border-bottom:2px solid var(--ecv2-g200); white-space:nowrap; } |
| 383 |
.ecv2-spreadsheet tbody td { padding:6px 10px; border-bottom:1px solid var(--ecv2-g100); border-right:1px solid var(--ecv2-g100); } |
| 384 |
.ecv2-ss-editable { cursor:text; } |
| 385 |
.ecv2-ss-editable:hover { background:rgba(34,197,94,.04); } |
| 386 |
.ecv2-ss-editing { padding:2px !important; background:var(--ecv2-primary-light) !important; } |
| 387 |
.ecv2-ss-editing input { width:100%; padding:4px 6px; border:2px solid var(--ecv2-primary); border-radius:2px; font-size:13px; outline:none; } |
| 388 |
|
| 389 |
/* Spreadsheet actions column */ |
| 390 |
.ecv2-ss-col-actions { white-space:nowrap; width:50px; text-align:center; } |
| 391 |
.ecv2-spreadsheet .ecv2-row-menu-wrap { display:inline-block; } |
| 392 |
|
| 393 |
/* Spreadsheet toolbar */ |
| 394 |
.ecv2-ss-toolbar { position:relative; display:flex; align-items:center; gap:8px; margin-bottom:8px; justify-content:flex-end; } |
| 395 |
.ecv2-view-table .ecv2-ss-toolbar, |
| 396 |
.ecv2-view-card .ecv2-ss-toolbar { display:none; } |
| 397 |
|
| 398 |
/* Column picker dropdown */ |
| 399 |
.ecv2-ss-col-picker { position:absolute; right:0; top:100%; z-index:100; background:#fff; border:1px solid var(--ecv2-g200); border-radius:var(--ecv2-r); box-shadow:var(--ecv2-shlg); padding:6px 0; min-width:180px; max-height:320px; overflow-y:auto; } |
| 400 |
.ecv2-ss-col-picker-header { padding:8px 14px 6px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:var(--ecv2-g400); border-bottom:1px solid var(--ecv2-g100); margin-bottom:2px; } |
| 401 |
.ecv2-ss-col-picker-item { display:flex; align-items:center; gap:8px; padding:6px 14px; font-size:13px; color:var(--ecv2-g700); cursor:pointer; transition:background var(--ecv2-tr); } |
| 402 |
.ecv2-ss-col-picker-item:hover { background:var(--ecv2-g50); } |
| 403 |
.ecv2-ss-col-picker-item input[type="checkbox"] { margin:0; accent-color:var(--ecv2-primary); } |
| 404 |
.ecv2-ss-col-picker-locked { opacity:.5; cursor:default; } |
| 405 |
#ecv2-ss-col-toggle-btn { position:relative; } |
| 406 |
|
| 407 |
/* Spreadsheet empty state */ |
| 408 |
.ecv2-empty-state-ss { background:#fff; border-radius:var(--ecv2-r); border:1px solid var(--ecv2-g200); min-height:200px; display:flex; align-items:center; justify-content:center; } |
| 409 |
|
| 410 |
/* Pagination */ |
| 411 |
.ecv2-pagination { display:flex; align-items:center; justify-content:space-between; padding:14px 0 0; margin-top:4px; border-top:1px solid var(--ecv2-g200); flex-wrap:wrap; gap:12px; } |
| 412 |
.ecv2-pagination-center { font-size:13px; color:var(--ecv2-g500); } |
| 413 |
.ecv2-pagination-right { display:flex; align-items:center; gap:4px; } |
| 414 |
.ecv2-page-btn { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border:1px solid var(--ecv2-g300); border-radius:var(--ecv2-rs); background:#fff; color:var(--ecv2-g600); text-decoration:none; font-size:14px; transition:all var(--ecv2-tr); } |
| 415 |
.ecv2-page-btn:hover:not(.disabled) { background:var(--ecv2-g50); border-color:var(--ecv2-primary); color:var(--ecv2-primary); text-decoration:none; } |
| 416 |
.ecv2-page-btn.disabled { opacity:.4; cursor:default; pointer-events:none; } |
| 417 |
.ecv2-page-info { font-size:13px; color:var(--ecv2-g600); padding:0 4px; display:flex; align-items:center; gap:4px; } |
| 418 |
.ecv2-page-input { width:40px; text-align:center; padding:5px; border:1px solid var(--ecv2-g200); border-radius:var(--ecv2-r); font-size:13px; transition:border-color var(--ecv2-tr), box-shadow var(--ecv2-tr); } |
| 419 |
.ecv2-page-input:focus { outline:none; border-color:var(--ecv2-primary); box-shadow:0 0 0 2px var(--ecv2-primary-light); } |
| 420 |
|
| 421 |
/* Modals */ |
| 422 |
.ecv2-modal-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.5); z-index:100000; display:flex; align-items:center; justify-content:center; padding:20px; } |
| 423 |
.ecv2-modal { background:#fff; border-radius:var(--ecv2-rl); box-shadow:var(--ecv2-shlg); width:100%; max-width:520px; max-height:90vh; overflow:auto; } |
| 424 |
.ecv2-modal-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--ecv2-g200); } |
| 425 |
.ecv2-modal-header h2 { font-size:16px; font-weight:600; margin:0; display:flex; align-items:center; gap:8px; } |
| 426 |
.ecv2-modal-header .dashicons { color:var(--ecv2-primary); } |
| 427 |
.ecv2-modal-close { background:none; border:none; font-size:24px; cursor:pointer; color:var(--ecv2-g400); padding:4px; line-height:1; border-radius:var(--ecv2-rs); transition:all var(--ecv2-tr); } |
| 428 |
.ecv2-modal-close:hover { color:var(--ecv2-g700); background:var(--ecv2-g100); } |
| 429 |
.ecv2-modal-body { padding:20px; } |
| 430 |
.ecv2-modal-field { margin-bottom:16px; } |
| 431 |
.ecv2-modal-field:last-child { margin-bottom:0; } |
| 432 |
.ecv2-modal-label { display:block; font-size:12px; font-weight:600; color:var(--ecv2-g600); margin-bottom:4px; text-transform:uppercase; letter-spacing:.3px; } |
| 433 |
.ecv2-modal-footer { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; border-top:1px solid var(--ecv2-g200); gap:8px; } |
| 434 |
.ecv2-modal-footer-right { display:flex; gap:8px; margin-left:auto; } |
| 435 |
.ecv2-field-hint { font-size:11px; color:var(--ecv2-g400); margin-top:4px; } |
| 436 |
.ecv2-be-price-wrap, .ecv2-be-number-wrap { display:flex; gap:8px; } |
| 437 |
.ecv2-be-price-wrap select, .ecv2-be-number-wrap select { flex:1; } |
| 438 |
.ecv2-be-price-wrap input, .ecv2-be-number-wrap input { flex:0 0 100px; } |
| 439 |
.ecv2-sale-current-price { font-size:20px; font-weight:700; color:var(--ecv2-g800); } |
| 440 |
.ecv2-sale-price-input-wrap { display:flex; align-items:center; gap:8px; } |
| 441 |
.ecv2-sale-price-input-wrap input { flex:1; } |
| 442 |
.ecv2-sale-discount-badge { font-size:12px; font-weight:600; padding:2px 8px; border-radius:10px; background:var(--ecv2-primary-light); color:var(--ecv2-primary); white-space:nowrap; } |
| 443 |
.ecv2-sale-warning { font-size:12px; color:var(--ecv2-amber); margin-top:4px; } |
| 444 |
.ecv2-sale-preview { background:var(--ecv2-g50); border:1px solid var(--ecv2-g200); border-radius:var(--ecv2-r); padding:12px; margin-top:16px; } |
| 445 |
.ecv2-sale-timing { font-size:12px; color:var(--ecv2-g500); padding:8px 12px; background:var(--ecv2-blue-light); border-radius:var(--ecv2-rs); margin-top:12px; } |
| 446 |
#ecv2-sale-status-callout { padding:10px 14px; border-radius:var(--ecv2-rs); margin-bottom:16px; font-size:13px; font-weight:500; } |
| 447 |
|
| 448 |
/* Toasts */ |
| 449 |
#ecv2-toast-container { position:fixed; bottom:24px; right:24px; z-index:100001; display:flex; flex-direction:column-reverse; gap:8px; } |
| 450 |
.ecv2-toast { padding:12px 20px; border-radius:var(--ecv2-r); color:#fff; font-size:13px; font-weight:500; box-shadow:var(--ecv2-shlg); animation:ecv2-slide-in 300ms ease; display:flex; align-items:center; gap:8px; max-width:360px; } |
| 451 |
.ecv2-toast-success { background:var(--ecv2-primary); } |
| 452 |
.ecv2-toast-error { background:var(--ecv2-danger); } |
| 453 |
.ecv2-toast-info { background:var(--ecv2-blue); } |
| 454 |
.ecv2-toast .dashicons { font-size:16px; width:16px; height:16px; } |
| 455 |
@keyframes ecv2-slide-in { from { transform:translateX(100%); opacity:0; } to { transform:translateX(0); opacity:1; } } |
| 456 |
|
| 457 |
/* Undo Bar */ |
| 458 |
#ecv2-undo-bar { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--ecv2-g800); color:#fff; padding:10px 20px; border-radius:var(--ecv2-r); box-shadow:var(--ecv2-shlg); z-index:100001; display:flex; align-items:center; gap:12px; font-size:13px; } |
| 459 |
#ecv2-undo-button { color:var(--ecv2-primary); border-color:var(--ecv2-primary); } |
| 460 |
#ecv2-undo-button:hover { background:var(--ecv2-primary); color:#fff; } |
| 461 |
|
| 462 |
.ecv2-export-banner { display:flex; align-items:center; gap:14px; padding:14px 18px; margin:0 0 16px; background:#ecfdf5; border:1px solid #a7f3d0; border-left:4px solid var(--ecv2-primary); border-radius:var(--ecv2-r); box-shadow:var(--ecv2-sh); } |
| 463 |
.ecv2-export-banner-icon { flex-shrink:0; width:36px; height:36px; border-radius:50%; background:var(--ecv2-primary); color:#fff; display:flex; align-items:center; justify-content:center; } |
| 464 |
.ecv2-export-banner-icon .dashicons { font-size:20px; width:20px; height:20px; } |
| 465 |
.ecv2-export-banner-body { flex:1; min-width:0; } |
| 466 |
.ecv2-export-banner-title { font-weight:600; font-size:14px; color:var(--ecv2-g900); margin-bottom:2px; } |
| 467 |
.ecv2-export-banner-message { font-size:13px; color:var(--ecv2-g600); line-height:1.4; } |
| 468 |
.ecv2-export-banner-actions { display:flex; gap:8px; flex-shrink:0; align-items:center; } |
| 469 |
.ecv2-export-banner-actions .dashicons { font-size:14px; width:14px; height:14px; } |
| 470 |
@media screen and (max-width:640px) { |
| 471 |
.ecv2-export-banner { flex-direction:column; align-items:flex-start; } |
| 472 |
.ecv2-export-banner-actions { width:100%; justify-content:flex-end; } |
| 473 |
} |
| 474 |
|
| 475 |
/* Apply button shows selected count and disables cleanly at 0. */ |
| 476 |
#ecv2-bulk-apply:disabled { opacity:0.5; cursor:not-allowed; } |
| 477 |
#ecv2-bulk-apply[data-ecv2-busy="true"] { position:relative; padding-right:28px; } |
| 478 |
#ecv2-bulk-apply[data-ecv2-busy="true"]::after { content:""; position:absolute; right:10px; top:50%; width:12px; height:12px; margin-top:-6px; border:2px solid var(--ecv2-g300); border-top-color:var(--ecv2-g600); border-radius:50%; animation:ecv2-spin 600ms linear infinite; } |
| 479 |
@keyframes ecv2-spin { to { transform:rotate(360deg); } } |
| 480 |
|
| 481 |
/* ------------------------------------------------------------------ */ |
| 482 |
/* Health strip (grouped) — shared by every V2 list */ |
| 483 |
/* Base markup renders .ecv2-health-group wrappers when stats carry a */ |
| 484 |
/* 'group' key; these rules only apply in that mode. */ |
| 485 |
/* ------------------------------------------------------------------ */ |
| 486 |
.ecv2-health-dashboard-grouped { display:flex; align-items:stretch; gap:16px; margin-bottom:16px; overflow-x:auto; padding-bottom:2px; } |
| 487 |
.ecv2-health-group { display:flex; gap:0; background:#fff; border:1px solid var(--ecv2-g200, #e5e7eb); border-radius:var(--ecv2-r, 8px); box-shadow:0 1px 2px rgba(0,0,0,.04); overflow:hidden; } |
| 488 |
.ecv2-health-group-flow { flex:0 1 auto; } |
| 489 |
.ecv2-health-group-period, |
| 490 |
.ecv2-health-group-commerce, |
| 491 |
.ecv2-health-group-attention { flex:0 0 auto; margin-left:auto; } |
| 492 |
.ecv2-health-dashboard-grouped .ecv2-stat-card { flex:0 0 auto; min-width:0; padding:10px 16px; border:none; border-right:1px solid var(--ecv2-g100, #f3f4f6); border-radius:0; background:#fff; box-shadow:none; text-align:left; display:flex; flex-direction:column; justify-content:center; gap:3px; position:relative; } |
| 493 |
.ecv2-health-dashboard-grouped .ecv2-stat-card:last-child { border-right:none; } |
| 494 |
.ecv2-health-dashboard-grouped .ecv2-stat-card:hover { background:var(--ecv2-g50, #f9fafb); border-color:var(--ecv2-g100, #f3f4f6); box-shadow:inset 0 -2px 0 var(--ecv2-g300, #d1d5db); } |
| 495 |
.ecv2-health-dashboard-grouped .ecv2-stat-card:focus-visible { outline:2px solid var(--ecv2-primary, #16a34a); outline-offset:-2px; } |
| 496 |
.ecv2-health-dashboard-grouped .ecv2-stat-static { cursor:default; } |
| 497 |
.ecv2-health-dashboard-grouped .ecv2-stat-static:hover { background:#fff; box-shadow:none; } |
| 498 |
.ecv2-health-dashboard-grouped .ecv2-stat-active { background:var(--ecv2-primary-light, #ecfdf5); box-shadow:inset 0 -2px 0 var(--ecv2-primary, #16a34a); } |
| 499 |
.ecv2-health-dashboard-grouped .ecv2-stat-main { display:flex; align-items:baseline; gap:8px; flex-direction:row-reverse; justify-content:flex-end; } |
| 500 |
.ecv2-health-dashboard-grouped .ecv2-stat-value { font-size:18px; font-weight:600; line-height:1; margin:0; font-variant-numeric:tabular-nums; letter-spacing:-.01em; } |
| 501 |
.ecv2-health-dashboard-grouped .ecv2-stat-label { font-size:12px; text-transform:none; letter-spacing:0; color:var(--ecv2-g600, #4b5563); font-weight:500; white-space:nowrap; } |
| 502 |
.ecv2-health-dashboard-grouped .ecv2-stat-sub { display:flex; align-items:baseline; gap:4px; font-size:11px; color:var(--ecv2-g500, #6b7280); white-space:nowrap; } |
| 503 |
.ecv2-health-dashboard-grouped .ecv2-stat-sub-value { font-weight:600; color:var(--ecv2-g700, #374151); font-variant-numeric:tabular-nums; } |
| 504 |
/* Colour is carried by a small dot next to the label, not by the number. */ |
| 505 |
.ecv2-health-dashboard-grouped .ecv2-stat-card .ecv2-stat-value { color:var(--ecv2-g900, #111827); } |
| 506 |
.ecv2-health-dashboard-grouped .ecv2-stat-card .ecv2-stat-label:before { content:''; display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:6px; vertical-align:middle; background:var(--ecv2-g300, #d1d5db); } |
| 507 |
.ecv2-health-dashboard-grouped .ecv2-stat-default .ecv2-stat-label:before { display:none; } |
| 508 |
.ecv2-health-dashboard-grouped .ecv2-stat-cyan .ecv2-stat-label:before { background:#06b6d4; } |
| 509 |
.ecv2-health-dashboard-grouped .ecv2-stat-amber .ecv2-stat-label:before { background:var(--ecv2-amber, #f59e0b); } |
| 510 |
.ecv2-health-dashboard-grouped .ecv2-stat-green .ecv2-stat-label:before { background:var(--ecv2-primary, #16a34a); } |
| 511 |
.ecv2-health-dashboard-grouped .ecv2-stat-red .ecv2-stat-label:before { background:var(--ecv2-danger, #dc2626); } |
| 512 |
.ecv2-health-dashboard-grouped .ecv2-stat-gray .ecv2-stat-label:before { background:var(--ecv2-g400, #9ca3af); } |
| 513 |
.ecv2-health-dashboard-grouped .ecv2-stat-blue .ecv2-stat-label:before { background:var(--ecv2-blue, #2563eb); } |
| 514 |
.ecv2-health-dashboard-grouped .ecv2-stat-purple .ecv2-stat-label:before { background:#7c3aed; } |
| 515 |
/* Money tiles: the amount is the headline, keep it a touch smaller so currency codes fit. */ |
| 516 |
.ecv2-health-dashboard-grouped .ecv2-stat-static .ecv2-stat-value { font-size:15px; } |
| 517 |
/* Zero counts recede so the eye goes to what needs work. */ |
| 518 |
.ecv2-health-dashboard-grouped .ecv2-stat-zero .ecv2-stat-value { color:var(--ecv2-g400, #9ca3af); } |
| 519 |
.ecv2-stat-toggle-bar { margin-bottom:8px; } |
| 520 |
|
| 521 |
@container ecv2 (max-width:1100px) { |
| 522 |
.ecv2-health-dashboard-grouped { flex-wrap:wrap; } |
| 523 |
.ecv2-health-group-period, .ecv2-health-group-commerce, .ecv2-health-group-attention { margin-left:0; } |
| 524 |
.ecv2-health-group { flex-wrap:wrap; } |
| 525 |
} |
| 526 |
|
| 527 |
/* Responsive |
| 528 |
Column hiding keys off the *container* width, not the viewport: the WP menu |
| 529 |
+ EasyCart sidebar eat ~450px, so a 1450px window only leaves ~1000px for |
| 530 |
the list. Viewport rules stay as a fallback for browsers without @container. */ |
| 531 |
.ecv2-table-scroll { width:100%; overflow:visible; border-radius:var(--ecv2-r); } |
| 532 |
.ecv2-table-scroll > .ecv2-table { min-width:100%; } |
| 533 |
/* Only become a scroll container on narrow containers; any overflow value other |
| 534 |
than visible would clip the row menus and status popovers on desktop. */ |
| 535 |
@container ecv2 (max-width:1100px) { .ecv2-hide-laptop { display:none !important; } .ecv2-health-dashboard:not(.ecv2-health-dashboard-grouped) { flex-wrap:wrap; } .ecv2-stat-card { min-width:80px; } } |
| 536 |
@container ecv2 (max-width:880px) { .ecv2-hide-tablet { display:none !important; } } |
| 537 |
@container ecv2 (max-width:640px) { .ecv2-hide-mobile { display:none !important; } .ecv2-table-scroll { overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; } .ecv2-table-scroll > .ecv2-table { min-width:560px; } } |
| 538 |
@supports not (container-type:inline-size) { |
| 539 |
@media screen and (max-width:1280px) { .ecv2-hide-laptop { display:none !important; } } |
| 540 |
@media screen and (max-width:1024px) { .ecv2-hide-tablet { display:none !important; } .ecv2-health-dashboard { flex-wrap:wrap; } .ecv2-stat-card { min-width:80px; } } |
| 541 |
} |
| 542 |
@media screen and (max-width:768px) { .ecv2-page-header { flex-direction:column; align-items:flex-start; } .ecv2-toolbar { flex-direction:column; align-items:stretch; } .ecv2-toolbar-right { justify-content:space-between; } .ecv2-search input { width:100%; } .ecv2-card-grid { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); } .ecv2-pagination { flex-direction:column; align-items:center; } .ecv2-keyboard-hint { display:none; } } |
| 543 |
|
| 544 |
/* Sale tag in price column */ |
| 545 |
.ecv2-sale-tag { display:inline-block; padding:1px 7px; border-radius:4px; font-size:10px; font-weight:700; background:#ecfeff; color:#06b6d4; white-space:nowrap; letter-spacing:.02em; vertical-align:middle; } |
| 546 |
|
| 547 |
/* Category tag */ |
| 548 |
.ecv2-category-tag { display:inline-block; padding:2px 8px; background:var(--ecv2-g100); border:1px solid var(--ecv2-g200); border-radius:var(--ecv2-rs); font-size:12px; color:var(--ecv2-g600); white-space:nowrap; max-width:140px; overflow:hidden; text-overflow:ellipsis; vertical-align:middle; } |
| 549 |
.ecv2-category-more { display:inline-block; padding:2px 6px; background:var(--ecv2-g100); border-radius:10px; font-size:10px; font-weight:600; color:var(--ecv2-g500); margin-left:4px; cursor:help; vertical-align:middle; } |
| 550 |
|
| 551 |
/* Category cell & editor */ |
| 552 |
.ecv2-category-cell { position:relative; } |
| 553 |
.ecv2-category-display { cursor:pointer; display:inline-flex; align-items:center; gap:4px; } |
| 554 |
.ecv2-category-edit-icon { opacity:0; transition:opacity 0.15s ease; color:var(--ecv2-g400); font-size:12px; } |
| 555 |
.ecv2-category-edit-icon .dashicons { font-size:13px; width:13px; height:13px; } |
| 556 |
.ecv2-row:hover .ecv2-category-edit-icon { opacity:1; } |
| 557 |
.ecv2-category-display:hover .ecv2-category-edit-icon { color:var(--ecv2-primary); } |
| 558 |
|
| 559 |
/* Category popover */ |
| 560 |
.ecv2-cat-popover { position:absolute; top:100%; left:0; z-index:1000; background:#fff; border:1px solid var(--ecv2-g200); border-radius:var(--ecv2-rm); box-shadow:0 8px 24px rgba(0,0,0,0.12); width:280px; margin-top:4px; } |
| 561 |
.ecv2-cat-popover-header { padding:10px 12px 0; } |
| 562 |
.ecv2-cat-search-wrap { position:relative; } |
| 563 |
.ecv2-cat-search-input { width:100%; padding:7px 10px 7px 30px !important; border:1px solid var(--ecv2-g200); border-radius:var(--ecv2-rs); font-size:13px; outline:none; box-sizing:border-box; transition:border-color 0.15s; } |
| 564 |
.ecv2-cat-search-input:focus { border-color:var(--ecv2-primary); } |
| 565 |
.ecv2-cat-search-icon { position:absolute; left:9px; top:50%; transform:translateY(-50%); color:var(--ecv2-g400); font-size:14px; } |
| 566 |
.ecv2-cat-search-icon .dashicons { font-size:16px; width:16px; height:16px; } |
| 567 |
.ecv2-cat-search-spinner { position:absolute; right:9px; top:50%; transform:translateY(-50%); color:var(--ecv2-g400); } |
| 568 |
.ecv2-cat-search-spinner .dashicons { font-size:16px; width:16px; height:16px; } |
| 569 |
.ecv2-cat-results { max-height:160px; overflow-y:auto; border-top:1px solid var(--ecv2-g100); margin-top:8px; } |
| 570 |
.ecv2-cat-results:empty { display:none; } |
| 571 |
.ecv2-cat-result-item { display:flex; align-items:center; justify-content:space-between; padding:6px 12px; font-size:13px; cursor:pointer; transition:background 0.1s; } |
| 572 |
.ecv2-cat-result-item:hover { background:var(--ecv2-g50,#f9fafb); } |
| 573 |
.ecv2-cat-result-item-assigned { color:var(--ecv2-g400); cursor:default; } |
| 574 |
.ecv2-cat-result-item-assigned:hover { background:transparent; } |
| 575 |
.ecv2-cat-result-add { color:var(--ecv2-primary); font-size:12px; font-weight:600; white-space:nowrap; } |
| 576 |
.ecv2-cat-result-check { color:var(--ecv2-g400); font-size:11px; } |
| 577 |
.ecv2-cat-hint { padding:12px; color:var(--ecv2-g400); font-size:12px; text-align:center; } |
| 578 |
|
| 579 |
/* Assigned list inside popover */ |
| 580 |
.ecv2-cat-assigned { padding:0 0 6px; } |
| 581 |
.ecv2-cat-assigned-label { font-size:10px; text-transform:uppercase; letter-spacing:0.05em; color:var(--ecv2-g400); font-weight:600; padding:8px 12px 4px; } |
| 582 |
.ecv2-cat-assigned-list { max-height:140px; overflow-y:auto; } |
| 583 |
.ecv2-cat-assigned-item { display:flex; align-items:center; justify-content:space-between; padding:4px 12px; font-size:13px; } |
| 584 |
.ecv2-cat-assigned-item:hover { background:var(--ecv2-g50,#f9fafb); } |
| 585 |
.ecv2-cat-remove-btn { border:none; background:none; color:var(--ecv2-g400); cursor:pointer; padding:2px; line-height:1; border-radius:3px; transition:color 0.1s, background 0.1s; } |
| 586 |
.ecv2-cat-remove-btn:hover { color:#ef4444; background:rgba(239,68,68,0.08); } |
| 587 |
.ecv2-cat-remove-btn .dashicons { font-size:14px; width:14px; height:14px; } |
| 588 |
.ecv2-cat-empty { padding:8px 12px; font-size:12px; color:var(--ecv2-g400); font-style:italic; } |
| 589 |
.ecv2-cat-divider { border-top:1px solid var(--ecv2-g100); margin:0; } |
| 590 |
|
| 591 |
/* Cyan stat card color (On Sale) */ |
| 592 |
.ecv2-stat-cyan .ecv2-stat-value { color:#06b6d4; } |
| 593 |
|
| 594 |
/* Card view completeness bar */ |
| 595 |
.ecv2-card-completeness { margin-top:8px; padding-top:8px; border-top:1px solid var(--ecv2-g100); } |
| 596 |
.ecv2-card-score-bar { height:3px; background:var(--ecv2-g100); border-radius:2px; overflow:hidden; margin-bottom:4px; } |
| 597 |
.ecv2-card-score-bar > div { height:100%; border-radius:2px; transition:width .3s; } |
| 598 |
.ecv2-card-score-text { font-size:10px; color:var(--ecv2-g400); line-height:1.3; display:block; } |
| 599 |
.ecv2-card-sku-wrap { cursor:pointer; min-height:22px; } |
| 600 |
.ecv2-card-sku-input { width:100%; padding:3px 6px; border:1px solid var(--ecv2-primary); border-radius:var(--ecv2-rs); font-size:12px; font-family:monospace; box-sizing:border-box; outline:none; box-shadow:0 0 0 2px var(--ecv2-primary-light); } |
| 601 |
|
| 602 |
/* Filter select dropdowns */ |
| 603 |
/* V2 Select2 isolation (prevent v1 admin.css from interfering) */ |
| 604 |
.ecv2-wrap .select2-container { float:none !important; min-width:0 !important; } |
| 605 |
.ecv2-wrap .ecv2-filter-select { min-width:200px; max-width:100%; padding:6px 10px; border:1px solid var(--ecv2-g300); border-radius:var(--ecv2-rs); background:#fff; font-size:13px; color:var(--ecv2-g700); } |
| 606 |
.ecv2-wrap .select2-container--default .select2-selection--single { border-color:var(--ecv2-g300); border-radius:var(--ecv2-rs); height:34px; } |
| 607 |
.ecv2-wrap .select2-container--default .select2-selection--single .select2-selection__rendered { line-height:34px; padding-left:10px; font-size:13px; color:var(--ecv2-g700); } |
| 608 |
.ecv2-wrap .select2-container--default .select2-selection--single .select2-selection__arrow { height:34px; } |
| 609 |
|
| 610 |
/* Quick Edit Slideout V2 Styles */ |
| 611 |
.ecv2-qe-subtitle { font-size:12px; color:var(--ecv2-g500); padding:0 20px 10px; border-bottom:1px solid var(--ecv2-g200); } |
| 612 |
.ecv2-qe-top-row { display:flex; gap:16px; margin-bottom:20px; align-items:flex-start; } |
| 613 |
.ecv2-qe-image-wrap { width:72px; height:72px; flex-shrink:0; border-radius:10px; overflow:hidden; border:1px solid var(--ecv2-g200); background:var(--ecv2-g50); } |
| 614 |
.ecv2-qe-image-wrap img { width:100%; height:100%; object-fit:cover; display:block; } |
| 615 |
.ecv2-qe-image-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:var(--ecv2-g300); } |
| 616 |
.ecv2-qe-image-placeholder .dashicons { font-size:28px; width:28px; height:28px; } |
| 617 |
.ecv2-qe-title-field { flex:1; min-width:0; } |
| 618 |
.ecv2-qe-label { display:block; font-size:11px; font-weight:700; color:var(--ecv2-g500); text-transform:uppercase; letter-spacing:.05em; margin-bottom:5px; } |
| 619 |
.ecv2-qe-input { width:100%; padding:8px 12px; border:1.5px solid var(--ecv2-g200); border-radius:var(--ecv2-r); font-size:13px; color:var(--ecv2-g800); font-family:inherit; outline:none; transition:border-color var(--ecv2-tr); background:#fff; } |
| 620 |
.ecv2-qe-input:focus { border-color:var(--ecv2-primary); box-shadow:0 0 0 2px var(--ecv2-primary-light); } |
| 621 |
.ecv2-qe-select { width:100%; } |
| 622 |
.ecv2-qe-field { margin-bottom:16px; } |
| 623 |
.ecv2-qe-field-row { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px; } |
| 624 |
.ecv2-qe-field-half { flex:1; min-width:120px; } |
| 625 |
.ecv2-qe-field-with-btn { display:flex; gap:8px; align-items:flex-start; } |
| 626 |
.ecv2-qe-field-with-btn select, .ecv2-qe-field-with-btn input { flex:1; min-width:0; } |
| 627 |
.ecv2-qe-toggle-row { display:flex; align-items:center; justify-content:space-between; padding:14px 0; border-top:1px solid var(--ecv2-g100); margin-bottom:4px; } |
| 628 |
.ecv2-qe-toggle-row:first-of-type { border-top:none; } |
| 629 |
.ecv2-qe-toggle-info { flex:1; } |
| 630 |
.ecv2-qe-toggle-title { font-size:14px; font-weight:600; color:var(--ecv2-g800); } |
| 631 |
.ecv2-qe-toggle-desc { font-size:12px; color:var(--ecv2-g400); margin-top:2px; } |
| 632 |
.ecv2-qe-hint { font-size:12px; color:var(--ecv2-g400); margin:0; } |
| 633 |
/* ========== Stock Badge Menu ========== */ |
| 634 |
.ecv2-stock-wrap { position:relative; display:inline-block; } |
| 635 |
.ecv2-stock-badge-btn { background:none; border:none; padding:0; cursor:pointer; line-height:1; } |
| 636 |
.ecv2-stock-badge-btn:hover .ecv2-stock-badge { opacity:.85; } |
| 637 |
.ecv2-stock-badge-btn:focus { outline:none; } |
| 638 |
.ecv2-stock-badge-btn:focus-visible .ecv2-stock-badge { box-shadow:0 0 0 2px var(--ecv2-primary-light); } |
| 639 |
|
| 640 |
.ecv2-stock-menu { display:none; position:absolute; left:0; top:calc(100% + 4px); z-index:110; background:#fff; border:1px solid var(--ecv2-g200); border-radius:var(--ecv2-r); box-shadow:var(--ecv2-shlg); min-width:240px; padding:6px 0; } |
| 641 |
.ecv2-stock-menu.ecv2-stock-menu-open { display:block; } |
| 642 |
|
| 643 |
.ecv2-stock-menu-section { padding:8px 14px; } |
| 644 |
.ecv2-stock-menu-label { display:block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--ecv2-g400); padding:4px 14px; } |
| 645 |
.ecv2-stock-menu-label-section { padding-top:6px; } |
| 646 |
.ecv2-stock-menu-divider { height:1px; background:var(--ecv2-g100); margin:4px 0; } |
| 647 |
|
| 648 |
.ecv2-stock-menu-inline { display:flex; align-items:center; gap:6px; margin-top:4px; } |
| 649 |
.ecv2-stock-menu-input { width:80px; padding:5px 8px; border:1px solid var(--ecv2-g300); border-radius:var(--ecv2-rs); font-size:13px; text-align:center; } |
| 650 |
.ecv2-stock-menu-input:focus { outline:none; border-color:var(--ecv2-primary); box-shadow:0 0 0 2px var(--ecv2-primary-light); } |
| 651 |
|
| 652 |
.ecv2-stock-menu-item { display:flex; align-items:center; gap:8px; padding:8px 14px; font-size:13px; color:var(--ecv2-g700); text-decoration:none; transition:background var(--ecv2-tr); white-space:nowrap; cursor:pointer; } |
| 653 |
.ecv2-stock-menu-item:hover { background:var(--ecv2-g50); color:var(--ecv2-primary); text-decoration:none; } |
| 654 |
.ecv2-stock-menu-item .dashicons { font-size:16px; width:16px; height:16px; color:var(--ecv2-blue); } |
| 655 |
|
| 656 |
/* Tracking type radio options */ |
| 657 |
.ecv2-stock-menu-type { display:flex; align-items:flex-start; gap:10px; padding:7px 14px; text-decoration:none; cursor:pointer; transition:background var(--ecv2-tr); } |
| 658 |
.ecv2-stock-menu-type:hover { background:var(--ecv2-g50); text-decoration:none; } |
| 659 |
.ecv2-stock-menu-type-active { background:var(--ecv2-primary-light); } |
| 660 |
.ecv2-stock-menu-type-active:hover { background:var(--ecv2-primary-light); } |
| 661 |
|
| 662 |
.ecv2-stock-menu-type-radio { width:16px; height:16px; border:2px solid var(--ecv2-g300); border-radius:50%; flex-shrink:0; margin-top:2px; display:flex; align-items:center; justify-content:center; } |
| 663 |
.ecv2-stock-menu-type-active .ecv2-stock-menu-type-radio { border-color:var(--ecv2-primary); } |
| 664 |
.ecv2-stock-menu-type-dot { width:8px; height:8px; border-radius:50%; background:var(--ecv2-primary); } |
| 665 |
|
| 666 |
.ecv2-stock-menu-type-info { display:flex; flex-direction:column; gap:1px; } |
| 667 |
.ecv2-stock-menu-type-name { font-size:13px; font-weight:500; color:var(--ecv2-g800); line-height:1.3; } |
| 668 |
.ecv2-stock-menu-type-desc { font-size:11px; color:var(--ecv2-g400); line-height:1.3; } |
| 669 |
|
| 670 |
/* Locked Manage Variants link (PRO feature shown disabled for free/expired) */ |
| 671 |
.ecv2-stock-menu-item-locked { opacity:.65; cursor:pointer; } |
| 672 |
.ecv2-stock-menu-item-locked:hover { background:var(--ecv2-g50); color:var(--ecv2-g700); opacity:.85; } |
| 673 |
.ecv2-stock-menu-item-locked .dashicons-list-view { color:var(--ecv2-g400); } |
| 674 |
|
| 675 |
/* Locked tracking-type row (PRO feature) */ |
| 676 |
.ecv2-stock-menu-type-locked { opacity:.65; cursor:pointer; } |
| 677 |
.ecv2-stock-menu-type-locked:hover { background:var(--ecv2-g50); opacity:.85; } |
| 678 |
.ecv2-stock-menu-type-locked .ecv2-stock-menu-type-radio { border-color:var(--ecv2-g200); background:var(--ecv2-g50); } |
| 679 |
|
| 680 |
/* Current+locked shows the dot at normal opacity so selection stays legible */ |
| 681 |
.ecv2-stock-menu-type-locked.ecv2-stock-menu-type-active { opacity:.85; } |
| 682 |
.ecv2-stock-menu-type-locked.ecv2-stock-menu-type-active .ecv2-stock-menu-type-radio { border-color:var(--ecv2-primary); background:#fff; } |
| 683 |
|
| 684 |
.ecv2-menu-lock-icon { font-size:13px; width:13px; height:13px; color:#FC0; vertical-align:middle; margin-left:2px; } |
| 685 |
|
| 686 |
/* Fixed-position menus (used in card view to escape overflow) */ |
| 687 |
.ecv2-row-menu.ecv2-menu-fixed, |
| 688 |
.ecv2-stock-menu.ecv2-menu-fixed, |
| 689 |
.ecv2-cat-popover.ecv2-menu-fixed { position:fixed; } |
| 690 |
|
| 691 |
/* ========== Confirmation Dialog ========== */ |
| 692 |
.ecv2-modal-confirm { max-width:420px; } |
| 693 |
.ecv2-modal-confirm .ecv2-modal-body p { font-size:14px; color:var(--ecv2-g600); line-height:1.5; margin:0; } |
| 694 |
|
| 695 |
/* ========== Variant Popup Modal ========== */ |
| 696 |
.ecv2-modal-wide { max-width:760px; } |
| 697 |
|
| 698 |
.ecv2-variant-filters { padding:10px 20px; border-bottom:1px solid var(--ecv2-g200); } |
| 699 |
.ecv2-variant-filters:empty { display:none; } |
| 700 |
.ecv2-variant-filter-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; } |
| 701 |
.ecv2-variant-filter-select { min-width:120px; max-width:160px; } |
| 702 |
|
| 703 |
.ecv2-variant-body { padding:0 !important; max-height:55vh; overflow-y:auto; } |
| 704 |
.ecv2-variant-loading { display:flex; align-items:center; justify-content:center; gap:8px; padding:40px 20px; color:var(--ecv2-g400); font-size:14px; } |
| 705 |
.ecv2-variant-empty { text-align:center; padding:40px 20px; color:var(--ecv2-g400); font-size:14px; } |
| 706 |
|
| 707 |
@keyframes ecv2-spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } } |
| 708 |
.ecv2-spin { animation:ecv2-spin 1s linear infinite; } |
| 709 |
|
| 710 |
/* Variant table */ |
| 711 |
.ecv2-variant-table { width:100%; border-collapse:collapse; font-size:13px; } |
| 712 |
.ecv2-variant-table thead { background:var(--ecv2-g50); position:sticky; top:0; z-index:5; } |
| 713 |
.ecv2-variant-table thead th { padding:8px 12px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:var(--ecv2-g500); text-align:left; border-bottom:2px solid var(--ecv2-g200); white-space:nowrap; } |
| 714 |
.ecv2-variant-table tbody tr { border-bottom:1px solid var(--ecv2-g100); transition:background var(--ecv2-tr); } |
| 715 |
.ecv2-variant-table tbody tr:hover { background:var(--ecv2-g50); } |
| 716 |
.ecv2-variant-table tbody td { padding:8px 12px; vertical-align:middle; color:var(--ecv2-g700); } |
| 717 |
|
| 718 |
.ecv2-vt-label { font-weight:500; min-width:160px; } |
| 719 |
.ecv2-vt-sku { white-space:nowrap; } |
| 720 |
.ecv2-vt-price { white-space:nowrap; min-width:70px; } |
| 721 |
.ecv2-vt-qty { min-width:80px; } |
| 722 |
.ecv2-vt-status { width:60px; text-align:center; } |
| 723 |
|
| 724 |
/* Variant image column */ |
| 725 |
.ecv2-vt-img { width:50px; padding:4px 8px !important; } |
| 726 |
.ecv2-vt-img-wrap { position:relative; width:36px; height:36px; border-radius:var(--ecv2-rs); overflow:hidden; cursor:pointer; border:1px solid var(--ecv2-g200); transition:border-color var(--ecv2-tr), box-shadow var(--ecv2-tr); } |
| 727 |
.ecv2-vt-img-wrap:hover { border-color:var(--ecv2-primary); box-shadow:0 0 0 2px var(--ecv2-primary-light); } |
| 728 |
.ecv2-vt-img-thumb { width:100%; height:100%; object-fit:cover; display:block; } |
| 729 |
.ecv2-vt-img-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:var(--ecv2-g50); color:var(--ecv2-g300); } |
| 730 |
.ecv2-vt-img-placeholder .dashicons { font-size:16px; width:16px; height:16px; } |
| 731 |
.ecv2-vt-img-edit { position:absolute; bottom:0; right:0; left:0; height:14px; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity var(--ecv2-tr); } |
| 732 |
.ecv2-vt-img-wrap:hover .ecv2-vt-img-edit { opacity:1; } |
| 733 |
.ecv2-vt-img-edit .dashicons { font-size:10px; width:10px; height:10px; color:#fff; } |
| 734 |
.ecv2-vt-img-empty { display:block; width:36px; height:36px; } |
| 735 |
|
| 736 |
.ecv2-vt-row-disabled { opacity:.5; } |
| 737 |
.ecv2-vt-row-disabled td { color:var(--ecv2-g400); } |
| 738 |
|
| 739 |
.ecv2-vt-qty-input { width:72px; padding:4px 6px; border:1px solid var(--ecv2-g300); border-radius:var(--ecv2-rs); font-size:13px; text-align:center; } |
| 740 |
.ecv2-vt-qty-input:focus { outline:none; border-color:var(--ecv2-primary); box-shadow:0 0 0 2px var(--ecv2-primary-light); } |
| 741 |
.ecv2-vt-qty-input:disabled { background:var(--ecv2-g50); color:var(--ecv2-g400); } |
| 742 |
|
| 743 |
.ecv2-vt-qty-disabled { font-size:12px; color:var(--ecv2-g400); font-style:italic; } |
| 744 |
.ecv2-vt-qty-unlimited { font-size:16px; color:var(--ecv2-g400); } |
| 745 |
|
| 746 |
.ecv2-vt-status-badge { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; font-size:11px; font-weight:700; } |
| 747 |
.ecv2-vt-status-ok { background:var(--ecv2-primary-light); color:var(--ecv2-primary); } |
| 748 |
.ecv2-vt-status-out { background:var(--ecv2-danger-light); color:var(--ecv2-danger); } |
| 749 |
.ecv2-vt-status-unlimited { background:var(--ecv2-g100); color:var(--ecv2-g400); width:auto; padding:0 6px; border-radius:10px; font-size:14px; } |
| 750 |
.ecv2-vt-status-off { background:var(--ecv2-g100); color:var(--ecv2-g400); width:auto; padding:0 6px; border-radius:10px; font-size:10px; } |
| 751 |
|
| 752 |
.ecv2-btn .dashicons.ecv2-spin { font-size: 14px; width: 14px; height: 14px; vertical-align: text-bottom; margin-right: 4px; line-height: 1; } |
| 753 |
.ecv2-btn-busy { opacity: .85; cursor: progress !important; } |
| 754 |
|
| 755 |
/* ========== Variant Popup: Active toggle column ========== */ |
| 756 |
.ecv2-vt-active { width:70px; text-align:center; } |
| 757 |
|
| 758 |
/* ========== Variant Popup: Stock group (qty + tracking icon) ========== */ |
| 759 |
.ecv2-vt-stock-group { display:inline-flex; align-items:center; gap:6px; } |
| 760 |
|
| 761 |
.ecv2-vt-tracking-toggle { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:4px; color:var(--ecv2-g400); text-decoration:none; transition:color var(--ecv2-tr), background var(--ecv2-tr); } |
| 762 |
.ecv2-vt-tracking-toggle .dashicons { font-size:16px; width:16px; height:16px; } |
| 763 |
.ecv2-vt-tracking-toggle:hover { color:var(--ecv2-primary); background:var(--ecv2-primary-light); } |
| 764 |
.ecv2-vt-tracking-toggle:focus { outline:none; box-shadow:0 0 0 2px var(--ecv2-primary-light); } |
| 765 |
|
| 766 |
.ecv2-vt-tracking-on { color:var(--ecv2-primary); } |
| 767 |
.ecv2-vt-tracking-on:hover { color:var(--ecv2-g600); background:var(--ecv2-g100); } |
| 768 |
|
| 769 |
.ecv2-vt-tracking-off { color:var(--ecv2-g300); } |
| 770 |
.ecv2-vt-tracking-off:hover { color:var(--ecv2-primary); background:var(--ecv2-primary-light); } |
| 771 |
|
| 772 |
.ecv2-vt-tracking-saving { opacity:0.5; pointer-events:none; } |
| 773 |
|
| 774 |
/* Clickable variant status badges */ |
| 775 |
.ecv2-vt-status-badge-toggle { cursor:pointer; transition:opacity var(--ecv2-tr), transform 0.1s; user-select:none; } |
| 776 |
.ecv2-vt-status-badge-toggle:hover { opacity:0.75; transform:scale(1.1); } |
| 777 |
.ecv2-vt-status-badge-toggle:active { transform:scale(0.95); } |
| 778 |
.ecv2-vt-status-saving { opacity:0.5; pointer-events:none; } |
| 779 |
|
| 780 |
/* Variant popup footer / pagination */ |
| 781 |
.ecv2-variant-footer { display:flex; align-items:center; justify-content:space-between; padding:10px 20px; flex-wrap:wrap; gap:8px; } |
| 782 |
.ecv2-variant-paging-info { font-size:12px; color:var(--ecv2-g500); } |
| 783 |
.ecv2-variant-paging-btns { display:flex; align-items:center; gap:6px; } |
| 784 |
.ecv2-variant-paging-btns span { font-size:12px; color:var(--ecv2-g600); } |
| 785 |
.ecv2-variant-paging-btns .disabled { opacity:.4; pointer-events:none; } |
| 786 |
|
| 787 |
/* Responsive adjustments for variant popup */ |
| 788 |
@media screen and (max-width:768px) { |
| 789 |
.ecv2-modal-wide { max-width:100%; margin:10px; } |
| 790 |
.ecv2-vt-sku { max-width:80px; overflow:hidden; } |
| 791 |
.ecv2-variant-table thead th:nth-child(2) { max-width:80px; } |
| 792 |
.ecv2-price-menu { left:auto; right:0; min-width:200px; } |
| 793 |
.ecv2-stock-menu { left:auto; right:0; } |
| 794 |
} |
| 795 |
|
| 796 |
/* ========== Variant Save Hint Icon (Fix #4) ========== */ |
| 797 |
.ecv2-vt-qty { position:relative; } |
| 798 |
.ecv2-vt-save-hint { position:absolute; right:4px; top:50%; transform:translateY(-50%); display:inline-flex; align-items:center; pointer-events:none; } |
| 799 |
.ecv2-vt-save-hint .dashicons { font-size:16px; width:16px; height:16px; } |
| 800 |
.ecv2-vt-save-hint-dirty { color:var(--ecv2-amber); animation:ecv2-pulse 1.5s ease-in-out infinite; } |
| 801 |
.ecv2-vt-save-hint-saving { color:var(--ecv2-g400); } |
| 802 |
.ecv2-vt-save-hint-done { color:var(--ecv2-primary); } |
| 803 |
|
| 804 |
@keyframes ecv2-pulse { |
| 805 |
0%, 100% { opacity:1; } |
| 806 |
50% { opacity:.4; } |
| 807 |
} |
| 808 |
|
| 809 |
/* ========== Price Column: Variant Pricing ========== */ |
| 810 |
.ecv2-price-cell { position:relative; display:inline-block; } |
| 811 |
.ecv2-price-range-sep { color:var(--ecv2-g400); font-size:12px; margin:0 1px; } |
| 812 |
.ecv2-price-badge-btn { background:none; border:none; padding:0; cursor:pointer; text-align:left; line-height:1.4; } |
| 813 |
.ecv2-price-badge-btn:hover { opacity:.8; } |
| 814 |
.ecv2-price-badge-btn:focus { outline:none; } |
| 815 |
.ecv2-price-badge-btn:focus-visible .ecv2-price-wrap { box-shadow:0 0 0 2px var(--ecv2-primary-light); border-radius:var(--ecv2-rs); } |
| 816 |
.ecv2-price-cell-main { display:flex; align-items:flex-start; gap:6px; flex-wrap:wrap; } |
| 817 |
.ecv2-price-variant-badge { display:inline-flex; align-items:center; gap:2px; background:var(--ecv2-blue-light); color:var(--ecv2-blue); border:1px solid transparent; border-radius:10px; padding:1px 7px 1px 4px; font-size:11px; font-weight:600; line-height:1; margin-top:2px; cursor:pointer; transition:background .12s ease, border-color .12s ease; font-family:inherit; } |
| 818 |
.ecv2-price-variant-badge:hover { background:#fff; border-color:var(--ecv2-blue); } |
| 819 |
.ecv2-price-variant-badge:focus { outline:none; } |
| 820 |
.ecv2-price-variant-badge:focus-visible { box-shadow:0 0 0 2px var(--ecv2-primary-light); border-color:var(--ecv2-primary); } |
| 821 |
.ecv2-price-variant-badge .dashicons { font-size:12px; width:12px; height:12px; } |
| 822 |
.ecv2-price-variant-count { font-size:10px; } |
| 823 |
.ecv2-price-base-label { display:block; font-size:10px; color:var(--ecv2-g400); margin-top:2px; line-height:1.3; } |
| 824 |
|
| 825 |
/* ========== Price Editor Popover ========== */ |
| 826 |
.ecv2-price-menu { display:none; position:absolute; left:0; top:calc(100% + 4px); z-index:110; background:#fff; border:1px solid var(--ecv2-g200); border-radius:var(--ecv2-r); box-shadow:var(--ecv2-shlg); min-width:220px; padding:12px; } |
| 827 |
.ecv2-price-menu.ecv2-price-menu-open { display:block; } |
| 828 |
.ecv2-price-menu.ecv2-menu-fixed { position:fixed; } |
| 829 |
.ecv2-price-menu-section { margin-bottom:10px; } |
| 830 |
.ecv2-price-menu-section:last-of-type { margin-bottom:8px; } |
| 831 |
.ecv2-price-menu-label { display:block; font-size:11px; font-weight:600; color:var(--ecv2-g500); margin-bottom:3px; } |
| 832 |
.ecv2-price-menu-hint { font-weight:400; color:var(--ecv2-g400); } |
| 833 |
.ecv2-price-menu-input { width:100%; padding:6px 8px; border:1px solid var(--ecv2-g300); border-radius:var(--ecv2-rs); font-size:13px; box-sizing:border-box; } |
| 834 |
.ecv2-price-menu-input:focus { outline:none; border-color:var(--ecv2-primary); box-shadow:0 0 0 2px var(--ecv2-primary-light); } |
| 835 |
.ecv2-price-menu-input::placeholder { color:var(--ecv2-g300); font-style:italic; } |
| 836 |
.ecv2-price-menu-actions { display:flex; justify-content:flex-end; gap:6px; } |
| 837 |
.ecv2-price-menu-preview { padding:8px 10px; background:var(--ecv2-g50); border:1px solid var(--ecv2-g200); border-radius:var(--ecv2-rs); margin-bottom:10px; font-size:13px; line-height:1.5; } |
| 838 |
.ecv2-price-menu-preview-list { text-decoration:line-through; color:var(--ecv2-g400); margin-right:6px; } |
| 839 |
.ecv2-price-menu-preview-current { font-weight:700; color:var(--ecv2-primary); } |
| 840 |
.ecv2-price-menu-preview-tag { display:inline-block; padding:1px 6px; border-radius:4px; font-size:10px; font-weight:700; background:#ecfeff; color:#06b6d4; margin-left:4px; } |
| 841 |
.ecv2-price-menu-preview-warn { color:var(--ecv2-amber); font-size:12px; } |
| 842 |
|
| 843 |
/* ----- Expanded popover (advanced fields) ----- */ |
| 844 |
.ecv2-price-menu-expanded { min-width:280px; max-width:340px; } |
| 845 |
.ecv2-price-menu-expanded .ecv2-price-menu-actions { justify-content:flex-end; padding-top:8px; border-top:1px solid var(--ecv2-g100); margin-top:4px; } |
| 846 |
|
| 847 |
/* "More pricing options" disclosure button */ |
| 848 |
.ecv2-price-menu-more { width:100%; display:flex; justify-content:space-between; align-items:center; padding:8px 0; margin:4px 0 0; background:transparent; border:none; border-top:1px solid var(--ecv2-g100); font-size:12px; font-weight:600; color:var(--ecv2-g600); cursor:pointer; text-align:left; } |
| 849 |
.ecv2-price-menu-more:hover { color:var(--ecv2-g800); } |
| 850 |
.ecv2-price-menu-more:focus-visible { outline:2px solid var(--ecv2-primary-light); outline-offset:2px; border-radius:4px; } |
| 851 |
.ecv2-price-menu-more-chev { transition:transform .15s ease; font-size:14px; width:14px; height:14px; } |
| 852 |
.ecv2-price-menu-more-chev.ecv2-rotated { transform:rotate(180deg); } |
| 853 |
.ecv2-price-menu-extras { padding-top:4px; border-top:1px solid var(--ecv2-g100); margin-top:0; } |
| 854 |
|
| 855 |
/* Group container inside extras */ |
| 856 |
.ecv2-price-menu-group { padding:10px 0; border-bottom:1px dashed var(--ecv2-g100); } |
| 857 |
.ecv2-price-menu-group:last-of-type { border-bottom:none; padding-bottom:6px; } |
| 858 |
.ecv2-price-menu-group-managers { padding-top:12px; } |
| 859 |
|
| 860 |
/* Header row inside a group (label + PRO tag) */ |
| 861 |
.ecv2-price-menu-row-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; } |
| 862 |
.ecv2-price-menu-row-head .ecv2-price-menu-label { margin-bottom:0; } |
| 863 |
|
| 864 |
/* Toggle row (checkbox + label) */ |
| 865 |
.ecv2-price-menu-toggle { display:flex; align-items:center; gap:8px; cursor:pointer; font-size:12px; color:var(--ecv2-g700); user-select:none; } |
| 866 |
.ecv2-price-menu-toggle input[type="checkbox"] { margin:0; flex-shrink:0; } |
| 867 |
.ecv2-price-menu-toggle-text { font-weight:500; } |
| 868 |
.ecv2-price-menu-toggle-text .ecv2-price-menu-hint { font-weight:400; color:var(--ecv2-g400); } |
| 869 |
.ecv2-price-menu-toggle-sm { margin:6px 0; font-size:11px; } |
| 870 |
|
| 871 |
/* Conditional area (revealed when its parent toggle/select is active) */ |
| 872 |
.ecv2-price-menu-conditional { padding:8px 0 4px 22px; display:flex; flex-direction:column; gap:6px; } |
| 873 |
.ecv2-price-menu-conditional .ecv2-price-menu-label { margin-top:4px; } |
| 874 |
|
| 875 |
/* Two-column row (range low/high) */ |
| 876 |
.ecv2-price-menu-row { display:flex; gap:8px; } |
| 877 |
.ecv2-price-menu-col { flex:1; min-width:0; } |
| 878 |
.ecv2-price-menu-col .ecv2-price-menu-label { margin-bottom:3px; } |
| 879 |
|
| 880 |
/* Selects inside the popover (label dropdown, multi-select for roles) */ |
| 881 |
.ecv2-price-menu-select { width:100%; padding:6px 8px; border:1px solid var(--ecv2-g300); border-radius:var(--ecv2-rs); font-size:12px; background:#fff; box-sizing:border-box; color:var(--ecv2-g800); } |
| 882 |
.ecv2-price-menu-select:focus { outline:none; border-color:var(--ecv2-primary); box-shadow:0 0 0 2px var(--ecv2-primary-light); } |
| 883 |
select.ecv2-price-menu-select[multiple] { min-height:60px; padding:4px; } |
| 884 |
|
| 885 |
/* PRO tag (for currently locked groups) */ |
| 886 |
.ecv2-price-menu-pro-tag { display:inline-block; padding:1px 6px; font-size:9px; font-weight:700; letter-spacing:.04em; background:#fef3c7; color:#92400e; border-radius:3px; text-transform:uppercase; } |
| 887 |
.ecv2-price-menu-group.ecv2-price-menu-pro { opacity:.85; } |
| 888 |
.ecv2-price-menu-group.ecv2-price-menu-pro .ecv2-price-menu-toggle { cursor:pointer; } |
| 889 |
.ecv2-price-menu-group.ecv2-price-menu-pro .ecv2-price-menu-select { background:var(--ecv2-g50); cursor:not-allowed; } |
| 890 |
|
| 891 |
/* Manager buttons (Volume / B2B) */ |
| 892 |
.ecv2-price-menu-mgr-btn { width:100%; display:flex; align-items:center; gap:8px; padding:8px 10px; margin-top:6px; background:#fff; border:1px solid var(--ecv2-g200); border-radius:var(--ecv2-rs); font-size:12px; color:var(--ecv2-g700); cursor:pointer; text-align:left; transition:background .12s ease, border-color .12s ease; } |
| 893 |
.ecv2-price-menu-mgr-btn:hover { background:var(--ecv2-g50); border-color:var(--ecv2-g300); } |
| 894 |
.ecv2-price-menu-mgr-btn:focus-visible { outline:none; border-color:var(--ecv2-primary); box-shadow:0 0 0 2px var(--ecv2-primary-light); } |
| 895 |
.ecv2-price-menu-mgr-btn .dashicons { color:var(--ecv2-g500); font-size:16px; width:16px; height:16px; flex-shrink:0; } |
| 896 |
.ecv2-price-menu-mgr-label { flex:1; font-weight:600; } |
| 897 |
.ecv2-price-menu-mgr-count { font-size:11px; font-weight:500; color:var(--ecv2-g600); padding:1px 7px; background:var(--ecv2-g100); border-radius:10px; } |
| 898 |
.ecv2-price-menu-mgr-count-empty { color:var(--ecv2-g400); background:transparent; } |
| 899 |
.ecv2-price-menu-mgr-chev { color:var(--ecv2-g300) !important; font-size:14px !important; } |
| 900 |
|
| 901 |
/* ----- Closed-cell badge row (login / label / range / tier / B2B) ----- */ |
| 902 |
.ecv2-price-flags { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; } |
| 903 |
.ecv2-price-flag { display:inline-flex; align-items:center; gap:2px; padding:1px 6px 1px 4px; font-size:10px; font-weight:600; background:var(--ecv2-g50); color:var(--ecv2-g600); border:1px solid var(--ecv2-g200); border-radius:10px; line-height:1.4; max-width:140px; } |
| 904 |
.ecv2-price-flag .dashicons { font-size:11px; width:11px; height:11px; line-height:1; } |
| 905 |
.ecv2-price-flag-label { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } |
| 906 |
button.ecv2-price-flag { font-family:inherit; cursor:pointer; transition:filter .12s ease, box-shadow .12s ease; } |
| 907 |
button.ecv2-price-flag:hover { filter:brightness( 0.96 ); } |
| 908 |
button.ecv2-price-flag:focus { outline:none; } |
| 909 |
button.ecv2-price-flag:focus-visible { box-shadow:0 0 0 2px var(--ecv2-primary-light); border-color:var(--ecv2-primary); } |
| 910 |
.ecv2-price-flag-login { background:#fef3c7; color:#92400e; border-color:#fde68a; } |
| 911 |
.ecv2-price-flag-login .dashicons { color:#92400e; } |
| 912 |
.ecv2-price-flag-pricelabel { background:#ecfeff; color:#0e7490; border-color:#a5f3fc; } |
| 913 |
.ecv2-price-flag-pricelabel .dashicons { color:#0e7490; } |
| 914 |
.ecv2-price-flag-range { background:#f5f3ff; color:#5b21b6; border-color:#ddd6fe; } |
| 915 |
.ecv2-price-flag-range .dashicons { color:#5b21b6; } |
| 916 |
.ecv2-price-flag-tier { background:#ecfdf5; color:#065f46; border-color:#a7f3d0; } |
| 917 |
.ecv2-price-flag-tier .dashicons { color:#065f46; } |
| 918 |
.ecv2-price-flag-b2b { background:#eff6ff; color:#1e40af; border-color:#bfdbfe; } |
| 919 |
.ecv2-price-flag-b2b .dashicons { color:#1e40af; } |
| 920 |
|
| 921 |
/* Card view: badges already wrap nicely; just ensure spacing */ |
| 922 |
.ecv2-card-meta .ecv2-price-flags { margin-top:6px; } |
| 923 |
|
| 924 |
/* ========== Variant Popup: Summary Bar ========== */ |
| 925 |
.ecv2-variant-summary { display:flex; flex-wrap:wrap; gap:0; border-bottom:1px solid var(--ecv2-g200); background:var(--ecv2-g50); } |
| 926 |
.ecv2-variant-summary-item { flex:1 1 0; padding:10px 16px; text-align:center; border-right:1px solid var(--ecv2-g200); min-width:120px; } |
| 927 |
.ecv2-variant-summary-item:last-child { border-right:none; } |
| 928 |
.ecv2-variant-summary-label { display:block; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:var(--ecv2-g400); margin-bottom:2px; } |
| 929 |
.ecv2-variant-summary-value { display:block; font-size:16px; font-weight:700; color:var(--ecv2-g800); } |
| 930 |
.ecv2-variant-summary-note { font-size:10px; font-weight:400; color:var(--ecv2-g400); } |
| 931 |
|
| 932 |
/* ========== Variant Popup: Editable Price Cell ========== */ |
| 933 |
.ecv2-vt-price-editable { position:relative; } |
| 934 |
.ecv2-vt-price-input { width:80px; padding:4px 6px; border:1px solid transparent; border-radius:var(--ecv2-rs); font-size:13px; text-align:right; background:transparent; transition:border-color var(--ecv2-tr), background var(--ecv2-tr); } |
| 935 |
.ecv2-vt-price-input:hover { border-color:var(--ecv2-g300); background:#fff; } |
| 936 |
.ecv2-vt-price-input:focus { outline:none; border-color:var(--ecv2-primary); box-shadow:0 0 0 2px var(--ecv2-primary-light); background:#fff; } |
| 937 |
.ecv2-vt-price-input:disabled { background:var(--ecv2-g50); color:var(--ecv2-g400); } |
| 938 |
.ecv2-vt-price-input::placeholder { color:var(--ecv2-g300); font-size:11px; font-style:italic; } |
| 939 |
|
| 940 |
|
| 941 |
/* Show raw input while editing, formatted display otherwise */ |
| 942 |
.ecv2-vt-price-editable .ecv2-vt-price-formatted { display:none; } |
| 943 |
.ecv2-vt-price-editable .ecv2-vt-price-input { display:inline-block; } |
| 944 |
|
| 945 |
/* When not focused, show formatted display and hide input */ |
| 946 |
.ecv2-vt-price-editable:not(.ecv2-vt-price-editing) .ecv2-vt-price-formatted { display:inline-block; font-size:13px; color:var(--ecv2-g700); cursor:text; padding:4px 6px; } |
| 947 |
.ecv2-vt-price-editable:not(.ecv2-vt-price-editing) .ecv2-vt-price-input { position:absolute; opacity:0; width:0; height:0; pointer-events:none; } |
| 948 |
|
| 949 |
.ecv2-vt-price-base { color:var(--ecv2-g400) !important; font-style:italic; font-size:11px !important; } |
| 950 |
.ecv2-vt-price-disabled { font-size:12px; color:var(--ecv2-g400); font-style:italic; } |
| 951 |
|
| 952 |
/* ========== Variant Popup: Editable SKU Cell ========== */ |
| 953 |
.ecv2-vt-sku-editable { position:relative; } |
| 954 |
.ecv2-vt-sku-input { width:90px; padding:4px 6px; border:1px solid transparent; border-radius:var(--ecv2-rs); font-size:12px; font-family:SFMono-Regular, Menlo, Monaco, Consolas, monospace; background:transparent; transition:border-color var(--ecv2-tr), background var(--ecv2-tr); } |
| 955 |
.ecv2-vt-sku-input:hover { border-color:var(--ecv2-g300); background:#fff; } |
| 956 |
.ecv2-vt-sku-input:focus { outline:none; border-color:var(--ecv2-primary); box-shadow:0 0 0 2px var(--ecv2-primary-light); background:#fff; } |
| 957 |
.ecv2-vt-sku-input:disabled { background:var(--ecv2-g50); color:var(--ecv2-g400); } |
| 958 |
.ecv2-vt-sku-input::placeholder { color:var(--ecv2-g300); font-style:italic; font-family:inherit; } |
| 959 |
|
| 960 |
.ecv2-vt-sku-editable .ecv2-vt-sku-formatted { display:none; } |
| 961 |
.ecv2-vt-sku-editable .ecv2-vt-sku-input { display:inline-block; } |
| 962 |
|
| 963 |
.ecv2-vt-sku-editable:not(.ecv2-vt-sku-editing) .ecv2-vt-sku-formatted { display:inline-block; cursor:text; padding:4px 6px; } |
| 964 |
.ecv2-vt-sku-editable:not(.ecv2-vt-sku-editing) .ecv2-vt-sku-input { position:absolute; opacity:0; width:0; height:0; pointer-events:none; } |
| 965 |
|
| 966 |
.ecv2-vt-sku-disabled { font-size:12px; color:var(--ecv2-g400); font-style:italic; } |
| 967 |
.ecv2-vt-sku-empty { color:var(--ecv2-g300); } |
| 968 |
|
| 969 |
/* Save hint for price and sku cells */ |
| 970 |
.ecv2-vt-price-editable, .ecv2-vt-sku-editable { position:relative; } |
| 971 |
.ecv2-vt-price-editable .ecv2-vt-save-hint, |
| 972 |
.ecv2-vt-sku-editable .ecv2-vt-save-hint { position:absolute; right:2px; top:50%; transform:translateY(-50%); display:inline-flex; align-items:center; pointer-events:none; } |
| 973 |
|
| 974 |
/* ========== Responsive: Variant Popup Summary ========== */ |
| 975 |
@media screen and (max-width:768px) { |
| 976 |
.ecv2-variant-summary { flex-direction:column; } |
| 977 |
.ecv2-variant-summary-item { border-right:none; border-bottom:1px solid var(--ecv2-g200); padding:8px 12px; text-align:left; display:flex; align-items:center; gap:8px; } |
| 978 |
.ecv2-variant-summary-item:last-child { border-bottom:none; } |
| 979 |
.ecv2-variant-summary-label { margin-bottom:0; } |
| 980 |
.ecv2-variant-summary-value { font-size:14px; } |
| 981 |
} |
| 982 |
|
| 983 |
/* ========== Responsive: Filter Drawer ========== */ |
| 984 |
@media screen and (max-width:480px) { |
| 985 |
.ecv2-filter-drawer { width:100%; max-width:100%; } |
| 986 |
.ecv2-active-filter-tags { display:none; } |
| 987 |
} |
| 988 |
@media screen and (max-width:782px) { |
| 989 |
.ecv2-active-filter-tags { width:100%; order:10; } |
| 990 |
} |
| 991 |
|
| 992 |
/* ========== Filter Overlay Loader ========== */ |
| 993 |
.ecv2-filter-overlay { display:none; position:fixed; inset:0; z-index:100001; background:rgba(255,255,255,0.7); align-items:center; justify-content:center; } |
| 994 |
.ecv2-filter-overlay-visible { display:flex; } |
| 995 |
.ecv2-filter-overlay-inner { display:flex; flex-direction:column; align-items:center; gap:12px; padding:32px 40px; background:#fff; border-radius:var(--ecv2-r); box-shadow:0 4px 24px rgba(0,0,0,0.12); } |
| 996 |
.ecv2-filter-overlay-spinner { font-size:28px; width:28px; height:28px; color:var(--ecv2-primary); } |
| 997 |
.ecv2-filter-overlay-text { font-size:14px; font-weight:500; color:var(--ecv2-g600); } |
| 998 |
|
| 999 |
/* ========== Print: Hide drawer ========== */ |
| 1000 |
@media print { |
| 1001 |
.ecv2-drawer-backdrop, .ecv2-filter-drawer, .ecv2-filter-overlay { display:none !important; } |
| 1002 |
} |
| 1003 |
|
| 1004 |
/* ========== Image Manager: Hover Edit Icon ========== */ |
| 1005 |
/* Table view: clickable wrap */ |
| 1006 |
.ecv2-image-wrap { position:relative; display:inline-block; } |
| 1007 |
.ecv2-image-wrap:has(.ecv2-image-edit-trigger) { cursor:pointer; } |
| 1008 |
.ecv2-image-edit-icon { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:20px; height:20px; border-radius:50%; background:rgba(0,0,0,.60); color:#fff; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity var(--ecv2-tr); pointer-events:none; z-index:2; } |
| 1009 |
.ecv2-image-edit-icon .dashicons { font-size:12px; width:12px; height:12px; } |
| 1010 |
.ecv2-image-wrap:hover .ecv2-image-edit-icon { opacity:1; } |
| 1011 |
.ecv2-image-wrap:hover .ecv2-product-thumb { filter:brightness(.85); transition:filter var(--ecv2-tr); } |
| 1012 |
.ecv2-image-wrap:hover .ecv2-product-thumb-placeholder { background:var(--ecv2-g200); transition:background var(--ecv2-tr); } |
| 1013 |
.ecv2-thumb-missing { color:var(--ecv2-warn, #d97706); } |
| 1014 |
.ecv2-thumb-missing .dashicons { opacity:0.85; } |
| 1015 |
|
| 1016 |
/* Card view: clickable image area (inside the card-image, siblings the toggle) */ |
| 1017 |
.ecv2-card-image-click { position:absolute; inset:0; z-index:1; } |
| 1018 |
.ecv2-card-image-click:has(.ecv2-image-edit-trigger) { cursor:pointer; } |
| 1019 |
.ecv2-image-edit-icon-card { width:34px; height:34px; background:rgba(0,0,0,.50); backdrop-filter:blur(4px); } |
| 1020 |
.ecv2-image-edit-icon-card .dashicons { font-size:18px; width:18px; height:18px; } |
| 1021 |
.ecv2-card-image:hover .ecv2-image-edit-icon-card { opacity:1; } |
| 1022 |
.ecv2-card-image:hover .ecv2-card-image-click img { filter:brightness(.85); transition:filter var(--ecv2-tr); } |
| 1023 |
/* Keep the status toggle above the clickable image area */ |
| 1024 |
.ecv2-card-toggle { z-index:3; } |
| 1025 |
|
| 1026 |
/* ========== Image Manager Modal ========== */ |
| 1027 |
.ecv2-modal-image-manager { max-width:640px; } |
| 1028 |
.ecv2-imgmgr-loading { text-align:center; padding:40px 0; color:var(--ecv2-g400); } |
| 1029 |
.ecv2-imgmgr-loading .dashicons { animation:ecv2-spin 1s linear infinite; margin-right:6px; vertical-align:middle; } |
| 1030 |
.ecv2-imgmgr-set-selector { margin-bottom:16px; } |
| 1031 |
.ecv2-imgmgr-set-selector select { width:100%; padding:6px 10px; border:1px solid var(--ecv2-g200); border-radius:var(--ecv2-rs); font-size:13px; } |
| 1032 |
|
| 1033 |
/* Image type switcher */ |
| 1034 |
.ecv2-imgmgr-type-switcher { margin-bottom:16px; } |
| 1035 |
.ecv2-imgmgr-type-pills { display:flex; gap:0; border:1px solid var(--ecv2-g200); border-radius:var(--ecv2-r); overflow:hidden; } |
| 1036 |
.ecv2-imgmgr-type-pill { flex:1; display:flex; align-items:center; justify-content:center; gap:5px; padding:8px 12px; border:none; background:var(--ecv2-g50); color:var(--ecv2-g600); font-size:12px; font-weight:500; cursor:pointer; transition:background var(--ecv2-tr), color var(--ecv2-tr); border-right:1px solid var(--ecv2-g200); } |
| 1037 |
.ecv2-imgmgr-type-pill:last-child { border-right:none; } |
| 1038 |
.ecv2-imgmgr-type-pill .dashicons { font-size:15px; width:15px; height:15px; } |
| 1039 |
.ecv2-imgmgr-type-pill:hover:not(.active):not(:disabled) { background:var(--ecv2-g100); } |
| 1040 |
.ecv2-imgmgr-type-pill.active { background:var(--ecv2-primary); color:#fff; } |
| 1041 |
.ecv2-imgmgr-type-pill:disabled, .ecv2-imgmgr-type-pill-disabled { opacity:0.4; cursor:not-allowed; } |
| 1042 |
.ecv2-imgmgr-type-desc { margin:8px 0 0; font-size:12px; color:var(--ecv2-g400); line-height:1.4; } |
| 1043 |
|
| 1044 |
/* Gallery grid */ |
| 1045 |
.ecv2-imgmgr-gallery { display:grid; grid-template-columns:repeat(auto-fill, minmax(100px, 1fr)); gap:10px; min-height:60px; padding:4px 0 16px; } |
| 1046 |
.ecv2-imgmgr-gallery-item { position:relative; aspect-ratio:1; border-radius:var(--ecv2-rs); overflow:hidden; border:2px solid var(--ecv2-g200); background:var(--ecv2-g50); cursor:grab; transition:border-color var(--ecv2-tr), box-shadow var(--ecv2-tr); } |
| 1047 |
.ecv2-imgmgr-gallery-item:hover { border-color:var(--ecv2-primary); box-shadow:var(--ecv2-sh); } |
| 1048 |
.ecv2-imgmgr-gallery-item.ui-sortable-helper { box-shadow:var(--ecv2-shlg); z-index:10; } |
| 1049 |
.ecv2-imgmgr-gallery-item.ui-sortable-placeholder { visibility:visible !important; border:2px dashed var(--ecv2-g300); background:var(--ecv2-g100); } |
| 1050 |
.ecv2-imgmgr-gallery-item img { width:100%; height:100%; object-fit:cover; pointer-events:none; } |
| 1051 |
.ecv2-imgmgr-gallery-item .ecv2-imgmgr-thumb-missing { width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:var(--ecv2-g50); color:var(--ecv2-g300); pointer-events:none; } |
| 1052 |
.ecv2-imgmgr-gallery-item .ecv2-imgmgr-thumb-missing .dashicons { font-size:32px; width:32px; height:32px; } |
| 1053 |
.ecv2-imgmgr-gallery-item .ecv2-imgmgr-remove { position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:50%; background:rgba(0,0,0,.6); border:none; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity var(--ecv2-tr); padding:0; } |
| 1054 |
.ecv2-imgmgr-gallery-item .ecv2-imgmgr-remove .dashicons { font-size:14px; width:14px; height:14px; } |
| 1055 |
.ecv2-imgmgr-gallery-item:hover .ecv2-imgmgr-remove { opacity:1; } |
| 1056 |
.ecv2-imgmgr-gallery-item .ecv2-imgmgr-remove:hover { background:var(--ecv2-danger); } |
| 1057 |
/* Video overlay badge */ |
| 1058 |
.ecv2-imgmgr-video-badge { position:absolute; bottom:4px; left:4px; background:rgba(0,0,0,.6); color:#fff; font-size:10px; padding:2px 6px; border-radius:3px; display:flex; align-items:center; gap:3px; pointer-events:none; } |
| 1059 |
.ecv2-imgmgr-video-badge .dashicons { font-size:12px; width:12px; height:12px; } |
| 1060 |
/* Primary image indicator */ |
| 1061 |
.ecv2-imgmgr-gallery-item:first-child { border-color:var(--ecv2-primary); } |
| 1062 |
.ecv2-imgmgr-gallery-item:first-child::after { content:'PRIMARY'; position:absolute; bottom:4px; right:4px; background:var(--ecv2-primary); color:#fff; font-size:9px; font-weight:700; padding:2px 6px; border-radius:3px; letter-spacing:0.5px; pointer-events:none; } |
| 1063 |
|
| 1064 |
/* Add media bar */ |
| 1065 |
.ecv2-imgmgr-add-bar { border-top:1px solid var(--ecv2-g200); padding-top:12px; margin-top:4px; } |
| 1066 |
.ecv2-imgmgr-add-buttons { display:flex; flex-wrap:wrap; gap:6px; } |
| 1067 |
.ecv2-imgmgr-add-buttons .ecv2-btn { font-size:12px; } |
| 1068 |
.ecv2-imgmgr-add-buttons .dashicons { font-size:15px; width:15px; height:15px; vertical-align:middle; margin-right:2px; } |
| 1069 |
|
| 1070 |
/* URL input panel */ |
| 1071 |
.ecv2-imgmgr-url-panel { border:1px solid var(--ecv2-g200); border-radius:var(--ecv2-r); padding:12px; margin-top:12px; background:var(--ecv2-g50); } |
| 1072 |
.ecv2-imgmgr-url-panel .ecv2-input { width:100%; margin-bottom:8px; } |
| 1073 |
.ecv2-imgmgr-thumb-row { margin-bottom:8px; } |
| 1074 |
.ecv2-imgmgr-thumb-input-wrap { display:flex; gap:6px; } |
| 1075 |
.ecv2-imgmgr-thumb-input-wrap .ecv2-input { flex:1; margin-bottom:0; } |
| 1076 |
.ecv2-imgmgr-url-actions { display:flex; gap:6px; justify-content:flex-end; } |
| 1077 |
|
| 1078 |
/* Empty state */ |
| 1079 |
.ecv2-imgmgr-empty { text-align:center; padding:30px 0; color:var(--ecv2-g400); } |
| 1080 |
.ecv2-imgmgr-empty .dashicons { font-size:40px; width:40px; height:40px; display:block; margin:0 auto 10px; } |
| 1081 |
.ecv2-imgmgr-empty p { margin:0; font-size:13px; } |
| 1082 |
|
| 1083 |
/* Footer count */ |
| 1084 |
.ecv2-imgmgr-count { font-size:12px; color:var(--ecv2-g500); } |
| 1085 |
|
| 1086 |
/* ========================================== |
| 1087 |
Square Sync — Locked Product Styles |
| 1088 |
========================================== */ |
| 1089 |
|
| 1090 |
/* ---- Title badge: logo + lock inline with product name ---- */ |
| 1091 |
.ecv2-square-title-badge { |
| 1092 |
display:inline-flex; align-items:center; gap:3px; |
| 1093 |
margin-left:0px; margin-bottom:4px; vertical-align:middle; |
| 1094 |
background:#f5f5f5; border:1px solid #e0e0e0; border-radius:3px; |
| 1095 |
padding:6px; line-height:1; |
| 1096 |
} |
| 1097 |
.ecv2-square-title-logo { width:14px; height:14px; display:block; } |
| 1098 |
.ecv2-square-title-lock { font-size:12px !important; width:12px !important; height:12px !important; color:#999; } |
| 1099 |
|
| 1100 |
/* ---- Disabled row action link (Quick Edit) ---- */ |
| 1101 |
.ecv2-row-action-disabled { |
| 1102 |
color:var(--ecv2-g300) !important; cursor:default; text-decoration:none !important; |
| 1103 |
} |
| 1104 |
|
| 1105 |
/* ---- Table row: locked visual treatment ---- */ |
| 1106 |
.ecv2-row-square-locked { border-left:3px solid #3e4348; } |
| 1107 |
|
| 1108 |
/* ---- Card: locked visual treatment ---- */ |
| 1109 |
.ecv2-card-square-locked { border-left:3px solid #3e4348; } |
| 1110 |
|
| 1111 |
/* ---- Lock banner (card + variant popup) ---- */ |
| 1112 |
.ecv2-square-lock-banner { |
| 1113 |
display:flex; align-items:center; gap:5px; |
| 1114 |
padding:5px 10px; margin:4px 0 8px; |
| 1115 |
background:#f8f6f1; border:1px solid #e5e0d5; border-radius:var(--ecv2-rs); |
| 1116 |
font-size:11px; font-weight:500; color:#6b5e4a; line-height:1.3; |
| 1117 |
} |
| 1118 |
.ecv2-square-lock-banner .dashicons { |
| 1119 |
font-size:13px !important; width:13px !important; height:13px !important; |
| 1120 |
color:#8b7d66; flex-shrink:0; |
| 1121 |
} |
| 1122 |
.ecv2-square-lock-banner-popup { |
| 1123 |
margin:0 24px 12px; font-size:13px; padding:10px 16px; |
| 1124 |
} |
| 1125 |
|
| 1126 |
/* ---- Read-only cell indicators (price / stock lock icon) ---- */ |
| 1127 |
.ecv2-cell-lock-icon { |
| 1128 |
font-size:13px !important; width:13px !important; height:13px !important; |
| 1129 |
color:var(--ecv2-g300); vertical-align:middle; margin-left:4px; |
| 1130 |
} |
| 1131 |
.ecv2-price-cell-locked { cursor:default; } |
| 1132 |
.ecv2-stock-wrap-locked { cursor:default; display:inline-flex; align-items:center; gap:4px; } |
| 1133 |
|
| 1134 |
/* ---- Image thumb: locked state shows lock instead of camera ---- */ |
| 1135 |
.ecv2-image-wrap-locked { cursor:default; position:relative; } |
| 1136 |
.ecv2-image-wrap-locked .ecv2-product-thumb { opacity:0.7; } |
| 1137 |
.ecv2-image-lock-icon { |
| 1138 |
position:absolute; bottom:2px; right:2px; |
| 1139 |
background:rgba(0,0,0,0.55); border-radius:50%; padding:2px; |
| 1140 |
display:flex; align-items:center; justify-content:center; |
| 1141 |
} |
| 1142 |
.ecv2-image-lock-icon .dashicons { |
| 1143 |
font-size:11px; width:11px; height:11px; color:#fff; |
| 1144 |
} |
| 1145 |
|
| 1146 |
/* ============================================================================ |
| 1147 |
* V2 Inline Price Editor — Volume Pricing & B2B Role Pricing managers. |
| 1148 |
* Reuses the .ecv2-modal* shell; only inner-content classes are scoped here. |
| 1149 |
* ========================================================================= */ |
| 1150 |
.ecv2-modal-pricing-mgr { max-width: 560px; } |
| 1151 |
.ecv2-pricing-mgr-help { font-size: 13px; color: var(--ecv2-g600); margin: 0 0 14px; line-height: 1.45; } |
| 1152 |
.ecv2-pricing-mgr-unsaved { display: flex; align-items: center; gap: 8px; padding: 8px 12px; margin: 0 0 14px; border: 1px solid var(--ecv2-amber); background: var(--ecv2-amber-light); color: var(--ecv2-amber); border-radius: var(--ecv2-rs); font-size: 12px; font-weight: 500; line-height: 1.4; } |
| 1153 |
.ecv2-pricing-mgr-unsaved .dashicons { font-size: 16px; width: 16px; height: 16px; flex-shrink: 0; } |
| 1154 |
.ecv2-pricing-mgr-loading { display: flex; align-items: center; gap: 8px; padding: 24px 12px; color: var(--ecv2-g500); font-size: 13px; justify-content: center; } |
| 1155 |
.ecv2-pricing-mgr-empty { padding: 16px 12px; color: var(--ecv2-g500); font-size: 13px; text-align: center; background: var(--ecv2-g50); border: 1px dashed var(--ecv2-g200); border-radius: var(--ecv2-rs); } |
| 1156 |
|
| 1157 |
.ecv2-pricing-mgr-rows { border: 1px solid var(--ecv2-g200); border-radius: var(--ecv2-rs); overflow: hidden; } |
| 1158 |
.ecv2-pricing-mgr-row { display: grid; grid-template-columns: 1fr 1fr 56px; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--ecv2-g200); background: #fff; } |
| 1159 |
.ecv2-pricing-mgr-row:last-child { border-bottom: 0; } |
| 1160 |
.ecv2-pricing-mgr-head { background: var(--ecv2-g50); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; color: var(--ecv2-g600); padding: 6px 10px; } |
| 1161 |
.ecv2-pricing-mgr-cell { display: flex; align-items: center; min-width: 0; } |
| 1162 |
.ecv2-pricing-mgr-cell-text { font-size: 13px; color: var(--ecv2-g700); } |
| 1163 |
.ecv2-pricing-mgr-cell input[type="number"] { width: 100%; padding: 5px 8px; border: 1px solid var(--ecv2-g200); border-radius: var(--ecv2-rs); font-size: 13px; } |
| 1164 |
.ecv2-pricing-mgr-cell input[type="number"]:focus { outline: none; border-color: var(--ecv2-primary); box-shadow: 0 0 0 2px var(--ecv2-primary-light); } |
| 1165 |
.ecv2-pricing-mgr-cell-actions { justify-content: flex-end; gap: 4px; } |
| 1166 |
.ecv2-pricing-mgr-save, .ecv2-pricing-mgr-del { background: transparent; border: 1px solid transparent; padding: 3px 6px; border-radius: var(--ecv2-rs); cursor: pointer; color: var(--ecv2-g500); display: inline-flex; align-items: center; transition: all var(--ecv2-tr); } |
| 1167 |
.ecv2-pricing-mgr-save:hover { background: var(--ecv2-primary-light); border-color: var(--ecv2-primary); color: var(--ecv2-primary); } |
| 1168 |
.ecv2-pricing-mgr-del:hover { background: #fef2f2; border-color: #fecaca; color: #dc2626; } |
| 1169 |
.ecv2-pricing-mgr-save .dashicons, .ecv2-pricing-mgr-del .dashicons { font-size: 16px; width: 16px; height: 16px; } |
| 1170 |
|
| 1171 |
.ecv2-pricing-mgr-add { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ecv2-g200); } |
| 1172 |
.ecv2-pricing-mgr-add-label { font-size: 12px; font-weight: 600; color: var(--ecv2-g600); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 8px; } |
| 1173 |
.ecv2-pricing-mgr-add-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: end; } |
| 1174 |
.ecv2-pricing-mgr-col { display: flex; flex-direction: column; gap: 4px; min-width: 0; } |
| 1175 |
.ecv2-pricing-mgr-col label { font-size: 11px; color: var(--ecv2-g600); font-weight: 500; } |
| 1176 |
.ecv2-pricing-mgr-col input[type="number"], .ecv2-pricing-mgr-col select { padding: 6px 8px; border: 1px solid var(--ecv2-g200); border-radius: var(--ecv2-rs); font-size: 13px; background: #fff; } |
| 1177 |
.ecv2-pricing-mgr-col input[type="number"]:focus, .ecv2-pricing-mgr-col select:focus { outline: none; border-color: var(--ecv2-primary); box-shadow: 0 0 0 2px var(--ecv2-primary-light); } |
| 1178 |
.ecv2-pricing-mgr-add-empty { padding: 10px 12px; background: var(--ecv2-g50); border: 1px solid var(--ecv2-g200); border-radius: var(--ecv2-rs); font-size: 12px; color: var(--ecv2-g600); } |
| 1179 |
|
| 1180 |
@media ( max-width: 600px ) { |
| 1181 |
.ecv2-pricing-mgr-row { grid-template-columns: 1fr 1fr 48px; } |
| 1182 |
.ecv2-pricing-mgr-add-row { grid-template-columns: 1fr; } |
| 1183 |
} |
| 1184 |
|
| 1185 |
/* ============================================================================ |
| 1186 |
* V2 Inline Price Editor — Advanced Pricing entry point + slideout. |
| 1187 |
* The popover keeps the fast-path price + list-price edit; everything heavier |
| 1188 |
* lives in the slideout, which scrolls independently. |
| 1189 |
* ========================================================================= */ |
| 1190 |
|
| 1191 |
/* --- "Advanced pricing" link inside the popover ------------------------- */ |
| 1192 |
.ecv2-price-menu-advanced-link { |
| 1193 |
width: 100%; |
| 1194 |
display: flex; |
| 1195 |
align-items: center; |
| 1196 |
gap: 8px; |
| 1197 |
padding: 10px 12px; |
| 1198 |
margin-top: 8px; |
| 1199 |
background: var(--ecv2-g50); |
| 1200 |
border: 1px solid var(--ecv2-g200); |
| 1201 |
border-radius: var(--ecv2-rs); |
| 1202 |
font-size: 13px; |
| 1203 |
font-weight: 600; |
| 1204 |
color: var(--ecv2-g700); |
| 1205 |
cursor: pointer; |
| 1206 |
text-align: left; |
| 1207 |
transition: background .12s ease, border-color .12s ease; |
| 1208 |
} |
| 1209 |
.ecv2-price-menu-advanced-link:hover { |
| 1210 |
background: #fff; |
| 1211 |
border-color: var(--ecv2-g300); |
| 1212 |
} |
| 1213 |
.ecv2-price-menu-advanced-link:focus-visible { |
| 1214 |
outline: none; |
| 1215 |
border-color: var(--ecv2-primary); |
| 1216 |
box-shadow: 0 0 0 2px var(--ecv2-primary-light); |
| 1217 |
} |
| 1218 |
.ecv2-price-menu-advanced-label { flex: 1; } |
| 1219 |
.ecv2-price-menu-advanced-chev { |
| 1220 |
color: var(--ecv2-g300) !important; |
| 1221 |
font-size: 16px !important; |
| 1222 |
width: 16px !important; |
| 1223 |
height: 16px !important; |
| 1224 |
} |
| 1225 |
|
| 1226 |
/* Status pip — small filled circle in primary color when ANY advanced field is configured. |
| 1227 |
* Positioned next to the chevron so the row stays compact. Hidden by default; shown only |
| 1228 |
* when the .ecv2-price-menu-advanced-pip element is rendered. */ |
| 1229 |
.ecv2-price-menu-advanced-pip { |
| 1230 |
display: inline-block; |
| 1231 |
width: 8px; |
| 1232 |
height: 8px; |
| 1233 |
border-radius: 50%; |
| 1234 |
background: var(--ecv2-primary); |
| 1235 |
flex-shrink: 0; |
| 1236 |
box-shadow: 0 0 0 2px var(--ecv2-primary-light); |
| 1237 |
} |
| 1238 |
|
| 1239 |
/* --- Right-edge slideout panel ----------------------------------------- */ |
| 1240 |
/* Overlay sits between the popover (z=110) and the manager modals (z=100000) |
| 1241 |
* so a Volume / B2B / Variant modal opened from inside the slideout layers on top. */ |
| 1242 |
.ecv2-slideout-overlay { |
| 1243 |
position: fixed; |
| 1244 |
top: 0; |
| 1245 |
left: 0; |
| 1246 |
right: 0; |
| 1247 |
bottom: 0; |
| 1248 |
background: rgba(0, 0, 0, .45); |
| 1249 |
z-index: 99999; |
| 1250 |
display: flex; |
| 1251 |
justify-content: flex-end; |
| 1252 |
} |
| 1253 |
.ecv2-slideout { |
| 1254 |
width: 480px; |
| 1255 |
max-width: 100vw; |
| 1256 |
height: 100vh; |
| 1257 |
background: #fff; |
| 1258 |
display: flex; |
| 1259 |
flex-direction: column; |
| 1260 |
box-shadow: -8px 0 24px rgba(0, 0, 0, .12); |
| 1261 |
animation: ecv2-slideout-in .2s ease-out; |
| 1262 |
} |
| 1263 |
@keyframes ecv2-slideout-in { |
| 1264 |
from { transform: translateX(100%); } |
| 1265 |
to { transform: translateX(0); } |
| 1266 |
} |
| 1267 |
|
| 1268 |
.ecv2-slideout-header { |
| 1269 |
display: flex; |
| 1270 |
align-items: flex-start; |
| 1271 |
justify-content: space-between; |
| 1272 |
padding: 18px 22px; |
| 1273 |
border-bottom: 1px solid var(--ecv2-g200); |
| 1274 |
flex-shrink: 0; |
| 1275 |
} |
| 1276 |
.ecv2-slideout-header-text { min-width: 0; } |
| 1277 |
.ecv2-slideout-eyebrow { |
| 1278 |
font-size: 11px; |
| 1279 |
font-weight: 600; |
| 1280 |
color: var(--ecv2-g500); |
| 1281 |
text-transform: uppercase; |
| 1282 |
letter-spacing: .4px; |
| 1283 |
margin-bottom: 2px; |
| 1284 |
} |
| 1285 |
.ecv2-slideout-title { |
| 1286 |
font-size: 17px; |
| 1287 |
font-weight: 600; |
| 1288 |
margin: 0; |
| 1289 |
color: var(--ecv2-g900); |
| 1290 |
overflow: hidden; |
| 1291 |
text-overflow: ellipsis; |
| 1292 |
white-space: nowrap; |
| 1293 |
max-width: 360px; |
| 1294 |
} |
| 1295 |
|
| 1296 |
.ecv2-slideout-body { |
| 1297 |
flex: 1 1 auto; |
| 1298 |
overflow-y: auto; |
| 1299 |
padding: 0 22px; |
| 1300 |
} |
| 1301 |
.ecv2-slideout-section { |
| 1302 |
padding: 16px 0; |
| 1303 |
border-bottom: 1px solid var(--ecv2-g100); |
| 1304 |
} |
| 1305 |
.ecv2-slideout-section:last-child { border-bottom: 0; } |
| 1306 |
.ecv2-slideout-section-head { |
| 1307 |
font-size: 11px; |
| 1308 |
font-weight: 600; |
| 1309 |
color: var(--ecv2-g500); |
| 1310 |
text-transform: uppercase; |
| 1311 |
letter-spacing: .4px; |
| 1312 |
margin-bottom: 10px; |
| 1313 |
} |
| 1314 |
|
| 1315 |
.ecv2-slideout-footer { |
| 1316 |
display: flex; |
| 1317 |
justify-content: flex-end; |
| 1318 |
gap: 8px; |
| 1319 |
padding: 14px 22px; |
| 1320 |
border-top: 1px solid var(--ecv2-g200); |
| 1321 |
background: #fff; |
| 1322 |
flex-shrink: 0; |
| 1323 |
} |
| 1324 |
|
| 1325 |
/* Reset .ecv2-price-menu-row inside slideout so the two-up grid wraps nicely on narrow viewports. */ |
| 1326 |
.ecv2-slideout .ecv2-price-menu-row { |
| 1327 |
display: grid; |
| 1328 |
grid-template-columns: 1fr 1fr; |
| 1329 |
gap: 10px; |
| 1330 |
} |
| 1331 |
.ecv2-slideout .ecv2-price-menu-col { min-width: 0; } |
| 1332 |
|
| 1333 |
/* Manager modals (variant / volume / B2B) need to stack above the slideout. The base |
| 1334 |
* .ecv2-modal-overlay rule already sets z:100000 — explicit here for clarity. */ |
| 1335 |
.ecv2-modal-overlay { z-index: 100000; } |
| 1336 |
|
| 1337 |
@media ( max-width: 600px ) { |
| 1338 |
.ecv2-slideout { width: 100vw; } |
| 1339 |
.ecv2-slideout-title { max-width: 220px; } |
| 1340 |
} |
| 1341 |
|
| 1342 |
/* --- PRO capability gate popup (shared across V2 admin tables) --- */ |
| 1343 |
body.ecv2-gate-open { overflow:hidden; } |
| 1344 |
.ecv2-gate-overlay { display:none; position:fixed; inset:0; background:rgba(15,23,42,.55); z-index:100050; align-items:center; justify-content:center; padding:20px; opacity:0; transition:opacity .18s ease; } |
| 1345 |
.ecv2-gate-overlay.ecv2-gate-show { opacity:1; } |
| 1346 |
.ecv2-gate-card { position:relative; background:#fff; border-radius:var(--ecv2-rl); box-shadow:var(--ecv2-shlg); width:100%; max-width:440px; overflow:hidden; transform:translateY(8px) scale(.985); transition:transform .18s ease; } |
| 1347 |
.ecv2-gate-overlay.ecv2-gate-show .ecv2-gate-card { transform:none; } |
| 1348 |
.ecv2-gate-x { position:absolute; top:10px; right:10px; background:none; border:none; cursor:pointer; color:var(--ecv2-g400); padding:4px; line-height:1; border-radius:var(--ecv2-rs); transition:all var(--ecv2-tr); } |
| 1349 |
.ecv2-gate-x:hover { color:var(--ecv2-g700); background:var(--ecv2-g100); } |
| 1350 |
.ecv2-gate-x .dashicons { font-size:18px; width:18px; height:18px; } |
| 1351 |
.ecv2-gate-top { display:flex; align-items:flex-start; gap:14px; padding:24px 22px 10px; } |
| 1352 |
.ecv2-gate-icon { flex:0 0 auto; width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#fff7e6; color:#d48806; } |
| 1353 |
.ecv2-gate-icon .dashicons { font-size:22px; width:22px; height:22px; } |
| 1354 |
.ecv2-gate-heading { flex:1 1 auto; min-width:0; } |
| 1355 |
.ecv2-gate-badge { display:inline-block; font-size:10px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:#874d00; background:#fff7e6; border:1px solid #ffd591; border-radius:10px; padding:1px 8px; margin-bottom:6px; } |
| 1356 |
.ecv2-gate-title { font-size:16px; font-weight:600; color:var(--ecv2-g800); margin:0; } |
| 1357 |
.ecv2-gate-body { padding:2px 22px 4px; color:var(--ecv2-g600); font-size:13.5px; line-height:1.55; } |
| 1358 |
.ecv2-gate-actions { display:flex; justify-content:flex-end; gap:10px; padding:18px 22px 20px; } |
| 1359 |
.ecv2-gate-actions .ecv2-gate-cta { text-decoration:none; display:inline-flex; align-items:center; } |
| 1360 |
/* ---------- Store Status page ( V2 ) ---------- */ |
| 1361 |
.ecss .ecv2-page-header { margin-bottom:14px; } |
| 1362 |
.ecss-hero { display:grid; grid-template-columns:1.2fr 1fr; gap:14px; margin-bottom:22px; } |
| 1363 |
.ecss-license { display:flex; gap:20px; align-items:flex-start; padding:22px; background:#fff; border:1px solid var(--ecv2-g200); border-radius:var(--ecv2-rl); } |
| 1364 |
.ecss-ring { position:relative; width:96px; height:96px; flex-shrink:0; } |
| 1365 |
.ecss-ring svg { width:96px; height:96px; transform:rotate(-90deg); } |
| 1366 |
.ecss-ring-bg { fill:none; stroke:var(--ecv2-g200); stroke-width:6; } |
| 1367 |
.ecss-ring-fg { fill:none; stroke:var(--ecv2-primary); stroke-width:6; stroke-linecap:round; transition:stroke-dashoffset .6s ease; } |
| 1368 |
.ecss-tone-free .ecss-ring-fg, .ecss-tone-expired .ecss-ring-fg { stroke:transparent; } |
| 1369 |
.ecss-tone-trial .ecss-ring-fg { stroke:var(--ecv2-amber); } |
| 1370 |
.ecss-ring-label { position:absolute; inset:0; display:grid; place-items:center; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ecv2-g700); text-align:center; padding:0 10px; line-height:1.1; } |
| 1371 |
.ecss-tone-active .ecss-ring-label { color:var(--ecv2-primary-hover); } |
| 1372 |
.ecss-tone-trial .ecss-ring-label { color:#b45309; } |
| 1373 |
.ecss-tone-expired .ecss-ring-label { color:var(--ecv2-danger); } |
| 1374 |
.ecss-license-copy { min-width:0; flex:1 1 auto; } |
| 1375 |
.ecss-license-copy h3 { margin:2px 0 6px; font-size:18px; font-weight:600; color:var(--ecv2-g900); } |
| 1376 |
.ecss-license-copy p { margin:0 0 14px; font-size:13px; line-height:1.55; color:var(--ecv2-g600); max-width:56ch; } |
| 1377 |
.ecss-license-actions { display:flex; gap:8px; flex-wrap:wrap; } |
| 1378 |
.ecss-fee-line { display:flex; gap:8px; align-items:flex-start; margin:14px 0 0 !important; padding:9px 12px; background:#fffbeb; border:1px solid #fde68a; border-radius:var(--ecv2-r); font-size:12.5px !important; color:#92400e !important; max-width:none !important; } |
| 1379 |
.ecss-fee-line .dashicons { color:#d97706; flex-shrink:0; } |
| 1380 |
|
| 1381 |
.ecss-checks { background:#fff; border:1px solid var(--ecv2-g200); border-radius:var(--ecv2-rl); padding:6px 6px 6px; display:flex; flex-direction:column; } |
| 1382 |
.ecss-checks-head { display:flex; align-items:center; justify-content:space-between; padding:10px 12px 8px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; color:var(--ecv2-g500); } |
| 1383 |
.ecss-checks-score { font-size:11px; padding:2px 8px; border-radius:999px; background:var(--ecv2-amber-light); color:#b45309; text-transform:none; letter-spacing:0; } |
| 1384 |
.ecss-checks-score.is-ok { background:var(--ecv2-primary-light); color:var(--ecv2-primary-hover); } |
| 1385 |
.ecss-check { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:var(--ecv2-r); text-decoration:none !important; color:inherit; transition:background var(--ecv2-tr); } |
| 1386 |
.ecss-check:hover { background:var(--ecv2-g50); } |
| 1387 |
.ecss-check-dot { width:26px; height:26px; border-radius:50%; display:grid; place-items:center; flex-shrink:0; } |
| 1388 |
.ecss-check-dot .dashicons { font-size:16px; width:16px; height:16px; } |
| 1389 |
.ecss-check.is-ok .ecss-check-dot { background:var(--ecv2-primary-light); color:var(--ecv2-primary-hover); } |
| 1390 |
.ecss-check.is-bad .ecss-check-dot { background:var(--ecv2-amber-light); color:#b45309; } |
| 1391 |
.ecss-check-text { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; } |
| 1392 |
.ecss-check-text strong { font-size:13px; color:var(--ecv2-g900); } |
| 1393 |
.ecss-check-text span { font-size:12px; color:var(--ecv2-g500); } |
| 1394 |
.ecss-check-link { font-size:12px; font-weight:600; color:var(--ecv2-primary-hover); white-space:nowrap; display:inline-flex; align-items:center; } |
| 1395 |
.ecss-check-link .dashicons { font-size:14px; width:14px; height:14px; } |
| 1396 |
|
| 1397 |
.ecss-features-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 0 10px; } |
| 1398 |
.ecss-features-head h3 { margin:0; font-size:15px; font-weight:600; color:var(--ecv2-g900); } |
| 1399 |
.ecss-features-sub { font-size:12px; color:var(--ecv2-g500); } |
| 1400 |
.ecss-tiles { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:12px; margin-bottom:22px; } |
| 1401 |
.ecss-tile { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:16px 14px 14px; background:#fff; border:1px solid var(--ecv2-g200); border-radius:var(--ecv2-rl); text-align:left; text-decoration:none !important; color:inherit; font:inherit; cursor:pointer; transition:border-color var(--ecv2-tr), box-shadow var(--ecv2-tr); } |
| 1402 |
.ecss-tile:hover { border-color:var(--ecv2-g400); box-shadow:var(--ecv2-sh); } |
| 1403 |
.ecss-tile:focus-visible { outline:none; box-shadow:0 0 0 2px var(--ecv2-primary-light); } |
| 1404 |
.ecss-tile-icon { font-size:22px; width:22px; height:22px; color:var(--ecv2-g500); } |
| 1405 |
.ecss-tile.is-on { border-color:#bbf7d0; } |
| 1406 |
.ecss-tile.is-on .ecss-tile-icon { color:var(--ecv2-primary-hover); } |
| 1407 |
.ecss-tile-state { position:absolute; top:12px; right:12px; width:20px; height:20px; border-radius:50%; background:var(--ecv2-primary-light); color:var(--ecv2-primary-hover); display:grid; place-items:center; } |
| 1408 |
.ecss-tile-state .dashicons { font-size:14px; width:14px; height:14px; } |
| 1409 |
.ecss-tile-pill { position:absolute; top:12px; right:12px; padding:1px 6px; border-radius:5px; background:var(--ecv2-amber); color:#fff; font-size:9.5px; font-weight:800; letter-spacing:.5px; line-height:1.5; } |
| 1410 |
.ecss-tile.is-premium .ecss-tile-pill { background:var(--ecv2-g800); } |
| 1411 |
.ecss-tile-pill.is-expired { background:var(--ecv2-danger); } |
| 1412 |
.ecss-tile.is-locked { background:var(--ecv2-g50); border-style:dashed; } |
| 1413 |
.ecss-tile.is-locked:hover { border-color:#fcd34d; background:#fffbeb; } |
| 1414 |
.ecss-tile.is-locked .ecss-tile-icon { color:var(--ecv2-g400); } |
| 1415 |
.ecss-tile.is-expired { border-color:#fecaca; background:#fef2f2; } |
| 1416 |
.ecss-tile strong { font-size:13.5px; color:var(--ecv2-g900); margin-top:2px; } |
| 1417 |
.ecss-tile-desc { font-size:12px; line-height:1.45; color:var(--ecv2-g500); flex:1 1 auto; } |
| 1418 |
.ecss-tile-link { font-size:12px; font-weight:600; color:var(--ecv2-primary-hover); margin-top:4px; } |
| 1419 |
.ecss-tile.is-locked .ecss-tile-link { color:#b45309; } |
| 1420 |
.ecss-tile.is-expired .ecss-tile-link { color:var(--ecv2-danger); } |
| 1421 |
.ecss-hook-card { margin-bottom:22px; } |
| 1422 |
.ecss-hook-body .ec_admin_status_circle_container { width:24% !important; float:left; margin-right:1.333%; } |
| 1423 |
.ecss-upsell { clear:both; } |
| 1424 |
.ecss-upsell .ecv2-upsell-plans { grid-template-columns:1fr 1fr; } |
| 1425 |
@media screen and (max-width:1200px) { .ecss-tiles { grid-template-columns:repeat(3, minmax(0,1fr)); } } |
| 1426 |
@media screen and (max-width:900px) { .ecss-hero { grid-template-columns:1fr; } .ecss-tiles { grid-template-columns:1fr 1fr; } .ecss-license { flex-direction:column; } } |
| 1427 |
|
| 1428 |
|
| 1429 |
/* ---------- Reports page ( V2 ) ---------- */ |
| 1430 |
.ecrp.ec_admin_chart_holder { float:none; width:auto; background:transparent; border:0; padding:0; box-shadow:none; } |
| 1431 |
.ecrp .ecv2-page-header { margin-bottom:14px; } |
| 1432 |
.ecrp-header-tools { display:flex; align-items:center; gap:8px; } |
| 1433 |
.ecrp-chart-types { display:inline-flex; gap:2px; padding:2px; border:1px solid var(--ecv2-g200); border-radius:var(--ecv2-r); background:#fff; margin:0; } |
| 1434 |
.ecrp-chart-types .dashicons { width:28px; height:26px; line-height:26px; font-size:16px; border-radius:6px; color:var(--ecv2-g500); cursor:pointer; text-align:center; margin:0 !important; } |
| 1435 |
.ecrp-chart-types .dashicons:hover { background:var(--ecv2-g100); } |
| 1436 |
.ecrp-chart-types .dashicons.selected { background:var(--ecv2-primary-light); color:var(--ecv2-primary-hover); } |
| 1437 |
.ecrp #daily_filter { max-width:130px !important; } |
| 1438 |
.ecrp .wpeasycart_admin_chart_export { float:none; margin:0; } |
| 1439 |
.ecrp .wpeasycart_admin_chart_export .dashicons { margin:0; } |
| 1440 |
|
| 1441 |
.ecrp-strip { display:flex; align-items:center; gap:10px; padding:10px 14px; margin:0 0 14px; border-radius:var(--ecv2-r); font-size:13px; } |
| 1442 |
.ecrp-strip.is-free { background:#fffbeb; border:1px solid #fde68a; color:#92400e; } |
| 1443 |
.ecrp-strip.is-free .dashicons { color:#d97706; } |
| 1444 |
.ecrp-strip.is-trial { background:var(--ecv2-blue-light); border:1px solid #bfdbfe; color:#1e40af; } |
| 1445 |
.ecrp-strip.is-trial .dashicons { color:var(--ecv2-blue); } |
| 1446 |
.ecrp-strip.is-expired { background:var(--ecv2-danger-light); border:1px solid #fecaca; color:#991b1b; } |
| 1447 |
.ecrp-strip.is-expired .dashicons { color:var(--ecv2-danger); } |
| 1448 |
.ecrp-strip-text { flex:1 1 auto; } |
| 1449 |
|
| 1450 |
.ecrp-toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; padding:12px 14px; margin:0 0 14px; background:#fff; border:1px solid var(--ecv2-g200); border-radius:var(--ecv2-rl); } |
| 1451 |
.ecrp-ranges { display:flex; gap:8px; flex-wrap:wrap; } |
| 1452 |
.ecrp .ecrp-range.ec_admin_dashboard_chart_range_button { float:none; width:auto; max-width:none; min-height:0; margin:0; padding:8px 12px; border:1px solid var(--ecv2-g200); border-radius:var(--ecv2-r); background:#fff; cursor:pointer; display:flex; flex-wrap:wrap; align-items:center; gap:2px 4px; text-align:left; box-shadow:none; transition:border-color var(--ecv2-tr); min-width:260px; max-width:360px; } |
| 1453 |
.ecrp .ecrp-range.ec_admin_dashboard_chart_range_button:hover { border-color:var(--ecv2-g400); } |
| 1454 |
.ecrp-range .ecrp-range-label { flex:0 0 100%; font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; color:var(--ecv2-g500); margin:0 0 2px; line-height:1.3; } |
| 1455 |
.ecrp-range > span { flex:1 1 auto; min-width:0; font-size:13px; color:var(--ecv2-g800); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.4; } |
| 1456 |
.ecrp-range .dashicons { font-size:15px; width:15px; height:15px; line-height:15px; color:var(--ecv2-g500); flex-shrink:0; } |
| 1457 |
.ecrp-range .dashicons-arrow-down { margin-left:auto; } |
| 1458 |
.ecrp-range-compare > span { color:var(--ecv2-g600); } |
| 1459 |
.ecrp .ecrp-filters.ec_admin_dashboard_chart_filters { float:none; width:auto; display:flex; gap:8px; flex-wrap:wrap; margin:0; padding:0; background:transparent; border:0; } |
| 1460 |
.ecrp .ecrp-filters select, .ecrp .ecrp-filters input { float:none !important; margin:0 !important; max-width:220px !important; width:auto; } |
| 1461 |
|
| 1462 |
.ecrp .ecrp-stats.ec_admin_dashboard_stat_items { float:none !important; width:auto !important; display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:12px; margin:0 0 14px; } |
| 1463 |
.ecrp .ecrp-stat.ec_admin_dashboard_stat_item { float:none; width:auto; margin:0; padding:14px 16px; background:#fff; border:1px solid var(--ecv2-g200); border-radius:var(--ecv2-rl); box-shadow:none; min-height:0; display:flex; flex-direction:column; gap:4px; } |
| 1464 |
.ecrp .ecrp-stat .ec_admin_dashboard_stat_item_title { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; color:var(--ecv2-g500); margin:0; } |
| 1465 |
.ecrp .ecrp-stat .ec_admin_dashboard_stat_item_total { font-size:22px; font-weight:600; color:var(--ecv2-g900); line-height:1.15; margin:0; font-variant-numeric:tabular-nums; } |
| 1466 |
.ecrp .ecrp-stat.is-fee .ec_admin_dashboard_stat_item_total { font-size:18px; color:var(--ecv2-g700); } |
| 1467 |
.ecrp .ecrp-stat .ec_admin_dashboard_stat_item_change { font-size:12px; font-weight:600; margin:2px 0 0; display:inline-flex; align-items:center; gap:2px; } |
| 1468 |
.ecrp .ecrp-stat .ec_admin_dashboard_stat_item_change.increase { color:var(--ecv2-primary-hover); } |
| 1469 |
.ecrp .ecrp-stat .ec_admin_dashboard_stat_item_change.decrease { color:var(--ecv2-danger); } |
| 1470 |
.ecrp .ecrp-stat .ec_admin_dashboard_stat_item_change .dashicons { font-size:14px; width:14px; height:14px; } |
| 1471 |
.ecrp .ecrp-stat .ec_admin_dashboard_stat_item_prev_total { font-size:11px; color:var(--ecv2-g400); margin:0; line-height:1.4; } |
| 1472 |
.ecrp .ecrp-stat:nth-child(1) { grid-column:span 2; } |
| 1473 |
.ecrp .ecrp-stat:nth-child(1) .ec_admin_dashboard_stat_item_total { font-size:28px; } |
| 1474 |
|
| 1475 |
.ecrp-charts { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; margin:0 0 18px; } |
| 1476 |
.ecrp .ecrp-chart.ec_admin_dashboard_chart { float:none; width:auto; margin:0; padding:14px; background:#fff; border:1px solid var(--ecv2-g200); border-radius:var(--ecv2-rl); box-shadow:none; } |
| 1477 |
.ecrp-upsell { clear:both; } |
| 1478 |
@media screen and (max-width:1400px) { .ecrp .ecrp-stats.ec_admin_dashboard_stat_items { grid-template-columns:repeat(4, minmax(0,1fr)); } .ecrp-charts { grid-template-columns:1fr; } } |
| 1479 |
@media screen and (max-width:900px) { .ecrp .ecrp-stats.ec_admin_dashboard_stat_items { grid-template-columns:repeat(2, minmax(0,1fr)); } .ecrp .ecrp-stat:nth-child(1) { grid-column:span 2; } .ecrp .ecrp-range.ec_admin_dashboard_chart_range_button { min-width:0; width:100%; } } |
| 1480 |
|
| 1481 |
|
| 1482 |
/* ---------- Free-edition upsell strip ( replaces the banner image ) ---------- */ |
| 1483 |
.ecv2-upsell-banner { display:flex; align-items:center; gap:10px; margin:0 0 16px; padding:10px 14px; background:linear-gradient(90deg,#fffbeb,#fff); border:1px solid #fde68a; border-radius:var(--ecv2-rl); font-size:13px; color:var(--ecv2-g700); } |
| 1484 |
.ecv2-upsell-banner-pill { display:inline-flex; align-items:center; padding:1px 6px; border-radius:5px; background:var(--ecv2-amber); color:#fff; font-size:9.5px; font-weight:800; letter-spacing:.5px; line-height:1.5; flex-shrink:0; } |
| 1485 |
.ecv2-upsell-banner-text { flex:1 1 auto; min-width:0; } |
| 1486 |
@media screen and (max-width:900px) { .ecv2-upsell-banner { flex-wrap:wrap; } .ecv2-upsell-banner-text { flex-basis:100%; } } |
| 1487 |
|
| 1488 |
/* ---------- Diagnostics page ( V2 ) ---------- */ |
| 1489 |
/* The page renders inside the legacy .ec_admin_settings_panel wrapper, whose h2 rule |
| 1490 |
( float, uppercase, 25px padding, green underline ) outranks .ecv2-page-title. */ |
| 1491 |
.ec_admin_settings_panel .ecv2-wrap h2.ecv2-page-title { float:none; width:auto; position:static; font-size:22px; font-weight:600; margin:0; padding:0; text-transform:none; color:var(--ecv2-g900); border:0; line-height:1.3; text-align:left; } |
| 1492 |
.ec_admin_settings_panel .ecv2-wrap .ecv2-page-header-left { display:flex; align-items:center; gap:10px; } |
| 1493 |
.ec_admin_settings_panel .ecv2-wrap .ecv2-page-header-icon { position:static; float:none; width:22px; height:22px; font-size:22px; background:none; border:0; color:var(--ecv2-g500); } |
| 1494 |
.ec_admin_settings_panel .ecv2-wrap .ecv2-page-header-icon:before { font-size:22px; color:inherit; margin:0; } |
| 1495 |
.ecds .ecv2-page-header { margin-bottom:14px; } |
| 1496 |
.ecds-summary { display:flex; align-items:center; gap:14px; padding:14px 16px; margin:0 0 16px; background:#fff; border:1px solid var(--ecv2-g200); border-radius:var(--ecv2-rl); } |
| 1497 |
.ecds-summary-icon { width:40px; height:40px; border-radius:50%; display:grid; place-items:center; flex-shrink:0; } |
| 1498 |
.ecds-summary-icon .dashicons { font-size:22px; width:22px; height:22px; } |
| 1499 |
.ecds-summary.is-ok .ecds-summary-icon { background:var(--ecv2-primary-light); color:var(--ecv2-primary-hover); } |
| 1500 |
.ecds-summary.is-warn .ecds-summary-icon { background:var(--ecv2-amber-light); color:#b45309; } |
| 1501 |
.ecds-summary.is-bad .ecds-summary-icon { background:var(--ecv2-danger-light); color:var(--ecv2-danger); } |
| 1502 |
.ecds-summary-text { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; } |
| 1503 |
.ecds-summary-text strong { font-size:15px; color:var(--ecv2-g900); } |
| 1504 |
.ecds-summary-text span { font-size:12.5px; color:var(--ecv2-g500); } |
| 1505 |
.ecds-summary-counts { display:flex; gap:6px; } |
| 1506 |
.ecds-count { min-width:34px; padding:4px 10px; border-radius:999px; font-size:12.5px; font-weight:600; text-align:center; } |
| 1507 |
.ecds-count.is-ok { background:var(--ecv2-primary-light); color:var(--ecv2-primary-hover); } |
| 1508 |
.ecds-count.is-warn { background:var(--ecv2-amber-light); color:#b45309; } |
| 1509 |
.ecds-count.is-bad { background:var(--ecv2-danger-light); color:var(--ecv2-danger); } |
| 1510 |
|
| 1511 |
.ecds-body { display:flex; flex-direction:column; gap:12px; margin-bottom:18px; } |
| 1512 |
.ecds-body > .ec_admin_settings_input { float:none; width:auto; padding:0; display:flex; flex-direction:column; gap:12px; background:transparent; } |
| 1513 |
.ecds-card { background:#fff; border:1px solid var(--ecv2-g200); border-radius:var(--ecv2-rl); overflow:hidden; } |
| 1514 |
.ecds-card.is-bad { border-color:#fecaca; } |
| 1515 |
.ecds-card.is-warn { border-color:#fde68a; } |
| 1516 |
.ecds .ec_status_header { float:none; width:auto; margin:0; padding:12px 16px; background:var(--ecv2-g50); border-bottom:1px solid var(--ecv2-g100); display:flex; align-items:center; gap:10px; } |
| 1517 |
.ecds .ec_status_header_text { margin:0; font-size:13.5px; font-weight:600; color:var(--ecv2-g900); flex:1 1 auto; } |
| 1518 |
.ecds .ec_status_header_text a { font-weight:500; color:var(--ecv2-primary-hover); } |
| 1519 |
.ecds-card-badge { font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px; background:var(--ecv2-primary-light); color:var(--ecv2-primary-hover); } |
| 1520 |
.ecds-card.is-warn .ecds-card-badge { background:var(--ecv2-amber-light); color:#b45309; } |
| 1521 |
.ecds-card.is-bad .ecds-card-badge { background:var(--ecv2-danger-light); color:var(--ecv2-danger); } |
| 1522 |
.ecds .ec_status_success, .ecds .ec_status_error, .ecds .ec_status_subs { float:none; width:auto; margin:0; padding:10px 16px; background:transparent !important; border:0 !important; border-bottom:1px solid var(--ecv2-g100) !important; line-height:1.5; display:flex; align-items:flex-start; gap:12px; font-size:13px; color:var(--ecv2-g700); } |
| 1523 |
.ecds .ec_status_success:last-child, .ecds .ec_status_error:last-child { border-bottom:0 !important; } |
| 1524 |
.ecds .ec_status_success .dashicons-yes, .ecds .ec_status_error .dashicons-no, .ecds .ec_status_subs .dashicons-yes { margin:0; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; flex-shrink:0; } |
| 1525 |
.ecds .ec_status_success .dashicons-yes:before, .ecds .ec_status_subs .dashicons-yes:before { width:auto; max-width:none; float:none; font-size:16px; padding:0; color:var(--ecv2-primary-hover); } |
| 1526 |
.ecds .ec_status_error .dashicons-no:before { width:auto; max-width:none; float:none; font-size:16px; padding:0; color:var(--ecv2-danger); } |
| 1527 |
.ecds .ec_status_success .dashicons-yes { background:var(--ecv2-primary-light); } |
| 1528 |
.ecds .ec_status_error .dashicons-no { background:var(--ecv2-danger-light); } |
| 1529 |
.ecds .ec_status_error { background:#fff7f7 !important; } |
| 1530 |
.ecds .ec_status_label { float:none; width:auto; flex:1 1 auto; min-width:0; line-height:1.55 !important; } |
| 1531 |
.ecds .ec_status_label a { color:var(--ecv2-primary-hover); font-weight:600; } |
| 1532 |
.ecds .ec_status_error .ec_status_label { color:#7f1d1d; } |
| 1533 |
.ecds .ec_status_error ul { margin:6px 0 0 16px; } |
| 1534 |
/* PHP settings block */ |
| 1535 |
.ecds .ec_status_subs { display:block; } |
| 1536 |
.ecds .ec_status_subtitles { float:none; width:auto; display:inline-flex; align-items:center; gap:6px; margin:0 14px 6px 0; font-size:12.5px; color:var(--ecv2-g700); } |
| 1537 |
.ecds .ec_status_subtitles .dashicons-yes:before { color:var(--ecv2-primary-hover); font-size:16px; } |
| 1538 |
.ecds .ec_status_subtitles .dashicons-warning:before { color:#d97706; font-size:16px; } |
| 1539 |
/* Hide passes when the summary says so; problems and warnings always show. */ |
| 1540 |
.ecds-body.hide-passed .ec_status_success:not(.ec_status_subs), .ecds-body.hide-passed .ec_status_subtitles:has(.dashicons-yes) { display:none; } |
| 1541 |
.ecds-body.hide-passed .ecds-card:not(.is-bad):not(.is-warn) .ec_status_header { border-bottom:0; } |
| 1542 |
.ecds-upsell { clear:both; } |
| 1543 |
|
| 1544 |
|
| 1545 |
/* ---------- License renewal notice ( paid licenses, last 30 days and after ) ---------- */ |
| 1546 |
.ecv2-renewal-notice { display:flex; align-items:center; gap:14px; margin:0 0 16px; padding:12px 16px; border-radius:var(--ecv2-rl); border:1px solid #fde68a; background:linear-gradient(90deg,#fffbeb,#fff); } |
| 1547 |
.ecv2-renewal-notice.has-stakes { align-items:flex-start; padding:14px 16px; } |
| 1548 |
.ecv2-renewal-notice.has-stakes .ecv2-renewal-actions { align-self:center; } |
| 1549 |
.ecv2-renewal-notice.is-critical, .ecv2-renewal-notice.is-lapsed { border-color:#fecaca; background:linear-gradient(90deg,#fef2f2,#fff); } |
| 1550 |
.ecv2-renewal-icon { width:36px; height:36px; border-radius:50%; display:grid; place-items:center; flex-shrink:0; background:var(--ecv2-amber-light); color:#b45309; } |
| 1551 |
.ecv2-renewal-notice.is-critical .ecv2-renewal-icon, .ecv2-renewal-notice.is-lapsed .ecv2-renewal-icon { background:var(--ecv2-danger-light); color:var(--ecv2-danger); } |
| 1552 |
.ecv2-renewal-icon .dashicons { font-size:20px; width:20px; height:20px; } |
| 1553 |
.ecv2-renewal-body { flex:1 1 auto; min-width:0; font-size:13px; color:var(--ecv2-g700); line-height:1.5; } |
| 1554 |
.ecv2-renewal-body strong { color:var(--ecv2-g900); } |
| 1555 |
.ecv2-renewal-notice.is-critical .ecv2-renewal-body strong, .ecv2-renewal-notice.is-lapsed .ecv2-renewal-body strong { color:#7f1d1d; } |
| 1556 |
.ecv2-renewal-stakes { margin:6px 0 0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:3px 18px; } |
| 1557 |
.ecv2-renewal-stakes li { font-size:12.5px; color:var(--ecv2-g700); display:flex; gap:7px; align-items:flex-start; } |
| 1558 |
.ecv2-renewal-stakes li::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--ecv2-amber); margin-top:7px; flex-shrink:0; } |
| 1559 |
.ecv2-renewal-notice.is-critical .ecv2-renewal-stakes li::before { background:var(--ecv2-danger); } |
| 1560 |
.ecv2-renewal-actions { display:flex; align-items:center; gap:10px; flex-shrink:0; flex-wrap:wrap; justify-content:flex-end; } |
| 1561 |
.ecv2-renewal-actions .ecv2-btn { height:34px; } |
| 1562 |
.ecv2-renewal-actions .ecv2-btn-primary { font-weight:600; } |
| 1563 |
.ecv2-renewal-snooze { border:0; background:none; cursor:pointer; color:var(--ecv2-g400); width:28px; height:28px; border-radius:6px; display:grid; place-items:center; } |
| 1564 |
.ecv2-renewal-snooze:hover { background:var(--ecv2-g100); color:var(--ecv2-g700); } |
| 1565 |
@media screen and (max-width:900px) { .ecv2-renewal-notice { flex-wrap:wrap; } .ecv2-renewal-stakes { grid-template-columns:1fr; } .ecv2-renewal-actions { width:100%; justify-content:flex-end; } } |
| 1566 |
|
| 1567 |
/* Store Status: stakes under the hero */ |
| 1568 |
.ecss-stakes { margin:12px 0 0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:3px 18px; } |
| 1569 |
.ecss-stakes li { font-size:12.5px; color:var(--ecv2-g700); display:flex; gap:7px; align-items:flex-start; line-height:1.45; } |
| 1570 |
.ecss-stakes li::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--ecv2-amber); margin-top:7px; flex-shrink:0; } |
| 1571 |
.ecss-tone-expired .ecss-stakes li::before { background:var(--ecv2-danger); } |
| 1572 |
|
| 1573 |
.ecv2-renewal-free { font-size:12px; color:var(--ecv2-g500); text-decoration:underline; text-underline-offset:2px; white-space:nowrap; } |
| 1574 |
.ecv2-renewal-free:hover { color:var(--ecv2-g800); } |
