File manager - Edit - /home/webapp69.cm.in.th/u69319090039/Shop39/public/public/css/style.css
Back
/* Production Multi-Vendor Marketplace Custom Styling */ /* Added Font Kanit */ @import url('https://fonts.googleapis.com/css2?family=Kanit:wght@500&display=swap'); body { font-family: 'Kanit', sans-serif; } @import url('theme.css'); :root { --bs-primary-rgb: 13, 110, 253; --app-bg: var(--color-background); --app-card-shadow: var(--shadow-sm); --app-card-hover-shadow: var(--shadow-md); } body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background-color: var(--app-bg); } /* Category Section */ .category-grid-container { display: grid; grid-template-columns: repeat(8, 1fr); gap: 12px; margin-bottom: 2rem; } @media (max-width: 991.98px) { .category-grid-container { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 575.98px) { .category-grid-container { grid-template-columns: repeat(2, 1fr); } } /* Category Circle Card Item */ .category-box-card { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: #ffffff; border: 1px solid #f1f5f9; padding: 8px; /* reduced padding */ text-decoration: none; color: #334155; transition: all 0.2s ease-in-out; height: 100px; /* fixed height 100px (40% downsized from 140px) */ border-radius: 12px; /* border radius 12px */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04); /* light shadow */ } .category-box-card:hover { background: #f8fafc; color: #0d6efd; transform: translateY(-2px); /* hover effect */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08); } /* Circular Icon Container */ .category-box-icon { width: 32px; /* icon size 32px */ height: 32px; /* icon size 32px */ border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; margin-bottom: 6px; flex-shrink: 0; transition: transform 0.2s ease; } .category-box-card:hover .category-box-icon { transform: scale(1.05); } /* Category Title */ .category-box-title { font-size: 13px; /* font-size 13px */ font-weight: 500; line-height: 1.3; color: #334155; text-align: center; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; height: 2.6em; word-break: break-word; } .category-box-card:hover .category-box-title { color: #0d6efd; } /* Header Styles */ .navbar { height: 72px; /* Header height 72px */ display: flex; align-items: center; } .navbar .container { height: 100%; display: flex; align-items: center; } #navbarMain { height: 100%; align-items: center; } .search-bar-header { width: 550px !important; /* Search bar width 550px */ max-width: 100%; } .navbar-nav { display: flex; flex-direction: row !important; align-items: center !important; gap: 24px !important; /* Menu items gap 24px */ } .navbar-nav .nav-item { display: flex; align-items: center; height: 100%; } .navbar-nav .nav-link { white-space: nowrap !important; /* White space nowrap to keep in single line */ display: inline-flex; align-items: center; } /* Floating Navigation Arrows */ .cat-scroll-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; background: #ffffff; border: 1px solid #cbd5e1; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: #334155; z-index: 10; cursor: pointer; transition: all 0.2s ease-in-out; opacity: 0; visibility: hidden; pointer-events: none; } .cat-scroll-btn.show { opacity: 1; visibility: visible; pointer-events: auto; } .cat-scroll-btn:hover { background: #ffffff; color: #0d6efd; border-color: #0d6efd; box-shadow: 0 6px 16px rgba(13, 110, 253, 0.25); transform: translateY(-50%) scale(1.08); } .cat-scroll-prev { left: -16px; } .cat-scroll-next { right: -16px; } /* Theme updates */ .btn-white { background-color: #fff; border: 1px solid var(--color-border); color: var(--color-primary); transition: background-color 0.2s ease, color 0.2s ease; } .btn-white:hover { background-color: var(--color-primary); color: #fff; } .btn-primary-burgundy { background-color: var(--color-primary); border: none; color: #fff; } .btn-primary-burgundy:hover { background-color: var(--color-primary-hover); } .btn-outline-burgundy { background: transparent; color: var(--color-primary); border: 1px solid var(--color-primary); } .btn-outline-burgundy:hover { background-color: var(--color-primary); color: #fff; } .hover-primary:hover { color: var(--color-primary-hover) !important; } @keyframes fadeInLightbox { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } } #lightboxPrev, #lightboxNext { opacity: 0.75; transition: opacity 0.18s ease, transform 0.18s ease; } #lightboxPrev:hover, #lightboxNext:hover { opacity: 1; transform: scale(1.12); } /* ==== Custom Map Styles ==== */ .custom-marker .pin { background: #ff9800; /* warm soft orange */ width: 30px; height: 30px; border-radius: 15px 15px 0 0; transform: rotate(45deg); position: relative; box-shadow: 0 2px 4px rgba(0,0,0,0.3); } .custom-marker .pin i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg); color: #fff; font-size: 14px; } .leaflet-popup-custom .leaflet-popup-content-wrapper { border-radius: 12px; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.2); } .leaflet-popup-custom .leaflet-popup-tip { background: #fff; } /* Inline Store Map expand/collapse */ .map-collapsed { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; } .map-expanded { max-height: 500px; /* adjust as needed */ overflow: hidden; transition: max-height 0.4s ease; }
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 0.23 |
proxy
|
phpinfo
|
Settings