/** * WooPlus Design System — BUNDLED entry point (GENERATED). * * THE single CSS file enqueued by the plugin. Generated by * _andbuild/build_design_system.sh — do NOT hand-edit. * Edit the source children under assets/design-system/ then re-run the * build and bump WooPlus_Design_System::VERSION. */ /* ================= tokens.css ================= */ /** * WooPlus Design System — Core Tokens * Inspired by Horizon UI, adapted for Bootstrap 5 RTL + Persian content. * * RULES: * - This is the ONLY file allowed to define :root variables. * - Modules MUST consume var(--wooplus-*); never hardcode colors/sizes. * - Brand color is overridable from Settings (see settings.php). * - Dark mode lives in tokens.dark.css. */ :root { /* ===================================================================== * BRAND PALETTE (Horizon-derived, user-overridable) * The user can override --wooplus-brand-500 from Settings; the rest * are auto-derived OR fallback to these defaults. * ===================================================================== */ --wooplus-brand-50: #E9E3FF; --wooplus-brand-100: #C0B8FE; --wooplus-brand-200: #A195FD; --wooplus-brand-300: #8171FC; --wooplus-brand-400: #7551FF; --wooplus-brand-500: #157a41; /* primary */ --wooplus-brand-600: #3311DB; --wooplus-brand-700: #2111A5; --wooplus-brand-800: #190793; --wooplus-brand-900: #11047A; /* ===================================================================== * NEUTRAL PALETTE — Navy/Gray (Horizon signature) * ===================================================================== */ --wooplus-navy-50: #d0dcfb; --wooplus-navy-100: #aac0fe; --wooplus-navy-200: #a3b9f8; --wooplus-navy-300: #728fea; --wooplus-navy-400: #3652ba; --wooplus-navy-500: #1b3bbb; --wooplus-navy-600: #24388a; --wooplus-navy-700: #1B254B; /* main text */ --wooplus-navy-800: #111c44; /* dark surface */ --wooplus-navy-900: #0b1437; /* darkest bg */ --wooplus-gray-50: #f8f9fa; --wooplus-gray-100: #edf2f7; --wooplus-gray-200: #e9ecef; --wooplus-gray-300: #cbd5e0; --wooplus-gray-400: #a0aec0; --wooplus-gray-500: #adb5bd; --wooplus-gray-600: #a3aed0; /* mute text */ --wooplus-gray-700: #707eae; /* mid text */ --wooplus-gray-800: #252f40; --wooplus-gray-900: #1b2559; /* ===================================================================== * STATE COLORS * ===================================================================== */ --wooplus-success: #05CD99; --wooplus-success-light: rgba(5, 205, 153, 0.10); --wooplus-success-dark: #01B574; --wooplus-warning: #FFCE20; --wooplus-warning-light: rgba(255, 206, 32, 0.12); --wooplus-warning-dark: #E1A60B; --wooplus-danger: #EE5D50; --wooplus-danger-light: rgba(238, 93, 80, 0.10); --wooplus-danger-dark: #D64940; --wooplus-info: #6AD2FF; --wooplus-info-light: rgba(106, 210, 255, 0.12); --wooplus-info-dark: #3DAFE5; /* ===================================================================== * SEMANTIC SURFACES (theme-aware references) * Modules use these — NOT hex codes. * ===================================================================== */ --wooplus-bg: #F4F7FE; /* page background */ --wooplus-bg-soft: #ffffff; /* slightly softer alt */ --wooplus-surface: #ffffff; /* card surface */ --wooplus-surface-2: #F4F7FE; /* nested surface (input bg) */ --wooplus-surface-hover:#F8FAFD; /* row hover */ --wooplus-text: #1B254B; /* primary text */ --wooplus-text-2: #2B3674; /* h-tags */ --wooplus-text-mute: #707EAE; /* secondary text */ --wooplus-text-faint: #A3AED0; /* tertiary text / placeholders */ --wooplus-border: #E9EDF7; /* card borders, dividers */ --wooplus-border-strong:#D5DCEB; /* form borders */ --wooplus-divider: #F4F7FE; /* light dividers */ --wooplus-overlay: rgba(11, 20, 55, 0.4); /* modal backdrop */ /* ===================================================================== * GEOMETRY * ===================================================================== */ --wooplus-radius-xs: 4px; --wooplus-radius-sm: 8px; --wooplus-radius: 12px; --wooplus-radius-md: 16px; --wooplus-radius-lg: 20px; /* signature Horizon radius */ --wooplus-radius-xl: 30px; --wooplus-radius-full: 9999px; /* ===================================================================== * SHADOWS — Horizon's signature soft, blue-tinted shadows. * ===================================================================== */ --wooplus-shadow-xs: 0 1px 2px 0 rgba(112, 144, 176, 0.06); --wooplus-shadow-sm: 0 2px 4px -1px rgba(112, 144, 176, 0.08); --wooplus-shadow: 0 4px 12px rgba(112, 144, 176, 0.10); --wooplus-shadow-md: 0 8px 20px rgba(112, 144, 176, 0.12); --wooplus-shadow-lg: 14px 17px 40px 4px rgba(112, 144, 176, 0.18); --wooplus-shadow-xl: 45px 76px 113px 7px rgba(112, 144, 176, 0.12); --wooplus-shadow-glow: 0 0 40px rgba(66, 42, 251, 0.15); --wooplus-shadow-card: 14px 17px 40px 4px rgba(112, 144, 176, 0.10); /* ===================================================================== * TYPOGRAPHY * ===================================================================== */ --wooplus-font-body: 'Vazirmatn', 'IRANSansX', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --wooplus-font-display: var(--wooplus-font-body); --wooplus-font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, 'Cascadia Code', 'SFMono-Regular', monospace; /* Persian-tuned letter spacing (Vazirmatn benefits from less negative tracking than DM Sans) */ --wooplus-tracking-tight: -0.3px; --wooplus-tracking: 0; --wooplus-tracking-wide: 0.4px; /* Line heights */ --wooplus-lh-tight: 1.25; --wooplus-lh: 1.5; --wooplus-lh-loose: 1.75; /* Font sizes — Persian text needs ~10% larger sizes than Latin */ --wooplus-text-xs: 11px; --wooplus-text-sm: 13px; --wooplus-text-base: 14px; --wooplus-text-md: 15px; --wooplus-text-lg: 17px; --wooplus-text-xl: 20px; --wooplus-text-2xl: 24px; --wooplus-text-3xl: 30px; --wooplus-text-4xl: 36px; --wooplus-text-5xl: 48px; /* ===================================================================== * SPACING — 4px base, 8-point grid * ===================================================================== */ --wooplus-space-0: 0; --wooplus-space-1: 4px; --wooplus-space-2: 8px; --wooplus-space-3: 12px; --wooplus-space-4: 16px; --wooplus-space-5: 20px; --wooplus-space-6: 24px; --wooplus-space-7: 28px; --wooplus-space-8: 32px; --wooplus-space-10: 40px; --wooplus-space-12: 48px; --wooplus-space-16: 64px; --wooplus-space-20: 80px; /* ===================================================================== * MOTION * ===================================================================== */ --wooplus-ease: cubic-bezier(0.4, 0, 0.2, 1); --wooplus-ease-out: cubic-bezier(0, 0, 0.2, 1); --wooplus-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --wooplus-duration-fast: 150ms; --wooplus-duration: 250ms; --wooplus-duration-slow: 400ms; --wooplus-transition: all var(--wooplus-duration) var(--wooplus-ease); --wooplus-transition-fast: all var(--wooplus-duration-fast) var(--wooplus-ease); /* ===================================================================== * Z-INDEX SCALE * ===================================================================== */ --wooplus-z-base: 1; --wooplus-z-raised: 10; --wooplus-z-sticky: 100; --wooplus-z-overlay: 1000; --wooplus-z-modal: 1050; --wooplus-z-popover: 1100; --wooplus-z-tooltip: 1200; --wooplus-z-toast: 1300; } /* Reduced motion preference */ @media (prefers-reduced-motion: reduce) { :root { --wooplus-duration-fast: 1ms; --wooplus-duration: 1ms; --wooplus-duration-slow: 1ms; } } /* ================= tokens.dark.css ================= */ /** * WooPlus Design System — Dark Mode Tokens * * SCOPED TO THE DASHBOARD ONLY. Dark is owned exclusively by the dashboard's * own toggle, which adds body.wooplus-dark (admin.js). Keying these overrides * on that class — instead of the old global [data-wooplus-theme="dark"] — makes * it IMPOSSIBLE for any other WooPlus/WP admin page to inherit the dark palette * (a stale saved choice or an OS "auto" preference used to leak dark onto every * page via these --wooplus-* variables, which the sidebar chrome also consumes). * * Strategy: ONLY override semantic surface variables. Brand palette * stays consistent. Shadows are reduced (dark surfaces don't need * elevation shadows; they need tinted glow instead). */ body.wooplus-dark { /* Surfaces */ --wooplus-bg: #0B1437; --wooplus-bg-soft: #111c44; --wooplus-surface: #111c44; --wooplus-surface-2: #1B254B; --wooplus-surface-hover:#1B254B; /* Text */ --wooplus-text: #FFFFFF; --wooplus-text-2: #E0E5F2; --wooplus-text-mute: #A3AED0; --wooplus-text-faint: #707EAE; /* Borders */ --wooplus-border: rgba(255, 255, 255, 0.10); --wooplus-border-strong:rgba(255, 255, 255, 0.18); --wooplus-divider: rgba(255, 255, 255, 0.06); /* Overlay (slightly stronger in dark) */ --wooplus-overlay: rgba(0, 0, 0, 0.6); /* Shadows — much subtler in dark mode (glow not elevation) */ --wooplus-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.20); --wooplus-shadow-sm: 0 2px 4px -1px rgba(0, 0, 0, 0.25); --wooplus-shadow: 0 4px 12px rgba(0, 0, 0, 0.30); --wooplus-shadow-md: 0 8px 20px rgba(0, 0, 0, 0.35); --wooplus-shadow-lg: 0 14px 40px rgba(0, 0, 0, 0.40); --wooplus-shadow-xl: 0 30px 80px rgba(0, 0, 0, 0.45); --wooplus-shadow-glow: 0 0 40px rgba(66, 42, 251, 0.30); --wooplus-shadow-card: 0 4px 12px rgba(0, 0, 0, 0.30); /* State color tints — slightly washed out in dark for less visual punch */ --wooplus-success-light: rgba(5, 205, 153, 0.16); --wooplus-warning-light: rgba(255, 206, 32, 0.18); --wooplus-danger-light: rgba(238, 93, 80, 0.16); --wooplus-info-light: rgba(106, 210, 255, 0.18); } /* NOTE: the old "@media (prefers-color-scheme: dark) [data-wooplus-theme=auto]" * block was removed on purpose. Honoring the OS dark preference darkened every * admin page for merchants whose browser/OS runs in dark mode — but dark is a * dashboard-only feature here. The dashboard's own toggle (body.wooplus-dark) * is the single source of truth above; there is no OS-driven dark. */ /* ================= base.css ================= */ /** * WooPlus Design System — Reset & Base * * Scoped to .wooplus-app to avoid affecting: * - WordPress core admin UI (unless user opts in via "skin WP admin") * - WooCommerce admin pages (unless overlapping) * - Other plugins * * The .wooplus-app class is added to: * - All WooPlus admin page wrappers (replaces .wooplus-wrap legacy) * - The body when "skin WP admin" is enabled * - The body of my-account when "skin my-account" is enabled * - Login/register pages */ .wooplus-app, .wooplus-app *, .wooplus-app *::before, .wooplus-app *::after { box-sizing: border-box; } .wooplus-app { font-family: var(--wooplus-font-body); font-size: var(--wooplus-text-base); line-height: var(--wooplus-lh); color: var(--wooplus-text); background-color: var(--wooplus-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: 'ss01', 'ss02', 'ss03'; letter-spacing: var(--wooplus-tracking-tight); } /* When .wooplus-app is combined with WP's .wrap class on the same element * (the Phase 9 lightweight-port pattern), apply consistent padding and a * comfortable max-width so all module pages share the same viewport * geometry. Modules that nest a separate .wooplus-page container will * override these. */ .wrap.wooplus-app { padding: var(--wooplus-space-6); /* v2.24.1 — was max-width:1600px; merchant requested full-width * because admin dashboard widgets had wasted horizontal space on * larger screens. Setting to 100% lets the page use the full * #wpcontent area, matching native WP admin pages. */ max-width: 100%; margin: 20px 0 0; background: var(--wooplus-bg); min-height: calc(100vh - 32px); } @media (max-width: 768px) { .wrap.wooplus-app { padding: var(--wooplus-space-4); margin-top: 10px; } } /* Headings */ .wooplus-app h1, .wooplus-app h2, .wooplus-app h3, .wooplus-app h4, .wooplus-app h5, .wooplus-app h6 { font-family: var(--wooplus-font-display); color: var(--wooplus-text-2); font-weight: 700; line-height: var(--wooplus-lh-tight); letter-spacing: var(--wooplus-tracking-tight); margin: 0 0 var(--wooplus-space-3); } .wooplus-app h1 { font-size: var(--wooplus-text-4xl); font-weight: 800; } .wooplus-app h2 { font-size: var(--wooplus-text-3xl); font-weight: 800; } .wooplus-app h3 { font-size: var(--wooplus-text-2xl); font-weight: 700; } .wooplus-app h4 { font-size: var(--wooplus-text-xl); font-weight: 700; } .wooplus-app h5 { font-size: var(--wooplus-text-lg); font-weight: 600; } .wooplus-app h6 { font-size: var(--wooplus-text-md); font-weight: 600; } /* Paragraphs */ .wooplus-app p { margin: 0 0 var(--wooplus-space-3); color: var(--wooplus-text-mute); line-height: var(--wooplus-lh); } /* Links */ .wooplus-app a { color: var(--wooplus-brand-500); text-decoration: none; transition: var(--wooplus-transition-fast); } .wooplus-app a:hover { color: var(--wooplus-brand-700); } /* Strong / em — Persian text needs explicit weights */ .wooplus-app strong, .wooplus-app b { font-weight: 700; color: var(--wooplus-text); } .wooplus-app em, .wooplus-app i { font-style: normal; color: var(--wooplus-text-2); font-weight: 600; } /* Code & monospace — for technical inputs */ .wooplus-app code, .wooplus-app kbd, .wooplus-app pre, .wooplus-app samp { font-family: var(--wooplus-font-mono); font-size: 0.9em; } .wooplus-app code { background: var(--wooplus-surface-2); color: var(--wooplus-brand-700); padding: 2px 6px; border-radius: var(--wooplus-radius-xs); font-weight: 500; direction: ltr; display: inline-block; } .wooplus-app pre { background: var(--wooplus-surface-2); border: 1px solid var(--wooplus-border); border-radius: var(--wooplus-radius); padding: var(--wooplus-space-4); overflow-x: auto; direction: ltr; text-align: left; font-size: var(--wooplus-text-sm); line-height: var(--wooplus-lh); } /* HR */ .wooplus-app hr { margin: var(--wooplus-space-6) 0; border: 0; border-top: 1px solid var(--wooplus-divider); } /* Tabular figures for numbers — critical for financial data */ .wooplus-app .wooplus-tabular, .wooplus-app .wooplus-num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; } /* LTR-direction utility (for English content like API keys, codes) */ .wooplus-app .wooplus-ltr { direction: ltr; text-align: left; unicode-bidi: embed; } .wooplus-app .wooplus-rtl { direction: rtl; text-align: right; } /* WordPress core override — only inside .wooplus-app, hide WP notices that don't fit */ .wooplus-app .notice, .wooplus-app .updated, .wooplus-app .error, .wooplus-app .update-nag { border-radius: var(--wooplus-radius); border-inline-start-width: 4px; border-inline-start-style: solid; box-shadow: var(--wooplus-shadow-xs); background: var(--wooplus-surface); padding: var(--wooplus-space-3) var(--wooplus-space-4); margin: var(--wooplus-space-4) 0; color: var(--wooplus-text); } .wooplus-app .notice-success, .wooplus-app .updated { border-inline-start-color: var(--wooplus-success); } .wooplus-app .notice-warning { border-inline-start-color: var(--wooplus-warning); } .wooplus-app .notice-error, .wooplus-app .error { border-inline-start-color: var(--wooplus-danger); } .wooplus-app .notice-info { border-inline-start-color: var(--wooplus-info); } /* Selection */ .wooplus-app ::selection { background: var(--wooplus-brand-100); color: var(--wooplus-brand-900); } /* Scrollbar — subtle, branded */ .wooplus-app *::-webkit-scrollbar { width: 10px; height: 10px; } .wooplus-app *::-webkit-scrollbar-track { background: transparent; } .wooplus-app *::-webkit-scrollbar-thumb { background: var(--wooplus-border); border-radius: var(--wooplus-radius-full); border: 2px solid transparent; background-clip: padding-box; } .wooplus-app *::-webkit-scrollbar-thumb:hover { background: var(--wooplus-text-faint); border: 2px solid transparent; background-clip: padding-box; } /* Focus visible — accessible */ .wooplus-app :focus-visible { outline: 2px solid var(--wooplus-brand-500); outline-offset: 2px; border-radius: var(--wooplus-radius-xs); } /* Disable old WP admin inline styles that leak in */ .wooplus-app input[type="text"], .wooplus-app input[type="email"], .wooplus-app input[type="number"], .wooplus-app input[type="password"], .wooplus-app input[type="search"], .wooplus-app input[type="tel"], .wooplus-app input[type="url"], .wooplus-app input[type="date"], .wooplus-app textarea, .wooplus-app select { box-shadow: none !important; min-height: auto; } /* ================= layout/grid.css ================= */ /** * WooPlus Design System — Smart Grid * * Solves the "row-cols-lg-6 = cramped columns" problem identified in audit. * * KEY DIFFERENCE from Bootstrap's row/col: * - Use auto-fit grids with minmax() to PREVENT cramping * - Each grid has a min-width — items reflow before getting too narrow * * Three grid families: * .wooplus-grid — auto-fit, generic * .wooplus-stack — vertical stack with consistent gap * .wooplus-cluster — horizontal cluster, wraps when needed * * The auto-fit grid means: "Fit as many columns as possible, but never narrower * than X px." This is the OPPOSITE of fixed col-lg-6 which forces 6 columns * regardless of content. */ /* =================================================================== * AUTO-FIT GRID (the main pattern) * =================================================================== */ .wooplus-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--wooplus-space-5); } /* === Min-width variants — pick based on content type === */ .wooplus-grid--xs { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } .wooplus-grid--sm { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .wooplus-grid--md { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* default */ } .wooplus-grid--lg { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); } .wooplus-grid--xl { grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); } /* Fixed-column variants — for layouts where we want exactly N columns * regardless of viewport width down to a breakpoint. Used by Audience * Analytics charts grid. */ .wooplus-grid--3col { grid-template-columns: repeat(3, 1fr); } .wooplus-grid--2col { grid-template-columns: repeat(2, 1fr); } .wooplus-grid--4col { grid-template-columns: repeat(4, 1fr); } @media (max-width: 1024px) { .wooplus-grid--3col, .wooplus-grid--4col { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .wooplus-grid--2col, .wooplus-grid--3col, .wooplus-grid--4col { grid-template-columns: 1fr; } } /* === Gap variants === */ .wooplus-grid--gap-sm { gap: var(--wooplus-space-3); } .wooplus-grid--gap-md { gap: var(--wooplus-space-5); } /* default */ .wooplus-grid--gap-lg { gap: var(--wooplus-space-6); } .wooplus-grid--gap-xl { gap: var(--wooplus-space-8); } /* === Fixed-column grids (use sparingly — auto-fit is preferred) === */ .wooplus-grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wooplus-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .wooplus-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 768px) { .wooplus-grid--cols-2, .wooplus-grid--cols-3, .wooplus-grid--cols-4 { grid-template-columns: 1fr; } } @media (min-width: 768px) and (max-width: 1100px) { .wooplus-grid--cols-3, .wooplus-grid--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* === Asymmetric (split with sidebar) === */ .wooplus-grid--split-25-75 { grid-template-columns: 1fr 3fr; } .wooplus-grid--split-33-67 { grid-template-columns: 1fr 2fr; } .wooplus-grid--split-67-33 { grid-template-columns: 2fr 1fr; } .wooplus-grid--split-75-25 { grid-template-columns: 3fr 1fr; } @media (max-width: 992px) { .wooplus-grid--split-25-75, .wooplus-grid--split-33-67, .wooplus-grid--split-67-33, .wooplus-grid--split-75-25 { grid-template-columns: 1fr; } } /* === Span utilities (for items inside a grid) === */ .wooplus-span-2 { grid-column: span 2; } .wooplus-span-3 { grid-column: span 3; } .wooplus-span-4 { grid-column: span 4; } .wooplus-span-full { grid-column: 1 / -1; } @media (max-width: 768px) { .wooplus-span-2, .wooplus-span-3, .wooplus-span-4 { grid-column: span 1; } } /* =================================================================== * STACK (vertical layout) * =================================================================== */ .wooplus-stack { display: flex; flex-direction: column; gap: var(--wooplus-space-4); } .wooplus-stack--sm { gap: var(--wooplus-space-2); } .wooplus-stack--md { gap: var(--wooplus-space-4); } /* default */ .wooplus-stack--lg { gap: var(--wooplus-space-6); } .wooplus-stack--xl { gap: var(--wooplus-space-8); } /* =================================================================== * CLUSTER (horizontal layout, wraps) * =================================================================== */ .wooplus-cluster { display: flex; flex-wrap: wrap; gap: var(--wooplus-space-3); align-items: center; } .wooplus-cluster--start { justify-content: flex-start; } .wooplus-cluster--center { justify-content: center; } .wooplus-cluster--end { justify-content: flex-end; } .wooplus-cluster--between { justify-content: space-between; } .wooplus-cluster--top { align-items: flex-start; } .wooplus-cluster--bottom { align-items: flex-end; } .wooplus-cluster--gap-sm { gap: var(--wooplus-space-2); } .wooplus-cluster--gap-md { gap: var(--wooplus-space-3); } /* default */ .wooplus-cluster--gap-lg { gap: var(--wooplus-space-5); } /* =================================================================== * PAGE CONTAINER (the main wrapper for admin pages) * =================================================================== */ .wooplus-page { padding: var(--wooplus-space-6); max-width: 1600px; margin: 0 auto; } @media (max-width: 768px) { .wooplus-page { padding: var(--wooplus-space-4); } } .wooplus-page__header { display: flex; align-items: center; justify-content: space-between; gap: var(--wooplus-space-4); margin-bottom: var(--wooplus-space-6); flex-wrap: wrap; } .wooplus-page__title { margin: 0; font-size: var(--wooplus-text-3xl); font-weight: 800; color: var(--wooplus-text-2); letter-spacing: var(--wooplus-tracking-tight); } .wooplus-page__subtitle { margin: 4px 0 0; font-size: var(--wooplus-text-md); color: var(--wooplus-text-mute); font-weight: 500; } .wooplus-page__actions { display: flex; align-items: center; gap: var(--wooplus-space-2); flex-wrap: wrap; } /* =================================================================== * ADMIN SHELL (sidebar + main when "skin WP admin" is enabled) * =================================================================== */ .wooplus-shell { display: flex; min-height: 100vh; background: var(--wooplus-bg); } .wooplus-shell__main { flex: 1; padding-inline-start: 290px; min-width: 0; } @media (max-width: 992px) { .wooplus-shell__main { padding-inline-start: 0; } } .wooplus-shell__content { max-width: 1600px; margin: 0 auto; padding: 0 var(--wooplus-space-6) var(--wooplus-space-8); } @media (max-width: 768px) { .wooplus-shell__content { padding: 0 var(--wooplus-space-4) var(--wooplus-space-6); } } /* =================================================================== * SECTION (a labeled section within a page) * =================================================================== */ .wooplus-section { margin-bottom: var(--wooplus-space-8); } .wooplus-section__header { display: flex; align-items: center; justify-content: space-between; gap: var(--wooplus-space-3); margin-bottom: var(--wooplus-space-4); flex-wrap: wrap; } .wooplus-section__title { margin: 0; font-size: var(--wooplus-text-xl); font-weight: 700; color: var(--wooplus-text-2); letter-spacing: var(--wooplus-tracking-tight); display: flex; align-items: center; gap: var(--wooplus-space-2); } /* The vertical accent bar before section title (Horizon signature) */ .wooplus-section__title::before { content: ''; width: 4px; height: 22px; background: linear-gradient(180deg, var(--wooplus-brand-500) 0%, var(--wooplus-brand-300) 100%); border-radius: var(--wooplus-radius-full); } .wooplus-section__subtitle { margin: 4px 0 0; font-size: var(--wooplus-text-sm); color: var(--wooplus-text-mute); font-weight: 500; padding-inline-start: 14px; } /* ================= components/card.css ================= */ /** * WooPlus Design System — Card * * The atomic primitive. Used by: * - .wooplus-widget (KPI tile) * - .wooplus-chart-card (chart container) * - .wooplus-table-card (table wrapper) * - .wooplus-form-card (form section) * * Variants: * .wooplus-card — base * .wooplus-card--padded — adds 24px padding * .wooplus-card--padded-lg — adds 32px padding * .wooplus-card--flat — no shadow (for nested cards) * .wooplus-card--glass — glassmorphism (use sparingly) * .wooplus-card--bordered — 1px border instead of shadow * .wooplus-card--brand — brand-tinted gradient * .wooplus-card--interactive — hover lift effect * * Header/body/footer slots: * .wooplus-card__header * .wooplus-card__body * .wooplus-card__footer */ .wooplus-card { position: relative; display: flex; flex-direction: column; background: var(--wooplus-surface); border-radius: var(--wooplus-radius-lg); box-shadow: var(--wooplus-shadow-card); overflow: hidden; transition: var(--wooplus-transition); z-index: var(--wooplus-z-base); } [data-wooplus-theme="dark"] .wooplus-card, .wooplus-app[data-wooplus-theme="dark"] .wooplus-card { background: var(--wooplus-surface); box-shadow: var(--wooplus-shadow-card); } /* === Variants === */ .wooplus-card--padded { padding: var(--wooplus-space-6); } .wooplus-card--padded-lg { padding: var(--wooplus-space-8); } .wooplus-card--padded-sm { padding: var(--wooplus-space-4); } .wooplus-card--flat { box-shadow: none; } .wooplus-card--bordered { box-shadow: none; border: 1px solid var(--wooplus-border); } .wooplus-card--glass { background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.6); } [data-wooplus-theme="dark"] .wooplus-card--glass { background: rgba(17, 28, 68, 0.55); border: 1px solid rgba(255, 255, 255, 0.08); } .wooplus-card--brand { background: linear-gradient(135deg, var(--wooplus-brand-500) 0%, var(--wooplus-brand-700) 100%); color: #ffffff; } .wooplus-card--brand h1, .wooplus-card--brand h2, .wooplus-card--brand h3, .wooplus-card--brand h4, .wooplus-card--brand h5, .wooplus-card--brand h6, .wooplus-card--brand p, .wooplus-card--brand .wooplus-card__title, .wooplus-card--brand .wooplus-card__subtitle { color: #ffffff; } .wooplus-card--brand .wooplus-card__subtitle { color: rgba(255, 255, 255, 0.85); } .wooplus-card--interactive { cursor: pointer; } .wooplus-card--interactive:hover { transform: translateY(-2px); box-shadow: var(--wooplus-shadow-md); } /* Top accent bar — appears on hover for interactive cards */ .wooplus-card--accent::before { content: ''; position: absolute; top: 0; right: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--wooplus-brand-500) 0%, var(--wooplus-info) 100%); opacity: 0; transition: opacity var(--wooplus-duration) var(--wooplus-ease); } .wooplus-card--accent:hover::before { opacity: 1; } /* === Card slots === */ .wooplus-card__header { display: flex; align-items: center; justify-content: space-between; gap: var(--wooplus-space-3); padding: var(--wooplus-space-5) var(--wooplus-space-6); border-bottom: 1px solid var(--wooplus-divider); flex-wrap: wrap; } .wooplus-card__header-left { display: flex; align-items: center; gap: var(--wooplus-space-3); min-width: 0; flex: 1; } .wooplus-card__header-right { display: flex; align-items: center; gap: var(--wooplus-space-2); flex-shrink: 0; } .wooplus-card__title { margin: 0; font-size: var(--wooplus-text-lg); font-weight: 700; color: var(--wooplus-text-2); line-height: var(--wooplus-lh-tight); letter-spacing: var(--wooplus-tracking-tight); } .wooplus-card__subtitle { margin: 4px 0 0; font-size: var(--wooplus-text-sm); color: var(--wooplus-text-mute); font-weight: 500; } .wooplus-card__body { padding: var(--wooplus-space-5) var(--wooplus-space-6); flex: 1; } .wooplus-card__body--tight { padding: var(--wooplus-space-4); } .wooplus-card__body--loose { padding: var(--wooplus-space-8); } .wooplus-card__body--no-padding { padding: 0; } .wooplus-card__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--wooplus-space-3); padding: var(--wooplus-space-4) var(--wooplus-space-6); border-top: 1px solid var(--wooplus-divider); background: var(--wooplus-surface-2); flex-wrap: wrap; } [data-wooplus-theme="dark"] .wooplus-card__footer { background: rgba(0, 0, 0, 0.15); } /* === Card Menu (the "..." action button in header) === */ .wooplus-card__menu { position: relative; } .wooplus-card__menu-trigger { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; background: var(--wooplus-surface-2); color: var(--wooplus-text-mute); border-radius: var(--wooplus-radius-sm); cursor: pointer; transition: var(--wooplus-transition-fast); } .wooplus-card__menu-trigger:hover { background: var(--wooplus-brand-500); color: #ffffff; } [data-wooplus-theme="dark"] .wooplus-card__menu-trigger { background: rgba(255, 255, 255, 0.05); } [data-wooplus-theme="dark"] .wooplus-card__menu-trigger:hover { background: var(--wooplus-brand-500); } /* === Card Pill (small status indicator inside header) === */ .wooplus-card__pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--wooplus-surface-2); border-radius: var(--wooplus-radius-full); font-size: var(--wooplus-text-xs); font-weight: 600; color: var(--wooplus-text-mute); } .wooplus-card__pill--success { background: var(--wooplus-success-light); color: var(--wooplus-success-dark); } .wooplus-card__pill--warning { background: var(--wooplus-warning-light); color: var(--wooplus-warning-dark); } .wooplus-card__pill--danger { background: var(--wooplus-danger-light); color: var(--wooplus-danger-dark); } .wooplus-card__pill--info { background: var(--wooplus-info-light); color: var(--wooplus-info-dark); } .wooplus-card__pill--brand { background: var(--wooplus-brand-50); color: var(--wooplus-brand-700); } [data-wooplus-theme="dark"] .wooplus-card__pill--brand { background: rgba(66, 42, 251, 0.20); color: var(--wooplus-brand-200); } /* When a header has only a title (no menu), keep alignment clean */ .wooplus-card__header:has(.wooplus-card__title:only-child) { justify-content: flex-start; } /* ================= components/widget.css ================= */ /** * WooPlus Design System — Widget (KPI Tile) * * The MOST-USED compound component in WooPlus — replaces the 11 cramped * KPI cards in product-analytics that suffer from row-cols-lg-6. * * Layout: horizontal — icon-circle on the start, label/value on the rest. * Variants: spark (with sparkline), trend (with delta), big (large value). * * Usage: *
*
* *
*
*
سفارش‌ها
*
۲۴٫۸ میلیون ﷼
*
+12% از دیروز
*
*
*/ .wooplus-widget { position: relative; display: flex; align-items: center; gap: var(--wooplus-space-4); background: var(--wooplus-surface); border-radius: var(--wooplus-radius-lg); box-shadow: var(--wooplus-shadow-card); padding: var(--wooplus-space-5); min-height: 92px; transition: var(--wooplus-transition); overflow: hidden; } .wooplus-widget--interactive { cursor: pointer; } .wooplus-widget--interactive:hover { transform: translateY(-2px); box-shadow: var(--wooplus-shadow-md); } /* === Icon — the circular tinted bg === */ .wooplus-widget__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; min-width: 56px; border-radius: var(--wooplus-radius-md); background: var(--wooplus-brand-50); color: var(--wooplus-brand-500); font-size: 24px; flex-shrink: 0; transition: var(--wooplus-transition); } [data-wooplus-theme="dark"] .wooplus-widget__icon { background: rgba(66, 42, 251, 0.18); color: var(--wooplus-brand-200); } .wooplus-widget--interactive:hover .wooplus-widget__icon { background: linear-gradient(135deg, var(--wooplus-brand-500) 0%, var(--wooplus-brand-300) 100%); color: #ffffff; transform: scale(1.05) rotate(-3deg); box-shadow: var(--wooplus-shadow-sm); } /* Icon color variants */ .wooplus-widget__icon--success { background: var(--wooplus-success-light); color: var(--wooplus-success-dark); } .wooplus-widget__icon--warning { background: var(--wooplus-warning-light); color: var(--wooplus-warning-dark); } .wooplus-widget__icon--danger { background: var(--wooplus-danger-light); color: var(--wooplus-danger-dark); } .wooplus-widget__icon--info { background: var(--wooplus-info-light); color: var(--wooplus-info-dark); } .wooplus-widget--interactive:hover .wooplus-widget__icon--success { background: linear-gradient(135deg, var(--wooplus-success) 0%, var(--wooplus-success-dark) 100%); color: #ffffff; } .wooplus-widget--interactive:hover .wooplus-widget__icon--warning { background: linear-gradient(135deg, var(--wooplus-warning) 0%, var(--wooplus-warning-dark) 100%); color: #ffffff; } .wooplus-widget--interactive:hover .wooplus-widget__icon--danger { background: linear-gradient(135deg, var(--wooplus-danger) 0%, var(--wooplus-danger-dark) 100%); color: #ffffff; } .wooplus-widget--interactive:hover .wooplus-widget__icon--info { background: linear-gradient(135deg, var(--wooplus-info) 0%, var(--wooplus-info-dark) 100%); color: #ffffff; } /* === Body === */ .wooplus-widget__body { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; flex: 1; } .wooplus-widget__label { font-size: var(--wooplus-text-sm); font-weight: 500; color: var(--wooplus-text-mute); line-height: 1.3; } .wooplus-widget__value { font-size: var(--wooplus-text-2xl); font-weight: 800; color: var(--wooplus-text-2); line-height: 1.2; font-variant-numeric: tabular-nums; letter-spacing: var(--wooplus-tracking-tight); } .wooplus-widget__unit { font-size: var(--wooplus-text-sm); font-weight: 500; color: var(--wooplus-text-mute); margin-inline-start: 4px; } .wooplus-widget__delta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--wooplus-text-xs); font-weight: 700; margin-top: 2px; } .wooplus-widget__delta--up { color: var(--wooplus-success-dark); } .wooplus-widget__delta--up::before { content: '▲'; font-size: 9px; } .wooplus-widget__delta--down { color: var(--wooplus-danger-dark); } .wooplus-widget__delta--down::before { content: '▼'; font-size: 9px; } .wooplus-widget__delta--neutral { color: var(--wooplus-text-mute); } /* === Big variant — featured KPI === */ .wooplus-widget--big { flex-direction: column; align-items: flex-start; min-height: 140px; padding: var(--wooplus-space-6); } .wooplus-widget--big .wooplus-widget__icon { width: 48px; height: 48px; min-width: 48px; font-size: 22px; margin-bottom: var(--wooplus-space-2); } .wooplus-widget--big .wooplus-widget__value { font-size: var(--wooplus-text-4xl); font-weight: 800; } /* === Spark variant — KPI with embedded sparkline === */ .wooplus-widget--spark { flex-direction: column; align-items: stretch; min-height: 160px; padding: var(--wooplus-space-5); } .wooplus-widget--spark .wooplus-widget__top { display: flex; align-items: center; gap: var(--wooplus-space-3); margin-bottom: var(--wooplus-space-3); } .wooplus-widget--spark .wooplus-widget__chart { flex: 1; min-height: 48px; margin-top: var(--wooplus-space-2); } /* === Brand variant — uses brand gradient === */ .wooplus-widget--brand { background: linear-gradient(135deg, var(--wooplus-brand-500) 0%, var(--wooplus-brand-700) 100%); color: #ffffff; } .wooplus-widget--brand .wooplus-widget__icon { background: rgba(255, 255, 255, 0.18); color: #ffffff; } .wooplus-widget--brand .wooplus-widget__label, .wooplus-widget--brand .wooplus-widget__unit { color: rgba(255, 255, 255, 0.85); } .wooplus-widget--brand .wooplus-widget__value { color: #ffffff; } .wooplus-widget--brand .wooplus-widget__delta { color: rgba(255, 255, 255, 0.95); } /* Decorative gradient blob (subtle, in the corner) */ .wooplus-widget--brand::before { content: ''; position: absolute; top: -50%; right: -50%; width: 100%; height: 100%; background: radial-gradient(circle at center, rgba(255, 255, 255, 0.10) 0%, transparent 70%); pointer-events: none; } /* ================= components/button.css ================= */ /** * WooPlus Design System — Button * * Variants: * .wooplus-btn — base * .wooplus-btn--primary — brand-colored solid (default action) * .wooplus-btn--secondary — neutral solid * .wooplus-btn--outline — bordered, transparent bg * .wooplus-btn--ghost — no border, no bg, color-only * .wooplus-btn--soft — tinted bg (subtle) * .wooplus-btn--success/danger/warning/info — semantic * .wooplus-btn--link — looks like a link * * Sizes: * .wooplus-btn--xs — 28px tall * .wooplus-btn--sm — 36px tall * .wooplus-btn--md (default) — 44px tall * .wooplus-btn--lg — 52px tall * * Modifiers: * .wooplus-btn--icon — square (icon-only) * .wooplus-btn--block — full width * .wooplus-btn--loading — shows spinner */ .wooplus-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--wooplus-space-2); font-family: inherit; font-size: var(--wooplus-text-sm); font-weight: 600; line-height: 1; letter-spacing: var(--wooplus-tracking-tight); white-space: nowrap; text-decoration: none; cursor: pointer; user-select: none; border: 1px solid transparent; border-radius: var(--wooplus-radius); padding: 0 var(--wooplus-space-5); height: 44px; background: transparent; color: var(--wooplus-text); transition: var(--wooplus-transition-fast); position: relative; overflow: hidden; } .wooplus-btn:hover { transform: translateY(-1px); } .wooplus-btn:active { transform: translateY(0); } .wooplus-btn:focus-visible { outline: 2px solid var(--wooplus-brand-500); outline-offset: 2px; } .wooplus-btn:disabled, .wooplus-btn.is-disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; } /* === Sizes === */ .wooplus-btn--xs { height: 28px; padding: 0 var(--wooplus-space-3); font-size: var(--wooplus-text-xs); border-radius: var(--wooplus-radius-sm); } .wooplus-btn--sm { height: 36px; padding: 0 var(--wooplus-space-4); font-size: var(--wooplus-text-sm); } .wooplus-btn--lg { height: 52px; padding: 0 var(--wooplus-space-6); font-size: var(--wooplus-text-md); border-radius: var(--wooplus-radius-md); } /* === Variants === */ .wooplus-btn--primary { background: linear-gradient(135deg, var(--wooplus-brand-500) 0%, var(--wooplus-brand-400) 100%); color: #ffffff; box-shadow: 0 4px 14px 0 rgba(66, 42, 251, 0.30); } .wooplus-btn--primary:hover { background: linear-gradient(135deg, var(--wooplus-brand-700) 0%, var(--wooplus-brand-500) 100%); box-shadow: 0 6px 20px rgba(66, 42, 251, 0.40); color: #ffffff; } .wooplus-btn--secondary { background: var(--wooplus-surface-2); color: var(--wooplus-text); border-color: var(--wooplus-border); } .wooplus-btn--secondary:hover { /* was var(--wooplus-bg) — a value-twin of the base --wooplus-surface-2 (both #F4F7FE), so the fill never changed on hover. Use a distinctly darker neutral; color-mix darkens surface-2 toward ink where supported. */ background: var(--wooplus-border); background: color-mix(in srgb, var(--wooplus-surface-2) 90%, var(--wooplus-text)); border-color: var(--wooplus-border-strong); color: var(--wooplus-text-2); } [data-wooplus-theme="dark"] .wooplus-btn--secondary { background: rgba(255, 255, 255, 0.05); color: var(--wooplus-text); border-color: rgba(255, 255, 255, 0.10); } [data-wooplus-theme="dark"] .wooplus-btn--secondary:hover { background: rgba(255, 255, 255, 0.10); } .wooplus-btn--outline { background: transparent; color: var(--wooplus-brand-500); border-color: var(--wooplus-brand-500); } .wooplus-btn--outline:hover { background: var(--wooplus-brand-50); color: var(--wooplus-brand-700); } [data-wooplus-theme="dark"] .wooplus-btn--outline:hover { background: rgba(66, 42, 251, 0.12); color: var(--wooplus-brand-200); } .wooplus-btn--ghost { background: transparent; color: var(--wooplus-text-mute); } .wooplus-btn--ghost:hover { background: var(--wooplus-surface-2); color: var(--wooplus-text); } .wooplus-btn--soft { background: var(--wooplus-brand-50); color: var(--wooplus-brand-700); } .wooplus-btn--soft:hover { background: var(--wooplus-brand-100); color: var(--wooplus-brand-900); } [data-wooplus-theme="dark"] .wooplus-btn--soft { background: rgba(66, 42, 251, 0.18); color: var(--wooplus-brand-200); } .wooplus-btn--link { background: transparent; color: var(--wooplus-brand-500); padding: 0; height: auto; border: 0; } .wooplus-btn--link:hover { color: var(--wooplus-brand-700); text-decoration: underline; transform: none; } /* === Semantic variants === */ .wooplus-btn--success { background: linear-gradient(135deg, var(--wooplus-success) 0%, var(--wooplus-success-dark) 100%); color: #ffffff; box-shadow: 0 4px 14px 0 rgba(5, 205, 153, 0.30); } .wooplus-btn--success:hover { box-shadow: 0 6px 20px rgba(5, 205, 153, 0.40); color: #ffffff; filter: brightness(1.05); } .wooplus-btn--danger { background: linear-gradient(135deg, var(--wooplus-danger) 0%, var(--wooplus-danger-dark) 100%); color: #ffffff; box-shadow: 0 4px 14px 0 rgba(238, 93, 80, 0.30); } .wooplus-btn--danger:hover { box-shadow: 0 6px 20px rgba(238, 93, 80, 0.40); color: #ffffff; filter: brightness(1.05); } .wooplus-btn--warning { background: linear-gradient(135deg, var(--wooplus-warning) 0%, var(--wooplus-warning-dark) 100%); color: #ffffff; } .wooplus-btn--warning:hover { color: #ffffff; filter: brightness(1.05); } .wooplus-btn--info { background: linear-gradient(135deg, var(--wooplus-info) 0%, var(--wooplus-info-dark) 100%); color: #ffffff; } .wooplus-btn--info:hover { color: #ffffff; filter: brightness(1.05); } /* === Modifiers === */ .wooplus-btn--icon { padding: 0; width: 44px; } .wooplus-btn--icon.wooplus-btn--xs { width: 28px; } .wooplus-btn--icon.wooplus-btn--sm { width: 36px; } .wooplus-btn--icon.wooplus-btn--lg { width: 52px; } .wooplus-btn--block { display: flex; width: 100%; } /* Loading spinner */ .wooplus-btn--loading { color: transparent !important; pointer-events: none; } .wooplus-btn--loading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: wooplus-btn-spin 0.6s linear infinite; color: #ffffff; } .wooplus-btn--loading.wooplus-btn--secondary::after, .wooplus-btn--loading.wooplus-btn--outline::after, .wooplus-btn--loading.wooplus-btn--ghost::after, .wooplus-btn--loading.wooplus-btn--soft::after { color: var(--wooplus-brand-500); } @keyframes wooplus-btn-spin { to { transform: rotate(360deg); } } /* Button group — for adjacent buttons */ .wooplus-btn-group { display: inline-flex; gap: var(--wooplus-space-2); flex-wrap: wrap; } .wooplus-btn-group--attached { gap: 0; } .wooplus-btn-group--attached > .wooplus-btn { border-radius: 0; } .wooplus-btn-group--attached > .wooplus-btn:first-child { border-start-start-radius: var(--wooplus-radius); border-end-start-radius: var(--wooplus-radius); } .wooplus-btn-group--attached > .wooplus-btn:last-child { border-start-end-radius: var(--wooplus-radius); border-end-end-radius: var(--wooplus-radius); } .wooplus-btn-group--attached > .wooplus-btn + .wooplus-btn { border-inline-start-width: 0; } /* ================= components/input.css ================= */ /** * WooPlus Design System — Form Inputs * * Includes: * .wooplus-field — wrapper with label + input + hint * .wooplus-input — text-like inputs * .wooplus-textarea — textarea * .wooplus-select — select dropdown * .wooplus-textarea--rich — long-text composer with char count * * Solves the "59 textareas, all the same" problem identified in audit. */ /* === Field wrapper === */ .wooplus-field { display: flex; flex-direction: column; gap: var(--wooplus-space-2); margin-bottom: var(--wooplus-space-4); } .wooplus-field--horizontal { flex-direction: row; align-items: center; gap: var(--wooplus-space-4); } .wooplus-field--horizontal > .wooplus-label { flex: 0 0 200px; margin: 0; } .wooplus-field--horizontal > .wooplus-input, .wooplus-field--horizontal > .wooplus-textarea, .wooplus-field--horizontal > .wooplus-select { flex: 1; } /* === Label === */ .wooplus-label { display: flex; align-items: center; gap: var(--wooplus-space-2); font-size: var(--wooplus-text-sm); font-weight: 700; color: var(--wooplus-text); letter-spacing: var(--wooplus-tracking-tight); margin-bottom: var(--wooplus-space-1); padding-inline-start: var(--wooplus-space-3); } .wooplus-label--required::after { content: '*'; color: var(--wooplus-danger); font-weight: 700; } .wooplus-label__optional { font-weight: 500; color: var(--wooplus-text-faint); font-size: var(--wooplus-text-xs); margin-inline-start: var(--wooplus-space-2); } /* === Hint / helper text === */ .wooplus-hint { font-size: var(--wooplus-text-xs); color: var(--wooplus-text-mute); font-weight: 500; line-height: var(--wooplus-lh); padding-inline-start: var(--wooplus-space-3); display: flex; justify-content: space-between; align-items: center; gap: var(--wooplus-space-2); } .wooplus-hint--error { color: var(--wooplus-danger); } .wooplus-hint--success { color: var(--wooplus-success-dark); } /* === Input base === */ .wooplus-input, .wooplus-textarea, .wooplus-select { display: block; width: 100%; padding: 0 var(--wooplus-space-4); height: 48px; font-family: inherit; font-size: var(--wooplus-text-sm); font-weight: 500; color: var(--wooplus-text); background: var(--wooplus-surface); border: 1px solid var(--wooplus-border-strong); border-radius: var(--wooplus-radius); outline: none; transition: var(--wooplus-transition-fast); -webkit-appearance: none; appearance: none; letter-spacing: var(--wooplus-tracking-tight); } .wooplus-input::placeholder, .wooplus-textarea::placeholder { color: var(--wooplus-text-faint); font-weight: 400; } .wooplus-input:hover, .wooplus-textarea:hover, .wooplus-select:hover { border-color: var(--wooplus-text-faint); } .wooplus-input:focus, .wooplus-textarea:focus, .wooplus-select:focus { border-color: var(--wooplus-brand-500); box-shadow: 0 0 0 3px rgba(66, 42, 251, 0.12); } .wooplus-input:disabled, .wooplus-textarea:disabled, .wooplus-select:disabled { background: var(--wooplus-surface-2); color: var(--wooplus-text-faint); cursor: not-allowed; opacity: 0.7; } [data-wooplus-theme="dark"] .wooplus-input, [data-wooplus-theme="dark"] .wooplus-textarea, [data-wooplus-theme="dark"] .wooplus-select { background: var(--wooplus-surface-2); border-color: rgba(255, 255, 255, 0.10); color: var(--wooplus-text); } [data-wooplus-theme="dark"] .wooplus-input:hover, [data-wooplus-theme="dark"] .wooplus-textarea:hover, [data-wooplus-theme="dark"] .wooplus-select:hover { border-color: rgba(255, 255, 255, 0.20); } /* === Sizes === */ .wooplus-input--sm, .wooplus-textarea--sm, .wooplus-select--sm { height: 36px; padding: 0 var(--wooplus-space-3); font-size: var(--wooplus-text-xs); border-radius: var(--wooplus-radius-sm); } .wooplus-input--lg, .wooplus-textarea--lg, .wooplus-select--lg { height: 56px; padding: 0 var(--wooplus-space-5); font-size: var(--wooplus-text-md); border-radius: var(--wooplus-radius-md); } /* === States === */ .wooplus-input--error, .wooplus-textarea--error, .wooplus-select--error, .wooplus-input.is-invalid { border-color: var(--wooplus-danger); background-color: var(--wooplus-danger-light); } .wooplus-input--error:focus, .wooplus-textarea--error:focus, .wooplus-input.is-invalid:focus { box-shadow: 0 0 0 3px rgba(238, 93, 80, 0.15); } .wooplus-input--success, .wooplus-input.is-valid { border-color: var(--wooplus-success); } .wooplus-input--success:focus, .wooplus-input.is-valid:focus { box-shadow: 0 0 0 3px rgba(5, 205, 153, 0.15); } /* === Textarea specific === */ .wooplus-textarea { height: auto; min-height: 100px; padding: var(--wooplus-space-3) var(--wooplus-space-4); resize: vertical; line-height: var(--wooplus-lh); } /* === Select specific === */ .wooplus-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23707EAE' d='M6 8L0 0h12z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left var(--wooplus-space-4) center; padding-inline-end: var(--wooplus-space-4); padding-inline-start: var(--wooplus-space-10); cursor: pointer; } [dir="ltr"] .wooplus-select { background-position: right var(--wooplus-space-4) center; } /* === Input group — input with icon/addon === */ .wooplus-input-group { position: relative; display: flex; align-items: stretch; } .wooplus-input-group__icon { position: absolute; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 24px; color: var(--wooplus-text-mute); pointer-events: none; z-index: 1; } .wooplus-input-group__icon--start { inset-inline-start: var(--wooplus-space-4); } .wooplus-input-group__icon--end { inset-inline-end: var(--wooplus-space-4); } .wooplus-input-group:has(.wooplus-input-group__icon--start) > .wooplus-input, .wooplus-input-group:has(.wooplus-input-group__icon--start) > .wooplus-select { padding-inline-start: var(--wooplus-space-10); } .wooplus-input-group:has(.wooplus-input-group__icon--end) > .wooplus-input, .wooplus-input-group:has(.wooplus-input-group__icon--end) > .wooplus-select { padding-inline-end: var(--wooplus-space-10); } /* Addon (text or button at the edge of an input) */ .wooplus-input-group__addon { display: inline-flex; align-items: center; padding: 0 var(--wooplus-space-3); background: var(--wooplus-surface-2); border: 1px solid var(--wooplus-border-strong); color: var(--wooplus-text-mute); font-size: var(--wooplus-text-sm); font-weight: 600; white-space: nowrap; } .wooplus-input-group__addon:first-child { border-start-start-radius: var(--wooplus-radius); border-end-start-radius: var(--wooplus-radius); border-inline-end: 0; } .wooplus-input-group__addon:last-child { border-start-end-radius: var(--wooplus-radius); border-end-end-radius: var(--wooplus-radius); border-inline-start: 0; } .wooplus-input-group:has(> .wooplus-input-group__addon:first-child) > .wooplus-input { border-start-start-radius: 0; border-end-start-radius: 0; } .wooplus-input-group:has(> .wooplus-input-group__addon:last-child) > .wooplus-input { border-start-end-radius: 0; border-end-end-radius: 0; } /* === Rich textarea — solves the "59 boring textareas" problem === * Includes: char counter, expand button, autosave indicator, toolbar slot. */ .wooplus-textarea-rich { position: relative; display: flex; flex-direction: column; background: var(--wooplus-surface); border: 1px solid var(--wooplus-border-strong); border-radius: var(--wooplus-radius); overflow: hidden; transition: var(--wooplus-transition-fast); } .wooplus-textarea-rich:focus-within { border-color: var(--wooplus-brand-500); box-shadow: 0 0 0 3px rgba(66, 42, 251, 0.12); } .wooplus-textarea-rich__toolbar { display: flex; align-items: center; gap: var(--wooplus-space-1); padding: var(--wooplus-space-2) var(--wooplus-space-3); background: var(--wooplus-surface-2); border-bottom: 1px solid var(--wooplus-divider); } .wooplus-textarea-rich__toolbar-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: transparent; border: 0; color: var(--wooplus-text-mute); border-radius: var(--wooplus-radius-xs); cursor: pointer; transition: var(--wooplus-transition-fast); } .wooplus-textarea-rich__toolbar-btn:hover { background: var(--wooplus-surface); color: var(--wooplus-brand-500); } .wooplus-textarea-rich__toolbar-divider { width: 1px; height: 20px; background: var(--wooplus-border); margin: 0 var(--wooplus-space-1); } .wooplus-textarea-rich__textarea { width: 100%; min-height: 120px; padding: var(--wooplus-space-3) var(--wooplus-space-4); background: transparent; border: 0; font-family: inherit; font-size: var(--wooplus-text-sm); color: var(--wooplus-text); line-height: var(--wooplus-lh); outline: none; resize: vertical; } .wooplus-textarea-rich__footer { display: flex; align-items: center; justify-content: space-between; padding: var(--wooplus-space-2) var(--wooplus-space-3); background: var(--wooplus-surface-2); border-top: 1px solid var(--wooplus-divider); font-size: var(--wooplus-text-xs); color: var(--wooplus-text-mute); font-weight: 500; gap: var(--wooplus-space-2); flex-wrap: wrap; } .wooplus-textarea-rich__indicator { display: inline-flex; align-items: center; gap: 6px; } .wooplus-textarea-rich__indicator::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--wooplus-text-faint); } .wooplus-textarea-rich__indicator--saved::before { background: var(--wooplus-success); box-shadow: 0 0 6px var(--wooplus-success); } .wooplus-textarea-rich__indicator--saving::before { background: var(--wooplus-warning); animation: wooplus-pulse 1.4s ease-in-out infinite; } .wooplus-textarea-rich__indicator--unsaved::before { background: var(--wooplus-warning); } .wooplus-textarea-rich__counter b { color: var(--wooplus-text); font-variant-numeric: tabular-nums; } .wooplus-textarea-rich__counter--warning b { color: var(--wooplus-warning-dark); } .wooplus-textarea-rich__counter--over b { color: var(--wooplus-danger); } @keyframes wooplus-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } /* ================= components/toggle.css ================= */ /** * WooPlus Design System — Toggle, Checkbox, Radio * * Solves the "form-switch defined but 0 uses" problem from audit. * All three components share consistent geometry and 10 color variants. */ /* =================================================================== * SWITCH (toggle) * =================================================================== */ .wooplus-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; } .wooplus-switch input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; } .wooplus-switch__slider { position: absolute; cursor: pointer; inset: 0; background: var(--wooplus-border-strong); border-radius: var(--wooplus-radius-full); transition: var(--wooplus-transition); } .wooplus-switch__slider::before { content: ''; position: absolute; top: 50%; transform: translateY(-50%); inset-inline-start: 3px; height: 18px; width: 18px; background: #ffffff; border-radius: 50%; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.20); transition: var(--wooplus-transition); } .wooplus-switch input:checked + .wooplus-switch__slider { background: var(--wooplus-brand-500); } .wooplus-switch input:checked + .wooplus-switch__slider::before { inset-inline-start: calc(100% - 21px); } .wooplus-switch input:focus-visible + .wooplus-switch__slider { box-shadow: 0 0 0 3px rgba(66, 42, 251, 0.20); } .wooplus-switch input:disabled + .wooplus-switch__slider { opacity: 0.5; cursor: not-allowed; } [data-wooplus-theme="dark"] .wooplus-switch__slider { background: rgba(255, 255, 255, 0.10); } /* === Switch sizes === */ .wooplus-switch--sm { width: 36px; height: 20px; } .wooplus-switch--sm .wooplus-switch__slider::before { height: 14px; width: 14px; } .wooplus-switch--sm input:checked + .wooplus-switch__slider::before { inset-inline-start: calc(100% - 17px); } .wooplus-switch--lg { width: 52px; height: 28px; } .wooplus-switch--lg .wooplus-switch__slider::before { height: 22px; width: 22px; } .wooplus-switch--lg input:checked + .wooplus-switch__slider::before { inset-inline-start: calc(100% - 25px); } /* === Switch colors (10 variants) === */ .wooplus-switch--success input:checked + .wooplus-switch__slider { background: var(--wooplus-success); } .wooplus-switch--warning input:checked + .wooplus-switch__slider { background: var(--wooplus-warning); } .wooplus-switch--danger input:checked + .wooplus-switch__slider { background: var(--wooplus-danger); } .wooplus-switch--info input:checked + .wooplus-switch__slider { background: var(--wooplus-info-dark); } .wooplus-switch--blue input:checked + .wooplus-switch__slider { background: #3b82f6; } .wooplus-switch--green input:checked + .wooplus-switch__slider { background: #22c55e; } .wooplus-switch--orange input:checked + .wooplus-switch__slider { background: #f97316; } .wooplus-switch--teal input:checked + .wooplus-switch__slider { background: #14b8a6; } .wooplus-switch--pink input:checked + .wooplus-switch__slider { background: #ec4899; } .wooplus-switch--purple input:checked + .wooplus-switch__slider { background: #a855f7; } /* === Switch field wrapper (label + description + switch) === */ .wooplus-switch-field { display: flex; align-items: center; justify-content: space-between; gap: var(--wooplus-space-4); padding: var(--wooplus-space-3) 0; } .wooplus-switch-field__label { flex: 1; min-width: 0; cursor: pointer; } .wooplus-switch-field__title { display: block; font-size: var(--wooplus-text-md); font-weight: 700; color: var(--wooplus-text); line-height: 1.3; } .wooplus-switch-field__desc { display: block; font-size: var(--wooplus-text-sm); color: var(--wooplus-text-mute); margin-top: 2px; font-weight: 500; line-height: var(--wooplus-lh); } /* =================================================================== * CHECKBOX * =================================================================== */ .wooplus-checkbox { display: inline-flex; align-items: center; cursor: pointer; } .wooplus-checkbox__input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; } .wooplus-checkbox__box { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; min-width: 20px; background: var(--wooplus-surface); border: 1.5px solid var(--wooplus-border-strong); border-radius: var(--wooplus-radius-xs); transition: var(--wooplus-transition-fast); flex-shrink: 0; } .wooplus-checkbox__box::after { content: ''; position: absolute; width: 12px; height: 12px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2 6l3 3 5-5'/%3E%3C/svg%3E"); background-size: 100%; opacity: 0; transform: scale(0.5); transition: var(--wooplus-transition-fast); } .wooplus-checkbox__input:checked + .wooplus-checkbox__box { background: var(--wooplus-brand-500); border-color: var(--wooplus-brand-500); } .wooplus-checkbox__input:checked + .wooplus-checkbox__box::after { opacity: 1; transform: scale(1); } .wooplus-checkbox__input:focus-visible + .wooplus-checkbox__box { box-shadow: 0 0 0 3px rgba(66, 42, 251, 0.20); } .wooplus-checkbox__input:disabled + .wooplus-checkbox__box { opacity: 0.5; cursor: not-allowed; } .wooplus-checkbox__label { margin-inline-start: var(--wooplus-space-2); font-size: var(--wooplus-text-sm); font-weight: 500; color: var(--wooplus-text); cursor: pointer; user-select: none; } [data-wooplus-theme="dark"] .wooplus-checkbox__box { background: var(--wooplus-surface-2); border-color: rgba(255, 255, 255, 0.12); } /* === Indeterminate state === */ .wooplus-checkbox__input:indeterminate + .wooplus-checkbox__box { background: var(--wooplus-brand-500); border-color: var(--wooplus-brand-500); } .wooplus-checkbox__input:indeterminate + .wooplus-checkbox__box::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath stroke='%23ffffff' stroke-width='2' stroke-linecap='round' d='M3 6h6'/%3E%3C/svg%3E"); opacity: 1; transform: scale(1); } /* === Checkbox color variants === */ .wooplus-checkbox--success .wooplus-checkbox__input:checked + .wooplus-checkbox__box { background: var(--wooplus-success); border-color: var(--wooplus-success); } .wooplus-checkbox--danger .wooplus-checkbox__input:checked + .wooplus-checkbox__box { background: var(--wooplus-danger); border-color: var(--wooplus-danger); } .wooplus-checkbox--warning .wooplus-checkbox__input:checked + .wooplus-checkbox__box { background: var(--wooplus-warning); border-color: var(--wooplus-warning); } .wooplus-checkbox--info .wooplus-checkbox__input:checked + .wooplus-checkbox__box { background: var(--wooplus-info-dark); border-color: var(--wooplus-info-dark); } /* =================================================================== * RADIO * =================================================================== */ .wooplus-radio { display: inline-flex; align-items: center; cursor: pointer; } .wooplus-radio__input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; } .wooplus-radio__circle { position: relative; display: inline-block; width: 20px; height: 20px; min-width: 20px; background: var(--wooplus-surface); border: 1.5px solid var(--wooplus-border-strong); border-radius: 50%; transition: var(--wooplus-transition-fast); flex-shrink: 0; } .wooplus-radio__circle::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); width: 10px; height: 10px; border-radius: 50%; background: var(--wooplus-brand-500); transition: var(--wooplus-transition-fast); } .wooplus-radio__input:checked + .wooplus-radio__circle { border-color: var(--wooplus-brand-500); } .wooplus-radio__input:checked + .wooplus-radio__circle::after { transform: translate(-50%, -50%) scale(1); } .wooplus-radio__input:focus-visible + .wooplus-radio__circle { box-shadow: 0 0 0 3px rgba(66, 42, 251, 0.20); } .wooplus-radio__input:disabled + .wooplus-radio__circle { opacity: 0.5; cursor: not-allowed; } .wooplus-radio__label { margin-inline-start: var(--wooplus-space-2); font-size: var(--wooplus-text-sm); font-weight: 500; color: var(--wooplus-text); cursor: pointer; user-select: none; } [data-wooplus-theme="dark"] .wooplus-radio__circle { background: var(--wooplus-surface-2); border-color: rgba(255, 255, 255, 0.12); } /* === Radio variants — same color logic === */ .wooplus-radio--success .wooplus-radio__input:checked + .wooplus-radio__circle { border-color: var(--wooplus-success); } .wooplus-radio--success .wooplus-radio__input:checked + .wooplus-radio__circle::after { background: var(--wooplus-success); } .wooplus-radio--danger .wooplus-radio__input:checked + .wooplus-radio__circle { border-color: var(--wooplus-danger); } .wooplus-radio--danger .wooplus-radio__input:checked + .wooplus-radio__circle::after { background: var(--wooplus-danger); } .wooplus-radio--warning .wooplus-radio__input:checked + .wooplus-radio__circle { border-color: var(--wooplus-warning); } .wooplus-radio--warning .wooplus-radio__input:checked + .wooplus-radio__circle::after { background: var(--wooplus-warning); } /* === Radio group (a list of radio choices) === */ .wooplus-radio-group { display: flex; flex-direction: column; gap: var(--wooplus-space-2); } .wooplus-radio-group--horizontal { flex-direction: row; flex-wrap: wrap; gap: var(--wooplus-space-4); } /* Selectable radio card — like a fancy radio that's a whole panel */ .wooplus-radio-card { display: flex; align-items: flex-start; gap: var(--wooplus-space-3); padding: var(--wooplus-space-4); background: var(--wooplus-surface); border: 1.5px solid var(--wooplus-border); border-radius: var(--wooplus-radius); cursor: pointer; transition: var(--wooplus-transition-fast); } .wooplus-radio-card:hover { border-color: var(--wooplus-text-faint); } .wooplus-radio-card:has(.wooplus-radio__input:checked) { border-color: var(--wooplus-brand-500); background: var(--wooplus-brand-50); box-shadow: 0 0 0 3px rgba(66, 42, 251, 0.10); } [data-wooplus-theme="dark"] .wooplus-radio-card:has(.wooplus-radio__input:checked) { background: rgba(66, 42, 251, 0.12); } .wooplus-radio-card__body { flex: 1; min-width: 0; } .wooplus-radio-card__title { display: block; font-size: var(--wooplus-text-md); font-weight: 700; color: var(--wooplus-text); line-height: 1.3; } .wooplus-radio-card__desc { display: block; font-size: var(--wooplus-text-sm); color: var(--wooplus-text-mute); margin-top: 4px; font-weight: 500; line-height: var(--wooplus-lh); } /* ================= components/badge.css ================= */ /** * WooPlus Design System — Badge / Pill / Tag * * Replaces the existing badge-* classes with consistent variants. * Used for: order status, ticket status, AI labels, kanban tags. */ .wooplus-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; font-size: var(--wooplus-text-xs); font-weight: 700; line-height: 1; letter-spacing: var(--wooplus-tracking-tight); border-radius: var(--wooplus-radius-full); white-space: nowrap; border: 1px solid transparent; background: var(--wooplus-surface-2); color: var(--wooplus-text-mute); transition: var(--wooplus-transition-fast); } /* === Solid variants (gradient) === */ .wooplus-badge--primary { background: linear-gradient(135deg, var(--wooplus-brand-500) 0%, var(--wooplus-brand-400) 100%); color: #ffffff; box-shadow: 0 2px 6px rgba(66, 42, 251, 0.25); } .wooplus-badge--success { background: linear-gradient(135deg, var(--wooplus-success) 0%, var(--wooplus-success-dark) 100%); color: #ffffff; box-shadow: 0 2px 6px rgba(5, 205, 153, 0.25); } .wooplus-badge--warning { background: linear-gradient(135deg, var(--wooplus-warning) 0%, var(--wooplus-warning-dark) 100%); color: #ffffff; box-shadow: 0 2px 6px rgba(255, 206, 32, 0.25); } .wooplus-badge--danger { background: linear-gradient(135deg, var(--wooplus-danger) 0%, var(--wooplus-danger-dark) 100%); color: #ffffff; box-shadow: 0 2px 6px rgba(238, 93, 80, 0.25); } .wooplus-badge--info { background: linear-gradient(135deg, var(--wooplus-info) 0%, var(--wooplus-info-dark) 100%); color: #ffffff; box-shadow: 0 2px 6px rgba(106, 210, 255, 0.25); } /* === Soft variants (tinted) === */ .wooplus-badge--soft-primary { background: var(--wooplus-brand-50); color: var(--wooplus-brand-700); } .wooplus-badge--soft-success { background: var(--wooplus-success-light); color: var(--wooplus-success-dark); } .wooplus-badge--soft-warning { background: var(--wooplus-warning-light); color: var(--wooplus-warning-dark); } .wooplus-badge--soft-danger { background: var(--wooplus-danger-light); color: var(--wooplus-danger-dark); } .wooplus-badge--soft-info { background: var(--wooplus-info-light); color: var(--wooplus-info-dark); } [data-wooplus-theme="dark"] .wooplus-badge--soft-primary { background: rgba(66, 42, 251, 0.20); color: var(--wooplus-brand-200); } /* === Outline variants === */ .wooplus-badge--outline { background: transparent; border-color: var(--wooplus-border-strong); color: var(--wooplus-text-mute); } .wooplus-badge--outline-primary { background: transparent; border-color: var(--wooplus-brand-500); color: var(--wooplus-brand-500); } .wooplus-badge--outline-success { background: transparent; border-color: var(--wooplus-success); color: var(--wooplus-success-dark); } /* === With dot indicator === */ .wooplus-badge--dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .wooplus-badge--dot.wooplus-badge--primary::before, .wooplus-badge--dot.wooplus-badge--success::before, .wooplus-badge--dot.wooplus-badge--warning::before, .wooplus-badge--dot.wooplus-badge--danger::before, .wooplus-badge--dot.wooplus-badge--info::before { background: currentColor; box-shadow: 0 0 6px currentColor; } /* === Pulsing live indicator (for "active", "live") === */ .wooplus-badge--live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--wooplus-success); box-shadow: 0 0 6px var(--wooplus-success); animation: wooplus-badge-pulse 1.6s ease-in-out infinite; } @keyframes wooplus-badge-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.85); } } /* === Removable chip (with × button) === */ .wooplus-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 6px 6px 12px; font-size: var(--wooplus-text-sm); font-weight: 600; background: var(--wooplus-brand-50); color: var(--wooplus-brand-700); border-radius: var(--wooplus-radius-full); transition: var(--wooplus-transition-fast); } [dir="ltr"] .wooplus-chip { padding: 6px 12px 6px 6px; } .wooplus-chip__close { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: transparent; border: 0; color: inherit; cursor: pointer; transition: var(--wooplus-transition-fast); font-size: 14px; } .wooplus-chip__close:hover { background: rgba(0, 0, 0, 0.10); } [data-wooplus-theme="dark"] .wooplus-chip { background: rgba(66, 42, 251, 0.20); color: var(--wooplus-brand-200); } /* === Sizes === */ .wooplus-badge--xs { padding: 2px 6px; font-size: 10px; } .wooplus-badge--lg { padding: 6px 14px; font-size: var(--wooplus-text-sm); } /* === LEGACY MAPPING — bridge for existing template strings === * The old plugin uses .badge-processing, .badge-completed, etc. * These rules let old templates render correctly during migration. */ .wooplus-app .badge-processing, .wooplus-app .badge-در\.حال\.انجام { background: linear-gradient(135deg, var(--wooplus-success) 0%, var(--wooplus-success-dark) 100%); color: #ffffff; box-shadow: 0 2px 6px rgba(5, 205, 153, 0.25); display: inline-flex; align-items: center; padding: 4px 10px; font-size: var(--wooplus-text-xs); font-weight: 700; border-radius: var(--wooplus-radius-full); } .wooplus-app .badge-completed, .wooplus-app .badge-تکمیل\.شده { background: linear-gradient(135deg, var(--wooplus-brand-500) 0%, var(--wooplus-brand-400) 100%); color: #ffffff; box-shadow: 0 2px 6px rgba(66, 42, 251, 0.25); display: inline-flex; align-items: center; padding: 4px 10px; font-size: var(--wooplus-text-xs); font-weight: 700; border-radius: var(--wooplus-radius-full); } .wooplus-app .badge-on-hold, .wooplus-app .badge-در\.انتظار { background: linear-gradient(135deg, var(--wooplus-warning) 0%, var(--wooplus-warning-dark) 100%); color: #ffffff; box-shadow: 0 2px 6px rgba(255, 206, 32, 0.25); display: inline-flex; align-items: center; padding: 4px 10px; font-size: var(--wooplus-text-xs); font-weight: 700; border-radius: var(--wooplus-radius-full); } .wooplus-app .badge-cancelled, .wooplus-app .badge-failed, .wooplus-app .badge-abandoned { background: linear-gradient(135deg, var(--wooplus-danger) 0%, var(--wooplus-danger-dark) 100%); color: #ffffff; box-shadow: 0 2px 6px rgba(238, 93, 80, 0.25); display: inline-flex; align-items: center; padding: 4px 10px; font-size: var(--wooplus-text-xs); font-weight: 700; border-radius: var(--wooplus-radius-full); } .wooplus-app .badge-pending { background: linear-gradient(135deg, var(--wooplus-info) 0%, var(--wooplus-info-dark) 100%); color: #ffffff; box-shadow: 0 2px 6px rgba(106, 210, 255, 0.25); display: inline-flex; align-items: center; padding: 4px 10px; font-size: var(--wooplus-text-xs); font-weight: 700; border-radius: var(--wooplus-radius-full); } /* ================= components/sidebar.css ================= */ /** * WooPlus Design System — Sidebar * * Horizon-inspired with Persian RTL adaptations: * - Active item: brand-color text + brand-color bar on the inside edge * - Hover: subtle bg * - Group headings: small all-caps muted * - Brand block at top * - Optional bottom card (e.g., upgrade prompt, plugin promo) * * The sidebar replaces the WordPress admin menu when "skin WP admin" * is enabled in Settings. */ .wooplus-sidebar { position: fixed; top: 0; bottom: 0; inset-inline-start: 0; width: 290px; background: var(--wooplus-surface); box-shadow: 14px 0 40px 4px rgba(112, 144, 176, 0.08); z-index: var(--wooplus-z-sticky); display: flex; flex-direction: column; transition: transform var(--wooplus-duration) var(--wooplus-ease); overflow-y: auto; overflow-x: hidden; } /* In LTR direction, mirror shadow */ [dir="ltr"] .wooplus-sidebar { box-shadow: -14px 0 40px 4px rgba(112, 144, 176, 0.08); } [data-wooplus-theme="dark"] .wooplus-sidebar { background: var(--wooplus-surface); box-shadow: 14px 0 40px 4px rgba(0, 0, 0, 0.30); } .wooplus-sidebar--collapsed { transform: translateX(100%); } [dir="ltr"] .wooplus-sidebar--collapsed { transform: translateX(-100%); } /* === Brand block === */ .wooplus-sidebar__brand { padding: var(--wooplus-space-8) var(--wooplus-space-6) var(--wooplus-space-6); border-bottom: 1px solid var(--wooplus-divider); } .wooplus-sidebar__logo { display: flex; align-items: center; gap: var(--wooplus-space-3); color: var(--wooplus-text-2); font-weight: 800; font-size: var(--wooplus-text-xl); letter-spacing: var(--wooplus-tracking-tight); } .wooplus-sidebar__logo-mark { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: linear-gradient(135deg, var(--wooplus-brand-500) 0%, var(--wooplus-brand-400) 100%); color: #ffffff; border-radius: var(--wooplus-radius-sm); font-size: 18px; font-weight: 800; box-shadow: 0 4px 12px rgba(66, 42, 251, 0.30); } .wooplus-sidebar__logo-suffix { font-weight: 500; color: var(--wooplus-text-mute); font-size: var(--wooplus-text-md); } /* === Group heading === */ .wooplus-sidebar__group { padding: var(--wooplus-space-3) var(--wooplus-space-6) var(--wooplus-space-2); font-size: var(--wooplus-text-xs); font-weight: 700; color: var(--wooplus-text-faint); text-transform: uppercase; letter-spacing: 1.5px; margin-top: var(--wooplus-space-2); } /* === Items === */ .wooplus-sidebar__list { list-style: none; margin: 0; padding: var(--wooplus-space-2) 0; flex: 1; } .wooplus-sidebar__item { margin: 0; } .wooplus-sidebar__link { position: relative; display: flex; align-items: center; gap: var(--wooplus-space-3); padding: var(--wooplus-space-3) var(--wooplus-space-6); color: var(--wooplus-text-mute); font-size: var(--wooplus-text-sm); font-weight: 500; text-decoration: none; transition: var(--wooplus-transition-fast); cursor: pointer; } .wooplus-sidebar__link:hover { color: var(--wooplus-text); background: var(--wooplus-surface-2); } .wooplus-sidebar__link.is-active { color: var(--wooplus-text-2); font-weight: 700; } /* The brand bar that marks active item — sits at the inside edge of sidebar */ .wooplus-sidebar__link.is-active::before { content: ''; position: absolute; top: 50%; transform: translateY(-50%); inset-inline-end: 0; width: 4px; height: 70%; background: linear-gradient(180deg, var(--wooplus-brand-500) 0%, var(--wooplus-brand-300) 100%); border-start-start-radius: var(--wooplus-radius-sm); border-end-start-radius: var(--wooplus-radius-sm); } .wooplus-sidebar__icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; font-size: 18px; color: var(--wooplus-text-mute); flex-shrink: 0; transition: var(--wooplus-transition-fast); } .wooplus-sidebar__link:hover .wooplus-sidebar__icon, .wooplus-sidebar__link.is-active .wooplus-sidebar__icon { color: var(--wooplus-brand-500); } .wooplus-sidebar__label { flex: 1; min-width: 0; } .wooplus-sidebar__badge { display: inline-flex; align-items: center; padding: 2px 7px; font-size: 10px; font-weight: 700; color: #ffffff; background: var(--wooplus-brand-500); border-radius: var(--wooplus-radius-full); margin-inline-start: auto; } .wooplus-sidebar__badge--soft { background: var(--wooplus-brand-50); color: var(--wooplus-brand-700); } /* Submenu */ .wooplus-sidebar__submenu { list-style: none; margin: 0; padding: 0 0 var(--wooplus-space-2); overflow: hidden; max-height: 0; transition: max-height var(--wooplus-duration) var(--wooplus-ease); } .wooplus-sidebar__item.is-open > .wooplus-sidebar__submenu { max-height: 500px; } .wooplus-sidebar__submenu .wooplus-sidebar__link { padding-inline-start: calc(var(--wooplus-space-6) + 32px); font-size: var(--wooplus-text-xs); } .wooplus-sidebar__submenu .wooplus-sidebar__link.is-active::before { height: 50%; } /* === Bottom block (promo / upgrade card) === */ .wooplus-sidebar__bottom { padding: var(--wooplus-space-4) var(--wooplus-space-5) var(--wooplus-space-6); margin-top: auto; } .wooplus-sidebar__promo { background: linear-gradient(135deg, var(--wooplus-brand-500) 0%, var(--wooplus-brand-700) 100%); color: #ffffff; padding: var(--wooplus-space-5); border-radius: var(--wooplus-radius-lg); box-shadow: 0 8px 20px rgba(66, 42, 251, 0.30); position: relative; overflow: hidden; } .wooplus-sidebar__promo::before { content: ''; position: absolute; top: -50%; right: -50%; width: 100%; height: 100%; background: radial-gradient(circle, rgba(255, 255, 255, 0.10) 0%, transparent 70%); } .wooplus-sidebar__promo-title { font-size: var(--wooplus-text-md); font-weight: 800; margin-bottom: 4px; position: relative; } .wooplus-sidebar__promo-text { font-size: var(--wooplus-text-xs); color: rgba(255, 255, 255, 0.85); margin-bottom: var(--wooplus-space-3); line-height: var(--wooplus-lh); position: relative; } .wooplus-sidebar__promo-btn { display: inline-flex; align-items: center; padding: 8px 14px; background: #ffffff; color: var(--wooplus-brand-700); font-size: var(--wooplus-text-xs); font-weight: 700; border-radius: var(--wooplus-radius-sm); text-decoration: none; border: 0; cursor: pointer; position: relative; } /* === Toggle (mobile) === */ .wooplus-sidebar__toggle { display: none; position: fixed; top: var(--wooplus-space-4); inset-inline-start: var(--wooplus-space-4); z-index: var(--wooplus-z-sticky); width: 44px; height: 44px; background: var(--wooplus-surface); border: 0; border-radius: var(--wooplus-radius); box-shadow: var(--wooplus-shadow); cursor: pointer; color: var(--wooplus-text); } @media (max-width: 992px) { .wooplus-sidebar { transform: translateX(100%); } [dir="ltr"] .wooplus-sidebar { transform: translateX(-100%); } .wooplus-sidebar.is-open { transform: translateX(0); } .wooplus-sidebar__toggle { display: inline-flex; align-items: center; justify-content: center; } } /* === Scrollbar inside sidebar === */ .wooplus-sidebar::-webkit-scrollbar { width: 4px; } .wooplus-sidebar::-webkit-scrollbar-thumb { background: var(--wooplus-border); border-radius: 2px; } /* === Backdrop for mobile === */ .wooplus-sidebar-backdrop { display: none; position: fixed; inset: 0; background: var(--wooplus-overlay); z-index: calc(var(--wooplus-z-sticky) - 1); opacity: 0; transition: opacity var(--wooplus-duration) var(--wooplus-ease); } .wooplus-sidebar-backdrop.is-visible { display: block; opacity: 1; } /* ================= components/navbar.css ================= */ /** * WooPlus Design System — Navbar (top bar) * * Sits inside the main content area, above the page. * Sticky, glassmorphic, responsive. * * Sections: * - Brand/breadcrumb (left) * - Search (center, optional) * - Tools (right): theme toggle, notifications, user menu */ .wooplus-navbar { position: sticky; top: 0; z-index: var(--wooplus-z-raised); display: flex; align-items: center; justify-content: space-between; gap: var(--wooplus-space-4); padding: var(--wooplus-space-4) var(--wooplus-space-6); background: rgba(244, 247, 254, 0.85); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border-bottom: 1px solid var(--wooplus-divider); margin-bottom: var(--wooplus-space-6); flex-wrap: wrap; } [data-wooplus-theme="dark"] .wooplus-navbar { background: rgba(11, 20, 55, 0.75); } /* === Left side === */ .wooplus-navbar__left { display: flex; align-items: center; gap: var(--wooplus-space-3); min-width: 0; flex: 1; } .wooplus-navbar__breadcrumb { display: flex; align-items: center; gap: var(--wooplus-space-2); font-size: var(--wooplus-text-sm); min-width: 0; } .wooplus-navbar__crumb { color: var(--wooplus-text-mute); font-weight: 500; text-decoration: none; transition: var(--wooplus-transition-fast); } .wooplus-navbar__crumb:hover { color: var(--wooplus-brand-500); } .wooplus-navbar__crumb-separator { color: var(--wooplus-text-faint); font-size: var(--wooplus-text-xs); } .wooplus-navbar__page-title { color: var(--wooplus-text-2); font-size: var(--wooplus-text-2xl); font-weight: 800; margin: 0; letter-spacing: var(--wooplus-tracking-tight); } /* === Right side (tools) === */ .wooplus-navbar__right { display: flex; align-items: center; gap: var(--wooplus-space-2); background: var(--wooplus-surface); border-radius: var(--wooplus-radius-full); padding: 6px; box-shadow: var(--wooplus-shadow-sm); } [data-wooplus-theme="dark"] .wooplus-navbar__right { background: var(--wooplus-surface); } /* === Search === */ .wooplus-navbar__search { position: relative; display: flex; align-items: center; } .wooplus-navbar__search-input { width: 240px; height: 40px; padding: 0 var(--wooplus-space-4) 0 var(--wooplus-space-10); background: var(--wooplus-surface-2); border: 0; border-radius: var(--wooplus-radius-full); font-family: inherit; font-size: var(--wooplus-text-sm); color: var(--wooplus-text); outline: none; transition: var(--wooplus-transition-fast); } .wooplus-navbar__search-input::placeholder { color: var(--wooplus-text-faint); } .wooplus-navbar__search-input:focus { width: 320px; background: var(--wooplus-surface); box-shadow: 0 0 0 3px rgba(66, 42, 251, 0.12); } .wooplus-navbar__search-icon { position: absolute; top: 50%; transform: translateY(-50%); inset-inline-start: var(--wooplus-space-3); color: var(--wooplus-text-mute); pointer-events: none; } @media (max-width: 768px) { .wooplus-navbar__search-input { width: 160px; } .wooplus-navbar__search-input:focus { width: 200px; } } /* === Action button (theme toggle, notifications, etc) === */ .wooplus-navbar__action { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: transparent; border: 0; color: var(--wooplus-text-mute); border-radius: 50%; cursor: pointer; transition: var(--wooplus-transition-fast); position: relative; } .wooplus-navbar__action:hover { background: var(--wooplus-brand-50); color: var(--wooplus-brand-500); } [data-wooplus-theme="dark"] .wooplus-navbar__action:hover { background: rgba(66, 42, 251, 0.18); color: var(--wooplus-brand-200); } /* Notification dot */ .wooplus-navbar__action--has-notification::after { content: ''; position: absolute; top: 8px; inset-inline-end: 8px; width: 8px; height: 8px; background: var(--wooplus-danger); border: 2px solid var(--wooplus-surface); border-radius: 50%; } /* === User menu (avatar + dropdown trigger) === */ .wooplus-navbar__user { display: inline-flex; align-items: center; gap: var(--wooplus-space-2); padding: 4px; background: transparent; border: 0; cursor: pointer; border-radius: var(--wooplus-radius-full); transition: var(--wooplus-transition-fast); } .wooplus-navbar__user:hover { background: var(--wooplus-brand-50); } [data-wooplus-theme="dark"] .wooplus-navbar__user:hover { background: rgba(66, 42, 251, 0.18); } .wooplus-navbar__avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--wooplus-brand-500) 0%, var(--wooplus-brand-700) 100%); display: inline-flex; align-items: center; justify-content: center; color: #ffffff; font-weight: 700; font-size: var(--wooplus-text-sm); overflow: hidden; } .wooplus-navbar__avatar img { width: 100%; height: 100%; object-fit: cover; } .wooplus-navbar__user-info { text-align: start; font-size: var(--wooplus-text-xs); line-height: 1.3; color: var(--wooplus-text); font-weight: 600; padding-inline-end: var(--wooplus-space-2); } @media (max-width: 768px) { .wooplus-navbar__user-info { display: none; } } /* ================= components/table.css ================= */ /** * WooPlus Design System — Table * * Replaces the inconsistent table styles across modules. * Compatible with: existing markup, DataTables, Vue v-for tables. */ .wooplus-table-wrap { background: var(--wooplus-surface); border-radius: var(--wooplus-radius-lg); box-shadow: var(--wooplus-shadow-card); overflow: hidden; } .wooplus-table-wrap__header { display: flex; align-items: center; justify-content: space-between; gap: var(--wooplus-space-3); padding: var(--wooplus-space-5) var(--wooplus-space-6); border-bottom: 1px solid var(--wooplus-divider); flex-wrap: wrap; } .wooplus-table-wrap__title { margin: 0; font-size: var(--wooplus-text-lg); font-weight: 700; color: var(--wooplus-text-2); } .wooplus-table-wrap__tools { display: flex; align-items: center; gap: var(--wooplus-space-2); flex-wrap: wrap; } .wooplus-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .wooplus-table { width: 100%; border-collapse: collapse; font-size: var(--wooplus-text-sm); color: var(--wooplus-text); } .wooplus-table th, .wooplus-table td { padding: var(--wooplus-space-3) var(--wooplus-space-5); text-align: start; vertical-align: middle; border-bottom: 1px solid var(--wooplus-divider); } .wooplus-table th { font-size: var(--wooplus-text-xs); font-weight: 700; color: var(--wooplus-text-mute); letter-spacing: var(--wooplus-tracking-wide); text-transform: uppercase; background: var(--wooplus-surface-2); white-space: nowrap; border-bottom: 1px solid var(--wooplus-border); } [data-wooplus-theme="dark"] .wooplus-table th { background: rgba(0, 0, 0, 0.20); } .wooplus-table th.is-sortable { cursor: pointer; user-select: none; transition: var(--wooplus-transition-fast); } .wooplus-table th.is-sortable:hover { color: var(--wooplus-brand-500); } .wooplus-table th.is-sortable::after { content: '⇅'; margin-inline-start: 6px; color: var(--wooplus-text-faint); font-weight: 400; } .wooplus-table th.is-sorted-asc::after { content: '↑'; color: var(--wooplus-brand-500); } .wooplus-table th.is-sorted-desc::after { content: '↓'; color: var(--wooplus-brand-500); } .wooplus-table tbody tr { transition: var(--wooplus-transition-fast); } .wooplus-table tbody tr:hover { background: var(--wooplus-surface-hover); } .wooplus-table tbody tr.is-selected { background: var(--wooplus-brand-50); } [data-wooplus-theme="dark"] .wooplus-table tbody tr.is-selected { background: rgba(66, 42, 251, 0.15); } .wooplus-table tbody tr:last-child td { border-bottom: 0; } .wooplus-table .num, .wooplus-table .wooplus-num { font-variant-numeric: tabular-nums; font-weight: 600; } .wooplus-table .text-end { text-align: end; } .wooplus-table .text-center { text-align: center; } /* === Compact variant === */ .wooplus-table--compact th, .wooplus-table--compact td { padding: var(--wooplus-space-2) var(--wooplus-space-3); } /* === Borderless variant === */ .wooplus-table--borderless td, .wooplus-table--borderless th { border: 0; } /* === Striped variant === */ .wooplus-table--striped tbody tr:nth-child(even) { background: var(--wooplus-surface-2); } [data-wooplus-theme="dark"] .wooplus-table--striped tbody tr:nth-child(even) { background: rgba(0, 0, 0, 0.10); } /* === Cell with avatar + text === */ .wooplus-table__cell-user { display: flex; align-items: center; gap: var(--wooplus-space-3); } .wooplus-table__avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--wooplus-brand-50); display: inline-flex; align-items: center; justify-content: center; color: var(--wooplus-brand-700); font-weight: 700; font-size: var(--wooplus-text-sm); flex-shrink: 0; overflow: hidden; } .wooplus-table__avatar img { width: 100%; height: 100%; object-fit: cover; } .wooplus-table__cell-user-info { display: flex; flex-direction: column; min-width: 0; } .wooplus-table__cell-user-info b { font-size: var(--wooplus-text-sm); color: var(--wooplus-text-2); font-weight: 700; } .wooplus-table__cell-user-info small { font-size: var(--wooplus-text-xs); color: var(--wooplus-text-mute); } /* === Footer (pagination, summary) === */ .wooplus-table-wrap__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--wooplus-space-3); padding: var(--wooplus-space-4) var(--wooplus-space-6); border-top: 1px solid var(--wooplus-divider); background: var(--wooplus-surface-2); flex-wrap: wrap; font-size: var(--wooplus-text-xs); color: var(--wooplus-text-mute); } [data-wooplus-theme="dark"] .wooplus-table-wrap__footer { background: rgba(0, 0, 0, 0.10); } /* === Empty state === */ .wooplus-table-empty { padding: var(--wooplus-space-12) var(--wooplus-space-6); text-align: center; } .wooplus-table-empty__icon { width: 64px; height: 64px; margin: 0 auto var(--wooplus-space-3); display: inline-flex; align-items: center; justify-content: center; background: var(--wooplus-surface-2); border-radius: 50%; color: var(--wooplus-text-faint); font-size: 28px; } .wooplus-table-empty__title { font-size: var(--wooplus-text-md); font-weight: 700; color: var(--wooplus-text-2); margin-bottom: var(--wooplus-space-1); } .wooplus-table-empty__desc { font-size: var(--wooplus-text-sm); color: var(--wooplus-text-mute); } /* ================= components/overlays.css ================= */ /** * WooPlus Design System — Overlays * * Modal, Dropdown, Tooltip, Popover, Toast. */ /* =================================================================== * MODAL * =================================================================== */ .wooplus-modal-backdrop { position: fixed; inset: 0; background: var(--wooplus-overlay); z-index: var(--wooplus-z-modal); display: flex; align-items: center; justify-content: center; padding: var(--wooplus-space-4); opacity: 0; pointer-events: none; transition: opacity var(--wooplus-duration) var(--wooplus-ease); backdrop-filter: blur(4px); } .wooplus-modal-backdrop.is-open { opacity: 1; pointer-events: auto; } .wooplus-modal { background: var(--wooplus-surface); border-radius: var(--wooplus-radius-lg); box-shadow: var(--wooplus-shadow-xl); width: 100%; max-width: 560px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; transform: translateY(20px) scale(0.96); transition: transform var(--wooplus-duration) var(--wooplus-ease-spring); } .wooplus-modal-backdrop.is-open .wooplus-modal { transform: translateY(0) scale(1); } .wooplus-modal--sm { max-width: 420px; } .wooplus-modal--lg { max-width: 800px; } .wooplus-modal--xl { max-width: 1100px; } .wooplus-modal--full { max-width: 95vw; max-height: 95vh; } .wooplus-modal__header { display: flex; align-items: center; justify-content: space-between; gap: var(--wooplus-space-3); padding: var(--wooplus-space-5) var(--wooplus-space-6); border-bottom: 1px solid var(--wooplus-divider); } .wooplus-modal__title { margin: 0; font-size: var(--wooplus-text-lg); font-weight: 700; color: var(--wooplus-text-2); } .wooplus-modal__close { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--wooplus-surface-2); border: 0; color: var(--wooplus-text-mute); border-radius: 50%; cursor: pointer; transition: var(--wooplus-transition-fast); font-size: 20px; } .wooplus-modal__close:hover { background: var(--wooplus-danger-light); color: var(--wooplus-danger); } .wooplus-modal__body { padding: var(--wooplus-space-6); overflow-y: auto; flex: 1; } .wooplus-modal__footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--wooplus-space-2); padding: var(--wooplus-space-4) var(--wooplus-space-6); border-top: 1px solid var(--wooplus-divider); background: var(--wooplus-surface-2); } [data-wooplus-theme="dark"] .wooplus-modal__footer { background: rgba(0, 0, 0, 0.15); } /* =================================================================== * DROPDOWN * =================================================================== */ .wooplus-dropdown { position: relative; display: inline-block; } .wooplus-dropdown__menu { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; min-width: 200px; background: var(--wooplus-surface); border-radius: var(--wooplus-radius); box-shadow: var(--wooplus-shadow-lg); padding: var(--wooplus-space-2); z-index: var(--wooplus-z-popover); opacity: 0; transform: translateY(-8px); pointer-events: none; transition: var(--wooplus-transition-fast); border: 1px solid var(--wooplus-divider); } .wooplus-dropdown.is-open .wooplus-dropdown__menu { opacity: 1; transform: translateY(0); pointer-events: auto; } .wooplus-dropdown__item { display: flex; align-items: center; gap: var(--wooplus-space-2); padding: var(--wooplus-space-2) var(--wooplus-space-3); font-size: var(--wooplus-text-sm); font-weight: 500; color: var(--wooplus-text); background: transparent; border: 0; width: 100%; cursor: pointer; border-radius: var(--wooplus-radius-sm); text-align: start; text-decoration: none; transition: var(--wooplus-transition-fast); } .wooplus-dropdown__item:hover { background: var(--wooplus-brand-50); color: var(--wooplus-brand-700); } [data-wooplus-theme="dark"] .wooplus-dropdown__item:hover { background: rgba(66, 42, 251, 0.18); color: var(--wooplus-brand-200); } .wooplus-dropdown__item--danger { color: var(--wooplus-danger-dark); } .wooplus-dropdown__item--danger:hover { background: var(--wooplus-danger-light); color: var(--wooplus-danger); } .wooplus-dropdown__divider { height: 1px; background: var(--wooplus-divider); margin: var(--wooplus-space-1) 0; } .wooplus-dropdown__section-title { padding: var(--wooplus-space-1) var(--wooplus-space-3); font-size: var(--wooplus-text-xs); font-weight: 700; color: var(--wooplus-text-faint); text-transform: uppercase; letter-spacing: 1.2px; } /* =================================================================== * TOOLTIP (CSS-only via attribute) * =================================================================== */ [data-wooplus-tooltip] { position: relative; } [data-wooplus-tooltip]::before, [data-wooplus-tooltip]::after { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); opacity: 0; pointer-events: none; transition: opacity var(--wooplus-duration-fast) var(--wooplus-ease); z-index: var(--wooplus-z-tooltip); } [data-wooplus-tooltip]::before { content: attr(data-wooplus-tooltip); padding: 6px 10px; background: var(--wooplus-text-2); color: #ffffff; font-size: var(--wooplus-text-xs); font-weight: 600; border-radius: var(--wooplus-radius-sm); white-space: nowrap; box-shadow: var(--wooplus-shadow); } [data-wooplus-tooltip]::after { content: ''; bottom: calc(100% + 2px); width: 0; height: 0; border-style: solid; border-width: 6px 6px 0 6px; border-color: var(--wooplus-text-2) transparent transparent transparent; } [data-wooplus-tooltip]:hover::before, [data-wooplus-tooltip]:hover::after, [data-wooplus-tooltip]:focus-visible::before, [data-wooplus-tooltip]:focus-visible::after { opacity: 1; } /* =================================================================== * POPOVER (richer than tooltip, with content) * =================================================================== */ .wooplus-popover { position: absolute; background: var(--wooplus-surface); border-radius: var(--wooplus-radius); box-shadow: var(--wooplus-shadow-lg); padding: var(--wooplus-space-4); max-width: 320px; z-index: var(--wooplus-z-popover); border: 1px solid var(--wooplus-divider); font-size: var(--wooplus-text-sm); } .wooplus-popover__title { font-weight: 700; color: var(--wooplus-text-2); margin-bottom: var(--wooplus-space-2); font-size: var(--wooplus-text-md); } .wooplus-popover__body { color: var(--wooplus-text-mute); line-height: var(--wooplus-lh); } /* =================================================================== * PROGRESS BAR * =================================================================== */ .wooplus-progress { width: 100%; height: 8px; background: var(--wooplus-border); border-radius: var(--wooplus-radius-full); overflow: hidden; position: relative; } .wooplus-progress__bar { height: 100%; background: linear-gradient(90deg, var(--wooplus-brand-500) 0%, var(--wooplus-brand-300) 100%); border-radius: inherit; transition: width var(--wooplus-duration) var(--wooplus-ease); } .wooplus-progress--sm { height: 4px; } .wooplus-progress--lg { height: 12px; } .wooplus-progress--success .wooplus-progress__bar { background: linear-gradient(90deg, var(--wooplus-success) 0%, var(--wooplus-success-dark) 100%); } .wooplus-progress--warning .wooplus-progress__bar { background: linear-gradient(90deg, var(--wooplus-warning) 0%, var(--wooplus-warning-dark) 100%); } .wooplus-progress--danger .wooplus-progress__bar { background: linear-gradient(90deg, var(--wooplus-danger) 0%, var(--wooplus-danger-dark) 100%); } /* Striped/animated for "in progress" */ .wooplus-progress--striped .wooplus-progress__bar { background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-size: 1rem 1rem; } .wooplus-progress--animated .wooplus-progress__bar { animation: wooplus-progress-stripes 1s linear infinite; } @keyframes wooplus-progress-stripes { from { background-position: 1rem 0; } to { background-position: 0 0; } } /* =================================================================== * TOAST (notifications) * =================================================================== */ .wooplus-toast-container { position: fixed; top: var(--wooplus-space-6); inset-inline-end: var(--wooplus-space-6); z-index: var(--wooplus-z-toast); display: flex; flex-direction: column; gap: var(--wooplus-space-2); pointer-events: none; } .wooplus-toast { display: flex; align-items: flex-start; gap: var(--wooplus-space-3); padding: var(--wooplus-space-4); background: var(--wooplus-surface); border-radius: var(--wooplus-radius); box-shadow: var(--wooplus-shadow-lg); min-width: 320px; max-width: 420px; pointer-events: auto; border-inline-start: 4px solid var(--wooplus-brand-500); animation: wooplus-toast-in 0.3s var(--wooplus-ease-spring); } .wooplus-toast--success { border-inline-start-color: var(--wooplus-success); } .wooplus-toast--warning { border-inline-start-color: var(--wooplus-warning); } .wooplus-toast--danger { border-inline-start-color: var(--wooplus-danger); } .wooplus-toast--info { border-inline-start-color: var(--wooplus-info-dark); } .wooplus-toast__icon { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; color: var(--wooplus-brand-500); flex-shrink: 0; } .wooplus-toast--success .wooplus-toast__icon { color: var(--wooplus-success-dark); } .wooplus-toast--warning .wooplus-toast__icon { color: var(--wooplus-warning-dark); } .wooplus-toast--danger .wooplus-toast__icon { color: var(--wooplus-danger-dark); } .wooplus-toast--info .wooplus-toast__icon { color: var(--wooplus-info-dark); } .wooplus-toast__body { flex: 1; min-width: 0; } .wooplus-toast__title { font-weight: 700; color: var(--wooplus-text-2); font-size: var(--wooplus-text-sm); margin-bottom: 2px; } .wooplus-toast__msg { font-size: var(--wooplus-text-xs); color: var(--wooplus-text-mute); line-height: var(--wooplus-lh); } .wooplus-toast__close { background: transparent; border: 0; color: var(--wooplus-text-faint); cursor: pointer; padding: 0; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--wooplus-radius-xs); transition: var(--wooplus-transition-fast); } .wooplus-toast__close:hover { color: var(--wooplus-danger); background: var(--wooplus-danger-light); } @keyframes wooplus-toast-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } [dir="ltr"] @keyframes wooplus-toast-in { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } /* =================================================================== * ALERT (inline notifications, persistent) * =================================================================== */ .wooplus-alert { display: flex; align-items: flex-start; gap: var(--wooplus-space-3); padding: var(--wooplus-space-4); border-radius: var(--wooplus-radius); background: var(--wooplus-surface-2); border-inline-start: 4px solid var(--wooplus-text-faint); color: var(--wooplus-text); font-size: var(--wooplus-text-sm); line-height: var(--wooplus-lh); } .wooplus-alert--success { /* v3.2.37 — Explicit fallback colors. Pre-3.2.37 we relied on * var(--wooplus-success-light) which on some admin pages resolved * to undefined (DS tokens.css not loaded) and the alert rendered * with no background/foreground contrast. */ background: #E6F8F1; background: var(--wooplus-success-light, #E6F8F1); border-inline-start-color: #05CD99; border-inline-start-color: var(--wooplus-success, #05CD99); color: #017A5C; color: var(--wooplus-success-dark, #017A5C); } .wooplus-alert--warning { /* v3.2.37 — High-contrast warning. Pre-3.2.37 the rgba(255,206,32,0.12) * variable resolved to a translucent yellow that, over a colored * parent surface, looked like solid yellow with same-color text * (merchant report image 1 — alert text invisible on alert background). * Force a very light yellow bg with near-black text — guaranteed * contrast regardless of parent. */ background: #FFF8E1; background: var(--wooplus-warning-light, #FFF8E1); border-inline-start-color: #FFCE20; border-inline-start-color: var(--wooplus-warning, #FFCE20); color: #5B3F00; color: var(--wooplus-warning-dark, #5B3F00); font-weight: 600; } .wooplus-alert--danger { background: #FDECEA; background: var(--wooplus-danger-light, #FDECEA); border-inline-start-color: #EE5D50; border-inline-start-color: var(--wooplus-danger, #EE5D50); color: #7A1A12; color: var(--wooplus-danger-dark, #7A1A12); } .wooplus-alert--info { background: #E3F4FC; background: var(--wooplus-info-light, #E3F4FC); border-inline-start-color: #1AA0C7; border-inline-start-color: var(--wooplus-info-dark, #1AA0C7); color: #08526A; color: var(--wooplus-info-dark, #08526A); } .wooplus-alert--brand { background: var(--wooplus-brand-50); border-inline-start-color: var(--wooplus-brand-500); color: var(--wooplus-brand-700); } .wooplus-alert__icon { flex-shrink: 0; font-size: 20px; } .wooplus-alert__body { flex: 1; } .wooplus-alert__title { font-weight: 700; margin-bottom: 4px; } /* ================= utilities/utilities.css ================= */ /** * WooPlus Design System — Utility Classes * * Small, single-purpose classes. Avoid over-using; prefer component classes. * These are mainly for "one-off" tweaks that don't justify a new component. */ /* === Display === */ .wooplus-d-none { display: none !important; } .wooplus-d-block { display: block !important; } .wooplus-d-inline { display: inline !important; } .wooplus-d-inline-block { display: inline-block !important; } .wooplus-d-flex { display: flex !important; } .wooplus-d-inline-flex { display: inline-flex !important; } .wooplus-d-grid { display: grid !important; } /* === Flex === */ .wooplus-flex-row { flex-direction: row; } .wooplus-flex-col { flex-direction: column; } .wooplus-flex-wrap { flex-wrap: wrap; } .wooplus-flex-nowrap { flex-wrap: nowrap; } .wooplus-flex-1 { flex: 1; } .wooplus-flex-auto { flex: auto; } .wooplus-flex-none { flex: none; } .wooplus-justify-start { justify-content: flex-start; } .wooplus-justify-end { justify-content: flex-end; } .wooplus-justify-center { justify-content: center; } .wooplus-justify-between { justify-content: space-between; } .wooplus-justify-around { justify-content: space-around; } .wooplus-items-start { align-items: flex-start; } .wooplus-items-end { align-items: flex-end; } .wooplus-items-center { align-items: center; } .wooplus-items-stretch { align-items: stretch; } .wooplus-items-baseline { align-items: baseline; } /* === Gap === */ .wooplus-gap-0 { gap: 0; } .wooplus-gap-1 { gap: var(--wooplus-space-1); } .wooplus-gap-2 { gap: var(--wooplus-space-2); } .wooplus-gap-3 { gap: var(--wooplus-space-3); } .wooplus-gap-4 { gap: var(--wooplus-space-4); } .wooplus-gap-5 { gap: var(--wooplus-space-5); } .wooplus-gap-6 { gap: var(--wooplus-space-6); } .wooplus-gap-8 { gap: var(--wooplus-space-8); } /* === Spacing (margin) === */ .wooplus-m-0 { margin: 0; } .wooplus-m-1 { margin: var(--wooplus-space-1); } .wooplus-m-2 { margin: var(--wooplus-space-2); } .wooplus-m-3 { margin: var(--wooplus-space-3); } .wooplus-m-4 { margin: var(--wooplus-space-4); } .wooplus-m-5 { margin: var(--wooplus-space-5); } .wooplus-m-6 { margin: var(--wooplus-space-6); } .wooplus-m-8 { margin: var(--wooplus-space-8); } .wooplus-m-auto { margin: auto; } .wooplus-mt-0 { margin-top: 0; } .wooplus-mt-1 { margin-top: var(--wooplus-space-1); } .wooplus-mt-2 { margin-top: var(--wooplus-space-2); } .wooplus-mt-3 { margin-top: var(--wooplus-space-3); } .wooplus-mt-4 { margin-top: var(--wooplus-space-4); } .wooplus-mt-5 { margin-top: var(--wooplus-space-5); } .wooplus-mt-6 { margin-top: var(--wooplus-space-6); } .wooplus-mt-8 { margin-top: var(--wooplus-space-8); } .wooplus-mb-0 { margin-bottom: 0; } .wooplus-mb-1 { margin-bottom: var(--wooplus-space-1); } .wooplus-mb-2 { margin-bottom: var(--wooplus-space-2); } .wooplus-mb-3 { margin-bottom: var(--wooplus-space-3); } .wooplus-mb-4 { margin-bottom: var(--wooplus-space-4); } .wooplus-mb-5 { margin-bottom: var(--wooplus-space-5); } .wooplus-mb-6 { margin-bottom: var(--wooplus-space-6); } .wooplus-mb-8 { margin-bottom: var(--wooplus-space-8); } /* === Padding === */ .wooplus-p-0 { padding: 0; } .wooplus-p-1 { padding: var(--wooplus-space-1); } .wooplus-p-2 { padding: var(--wooplus-space-2); } .wooplus-p-3 { padding: var(--wooplus-space-3); } .wooplus-p-4 { padding: var(--wooplus-space-4); } .wooplus-p-5 { padding: var(--wooplus-space-5); } .wooplus-p-6 { padding: var(--wooplus-space-6); } .wooplus-p-8 { padding: var(--wooplus-space-8); } /* === Text === */ .wooplus-text-xs { font-size: var(--wooplus-text-xs); } .wooplus-text-sm { font-size: var(--wooplus-text-sm); } .wooplus-text-base { font-size: var(--wooplus-text-base); } .wooplus-text-md { font-size: var(--wooplus-text-md); } .wooplus-text-lg { font-size: var(--wooplus-text-lg); } .wooplus-text-xl { font-size: var(--wooplus-text-xl); } .wooplus-text-2xl { font-size: var(--wooplus-text-2xl); } .wooplus-text-3xl { font-size: var(--wooplus-text-3xl); } .wooplus-text-4xl { font-size: var(--wooplus-text-4xl); } .wooplus-font-normal { font-weight: 400; } .wooplus-font-medium { font-weight: 500; } .wooplus-font-semibold { font-weight: 600; } .wooplus-font-bold { font-weight: 700; } .wooplus-font-extrabold { font-weight: 800; } .wooplus-text-start { text-align: start; } .wooplus-text-end { text-align: end; } .wooplus-text-center { text-align: center; } /* === Color === */ .wooplus-text-primary { color: var(--wooplus-brand-500); } .wooplus-text-success { color: var(--wooplus-success-dark); } .wooplus-text-warning { color: var(--wooplus-warning-dark); } .wooplus-text-danger { color: var(--wooplus-danger-dark); } .wooplus-text-info { color: var(--wooplus-info-dark); } .wooplus-text-muted { color: var(--wooplus-text-mute); } .wooplus-text-faint { color: var(--wooplus-text-faint); } .wooplus-text-default { color: var(--wooplus-text); } .wooplus-text-strong { color: var(--wooplus-text-2); } /* === Background === */ .wooplus-bg-surface { background: var(--wooplus-surface); } .wooplus-bg-soft { background: var(--wooplus-surface-2); } .wooplus-bg-brand { background: var(--wooplus-brand-500); color: #ffffff; } /* === Width === */ .wooplus-w-full { width: 100%; } .wooplus-w-auto { width: auto; } .wooplus-w-fit { width: fit-content; } .wooplus-max-w-xs { max-width: 320px; } .wooplus-max-w-sm { max-width: 480px; } .wooplus-max-w-md { max-width: 640px; } .wooplus-max-w-lg { max-width: 800px; } .wooplus-max-w-xl { max-width: 1100px; } /* === Border / Radius === */ .wooplus-rounded { border-radius: var(--wooplus-radius); } .wooplus-rounded-sm { border-radius: var(--wooplus-radius-sm); } .wooplus-rounded-lg { border-radius: var(--wooplus-radius-lg); } .wooplus-rounded-full { border-radius: var(--wooplus-radius-full); } .wooplus-rounded-none { border-radius: 0; } .wooplus-border { border: 1px solid var(--wooplus-border); } .wooplus-border-strong { border: 1px solid var(--wooplus-border-strong); } .wooplus-border-none { border: 0; } /* === Shadow === */ .wooplus-shadow-none { box-shadow: none; } .wooplus-shadow-xs { box-shadow: var(--wooplus-shadow-xs); } .wooplus-shadow-sm { box-shadow: var(--wooplus-shadow-sm); } .wooplus-shadow { box-shadow: var(--wooplus-shadow); } .wooplus-shadow-md { box-shadow: var(--wooplus-shadow-md); } .wooplus-shadow-lg { box-shadow: var(--wooplus-shadow-lg); } /* === Misc === */ .wooplus-cursor-pointer { cursor: pointer; } .wooplus-cursor-not-allowed { cursor: not-allowed; } .wooplus-overflow-hidden { overflow: hidden; } .wooplus-overflow-auto { overflow: auto; } .wooplus-overflow-y-auto { overflow-y: auto; } .wooplus-overflow-x-auto { overflow-x: auto; } .wooplus-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wooplus-line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .wooplus-line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* === Sr-only (accessibility) === */ .wooplus-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ================= apex-font-fix.css ================= */ /* === APEXCHARTS PERSIAN FONT FIX === * v3.2.36 — Force Vazirmatn on ALL ApexCharts SVG text. ApexCharts emits * inline `font-family: Helvetica, ...` on text nodes which lacks Persian * glyphs (→ "?" placeholders) and renders RTL Persian as LTR-broken. * `!important` is necessary because ApexCharts sets the font via inline * style attribute, which beats normal CSS specificity. * NOTE: this file is concatenated into design-system.css by * _andbuild/build_design_system.sh — it is NOT enqueued on its own. */ .apexcharts-canvas text, .apexcharts-canvas tspan, .apexcharts-text, .apexcharts-title-text, .apexcharts-legend-text, .apexcharts-tooltip-title, .apexcharts-tooltip-text, .apexcharts-tooltip-y-group, .apexcharts-xaxis-label, .apexcharts-yaxis-label, .apexcharts-datalabel, .apexcharts-datalabels text { font-family: 'Vazirmatn', 'IRANSans', 'Tahoma', sans-serif !important; } /* Make sure Persian text inside the tooltip / legend wraps RTL */ .apexcharts-tooltip, .apexcharts-legend, .apexcharts-legend-marker + .apexcharts-legend-text { direction: rtl; text-align: right; }