updates on the astryx desing
This commit is contained in:
@@ -117,7 +117,7 @@
|
||||
border-radius: 999px;
|
||||
background: rgba(123, 31, 162, 0.08);
|
||||
border: 1px solid rgba(123, 31, 162, 0.25);
|
||||
color: #7b1fa2;
|
||||
color: var(--color-accent);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
@@ -221,12 +221,12 @@
|
||||
|
||||
.dispatch-container .logo-city-option.active {
|
||||
background: rgba(123, 31, 162, 0.1);
|
||||
color: #7b1fa2;
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.dispatch-container .logo-city-option-icon {
|
||||
font-size: 14px;
|
||||
color: #7b1fa2;
|
||||
color: var(--color-accent);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@@ -238,7 +238,7 @@
|
||||
}
|
||||
|
||||
.dispatch-container .logo-city-option-check {
|
||||
color: #7b1fa2;
|
||||
color: var(--color-accent);
|
||||
font-weight: 800;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@@ -975,329 +975,6 @@
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Slot-time-field dropdown — picks which timestamp column drives slot
|
||||
bucketing. Styled to match the location-pill dropdown in the header so
|
||||
both feel like the same kind of filter control. */
|
||||
.dispatch-container .time-field-wrap {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
flex-shrink: 0;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.dispatch-container .time-field-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 7px 12px;
|
||||
border-radius: 999px;
|
||||
background: rgba(123, 31, 162, 0.08);
|
||||
border: 1px solid rgba(123, 31, 162, 0.25);
|
||||
color: #7b1fa2;
|
||||
font-size: 12.5px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
|
||||
}
|
||||
|
||||
.dispatch-container .time-field-btn:hover {
|
||||
background: rgba(123, 31, 162, 0.14);
|
||||
border-color: rgba(123, 31, 162, 0.45);
|
||||
}
|
||||
|
||||
.dispatch-container .time-field-btn.open {
|
||||
background: rgba(123, 31, 162, 0.18);
|
||||
border-color: rgba(123, 31, 162, 0.55);
|
||||
box-shadow: 0 4px 12px rgba(123, 31, 162, 0.18);
|
||||
}
|
||||
|
||||
.dispatch-container .time-field-btn svg {
|
||||
font-size: 13px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.dispatch-container .time-field-caret {
|
||||
font-size: 15px;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.dispatch-container .time-field-btn.open .time-field-caret {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.dispatch-container .time-field-text {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.dispatch-container .time-field-menu {
|
||||
position: absolute;
|
||||
top: calc(100% + 6px);
|
||||
left: 0;
|
||||
min-width: 180px;
|
||||
background: #fff;
|
||||
border: 1px solid rgba(123, 31, 162, 0.18);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 16px 36px rgba(15, 23, 42, 0.16);
|
||||
padding: 6px;
|
||||
z-index: 1000;
|
||||
animation: logo-city-menu-in 0.14s ease-out;
|
||||
}
|
||||
|
||||
.dispatch-container .time-field-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
padding: 8px 10px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
border-radius: 8px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
text-align: left;
|
||||
transition: background 0.12s ease;
|
||||
}
|
||||
|
||||
.dispatch-container .time-field-option:hover {
|
||||
background: rgba(123, 31, 162, 0.06);
|
||||
}
|
||||
|
||||
.dispatch-container .time-field-option.active {
|
||||
background: rgba(123, 31, 162, 0.1);
|
||||
color: #7b1fa2;
|
||||
}
|
||||
|
||||
.dispatch-container .time-field-option-icon {
|
||||
font-size: 14px;
|
||||
color: #7b1fa2;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.dispatch-container .time-field-option-check {
|
||||
margin-left: auto;
|
||||
color: #7b1fa2;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
/* Slot timings editor — popover anchored to a small "Edit slots" button in
|
||||
the batch row. Lets the operator tweak start/end hours, add new slots,
|
||||
delete existing ones, or reset to the default 5-slot layout. */
|
||||
.dispatch-container .slot-edit-wrap {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
flex-shrink: 0;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.dispatch-container .slot-edit-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 7px 12px;
|
||||
border-radius: 999px;
|
||||
background: rgba(15, 23, 42, 0.04);
|
||||
border: 1px dashed rgba(15, 23, 42, 0.18);
|
||||
color: #475569;
|
||||
font-size: 12.5px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.dispatch-container .slot-edit-btn:hover {
|
||||
background: rgba(15, 23, 42, 0.08);
|
||||
border-color: rgba(15, 23, 42, 0.32);
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.dispatch-container .slot-edit-btn.open {
|
||||
background: rgba(123, 31, 162, 0.1);
|
||||
border-color: rgba(123, 31, 162, 0.5);
|
||||
border-style: solid;
|
||||
color: #7b1fa2;
|
||||
}
|
||||
|
||||
.dispatch-container .slot-edit-btn svg {
|
||||
font-size: 13px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.dispatch-container .slot-edit-panel {
|
||||
position: absolute;
|
||||
top: calc(100% + 6px);
|
||||
left: 0;
|
||||
min-width: 340px;
|
||||
background: #fff;
|
||||
border: 1px solid rgba(123, 31, 162, 0.18);
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 20px 44px rgba(15, 23, 42, 0.2);
|
||||
padding: 12px;
|
||||
z-index: 1000;
|
||||
animation: logo-city-menu-in 0.14s ease-out;
|
||||
}
|
||||
|
||||
.dispatch-container .slot-edit-head {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.dispatch-container .slot-edit-title {
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.dispatch-container .slot-edit-sub {
|
||||
font-size: 11px;
|
||||
color: #64748b;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.dispatch-container .slot-edit-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
max-height: 260px;
|
||||
overflow-y: auto;
|
||||
padding-right: 2px;
|
||||
}
|
||||
|
||||
.dispatch-container .slot-edit-row {
|
||||
display: grid;
|
||||
grid-template-columns: 22px 70px 70px 1fr 28px;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.dispatch-container .slot-edit-idx {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 6px;
|
||||
background: rgba(123, 31, 162, 0.12);
|
||||
color: #7b1fa2;
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.dispatch-container .slot-edit-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.dispatch-container .slot-edit-field-label {
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
color: #94a3b8;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
.dispatch-container .slot-edit-field input {
|
||||
width: 100%;
|
||||
border: 1px solid rgba(15, 23, 42, 0.16);
|
||||
border-radius: 8px;
|
||||
padding: 5px 8px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: #0f172a;
|
||||
font-family: inherit;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.dispatch-container .slot-edit-field input:focus {
|
||||
outline: none;
|
||||
border-color: #7b1fa2;
|
||||
box-shadow: 0 0 0 3px rgba(123, 31, 162, 0.18);
|
||||
}
|
||||
|
||||
.dispatch-container .slot-edit-preview {
|
||||
font-size: 11px;
|
||||
color: #475569;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.dispatch-container .slot-edit-remove {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgba(220, 38, 38, 0.32);
|
||||
background: rgba(220, 38, 38, 0.06);
|
||||
color: #dc2626;
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.dispatch-container .slot-edit-remove:hover:not(:disabled) {
|
||||
background: rgba(220, 38, 38, 0.14);
|
||||
border-color: rgba(220, 38, 38, 0.55);
|
||||
}
|
||||
|
||||
.dispatch-container .slot-edit-remove:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.dispatch-container .slot-edit-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
padding-top: 10px;
|
||||
border-top: 1px dashed rgba(15, 23, 42, 0.1);
|
||||
}
|
||||
|
||||
.dispatch-container .slot-edit-add,
|
||||
.dispatch-container .slot-edit-reset {
|
||||
flex: 1;
|
||||
border-radius: 8px;
|
||||
padding: 7px 10px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.dispatch-container .slot-edit-add {
|
||||
background: #7b1fa2;
|
||||
color: #fff;
|
||||
border-color: #7b1fa2;
|
||||
}
|
||||
|
||||
.dispatch-container .slot-edit-add:hover {
|
||||
background: #6a1591;
|
||||
}
|
||||
|
||||
.dispatch-container .slot-edit-reset {
|
||||
background: #fff;
|
||||
color: #475569;
|
||||
border-color: rgba(15, 23, 42, 0.16);
|
||||
}
|
||||
|
||||
.dispatch-container .slot-edit-reset:hover {
|
||||
background: rgba(15, 23, 42, 0.04);
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.dispatch-container .batch-btn {
|
||||
display: inline-flex;
|
||||
@@ -2921,7 +2598,7 @@
|
||||
/* ---------- Per-order cards inside a focused zone ---------- */
|
||||
/* Each order is a self-contained card so the list reads as a deck of delivery
|
||||
tickets rather than a wall of text. All accents use the console's base
|
||||
purple (#7b1fa2) so the page sits inside the existing design language. */
|
||||
purple (var(--color-accent)) so the page sits inside the existing design language. */
|
||||
|
||||
.dispatch-container .zone-order-grid {
|
||||
display: flex;
|
||||
@@ -2948,7 +2625,7 @@
|
||||
left: 0;
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
background: #7b1fa2;
|
||||
background: var(--color-accent);
|
||||
opacity: 0.85;
|
||||
transition: width 0.18s ease, opacity 0.18s ease;
|
||||
}
|
||||
@@ -2969,7 +2646,7 @@
|
||||
}
|
||||
|
||||
.dispatch-container .zone-order-card.active {
|
||||
border-color: #7b1fa2;
|
||||
border-color: var(--color-accent);
|
||||
box-shadow: 0 10px 24px rgba(123, 31, 162, 0.22);
|
||||
background: linear-gradient(180deg, #ffffff 0%, #f7eaff 100%);
|
||||
}
|
||||
@@ -3019,8 +2696,8 @@
|
||||
font-weight: 800;
|
||||
font-size: 13px;
|
||||
flex-shrink: 0;
|
||||
background: #7b1fa2;
|
||||
border: 1px solid #7b1fa2;
|
||||
background: var(--color-accent);
|
||||
border: 1px solid var(--color-accent);
|
||||
box-shadow: 0 2px 6px rgba(123, 31, 162, 0.22);
|
||||
}
|
||||
|
||||
@@ -3044,7 +2721,7 @@
|
||||
.dispatch-container .zone-order-rider {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: #7b1fa2;
|
||||
color: var(--color-accent);
|
||||
margin-top: 2px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
@@ -3085,7 +2762,7 @@
|
||||
|
||||
.dispatch-container .zone-order-time svg {
|
||||
font-size: 14px;
|
||||
color: #7b1fa2;
|
||||
color: var(--color-accent);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@@ -3199,7 +2876,7 @@
|
||||
.dispatch-container .zone-order-chip.zone-order-trip {
|
||||
background: rgba(123, 31, 162, 0.1);
|
||||
border-color: rgba(123, 31, 162, 0.25);
|
||||
color: #7b1fa2;
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.dispatch-container .zone-order-type {
|
||||
@@ -4260,17 +3937,6 @@
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.dispatch-container .compare-delta-status {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 4px 11px;
|
||||
border-radius: 999px;
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.07em;
|
||||
text-transform: uppercase;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.dispatch-container .compare-delta-grid {
|
||||
display: grid;
|
||||
@@ -5389,7 +5055,7 @@
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
color: #7b1fa2;
|
||||
color: var(--color-accent);
|
||||
border-bottom: 1px solid rgba(123, 31, 162, 0.18);
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
@@ -5571,7 +5237,7 @@
|
||||
|
||||
/* --- Header: purple gradient with order id + status + rider --- */
|
||||
.dispatch-container .dispatch-popup .pu-header {
|
||||
background: linear-gradient(135deg, #7b1fa2 0%, #9c27b0 50%, #ab47bc 100%);
|
||||
background: var(--color-accent);
|
||||
padding: 14px 16px 12px;
|
||||
color: #fff;
|
||||
border-radius: 12px 12px 0 0;
|
||||
@@ -5706,13 +5372,13 @@
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: #7b1fa2;
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.dispatch-container .dispatch-popup .pu-header-step-value {
|
||||
font-size: 15px;
|
||||
font-weight: 800;
|
||||
color: #7b1fa2;
|
||||
color: var(--color-accent);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@@ -5737,7 +5403,7 @@
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: #7b1fa2;
|
||||
color: var(--color-accent);
|
||||
border-bottom: 1px solid rgba(123, 31, 162, 0.18);
|
||||
}
|
||||
|
||||
@@ -5781,7 +5447,7 @@
|
||||
height: 26px;
|
||||
border-radius: 7px;
|
||||
background: rgba(123, 31, 162, 0.12);
|
||||
color: #7b1fa2;
|
||||
color: var(--color-accent);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -5841,7 +5507,7 @@
|
||||
|
||||
.dispatch-container .dispatch-popup .pu-distance-icon {
|
||||
display: inline-flex;
|
||||
color: #7b1fa2;
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.dispatch-container .dispatch-popup .pu-distance-icon svg {
|
||||
@@ -6326,7 +5992,7 @@
|
||||
height: 64px;
|
||||
border-radius: 16px;
|
||||
background: rgba(123, 31, 162, 0.08);
|
||||
color: #7b1fa2;
|
||||
color: var(--color-accent);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -6384,7 +6050,7 @@
|
||||
}
|
||||
|
||||
.dispatch-container .ri-search-input:focus {
|
||||
border-color: #7b1fa2;
|
||||
border-color: var(--color-accent);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
@@ -6429,13 +6095,13 @@
|
||||
}
|
||||
|
||||
.dispatch-container .ri-rider-item.active {
|
||||
border-color: #7b1fa2;
|
||||
border-color: var(--color-accent);
|
||||
background: linear-gradient(180deg, #fbf3ff 0%, #f0e0fa 100%);
|
||||
box-shadow: 0 4px 12px rgba(123, 31, 162, 0.18);
|
||||
}
|
||||
|
||||
.dispatch-container .ri-rider-item.active .ri-rider-name {
|
||||
color: #7b1fa2;
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.dispatch-container .ri-rider-item.active .ri-rider-arrow {
|
||||
@@ -6476,7 +6142,7 @@
|
||||
}
|
||||
|
||||
.dispatch-container .ri-rider-arrow {
|
||||
color: #7b1fa2;
|
||||
color: var(--color-accent);
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
opacity: 0.4;
|
||||
@@ -6577,7 +6243,7 @@
|
||||
|
||||
.dispatch-container .ri-live.is-refetching {
|
||||
background: rgba(123, 31, 162, 0.12);
|
||||
color: #7b1fa2;
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.dispatch-container .ri-live-dot {
|
||||
@@ -6590,7 +6256,7 @@
|
||||
}
|
||||
|
||||
.dispatch-container .ri-live.is-refetching .ri-live-dot {
|
||||
background: #7b1fa2;
|
||||
background: var(--color-accent);
|
||||
box-shadow: 0 0 0 0 rgba(123, 31, 162, 0.55);
|
||||
}
|
||||
|
||||
@@ -6648,7 +6314,7 @@
|
||||
height: 32px;
|
||||
border-radius: 9px;
|
||||
background: rgba(123, 31, 162, 0.12);
|
||||
color: #7b1fa2;
|
||||
color: var(--color-accent);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -6727,7 +6393,7 @@
|
||||
}
|
||||
|
||||
.dispatch-container .ri-coords-label svg {
|
||||
color: #7b1fa2;
|
||||
color: var(--color-accent);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
@@ -6753,7 +6419,7 @@
|
||||
can read the location without opening the popup. Styled to override the
|
||||
default leaflet tooltip chrome (rounded chip, brand purple). */
|
||||
.dispatch-container .ri-map .leaflet-tooltip.ri-area-banner {
|
||||
background: #7b1fa2;
|
||||
background: var(--color-accent);
|
||||
color: #fff;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
@@ -6766,7 +6432,7 @@
|
||||
}
|
||||
|
||||
.dispatch-container .ri-map .leaflet-tooltip.ri-area-banner::before {
|
||||
border-top-color: #7b1fa2;
|
||||
border-top-color: var(--color-accent);
|
||||
}
|
||||
|
||||
/* Mobile — collapse the sidebar above the main panel, single-column stats */
|
||||
@@ -7177,10 +6843,6 @@
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.dispatch-container .compare-delta-status {
|
||||
padding: 2px 6px;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.dispatch-container .compare-delta-grid {
|
||||
gap: 6px;
|
||||
@@ -7395,10 +7057,6 @@
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.dispatch-container .compare-delta-status {
|
||||
padding: 2px 6px;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
/* Delta Grid - cells and labels */
|
||||
.dispatch-container .compare-delta-grid {
|
||||
@@ -8134,17 +7792,6 @@
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.dispatch-container .cdp-step-status {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 3px 9px;
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
border-radius: 999px;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.dispatch-container .cdp-step-sub {
|
||||
font-size: 13px;
|
||||
@@ -10791,186 +10438,6 @@
|
||||
font-size: 10.5px;
|
||||
}
|
||||
|
||||
/* ── ActiveSection Delivery Cards ────────────────────────────── */
|
||||
.dispatch-container .adcard-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding: 4px 0 16px;
|
||||
}
|
||||
|
||||
@keyframes adcard-in {
|
||||
from { opacity: 0; transform: translateY(6px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.dispatch-container .adcard {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 14px;
|
||||
padding: 16px;
|
||||
cursor: pointer;
|
||||
/* Explicit properties so the CSS animation (adcard-in) isn't interrupted by transition: all */
|
||||
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
background 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
animation: adcard-in 0.28s cubic-bezier(0.4, 0, 0.2, 1) both;
|
||||
box-shadow: var(--shadow);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-left: 4px solid var(--ad-accent, var(--border));
|
||||
}
|
||||
|
||||
.dispatch-container .adcard:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
border-color: var(--ad-accent, var(--accent));
|
||||
}
|
||||
|
||||
.dispatch-container .adcard.is-active {
|
||||
border-color: var(--ad-accent, var(--accent));
|
||||
box-shadow: 0 0 0 2px rgba(58, 58, 58, 0.15), var(--shadow-lg);
|
||||
background: var(--accent-soft);
|
||||
}
|
||||
|
||||
.dispatch-container .adcard-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.dispatch-container .adcard-avatar {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 8px;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 800;
|
||||
font-size: 13px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.dispatch-container .adcard-titles {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.dispatch-container .adcard-customer {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #94a3b8;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.dispatch-container .adcard-rider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: var(--text);
|
||||
font-size: 14.5px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.dispatch-container .adcard-status {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
padding: 4px 8px;
|
||||
border-radius: 6px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.dispatch-container .adcard-addr {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 6px;
|
||||
background: var(--bg-sub);
|
||||
padding: 8px 10px;
|
||||
border-radius: 8px;
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.dispatch-container .adcard-ic {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
color: var(--text-muted);
|
||||
flex-shrink: 0;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.dispatch-container .adcard-tx {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.dispatch-container .adcard-addr-tx {
|
||||
white-space: normal;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.dispatch-container .adcard-foot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
font-size: 11.5px;
|
||||
color: var(--text-muted);
|
||||
font-weight: 500;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.dispatch-container .adcard-pickup {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: var(--kitchen);
|
||||
font-weight: 600;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.dispatch-container .adcard-pickup .adcard-ic {
|
||||
color: var(--kitchen);
|
||||
}
|
||||
|
||||
.dispatch-container .adcard-metrics {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-left: auto;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.dispatch-container .adcard-m {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.dispatch-container .adcard-m-eta {
|
||||
color: var(--ad-accent, var(--accent));
|
||||
}
|
||||
|
||||
.dispatch-container .adcard-m-time {
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
/* =========================================================================
|
||||
Mobile / app-like layout (≤ 768px). Purely a LAYOUT pass — no behaviour
|
||||
|
||||
Reference in New Issue
Block a user