/* ============================================================= SLONSALE — WCFM Vendor Dashboard Overrides v2.0 Loaded ONLY on: WCFM vendor-dashboard pages Replaces all blue/default WCFM colours with Black & Gold Depends on: premium-design.css ============================================================= */ /* ── GLOBAL WCFM RESETS ────────────────────────────────────── */ .wc-frontend-manager, #wcfm-main-contentarea, .wcfm-container, .wcfm-content { background: var(--background) !important; color: var(--foreground) !important; } /* WCFM sidebar nav */ #wcfm_navigation_menus, .wcfm-main-menu { background: var(--card) !important; border-right: 1px solid var(--border) !important; } #wcfm_navigation_menus li a, .wcfm-main-menu li a { color: var(--muted-foreground) !important; transition: color var(--ease-base), background var(--ease-base); font-size: 0.875rem; } #wcfm_navigation_menus li a:hover, .wcfm-main-menu li a:hover, #wcfm_navigation_menus li.current a, .wcfm-main-menu li.current a { color: var(--primary) !important; background: rgba(201, 168, 76, 0.08) !important; } #wcfm_navigation_menus li .menu-icon, .wcfm-main-menu li .menu-icon { color: var(--primary) !important; } /* ── DASHBOARD CARDS / SUMMARIES ───────────────────────────── */ .wcfm_dashboard_summery, .wcfm-dashboard-stat, .wcfm_listing_heading_area, .wcfm-message { background: #000000 !important; /* Чёрный фон форм */ border: 1px solid var(--border) !important; border-radius: var(--radius) !important; color: var(--foreground) !important; } /* Stat numbers */ .wcfm_dashboard_summery .wcfm-tile, .wcfm-tile-count, .wcfm_stat_count { font-family: var(--font-mono) !important; color: var(--primary) !important; font-size: 1.75rem !important; font-weight: 500 !important; } .wcfm-tile-label, .wcfm_stat_label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted-foreground) !important; } /* Balance / earnings */ .wcfm_balance, .wcfm-withdrawal-amount, .wcfm_available_balance { font-family: var(--font-mono) !important; color: var(--primary) !important; } /* ── TABLES (Products, Orders, etc.) ───────────────────────── */ .wcfm-table-responsive table, table.wcfm_listing_table, .wcfm-listing-table { background: #000000 !important; /* Чёрный фон таблиц */ border: 1px solid var(--border) !important; border-radius: var(--radius) !important; border-collapse: separate !important; overflow: hidden; } .wcfm-listing-table th, table.wcfm_listing_table th, .wcfm-table-responsive table thead th { background: var(--secondary-bg) !important; color: var(--muted-foreground) !important; font-size: 0.7rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; border-bottom: 1px solid var(--border) !important; padding: 0.875rem 1rem !important; } .wcfm-listing-table td, table.wcfm_listing_table td, .wcfm-table-responsive table tbody td { background: transparent !important; color: var(--secondary-foreground) !important; border-bottom: 1px solid var(--border) !important; padding: 0.875rem 1rem !important; vertical-align: middle; } .wcfm-listing-table tr:last-child td { border-bottom: none !important; } .wcfm-listing-table tr:hover td { background: rgba(201, 168, 76, 0.04) !important; } /* Prices in tables */ .wcfm-listing-table .amount, table.wcfm_listing_table .amount, .wcfm_price { font-family: var(--font-mono) !important; color: var(--primary) !important; } /* Status badges in tables */ .wcfm_status_publish { color: var(--bull) !important; } .wcfm_status_draft { color: var(--muted-foreground) !important; } .wcfm_status_pending { color: var(--primary) !important; } .wcfm_status_trash { color: var(--bear) !important; } /* ── FORMS ─────────────────────────────────────────────────── */ .wcfm-form-group label, #wcfm_products_manage .wcfm_title { color: var(--primary) !important; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; } .wcfm-form-group input[type="text"], .wcfm-form-group input[type="number"], .wcfm-form-group input[type="email"], .wcfm-form-group textarea, .wcfm-form-group select, #wcfm_products_manage input[type="text"], #wcfm_products_manage textarea, #wcfm_products_manage select { background: #000000 !important; /* height removed — controlled per-context below */ padding: 2px 8px !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; color: #FFFFFF !important; font-family: var(--font-body) !important; } .wcfm-form-group input:focus, .wcfm-form-group textarea:focus, .wcfm-form-group select:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.15) !important; outline: none !important; } /* ── BUTTONS ───────────────────────────────────────────────── */ .wcfm_submit_button, .wcfm-btn, #wcfm_products_manage_form .wcfm_submit_button { background: var(--gold-gradient) !important; color: var(--primary-foreground) !important; border: none !important; border-radius: var(--radius) !important; font-weight: 600 !important; font-family: var(--font-body) !important; height: 40px !important; padding: 0 1.5rem !important; cursor: pointer; transition: filter var(--ease-fast), box-shadow var(--ease-base) !important; } .wcfm_submit_button:hover, .wcfm-btn:hover { filter: brightness(1.1) !important; box-shadow: var(--gold-glow) !important; } .wcfm-btn-sm { height: 34px !important; padding: 0 0.875rem !important; font-size: 0.8rem !important; } /* Edit / view action buttons */ .wcfm_listing_actions a { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--radius-sm); background: rgba(201, 168, 76, 0.08); border: 1px solid rgba(201, 168, 76, 0.2); color: var(--primary) !important; font-size: 0.8rem; transition: background var(--ease-fast), border-color var(--ease-fast); text-decoration: none; } .wcfm_listing_actions a:hover { background: rgba(201, 168, 76, 0.2); border-color: rgba(201, 168, 76, 0.5); } /* ── CHARTS ────────────────────────────────────────────────── */ .wcfm_chart, .wcfm-chart-wrapper { background: var(--card) !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; padding: 1.25rem !important; } /* Chart.js canvas overrides via CSS variables (JS picks these up) */ :root { --wcfm-chart-line: #C9A84C; --wcfm-chart-fill: rgba(201, 168, 76, 0.1); --wcfm-chart-grid: rgba(66, 56, 31, 0.5); --wcfm-chart-label: #999999; } /* ── HEADING AREAS ─────────────────────────────────────────── */ .wcfm-listing-filter-area, .wcfm_listing_heading_area { background: var(--card) !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; margin-bottom: 1rem !important; padding: 0.875rem 1.25rem !important; } .wcfm_listing_heading_area h2, .wcfm_listing_heading_area .wcfm_listing_heading { font-size: 0.75rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; color: var(--primary) !important; } /* ── NOTIFICATIONS ─────────────────────────────────────────── */ .wcfm-message.wcfm-success { background: rgba(20, 163, 71, 0.1) !important; border-left: 3px solid var(--bull) !important; color: var(--bull) !important; } .wcfm-message.wcfm-error { background: rgba(245, 61, 61, 0.1) !important; border-left: 3px solid var(--bear) !important; color: var(--bear) !important; } .wcfm-message.wcfm-info { background: rgba(201, 168, 76, 0.1) !important; border-left: 3px solid var(--primary) !important; color: var(--primary) !important; } /* ── RESPONSIVE ────────────────────────────────────────────── */ @media (max-width: 768px) { .wcfm-table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; } .wcfm_dashboard_summery { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } } @media (max-width: 480px) { .wcfm_dashboard_summery { grid-template-columns: 1fr; } } /* ============================================================= SLONSALE OVERRIDES: SELECTOR HEIGHTS & RESPONSIVE FILTERS ============================================================= */ /* ── WCFM Global Layout and Top Elements Responsiveness ── */ html body .wcfm-top-element-container { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; align-items: center !important; justify-content: flex-start !important; } html body .wcfm-top-element-container > * { float: none !important; margin: 0 !important; } html body .wcfm_products_menus, html body .wcfm_articles_menus { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; padding: 0 !important; margin: 0 !important; list-style: none !important; } html body .wcfm_products_menu_item, html body .wcfm_articles_menu_item { display: inline-block !important; float: none !important; margin: 0 !important; } /* ── Selector Heights (40px) & Center Text ── */ html body .wcfm_filters_wrap select, html body .wcfm_filters_wrap select.wcfm-select, html body .wcfm_filters_wrap .select2-container .select2-selection, html body .wcfm_filters_wrap .select2-container--default .select2-selection--single, html body .wcfm_filters_wrap span.select2-selection.select2-selection--single, html body .wcfm_products_filter_wrap select, html body .wcfm_products_filter_wrap select.wcfm-select, html body .wcfm_products_filter_wrap .select2-container .select2-selection, html body .wcfm_products_filter_wrap .select2-container--default .select2-selection--single, html body .wcfm_products_filter_wrap span.select2-selection.select2-selection--single, html body .wcfm_articles_filter_wrap select, html body .wcfm_articles_filter_wrap select.wcfm-select, html body .wcfm_articles_filter_wrap .select2-container .select2-selection, html body .wcfm_articles_filter_wrap .select2-container--default .select2-selection--single, html body .wcfm_articles_filter_wrap span.select2-selection.select2-selection--single, html body .wcfm-listing-filter-area select, html body .wcfm-listing-filter-area select.wcfm-select, html body .wcfm-listing-filter-area .select2-container .select2-selection, html body .wcfm-listing-filter-area .select2-container--default .select2-selection--single, html body .wcfm-listing-filter-area span.select2-selection.select2-selection--single, html body .wc-frontend-manager select, html body .wc-frontend-manager select.wcfm-select, html body .wc-frontend-manager .select2-container .select2-selection, html body .wc-frontend-manager .select2-container--default .select2-selection--single, html body .wc-frontend-manager span.select2-selection.select2-selection--single, html body .wcfm-collapse select, html body .wcfm-collapse select.wcfm-select, html body .wcfm-collapse .select2-container .select2-selection, html body .wcfm-collapse .select2-container--default .select2-selection--single, html body .wcfm-collapse span.select2-selection.select2-selection--single, body .wcfm-wrapper select, body .wcfm-wrapper select.wcfm-select, body .wcfm-wrapper .select2-container--default .select2-selection--single { height: 40px !important; min-height: 40px !important; line-height: 40px !important; vertical-align: middle !important; box-sizing: border-box !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* Specific Width 150px on Desktop */ @media (min-width: 769px) { html body .wcfm_filters_wrap select, html body .wcfm_filters_wrap select.wcfm-select, html body .wcfm_filters_wrap .select2-container, html body .wcfm_filters_wrap .select2-container .select2-selection, html body .wcfm_filters_wrap .select2-container--default .select2-selection--single, html body .wcfm_filters_wrap span.select2-selection.select2-selection--single, html body .wcfm_products_filter_wrap select, html body .wcfm_products_filter_wrap select.wcfm-select, html body .wcfm_products_filter_wrap .select2-container, html body .wcfm_products_filter_wrap .select2-container .select2-selection, html body .wcfm_products_filter_wrap .select2-container--default .select2-selection--single, html body .wcfm_products_filter_wrap span.select2-selection.select2-selection--single, html body .wcfm_articles_filter_wrap select, html body .wcfm_articles_filter_wrap select.wcfm-select, html body .wcfm_articles_filter_wrap .select2-container, html body .wcfm_articles_filter_wrap .select2-container .select2-selection, html body .wcfm_articles_filter_wrap .select2-container--default .select2-selection--single, html body .wcfm_articles_filter_wrap span.select2-selection.select2-selection--single { width: 150px !important; } } html body .wcfm_filters_wrap select, html body .wcfm_filters_wrap select.wcfm-select, html body .wcfm_products_filter_wrap select, html body .wcfm_products_filter_wrap select.wcfm-select, html body .wcfm_articles_filter_wrap select, html body .wcfm_articles_filter_wrap select.wcfm-select, html body .wcfm-listing-filter-area select, html body .wcfm-listing-filter-area select.wcfm-select, html body .wc-frontend-manager select, html body .wc-frontend-manager select.wcfm-select, html body .wcfm-collapse select, html body .wcfm-collapse select.wcfm-select, body .wcfm-wrapper select, body .wcfm-wrapper select.wcfm-select { text-align-last: center !important; /* Center standard select text */ text-align: center !important; padding: 0 24px 0 12px !important; } /* Center text in Select2 rendering with equal top/bottom spacing */ html body .wcfm_filters_wrap .select2-container .select2-selection__rendered, html body .wcfm_filters_wrap .select2-container--default .select2-selection--single .select2-selection__rendered, html body .wcfm_products_filter_wrap .select2-container .select2-selection__rendered, html body .wcfm_products_filter_wrap .select2-container--default .select2-selection--single .select2-selection__rendered, html body .wcfm_articles_filter_wrap .select2-container .select2-selection__rendered, html body .wcfm_articles_filter_wrap .select2-container--default .select2-selection--single .select2-selection__rendered, html body .wcfm-listing-filter-area .select2-container .select2-selection__rendered, html body .wcfm-listing-filter-area .select2-container--default .select2-selection--single .select2-selection__rendered, html body .wc-frontend-manager .select2-container .select2-selection__rendered, html body .wc-frontend-manager .select2-container--default .select2-selection--single .select2-selection__rendered, html body .wcfm-collapse .select2-container .select2-selection__rendered, html body .wcfm-collapse .select2-container--default .select2-selection--single .select2-selection__rendered, body .wcfm-wrapper .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 40px !important; height: 40px !important; text-align: center !important; padding-left: 12px !important; padding-right: 24px !important; display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; } html body .wcfm_filters_wrap .select2-container .select2-selection__arrow, html body .wcfm_filters_wrap .select2-container--default .select2-selection--single .select2-selection__arrow, html body .wcfm_products_filter_wrap .select2-container .select2-selection__arrow, html body .wcfm_products_filter_wrap .select2-container--default .select2-selection--single .select2-selection__arrow, html body .wcfm_articles_filter_wrap .select2-container .select2-selection__arrow, html body .wcfm_articles_filter_wrap .select2-container--default .select2-selection--single .select2-selection__arrow, html body .wcfm-listing-filter-area .select2-container .select2-selection__arrow, html body .wcfm-listing-filter-area .select2-container--default .select2-selection--single .select2-selection__arrow, html body .wc-frontend-manager .select2-container .select2-selection__arrow, html body .wc-frontend-manager .select2-container--default .select2-selection--single .select2-selection__arrow, html body .wcfm-collapse .select2-container .select2-selection__arrow, html body .wcfm-collapse .select2-container--default .select2-selection--single .select2-selection__arrow, body .wcfm-wrapper .select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px !important; display: flex !important; align-items: center !important; } /* Sibling input/search components alignment */ html body .wcfm_filters_wrap input[type="search"], html body .wcfm_filters_wrap input[type="text"], html body .wcfm_filters_wrap .dataTables_filter input, html body .wcfm_products_filter_wrap input[type="search"], html body .wcfm_products_filter_wrap input[type="text"], html body .wcfm_products_filter_wrap .dataTables_filter input, html body .wcfm_articles_filter_wrap input[type="search"], html body .wcfm_articles_filter_wrap input[type="text"], html body .wcfm_articles_filter_wrap .dataTables_filter input, html body .wcfm-listing-filter-area input[type="search"], html body .wcfm-listing-filter-area input[type="text"], html body .wcfm-listing-filter-area .dataTables_filter input, html body .wc-frontend-manager input[type="search"], html body .wc-frontend-manager input[type="text"], html body .wc-frontend-manager .dataTables_filter input, html body .wcfm-collapse input[type="search"], html body .wcfm-collapse input[type="text"], html body .wcfm-collapse .dataTables_filter input, body .wcfm-wrapper input[type="search"], body .wcfm-wrapper input[type="text"], body .wcfm-wrapper .dataTables_filter input { height: 40px !important; line-height: 40px !important; vertical-align: middle !important; box-sizing: border-box !important; padding: 0 12px !important; } /* ── Flex Wrapper for Filters ── */ html body .wcfm-filter-wrap, html body .wcfm_products_filter_wrap, html body .wcfm_articles_filter_wrap, html body .wcfm-listing-filter-area, html body .wcfm_filters_wrap, html body .wc-frontend-manager .wcfm-filter-wrap, html body .wc-frontend-manager .wcfm_products_filter_wrap, html body .wc-frontend-manager .wcfm_articles_filter_wrap, html body .wc-frontend-manager .wcfm-listing-filter-area, html body .wc-frontend-manager .wcfm_filters_wrap, html body .wcfm-collapse .wcfm-filter-wrap, html body .wcfm-collapse .wcfm_products_filter_wrap, html body .wcfm-collapse .wcfm_articles_filter_wrap, html body .wcfm-collapse .wcfm-listing-filter-area, html body .wcfm-collapse .wcfm_filters_wrap, body .wcfm-wrapper .wcfm-filter-wrap, body .wcfm-wrapper .wcfm_products_filter_wrap, body .wcfm-wrapper .wcfm_articles_filter_wrap, body .wcfm-wrapper .wcfm-listing-filter-area, body .wcfm-wrapper .wcfm_filters_wrap { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; align-items: center !important; justify-content: flex-start !important; } /* Clean up floats and margins */ html body .wcfm-filter-wrap > *, html body .wcfm_products_filter_wrap > *, html body .wcfm_articles_filter_wrap > *, html body .wcfm-listing-filter-area > *, html body .wcfm_filters_wrap > *, html body .wc-frontend-manager .wcfm-filter-wrap > *, html body .wc-frontend-manager .wcfm_products_filter_wrap > *, html body .wc-frontend-manager .wcfm_articles_filter_wrap > *, html body .wc-frontend-manager .wcfm-listing-filter-area > *, html body .wc-frontend-manager .wcfm_filters_wrap > *, html body .wcfm-collapse .wcfm-filter-wrap > *, html body .wcfm-collapse .wcfm_products_filter_wrap > *, html body .wcfm-collapse .wcfm_articles_filter_wrap > *, html body .wcfm-collapse .wcfm-listing-filter-area > *, html body .wcfm-collapse .wcfm_filters_wrap > *, body .wcfm-wrapper .wcfm-filter-wrap > *, body .wcfm-wrapper .wcfm_products_filter_wrap > *, body .wcfm-wrapper .wcfm_articles_filter_wrap > *, body .wcfm-wrapper .wcfm-listing-filter-area > *, body .wcfm-wrapper .wcfm_filters_wrap > * { float: none !important; margin: 0 !important; } /* Mobile & Tablet Responsiveness for Filters */ @media (max-width: 991px) { html body .wcfm-filter-wrap select, html body .wcfm-filter-wrap .select2-container, html body .wcfm_products_filter_wrap select, html body .wcfm_products_filter_wrap .select2-container, html body .wcfm_articles_filter_wrap select, html body .wcfm_articles_filter_wrap .select2-container, html body .wcfm-listing-filter-area select, html body .wcfm-listing-filter-area .select2-container, html body .wcfm_filters_wrap select, html body .wcfm_filters_wrap .select2-container, html body .wc-frontend-manager .wcfm-filter-wrap select, html body .wc-frontend-manager .wcfm-filter-wrap .select2-container, html body .wc-frontend-manager .wcfm_products_filter_wrap select, html body .wc-frontend-manager .wcfm_products_filter_wrap .select2-container, html body .wc-frontend-manager .wcfm_articles_filter_wrap select, html body .wc-frontend-manager .wcfm_articles_filter_wrap .select2-container, html body .wc-frontend-manager .wcfm-listing-filter-area select, html body .wc-frontend-manager .wcfm-listing-filter-area .select2-container, html body .wc-frontend-manager .wcfm_filters_wrap select, html body .wc-frontend-manager .wcfm_filters_wrap .select2-container, html body .wcfm-collapse .wcfm-filter-wrap select, html body .wcfm-collapse .wcfm-filter-wrap .select2-container, html body .wcfm-collapse .wcfm_products_filter_wrap select, html body .wcfm-collapse .wcfm_products_filter_wrap .select2-container, html body .wcfm-collapse .wcfm_articles_filter_wrap select, html body .wcfm-collapse .wcfm_articles_filter_wrap .select2-container, html body .wcfm-collapse .wcfm-listing-filter-area select, html body .wcfm-collapse .wcfm-listing-filter-area .select2-container, html body .wcfm-collapse .wcfm_filters_wrap select, html body .wcfm-collapse .wcfm_filters_wrap .select2-container, body .wcfm-wrapper .wcfm-filter-wrap select, body .wcfm-wrapper .wcfm-filter-wrap .select2-container, body .wcfm-wrapper .wcfm_products_filter_wrap select, body .wcfm-wrapper .wcfm_products_filter_wrap .select2-container, body .wcfm-wrapper .wcfm_articles_filter_wrap select, body .wcfm-wrapper .wcfm_articles_filter_wrap .select2-container, body .wcfm-wrapper .wcfm-listing-filter-area select, body .wcfm-wrapper .wcfm-listing-filter-area .select2-container, body .wcfm-wrapper .wcfm_filters_wrap select, body .wcfm-wrapper .wcfm_filters_wrap .select2-container { min-width: 130px !important; flex: 1 1 auto !important; } } @media (max-width: 768px) { html body .wcfm-filter-wrap, html body .wcfm_products_filter_wrap, html body .wcfm_articles_filter_wrap, html body .wcfm-listing-filter-area, html body .wcfm_filters_wrap, html body .wc-frontend-manager .wcfm-filter-wrap, html body .wc-frontend-manager .wcfm_products_filter_wrap, html body .wc-frontend-manager .wcfm_articles_filter_wrap, html body .wc-frontend-manager .wcfm-listing-filter-area, html body .wc-frontend-manager .wcfm_filters_wrap, html body .wcfm-collapse .wcfm-filter-wrap, html body .wcfm-collapse .wcfm_products_filter_wrap, html body .wcfm-collapse .wcfm_articles_filter_wrap, html body .wcfm-collapse .wcfm-listing-filter-area, html body .wcfm-collapse .wcfm_filters_wrap, body .wcfm-wrapper .wcfm-filter-wrap, body .wcfm-wrapper .wcfm_products_filter_wrap, body .wcfm-wrapper .wcfm_articles_filter_wrap, body .wcfm-wrapper .wcfm-listing-filter-area, body .wcfm-wrapper .wcfm_filters_wrap { gap: 8px !important; padding: 10px !important; flex-direction: row !important; /* Keep horizontal flow with wrapping */ } html body .wcfm-filter-wrap select, html body .wcfm-filter-wrap .select2-container, html body .wcfm_products_filter_wrap select, html body .wcfm_products_filter_wrap .select2-container, html body .wcfm_articles_filter_wrap select, html body .wcfm_articles_filter_wrap .select2-container, html body .wcfm-listing-filter-area select, html body .wcfm-listing-filter-area .select2-container, html body .wcfm_filters_wrap select, html body .wcfm_filters_wrap .select2-container, html body .wc-frontend-manager .wcfm-filter-wrap select, html body .wc-frontend-manager .wcfm-filter-wrap .select2-container, html body .wc-frontend-manager .wcfm_products_filter_wrap select, html body .wc-frontend-manager .wcfm_products_filter_wrap .select2-container, html body .wc-frontend-manager .wc-frontend-manager .wcfm_articles_filter_wrap select, html body .wc-frontend-manager .wc-frontend-manager .wcfm_articles_filter_wrap .select2-container, html body .wc-frontend-manager .wcfm-listing-filter-area select, html body .wc-frontend-manager .wcfm-listing-filter-area .select2-container, html body .wc-frontend-manager .wcfm_filters_wrap select, html body .wc-frontend-manager .wcfm_filters_wrap .select2-container, html body .wcfm-collapse .wcfm-filter-wrap select, html body .wcfm-collapse .wcfm-filter-wrap .select2-container, html body .wcfm-collapse .wcfm_products_filter_wrap select, html body .wcfm-collapse .wcfm_products_filter_wrap .select2-container, html body .wcfm-collapse .wcfm_articles_filter_wrap select, html body .wcfm-collapse .wcfm_articles_filter_wrap .select2-container, html body .wcfm-collapse .wcfm-listing-filter-area select, html body .wcfm-collapse .wcfm-listing-filter-area .select2-container, html body .wcfm-collapse .wcfm_filters_wrap select, html body .wcfm-collapse .wcfm_filters_wrap .select2-container, body .wcfm-wrapper .wcfm-filter-wrap select, body .wcfm-wrapper .wcfm-filter-wrap .select2-container, body .wcfm-wrapper .wcfm_products_filter_wrap select, body .wcfm-wrapper .wcfm_products_filter_wrap .select2-container, body .wcfm-wrapper .wcfm_articles_filter_wrap select, body .wcfm-wrapper .wcfm_articles_filter_wrap .select2-container, body .wcfm-wrapper .wcfm-listing-filter-area select, body .wcfm-wrapper .wcfm-listing-filter-area .select2-container, body .wcfm-wrapper .wcfm_filters_wrap select, body .wcfm-wrapper .wcfm_filters_wrap .select2-container { flex: 1 1 calc(50% - 5px) !important; max-width: 100% !important; width: auto !important; } html body .slon_bulk_edit, html body .slon_bulk_delete, html body .wcfm_submit_button, html body .dataTables_filter, html body .dataTables_length, html body .wc-frontend-manager .slon_bulk_edit, html body .wc-frontend-manager .slon_bulk_delete, html body .wc-frontend-manager .wcfm_submit_button, html body .wc-frontend-manager .dataTables_filter, html body .wc-frontend-manager .dataTables_length, html body .wcfm-collapse .slon_bulk_edit, html body .wcfm-collapse .slon_bulk_delete, html body .wcfm-collapse .wcfm_submit_button, html body .wcfm-collapse .dataTables_filter, html body .wcfm-collapse .dataTables_length, body .wcfm-wrapper .slon_bulk_edit, body .wcfm-wrapper .slon_bulk_delete, body .wcfm-wrapper .wcfm_submit_button, body .wcfm-wrapper .dataTables_filter, body .wcfm-wrapper .dataTables_length { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; } html body .dataTables_filter, html body .wc-frontend-manager .dataTables_filter, html body .wcfm-collapse .dataTables_filter, body .wcfm-wrapper .dataTables_filter { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; } html body .dataTables_filter input, html body .wc-frontend-manager .dataTables_filter input, html body .wcfm-collapse .dataTables_filter input, body .wcfm-wrapper .dataTables_filter input { flex-grow: 1 !important; width: auto !important; } /* Top element container mobile stack */ html body .wcfm-top-element-container { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; } html body .wcfm_products_menus, html body .wcfm_articles_menus { justify-content: center !important; width: 100% !important; } html body #add_new_product_dashboard, html body #add_new_article_dashboard, html body .add_new_wcfm_ele_dashboard { width: 100% !important; text-align: center !important; display: flex !important; justify-content: center !important; align-items: center !important; height: 40px !important; } /* Sidebar collapsing wrapper */ html body #wcfm_wrapper, html body .wc-frontend-manager { display: flex !important; flex-direction: column !important; } html body #wcfm_navigation_menus, html body .wcfm-main-menu { width: 100% !important; float: none !important; border-right: none !important; border-bottom: 1px solid var(--border) !important; margin-bottom: 15px !important; } } @media (max-width: 480px) { html body .wcfm-filter-wrap select, html body .wcfm-filter-wrap .select2-container, html body .wcfm_products_filter_wrap select, html body .wcfm_products_filter_wrap .select2-container, html body .wcfm_articles_filter_wrap select, html body .wcfm_articles_filter_wrap .select2-container, html body .wcfm-listing-filter-area select, html body .wcfm-listing-filter-area .select2-container, html body .wcfm_filters_wrap select, html body .wcfm_filters_wrap .select2-container, html body .wc-frontend-manager .wcfm-filter-wrap select, html body .wc-frontend-manager .wcfm-filter-wrap .select2-container, html body .wc-frontend-manager .wcfm_products_filter_wrap select, html body .wc-frontend-manager .wcfm_products_filter_wrap .select2-container, html body .wc-frontend-manager .wcfm_articles_filter_wrap select, html body .wc-frontend-manager .wcfm_articles_filter_wrap .select2-container, html body .wc-frontend-manager .wcfm-listing-filter-area select, html body .wc-frontend-manager .wcfm-listing-filter-area .select2-container, html body .wc-frontend-manager .wcfm_filters_wrap select, html body .wc-frontend-manager .wcfm_filters_wrap .select2-container, html body .wcfm-collapse .wcfm-filter-wrap select, html body .wcfm-collapse .wcfm-filter-wrap .select2-container, html body .wcfm-collapse .wcfm_products_filter_wrap select, html body .wcfm-collapse .wcfm_products_filter_wrap .select2-container, html body .wcfm-collapse .wcfm_articles_filter_wrap select, html body .wcfm-collapse .wcfm_articles_filter_wrap .select2-container, html body .wcfm-collapse .wcfm-listing-filter-area select, html body .wcfm-collapse .wcfm-listing-filter-area .select2-container, html body .wcfm-collapse .wcfm_filters_wrap select, html body .wcfm-collapse .wcfm_filters_wrap .select2-container, body .wcfm-wrapper .wcfm-filter-wrap select, body .wcfm-wrapper .wcfm-filter-wrap .select2-container, body .wcfm-wrapper .wcfm_products_filter_wrap select, body .wcfm-wrapper .wcfm_products_filter_wrap .select2-container, body .wcfm-wrapper .wcfm_articles_filter_wrap select, body .wcfm-wrapper .wcfm_articles_filter_wrap .select2-container, body .wcfm-wrapper .wcfm-listing-filter-area select, body .wcfm-wrapper .wcfm-listing-filter-area .select2-container, body .wcfm-wrapper .wcfm_filters_wrap select, body .wcfm-wrapper .wcfm_filters_wrap .select2-container { flex: 1 1 100% !important; width: 100% !important; } } /* ================================================================= IRON-CLAD SELECT2 HEIGHT FIX — uses element tags for max specificity Targets exact DOM structure from screenshots: div.wcfm_products_filter_wrap.wcfm_filters_wrap > span.select2.select2-container.select2-container--default > span.selection > span.select2-selection.select2-selection--single ================================================================= */ /* 1. The outer select2 container span */ html body div.wcfm_filters_wrap span.select2.select2-container, html body div.wcfm_filters_wrap span.select2-container.select2-container--default, html body div.wcfm_products_filter_wrap span.select2.select2-container, html body div.wcfm_products_filter_wrap span.select2-container.select2-container--default, html body div.wcfm_articles_filter_wrap span.select2.select2-container, html body div.wcfm_articles_filter_wrap span.select2-container.select2-container--default { height: 40px !important; min-height: 40px !important; } /* 2. The inner .selection wrapper span */ html body div.wcfm_filters_wrap span.select2-container span.selection, html body div.wcfm_products_filter_wrap span.select2-container span.selection, html body div.wcfm_articles_filter_wrap span.select2-container span.selection { height: 40px !important; display: block !important; } /* 3. The actual visible box: span.select2-selection--single */ html body div.wcfm_filters_wrap span.select2-selection.select2-selection--single, html body div.wcfm_products_filter_wrap span.select2-selection.select2-selection--single, html body div.wcfm_articles_filter_wrap span.select2-selection.select2-selection--single, html body div.wcfm_filters_wrap span.select2-container--default span.select2-selection--single, html body div.wcfm_products_filter_wrap span.select2-container--default span.select2-selection--single, html body div.wcfm_articles_filter_wrap span.select2-container--default span.select2-selection--single { height: 40px !important; min-height: 40px !important; line-height: 40px !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; } /* 4. The rendered text inside */ html body div.wcfm_filters_wrap span.select2-selection__rendered, html body div.wcfm_products_filter_wrap span.select2-selection__rendered, html body div.wcfm_articles_filter_wrap span.select2-selection__rendered { height: 40px !important; line-height: 40px !important; display: flex !important; align-items: center !important; padding: 0 32px 0 12px !important; box-sizing: border-box !important; } /* 5. The dropdown arrow */ html body div.wcfm_filters_wrap span.select2-selection__arrow, html body div.wcfm_products_filter_wrap span.select2-selection__arrow, html body div.wcfm_articles_filter_wrap span.select2-selection__arrow { height: 40px !important; top: 0 !important; display: flex !important; align-items: center !important; } /* 6. Desktop width: 150px */ @media (min-width: 769px) { html body div.wcfm_filters_wrap span.select2.select2-container, html body div.wcfm_filters_wrap span.select2-container.select2-container--default, html body div.wcfm_products_filter_wrap span.select2.select2-container, html body div.wcfm_products_filter_wrap span.select2-container.select2-container--default, html body div.wcfm_articles_filter_wrap span.select2.select2-container, html body div.wcfm_articles_filter_wrap span.select2-container.select2-container--default { width: 150px !important; } } /* 7. Native