chore: build
This commit is contained in:
Xor290
@@ -1,388 +1,388 @@
|
||||
/* ============================================
|
||||
ITEMS MODAL - PROFESSIONAL DARK THEME
|
||||
============================================ */
|
||||
|
||||
/* Overlay */
|
||||
.items-modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
backdrop-filter: blur(12px);
|
||||
padding: 1.5rem;
|
||||
animation: items-fadeIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
backdrop-filter: blur(12px);
|
||||
padding: 1.5rem;
|
||||
animation: items-fadeIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
@keyframes items-fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Modal Content */
|
||||
.items-modal-content {
|
||||
background: linear-gradient(to bottom, var(--surface), var(--bg));
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 16px;
|
||||
max-width: 800px;
|
||||
width: 100%;
|
||||
max-height: 90vh;
|
||||
overflow: hidden;
|
||||
box-shadow:
|
||||
0 25px 50px -12px rgba(0, 0, 0, 0.5),
|
||||
0 0 0 1px rgba(124, 58, 237, 0.1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
animation: items-slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
background: linear-gradient(to bottom, var(--surface), var(--bg));
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 16px;
|
||||
max-width: 800px;
|
||||
width: 100%;
|
||||
max-height: 90vh;
|
||||
overflow: hidden;
|
||||
box-shadow:
|
||||
0 25px 50px -12px rgba(0, 0, 0, 0.5),
|
||||
0 0 0 1px rgba(124, 58, 237, 0.1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
animation: items-slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
@keyframes items-slideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(16px) scale(0.98);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(16px) scale(0.98);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.items-modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1.5rem 2rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--surface-2);
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1.5rem 2rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--surface-2);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.items-modal-header h3 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
color: var(--text);
|
||||
font-size: 1.25rem;
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
color: var(--text);
|
||||
font-size: 1.25rem;
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.items-modal-header h3 svg {
|
||||
color: #a78bfa;
|
||||
flex-shrink: 0;
|
||||
color: #a78bfa;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.items-modal-header h3 span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.command-badge {
|
||||
background: rgba(124, 58, 237, 0.15);
|
||||
color: #c4b5fd;
|
||||
padding: 0.375rem 0.75rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
border: 1px solid rgba(124, 58, 237, 0.3);
|
||||
background: rgba(124, 58, 237, 0.15);
|
||||
color: #c4b5fd;
|
||||
padding: 0.375rem 0.75rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
border: 1px solid rgba(124, 58, 237, 0.3);
|
||||
}
|
||||
|
||||
.items-modal-close {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--text-muted);
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
font-weight: 400;
|
||||
flex-shrink: 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--text-muted);
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
font-weight: 400;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.items-modal-close:hover {
|
||||
background: var(--surface-2);
|
||||
color: var(--text);
|
||||
background: var(--surface-2);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/* Body */
|
||||
.items-modal-body {
|
||||
padding: 2rem;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
background: var(--bg);
|
||||
padding: 2rem;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
.items-modal-body::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.items-modal-body::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.items-modal-body::-webkit-scrollbar-thumb {
|
||||
background: rgba(124, 58, 237, 0.3);
|
||||
border-radius: 10px;
|
||||
background: rgba(124, 58, 237, 0.3);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.items-modal-body::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(124, 58, 237, 0.5);
|
||||
background: rgba(124, 58, 237, 0.5);
|
||||
}
|
||||
|
||||
/* Empty State */
|
||||
.items-modal-empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 4rem 2rem;
|
||||
color: var(--text-muted);
|
||||
gap: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 4rem 2rem;
|
||||
color: var(--text-muted);
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.items-modal-empty svg {
|
||||
color: var(--text-muted);
|
||||
opacity: 0.5;
|
||||
color: var(--text-muted);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.items-modal-empty p {
|
||||
font-size: 1rem;
|
||||
margin: 0;
|
||||
color: var(--text-muted);
|
||||
font-size: 1rem;
|
||||
margin: 0;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Summary */
|
||||
.items-modal-summary {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.summary-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
padding: 1.25rem;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
padding: 1.25rem;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.summary-item:hover {
|
||||
background: var(--surface-2);
|
||||
border-color: rgba(124, 58, 237, 0.3);
|
||||
background: var(--surface-2);
|
||||
border-color: rgba(124, 58, 237, 0.3);
|
||||
}
|
||||
|
||||
.summary-item svg {
|
||||
color: #a78bfa;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: #a78bfa;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.summary-item span {
|
||||
color: var(--text);
|
||||
font-weight: 600;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1;
|
||||
color: var(--text);
|
||||
font-weight: 600;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.summary-item::before {
|
||||
content: attr(data-label);
|
||||
color: var(--text-muted);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
content: attr(data-label);
|
||||
color: var(--text-muted);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
/* Items List */
|
||||
.items-modal-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
/* Item Card */
|
||||
.items-modal-card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
gap: 1.25rem;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.items-modal-card:hover {
|
||||
background: var(--surface-2);
|
||||
border-color: rgba(124, 58, 237, 0.4);
|
||||
box-shadow: 0 8px 24px rgba(124, 58, 237, 0.15);
|
||||
background: var(--surface-2);
|
||||
border-color: rgba(124, 58, 237, 0.4);
|
||||
box-shadow: 0 8px 24px rgba(124, 58, 237, 0.15);
|
||||
}
|
||||
|
||||
/* Item Number */
|
||||
.item-number {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: rgba(124, 58, 237, 0.15);
|
||||
color: #a78bfa;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
flex-shrink: 0;
|
||||
border: 1px solid rgba(124, 58, 237, 0.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: rgba(124, 58, 237, 0.15);
|
||||
color: #a78bfa;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
flex-shrink: 0;
|
||||
border: 1px solid rgba(124, 58, 237, 0.2);
|
||||
}
|
||||
|
||||
/* Item Content */
|
||||
.item-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.item-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
color: var(--text);
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
color: var(--text);
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* Item Status */
|
||||
.item-status {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
padding: 0.375rem 0.75rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
padding: 0.375rem 0.75rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.item-status.status-pending {
|
||||
background: rgba(251, 146, 60, 0.15);
|
||||
color: #fdba74;
|
||||
border: 1px solid rgba(251, 146, 60, 0.3);
|
||||
background: rgba(251, 146, 60, 0.15);
|
||||
color: #fdba74;
|
||||
border: 1px solid rgba(251, 146, 60, 0.3);
|
||||
}
|
||||
|
||||
.item-status.status-prepared,
|
||||
.item-status.status-packed {
|
||||
background: rgba(59, 130, 246, 0.15);
|
||||
color: #93c5fd;
|
||||
border: 1px solid rgba(59, 130, 246, 0.3);
|
||||
background: rgba(59, 130, 246, 0.15);
|
||||
color: #93c5fd;
|
||||
border: 1px solid rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
|
||||
.item-status.status-delivered {
|
||||
background: rgba(16, 185, 129, 0.15);
|
||||
color: #6ee7b7;
|
||||
border: 1px solid rgba(16, 185, 129, 0.3);
|
||||
background: rgba(16, 185, 129, 0.15);
|
||||
color: #6ee7b7;
|
||||
border: 1px solid rgba(16, 185, 129, 0.3);
|
||||
}
|
||||
|
||||
/* Item Details */
|
||||
.item-details {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 1.5rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.item-detail {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.375rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.375rem;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
color: var(--text);
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.detail-value.detail-total {
|
||||
color: #34d399;
|
||||
font-size: 1.25rem;
|
||||
color: #34d399;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
/* Item Meta */
|
||||
.item-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding-top: 0.75rem;
|
||||
margin-top: 0.75rem;
|
||||
border-top: 1px solid var(--border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding-top: 0.75rem;
|
||||
margin-top: 0.75rem;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.item-id {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.8125rem;
|
||||
font-family: "SF Mono", "Monaco", "Courier New", monospace;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.8125rem;
|
||||
font-family: 'SF Mono', 'Monaco', 'Courier New', monospace;
|
||||
}
|
||||
|
||||
/* Total */
|
||||
.items-modal-total {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1.5rem;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(124, 58, 237, 0.1),
|
||||
rgba(124, 58, 237, 0.05)
|
||||
);
|
||||
border: 2px solid rgba(124, 58, 237, 0.3);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1.5rem;
|
||||
background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(124, 58, 237, 0.05));
|
||||
border: 2px solid rgba(124, 58, 237, 0.3);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2);
|
||||
}
|
||||
|
||||
.items-modal-total span {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.items-modal-total strong {
|
||||
color: #c4b5fd;
|
||||
font-size: 1.875rem;
|
||||
font-weight: 700;
|
||||
color: #c4b5fd;
|
||||
font-size: 1.875rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
@@ -391,147 +391,147 @@
|
||||
|
||||
/* Tablet */
|
||||
@media (max-width: 768px) {
|
||||
.items-modal-overlay {
|
||||
padding: 1rem;
|
||||
}
|
||||
.items-modal-overlay {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.items-modal-content {
|
||||
max-height: 92vh;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 200px;
|
||||
}
|
||||
.items-modal-content {
|
||||
max-height: 92vh;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 200px;
|
||||
}
|
||||
|
||||
.items-modal-header {
|
||||
padding: 1.25rem 1.5rem;
|
||||
}
|
||||
.items-modal-header {
|
||||
padding: 1.25rem 1.5rem;
|
||||
}
|
||||
|
||||
.items-modal-header h3 {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
.items-modal-header h3 {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.command-badge {
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
.command-badge {
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
.items-modal-body {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
.items-modal-body {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.items-modal-summary {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
.items-modal-summary {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.summary-item {
|
||||
padding: 1rem;
|
||||
}
|
||||
.summary-item {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.items-modal-card {
|
||||
padding: 1.25rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
.items-modal-card {
|
||||
padding: 1.25rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.item-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
.item-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.item-details {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
.item-details {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.items-modal-total {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
.items-modal-total {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.items-modal-total strong {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.items-modal-total strong {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile */
|
||||
@media (max-width: 480px) {
|
||||
.items-modal-overlay {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
.items-modal-overlay {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.items-modal-header {
|
||||
padding: 1rem 1.25rem;
|
||||
}
|
||||
.items-modal-header {
|
||||
padding: 1rem 1.25rem;
|
||||
}
|
||||
|
||||
.items-modal-header h3 {
|
||||
font-size: 1rem;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.items-modal-header h3 {
|
||||
font-size: 1rem;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.command-badge {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.25rem 0.625rem;
|
||||
}
|
||||
.command-badge {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.25rem 0.625rem;
|
||||
}
|
||||
|
||||
.items-modal-body {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
.items-modal-body {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.items-modal-card {
|
||||
padding: 1rem;
|
||||
gap: 0.875rem;
|
||||
}
|
||||
.items-modal-card {
|
||||
padding: 1rem;
|
||||
gap: 0.875rem;
|
||||
}
|
||||
|
||||
.item-number {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
.item-number {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
.item-name {
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
font-size: 1rem;
|
||||
}
|
||||
.detail-value {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.detail-value.detail-total {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
.detail-value.detail-total {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.items-modal-total {
|
||||
padding: 1rem;
|
||||
}
|
||||
.items-modal-total {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.items-modal-total strong {
|
||||
font-size: 1.375rem;
|
||||
}
|
||||
.items-modal-total strong {
|
||||
font-size: 1.375rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Small Mobile */
|
||||
@media (max-width: 360px) {
|
||||
.items-modal-content {
|
||||
border-radius: 8px;
|
||||
}
|
||||
.items-modal-content {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.items-modal-header h3 {
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
.items-modal-header h3 {
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
.item-details {
|
||||
gap: 0.75rem;
|
||||
}
|
||||
.item-details {
|
||||
gap: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Touch Devices */
|
||||
@media (hover: none) {
|
||||
.items-modal-card:hover {
|
||||
background: var(--surface);
|
||||
border-color: var(--border);
|
||||
box-shadow: none;
|
||||
}
|
||||
.items-modal-card:hover {
|
||||
background: var(--surface);
|
||||
border-color: var(--border);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.summary-item:hover {
|
||||
background: var(--surface);
|
||||
border-color: var(--border);
|
||||
}
|
||||
}
|
||||
.summary-item:hover {
|
||||
background: var(--surface);
|
||||
border-color: var(--border);
|
||||
}
|
||||
}
|
||||
@@ -2,47 +2,63 @@
|
||||
Tokens
|
||||
============================================================ */
|
||||
:root {
|
||||
--topbar-h: 60px;
|
||||
--sidebar-w: 260px;
|
||||
--bg: #09090b;
|
||||
--surface: #111115;
|
||||
--surface-2: #1c1c22;
|
||||
--border: rgba(255, 255, 255, 0.07);
|
||||
--primary: #8b5cf6;
|
||||
--primary-soft: rgba(139, 92, 246, 0.12);
|
||||
--primary-glow: rgba(139, 92, 246, 0.25);
|
||||
--cyan: #22d3ee;
|
||||
--cyan-soft: rgba(34, 211, 238, 0.1);
|
||||
--red: #ef4444;
|
||||
--text: #f4f4f5;
|
||||
--text-muted: #71717a;
|
||||
--radius: 10px;
|
||||
--transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--topbar-h: 60px;
|
||||
--sidebar-w: 260px;
|
||||
--bg: #09090b;
|
||||
--surface: #111115;
|
||||
--surface-2: #1c1c22;
|
||||
--border: rgba(255, 255, 255, 0.07);
|
||||
--primary: #8b5cf6;
|
||||
--primary-soft: rgba(139, 92, 246, 0.12);
|
||||
--primary-glow: rgba(139, 92, 246, 0.25);
|
||||
--cyan: #22d3ee;
|
||||
--cyan-soft: rgba(34, 211, 238, 0.1);
|
||||
--red: #ef4444;
|
||||
--text: #f4f4f5;
|
||||
--text-muted: #71717a;
|
||||
--radius: 10px;
|
||||
--transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--title-gradient-from: #a78bfa;
|
||||
--title-gradient-to: #22d3ee;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Light theme overrides
|
||||
============================================================ */
|
||||
[data-theme="light"] {
|
||||
--bg: #f4f4f8;
|
||||
--surface: #ffffff;
|
||||
--surface-2: #ebebf2;
|
||||
--border: rgba(0, 0, 0, 0.08);
|
||||
--primary: #7c3aed;
|
||||
--bg: #f4f4f8;
|
||||
--surface: #ffffff;
|
||||
--surface-2: #ebebf2;
|
||||
--border: rgba(0, 0, 0, 0.08);
|
||||
--primary: #7c3aed;
|
||||
--primary-soft: rgba(124, 58, 237, 0.08);
|
||||
--primary-glow: rgba(124, 58, 237, 0.18);
|
||||
--cyan: #0891b2;
|
||||
--cyan-soft: rgba(8, 145, 178, 0.1);
|
||||
--red: #dc2626;
|
||||
--text: #18181b;
|
||||
--text-muted: #52525b;
|
||||
--cyan: #0891b2;
|
||||
--cyan-soft: rgba(8, 145, 178, 0.1);
|
||||
--red: #dc2626;
|
||||
--text: #18181b;
|
||||
--text-muted: #52525b;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Light mode overrides — header / sidebar footer forcés en blanc
|
||||
============================================================ */
|
||||
[data-theme="light"] .topbar {
|
||||
background: #ffffff;
|
||||
border-bottom-color: var(--border);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Body offset
|
||||
============================================================ */
|
||||
:root {
|
||||
--bottomnav-h: 66px;
|
||||
--bottomnav-offset: 15px;
|
||||
}
|
||||
|
||||
body {
|
||||
padding-top: var(--topbar-h);
|
||||
padding-bottom: calc(var(--bottomnav-h) + var(--bottomnav-offset) + 12px);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
@@ -59,10 +75,10 @@ body {
|
||||
align-items: center;
|
||||
padding: 0 0.75rem;
|
||||
gap: 0.5rem;
|
||||
background: color-mix(in srgb, var(--bg) 92%, transparent);
|
||||
background: color-mix(in srgb, var(--cyan) 18%, var(--bg));
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-bottom: 1px solid var(--border);
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--cyan) 30%, transparent);
|
||||
box-shadow: 0 1px 24px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
@@ -96,7 +112,11 @@ body {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
background: linear-gradient(135deg, #a78bfa, #7c3aed);
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--title-gradient-from),
|
||||
var(--title-gradient-to)
|
||||
);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
@@ -186,260 +206,146 @@ body {
|
||||
/* ============================================================
|
||||
Overlay
|
||||
============================================================ */
|
||||
.sidebar-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 950;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
backdrop-filter: blur(2px);
|
||||
animation: fadeIn 0.2s ease;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Sidebar
|
||||
Bottom nav — floating pill
|
||||
============================================================ */
|
||||
.sidebar {
|
||||
.bottom-nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: var(--sidebar-w);
|
||||
height: 100dvh;
|
||||
z-index: 1000;
|
||||
bottom: var(--bottomnav-offset);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: calc(100% - 30px);
|
||||
max-width: 640px;
|
||||
z-index: 900;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--bg);
|
||||
border-right: 1px solid var(--border);
|
||||
transform: translateX(-100%);
|
||||
transition: transform var(--transition);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sidebar.open {
|
||||
transform: translateX(0);
|
||||
box-shadow: 4px 0 40px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
/* ── Header ── */
|
||||
.sidebar-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1.25rem 1rem 1rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sidebar-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.sidebar-brand-icon {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 10px;
|
||||
background: var(--primary-soft);
|
||||
border: 1px solid rgba(139, 92, 246, 0.25);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--primary);
|
||||
font-size: 1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sidebar-brand-name {
|
||||
margin: 0;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 700;
|
||||
color: var(--text);
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
.sidebar-brand-sub {
|
||||
margin: 0;
|
||||
font-size: 0.72rem;
|
||||
color: var(--text-muted);
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.sidebar-close {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: transparent;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.85rem;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sidebar-close:hover {
|
||||
background: var(--surface-2);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/* ── Nav ── */
|
||||
.sidebar-nav {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0.75rem 0.75rem;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.sidebar-nav::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
background: color-mix(in srgb, var(--primary) 30%, rgba(6, 6, 18, 0.88));
|
||||
backdrop-filter: blur(50px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(50px) saturate(180%);
|
||||
border-radius: 22px;
|
||||
padding: 6px;
|
||||
gap: 2px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow:
|
||||
0 8px 40px rgba(0, 0, 0, 0.45),
|
||||
0 2px 8px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.85rem;
|
||||
padding: 0.7rem 0.9rem;
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius);
|
||||
color: var(--text-muted);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
transition: all var(--transition);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
position: relative;
|
||||
[data-theme="light"] .bottom-nav {
|
||||
background: color-mix(
|
||||
in srgb,
|
||||
var(--primary) 14%,
|
||||
rgba(245, 242, 255, 0.94)
|
||||
);
|
||||
border-color: rgba(0, 0, 0, 0.06);
|
||||
box-shadow:
|
||||
0 8px 40px rgba(0, 0, 0, 0.12),
|
||||
0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.menu-item:hover:not(:disabled) {
|
||||
background: var(--surface);
|
||||
border-color: var(--border);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.menu-item.active {
|
||||
background: var(--primary-soft);
|
||||
border-color: rgba(139, 92, 246, 0.2);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.menu-item:active:not(:disabled) {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.menu-item:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 8px;
|
||||
background: var(--surface);
|
||||
font-size: 0.85rem;
|
||||
flex-shrink: 0;
|
||||
transition: all var(--transition);
|
||||
}
|
||||
|
||||
.menu-item.active .menu-icon {
|
||||
background: rgba(139, 92, 246, 0.2);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.menu-label {
|
||||
/* ── Tabs ── */
|
||||
.bottom-tab {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.menu-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--primary);
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 0 8px var(--primary-glow);
|
||||
}
|
||||
|
||||
/* ── Footer ── */
|
||||
.sidebar-footer {
|
||||
padding: 0.75rem;
|
||||
border-top: 1px solid var(--border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 3px;
|
||||
padding: 8px 4px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 16px;
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
cursor: pointer;
|
||||
transition: all 0.18s ease;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.sidebar-footer-btn {
|
||||
width: 100%;
|
||||
[data-theme="light"] .bottom-tab {
|
||||
color: rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
.bottom-tab:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
}
|
||||
|
||||
[data-theme="light"] .bottom-tab:hover {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.bottom-tab.active {
|
||||
background: rgba(255, 255, 255, 0.14);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
[data-theme="light"] .bottom-tab.active {
|
||||
background: rgba(255, 255, 255, 0.65);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.bottom-tab:active {
|
||||
transform: scale(0.93);
|
||||
}
|
||||
|
||||
/* ── Icon wrapper ── */
|
||||
.bottom-tab-icon-wrap {
|
||||
position: relative;
|
||||
font-size: 1.05rem;
|
||||
line-height: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.6rem;
|
||||
padding: 0.7rem 1rem;
|
||||
border-radius: var(--radius);
|
||||
font-size: 0.88rem;
|
||||
}
|
||||
|
||||
/* ── Cart badge ── */
|
||||
.bottom-tab-badge {
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
right: -8px;
|
||||
min-width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 999px;
|
||||
background: var(--red);
|
||||
color: #fff;
|
||||
font-size: 0.58rem;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 3px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* ── Labels ── */
|
||||
.bottom-tab-label {
|
||||
font-size: 0.6rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
letter-spacing: 0.01em;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.sidebar-footer-btn:disabled {
|
||||
opacity: 0.45;
|
||||
cursor: not-allowed;
|
||||
/* Hide labels on very narrow screens */
|
||||
@media (max-width: 380px) {
|
||||
.bottom-tab-label {
|
||||
display: none;
|
||||
}
|
||||
.bottom-tab {
|
||||
padding: 10px 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-footer-btn.telegram {
|
||||
background: var(--cyan-soft);
|
||||
border: 1px solid rgba(34, 211, 238, 0.2);
|
||||
color: var(--cyan);
|
||||
/* Logout button — couleur rouge subtile */
|
||||
.topbar-logout-btn {
|
||||
color: rgba(239, 68, 68, 0.7);
|
||||
}
|
||||
|
||||
.sidebar-footer-btn.telegram:hover:not(:disabled) {
|
||||
background: rgba(34, 211, 238, 0.15);
|
||||
border-color: rgba(34, 211, 238, 0.35);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 16px rgba(34, 211, 238, 0.15);
|
||||
}
|
||||
|
||||
.sidebar-footer-btn.logout {
|
||||
background: rgba(239, 68, 68, 0.08);
|
||||
border: 1px solid rgba(239, 68, 68, 0.18);
|
||||
color: #f87171;
|
||||
}
|
||||
|
||||
.sidebar-footer-btn.logout:hover:not(:disabled) {
|
||||
background: rgba(239, 68, 68, 0.13);
|
||||
border-color: rgba(239, 68, 68, 0.3);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.sidebar-footer-btn:active:not(:disabled) {
|
||||
transform: scale(0.97);
|
||||
.topbar-logout-btn:hover {
|
||||
color: var(--red) !important;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
@@ -473,8 +379,12 @@ body {
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from { transform: translateY(100%); }
|
||||
to { transform: translateY(0); }
|
||||
from {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.notif-modal-header {
|
||||
@@ -519,8 +429,13 @@ body {
|
||||
scrollbar-color: var(--border) transparent;
|
||||
}
|
||||
|
||||
.notif-modal-body::-webkit-scrollbar { width: 4px; }
|
||||
.notif-modal-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
|
||||
.notif-modal-body::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
.notif-modal-body::-webkit-scrollbar-thumb {
|
||||
background: var(--border);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.notif-empty {
|
||||
display: flex;
|
||||
@@ -534,7 +449,9 @@ body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.notif-empty p { margin: 0; }
|
||||
.notif-empty p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.notif-item {
|
||||
display: flex;
|
||||
@@ -546,7 +463,9 @@ body {
|
||||
transition: background var(--transition);
|
||||
}
|
||||
|
||||
.notif-item:last-child { border-bottom: none; }
|
||||
.notif-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.notif-unread {
|
||||
background: var(--primary-soft);
|
||||
@@ -569,11 +488,33 @@ body {
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Responsive
|
||||
Safe-area utilitaire — à appliquer au conteneur scrollable
|
||||
d'une page (ou directement à son bouton d'action principal)
|
||||
pour garantir qu'aucun contenu ne se cache sous la bottom-nav
|
||||
flottante (ex: bouton "Commander" du panier, "Valider" d'un
|
||||
formulaire, etc.). Hauteur de la pilule + son offset + une
|
||||
marge de confort.
|
||||
============================================================ */
|
||||
.page-bottomnav-safe-area {
|
||||
padding-bottom: calc(
|
||||
var(--bottomnav-h) + var(--bottomnav-offset) + 16px
|
||||
) !important;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Responsive — touch devices
|
||||
============================================================ */
|
||||
@media (hover: none) {
|
||||
.menu-item:hover { background: transparent; border-color: transparent; color: var(--text-muted); }
|
||||
.menu-item.active:hover { background: var(--primary-soft); color: var(--primary); }
|
||||
.topbar-toggle:hover { background: transparent; border-color: transparent; }
|
||||
.topbar-icon-btn:hover { background: transparent; border-color: transparent; }
|
||||
.bottom-tab:hover {
|
||||
background: transparent;
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
}
|
||||
.bottom-tab.active:hover {
|
||||
background: rgba(255, 255, 255, 0.14);
|
||||
color: #fff;
|
||||
}
|
||||
.topbar-icon-btn:hover {
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11,7 +11,6 @@ import {
|
||||
faTruck,
|
||||
faClockRotateLeft,
|
||||
faSignOutAlt,
|
||||
faBars,
|
||||
faTimes,
|
||||
faBell,
|
||||
faGift,
|
||||
@@ -19,7 +18,6 @@ import {
|
||||
faSun,
|
||||
faMoon,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import { faTelegram } from "@fortawesome/free-brands-svg-icons";
|
||||
import type { IconDefinition } from "@fortawesome/fontawesome-svg-core";
|
||||
import { getClientNotifications, markNotificationsRead, getPublicSettings } from "../api/api";
|
||||
import type { ClientNotification } from "../api/api";
|
||||
@@ -49,7 +47,6 @@ function formatNotifDate(dateStr: string): string {
|
||||
|
||||
function Navbar() {
|
||||
const { theme, toggleTheme } = useTheme();
|
||||
const [isMenuOpen, setIsMenuOpen] = useState<boolean>(false);
|
||||
const [isLoggingOut, setIsLoggingOut] = useState<boolean>(false);
|
||||
const [notifications, setNotifications] = useState<ClientNotification[]>([]);
|
||||
const [unreadCount, setUnreadCount] = useState(0);
|
||||
@@ -71,9 +68,7 @@ function Navbar() {
|
||||
for (const n of res.notifications) {
|
||||
if (n.read) continue;
|
||||
const key = `${n.command_id}-${n.type}-${n.created_at}`;
|
||||
if (!seenKeysRef.current.has(key)) {
|
||||
seenKeysRef.current.add(key);
|
||||
}
|
||||
if (!seenKeysRef.current.has(key)) seenKeysRef.current.add(key);
|
||||
}
|
||||
} else {
|
||||
for (const n of res.notifications) {
|
||||
@@ -105,26 +100,6 @@ function Navbar() {
|
||||
}
|
||||
};
|
||||
|
||||
const closeNotifPanel = () => setShowNotifPanel(false);
|
||||
|
||||
const menuItems: MenuItem[] = [
|
||||
{ id: "accueil", label: "Accueil", icon: faHome, path: "/user/accueil" },
|
||||
{ id: "produits", label: "Nos Produits", icon: faBox, path: "/user/nos-produits" },
|
||||
{ id: "panier", label: "Mon Panier", icon: faShoppingCart, path: "/user/panier" },
|
||||
{ id: "suivi", label: "Suivi Livraison", icon: faTruck, path: "/user/suivi-livraison" },
|
||||
{ id: "historique", label: "Historique", icon: faClockRotateLeft, path: "/user/consultation-historique" },
|
||||
...(referralEnabled ? [{ id: "parrainage", label: "Parrainage", icon: faGift, path: "/user/parrainage" } as MenuItem] : []),
|
||||
{ id: "profil", label: "Mon Profil", icon: faUserCircle, path: "/user/profil" },
|
||||
];
|
||||
|
||||
const toggleMenu = () => setIsMenuOpen((v) => !v);
|
||||
const closeMenu = () => setIsMenuOpen(false);
|
||||
|
||||
const handleNavigation = (path: string) => {
|
||||
navigate(path);
|
||||
closeMenu();
|
||||
};
|
||||
|
||||
const handleLogout = async () => {
|
||||
if (isLoggingOut) return;
|
||||
setIsLoggingOut(true);
|
||||
@@ -134,10 +109,7 @@ function Navbar() {
|
||||
try {
|
||||
await fetch("/api/v2/admin/auth/logout", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}` },
|
||||
});
|
||||
} catch { /* noop */ }
|
||||
}
|
||||
@@ -153,154 +125,102 @@ function Navbar() {
|
||||
}
|
||||
};
|
||||
|
||||
const handleTelegram = () => window.open("https://t.me/milieu_nantais", "_blank");
|
||||
const navItems: MenuItem[] = [
|
||||
{ id: "accueil", label: "Accueil", icon: faHome, path: "/user/accueil" },
|
||||
{ id: "produits", label: "Produits", icon: faBox, path: "/user/nos-produits" },
|
||||
{ id: "panier", label: "Panier", icon: faShoppingCart, path: "/user/panier" },
|
||||
{ id: "suivi", label: "Suivi", icon: faTruck, path: "/user/suivi-livraison" },
|
||||
];
|
||||
|
||||
const accountItems: MenuItem[] = [
|
||||
{ id: "historique", label: "Historique", icon: faClockRotateLeft, path: "/user/consultation-historique" },
|
||||
...(referralEnabled ? [{ id: "parrainage", label: "Parrain.", icon: faGift, path: "/user/parrainage" } as MenuItem] : []),
|
||||
{ id: "profil", label: "Profil", icon: faUserCircle, path: "/user/profil" },
|
||||
];
|
||||
|
||||
const allTabs = [...navItems, ...accountItems];
|
||||
|
||||
const renderTab = (item: MenuItem) => {
|
||||
const isActive = location.pathname === item.path;
|
||||
const showBadge = item.id === "panier" && cartCount > 0;
|
||||
return (
|
||||
<button
|
||||
key={item.id}
|
||||
className={`bottom-tab ${isActive ? "active" : ""}`}
|
||||
onClick={() => navigate(item.path)}
|
||||
aria-label={item.label}
|
||||
>
|
||||
<span className="bottom-tab-icon-wrap">
|
||||
<FontAwesomeIcon icon={item.icon} />
|
||||
{showBadge && (
|
||||
<span className="bottom-tab-badge">
|
||||
{cartCount > 99 ? "99+" : cartCount}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
<span className="bottom-tab-label">{item.label}</span>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* ── Top Bar ─────────────────────────────────── */}
|
||||
{/* ── Top Bar ── */}
|
||||
<header className="topbar">
|
||||
<button
|
||||
className={`topbar-toggle ${isMenuOpen ? "is-open" : ""}`}
|
||||
onClick={toggleMenu}
|
||||
aria-label="Menu"
|
||||
>
|
||||
<FontAwesomeIcon icon={isMenuOpen ? faTimes : faBars} />
|
||||
</button>
|
||||
|
||||
<span className="topbar-brand">{shopName}</span>
|
||||
|
||||
<div className="topbar-actions">
|
||||
{/* Theme toggle */}
|
||||
<button
|
||||
className="topbar-theme-btn"
|
||||
onClick={toggleTheme}
|
||||
aria-label={theme === "dark" ? "Passer en mode clair" : "Passer en mode sombre"}
|
||||
>
|
||||
<button className="topbar-theme-btn" onClick={toggleTheme}
|
||||
aria-label={theme === "dark" ? "Mode clair" : "Mode sombre"}>
|
||||
<FontAwesomeIcon icon={theme === "dark" ? faSun : faMoon} />
|
||||
</button>
|
||||
|
||||
{/* Notifications */}
|
||||
<button
|
||||
className="topbar-icon-btn"
|
||||
onClick={handleNotifBellClick}
|
||||
aria-label="Notifications"
|
||||
>
|
||||
<button className="topbar-icon-btn" onClick={handleNotifBellClick} aria-label="Notifications">
|
||||
<FontAwesomeIcon icon={faBell} />
|
||||
{unreadCount > 0 && (
|
||||
<span className="topbar-badge">
|
||||
{unreadCount > 99 ? "99+" : unreadCount}
|
||||
</span>
|
||||
<span className="topbar-badge">{unreadCount > 99 ? "99+" : unreadCount}</span>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Panier */}
|
||||
<button
|
||||
className="topbar-icon-btn"
|
||||
onClick={() => navigate("/user/panier")}
|
||||
aria-label="Panier"
|
||||
className="topbar-icon-btn topbar-logout-btn"
|
||||
onClick={handleLogout}
|
||||
disabled={isLoggingOut}
|
||||
aria-label="Se déconnecter"
|
||||
>
|
||||
<FontAwesomeIcon icon={faShoppingCart} />
|
||||
{cartCount > 0 && (
|
||||
<span className="topbar-badge">{cartCount}</span>
|
||||
)}
|
||||
<FontAwesomeIcon icon={faSignOutAlt} />
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* ── Notifications modal ─────────────────────── */}
|
||||
{/* ── Notifications ── */}
|
||||
{showNotifPanel && (
|
||||
<div className="notif-modal-overlay" onClick={closeNotifPanel}>
|
||||
<div className="notif-modal-overlay" onClick={() => setShowNotifPanel(false)}>
|
||||
<div className="notif-modal" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="notif-modal-header">
|
||||
<span className="notif-modal-title">Notifications</span>
|
||||
<button className="notif-modal-close" onClick={closeNotifPanel} aria-label="Fermer">
|
||||
<button className="notif-modal-close" onClick={() => setShowNotifPanel(false)}>
|
||||
<FontAwesomeIcon icon={faTimes} />
|
||||
</button>
|
||||
</div>
|
||||
<div className="notif-modal-body">
|
||||
{notifications.length === 0 ? (
|
||||
<div className="notif-empty">
|
||||
<FontAwesomeIcon icon={faBell} style={{ fontSize: "2rem", marginBottom: "0.75rem", opacity: 0.3 }} />
|
||||
<FontAwesomeIcon icon={faBell} style={{ fontSize: "2rem", opacity: 0.3 }} />
|
||||
<p>Aucune notification</p>
|
||||
</div>
|
||||
) : (
|
||||
notifications.map((n, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className={`notif-item ${n.read ? "notif-read" : "notif-unread"}`}
|
||||
>
|
||||
<span className="notif-message">{n.message}</span>
|
||||
<span className="notif-time">{formatNotifDate(n.created_at)}</span>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
) : notifications.map((n, i) => (
|
||||
<div key={i} className={`notif-item ${n.read ? "notif-read" : "notif-unread"}`}>
|
||||
<span className="notif-message">{n.message}</span>
|
||||
<span className="notif-time">{formatNotifDate(n.created_at)}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── Overlay ─────────────────────────────────── */}
|
||||
{isMenuOpen && <div className="sidebar-overlay" onClick={closeMenu} />}
|
||||
|
||||
{/* ── Sidebar ─────────────────────────────────── */}
|
||||
<aside className={`sidebar ${isMenuOpen ? "open" : ""}`}>
|
||||
<div className="sidebar-header">
|
||||
<div className="sidebar-brand">
|
||||
<div className="sidebar-brand-icon">
|
||||
<FontAwesomeIcon icon={faShoppingCart} />
|
||||
</div>
|
||||
<div>
|
||||
<p className="sidebar-brand-name">{shopName}</p>
|
||||
<p className="sidebar-brand-sub">Mon espace</p>
|
||||
</div>
|
||||
</div>
|
||||
<button className="sidebar-close" onClick={closeMenu} aria-label="Fermer">
|
||||
<FontAwesomeIcon icon={faTimes} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<nav className="sidebar-nav">
|
||||
<ul className="menu-list">
|
||||
{menuItems.map((item) => {
|
||||
const isActive = location.pathname === item.path;
|
||||
return (
|
||||
<li key={item.id}>
|
||||
<button
|
||||
className={`menu-item ${isActive ? "active" : ""}`}
|
||||
onClick={() => handleNavigation(item.path)}
|
||||
disabled={isLoggingOut}
|
||||
>
|
||||
<span className="menu-icon">
|
||||
<FontAwesomeIcon icon={item.icon} />
|
||||
</span>
|
||||
<span className="menu-label">{item.label}</span>
|
||||
{isActive && <span className="menu-dot" />}
|
||||
</button>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div className="sidebar-footer">
|
||||
<button
|
||||
className="sidebar-footer-btn telegram"
|
||||
onClick={handleTelegram}
|
||||
disabled={isLoggingOut}
|
||||
>
|
||||
<FontAwesomeIcon icon={faTelegram} />
|
||||
<span>Telegram</span>
|
||||
</button>
|
||||
<button
|
||||
className="sidebar-footer-btn logout"
|
||||
onClick={handleLogout}
|
||||
disabled={isLoggingOut}
|
||||
>
|
||||
<FontAwesomeIcon icon={faSignOutAlt} />
|
||||
<span>{isLoggingOut ? "Déconnexion…" : "Déconnexion"}</span>
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
{/* ── Bottom nav ── */}
|
||||
<nav className="bottom-nav">
|
||||
{allTabs.map(renderTab)}
|
||||
</nav>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -57,7 +57,8 @@ function ProductCard({
|
||||
null,
|
||||
);
|
||||
const [showSuccess, setShowSuccess] = useState(false);
|
||||
const [showVideo, setShowVideo] = useState(false); // ✨ État pour afficher/masquer la vidéo
|
||||
const [showVideo, setShowVideo] = useState(false);
|
||||
const [stockWarning, setStockWarning] = useState<{ wanted: number; available: number } | null>(null);
|
||||
|
||||
const isOutOfStock = stock === 0;
|
||||
const isComingSoon = coming_soon === true;
|
||||
@@ -100,16 +101,13 @@ function ProductCard({
|
||||
const selectedGrams = Number(e.target.value);
|
||||
setSelectedQuantity(selectedGrams);
|
||||
|
||||
if (stock > 0 && selectedGrams > stock) {
|
||||
setStockWarning({ wanted: selectedGrams, available: stock });
|
||||
return;
|
||||
}
|
||||
|
||||
const priceOption = prices?.find((p) => p.quantity === selectedGrams);
|
||||
if (priceOption) {
|
||||
console.log("💾 [ProductCard] Ajout au panier:", {
|
||||
id,
|
||||
name,
|
||||
category: normalizedCategory,
|
||||
quantity: selectedGrams,
|
||||
price: priceOption.price,
|
||||
});
|
||||
|
||||
addToCart({
|
||||
product_id: id,
|
||||
name_product: name,
|
||||
@@ -237,6 +235,49 @@ function ProductCard({
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Modal stock insuffisant */}
|
||||
{stockWarning &&
|
||||
createPortal(
|
||||
<div className="video-modal" onClick={() => setStockWarning(null)}>
|
||||
<div
|
||||
className="video-modal-content"
|
||||
style={{ maxWidth: 340, padding: "2rem", textAlign: "center" }}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<button
|
||||
className="video-close-btn"
|
||||
onClick={() => setStockWarning(null)}
|
||||
aria-label="Fermer"
|
||||
>
|
||||
<X size={18} />
|
||||
</button>
|
||||
<div style={{ fontSize: "2.5rem", marginBottom: "0.75rem" }}>⚠️</div>
|
||||
<p style={{ fontWeight: 700, fontSize: "1.1rem", marginBottom: "0.5rem" }}>
|
||||
Stock insuffisant
|
||||
</p>
|
||||
<p style={{ color: "#aaa", fontSize: "0.95rem", marginBottom: "1.25rem" }}>
|
||||
Vous avez sélectionné <strong>{stockWarning.wanted}g</strong> mais il ne reste que{" "}
|
||||
<strong style={{ color: "#ef4444" }}>{stockWarning.available}g</strong> disponible pour <em>{name}</em>.
|
||||
</p>
|
||||
<button
|
||||
style={{
|
||||
background: "#ef4444",
|
||||
color: "#fff",
|
||||
border: "none",
|
||||
borderRadius: 8,
|
||||
padding: "0.6rem 1.5rem",
|
||||
fontWeight: 700,
|
||||
cursor: "pointer",
|
||||
}}
|
||||
onClick={() => setStockWarning(null)}
|
||||
>
|
||||
OK
|
||||
</button>
|
||||
</div>
|
||||
</div>,
|
||||
document.body,
|
||||
)}
|
||||
|
||||
{/* ✨ Modal vidéo — rendu via Portal pour éviter le clipping du transform:scale sur .product-card */}
|
||||
{showVideo &&
|
||||
videoUrl &&
|
||||
|
||||
@@ -1,132 +1,108 @@
|
||||
/* ===== TOAST PROFESSIONAL STYLES ===== */
|
||||
/* ===== TOAST MINIMAL STYLES ===== */
|
||||
.toast {
|
||||
position: fixed;
|
||||
bottom: 28px;
|
||||
right: 28px;
|
||||
min-width: 360px;
|
||||
max-width: 450px;
|
||||
padding: 14px 18px;
|
||||
border-radius: 12px;
|
||||
backdrop-filter: blur(40px);
|
||||
-webkit-backdrop-filter: blur(40px);
|
||||
top: calc(var(--topbar-h, 60px) + 10px);
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
width: min(340px, calc(100vw - 32px));
|
||||
padding: 9px 14px;
|
||||
border-radius: 10px;
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
box-shadow:
|
||||
0 10px 40px rgba(0, 0, 0, 0.2),
|
||||
inset 0 1px 1px rgba(255, 255, 255, 0.1);
|
||||
animation: toastSlideIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
z-index: 9999;
|
||||
border-left-width: 3px;
|
||||
background: var(--surface, #111115);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
|
||||
animation: toastSlideDown 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
z-index: 950;
|
||||
overflow: hidden;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
|
||||
}
|
||||
|
||||
@keyframes toastSlideIn {
|
||||
@keyframes toastSlideDown {
|
||||
from {
|
||||
transform: translateX(480px);
|
||||
transform: translate(-50%, -12px);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
transform: translate(-50%, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* SUCCESS - VIOLET */
|
||||
.toast-success {
|
||||
background: linear-gradient(135deg, rgba(124, 58, 237, 0.1) 0%, rgba(124, 58, 237, 0.05) 100%);
|
||||
border-color: rgba(124, 58, 237, 0.3);
|
||||
border-left-color: #7c3aed;
|
||||
color: #7c3aed;
|
||||
}
|
||||
|
||||
.toast-success .toast-icon {
|
||||
color: #7c3aed;
|
||||
background: rgba(124, 58, 237, 0.15);
|
||||
border: 1px solid rgba(124, 58, 237, 0.4);
|
||||
}
|
||||
|
||||
.toast-success .toast-progress {
|
||||
background: linear-gradient(90deg, #7c3aed, #a78bfa, transparent);
|
||||
background: #7c3aed;
|
||||
}
|
||||
|
||||
/* ERROR */
|
||||
.toast-error {
|
||||
background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(220, 38, 38, 0.04) 100%);
|
||||
border-color: rgba(239, 68, 68, 0.2);
|
||||
border-left-color: #dc2626;
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.toast-error .toast-icon {
|
||||
color: #dc2626;
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
border: 1px solid rgba(239, 68, 68, 0.25);
|
||||
}
|
||||
|
||||
.toast-error .toast-progress {
|
||||
background: linear-gradient(90deg, #dc2626, #b91c1c, transparent);
|
||||
background: #dc2626;
|
||||
}
|
||||
|
||||
/* WARNING */
|
||||
.toast-warning {
|
||||
background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(217, 119, 6, 0.04) 100%);
|
||||
border-color: rgba(245, 158, 11, 0.2);
|
||||
border-left-color: #d97706;
|
||||
color: #d97706;
|
||||
}
|
||||
|
||||
.toast-warning .toast-icon {
|
||||
color: #d97706;
|
||||
background: rgba(245, 158, 11, 0.1);
|
||||
border: 1px solid rgba(245, 158, 11, 0.25);
|
||||
}
|
||||
|
||||
.toast-warning .toast-progress {
|
||||
background: linear-gradient(90deg, #d97706, #b45309, transparent);
|
||||
background: #d97706;
|
||||
}
|
||||
|
||||
/* INFO */
|
||||
.toast-info {
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(37, 99, 235, 0.04) 100%);
|
||||
border-color: rgba(59, 130, 246, 0.2);
|
||||
border-left-color: #2563eb;
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
.toast-info .toast-icon {
|
||||
color: #2563eb;
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
border: 1px solid rgba(59, 130, 246, 0.25);
|
||||
}
|
||||
|
||||
.toast-info .toast-progress {
|
||||
background: linear-gradient(90deg, #2563eb, #1d4ed8, transparent);
|
||||
background: #2563eb;
|
||||
}
|
||||
|
||||
.toast-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.toast-icon {
|
||||
font-size: 18px;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
min-width: 32px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 8px;
|
||||
flex-shrink: 0;
|
||||
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
}
|
||||
|
||||
.toast:hover .toast-icon {
|
||||
transform: scale(1.08);
|
||||
}
|
||||
|
||||
.toast-message {
|
||||
font-size: 14px;
|
||||
font-size: 12.5px;
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
flex: 1;
|
||||
line-height: 1.4;
|
||||
flex: 1 1 auto;
|
||||
letter-spacing: 0.1px;
|
||||
color: var(--text);
|
||||
}
|
||||
@@ -135,7 +111,8 @@
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 2px;
|
||||
height: 1.5px;
|
||||
opacity: 0.6;
|
||||
animation: toastProgressBar linear forwards;
|
||||
}
|
||||
|
||||
@@ -148,23 +125,3 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 640px) {
|
||||
.toast {
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
left: 20px;
|
||||
min-width: auto;
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (hover: none) {
|
||||
.toast {
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.toast:hover .toast-icon {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user