/* ============================================================ * BeautySoft Theme — Modernize color-theme override * Loaded AFTER styles.css. Selector [data-color-theme="BeautySoft_Theme"] * on activates this theme instead of Blue_Theme. * ============================================================ */ /* Primary/secondary vars — both light and dark modes */ [data-bs-theme=dark][data-color-theme="BeautySoft_Theme"]:root, [data-bs-theme=light][data-color-theme="BeautySoft_Theme"]:root { --bs-primary: #1D9E75; --bs-primary-rgb: 29, 158, 117; --bs-light-primary: rgba(29, 158, 117, 0.1); --bs-primary-bg-subtle: rgba(29, 158, 117, 0.1); --bs-secondary: #0F6E56; --bs-secondary-rgb: 15, 110, 86; --bs-light-secondary: rgba(15, 110, 86, 0.1); --bs-secondary-bg-subtle: rgba(15, 110, 86, 0.1); } /* btn-primary */ [data-bs-theme=dark][data-color-theme="BeautySoft_Theme"]:root .btn-primary, [data-bs-theme=light][data-color-theme="BeautySoft_Theme"]:root .btn-primary { --bs-btn-bg: #1D9E75; --bs-btn-border-color: #1D9E75; --bs-btn-hover-bg: #0F6E56; --bs-btn-hover-border-color: #0F6E56; --bs-btn-active-bg: #095742; --bs-btn-active-border-color:#095742; } /* btn-outline-primary */ [data-bs-theme=dark][data-color-theme="BeautySoft_Theme"]:root .btn-outline-primary, [data-bs-theme=light][data-color-theme="BeautySoft_Theme"]:root .btn-outline-primary { --bs-btn-color: #1D9E75; --bs-btn-border-color: #1D9E75; --bs-btn-hover-bg: #1D9E75; --bs-btn-hover-border-color: #1D9E75; } /* Sidebar — charcoal background with teal accents */ [data-color-theme="BeautySoft_Theme"] .left-sidebar { background-color: #2C2C2A !important; } [data-color-theme="BeautySoft_Theme"] .left-sidebar .sidebar-link, [data-color-theme="BeautySoft_Theme"] .left-sidebar .hide-menu { color: rgba(255, 255, 255, 0.75); } [data-color-theme="BeautySoft_Theme"] .left-sidebar .nav-small-cap { color: rgba(255, 255, 255, 0.4); } [data-color-theme="BeautySoft_Theme"] .left-sidebar .nav-small-cap-icon { color: rgba(255, 255, 255, 0.3); } [data-color-theme="BeautySoft_Theme"] .left-sidebar .sidebar-link:hover { background-color: rgba(29, 158, 117, 0.15); color: #1D9E75 !important; } [data-color-theme="BeautySoft_Theme"] .left-sidebar .sidebar-link:hover .hide-menu { color: #1D9E75; } [data-color-theme="BeautySoft_Theme"] .left-sidebar .sidebar-link.active, [data-color-theme="BeautySoft_Theme"] .left-sidebar .sidebar-item.selected > .sidebar-link { background-color: rgba(29, 158, 117, 0.2); color: #9FE1CB !important; } [data-color-theme="BeautySoft_Theme"] .left-sidebar .sidebar-link.active .hide-menu { color: #9FE1CB; } /* Brand-logo container — keep Modernize's 70px min-height. Horizontal padding tuned so the logo's leading edge sits at the same X as the first-level sidebar icon (link padding-left + .sidebar-item start). */ [data-color-theme="BeautySoft_Theme"] .left-sidebar .brand-logo { border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding: 0 34px; } /* Mini sidebar (87px rail): zero horizontal padding + center, so the 32px mark glyph sits in the middle of the rail and isn't clipped by the 34px padding used in expanded state. !important needed because Modernize's .brand-logo carries Bootstrap utility .justify-content-between inline. */ body[data-sidebartype="mini-sidebar"] [data-color-theme="BeautySoft_Theme"] .left-sidebar .brand-logo, [data-color-theme="BeautySoft_Theme"] body[data-sidebartype="mini-sidebar"] .left-sidebar .brand-logo { padding: 0 !important; justify-content: center !important; } /* Center the 32px mark glyph in mini mode. The wrapper is `display:block` with intrinsic width 40 (text-nowrap), so we force text-align center inside it so the inline-block logo-mini sits in the middle of the wrapper. */ body[data-sidebartype="mini-sidebar"] [data-color-theme="BeautySoft_Theme"] .left-sidebar .brand-logo a.logo-img, [data-color-theme="BeautySoft_Theme"] body[data-sidebartype="mini-sidebar"] .left-sidebar .brand-logo a.logo-img { text-align: center; } [data-color-theme="BeautySoft_Theme"] .left-sidebar .sidebartoggler { color: rgba(255, 255, 255, 0.6); } /* has-arrow chevron — Modernize default color is too dark on charcoal sidebar. Use white-ish so the expand affordance is visible. */ [data-color-theme="BeautySoft_Theme"] .left-sidebar .sidebar-link.has-arrow::after { border-color: rgba(255, 255, 255, 0.65) !important; width: 8px !important; height: 8px !important; } [data-color-theme="BeautySoft_Theme"] .left-sidebar .sidebar-link.has-arrow:hover::after, [data-color-theme="BeautySoft_Theme"] .left-sidebar .sidebar-link.has-arrow.active::after { border-color: #9FE1CB !important; } [data-color-theme="BeautySoft_Theme"] .left-sidebar .simplebar-scrollbar::before { background: rgba(255, 255, 255, 0.2); } /* Global primary */ [data-color-theme="BeautySoft_Theme"] .bg-primary { background-color: #1D9E75 !important; } [data-color-theme="BeautySoft_Theme"] .text-primary { color: #1D9E75 !important; } [data-color-theme="BeautySoft_Theme"] .border-primary { border-color: #1D9E75 !important; } [data-color-theme="BeautySoft_Theme"] a:not(.btn):not(.nav-link):not(.sidebar-link):not(.dropdown-item) { color: #1D9E75; } [data-color-theme="BeautySoft_Theme"] a:not(.btn):not(.nav-link):not(.sidebar-link):not(.dropdown-item):hover { color: #0F6E56; } /* Tint helpers */ [data-color-theme="BeautySoft_Theme"] .bg-light-primary { background-color: rgba(29, 158, 117, 0.1) !important; } [data-color-theme="BeautySoft_Theme"] .bg-light-success { background-color: rgba(16, 185, 129, 0.1) !important; } /* Page background warm white — light mode only */ [data-bs-theme=light][data-color-theme="BeautySoft_Theme"] body { background-color: #F5F4F0; } /* Card radius */ [data-color-theme="BeautySoft_Theme"] .card { border-radius: 12px; } /* Sub-link spacing — Modernize default gap 23px + sidebar-icon margin-right 35px eats ~60px of horizontal space before text starts. On our 250px sidebar that clips long labels (e.g. "Catálogo de Productos"). Tighten gap + bullet box. */ [data-color-theme="BeautySoft_Theme"] .left-sidebar .sidebar-nav ul .sidebar-item .first-level .sidebar-item > .sidebar-link { gap: 12px; } /* Submenu bullets — Modernize wraps each in .round-16, but .round-16 has no width-lock. Lock the bullet box and align it under top-level icons. Top-level icon X = 34 (sidebar-item start 24 + link padding-left 10). Sub-link padding-left 10 → bullet margin-left 0 → bullet at x=34, same column. */ [data-color-theme="BeautySoft_Theme"] .left-sidebar .sidebar-nav .first-level .sidebar-item > .sidebar-link .round-16 { flex-shrink: 0; width: 14px; height: 14px; margin-left: 0; margin-right: 0; line-height: 1; display: flex; align-items: center; justify-content: center; } [data-color-theme="BeautySoft_Theme"] .left-sidebar .sidebar-nav .first-level .sidebar-link .ti-circle { font-size: 8px; line-height: 1; } /* Reclaim charcoal void below nav — Modernize default was -175px for a layout w/ topbar inside sidebar; ours has topbar outside. */ [data-color-theme="BeautySoft_Theme"] .left-sidebar .scroll-sidebar { height: calc(100vh - 90px); } /* Scroll affordance — bottom fade mask. BPIS: macOS/Linear/Stripe pattern. */ [data-color-theme="BeautySoft_Theme"] .left-sidebar .scroll-sidebar { -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 28px), transparent 100%); } /* ============================================================ * Mini-sidebar BPIS — JS-driven flyout submenus * ------------------------------------------------------------ * Pattern: Linear/Notion/Tabler. Rail stays 87px in mini state. * Flyout is a single shared
appended * to by bs-sidebar-mini.js using position:fixed. This * escapes the simplebar/.scroll-sidebar overflow chain without * needing overflow:visible hacks on the rail. * * Rules in this section: * 1. Lock rail width to 87px on hover (kill Modernize's * hover-inflate). Scoped to body[data-sidebartype] only * (no [data-color-theme] requirement) so it works on any * page regardless of theme attribute presence. * 2. Suppress inline submenu display in mini. * 3. Style the flyout container + its child list. * ============================================================ */ /* (1) Lock rail width across ALL color themes. Modernize ships .left-sidebar:hover { width:270px } that we must beat. */ body[data-sidebartype="mini-sidebar"] .left-sidebar:hover { width: 87px !important; } body[data-sidebartype="mini-sidebar"] .left-sidebar:hover .hide-menu { display: none !important; } body[data-sidebartype="mini-sidebar"] .left-sidebar:hover .sidebar-nav .has-arrow::after { display: none !important; } body[data-sidebartype="mini-sidebar"] .left-sidebar:hover .sidebar-nav ul .sidebar-item .sidebar-link { padding: 11px 9px !important; } body[data-sidebartype="mini-sidebar"] .left-sidebar:hover .logo-img { width: 40px !important; } /* Mark glyph swap on rail hover — keep showing the mini logo, not the wide horizontal one. */ body[data-sidebartype="mini-sidebar"] .left-sidebar:hover .logo-full { display: none !important; } body[data-sidebartype="mini-sidebar"] .left-sidebar:hover .logo-mini { display: inline-block !important; } /* (2) Hide ANY inline submenu unconditionally in mini. Covers the case where Bootstrap left .collapse.show on the