| 1 |
/* ============================================================================ |
| 2 |
* WP EasyCart Admin — Customers List V2 (FREE) |
| 3 |
* |
| 4 |
* Styles specific to the user table; the shared V2 framework styles |
| 5 |
* (ecv2-wrap, tables, cards, drawer, modals, toasts) come from admin-v2.css. |
| 6 |
* Enqueued only on wp-easycart-users → accounts, depends on admin-v2.css. |
| 7 |
* ========================================================================= */ |
| 8 |
|
| 9 |
/* ---- Table layout ---- |
| 10 |
Percentage widths on every header cell (overriding the px hints from PHP) |
| 11 |
so there is no unsized column for the browser to squeeze. Percentages sum |
| 12 |
to 100 with all columns visible and re-balance proportionally as the |
| 13 |
container query hides columns. Customer is the largest share. */ |
| 14 |
.ecv2-table.ecv2-user-table { table-layout:fixed; } |
| 15 |
.ecv2-user-table .ecv2-col-check { width:3% !important; min-width:36px; } |
| 16 |
.ecv2-user-table .ecv2-col-email { width:24% !important; min-width:220px; } |
| 17 |
.ecv2-user-table .ecv2-col-user_level { width:8% !important; min-width:96px; } |
| 18 |
.ecv2-user-table .ecv2-col-completed_order_count { width:6% !important; min-width:72px; } |
| 19 |
.ecv2-user-table .ecv2-col-lifetime_spend { width:10% !important; min-width:120px; } |
| 20 |
.ecv2-user-table .ecv2-col-last_order_date { width:8% !important; min-width:100px; } |
| 21 |
.ecv2-user-table .ecv2-col-lifecycle { width:7% !important; min-width:90px; } |
| 22 |
.ecv2-user-table .ecv2-col-location_parts { width:9% !important; min-width:120px; } |
| 23 |
.ecv2-user-table .ecv2-col-tag_list { width:9% !important; min-width:120px; } |
| 24 |
.ecv2-user-table .ecv2-col-date_created { width:8% !important; min-width:110px; } |
| 25 |
.ecv2-user-table .ecv2-col-last_login { width:7% !important; min-width:100px; } |
| 26 |
.ecv2-user-table .ecv2-col-user_id { width:4% !important; min-width:56px; } |
| 27 |
.ecv2-user-table .ecv2-col-actions { width:4% !important; min-width:56px; } |
| 28 |
.ecv2-user-table tbody td { padding:8px 12px; overflow:visible; } |
| 29 |
.ecv2-user-table .ecv2-cell { min-width:0; } |
| 30 |
.ecv2-user-table .ecv2-cell > * { max-width:100%; } |
| 31 |
@container ecv2 (max-width:640px) { .ecv2-table.ecv2-user-table { table-layout:auto; } } |
| 32 |
|
| 33 |
/* ---- Identity cell ---- */ |
| 34 |
.ecv2-user-identity { display:flex; align-items:center; gap:10px; min-width:0; } |
| 35 |
.ecv2-user-identity-text { display:flex; flex-direction:column; min-width:0; } |
| 36 |
.ecv2-user-name { font-weight:600; font-size:13px; line-height:1.3; text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; } |
| 37 |
.ecv2-user-name-empty { color:var(--ecv2-g400,#9ca3af); font-weight:500; font-style:italic; } |
| 38 |
.ecv2-user-email { font-size:12px; color:var(--ecv2-g500,#6b7280); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; } |
| 39 |
.ecv2-user-identity-text { flex:1 1 auto; } |
| 40 |
|
| 41 |
/* ---- Avatar ---- */ |
| 42 |
.ecv2-user-avatar { |
| 43 |
flex-shrink:0; width:34px; height:34px; border-radius:50%; |
| 44 |
display:inline-flex; align-items:center; justify-content:center; |
| 45 |
color:#fff; font-size:12px; font-weight:700; letter-spacing:.5px; |
| 46 |
user-select:none; |
| 47 |
} |
| 48 |
.ecv2-user-avatar-lg { width:48px; height:48px; font-size:16px; } |
| 49 |
|
| 50 |
/* ---- Flags strip (subscriber / notes / PRO-added) ---- */ |
| 51 |
.ecv2-user-flags { display:inline-flex; align-items:center; gap:2px; margin-left:6px; } |
| 52 |
.ecv2-user-flag { font-size:14px !important; width:14px !important; height:14px !important; color:var(--ecv2-g300,#d1d5db); } |
| 53 |
.ecv2-user-flag-subscriber { color:var(--ecv2-cyan,#06b6d4); } |
| 54 |
.ecv2-user-flag-notes { color:var(--ecv2-amber,#f59e0b); } |
| 55 |
|
| 56 |
/* ---- Role badge ---- */ |
| 57 |
.ecv2-role-badge { |
| 58 |
display:inline-block; padding:2px 10px; border-radius:999px; |
| 59 |
font-size:11px; font-weight:600; letter-spacing:.3px; text-transform:capitalize; |
| 60 |
background:var(--ecv2-g100,#f3f4f6); color:var(--ecv2-g600,#4b5563); |
| 61 |
border:1px solid var(--ecv2-g200,#e5e7eb); |
| 62 |
} |
| 63 |
.ecv2-role-admin { background:#ede9fe; color:#6d28d9; border-color:#ddd6fe; } |
| 64 |
.ecv2-role-shopper { background:#ecfdf5; color:#047857; border-color:#d1fae5; } |
| 65 |
.ecv2-role-pending { background:#fffbeb; color:#b45309; border-color:#fde68a; } |
| 66 |
.ecv2-role-custom { background:#eff6ff; color:#1d4ed8; border-color:#dbeafe; } |
| 67 |
|
| 68 |
/* ---- Nullable dates ---- */ |
| 69 |
.ecv2-date { font-size:12px; color:var(--ecv2-g600,#4b5563); white-space:nowrap; } |
| 70 |
.ecv2-date-empty { font-size:12px; color:var(--ecv2-g400,#9ca3af); font-style:italic; white-space:nowrap; } |
| 71 |
|
| 72 |
/* ---- Card view ---- */ |
| 73 |
.ecv2-user-card { display:flex; flex-direction:column; } |
| 74 |
.ecv2-user-card-top { display:flex; align-items:center; gap:12px; padding:14px 14px 10px; } |
| 75 |
.ecv2-user-card-id { display:flex; flex-direction:column; min-width:0; flex:1; } |
| 76 |
.ecv2-user-card-name { font-size:14px; font-weight:600; color:var(--ecv2-g800,#1f2937); text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } |
| 77 |
.ecv2-user-card-name:hover { color:var(--ecv2-primary-hover,#16a34a); } |
| 78 |
.ecv2-user-card-email { font-size:12px; color:var(--ecv2-g500,#6b7280); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } |
| 79 |
.ecv2-user-card-meta { display:grid; grid-template-columns:1fr 1fr; gap:6px 12px; padding:0 14px 12px; } |
| 80 |
.ecv2-user-card-meta-item { display:flex; flex-direction:column; gap:1px; min-width:0; } |
| 81 |
.ecv2-user-card-meta-label { font-size:10px; text-transform:uppercase; letter-spacing:.4px; color:var(--ecv2-g400,#9ca3af); font-weight:600; } |
| 82 |
.ecv2-user-card-actions { margin-left:auto; } |
| 83 |
|
| 84 |
/* ---- Hover row-actions under the customer name (table view) ---- */ |
| 85 |
.ecv2-user-row-actions { display:flex; align-items:center; gap:0; opacity:0; transition:opacity .15s ease; flex-wrap:nowrap; white-space:nowrap; line-height:1; margin-top:2px; } |
| 86 |
.ecv2-row:hover .ecv2-user-row-actions { opacity:1; } |
| 87 |
/* Cards & spreadsheet keep the ⋯ menu; hide the hover strip there. */ |
| 88 |
.ecv2-card .ecv2-user-row-actions, .ecv2-ss-row .ecv2-user-row-actions { display:none; } |
| 89 |
|
| 90 |
/* ---- One-time backfill banner ---- */ |
| 91 |
.ecv2-user-backfill-banner { |
| 92 |
display:flex; align-items:center; gap:12px; |
| 93 |
margin:0 0 14px; padding:12px 16px; |
| 94 |
background:#eff6ff; border:1px solid #bfdbfe; border-radius:var(--ecv2-r,8px); |
| 95 |
font-size:12px; color:#1e3a8a; line-height:1.45; |
| 96 |
} |
| 97 |
.ecv2-user-backfill-icon { color:#3b82f6; flex-shrink:0; font-size:20px; width:20px; height:20px; } |
| 98 |
.ecv2-user-backfill-text { flex:1; min-width:0; } |
| 99 |
.ecv2-user-backfill-note { color:#3b82f6; } |
| 100 |
.ecv2-user-backfill-actions { display:flex; align-items:center; gap:10px; flex-shrink:0; } |
| 101 |
.ecv2-user-backfill-progress { font-size:11px; color:#1d4ed8; font-variant-numeric:tabular-nums; white-space:nowrap; } |
| 102 |
.ecv2-user-backfill-dismiss { |
| 103 |
border:0; background:none; cursor:pointer; padding:2px; line-height:1; |
| 104 |
color:#93c5fd; border-radius:4px; |
| 105 |
} |
| 106 |
.ecv2-user-backfill-dismiss:hover { color:#1d4ed8; background:#dbeafe; } |
| 107 |
.ecv2-user-backfill-complete { background:#f0fdf4; border-color:#bbf7d0; color:#14532d; } |
| 108 |
.ecv2-user-backfill-complete .ecv2-user-backfill-icon { color:#22c55e; } |
| 109 |
|
| 110 |
/* ---- PRO teaser bar ---- */ |
| 111 |
.ecv2-user-pro-teaser { |
| 112 |
display:flex; align-items:center; gap:10px; |
| 113 |
margin:0 0 14px; padding:10px 14px; cursor:pointer; |
| 114 |
background:linear-gradient(90deg,#f8fafc,#f1f5f9); |
| 115 |
border:1px dashed var(--ecv2-g300,#d1d5db); border-radius:var(--ecv2-r,8px); |
| 116 |
color:var(--ecv2-g600,#4b5563); font-size:12px; line-height:1.4; |
| 117 |
transition:border-color .12s ease, background .12s ease; |
| 118 |
} |
| 119 |
.ecv2-user-pro-teaser:hover, .ecv2-user-pro-teaser:focus-visible { |
| 120 |
border-color:var(--ecv2-primary,#22c55e); background:#f0fdf4; outline:none; |
| 121 |
} |
| 122 |
.ecv2-user-pro-teaser .dashicons-lock { color:var(--ecv2-g400,#9ca3af); flex-shrink:0; } |
| 123 |
.ecv2-user-pro-teaser-text { flex:1; min-width:0; } |
| 124 |
.ecv2-user-pro-teaser-cta { flex-shrink:0; font-weight:600; color:var(--ecv2-primary-hover,#16a34a); white-space:nowrap; } |
| 125 |
|
| 126 |
/* ---- Quick Edit slideout (shared shell for user + PRO snapshot) ---- */ |
| 127 |
.ecv2-slideout-overlay { |
| 128 |
position:fixed; inset:0; z-index:100200; background:rgba(17,24,39,.45); |
| 129 |
} |
| 130 |
.ecv2-slideout { |
| 131 |
position:absolute; top:0; right:0; bottom:0; width:420px; max-width:92vw; |
| 132 |
background:#fff; box-shadow:-8px 0 30px rgba(0,0,0,.18); |
| 133 |
display:flex; flex-direction:column; |
| 134 |
animation:ecv2-slideout-in .18s ease; |
| 135 |
} |
| 136 |
@keyframes ecv2-slideout-in { from { transform:translateX(24px); opacity:.4; } to { transform:none; opacity:1; } } |
| 137 |
.ecv2-slideout-header { |
| 138 |
display:flex; align-items:center; justify-content:space-between; |
| 139 |
padding:16px 20px; border-bottom:1px solid var(--ecv2-g200,#e5e7eb); |
| 140 |
} |
| 141 |
.ecv2-slideout-header h2 { margin:0; font-size:16px; display:flex; align-items:center; gap:8px; } |
| 142 |
.ecv2-user-qe-id-chip { font-size:11px; font-weight:600; color:var(--ecv2-g500,#6b7280); background:var(--ecv2-g100,#f3f4f6); border-radius:999px; padding:2px 8px; } |
| 143 |
.ecv2-slideout-body { flex:1; overflow-y:auto; padding:18px 20px; } |
| 144 |
.ecv2-slideout-footer { |
| 145 |
display:flex; justify-content:flex-end; gap:8px; |
| 146 |
padding:14px 20px; border-top:1px solid var(--ecv2-g200,#e5e7eb); background:var(--ecv2-g50,#f9fafb); |
| 147 |
} |
| 148 |
.ecv2-slideout-field { margin-bottom:14px; } |
| 149 |
.ecv2-slideout-field label { display:block; font-size:12px; font-weight:600; color:var(--ecv2-g600,#4b5563); margin-bottom:4px; } |
| 150 |
.ecv2-slideout-field .ecv2-input, .ecv2-slideout-field .ecv2-select { width:100%; box-sizing:border-box; } |
| 151 |
.ecv2-slideout-field-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; } |
| 152 |
.ecv2-slideout-field-error { font-size:11px; color:var(--ecv2-red,#ef4444); min-height:14px; margin-top:3px; } |
| 153 |
.ecv2-slideout-check { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ecv2-g700,#374151); margin:6px 0 14px; } |
| 154 |
.ecv2-slideout-divider { border-top:1px solid var(--ecv2-g100,#f3f4f6); margin:16px 0; } |
| 155 |
.ecv2-slideout-hint { font-size:11px; color:var(--ecv2-g400,#9ca3af); margin:6px 0 0; line-height:1.4; } |
| 156 |
|
| 157 |
/* ---- Spreadsheet inline edit input ---- */ |
| 158 |
.ecv2-ss-edit-input { |
| 159 |
width:100%; box-sizing:border-box; padding:4px 6px; font-size:13px; |
| 160 |
border:1px solid var(--ecv2-primary,#22c55e); border-radius:var(--ecv2-rs,4px); |
| 161 |
box-shadow:0 0 0 2px var(--ecv2-primary-light,rgba(34,197,94,.2)); |
| 162 |
} |
| 163 |
.ecv2-ss-edit-input:focus { outline:none; } |
| 164 |
|
| 165 |
/* ---- Responsive ---- */ |
| 166 |
@media ( max-width: 782px ) { |
| 167 |
.ecv2-user-name, .ecv2-user-email { max-width:160px; } |
| 168 |
.ecv2-slideout { width:100vw; max-width:100vw; } |
| 169 |
.ecv2-user-pro-teaser-cta { display:none; } |
| 170 |
} |
