/* Theme Name: BuildSafe Dashboard Theme URI: https://example.buildsafe.pro/ Author: Build Safe Author URI: https://example.buildsafe.pro/ Description: Dashboard-style WordPress theme with an expandable left sidebar, Customizer-driven colors/fonts, and optional auto dark mode. Version: 1.0.16 Requires at least: 6.0 Tested up to: 6.5 Requires PHP: 7.4 License: GPLv2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: buildsafe-dashboard Tags: custom-colors, custom-logo, flexible-header, theme-options, left-sidebar, responsive-layout */ /* ------------------------------ CSS variables (set via Customizer) ------------------------------ */ :root { /* NOTE: Core variables are injected by the Customizer in via functions.php. The values below act as safe fallbacks if Customizer output is missing. */ --bsd-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --bsd-heading-font-family: inherit; --bsd-font-size: 16px; --bsd-bg: #f5f6f8; --bsd-surface: #ffffff; --bsd-header-bg: #ffffff; --bsd-footer-bg: #ffffff; --bsd-sidebar-bg: #ffffff; --bsd-text: #233244; --bsd-muted: #667085; --bsd-border: #e5e7eb; --bsd-link: #1e73be; --bsd-button-bg: #1e73be; --bsd-button-text: #ffffff; --bsd-sidebar-hover: #f1f5f9; --bsd-sidebar-active: #e8f1fb; --bsd-radius: 12px; --bsd-shadow: 0 8px 22px rgba(16, 24, 40, 0.08); --bsd-sidebar-collapsed: 64px; --bsd-sidebar-expanded: 250px; --bsd-header-height: 56px; --bsd-header-logo-height: 34px; } html, body { height: 100%; } * { box-sizing: border-box; } body { margin: 0; background: var(--bsd-bg); color: var(--bsd-text); font-family: var(--bsd-font-family); font-size: var(--bsd-font-size); line-height: 1.5; } h1, h2, h3, h4, h5, h6 { font-family: var(--bsd-heading-font-family); margin-top: 0; } a { color: var(--bsd-link); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; height: auto; } /* WordPress alignment helpers */ .alignwide { max-width: 1200px; } .alignfull { max-width: none; width: 100%; } /* Buttons / inputs */ button, .button, input[type="submit"], input[type="button"], .wp-element-button { appearance: none; border: 0; background: var(--bsd-button-bg); color: var(--bsd-button-text); border-radius: 10px; padding: 10px 14px; cursor: pointer; font-weight: 600; } button:hover, .button:hover, input[type="submit"]:hover, input[type="button"]:hover, .wp-element-button:hover { filter: brightness(0.95); } input[type="text"], input[type="email"], input[type="password"], input[type="search"], textarea, select { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--bsd-border); background: var(--bsd-surface); color: var(--bsd-text); } /* ------------------------------ Layout ------------------------------ */ .bsd-app { /* Use fixed header/sidebar for maximum stability (avoids intermittent sticky overlap). */ min-height: 100vh; width: 100%; position: relative; } /* Sidebar */ .bsd-sidebar { position: fixed; top: 0; left: 0; height: 100vh; width: var(--bsd-sidebar-collapsed); background: var(--bsd-sidebar-bg); border-right: 1px solid var(--bsd-border); transition: width 160ms ease; display: flex; flex-direction: column; z-index: 60; /* above content */ } @media (hover: hover) and (pointer: fine) { .bsd-sidebar:hover { width: var(--bsd-sidebar-expanded); } } .bsd-sidebar.bsd-expanded { width: var(--bsd-sidebar-expanded); } .bsd-sidebar-top { height: var(--bsd-header-height); display: flex; align-items: center; gap: 10px; padding: 0 12px; border-bottom: 1px solid var(--bsd-border); } /* Sidebar toggle button (hamburger) */ .bsd-sidebar-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--bsd-border); color: var(--bsd-text); background: transparent; } .bsd-sidebar-toggle:hover { background: rgba(2,6,23,0.04); text-decoration: none; } .bsd-mobile-menu-toggle { display: none; flex: 0 0 auto; } .bsd-nav { padding: 10px 8px; overflow: auto; } .bsd-nav ul { list-style: none; margin: 0; padding: 0; } .bsd-nav li { margin: 4px 0; } .bsd-nav a { display: flex; align-items: center; gap: 10px; padding: 10px 10px; border-radius: 12px; color: var(--bsd-text); font-weight: 600; } .bsd-nav a:hover { background: var(--bsd-sidebar-hover); text-decoration: none; } .bsd-nav .current-menu-item > a, .bsd-nav .current_page_item > a { background: var(--bsd-sidebar-active); color: var(--bsd-link); } .bsd-icon { width: 24px; min-width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; color: var(--bsd-sidebar-icon); } .bsd-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity 160ms ease; } .bsd-sidebar.bsd-expanded .bsd-label { opacity: 1; } @media (hover: hover) and (pointer: fine) { .bsd-sidebar:hover .bsd-label { opacity: 1; } } /* Sidebar secondary logo area */ .bsd-sidebar-bottom { margin-top: auto; padding: 10px 12px 14px; border-top: 1px solid var(--bsd-border); } .bsd-sidebar-bottom-inner { border-radius: 14px; background: rgba(2, 6, 23, 0.03); padding: 12px; } [data-bsd-theme="dark"] .bsd-sidebar-bottom-inner { background: rgba(255, 255, 255, 0.06); } .bsd-secondary-text { font-size: 12px; color: var(--bsd-muted); margin: 0; } .bsd-secondary-logo { display: flex; align-items: center; justify-content: center; padding: 8px 0; } .bsd-secondary-logo img { max-height: 44px; width: auto; } .bsd-sidebar-bottom .bsd-secondary-text, .bsd-sidebar-bottom .bsd-secondary-logo, .bsd-sidebar-bottom .bsd-secondary-text-below { opacity: 0; transition: opacity 160ms ease; } .bsd-sidebar.bsd-expanded .bsd-sidebar-bottom .bsd-secondary-text, .bsd-sidebar.bsd-expanded .bsd-sidebar-bottom .bsd-secondary-logo, .bsd-sidebar.bsd-expanded .bsd-sidebar-bottom .bsd-secondary-text-below { opacity: 1; } @media (hover: hover) and (pointer: fine) { .bsd-sidebar:hover .bsd-sidebar-bottom .bsd-secondary-text, .bsd-sidebar:hover .bsd-sidebar-bottom .bsd-secondary-logo, .bsd-sidebar:hover .bsd-sidebar-bottom .bsd-secondary-text-below { opacity: 1; } } /* Main column */ .bsd-main { margin-left: var(--bsd-sidebar-collapsed); min-height: 100vh; width: calc(100% - var(--bsd-sidebar-collapsed)); } .bsd-header { height: var(--bsd-header-height); background: var(--bsd-header-bg); border-bottom: 1px solid var(--bsd-border); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; position: fixed; top: 0; left: var(--bsd-sidebar-collapsed); width: calc(100% - var(--bsd-sidebar-collapsed)); z-index: 55; /* below sidebar, above content */ } .bsd-header-left, .bsd-header-right { display: flex; align-items: center; gap: 12px; } .bsd-header-logo img { max-height: var(--bsd-header-logo-height); width: auto; display: block; } .bsd-site-name { font-weight: 800; } /* Optional top-right menu */ .bsd-topright-menu ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; } .bsd-topright-menu a { display: inline-flex; align-items: center; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--bsd-border); color: var(--bsd-text); background: transparent; font-weight: 600; } .bsd-topright-menu a:hover { background: rgba(2,6,23,0.04); text-decoration: none; } .bsd-icon-btn { background: transparent; border: 1px solid var(--bsd-border); color: var(--bsd-text); padding: 8px 10px; border-radius: 12px; } .bsd-icon-btn:hover { background: rgba(2,6,23,0.04); } .bsd-content { padding: 18px; padding-top: calc(var(--bsd-header-height) + 18px); } /* User dropdown */ .bsd-user { position: relative; } .bsd-user-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--bsd-border); border-radius: 12px; color: var(--bsd-text); background: transparent; font-weight: 700; } .bsd-user-btn:hover { background: rgba(2,6,23,0.04); text-decoration: none; } .bsd-user-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bsd-user-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 180px; background: var(--bsd-surface); border: 1px solid var(--bsd-border); border-radius: 12px; box-shadow: var(--bsd-shadow); padding: 6px; display: none; z-index: 60; } .bsd-user-menu.open { display: block; } .bsd-user-menu a { display: block; padding: 10px 10px; border-radius: 10px; color: var(--bsd-text); font-weight: 600; } .bsd-user-menu a:hover { background: var(--bsd-sidebar-hover); text-decoration: none; } .bsd-card { background: var(--bsd-surface); border: 1px solid var(--bsd-border); border-radius: var(--bsd-radius); box-shadow: var(--bsd-shadow); padding: 16px; } /* Footer */ .bsd-footer { background: var(--bsd-footer-bg); border-top: 1px solid var(--bsd-border); padding: 14px 18px; color: var(--bsd-muted); font-size: 13px; } /* ------------------------------ Mobile/off-canvas sidebar ------------------------------ */ .bsd-overlay { position: fixed; inset: 0; background: rgba(2, 6, 23, 0.55); display: none; z-index: 45; } @media (max-width: 991px) { .bsd-sidebar { position: fixed; left: 0; top: 0; height: 100vh; transform: translateX(-110%); transition: transform 200ms ease; width: var(--bsd-sidebar-expanded); } .bsd-sidebar.bsd-mobile-open { transform: translateX(0); } .bsd-sidebar.bsd-mobile-open .bsd-label, .bsd-sidebar.bsd-mobile-open .bsd-sidebar-bottom .bsd-secondary-text, .bsd-sidebar.bsd-mobile-open .bsd-sidebar-bottom .bsd-secondary-logo, .bsd-sidebar.bsd-mobile-open .bsd-sidebar-bottom .bsd-secondary-text-below { opacity: 1; } .bsd-overlay.bsd-overlay-open { display: block; } .bsd-main { margin-left: 0; width: 100%; } .bsd-header { left: 0; width: 100%; padding: 0 12px; } .bsd-mobile-menu-toggle { display: inline-flex; } .bsd-header-left, .bsd-header-right { gap: 8px; } .bsd-topright-menu { display: none; } .bsd-header-logo { min-width: 0; } .bsd-header-logo img { max-height: 30px; } .bsd-user-btn { padding: 8px; } .bsd-user-name { display: none; } .bsd-user-btn .dashicons-arrow-down-alt2 { font-size: 16px; width: 16px; height: 16px; } .bsd-icon-btn { padding: 8px; } } @media (max-width: 640px) { .bsd-header { gap: 8px; } .bsd-header-left, .bsd-header-right { min-width: 0; } .bsd-header-right { margin-left: auto; } .bsd-user-menu { right: 0; left: auto; min-width: 170px; } } /* ------------------------------ Dark theme helpers ------------------------------ */ [data-bsd-theme="dark"] { color-scheme: dark; } [data-bsd-theme="dark"] body { background: var(--bsd-bg); color: var(--bsd-text); } /* Dark mode contrast fix: Some plugins/blocks render with hard-coded light (white) backgrounds. In dark mode our global text color is light, which can reduce contrast inside those light containers. The selectors below restore dark text for the most common "light background" cases. */ [data-bsd-theme="dark"] .has-white-background-color, [data-bsd-theme="dark"] .has-very-light-gray-background-color, [data-bsd-theme="dark"] .has-light-gray-background-color, [data-bsd-theme="dark"] .has-pale-pink-background-color, [data-bsd-theme="dark"] .has-cyan-bluish-gray-background-color { color: #0b1220 !important; } /* Inline white background styles (common in plugin containers) */ [data-bsd-theme="dark"] :is(main, .bsd-content, .entry-content, .site-content) :is( [style*="background:#fff"], [style*="background: #fff"], [style*="background-color:#fff"], [style*="background-color: #fff"], [style*="background:#ffffff"], [style*="background: #ffffff"], [style*="background-color:#ffffff"], [style*="background-color: #ffffff"], [style*="background:rgb(255,255,255"], [style*="background-color:rgb(255,255,255"], [style*="background: rgba(255, 255, 255"], [style*="background-color: rgba(255, 255, 255"] ) { color: #0b1220 !important; } /* Reliable contrast fix for light plugin containers: JS marks any detected "light surface" containers with .bsd-light-surface. We then force readable dark text inside those regions while keeping the rest of the site in dark mode. */ [data-bsd-theme="dark"] .bsd-light-surface { color: #0b1220 !important; } [data-bsd-theme="dark"] .bsd-light-surface * { color: inherit !important; } /* Form controls inside "light surface" containers: In dark mode, our base input styles use dark variables. When a plugin renders a light (white/gray) container, the JS marks it as .bsd-light-surface and we force dark text for readability. However, inputs inside that container would keep a dark background while inheriting dark text, resulting in "blacked out" fields. These rules keep form controls light inside light-surface areas. */ [data-bsd-theme="dark"] .bsd-light-surface :is( input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="url"], input[type="tel"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"], textarea, select ) { background: #ffffff !important; color: #0b1220 !important; border-color: #d0d5dd !important; } [data-bsd-theme="dark"] .bsd-light-surface :is(input, textarea)::placeholder { color: #667085 !important; } [data-bsd-theme="dark"] .bsd-light-surface a, [data-bsd-theme="dark"] .bsd-light-surface a:visited { color: #0b5bd3 !important; } [data-bsd-theme="dark"] .bsd-light-surface a:hover { color: #084aa8 !important; } [data-bsd-theme="dark"] .bsd-light-surface :is(svg, path, .dashicons) { fill: currentColor; } /* Improve editor blocks */ .wp-block-table table { width: 100%; } /* ------------------------------ Management Controls Page ------------------------------ */ .bs-mgmt-controls { display: flex; flex-direction: column; gap: 28px; } .bs-mgmt-shell { padding: 22px; border: 1px solid var(--bsd-border); border-radius: 28px; background: var(--bsd-surface); box-shadow: var(--bsd-shadow); } .bs-mgmt-controls-title { margin: 0; font-size: clamp(2rem, 2.8vw, 3rem); line-height: 1.1; letter-spacing: -0.02em; } .bs-mgmt-controls-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; } .bs-mgmt-controls-column { display: flex; flex-direction: column; gap: 20px; min-width: 0; } .bs-mgmt-card { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 18px; align-items: start; min-height: 138px; padding: 22px 20px; border: 1px solid var(--bsd-border); border-radius: 24px; background: var(--bsd-surface); box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08); color: var(--bsd-text); transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease; } .bs-mgmt-card:hover, .bs-mgmt-card:focus-within { transform: translateY(-2px); border-color: color-mix(in srgb, var(--bsd-link) 35%, var(--bsd-border)); box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12); } .bs-mgmt-card-icon { width: 72px; height: 72px; border-radius: 22px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--bsd-link) 10%, var(--bsd-surface)); color: var(--bsd-link); font-size: 36px; } .bs-mgmt-card-icon .dashicons { width: 36px; height: 36px; font-size: 36px; } .bs-mgmt-card-body { min-width: 0; } .bs-mgmt-card-title { margin: 2px 0 8px; font-size: clamp(1.35rem, 1.7vw, 1.8rem); line-height: 1.15; } .bs-mgmt-card-link { color: var(--bsd-link); text-decoration: none; } .bs-mgmt-card-link:hover { text-decoration: underline; } .bs-mgmt-card-link:focus-visible { outline: 3px solid color-mix(in srgb, var(--bsd-link) 26%, transparent); outline-offset: 3px; border-radius: 6px; } .bs-mgmt-card-text { margin: 0; color: var(--bsd-text); opacity: 0.9; line-height: 1.6; } [data-bsd-theme="dark"] .bs-mgmt-card { box-shadow: 0 18px 40px rgba(2, 6, 23, 0.45); } [data-bsd-theme="dark"] .bs-mgmt-card-icon { background: color-mix(in srgb, var(--bsd-link) 18%, var(--bsd-surface)); } @media (max-width: 1100px) { .bs-mgmt-controls-grid { grid-template-columns: 1fr; gap: 20px; } .bs-mgmt-card { min-height: 0; } } @media (max-width: 640px) { .bs-mgmt-shell { padding: 18px 14px; border-radius: 22px; } .bs-mgmt-controls { gap: 22px; } .bs-mgmt-card { grid-template-columns: 1fr; gap: 14px; min-height: 0; padding: 18px 16px; } .bs-mgmt-card-icon { width: 60px; height: 60px; border-radius: 18px; font-size: 30px; } .bs-mgmt-card-icon .dashicons { width: 30px; height: 30px; font-size: 30px; } .bs-mgmt-card-title { margin-top: 0; font-size: 1.3rem; } .bs-mgmt-card-text { font-size: 0.98rem; } }