/* ========================================================================== Dokan Lite — vendor dashboard, store page and store listing in the Sey design system. Dokan's own markup and scripts are kept; only the skin changes, so permissions and workflows are untouched. ========================================================================== */ :root { --dokan-button-background-color: var(--c-ink); --dokan-button-hover-background-color: #000; --dokan-button-border-color: var(--c-ink); --dokan-button-text-color: #fff; --dokan-button-hover-text-color: #fff; --dokan-sidebar-background-color: var(--c-dark); --dokan-sidebar-hover-background-color: var(--c-dark-2); --dokan-sidebar-text-color: rgba(255, 255, 255, .8); --dokan-sidebar-hover-text-color: #fff; --colors-primary-50: #fffbea; --colors-primary-100: #fff4c2; --colors-primary-200: #ffeb8a; --colors-primary-400: #ffdc2e; --colors-primary-500: #1a1a1a; --colors-primary-600: #0a0a0a; --colors-primary-700: #0a0a0a; --colors-primary-800: #0a0a0a; --colors-primary-900: #000; } /* Dashboard shell ------------------------------------------------------------ */ .sey-dokan-dashboard .site-main { background: var(--c-paper); padding: 24px 0 48px; } .sey-dokan-dashboard .app-page { padding-top: 0; } .sey-dokan-dashboard .site-footer { margin-top: 0; } .dash-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; } .dash-head__store { display: flex; align-items: center; gap: 12px; } .dash-head__name { display: flex; align-items: center; gap: 6px; font-size: 20px; font-weight: 800; letter-spacing: -.4px; } .dash-head__actions { display: flex; gap: 8px; flex-wrap: wrap; } .dokan-dashboard-wrap, .dokan-dashboard .dokan-dashboard-wrap { display: grid !important; grid-template-columns: 240px minmax(0, 1fr) !important; gap: 24px; align-items: start; font-family: var(--f-sans); width: 100%; } .dokan-dashboard-wrap * { font-family: inherit; } .dokan-dashboard-wrap .fa, .dokan-dashboard-wrap .fas, .dokan-dashboard-wrap .far, .dokan-dashboard-wrap .fab, .dokan-dashboard-wrap [class^="dashicons"] { font-family: revert; } .dokan-dashboard-wrap .fas { font-family: "Font Awesome 5 Free", "Font Awesome 6 Free"; } .dokan-dashboard-wrap .fab { font-family: "Font Awesome 5 Brands", "Font Awesome 6 Brands"; } .dokan-dashboard-wrap .dashicons { font-family: dashicons; } .dokan-dash-sidebar { position: sticky; top: 16px; float: none !important; width: auto !important; margin: 0 !important; padding: 10px !important; border-radius: var(--r-xl); background: var(--c-dark) !important; overflow: hidden; } .dokan-dash-sidebar ul.dokan-dashboard-menu { margin: 0; padding: 0; background: transparent !important; } .dokan-dash-sidebar ul.dokan-dashboard-menu li { margin: 0; border: 0 !important; background: transparent !important; } .dokan-dash-sidebar ul.dokan-dashboard-menu li a { display: flex !important; align-items: center; gap: 10px; min-height: 42px; padding: 0 12px !important; border-radius: var(--r-md); color: rgba(255, 255, 255, .78) !important; font-size: 14px; font-weight: 500; text-decoration: none !important; } .dokan-dash-sidebar ul.dokan-dashboard-menu li a i { width: 18px; text-align: center; opacity: .9; } .dokan-dash-sidebar ul.dokan-dashboard-menu li:hover > a, .dokan-dash-sidebar ul.dokan-dashboard-menu li a:focus-visible { background: var(--c-dark-2) !important; color: #fff !important; } .dokan-dash-sidebar ul.dokan-dashboard-menu li.active > a { background: var(--c-accent) !important; color: var(--c-ink) !important; font-weight: 700; } .dokan-dash-sidebar ul.dokan-dashboard-menu li.active::after, .dokan-dash-sidebar ul.dokan-dashboard-menu li.active::before { display: none !important; } .dokan-dash-sidebar ul.dokan-dashboard-menu li.dokan-common-links { display: flex; justify-content: space-around; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.1) !important; } .dokan-dash-sidebar ul.dokan-dashboard-menu li.dokan-common-links a { min-height: 36px; justify-content: center; padding: 0 10px !important; } .dokan-dash-sidebar .navigation-submenu { background: transparent !important; padding-left: 26px !important; } .dokan-dashboard-content, .dokan-dashboard .dokan-dashboard-content { float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; min-width: 0; } .dokan-dashboard-content article, .dokan-dashboard-content .dashboard-content-area { width: 100%; } /* Headings & panels ------------------------------------------------------------ */ .dokan-dashboard-content .entry-title, .dokan-dashboard-header h1, .dokan-dashboard-content .dokan-dashboard-header .entry-title, .dokan-dashboard-content > article > header h1 { font-size: 26px !important; font-weight: 800 !important; letter-spacing: -.6px; color: var(--c-text) !important; margin: 0 0 16px !important; line-height: 1.3; } .dokan-dashboard-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; border: 0 !important; padding: 0 !important; } .dokan-panel, .dokan-dashboard-content .dashboard-widget, .dokan-dashboard-content .product-edit-container, .dokan-dashboard-content .dokan-settings-content, .dokan-dashboard-content .dokan-withdraw-content, .dokan-dashboard-content .dokan-orders-content, .dokan-dashboard-content .dokan-product-listing-area { background: var(--c-white); border: 1px solid var(--c-line) !important; border-radius: var(--r-xl) !important; box-shadow: none !important; } .dokan-dashboard-content .dashboard-widget { padding: 20px !important; margin-bottom: 16px !important; } .dokan-dashboard-content .dashboard-widget .widget-title { font-size: 15px !important; font-weight: 800; color: var(--c-text); border: 0 !important; padding: 0 0 12px !important; margin: 0 0 12px !important; border-bottom: 1px solid var(--c-line) !important; } .dokan-dashboard-content .dashboard-widget .widget-title i { margin-right: 6px; color: var(--c-muted); } .dokan-dashboard-content .dashboard-widget.big-counter ul { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 0; padding: 0; } .dokan-dashboard-content .dashboard-widget.big-counter li { width: auto !important; float: none !important; margin: 0 !important; padding: 16px !important; border: 1px solid var(--c-line) !important; border-radius: var(--r-lg); text-align: left !important; } .dokan-dashboard-content .dashboard-widget.big-counter .title { font-size: 12px !important; color: var(--c-muted) !important; } .dokan-dashboard-content .dashboard-widget.big-counter .count { font-size: 22px !important; font-weight: 800 !important; color: var(--c-text) !important; } .dokan-dashboard-content .dashboard-widget.big-counter .count .amount { color: var(--c-text) !important; } .dokan-dashboard-content .dashboard-widget ul.list-unstyled li { padding: 8px 0 !important; border-bottom: 1px solid var(--c-line-2); } .dokan-dashboard-content .dashboard-widget .dokan-orders-widget, .dokan-dashboard-content .dashboard-widget .dokan-products-widget { margin: 0; } .dokan-w8, .dokan-w4 { padding: 0 !important; } .dokan-dash-left, .dokan-dash-right { width: auto !important; float: none !important; } .dokan-dashboard-content .dokan-dash-left { margin-bottom: 0; } @media (min-width: 1200px) { .dokan-dashboard-content .dashboard-content-area > .dokan-w6, .dokan-dashboard-content .dokan-dash-left, .dokan-dashboard-content .dokan-dash-right { width: calc(50% - 8px) !important; float: left !important; } .dokan-dashboard-content .dokan-dash-left { margin-right: 16px; } } /* Buttons ------------------------------------------------------------------- */ .dokan-btn, .dokan-dashboard-content .dokan-btn, a.dokan-btn, input[type="submit"].dokan-btn, button.dokan-btn { display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 18px !important; border: 1.5px solid var(--c-line) !important; border-radius: var(--r-pill) !important; background: var(--c-white) !important; color: var(--c-text) !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1 !important; text-decoration: none !important; box-shadow: none !important; text-shadow: none !important; } .dokan-btn:hover { border-color: var(--c-text) !important; } .dokan-btn-theme, .dokan-btn.dokan-btn-theme, .dokan-btn-success, .dokan-add-new-product, input[type="submit"].dokan-btn-theme { background: var(--c-ink) !important; border-color: var(--c-ink) !important; color: #fff !important; } .dokan-btn-theme:hover, .dokan-btn-success:hover { background: #000 !important; border-color: #000 !important; color: #fff !important; } .dokan-btn-danger { background: var(--c-white) !important; border-color: #f2b8b2 !important; color: var(--c-sale) !important; } .dokan-btn-sm { min-height: 32px; padding: 0 12px !important; font-size: 12px !important; } .dokan-btn-lg { min-height: 48px; padding: 0 24px !important; font-size: 15px !important; } .dokan-add-new-product { background: var(--c-accent) !important; border-color: var(--c-accent) !important; color: var(--c-ink) !important; } .dokan-add-new-product:hover { background: var(--c-accent-hover) !important; border-color: var(--c-accent-hover) !important; color: var(--c-ink) !important; } /* Forms ---------------------------------------------------------------------- */ .dokan-form-control, .dokan-dashboard-content input[type="text"], .dokan-dashboard-content input[type="number"], .dokan-dashboard-content input[type="email"], .dokan-dashboard-content input[type="url"], .dokan-dashboard-content input[type="tel"], .dokan-dashboard-content input[type="password"], .dokan-dashboard-content input[type="date"], .dokan-dashboard-content select, .dokan-dashboard-content textarea { min-height: 42px !important; padding: 9px 12px !important; border: 1px solid var(--c-line) !important; border-radius: var(--r-md) !important; background-color: var(--c-white) !important; font-size: 14px !important; box-shadow: none !important; color: var(--c-text) !important; height: auto !important; } .dokan-dashboard-content input[type="checkbox"], .dokan-dashboard-content input[type="radio"] { min-height: 0 !important; height: 18px !important; width: 18px !important; padding: 0 !important; } .dokan-dashboard-content textarea { min-height: 96px !important; } .dokan-form-control:focus, .dokan-dashboard-content input:focus, .dokan-dashboard-content select:focus, .dokan-dashboard-content textarea:focus { border-color: var(--c-text) !important; box-shadow: 0 0 0 3px rgba(26,26,26,.08) !important; } .dokan-dashboard-content label, .dokan-dashboard-content .dokan-control-label { font-size: 14px; font-weight: 600; color: var(--c-text); } .dokan-form-group { margin-bottom: 16px !important; } .dokan-input-group-addon { border: 1px solid var(--c-line) !important; background: var(--c-surface) !important; border-radius: var(--r-md) 0 0 var(--r-md) !important; color: var(--c-text-3) !important; } .dokan-edit-row { background: var(--c-white); border: 1px solid var(--c-line) !important; border-radius: var(--r-xl); padding: 20px !important; margin-bottom: 16px !important; box-shadow: none !important; } .dokan-edit-row .dokan-section-heading { border: 0 !important; padding: 0 0 12px !important; margin-bottom: 12px !important; border-bottom: 1px solid var(--c-line) !important; } .dokan-edit-row .dokan-section-heading h2 { font-size: 16px !important; font-weight: 800 !important; color: var(--c-text) !important; } .dokan-edit-row .dokan-section-heading p { color: var(--c-muted); font-size: 13px; } .dokan-product-edit .dokan-product-edit-area, .dokan-product-edit-form .content-half-part { padding: 0; } .dokan-feat-image-upload, .dokan-product-gallery .add-product-images { border: 1.5px dashed var(--c-faint) !important; border-radius: var(--r-lg) !important; background: var(--c-paper) !important; } .sey-dokan-next-day label { display: flex; gap: 10px; align-items: center; font-weight: 500 !important; } /* Tables --------------------------------------------------------------------- */ .dokan-table, .dokan-dashboard-content table.dokan-table { width: 100%; border: 1px solid var(--c-line) !important; border-radius: var(--r-xl); border-collapse: separate !important; border-spacing: 0; overflow: hidden; background: var(--c-white); } .dokan-table > thead > tr > th, .dokan-table th { background: var(--c-paper) !important; color: var(--c-text-3) !important; font-size: 12px !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: .04em; border: 0 !important; border-bottom: 1px solid var(--c-line) !important; padding: 12px 14px !important; } .dokan-table > tbody > tr > td, .dokan-table td { border: 0 !important; border-bottom: 1px solid var(--c-line-2) !important; padding: 14px !important; font-size: 14px; vertical-align: middle !important; } .dokan-table > tbody > tr:last-child > td { border-bottom: 0 !important; } .dokan-table tr:hover td { background: #fcfcfc; } .dokan-table img { border-radius: var(--r-md); } .dokan-table .row-actions a { color: var(--c-text-3); } .dokan-label, .dokan-label-success, .dokan-label-warning, .dokan-label-danger, .dokan-label-info, .dokan-label-default { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: var(--r-pill); font-size: 11px; font-weight: 600; text-shadow: none; } .dokan-label-success { background: var(--c-ok-soft) !important; color: var(--c-ok-text) !important; } .dokan-label-warning { background: #fff4d1 !important; color: #8a6100 !important; } .dokan-label-danger { background: var(--c-error-soft) !important; color: var(--c-sale-text) !important; } .dokan-label-info, .dokan-label-primary { background: var(--c-info-soft) !important; color: var(--c-info) !important; } .dokan-label-default { background: var(--c-surface) !important; color: var(--c-text-3) !important; } /* Listing filters / tabs ------------------------------------------------------- */ .dokan-listing-filter, .dokan-product-listing .dokan-listing-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; } ul.subsubsub, .dokan-dashboard-content ul.subsubsub, ul.dokan-listing-filter.subsubsub, .dokan-order-filter-serach .dokan-left ul { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 16px !important; padding: 0 !important; list-style: none; } ul.subsubsub li, .dokan-listing-filter.subsubsub li { margin: 0 !important; padding: 0 !important; } ul.subsubsub li a, .dokan-listing-filter.subsubsub li a { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: var(--r-pill); background: var(--c-white); border: 1px solid var(--c-line); font-size: 13px; font-weight: 500; color: var(--c-text-3) !important; text-decoration: none !important; } ul.subsubsub li.active a, .dokan-listing-filter.subsubsub li.active a { background: var(--c-ink); border-color: var(--c-ink); color: #fff !important; } .dokan-dashboard-content .pagination-wrap ul.pagination { display: flex; gap: 6px; list-style: none; padding: 0; } .dokan-dashboard-content .pagination-wrap ul.pagination li a, .dokan-dashboard-content .pagination-wrap ul.pagination li span { display: grid; place-items: center; min-width: 36px; height: 36px; padding: 0 10px; border-radius: var(--r-pill); border: 1px solid var(--c-line); } .dokan-dashboard-content .pagination-wrap ul.pagination li.active span { background: var(--c-ink); color: #fff; border-color: var(--c-ink); } /* Alerts ------------------------------------------------------------------------ */ .dokan-alert { border-radius: var(--r-md) !important; border: 1px solid transparent !important; padding: 14px 16px !important; font-size: 14px; box-shadow: none !important; } .dokan-alert-success { background: var(--c-ok-tint) !important; border-color: #cfe9dc !important; color: var(--c-text) !important; } .dokan-alert-warning { background: var(--c-warn-soft) !important; border-color: #f3e3a1 !important; color: var(--c-text) !important; } .dokan-alert-danger { background: var(--c-error-soft) !important; border-color: #f6c8c3 !important; color: var(--c-text) !important; } .dokan-alert-info { background: var(--c-info-soft) !important; border-color: #cddcff !important; color: var(--c-text) !important; } .dokan-progress { height: 6px !important; border-radius: 6px !important; background: var(--c-line) !important; box-shadow: none !important; } .dokan-progress-bar { background: var(--c-accent) !important; box-shadow: none !important; color: transparent !important; } /* Order details ------------------------------------------------------------- */ .dokan-orders-area .dokan-order-left-content, .dokan-orders-area .dokan-order-right-content { padding: 0; } .dokan-panel-heading { background: var(--c-paper) !important; border-bottom: 1px solid var(--c-line) !important; font-weight: 700; border-radius: var(--r-xl) var(--r-xl) 0 0 !important; } .dokan-panel-body { padding: 16px !important; } .dokan-panel { margin-bottom: 16px !important; overflow: hidden; } /* React (new) dashboard routes ------------------------------------------------ */ #dokan-vendor-dashboard-root { font-family: var(--f-sans); } #dokan-vendor-dashboard-root .bg-white { border-radius: var(--r-xl); } /* Dashboard responsive ---------------------------------------------------------- */ @media (max-width: 1023px) { .dokan-dashboard-wrap, .dokan-dashboard .dokan-dashboard-wrap { grid-template-columns: minmax(0, 1fr) !important; } .dokan-dash-sidebar { position: static; padding: 6px !important; } .dokan-dash-sidebar ul.dokan-dashboard-menu { display: flex; overflow-x: auto; scrollbar-width: none; gap: 2px; } .dokan-dash-sidebar ul.dokan-dashboard-menu li { flex: none; } .dokan-dash-sidebar ul.dokan-dashboard-menu li a { white-space: nowrap; } .dokan-dash-sidebar ul.dokan-dashboard-menu li.dokan-common-links { margin: 0; padding: 0; border: 0 !important; } .dokan-dash-sidebar .navigation-submenu { display: none !important; } } @media (max-width: 767px) { .dokan-table thead { display: none; } .dokan-table, .dokan-table tbody, .dokan-table tr, .dokan-table td { display: block; width: 100% !important; } .dokan-table tr { border-bottom: 1px solid var(--c-line); padding: 8px 0; } .dokan-table td { border: 0 !important; padding: 6px 14px !important; } .dokan-table td[data-title]::before { content: attr(data-title); display: block; font-size: 11px; color: var(--c-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; } .dash-head__name { font-size: 18px; } } /* Store page --------------------------------------------------------------------- */ .store-hero { margin-top: 20px; } .store-hero__banner { height: 220px; border-radius: var(--r-xl) var(--r-xl) 0 0; background: linear-gradient(120deg, #1a1a1a 0%, #2c2c2c 55%, #4a4220 100%); background-size: cover; background-position: center; } .store-hero__body { display: flex; align-items: flex-end; gap: 20px; padding: 0 24px 20px; border: 1px solid var(--c-line); border-top: 0; border-radius: 0 0 var(--r-xl) var(--r-xl); flex-wrap: wrap; } .store-hero__avatar { display: grid; place-items: center; width: 104px; height: 104px; margin-top: -44px; border-radius: var(--r-xl); border: 4px solid var(--c-white); background: var(--c-ink); color: var(--c-accent); font-size: 32px; font-weight: 800; overflow: hidden; flex: none; } .store-hero__avatar img { width: 100%; height: 100%; object-fit: cover; } .store-hero__info { flex: 1; min-width: 220px; padding-top: 16px; } .store-hero__name { display: flex; align-items: center; gap: 8px; font-size: 30px; font-weight: 800; letter-spacing: -.7px; } .store-hero__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: 6px 0 0; padding: 0; font-size: 13px; color: var(--c-text-3); } .store-hero__meta li { display: flex; align-items: center; gap: 6px; } .store-hero__meta span { color: var(--c-muted); } .store-hero__tabs { margin-top: 12px; } @media (max-width: 639px) { .store-hero { padding-inline: 0; } .store-hero__banner { height: 140px; border-radius: 0; } .store-hero__body { border-radius: 0; border-left: 0; border-right: 0; padding: 0 16px 16px; } .store-hero__avatar { width: 80px; height: 80px; font-size: 24px; margin-top: -36px; } .store-hero__name { font-size: 22px; } } /* Store listing --------------------------------------------------------------- */ .store-list__lead { margin: -8px 0 20px; } #dokan-seller-listing-wrap { margin: 0; } .dokan-seller-search-form, #dokan-store-listing-filter-wrap { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 20px; } #dokan-store-listing-filter-wrap .left, #dokan-store-listing-filter-wrap .right { display: flex; gap: 8px; align-items: center; } #dokan-store-listing-filter-wrap .dokan-store-list-filter-button { border-radius: var(--r-pill) !important; } .store-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; } .store-card { position: relative; border: 1px solid var(--c-line); border-radius: var(--r-xl); overflow: hidden; background: var(--c-white); transition: border-color .15s, transform .15s; } .store-card:hover { border-color: var(--c-text); } .store-card__link { display: grid; color: inherit; } .store-card__link:hover { text-decoration: none; } .store-card__banner { height: 110px; background: linear-gradient(120deg, #1a1a1a 0%, #2c2c2c 55%, #4a4220 100%); background-size: cover; background-position: center; } .store-card__avatar { display: grid; place-items: center; width: 64px; height: 64px; margin: -32px 0 0 18px; border-radius: var(--r-lg); border: 3px solid var(--c-white); background: var(--c-ink); color: var(--c-accent); font-weight: 800; overflow: hidden; } .store-card__avatar img { width: 100%; height: 100%; object-fit: cover; } .store-card__body { display: grid; gap: 6px; padding: 10px 18px 0; } .store-card__name { display: flex; align-items: center; gap: 6px; font-size: 17px; font-weight: 800; letter-spacing: -.3px; } .store-card__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--c-muted); } .store-card__meta span { display: inline-flex; align-items: center; gap: 4px; } .store-card__cta { display: inline-flex; align-items: center; gap: 6px; padding: 14px 18px 18px; font-family: var(--f-mono); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; } @media (max-width: 1023px) { .store-cards { grid-template-columns: 1fr 1fr; } } @media (max-width: 639px) { .store-cards { grid-template-columns: minmax(0, 1fr); } } /* Order filters (date range + customer search) wrap on small screens. */ .dokan-order-filter-serach { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; } .dokan-order-filter-serach form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; float: none !important; max-width: 100%; } .dokan-order-filter-serach form > * { max-width: 100%; } .dokan-order-filter-serach .dokan-form-group { margin: 0 !important; } @media (max-width: 639px) { .dokan-order-filter-serach form, .dokan-order-filter-serach form .dokan-form-group, .dokan-order-filter-serach input, .dokan-order-filter-serach select { width: 100% !important; } } /* Keep Select2's hidden source