File manager - Edit - /home/webapp69.cm.in.th/u69319090028/Shop/assets/css/app.css
Back
/* CARGOO Modern Marketplace Design System */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Sarabun:wght@300;400;500;600;700&display=swap'); :root { /* 60% Dominant: Backgrounds & Surfaces (White / Light Gray) */ --cargoo-bg: #f8fafc; --cargoo-surface: #ffffff; --cargoo-surface-subtle: #f1f5f9; --cargoo-surface-elevated: #ffffff; --cargoo-border: #e2e8f0; --cargoo-border-hover: #cbd5e1; /* 30% Structural: Modern Blue & Dark Neutral */ --cargoo-primary: #1e40af; --cargoo-primary-dark: #1e3a8a; --cargoo-primary-light: #3b82f6; --cargoo-primary-subtle: #eff6ff; --cargoo-text-main: #0f172a; --cargoo-text-muted: #64748b; --cargoo-text-subtle: #94a3b8; /* 10% Accent: Cyan / Soft Blue Highlights */ --cargoo-accent: #0284c7; --cargoo-accent-light: #e0f2fe; --cargoo-accent-cyan: #06b6d4; /* Status Tokens */ --cargoo-success: #10b981; --cargoo-success-bg: #ecfdf5; --cargoo-danger: #ef4444; --cargoo-danger-bg: #fef2f2; --cargoo-warning: #f59e0b; --cargoo-warning-bg: #fffbeb; /* Shadows */ --cargoo-shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.04); --cargoo-shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.06), 0 1px 2px -1px rgba(15, 23, 42, 0.04); --cargoo-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.05); --cargoo-shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04); /* Border Radii */ --cargoo-radius-sm: 6px; --cargoo-radius-md: 10px; --cargoo-radius-lg: 14px; --cargoo-radius-full: 9999px; /* Transitions */ --cargoo-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } /* Global Reset & Base */ *, *::before, *::after { box-sizing: border-box; } body { font-family: 'Plus Jakarta Sans', 'Sarabun', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background-color: var(--cargoo-bg); color: var(--cargoo-text-main); min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Typography */ h1, h2, h3, h4, h5, h6 { font-weight: 700; color: var(--cargoo-text-main); letter-spacing: -0.02em; line-height: 1.3; } a { color: var(--cargoo-primary); text-decoration: none; transition: var(--cargoo-transition); } a:hover { color: var(--cargoo-primary-dark); } /* Navbar */ .cargoo-navbar { background-color: var(--cargoo-surface); border-bottom: 1px solid var(--cargoo-border); position: sticky; top: 0; z-index: 1020; box-shadow: var(--cargoo-shadow-xs); } .cargoo-brand-img { height: 38px; width: auto; object-fit: contain; display: block; } .cargoo-search-bar { border-radius: var(--cargoo-radius-full); background-color: var(--cargoo-surface-subtle); border: 1px solid var(--cargoo-border); padding: 0.5rem 1.25rem; font-size: 0.9rem; transition: var(--cargoo-transition); } .cargoo-search-bar:focus { background-color: var(--cargoo-surface); border-color: var(--cargoo-primary); box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.12); outline: none; } /* Buttons */ .btn-cargoo-primary { background-color: var(--cargoo-primary); border-color: var(--cargoo-primary); color: #ffffff; font-weight: 600; border-radius: var(--cargoo-radius-md); padding: 0.6rem 1.25rem; transition: var(--cargoo-transition); display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; } .btn-cargoo-primary:hover, .btn-cargoo-primary:focus { background-color: var(--cargoo-primary-dark); border-color: var(--cargoo-primary-dark); color: #ffffff; box-shadow: 0 4px 12px rgba(30, 64, 175, 0.2); } .btn-cargoo-outline { background-color: transparent; border: 1px solid var(--cargoo-border); color: var(--cargoo-text-main); font-weight: 600; border-radius: var(--cargoo-radius-md); padding: 0.6rem 1.25rem; transition: var(--cargoo-transition); display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; } .btn-cargoo-outline:hover { background-color: var(--cargoo-surface-subtle); border-color: var(--cargoo-primary); color: var(--cargoo-primary); } /* Cards & Surfaces */ .cargoo-card { background-color: var(--cargoo-surface); border: 1px solid var(--cargoo-border); border-radius: var(--cargoo-radius-lg); box-shadow: var(--cargoo-shadow-xs); transition: var(--cargoo-transition); } .cargoo-card:hover { box-shadow: var(--cargoo-shadow-md); border-color: var(--cargoo-border-hover); } .cargoo-card-header { padding: 1.15rem 1.5rem; background-color: transparent; border-bottom: 1px solid var(--cargoo-border); } .cargoo-card-body { padding: 1.5rem; } /* UNIFIED PRODUCT CARD COMPONENT STYLES */ .cargoo-product-card { background-color: var(--cargoo-surface); border: 1px solid var(--cargoo-border); border-radius: var(--cargoo-radius-md); overflow: hidden; display: flex; flex-direction: column; height: 100%; position: relative; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .cargoo-product-card:hover { transform: translateY(-3px); box-shadow: var(--cargoo-shadow-md); border-color: var(--cargoo-border-hover); } .cargoo-product-card .card-img-wrapper { position: relative; width: 100%; padding-top: 100%; /* 1:1 Aspect Ratio */ background-color: #ffffff; overflow: hidden; } .cargoo-product-card .card-img-wrapper img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; padding: 0.75rem; transition: transform 0.3s ease; } .cargoo-product-card:hover .card-img-wrapper img { transform: scale(1.04); } .cargoo-product-card .card-badge-container { position: absolute; top: 0.5rem; left: 0.5rem; display: flex; flex-direction: column; gap: 0.25rem; z-index: 2; } .cargoo-product-card .badge-discount { background-color: var(--cargoo-danger); color: #ffffff; font-size: 0.7rem; font-weight: 700; padding: 0.2rem 0.45rem; border-radius: var(--cargoo-radius-sm); text-transform: uppercase; } .cargoo-product-card .badge-seller { background-color: var(--cargoo-primary); color: #ffffff; font-size: 0.65rem; font-weight: 600; padding: 0.2rem 0.4rem; border-radius: var(--cargoo-radius-sm); } .cargoo-product-card .btn-wishlist-card { position: absolute; top: 0.5rem; right: 0.5rem; width: 32px; height: 32px; border-radius: var(--cargoo-radius-full); background-color: rgba(255, 255, 255, 0.9); border: 1px solid var(--cargoo-border); display: flex; align-items: center; justify-content: center; color: var(--cargoo-text-muted); font-size: 0.9rem; z-index: 2; transition: var(--cargoo-transition); cursor: pointer; } .cargoo-product-card .btn-wishlist-card:hover { background-color: #ffffff; color: var(--cargoo-danger); transform: scale(1.1); } .cargoo-product-card .btn-wishlist-card.active { color: var(--cargoo-danger); background-color: #ffffff; } .cargoo-product-card .card-content { padding: 0.85rem; display: flex; flex-direction: column; flex-grow: 1; justify-content: space-between; } .cargoo-product-card .product-title { font-size: 0.875rem; font-weight: 600; color: var(--cargoo-text-main); line-height: 1.35; margin-bottom: 0.4rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 2.36rem; } .cargoo-product-card .product-price-row { display: flex; align-items: baseline; gap: 0.35rem; margin-top: auto; margin-bottom: 0.35rem; } .cargoo-product-card .current-price { font-size: 1.05rem; font-weight: 800; color: var(--cargoo-primary); } .cargoo-product-card .original-price { font-size: 0.75rem; color: var(--cargoo-text-subtle); text-decoration: line-through; } .cargoo-product-card .product-meta-row { display: flex; align-items: center; justify-content: space-between; font-size: 0.75rem; color: var(--cargoo-text-muted); } .cargoo-product-card .stock-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.75); display: flex; align-items: center; justify-content: center; z-index: 3; } /* Category 2-Row Track Carousel */ .cargoo-cat-carousel-outer { position: relative; width: 100%; } .cargoo-cat-scroll-track { display: flex; flex-direction: column; gap: 0.75rem; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE/Edge */ padding: 4px 2px; } .cargoo-cat-scroll-track::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */ } .cargoo-cat-row { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 0.75rem; width: max-content; } .cargoo-cat-card { flex: 0 0 148px; width: 148px; height: 108px; min-height: 108px; max-height: 108px; background-color: var(--cargoo-surface, #ffffff); border: 1px solid var(--cargoo-border, #e2e8f0); border-radius: var(--cargoo-radius-md, 10px); padding: 0.65rem 0.5rem; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; scroll-snap-align: start; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; user-select: none; } .cargoo-cat-card:hover { border-color: var(--cargoo-primary, #1877f2); background-color: rgba(24, 119, 242, 0.05); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(24, 119, 242, 0.1); } .cargoo-cat-icon { height: 32px; display: flex; align-items: center; justify-content: center; margin-bottom: 0.25rem; } .cargoo-cat-icon i { font-size: 1.6rem; color: var(--cargoo-primary, #1877f2); transition: transform 0.2s ease; } .cargoo-cat-card:hover .cargoo-cat-icon i { transform: scale(1.12); } .cargoo-cat-name { font-size: 0.775rem; font-weight: 600; color: var(--cargoo-text-main, #1e293b); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; text-align: center; width: 100%; margin-bottom: 0.15rem; } .cargoo-cat-card:hover .cargoo-cat-name { color: var(--cargoo-primary, #1877f2); } .cargoo-cat-count { font-size: 0.675rem; color: var(--cargoo-text-muted, #64748b); } /* Floating Side Navigation Arrows */ .cargoo-cat-arrow-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; background-color: #ffffff; border: 1px solid var(--cargoo-border, #cbd5e1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); color: var(--cargoo-text-main, #334155); display: flex; align-items: center; justify-content: center; z-index: 10; cursor: pointer; transition: all 0.2s ease; padding: 0; } .cargoo-cat-arrow-btn:hover:not(:disabled) { background-color: var(--cargoo-primary, #1877f2); border-color: var(--cargoo-primary, #1877f2); color: #ffffff; box-shadow: 0 4px 12px rgba(24, 119, 242, 0.3); } .cargoo-cat-arrow-btn:disabled { opacity: 0; pointer-events: none; cursor: default; } .cargoo-cat-arrow-prev { left: -14px; } .cargoo-cat-arrow-next { right: -14px; } /* Responsive adjustments */ @media (max-width: 991.98px) { .cargoo-cat-card { flex: 0 0 135px; width: 135px; height: 102px; min-height: 102px; max-height: 102px; } .cargoo-cat-arrow-prev { left: -8px; } .cargoo-cat-arrow-next { right: -8px; } } @media (max-width: 767.98px) { .cargoo-cat-card { flex: 0 0 120px; width: 120px; height: 98px; min-height: 98px; max-height: 98px; padding: 0.5rem 0.35rem; } .cargoo-cat-icon { height: 26px; } .cargoo-cat-icon i { font-size: 1.35rem; } .cargoo-cat-name { font-size: 0.725rem; } .cargoo-cat-arrow-btn { width: 30px; height: 30px; font-size: 0.85rem; } } /* Forms */ .form-label { font-weight: 600; font-size: 0.875rem; color: var(--cargoo-text-main); margin-bottom: 0.35rem; } .form-control, .form-select { border-radius: var(--cargoo-radius-md); border: 1px solid var(--cargoo-border); padding: 0.6rem 0.875rem; font-size: 0.9rem; color: var(--cargoo-text-main); background-color: #ffffff; transition: var(--cargoo-transition); } .form-control:focus, .form-select:focus { border-color: var(--cargoo-primary); box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.12); outline: none; } /* Product Detail Page Elements */ .product-gallery-main { width: 100%; aspect-ratio: 1/1; background-color: #ffffff; border: 1px solid var(--cargoo-border); border-radius: var(--cargoo-radius-lg); display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 1.5rem; } .product-gallery-main img { max-width: 100%; max-height: 100%; object-fit: contain; } .gallery-thumbnail-item { width: 64px; height: 64px; border-radius: var(--cargoo-radius-md); border: 2px solid var(--cargoo-border); cursor: pointer; overflow: hidden; padding: 4px; background-color: #ffffff; transition: var(--cargoo-transition); } .gallery-thumbnail-item.active, .gallery-thumbnail-item:hover { border-color: var(--cargoo-primary); } .gallery-thumbnail-item img { width: 100%; height: 100%; object-fit: contain; } .variant-selector-btn { border: 1px solid var(--cargoo-border); background-color: #ffffff; color: var(--cargoo-text-main); padding: 0.45rem 0.9rem; border-radius: var(--cargoo-radius-sm); font-size: 0.85rem; font-weight: 500; transition: var(--cargoo-transition); cursor: pointer; } .variant-selector-btn:hover { border-color: var(--cargoo-primary); color: var(--cargoo-primary); } .variant-selector-btn.active { border-color: var(--cargoo-primary); background-color: var(--cargoo-primary-subtle); color: var(--cargoo-primary); font-weight: 600; } /* Cart & Checkout Elements */ .cart-store-group { background-color: var(--cargoo-surface); border: 1px solid var(--cargoo-border); border-radius: var(--cargoo-radius-lg); margin-bottom: 1.25rem; overflow: hidden; } .cart-store-header { padding: 0.85rem 1.25rem; background-color: var(--cargoo-surface-subtle); border-bottom: 1px solid var(--cargoo-border); font-weight: 600; display: flex; align-items: center; gap: 0.5rem; } .cart-item-row { padding: 1rem 1.25rem; border-bottom: 1px solid var(--cargoo-border); display: flex; align-items: center; gap: 1rem; } .cart-item-row:last-child { border-bottom: none; } /* Skeleton Loading Helpers */ .skeleton-box { background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%); background-size: 200% 100%; animation: skeleton-loading 1.5s infinite; border-radius: var(--cargoo-radius-sm); } @keyframes skeleton-loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Account Navigation Sidebar */ .account-sidebar-nav .nav-link { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-radius: var(--cargoo-radius-md); color: var(--cargoo-text-main); font-weight: 500; font-size: 0.9rem; transition: var(--cargoo-transition); margin-bottom: 0.25rem; } .account-sidebar-nav .nav-link i { font-size: 1.15rem; color: var(--cargoo-text-muted); } .account-sidebar-nav .nav-link:hover { background-color: var(--cargoo-surface-subtle); color: var(--cargoo-primary); } .account-sidebar-nav .nav-link:hover i { color: var(--cargoo-primary); } .account-sidebar-nav .nav-link.active { background-color: var(--cargoo-accent-light); color: var(--cargoo-primary); font-weight: 600; } .account-sidebar-nav .nav-link.active i { color: var(--cargoo-primary); } /* Footer */ .cargoo-footer { background-color: #0f172a; color: #94a3b8; margin-top: auto; border-top: 1px solid #1e293b; padding-top: 3.5rem; padding-bottom: 2rem; } .cargoo-footer h6 { color: #ffffff; font-size: 0.95rem; margin-bottom: 1.25rem; } .cargoo-footer a { color: #94a3b8; text-decoration: none; transition: color 0.15s ease; font-size: 0.9rem; } .cargoo-footer a:hover { color: #ffffff; } .cargoo-footer-bottom { border-top: 1px solid #1e293b; margin-top: 2.5rem; padding-top: 1.5rem; font-size: 0.85rem; } /* Responsive Grid Utility */ @media (max-width: 576px) { .container { padding-left: 0.75rem; padding-right: 0.75rem; } .cargoo-card-body { padding: 1rem; } } /* ========================================================================== Seller Center UX/UI Components ========================================================================== */ /* Seller Stepper Header */ .seller-stepper { display: flex; align-items: center; justify-content: space-between; position: relative; margin-bottom: 2rem; } .seller-step-item { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 2; flex: 1; text-align: center; } .seller-step-icon { width: 38px; height: 38px; border-radius: 50%; background-color: #ffffff; border: 2px solid var(--cargoo-border); color: var(--cargoo-text-muted); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem; transition: var(--cargoo-transition); } .seller-step-item.active .seller-step-icon { border-color: var(--cargoo-primary); background-color: var(--cargoo-primary); color: #ffffff; box-shadow: 0 0 0 4px rgba(30, 64, 175, 0.15); } .seller-step-item.completed .seller-step-icon { border-color: var(--cargoo-success); background-color: var(--cargoo-success); color: #ffffff; } .seller-step-label { font-size: 0.75rem; font-weight: 600; color: var(--cargoo-text-muted); margin-top: 0.4rem; } .seller-step-item.active .seller-step-label { color: var(--cargoo-primary); } /* Order Fulfillment Timeline */ .fulfillment-timeline { position: relative; padding-left: 2rem; } .fulfillment-timeline::before { content: ''; position: absolute; top: 0.5rem; bottom: 0.5rem; left: 0.65rem; width: 2px; background-color: var(--cargoo-border); } .timeline-step { position: relative; margin-bottom: 1.5rem; } .timeline-step:last-child { margin-bottom: 0; } .timeline-dot { position: absolute; left: -2rem; top: 0.15rem; width: 22px; height: 22px; border-radius: 50%; background-color: #ffffff; border: 2px solid var(--cargoo-border); display: flex; align-items: center; justify-content: center; font-size: 0.65rem; } .timeline-step.active .timeline-dot { border-color: var(--cargoo-primary); background-color: var(--cargoo-primary); color: #ffffff; } .timeline-step.completed .timeline-dot { border-color: var(--cargoo-success); background-color: var(--cargoo-success); color: #ffffff; } /* Variation Matrix Table */ .variation-matrix-table th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.025em; background-color: var(--cargoo-surface-subtle); } .variation-matrix-table td { vertical-align: middle; } /* Financial Flow Box */ .financial-flow-card { border-radius: var(--cargoo-radius-lg); border: 1px solid var(--cargoo-border); padding: 1.25rem; background-color: #ffffff; transition: var(--cargoo-transition); } .financial-flow-card:hover { border-color: var(--cargoo-primary); box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05); } /* Compact Interactive Gallery Manager */ .image-upload-preview-container { display: flex; flex-wrap: wrap; gap: 0.5rem; } .gallery-manager-wrap { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px; background-color: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; min-height: 110px; transition: all 0.2s ease; } .gallery-manager-wrap.drag-active { border-color: var(--cargoo-primary); background-color: #eff6ff; } .gallery-item-card { position: relative; width: 76px; height: 102px; border: 1.5px solid #e2e8f0; border-radius: 6px; background-color: #ffffff; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,0.05); transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; user-select: none; cursor: grab; flex-shrink: 0; } .gallery-item-card:hover { box-shadow: 0 2px 6px rgba(15, 23, 42, 0.1); border-color: #cbd5e1; } .gallery-item-card.is-main { border-color: #f59e0b; box-shadow: 0 0 0 1.5px rgba(245, 158, 11, 0.35); } .gallery-item-card.is-dragging { opacity: 0.35; transform: scale(0.92); border: 2px dashed #0284c7; } .gallery-item-card.drag-over { border-color: #0284c7; box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.35); transform: translateY(-2px); } .gallery-item-thumb-wrapper { position: relative; width: 74px; height: 74px; background-color: #ffffff; overflow: hidden; display: flex; align-items: center; justify-content: center; } .gallery-item-thumb { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: cover; display: block; } .gallery-item-badge { position: absolute; top: 3px; left: 3px; font-size: 0.55rem; font-weight: 700; padding: 1px 4px; border-radius: 3px; background-color: rgba(15, 23, 42, 0.75); color: #ffffff; backdrop-filter: blur(2px); z-index: 2; line-height: 1.1; } .gallery-item-badge.main-badge { background: linear-gradient(135deg, #f59e0b, #d97706); color: #ffffff; box-shadow: 0 1px 2px rgba(0,0,0,0.2); } .gallery-item-del-btn { position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 50%; background-color: rgba(239, 68, 68, 0.9); color: #ffffff; border: none; display: flex; align-items: center; justify-content: center; font-size: 0.6rem; cursor: pointer; transition: all 0.15s ease; z-index: 3; } .gallery-item-del-btn:hover { background-color: #dc2626; transform: scale(1.15); } .gallery-item-actions { display: flex; align-items: center; justify-content: space-between; padding: 2px 3px; background-color: #f8fafc; border-top: 1px solid #f1f5f9; height: 24px; } .gallery-move-btn { background: none; border: none; padding: 0 2px; font-size: 0.65rem; color: #64748b; border-radius: 2px; cursor: pointer; transition: all 0.15s ease; line-height: 1; } .gallery-move-btn:hover:not(:disabled) { background-color: #e2e8f0; color: #0f172a; } .gallery-move-btn:disabled { opacity: 0.2; cursor: not-allowed; } .gallery-set-main-btn { font-size: 0.55rem; padding: 1px 3px; border-radius: 3px; border: 1px solid #e2e8f0; background-color: #ffffff; color: #475569; cursor: pointer; transition: all 0.15s ease; white-space: nowrap; line-height: 1.1; } .gallery-set-main-btn:hover { border-color: #f59e0b; color: #d97706; background-color: #fef3c7; } .gallery-set-main-btn.active { background-color: #fef3c7; border-color: #f59e0b; color: #b45309; font-weight: 600; cursor: default; } /* Inline Add Photo Tile */ .gallery-add-tile { width: 76px; height: 102px; border: 1.5px dashed #cbd5e1; border-radius: 6px; background-color: #ffffff; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: all 0.15s ease; flex-shrink: 0; text-decoration: none; user-select: none; } .gallery-add-tile:hover, .gallery-add-tile.drag-active { border-color: var(--cargoo-primary); background-color: #eff6ff; transform: translateY(-1px); } .gallery-add-tile i { font-size: 1.25rem; color: var(--cargoo-primary); margin-bottom: 2px; } .gallery-add-tile span { font-size: 0.65rem; color: #64748b; font-weight: 600; } /* ========================================================================== ADMIN BACKEND DESIGN SYSTEM & OPERATIONAL UI ========================================================================== */ /* Admin Layout & Shell */ .admin-shell { background-color: #f8fafc; min-height: 100vh; } .admin-header { background-color: #0f172a; height: 60px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); position: sticky; top: 0; z-index: 1030; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1); } .admin-sidebar-nav { min-height: calc(100vh - 60px); background-color: #ffffff; border-right: 1px solid var(--cargoo-border); padding: 1rem 0.6rem; } .admin-sidebar-nav .nav-section-title { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #94a3b8; padding: 0.75rem 0.75rem 0.25rem; margin-top: 0.25rem; } .admin-sidebar-nav .nav-link { font-size: 0.84rem; font-weight: 500; color: #475569; padding: 0.45rem 0.75rem; border-radius: var(--cargoo-radius-sm); display: flex; align-items: center; gap: 0.65rem; transition: var(--cargoo-transition); position: relative; text-decoration: none; } .admin-sidebar-nav .nav-link i { font-size: 1rem; width: 1.25rem; text-align: center; color: #64748b; transition: var(--cargoo-transition); } .admin-sidebar-nav .nav-link:hover { background-color: #f1f5f9; color: #1e40af; } .admin-sidebar-nav .nav-link:hover i { color: #1e40af; } .admin-sidebar-nav .nav-link.active { background-color: #eff6ff; color: #1e40af; font-weight: 600; } .admin-sidebar-nav .nav-link.active i { color: #1e40af; } .admin-sidebar-nav .nav-link .badge-counter { margin-left: auto; font-size: 0.68rem; font-weight: 600; padding: 0.2rem 0.45rem; border-radius: var(--cargoo-radius-full); } /* Operational Metric & Summary Cards */ .admin-metric-card { background: #ffffff; border: 1px solid var(--cargoo-border); border-radius: var(--cargoo-radius-md); padding: 1.15rem 1.25rem; position: relative; transition: var(--cargoo-transition); } .admin-metric-card:hover { border-color: #cbd5e1; box-shadow: var(--cargoo-shadow-sm); } .admin-metric-icon-box { width: 40px; height: 40px; border-radius: var(--cargoo-radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; } .admin-metric-value { font-size: 1.5rem; font-weight: 700; color: #0f172a; line-height: 1.2; letter-spacing: -0.02em; } .admin-metric-sub { font-size: 0.76rem; color: #64748b; margin-top: 0.35rem; } /* High Density Operational Tables */ .admin-table-container { background: #ffffff; border: 1px solid var(--cargoo-border); border-radius: var(--cargoo-radius-md); overflow: hidden; box-shadow: var(--cargoo-shadow-xs); } .admin-table-header { padding: 0.9rem 1.25rem; background-color: #ffffff; border-bottom: 1px solid var(--cargoo-border); display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .admin-table { width: 100%; margin-bottom: 0; font-size: 0.835rem; border-collapse: separate; border-spacing: 0; } .admin-table th { background-color: #f8fafc; color: #475569; font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.65rem 0.9rem; border-bottom: 1px solid var(--cargoo-border); white-space: nowrap; vertical-align: middle; } .admin-table td { padding: 0.75rem 0.9rem; vertical-align: middle; border-bottom: 1px solid var(--cargoo-border); color: #1e293b; } .admin-table tbody tr:last-child td { border-bottom: none; } .admin-table tbody tr:hover td { background-color: #f8fafc; } /* Data Table Compact Item Cards for Mobile */ .admin-mobile-card { background: #ffffff; border: 1px solid var(--cargoo-border); border-radius: var(--cargoo-radius-md); padding: 1rem; margin-bottom: 0.75rem; box-shadow: var(--cargoo-shadow-xs); } /* Operation Status Badges */ .status-pill { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; font-weight: 600; padding: 0.25rem 0.6rem; border-radius: var(--cargoo-radius-full); line-height: 1; white-space: nowrap; } .status-pill.status-active, .status-pill.status-approved, .status-pill.status-completed, .status-pill.status-paid { background-color: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; } .status-pill.status-pending, .status-pill.status-pending_payment, .status-pill.status-reviewing { background-color: #fffbeb; color: #92400e; border: 1px solid #fde68a; } .status-pill.status-preparing, .status-pill.status-shipping, .status-pill.status-official { background-color: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; } .status-pill.status-suspended, .status-pill.status-rejected, .status-pill.status-cancelled, .status-pill.status-danger { background-color: #fef2f2; color: #991b1b; border: 1px solid #fecaca; } .status-pill.status-hidden, .status-pill.status-draft, .status-pill.status-disabled, .status-pill.status-secondary { background-color: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; } /* Filter Bar */ .admin-filter-bar { background-color: #ffffff; border: 1px solid var(--cargoo-border); border-radius: var(--cargoo-radius-md); padding: 0.9rem 1rem; margin-bottom: 1rem; box-shadow: var(--cargoo-shadow-xs); } /* Investigation & Detail Layout */ .admin-detail-summary-header { background: #ffffff; border: 1px solid var(--cargoo-border); border-radius: var(--cargoo-radius-md); padding: 1.25rem 1.5rem; margin-bottom: 1.25rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; } .admin-detail-card { background: #ffffff; border: 1px solid var(--cargoo-border); border-radius: var(--cargoo-radius-md); margin-bottom: 1.25rem; overflow: hidden; box-shadow: var(--cargoo-shadow-xs); } .admin-detail-card-header { padding: 0.85rem 1.25rem; background-color: #f8fafc; border-bottom: 1px solid var(--cargoo-border); font-size: 0.88rem; font-weight: 600; color: #1e293b; display: flex; align-items: center; justify-content: space-between; } .admin-detail-card-body { padding: 1.25rem; } /* Audit & Investigation Timeline */ .admin-timeline { position: relative; padding-left: 1.5rem; } .admin-timeline::before { content: ''; position: absolute; left: 0.45rem; top: 0.25rem; bottom: 0.25rem; width: 2px; background-color: #e2e8f0; } .admin-timeline-item { position: relative; padding-bottom: 1.25rem; } .admin-timeline-item:last-child { padding-bottom: 0; } .admin-timeline-point { position: absolute; left: -1.5rem; top: 0.15rem; width: 14px; height: 14px; border-radius: 50%; background-color: #ffffff; border: 2px solid #3b82f6; } /* Settings Form Sections */ .admin-setting-section { background: #ffffff; border: 1px solid var(--cargoo-border); border-radius: var(--cargoo-radius-md); margin-bottom: 1.25rem; overflow: hidden; } .admin-setting-row { padding: 1rem 1.25rem; border-bottom: 1px solid var(--cargoo-border); display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; } .admin-setting-row:last-child { border-bottom: none; } .admin-setting-info { flex: 1; } .admin-setting-title { font-size: 0.88rem; font-weight: 600; color: #0f172a; margin-bottom: 0.2rem; } .admin-setting-desc { font-size: 0.78rem; color: #64748b; margin-bottom: 0; } .admin-setting-control { width: 240px; flex-shrink: 0; } /* Responsive Utilities */ @media (max-width: 991.98px) { .admin-sidebar-nav { min-height: auto; border-right: none; padding: 0; } .admin-setting-row { flex-direction: column; gap: 0.75rem; } .admin-setting-control { width: 100%; } } /* ========================================================================== Auth Layout & Brand Styling (Compact Logo & Vertical Layout) ========================================================================== */ .auth-body { min-height: 100vh; background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%); overflow-x: hidden; max-width: 100vw; } .auth-header { background-color: #ffffff; border-bottom: 1px solid var(--cargoo-border); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); } .auth-container-compact, .auth-container-login, .auth-container-register { max-width: 400px; width: 100%; margin-left: auto; margin-right: auto; } .auth-card { width: 100%; background-color: #ffffff; border: 1px solid var(--cargoo-border); border-radius: 1rem; box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.07), 0 2px 6px -1px rgba(15, 23, 42, 0.03); transition: box-shadow 0.25s ease, border-color 0.25s ease; margin: 0 auto; } /* Compact Fixed Logo Container */ .logo-container { width: 180px; max-width: 45vw; margin: 0 auto 16px; } .logo-container img { display: block; width: 100%; height: auto; max-height: 110px; object-fit: contain; margin: 0 auto; transition: transform 0.2s ease; } .logo-container img:hover { transform: scale(1.02); } .auth-title { font-size: 1.25rem; font-weight: 700; color: var(--cargoo-text-main); letter-spacing: -0.01em; } .auth-subtitle { font-size: 0.84rem; color: var(--cargoo-text-muted); } .auth-footer { background-color: #ffffff; border-top: 1px solid var(--cargoo-border); } /* Mobile Adjustments for Auth Pages */ @media (max-width: 576px) { .logo-container { width: 140px; max-width: 40vw; margin: 0 auto 12px; } .logo-container img { max-height: 85px; } .auth-card { border-radius: 0.75rem; padding: 1.25rem 1rem !important; } .auth-title { font-size: 1.15rem; } .auth-subtitle { font-size: 0.8rem; } }
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 0.25 |
proxy
|
phpinfo
|
Settings