| 1 |
/** |
| 2 |
* WP EasyCart Admin Shell V2 |
| 3 |
* Namespaced .ecsh-* — safe to load alongside legacy admin.css during transition. |
| 4 |
* |
| 5 |
* Theming: shell.php prints :root { --ec-brand + pre-computed fallback shades } |
| 6 |
* via wp_easycart_shell_output_root_css(). The @supports block below re-derives |
| 7 |
* the shades with color-mix() on modern browsers, so both paths render |
| 8 |
* identically (see wp_easycart_shell_theme.php for the math guarantee). |
| 9 |
* |
| 10 |
* @since 5.x.x |
| 11 |
*/ |
| 12 |
|
| 13 |
/* ---- Neutral tokens (mirror admin-v2.css) ---- */ |
| 14 |
:root { |
| 15 |
--ecsh-g50:#f9fafb; --ecsh-g100:#f3f4f6; --ecsh-g200:#e5e7eb; --ecsh-g300:#d1d5db; |
| 16 |
--ecsh-g400:#9ca3af; --ecsh-g500:#6b7280; --ecsh-g600:#4b5563; --ecsh-g700:#374151; |
| 17 |
--ecsh-g800:#1f2937; --ecsh-g900:#111827; |
| 18 |
--ecsh-green:#22c55e; --ecsh-red:#ef4444; --ecsh-amber:#f59e0b; |
| 19 |
--ecsh-r:8px; --ecsh-rs:6px; |
| 20 |
--ecsh-sh:0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.06); |
| 21 |
--ecsh-shlg:0 10px 25px -5px rgba(0,0,0,.15),0 8px 10px -6px rgba(0,0,0,.08); |
| 22 |
--ecsh-tr:150ms ease; |
| 23 |
--ecsh-sidebar-w:240px; |
| 24 |
--ecsh-topbar-h:56px; |
| 25 |
--ecsh-adminbar:32px; /* WP admin bar */ |
| 26 |
} |
| 27 |
@media (max-width:782px){ :root { --ecsh-adminbar:46px; } } |
| 28 |
/* Below 600px WordPress makes #wpadminbar position:absolute — it scrolls away with the page — so |
| 29 |
nothing sticky should reserve room for it. Every sticky offset in the shell and the editors |
| 30 |
derives from this variable, so this one line corrects all of them. */ |
| 31 |
@media (max-width:600px){ :root { --ecsh-adminbar:0px; } } |
| 32 |
|
| 33 |
/* ---- Modern shade derivation (overrides the PHP-printed fallbacks) ---- */ |
| 34 |
@supports (color: color-mix(in srgb, red, blue)) { |
| 35 |
:root { |
| 36 |
--ec-brand-hover: color-mix(in srgb, var(--ec-brand), #000 12%); |
| 37 |
--ec-brand-active: color-mix(in srgb, var(--ec-brand), #000 22%); |
| 38 |
--ec-brand-deep: color-mix(in srgb, var(--ec-brand), #000 42%); |
| 39 |
--ec-brand-soft: color-mix(in srgb, var(--ec-brand), #fff 90%); |
| 40 |
--ec-brand-softer: color-mix(in srgb, var(--ec-brand), #fff 95%); |
| 41 |
--ec-on-brand-dim: color-mix(in srgb, var(--ec-on-brand), var(--ec-brand) 28%); |
| 42 |
} |
| 43 |
} |
| 44 |
|
| 45 |
/* ---- Sidebar surface mapping (brand style; a body class can add |
| 46 |
a neutral variant later without touching components) ---- */ |
| 47 |
.ecsh-app { |
| 48 |
--sb-bg: var(--ec-brand); |
| 49 |
--sb-panel: var(--ec-brand-deep); |
| 50 |
--sb-item: var(--ec-on-brand-dim); |
| 51 |
--sb-item-hover-bg: rgba(255,255,255,.10); |
| 52 |
--sb-active-bg: var(--ec-brand-active); |
| 53 |
--sb-head: var(--ec-on-brand-dim); |
| 54 |
} |
| 55 |
.ecsh-app.ecsh-sidebar-neutral { |
| 56 |
--sb-bg: var(--ecsh-g900); |
| 57 |
--sb-panel: #0c1220; |
| 58 |
--sb-item: var(--ecsh-g400); |
| 59 |
--sb-item-hover-bg: rgba(255,255,255,.06); |
| 60 |
--sb-active-bg: var(--ec-brand-deep); |
| 61 |
--sb-head: var(--ecsh-g500); |
| 62 |
} |
| 63 |
|
| 64 |
/* ========================================================= |
| 65 |
APP FRAME (bleeds over #wpbody-content's 20px gutter like |
| 66 |
the old .ec_admin_wrap did) |
| 67 |
========================================================= */ |
| 68 |
.ecsh-app { |
| 69 |
display:flex; margin:0 0 0 -20px; min-height:calc(100vh - var(--ecsh-adminbar)); |
| 70 |
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; |
| 71 |
font-size:14px; color:var(--ecsh-g800); background:var(--ecsh-g100); |
| 72 |
-webkit-font-smoothing:antialiased; |
| 73 |
/* WP only pads #wpcontent on the LEFT (20px; 10px <=782px), so the frame |
| 74 |
bleeds left only — a symmetric negative margin overflows to the right. */ |
| 75 |
} |
| 76 |
.ecsh-app *, .ecsh-app *::before, .ecsh-app *::after { box-sizing:border-box; } |
| 77 |
.ecsh-app a { text-decoration:none; } |
| 78 |
.ecsh-app button { font:inherit; cursor:pointer; } |
| 79 |
.ecsh-app button:focus-visible, |
| 80 |
.ecsh-app a:focus-visible, |
| 81 |
.ecsh-app input:focus-visible { outline:2px solid var(--ec-brand); outline-offset:2px; } |
| 82 |
|
| 83 |
/* ========================================================= |
| 84 |
SIDEBAR |
| 85 |
========================================================= */ |
| 86 |
.ecsh-sidebar { |
| 87 |
width:var(--ecsh-sidebar-w); flex-shrink:0; |
| 88 |
background:var(--sb-bg); |
| 89 |
display:flex; flex-direction:column; |
| 90 |
transition:background var(--ecsh-tr); |
| 91 |
position:sticky; top:var(--ecsh-adminbar); |
| 92 |
height:calc(100vh - var(--ecsh-adminbar)); |
| 93 |
overflow-y:auto; |
| 94 |
scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.25) transparent; |
| 95 |
z-index:20; |
| 96 |
} |
| 97 |
|
| 98 |
/* Brand header — reuses the existing admin-logo.png (174x70 box, white |
| 99 |
artwork designed to sit on the brand-colored surface). Swap for an |
| 100 |
SVG/2x asset later without touching markup. */ |
| 101 |
.ecsh-brand { display:block; padding:8px 8px 2px; } |
| 102 |
.ecsh-brand-logo { |
| 103 |
height:70px; |
| 104 |
background:url(../images/admin-logo.png) center 5px no-repeat; |
| 105 |
filter:drop-shadow(0 1px 2px rgba(0,0,0,.2)); |
| 106 |
} |
| 107 |
|
| 108 |
.ecsh-sb-store { |
| 109 |
margin:8px 14px 12px; display:flex; align-items:center; justify-content:center; gap:7px; |
| 110 |
padding:8px 12px; border-radius:var(--ecsh-r); |
| 111 |
background:rgba(255,255,255,.12); color:var(--ec-on-brand); font-weight:600; font-size:13px; |
| 112 |
border:1px solid rgba(255,255,255,.18); |
| 113 |
transition:background var(--ecsh-tr); |
| 114 |
} |
| 115 |
.ecsh-sb-store:hover { background:rgba(255,255,255,.20); color:var(--ec-on-brand); } |
| 116 |
.ecsh-sb-store svg { width:14px; height:14px; } |
| 117 |
|
| 118 |
/* Sales snapshot (shown when ec_option_admin_display_sales_goal) */ |
| 119 |
.ecsh-sb-sales { margin:0 14px 14px; padding:12px 14px; border-radius:var(--ecsh-r); background:rgba(0,0,0,.18); } |
| 120 |
.ecsh-sb-sales-row { display:flex; align-items:baseline; justify-content:space-between; } |
| 121 |
.ecsh-sb-sales-label { font-size:11px; color:var(--sb-item); font-weight:500; } |
| 122 |
.ecsh-sb-sales-amt { color:var(--ec-on-brand); font-size:17px; font-weight:700; } |
| 123 |
.ecsh-sb-sales-delta { font-size:11px; font-weight:600; color:#fca5a5; } |
| 124 |
.ecsh-sb-sales-delta.ecsh-up { color:#86efac; } |
| 125 |
.ecsh-sb-goal-track { height:4px; border-radius:2px; background:rgba(255,255,255,.18); margin-top:10px; overflow:hidden; } |
| 126 |
.ecsh-sb-goal-fill { height:100%; background:var(--ec-on-brand); border-radius:2px; } |
| 127 |
.ecsh-sb-goal-caption { display:flex; justify-content:space-between; margin-top:6px; font-size:10.5px; color:var(--sb-item); } |
| 128 |
|
| 129 |
/* Nav */ |
| 130 |
.ecsh-sb-nav { flex:1; padding:2px 10px 12px; } |
| 131 |
.ecsh-sb-item { |
| 132 |
display:flex; align-items:stretch; width:100%; |
| 133 |
border-radius:var(--ecsh-r); position:relative; margin-bottom:1px; |
| 134 |
color:var(--sb-item); |
| 135 |
transition:background var(--ecsh-tr), color var(--ecsh-tr); |
| 136 |
} |
| 137 |
.ecsh-sb-item:hover { background:var(--sb-item-hover-bg); color:var(--ec-on-brand); } |
| 138 |
.ecsh-sb-item.ecsh-active { background:var(--sb-active-bg); color:var(--ec-on-brand); } |
| 139 |
.ecsh-sb-item.ecsh-active::before { |
| 140 |
content:""; position:absolute; left:-10px; top:7px; bottom:7px; width:3px; |
| 141 |
border-radius:0 3px 3px 0; background:var(--ec-on-brand); |
| 142 |
} |
| 143 |
.ecsh-sb-item > a { |
| 144 |
flex:1; display:flex; align-items:center; gap:10px; min-width:0; |
| 145 |
padding:9px 10px; color:inherit; font-size:13.5px; font-weight:500; |
| 146 |
} |
| 147 |
.ecsh-sb-item.ecsh-active > a { font-weight:600; } |
| 148 |
.ecsh-sb-item svg.ecsh-ico { width:17px; height:17px; flex-shrink:0; opacity:.9; } |
| 149 |
.ecsh-sb-item .ecsh-badge { |
| 150 |
margin-left:auto; font-size:10.5px; font-weight:700; padding:1px 7px; |
| 151 |
border-radius:10px; background:rgba(255,255,255,.16); color:var(--ec-on-brand); |
| 152 |
align-self:center; |
| 153 |
} |
| 154 |
.ecsh-sb-item .ecsh-badge.ecsh-danger { background:var(--ecsh-red); color:#fff; } |
| 155 |
.ecsh-sb-item .ecsh-badge.ecsh-warn { background:var(--ecsh-amber); color:#fff; } |
| 156 |
.ecsh-sb-chev { |
| 157 |
display:flex; align-items:center; justify-content:center; width:32px; |
| 158 |
border:0; background:transparent; color:inherit; opacity:.6; border-radius:var(--ecsh-r); |
| 159 |
} |
| 160 |
.ecsh-sb-chev:hover { opacity:1; } |
| 161 |
.ecsh-sb-chev svg { width:14px; height:14px; transition:transform var(--ecsh-tr); } |
| 162 |
.ecsh-sb-chev[aria-expanded="true"] svg { transform:rotate(90deg); } |
| 163 |
/* Legacy lock icon filter output inside labels */ |
| 164 |
.ecsh-sb-item .dashicons-lock, .ecsh-sb-sub .dashicons-lock { font-size:14px; width:14px; height:14px; margin-left:auto; } |
| 165 |
.ecsh-sb-sub .dashicons-lock { float:right; } |
| 166 |
|
| 167 |
/* Submenu accordion — identical on desktop and in the mobile drawer */ |
| 168 |
.ecsh-sb-sub { overflow:hidden; max-height:0; transition:max-height 220ms ease; } |
| 169 |
.ecsh-sb-sub.ecsh-open { max-height:900px; } |
| 170 |
.ecsh-sb-sub-inner { margin:2px 0 6px; padding:6px 0; border-radius:var(--ecsh-r); background:var(--sb-panel); } |
| 171 |
.ecsh-sb-sub a { |
| 172 |
display:block; padding:6px 14px 6px 38px; font-size:12.5px; color:var(--sb-item); |
| 173 |
transition:color var(--ecsh-tr), background var(--ecsh-tr); |
| 174 |
} |
| 175 |
.ecsh-sb-sub a:hover { color:var(--ec-on-brand); background:rgba(255,255,255,.06); } |
| 176 |
.ecsh-sb-sub a.ecsh-current { color:var(--ec-on-brand); font-weight:600; position:relative; } |
| 177 |
.ecsh-sb-sub a.ecsh-current::before { |
| 178 |
content:""; position:absolute; left:24px; top:50%; transform:translateY(-50%); |
| 179 |
width:5px; height:5px; border-radius:50%; background:var(--ec-on-brand); |
| 180 |
} |
| 181 |
.ecsh-sb-sub-head { padding:9px 14px 3px 24px; font-size:10.5px; font-weight:700; color:var(--sb-head); } |
| 182 |
|
| 183 |
/* Footer: trial/license + powered-by */ |
| 184 |
.ecsh-sb-foot { padding:10px 14px 14px; border-top:1px solid rgba(255,255,255,.12); } |
| 185 |
.ecsh-sb-trial { font-size:11.5px; color:var(--sb-item); line-height:1.45; } |
| 186 |
.ecsh-sb-trial strong { color:var(--ec-on-brand); display:block; margin-bottom:2px; } |
| 187 |
.ecsh-sb-trial a { color:var(--ec-on-brand); text-decoration:underline; text-underline-offset:2px; } |
| 188 |
.ecsh-sb-powered { |
| 189 |
margin-top:10px; display:block; font-size:10.5px; color:var(--sb-item); opacity:.9; |
| 190 |
} |
| 191 |
.ecsh-sb-powered:hover { color:var(--ec-on-brand); opacity:1; } |
| 192 |
|
| 193 |
/* ========================================================= |
| 194 |
MAIN COLUMN + TOP BAR |
| 195 |
========================================================= */ |
| 196 |
.ecsh-main { flex:1; min-width:0; display:flex; flex-direction:column; } |
| 197 |
|
| 198 |
.ecsh-topbar { |
| 199 |
height:var(--ecsh-topbar-h); background:#fff; border-bottom:1px solid var(--ecsh-g200); |
| 200 |
display:flex; align-items:center; gap:10px; padding:0 20px; |
| 201 |
position:sticky; top:var(--ecsh-adminbar); z-index:30; |
| 202 |
} |
| 203 |
.ecsh-tb-hamburger { display:none; } |
| 204 |
.ecsh-tb-logo { display:none; } |
| 205 |
.ecsh-tb-crumb { display:flex; align-items:center; gap:7px; font-size:13px; color:var(--ecsh-g500); min-width:0; } |
| 206 |
.ecsh-tb-crumb .ecsh-sep { color:var(--ecsh-g300); } |
| 207 |
.ecsh-tb-crumb .ecsh-crumb-link { color:var(--ecsh-g500); white-space:nowrap; transition:color var(--ecsh-tr); } |
| 208 |
.ecsh-tb-crumb .ecsh-crumb-link:hover { color:var(--ec-brand); } |
| 209 |
.ecsh-tb-crumb .ecsh-here { color:var(--ecsh-g900); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } |
| 210 |
|
| 211 |
/* Docs search (same GET form/behavior as the old sidebar search). |
| 212 |
WP forms.css gives admin inputs min-height/border/shadow — neutralize |
| 213 |
them so the field fits the 56px bar and reads as one control. */ |
| 214 |
.ecsh-tb-search { |
| 215 |
margin-left:auto; display:flex; align-items:center; gap:7px; |
| 216 |
height:36px; background:var(--ecsh-g50); border:1px solid var(--ecsh-g300); |
| 217 |
border-radius:var(--ecsh-r); |
| 218 |
padding:0 12px; width:230px; color:var(--ecsh-g500); font-size:13px; |
| 219 |
transition:border-color var(--ecsh-tr), background var(--ecsh-tr); |
| 220 |
overflow:hidden; |
| 221 |
} |
| 222 |
.ecsh-tb-search:focus-within { background:#fff; border-color:var(--ec-brand); } |
| 223 |
.ecsh-tb-search input, |
| 224 |
.ecsh-tb-search input[type="text"] { |
| 225 |
border:0 !important; outline:0; background:transparent !important; |
| 226 |
box-shadow:none !important; border-radius:0; |
| 227 |
width:100%; height:100%; min-height:0; margin:0; padding:0; |
| 228 |
font-size:13px; line-height:34px; color:var(--ecsh-g800); |
| 229 |
} |
| 230 |
.ecsh-tb-search input::placeholder { color:var(--ecsh-g500); opacity:1; } |
| 231 |
.ecsh-tb-search svg { width:14px; height:14px; flex-shrink:0; } |
| 232 |
.ecsh-tb-search-kbd { |
| 233 |
font-size:10px; color:var(--ecsh-g400); border:1px solid var(--ecsh-g300); border-radius:4px; |
| 234 |
padding:0 4px; background:#fff; font-family:inherit; flex-shrink:0; |
| 235 |
} |
| 236 |
/* Icon-only trigger when the full search field is hidden (<900px) */ |
| 237 |
.ecsh-tb-search-btn { |
| 238 |
display:none; align-items:center; justify-content:center; |
| 239 |
width:36px; height:36px; margin-left:auto; |
| 240 |
border:1px solid var(--ecsh-g300); border-radius:var(--ecsh-r); background:#fff; |
| 241 |
color:var(--ecsh-g600); transition:all var(--ecsh-tr); |
| 242 |
} |
| 243 |
.ecsh-tb-search-btn:hover { border-color:var(--ecsh-g400); color:var(--ecsh-g800); } |
| 244 |
.ecsh-tb-search-btn svg { width:16px; height:16px; } |
| 245 |
|
| 246 |
/* ---- Command palette ---- */ |
| 247 |
.ecsh-palette { position:fixed; inset:0; z-index:100000; } |
| 248 |
.ecsh-palette[hidden] { display:none; } |
| 249 |
.ecsh-palette-backdrop { position:absolute; inset:0; background:rgba(17,24,39,.45); } |
| 250 |
.ecsh-palette-panel { |
| 251 |
position:relative; width:min(560px, calc(100vw - 24px)); |
| 252 |
margin:min(14vh, 120px) auto 0; |
| 253 |
background:#fff; border:1px solid var(--ecsh-g200); border-radius:12px; |
| 254 |
box-shadow:var(--ecsh-shlg); overflow:hidden; |
| 255 |
} |
| 256 |
.ecsh-palette-inputrow { |
| 257 |
display:flex; align-items:center; gap:10px; |
| 258 |
padding:14px 16px; border-bottom:1px solid var(--ecsh-g200); |
| 259 |
color:var(--ecsh-g400); |
| 260 |
} |
| 261 |
.ecsh-palette-inputrow svg { width:17px; height:17px; flex-shrink:0; } |
| 262 |
.ecsh-palette-inputrow input, |
| 263 |
.ecsh-palette-inputrow input[type="text"] { |
| 264 |
flex:1; border:0 !important; outline:0; background:transparent !important; |
| 265 |
box-shadow:none !important; min-height:0; margin:0; padding:0; |
| 266 |
font-size:15px; color:var(--ecsh-g900); |
| 267 |
} |
| 268 |
.ecsh-palette-inputrow kbd { |
| 269 |
font-size:10px; color:var(--ecsh-g400); border:1px solid var(--ecsh-g300); |
| 270 |
border-radius:4px; padding:1px 5px; background:var(--ecsh-g50); font-family:inherit; |
| 271 |
} |
| 272 |
.ecsh-palette-results { max-height:min(50vh, 380px); overflow-y:auto; padding:6px; } |
| 273 |
.ecsh-palette-item { |
| 274 |
display:flex; align-items:center; gap:10px; width:100%; |
| 275 |
padding:9px 10px; border:0; border-radius:var(--ecsh-r); background:transparent; |
| 276 |
font-size:13.5px; color:var(--ecsh-g800); text-align:left; cursor:pointer; |
| 277 |
} |
| 278 |
.ecsh-palette-item svg { width:15px; height:15px; flex-shrink:0; color:var(--ecsh-g400); } |
| 279 |
.ecsh-palette-item .ecsh-palette-group { margin-left:auto; font-size:11.5px; color:var(--ecsh-g400); white-space:nowrap; } |
| 280 |
.ecsh-palette-item.ecsh-selected, |
| 281 |
.ecsh-palette-item:hover { background:var(--ec-brand-softer); } |
| 282 |
.ecsh-palette-item.ecsh-selected svg, |
| 283 |
.ecsh-palette-item:hover svg { color:var(--ec-brand); } |
| 284 |
.ecsh-palette-item-docs { border-top:1px solid var(--ecsh-g100); margin-top:4px; padding-top:11px; color:var(--ec-brand); font-weight:600; } |
| 285 |
.ecsh-palette-item-docs svg { color:var(--ec-brand); } |
| 286 |
.ecsh-palette-empty { padding:10px 12px 4px; font-size:12.5px; color:var(--ecsh-g500); } |
| 287 |
|
| 288 |
/* Section-jump landing highlight */ |
| 289 |
.ecsh-jump-highlight { |
| 290 |
background:var(--ec-brand-softer) !important; |
| 291 |
box-shadow:0 0 0 3px var(--ec-brand-softer); |
| 292 |
border-radius:var(--ecsh-rs); |
| 293 |
transition:background 600ms ease, box-shadow 600ms ease; |
| 294 |
} |
| 295 |
|
| 296 |
.ecsh-tb-btn { |
| 297 |
display:flex; align-items:center; gap:6px; padding:7px 12px; |
| 298 |
border:1px solid var(--ecsh-g300); border-radius:var(--ecsh-r); background:#fff; |
| 299 |
font-size:13px; font-weight:500; color:var(--ecsh-g700); |
| 300 |
transition:all var(--ecsh-tr); white-space:nowrap; |
| 301 |
} |
| 302 |
.ecsh-tb-btn:hover { border-color:var(--ecsh-g400); background:var(--ecsh-g50); color:var(--ecsh-g800); } |
| 303 |
.ecsh-tb-btn svg { width:15px; height:15px; } |
| 304 |
|
| 305 |
/* Help dropdown (absorbs the old marketing header links) */ |
| 306 |
.ecsh-tb-menu { position:relative; } |
| 307 |
.ecsh-tb-dropdown { |
| 308 |
position:absolute; right:0; top:calc(100% + 6px); width:230px; |
| 309 |
background:#fff; border:1px solid var(--ecsh-g200); border-radius:var(--ecsh-r); |
| 310 |
box-shadow:var(--ecsh-shlg); padding:6px; display:none; z-index:50; |
| 311 |
} |
| 312 |
.ecsh-tb-menu.ecsh-open .ecsh-tb-dropdown { display:block; } |
| 313 |
.ecsh-tb-dropdown a { |
| 314 |
display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:var(--ecsh-rs); |
| 315 |
font-size:13px; color:var(--ecsh-g700); |
| 316 |
} |
| 317 |
.ecsh-tb-dropdown a:hover { background:var(--ecsh-g100); color:var(--ecsh-g900); } |
| 318 |
.ecsh-tb-dropdown a .dashicons { font-size:15px; width:15px; height:15px; color:var(--ecsh-g400); } |
| 319 |
.ecsh-tb-dropdown .ecsh-dd-sep { height:1px; background:var(--ecsh-g200); margin:5px 4px; } |
| 320 |
|
| 321 |
/* Expandable group inside the Help dropdown (Video Tutorials). |
| 322 |
Accordion, not hover-flyout, so it works on touch. */ |
| 323 |
.ecsh-tb-dropdown { max-height:min(70vh, 520px); overflow-y:auto; overscroll-behavior:contain; } |
| 324 |
.ecsh-dd-group-toggle { |
| 325 |
display:flex; align-items:center; gap:9px; width:100%; |
| 326 |
padding:8px 10px; border:0; border-radius:var(--ecsh-rs); background:transparent; |
| 327 |
font-size:13px; color:var(--ecsh-g700); text-align:left; |
| 328 |
} |
| 329 |
.ecsh-dd-group-toggle:hover { background:var(--ecsh-g100); color:var(--ecsh-g900); } |
| 330 |
.ecsh-dd-group-toggle .dashicons { font-size:15px; width:15px; height:15px; color:var(--ecsh-g400); } |
| 331 |
.ecsh-dd-chev { width:13px; height:13px; margin-left:auto; color:var(--ecsh-g400); transition:transform var(--ecsh-tr); } |
| 332 |
.ecsh-dd-group-toggle[aria-expanded="true"] .ecsh-dd-chev { transform:rotate(90deg); } |
| 333 |
.ecsh-dd-group-body { display:none; padding:2px 0 4px; } |
| 334 |
.ecsh-dd-group.ecsh-open .ecsh-dd-group-body { display:block; } |
| 335 |
.ecsh-tb-dropdown .ecsh-dd-group-body a { padding:6px 10px 6px 34px; font-size:12.5px; color:var(--ecsh-g600); } |
| 336 |
.ecsh-tb-dropdown .ecsh-dd-group-body a:hover { color:var(--ecsh-g900); } |
| 337 |
.ecsh-tb-dropdown .ecsh-dd-group-body a.ecsh-dd-more { color:var(--ec-brand); font-weight:600; } |
| 338 |
|
| 339 |
/* Color selector — keeps #ec_admin_shell_color id + nonce for the |
| 340 |
existing ec_admin_ajax_save_color_scheme AJAX action */ |
| 341 |
.ecsh-tb-color { |
| 342 |
display:flex; align-items:center; gap:8px; padding:5px 10px 5px 6px; |
| 343 |
border:1px solid var(--ecsh-g300); border-radius:var(--ecsh-r); background:#fff; |
| 344 |
transition:border-color var(--ecsh-tr); |
| 345 |
} |
| 346 |
.ecsh-tb-color:hover { border-color:var(--ecsh-g400); } |
| 347 |
.ecsh-tb-color-swatch { |
| 348 |
width:24px; height:24px; border-radius:6px; background:var(--ec-brand); |
| 349 |
border:2px solid #fff; box-shadow:0 0 0 1px var(--ecsh-g300); position:relative; overflow:hidden; |
| 350 |
cursor:pointer; flex-shrink:0; |
| 351 |
} |
| 352 |
.ecsh-tb-color-swatch input[type="color"] { |
| 353 |
position:absolute; inset:-6px; opacity:0; cursor:pointer; width:44px; height:44px; |
| 354 |
border:0; padding:0; background:none; |
| 355 |
} |
| 356 |
.ecsh-tb-color-label { font-size:12.5px; color:var(--ecsh-g600); font-weight:500; } |
| 357 |
|
| 358 |
/* ========================================================= |
| 359 |
CONTENT AREA + LEGACY COMPAT |
| 360 |
========================================================= */ |
| 361 |
/* overflow-x:clip prevents wide content from widening the page WITHOUT |
| 362 |
creating a scroll container — unlike auto/hidden/scroll, clip keeps |
| 363 |
position:sticky descendants (product editor header/rail) working |
| 364 |
against the viewport, and clip on the x-axis leaves overflow-y |
| 365 |
visible, so row-action menus can still hang below their tables. |
| 366 |
(Do NOT put overflow-x:auto on .ecv2-table-scroll at desktop widths: |
| 367 |
a scroll value forces overflow-y to auto and clips row menus — |
| 368 |
admin-v2.css already enables it under 640px containers by design.) */ |
| 369 |
.ecsh-content { padding:20px; flex:1; min-width:0; overflow-x:clip; } |
| 370 |
|
| 371 |
/* Legacy pages style against .ec_admin_content_area descendants; keep the |
| 372 |
class on our wrapper but neutralize its old box styling (loads after admin.css). |
| 373 |
NOTE: this selector (0,2,0) outweighs .ecsh-content (0,1,0) on the same |
| 374 |
element, so it must CARRY the real padding — legacy admin.css sets its own |
| 375 |
(15px / 5px small) which would otherwise leak through. */ |
| 376 |
.ecsh-main .ec_admin_content_area { |
| 377 |
float:none; width:auto; max-width:none; margin:0; padding:20px; |
| 378 |
border:0 !important; background:transparent; min-height:0; |
| 379 |
} |
| 380 |
.ecsh-main .ec_admin_mobile_menu_button { display:none; } |
| 381 |
|
| 382 |
/* ========================================================= |
| 383 |
PRODUCT EDITOR V2 STICKY COORDINATION |
| 384 |
admin-details-v2.css pins .ecdv2-header at top:32px and |
| 385 |
.ecdv2-rail at top:96px — tuned for the old shell where only |
| 386 |
the WP admin bar sat above them. Inside the new shell they must |
| 387 |
stack BELOW the sticky topbar; original header→rail deltas |
| 388 |
(64px desktop / 58px mobile) are preserved. |
| 389 |
========================================================= */ |
| 390 |
.ecsh-main .ecdv2-header { |
| 391 |
top:calc(var(--ecsh-adminbar) + var(--ecsh-topbar-h) + 8px); |
| 392 |
z-index:25; /* below the shell topbar (30) so it can never cover it */ |
| 393 |
} |
| 394 |
.ecsh-main .ecdv2-rail { |
| 395 |
top:calc(var(--ecsh-adminbar) + var(--ecsh-topbar-h) + 8px + 64px); |
| 396 |
} |
| 397 |
|
| 398 |
/* ========================================================= |
| 399 |
MOBILE (<=782px, the WP breakpoint) |
| 400 |
========================================================= */ |
| 401 |
.ecsh-scrim { display:none; } |
| 402 |
.ecsh-bottom-nav { display:none; } |
| 403 |
|
| 404 |
@media (max-width:900px){ |
| 405 |
.ecsh-tb-color-label, .ecsh-tb-search, .ecsh-tb-search-kbd { display:none; } |
| 406 |
.ecsh-tb-search-btn { display:flex; } |
| 407 |
} |
| 408 |
|
| 409 |
@media (max-width:782px){ |
| 410 |
.ecsh-app { margin:0 0 0 -10px; } |
| 411 |
|
| 412 |
.ecsh-sidebar { |
| 413 |
position:fixed; left:0; top:var(--ecsh-adminbar); bottom:0; z-index:99999; |
| 414 |
transform:translateX(-100%); transition:transform 240ms ease; |
| 415 |
width:min(300px, 84vw); height:auto; |
| 416 |
} |
| 417 |
body.ecsh-drawer-open .ecsh-sidebar { transform:translateX(0); box-shadow:var(--ecsh-shlg); } |
| 418 |
.ecsh-scrim { |
| 419 |
display:block; position:fixed; inset:var(--ecsh-adminbar) 0 0 0; z-index:99998; |
| 420 |
background:rgba(17,24,39,.5); |
| 421 |
opacity:0; pointer-events:none; transition:opacity 200ms ease; |
| 422 |
} |
| 423 |
body.ecsh-drawer-open .ecsh-scrim { opacity:1; pointer-events:auto; } |
| 424 |
|
| 425 |
.ecsh-tb-hamburger { |
| 426 |
display:flex; align-items:center; justify-content:center; |
| 427 |
width:38px; height:38px; border:0; background:transparent; border-radius:var(--ecsh-r); |
| 428 |
color:var(--ecsh-g700); margin-left:-8px; |
| 429 |
} |
| 430 |
.ecsh-tb-hamburger:hover { background:var(--ecsh-g100); } |
| 431 |
.ecsh-tb-hamburger svg { width:20px; height:20px; } |
| 432 |
|
| 433 |
/* Compact brand chip: the white PNG needs a brand-colored backdrop |
| 434 |
to stay visible on the white top bar */ |
| 435 |
.ecsh-tb-logo { |
| 436 |
display:block; width:96px; height:34px; border-radius:7px; flex-shrink:0; |
| 437 |
background:var(--ec-brand) url(../images/admin-logo.png) center / auto 26px no-repeat; |
| 438 |
} |
| 439 |
.ecsh-tb-crumb .ecsh-trail { display:none; } |
| 440 |
|
| 441 |
.ecsh-topbar { padding:0 12px; } |
| 442 |
/* Must include the compat selector: same specificity or the desktop |
| 443 |
padding above wins and the bottom tab bar overlaps content */ |
| 444 |
.ecsh-content, |
| 445 |
.ecsh-main .ec_admin_content_area { padding:14px 12px calc(76px + env(safe-area-inset-bottom)); } |
| 446 |
|
| 447 |
/* Bottom tab bar — persistent nav for mobile-first store owners */ |
| 448 |
.ecsh-bottom-nav { |
| 449 |
display:flex; position:fixed; left:0; right:0; bottom:0; z-index:9999; |
| 450 |
background:#fff; border-top:1px solid var(--ecsh-g200); |
| 451 |
padding:6px 4px calc(6px + env(safe-area-inset-bottom)); |
| 452 |
box-shadow:0 -4px 12px rgba(0,0,0,.05); |
| 453 |
} |
| 454 |
.ecsh-bn-item { |
| 455 |
flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; |
| 456 |
padding:5px 2px; border:0; background:transparent; color:var(--ecsh-g500); |
| 457 |
font-size:10.5px; font-weight:500; border-radius:var(--ecsh-r); position:relative; |
| 458 |
} |
| 459 |
.ecsh-bn-item svg { width:21px; height:21px; } |
| 460 |
.ecsh-bn-item.ecsh-active { color:var(--ec-brand); font-weight:600; } |
| 461 |
.ecsh-bn-item .ecsh-bn-badge { |
| 462 |
position:absolute; top:1px; right:calc(50% - 20px); |
| 463 |
background:var(--ecsh-red); color:#fff; font-size:9px; font-weight:700; |
| 464 |
padding:1px 5px; border-radius:8px; |
| 465 |
} |
| 466 |
|
| 467 |
/* Product editor V2 on mobile: rail sticks below the shell topbar |
| 468 |
(original 58px delta preserved); toasts clear the bottom tab bar */ |
| 469 |
.ecsh-main .ecdv2-rail { top:calc(var(--ecsh-adminbar) + var(--ecsh-topbar-h) + 8px + 58px); } |
| 470 |
.ecsh-main .ecdv2-toasts { bottom:calc(84px + env(safe-area-inset-bottom)); } |
| 471 |
} |
| 472 |
|
| 473 |
@media (prefers-reduced-motion: reduce){ |
| 474 |
.ecsh-app *, .ecsh-sidebar, .ecsh-scrim, .ecsh-sb-sub { transition:none !important; } |
| 475 |
} |
| 476 |
|
| 477 |
/* ========================================================= |
| 478 |
ECV2 CONSISTENCY BRIDGE |
| 479 |
Minimal overrides so the upgraded panels (products, orders, |
| 480 |
users, offers) pick up the user's brand color for INTERACTIVE |
| 481 |
accents while semantic colors (green=on/success, red=danger, |
| 482 |
amber=warn) stay untouched. Load after admin-v2.css. |
| 483 |
========================================================= */ |
| 484 |
.ecv2-wrap .ecv2-btn-primary { background:var(--ec-brand); border-color:var(--ec-brand); color:var(--ec-on-brand); } |
| 485 |
.ecv2-wrap .ecv2-btn-primary:hover { background:var(--ec-brand-hover); border-color:var(--ec-brand-hover); color:var(--ec-on-brand); } |
| 486 |
|
| 487 |
.ecv2-wrap .ecv2-stat-card:hover { border-color:var(--ec-brand); } |
| 488 |
.ecv2-wrap .ecv2-stat-active { border-color:var(--ec-brand); background:var(--ec-brand-softer); } |
| 489 |
|
| 490 |
.ecv2-wrap .ecv2-btn:focus-visible, |
| 491 |
.ecv2-wrap a:focus-visible, |
| 492 |
.ecv2-wrap input:focus-visible, |
| 493 |
.ecv2-wrap select:focus-visible { outline:2px solid var(--ec-brand); outline-offset:2px; } |
| 494 |
|
| 495 |
.ecv2-wrap .ecv2-stat-toggle-btn:hover, |
| 496 |
.ecv2-wrap .ecv2-stat-toggle-btn[aria-expanded="true"] { border-color:var(--ec-brand); color:var(--ec-brand); } |
| 497 |
.ecv2-wrap .ecv2-stat-toggle-btn[aria-expanded="true"] { background:var(--ec-brand-softer); } |
| 498 |
|
| 499 |
/* Row hover tint on v2 tables */ |
| 500 |
.ecv2-wrap tbody tr:hover td { background:var(--ec-brand-softer); } |
| 501 |
|
| 502 |
/* Row-action menus must escape the table: admin-v2.css puts |
| 503 |
overflow:hidden on .ecv2-table (for corner rounding), which clips the |
| 504 |
absolutely-positioned .ecv2-row-menu — fully hiding it on short tables. |
| 505 |
Unclip, and re-round the corners on the cells themselves so the card |
| 506 |
look is unchanged. */ |
| 507 |
.ecsh-main .ecv2-table { overflow:visible; } |
| 508 |
.ecsh-main .ecv2-table thead th:first-child { border-top-left-radius:calc(var(--ecv2-r, 8px) - 1px); } |
| 509 |
.ecsh-main .ecv2-table thead th:last-child { border-top-right-radius:calc(var(--ecv2-r, 8px) - 1px); } |
| 510 |
.ecsh-main .ecv2-table tbody tr:last-child td:first-child { border-bottom-left-radius:calc(var(--ecv2-r, 8px) - 1px); } |
| 511 |
.ecsh-main .ecv2-table tbody tr:last-child td:last-child { border-bottom-right-radius:calc(var(--ecv2-r, 8px) - 1px); } |
| 512 |
|
| 513 |
/* ========================================================================== |
| 514 |
Shared admin notice card (wpec-pro-notice) |
| 515 |
-------------------------------------------------------------------------- |
| 516 |
Used by core health notices (PRO activation, Square connection, database |
| 517 |
repair — wp_easycart_admin.php print_core_notices_in_shell) AND by the |
| 518 |
PRO plugin's license banners (trial active/expired, registration info). |
| 519 |
Defined HERE in core shell-v2.css, not in the PRO stylesheet, because the |
| 520 |
PRO-activation banner renders exactly when the PRO plugin's CSS is not |
| 521 |
loaded. If the PRO stylesheet carries its own copy of these rules, treat |
| 522 |
this block as canonical and remove the PRO copy to avoid drift. |
| 523 |
========================================================================== */ |
| 524 |
.wpec-pro-notice { |
| 525 |
display: flex; |
| 526 |
align-items: center; |
| 527 |
gap: 12px; |
| 528 |
background: #fff; |
| 529 |
border: 1px solid #dcdcde; |
| 530 |
border-radius: 10px; |
| 531 |
padding: 13px 16px; |
| 532 |
margin: 0 0 18px; |
| 533 |
font-size: 13px; |
| 534 |
line-height: 1.45; |
| 535 |
color: #1d2327; |
| 536 |
} |
| 537 |
.wpec-pro-notice-icon.dashicons { |
| 538 |
flex: 0 0 auto; |
| 539 |
width: 22px; |
| 540 |
height: 22px; |
| 541 |
font-size: 22px; |
| 542 |
line-height: 1; |
| 543 |
color: #646970; |
| 544 |
} |
| 545 |
.wpec-pro-notice-body { |
| 546 |
flex: 1 1 auto; |
| 547 |
min-width: 0; |
| 548 |
} |
| 549 |
.wpec-pro-notice-body a { |
| 550 |
color: inherit; |
| 551 |
font-weight: 600; |
| 552 |
text-decoration: underline; |
| 553 |
} |
| 554 |
.wpec-pro-notice-button { |
| 555 |
flex: 0 0 auto; |
| 556 |
display: inline-block; |
| 557 |
background: #1d2327; |
| 558 |
color: #fff !important; |
| 559 |
font-size: 12px; |
| 560 |
font-weight: 600; |
| 561 |
padding: 8px 16px; |
| 562 |
border-radius: 8px; |
| 563 |
text-decoration: none; |
| 564 |
white-space: nowrap; |
| 565 |
transition: background .15s ease; |
| 566 |
} |
| 567 |
.wpec-pro-notice-button:hover, |
| 568 |
.wpec-pro-notice-button:focus { |
| 569 |
background: #3c434a; |
| 570 |
color: #fff; |
| 571 |
} |
| 572 |
|
| 573 |
/* Variants: a tinted left accent + icon color; backgrounds stay calm so |
| 574 |
stacked notices don't shout. */ |
| 575 |
.wpec-pro-notice--brand { border-left: 4px solid #2ebd59; } |
| 576 |
.wpec-pro-notice--brand .wpec-pro-notice-icon.dashicons { color: #2ebd59; } |
| 577 |
.wpec-pro-notice--brand .wpec-pro-notice-button { background: #2ebd59; } |
| 578 |
.wpec-pro-notice--brand .wpec-pro-notice-button:hover, |
| 579 |
.wpec-pro-notice--brand .wpec-pro-notice-button:focus { background: #219a47; } |
| 580 |
|
| 581 |
.wpec-pro-notice--danger { border-left: 4px solid #d63638; background: #fdf5f5; } |
| 582 |
.wpec-pro-notice--danger .wpec-pro-notice-icon.dashicons { color: #d63638; } |
| 583 |
|
| 584 |
.wpec-pro-notice--info { border-left: 4px solid #72aee6; } |
| 585 |
.wpec-pro-notice--info .wpec-pro-notice-icon.dashicons { color: #2271b1; } |
| 586 |
|
| 587 |
/* Stacked variant: multi-line content (e.g. the database repair notice with |
| 588 |
its expandable error list) — icon aligns to the first line instead of |
| 589 |
center, and inner paragraphs tighten up. */ |
| 590 |
.wpec-pro-notice--stacked { align-items: flex-start; } |
| 591 |
.wpec-pro-notice--stacked .wpec-pro-notice-icon.dashicons { margin-top: 1px; } |
| 592 |
.wpec-pro-notice--stacked .wpec-pro-notice-body p { margin: 0 0 6px; } |
| 593 |
.wpec-pro-notice--stacked .wpec-pro-notice-body p:last-child { margin-bottom: 0; } |
| 594 |
.wpec-pro-notice--stacked .wpec-pro-notice-body ul { margin: 6px 0 0 18px; list-style: disc; } |
| 595 |
|
| 596 |
/* Narrow screens: button drops below the text. */ |
| 597 |
@media ( max-width: 600px ) { |
| 598 |
.wpec-pro-notice { flex-wrap: wrap; } |
| 599 |
.wpec-pro-notice-button { margin-left: 34px; } |
| 600 |
} |
| 601 |
|
| 602 |
/* ========================================================= |
| 603 |
LICENSE RENEWAL — top-bar pill, sidebar block, popup |
| 604 |
========================================================= */ |
| 605 |
.ecsh-tb-license { display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 6px 0 10px; border-radius:999px; border:1px solid #fde68a; background:#fffbeb; color:#92400e; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; white-space:nowrap; } |
| 606 |
.ecsh-tb-license .dashicons { font-size:15px; width:15px; height:15px; color:#d97706; } |
| 607 |
.ecsh-tb-license-cta { padding:3px 9px; border-radius:999px; background:#d97706; color:#fff; font-size:11px; font-weight:700; } |
| 608 |
.ecsh-tb-license:hover { background:#fef3c7; } |
| 609 |
.ecsh-tb-license.is-critical, .ecsh-tb-license.is-lapsed { border-color:#fecaca; background:#fef2f2; color:#991b1b; } |
| 610 |
.ecsh-tb-license.is-critical .dashicons, .ecsh-tb-license.is-lapsed .dashicons { color:var(--ecsh-red); } |
| 611 |
.ecsh-tb-license.is-critical .ecsh-tb-license-cta, .ecsh-tb-license.is-lapsed .ecsh-tb-license-cta { background:var(--ecsh-red); } |
| 612 |
.ecsh-tb-license.is-critical:hover, .ecsh-tb-license.is-lapsed:hover { background:#fee2e2; } |
| 613 |
.ecsh-tb-license.is-critical { animation:ecsh-pulse 2.4s ease-in-out infinite; } |
| 614 |
@keyframes ecsh-pulse { 0%,100% { box-shadow:0 0 0 0 rgba(239,68,68,0); } 50% { box-shadow:0 0 0 4px rgba(239,68,68,.18); } } |
| 615 |
@media (prefers-reduced-motion: reduce) { .ecsh-tb-license.is-critical { animation:none; } } |
| 616 |
@media screen and (max-width:1100px) { .ecsh-tb-license-text { display:none; } .ecsh-tb-license { padding-left:8px; } } |
| 617 |
|
| 618 |
.ecsh-sb-renew { display:block; width:100%; text-align:left; margin:0 0 4px; padding:10px 12px; border-radius:8px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); color:var(--sb-item); font:inherit; cursor:pointer; } |
| 619 |
.ecsh-sb-renew:hover { background:rgba(255,255,255,.1); } |
| 620 |
.ecsh-sb-renew strong { display:block; font-size:12px; color:var(--ec-on-brand); margin:6px 0 2px; } |
| 621 |
.ecsh-sb-renew span:last-child { display:block; font-size:11px; line-height:1.4; opacity:.9; } |
| 622 |
.ecsh-sb-renew-bar { display:block; height:4px; border-radius:2px; background:rgba(255,255,255,.14); overflow:hidden; } |
| 623 |
.ecsh-sb-renew-bar > span { display:block; height:100%; border-radius:2px; background:var(--ecsh-amber); } |
| 624 |
.ecsh-sb-renew.is-critical .ecsh-sb-renew-bar > span, .ecsh-sb-renew.is-lapsed .ecsh-sb-renew-bar > span { background:var(--ecsh-red); } |
| 625 |
|
| 626 |
.ecsh-renewal-modal { position:fixed; inset:0; z-index:100000; background:rgba(17,24,39,.55); display:none; align-items:center; justify-content:center; padding:24px; } |
| 627 |
body.ecsh-renewal-open { overflow:hidden; } |
| 628 |
.ecsh-renewal-card { position:relative; width:560px; max-width:100%; background:#fff; border-radius:14px; box-shadow:0 24px 60px rgba(0,0,0,.3); padding:24px 26px 22px; font-family:inherit; } |
| 629 |
.ecsh-renewal-x { position:absolute; top:12px; right:12px; width:32px; height:32px; border:0; background:none; border-radius:8px; color:var(--ecsh-g500); cursor:pointer; display:grid; place-items:center; } |
| 630 |
.ecsh-renewal-x:hover { background:var(--ecsh-g100); color:var(--ecsh-g900); } |
| 631 |
.ecsh-renewal-head { display:flex; gap:14px; align-items:flex-start; margin-bottom:12px; padding-right:32px; } |
| 632 |
.ecsh-renewal-icon { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; flex-shrink:0; background:#fef3c7; color:#b45309; } |
| 633 |
.ecsh-renewal-icon .dashicons { font-size:22px; width:22px; height:22px; } |
| 634 |
.ecsh-renewal-modal.is-critical .ecsh-renewal-icon, .ecsh-renewal-modal.is-lapsed .ecsh-renewal-icon { background:#fee2e2; color:var(--ecsh-red); } |
| 635 |
.ecsh-renewal-eyebrow { display:block; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; color:var(--ecsh-g500); margin-bottom:2px; } |
| 636 |
.ecsh-renewal-card h3 { margin:0; font-size:18px; font-weight:600; color:var(--ecsh-g900); line-height:1.3; } |
| 637 |
.ecsh-renewal-lead { margin:0 0 10px; font-size:13.5px; line-height:1.55; color:var(--ecsh-g700); } |
| 638 |
.ecsh-renewal-stakes { margin:0 0 18px; padding:0; list-style:none; display:grid; gap:6px; } |
| 639 |
.ecsh-renewal-stakes li { font-size:13px; color:var(--ecsh-g800); display:flex; gap:9px; align-items:flex-start; line-height:1.45; } |
| 640 |
.ecsh-renewal-stakes li::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--ecsh-amber); margin-top:7px; flex-shrink:0; } |
| 641 |
.ecsh-renewal-modal.is-critical .ecsh-renewal-stakes li::before, .ecsh-renewal-modal.is-lapsed .ecsh-renewal-stakes li::before { background:var(--ecsh-red); } |
| 642 |
.ecsh-renewal-card:focus { outline:none; } |
| 643 |
.ecsh-renewal-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; } |
| 644 |
.ecsh-renewal-actions .ecv2-btn { white-space:nowrap; } |
| 645 |
.ecsh-renewal-actions .ecv2-btn .dashicons { font-size:14px; width:14px; height:14px; } |
| 646 |
.ecsh-renewal-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; padding-top:12px; border-top:1px solid var(--ecsh-g100); } |
| 647 |
.ecsh-renewal-fine { font-size:11.5px; color:var(--ecsh-g500); line-height:1.45; } |
| 648 |
|
| 649 |
.ecsh-renewal-free { font-size:12px; color:var(--ecsh-g500); text-decoration:underline; text-underline-offset:2px; } |
| 650 |
.ecsh-renewal-free:hover { color:var(--ecsh-g800); } |
| 651 |
|
| 652 |
/* Lapsed gate variant of the renewal popup */ |
| 653 |
.ecsh-renewal-modal.is-gate { background:rgba(17,24,39,.72); backdrop-filter:blur(2px); } |
| 654 |
.ecsh-renewal-keep { display:flex; gap:8px; align-items:flex-start; margin:0 0 16px; padding:10px 12px; border-radius:8px; background:#ecfdf5; border:1px solid #bbf7d0; font-size:12.5px; color:#166534; line-height:1.5; } |
| 655 |
.ecsh-renewal-keep .dashicons { color:var(--ecsh-green); flex-shrink:0; font-size:16px; width:16px; height:16px; margin-top:2px; } |
| 656 |
.ecsh-renewal-later { margin-left:auto; color:var(--ecsh-g600); } |
| 657 |
.ecsh-renewal-free { white-space:nowrap; flex-shrink:0; } |
