/* ========================================================================== SPCA Tshwane desk theme — re-skins the frappe v16 desk to match the SPCA shelter design family (see public/css/shelter.css / dashboard mockup). No frappe core edits: variables first, targeted selectors for the rest. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Design tokens + frappe variable mapping Vars are set on (light theme only) so they win over frappe's :root definitions for every descendant regardless of bundle load order. -------------------------------------------------------------------------- */ html:not([data-theme="dark"]) body { /* SPCA palette */ --spca-blue-900: #0e2a52; --spca-blue-800: #143a6e; --spca-blue-700: #1b4a8a; --spca-blue-600: #1f5aa8; --spca-blue-100: #dbe7f7; --spca-blue-50: #eef4fc; --spca-ink: #16233a; --spca-muted: #6b7a90; --spca-line: #e5ebf3; --spca-bg: #f4f7fb; /* layout colors */ --bg-color: var(--spca-bg); --fg-color: #ffffff; --card-bg: #ffffff; --navbar-bg: #ffffff; --subtle-accent: var(--spca-blue-50); --subtle-fg: #f7fafd; --fg-hover-color: var(--spca-blue-50); --highlight-color: var(--spca-blue-50); --surface-menu-bar: var(--spca-blue-800); --awesomebar-focus-bg: #ffffff; --awesomplete-hover-bg: var(--spca-blue-50); --modal-bg: #ffffff; --toast-bg: #ffffff; --popover-bg: #ffffff; /* text colors */ --heading-color: var(--spca-ink); --text-color: var(--spca-ink); --text-muted: var(--spca-muted); --text-light: #8295ab; --disabled-text-color: #9aa8ba; /* brand / primary */ --primary: var(--spca-blue-700); --primary-color: var(--spca-blue-700); --brand-color: var(--spca-blue-700); --btn-primary: var(--spca-blue-700); --border-primary: var(--spca-blue-700); --progress-bar-bg: var(--spca-blue-700); /* blue tints used by pills / badges / alerts */ --bg-blue: var(--spca-blue-100); --bg-light-blue: var(--spca-blue-50); --bg-dark-blue: var(--spca-blue-600); --text-on-blue: var(--spca-blue-700); --text-on-light-blue: var(--spca-blue-700); --text-on-dark-blue: var(--spca-blue-800); --alert-bg-info: var(--spca-blue-50); --alert-text-info: var(--spca-blue-700); /* buttons & controls */ --btn-default-bg: #ffffff; --btn-default-hover-bg: var(--spca-blue-50); --btn-ghost-hover-bg: var(--spca-blue-50); --control-bg: #ffffff; --control-bg-on-gray: #ffffff; --disabled-control-bg: #eef2f8; --input-disabled-bg: #eef2f8; /* borders & shadows */ --border-color: var(--spca-line); --dark-border-color: #d8e1ee; --table-border-color: var(--spca-line); --btn-group-border-color: #d8e1ee; --border-radius: 9px; --border-radius-sm: 8px; --border-radius-md: 10px; --border-radius-lg: 12px; --shadow-sm: 0 1px 2px rgba(22, 35, 58, 0.05); --card-shadow: 0 1px 2px rgba(22, 35, 58, 0.04); --btn-shadow: none; --focus-default: 0 0 0 3px rgba(31, 90, 168, 0.18); --checkbox-focus-shadow: 0 0 0 3px rgba(31, 90, 168, 0.18); --highlight-shadow: 1px 1px 10px var(--spca-blue-50), 0 0 4px var(--spca-blue-600); /* sidebar (dark navy) */ --sidebar-width: 232px; --sidebar-hover-color: rgba(255, 255, 255, 0.08); --sidebar-active-color: var(--spca-blue-600); --sidebar-border-color: rgba(255, 255, 255, 0.09); --divider-color: rgba(255, 255, 255, 0.14); /* misc */ --icon-stroke: #41546f; --scrollbar-thumb-color: #c3cfdd; --scrollbar-track-color: #eef2f8; --date-active-bg: var(--spca-blue-700); --date-range-bg: var(--spca-blue-50); --timeline-badge-bg: var(--spca-blue-100); --timeline-badge-color: var(--spca-blue-800); --skeleton-bg: #e9eff7; } ::selection { background: var(--spca-blue-100); } /* -------------------------------------------------------------------------- 2. Buttons -------------------------------------------------------------------------- */ body .btn { border-radius: 9px; font-weight: 500; transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s; } body .btn.btn-primary { background-color: var(--spca-blue-700); box-shadow: 0 1px 2px rgba(20, 58, 110, 0.28); } body .btn.btn-primary:hover { background-color: var(--spca-blue-800); color: #fff; } body .btn.btn-primary:active { background-color: var(--spca-blue-900) !important; color: #fff !important; } body .btn.btn-primary:focus-visible { box-shadow: 0 0 0 3px rgba(31, 90, 168, 0.28); } body .btn.btn-default, body .btn.btn-secondary { background-color: #fff; border: 1px solid var(--spca-line); box-shadow: 0 1px 2px rgba(22, 35, 58, 0.03); } body .btn.btn-default:hover, body .btn.btn-secondary:hover { background: var(--spca-blue-50); border-color: var(--spca-blue-100); color: var(--spca-blue-800); } body .btn.btn-primary-light { background-color: var(--spca-blue-50); color: var(--spca-blue-700); box-shadow: none; } body .btn.btn-primary-light:hover, body .btn.btn-primary-light:active { background-color: var(--spca-blue-100); color: var(--spca-blue-800); } body .btn.btn-ghost:hover { background: var(--spca-blue-50); color: var(--spca-blue-800); } /* -------------------------------------------------------------------------- 3. Top navbar -------------------------------------------------------------------------- */ body .navbar { background: #fff; border-bottom: 1px solid var(--spca-line); box-shadow: 0 1px 2px rgba(22, 35, 58, 0.03); } body .navbar .navbar-nav .nav-link, body .navbar .navbar-toggler { color: var(--spca-muted); } body .navbar .navbar-nav .nav-link:hover { color: var(--spca-blue-700); } /* awesomebar / global search */ body .search-bar input, body #awesomebar { background: var(--spca-bg); border: 1px solid var(--spca-line); border-radius: 10px; } body .search-bar input:focus, body #awesomebar:focus { background: #fff; border-color: var(--spca-blue-600); } /* -------------------------------------------------------------------------- 4. Desk sidebar — dark navy -------------------------------------------------------------------------- */ body .body-sidebar { background: linear-gradient(180deg, var(--spca-blue-800) 0%, var(--spca-blue-900) 100%); border-right: none; --icon-stroke: #c2d5f0; } /* brand block (PawTrack mascot + PawTrack / Tshwane SPCA) */ body .sidebar-header { padding: 14px 12px 12px; height: auto; border-bottom: 1px solid rgba(255, 255, 255, 0.1); margin-bottom: 6px; } body .sidebar-header .sidebar-item-icon, body .sidebar-header .header-logo-container { background: transparent !important; } body .sidebar-header .sidebar-item-icon, body .sidebar-header .header-logo { width: auto; } body .sidebar-header .header-logo img { height: 32px; width: auto; border-radius: 9px; background: #fff; padding: 1px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); } body .sidebar-header .header-title { color: #ffffff; font-weight: 700; font-size: 15px; letter-spacing: 0.4px; } body .sidebar-header .header-subtitle { color: #9db8dd; font-size: 11px; } body .sidebar-header .drop-icon, body .sidebar-header .drop-icon svg { color: #9db8dd; --icon-stroke: #9db8dd; } /* nav items */ body .body-sidebar .standard-sidebar-item .item-anchor { color: #d3e1f5; border-radius: 9px; } body .body-sidebar .standard-sidebar-item .item-anchor .sidebar-item-icon { color: #c2d5f0 !important; } body .body-sidebar .standard-sidebar-item .item-anchor .sidebar-item-icon svg { --icon-stroke: #c2d5f0; } body .body-sidebar .standard-sidebar-item:not(.active-sidebar):has(a:not(.section-break)):hover { background-color: rgba(255, 255, 255, 0.08); border-radius: 9px; } body .body-sidebar .standard-sidebar-item:not(.active-sidebar):hover .item-anchor, body .body-sidebar .standard-sidebar-item:not(.active-sidebar):hover .sidebar-item-icon { color: #ffffff !important; } /* active item — blue accent */ body .body-sidebar .active-sidebar { background: var(--spca-blue-600); box-shadow: none; border-radius: 9px; } body .body-sidebar .active-sidebar .item-anchor, body .body-sidebar .active-sidebar .item-anchor .sidebar-item-icon { color: #ffffff !important; font-weight: 600; } body .body-sidebar .active-sidebar .item-anchor .sidebar-item-icon svg { --icon-stroke: #ffffff; } /* section labels (Operations / Reports / …) */ body .body-sidebar .section-break { color: #7f9cc4 !important; } body .body-sidebar .section-break .sidebar-item-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.2px; font-weight: 600; } /* dividers */ body .body-sidebar .divider { border-top-color: rgba(255, 255, 255, 0.12); } /* getting-started / promo links */ body .body-sidebar .onboarding-sidebar, body .body-sidebar .promotional-banner { color: #d3e1f5; } /* bottom user button */ body .body-sidebar .dropdown-navbar-user .sidebar-user-button { border-radius: 9px; color: #ffffff; } body .body-sidebar .dropdown-navbar-user .sidebar-user-button:hover { background-color: rgba(255, 255, 255, 0.08); } body .body-sidebar .avatar-name-email span { color: #ffffff; } body .body-sidebar .avatar-name-email span.text-secondary { color: #9db8dd !important; } /* collapse toggle button on the sidebar edge */ body .body-sidebar .sidebar-toggle-btn { background: var(--spca-blue-800); border-color: rgba(255, 255, 255, 0.25); } body .body-sidebar .sidebar-toggle-btn svg { --icon-stroke: #d3e1f5; } body .body-sidebar .sidebar-toggle-btn:hover { background: var(--spca-blue-600); } /* sidebar scrollbar */ body .body-sidebar ::-webkit-scrollbar { width: 6px; } body .body-sidebar ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 3px; } body .body-sidebar ::-webkit-scrollbar-track { background: transparent; } /* -------------------------------------------------------------------------- 5. Page head, breadcrumbs, titles -------------------------------------------------------------------------- */ body .page-head { background: var(--spca-bg); border-bottom: 1px solid var(--spca-line); } body .breadcrumb-item, body .breadcrumb-item a { color: var(--spca-muted); font-size: 13px; } body .breadcrumb-item.active, body .breadcrumb-item a:hover { color: var(--spca-blue-800); } body .title-text { color: var(--spca-ink); font-weight: 600; } body .page-title .sub-heading, body .page-head .text-muted { color: var(--spca-muted); } /* -------------------------------------------------------------------------- 6. Workspace page — cards & widgets -------------------------------------------------------------------------- */ body .layout-main-section.frappe-card, body .frappe-card { background: #fff; border: 1px solid var(--spca-line); border-radius: 14px; box-shadow: 0 1px 2px rgba(22, 35, 58, 0.04); } body .widget { background: #fff; border: 1px solid var(--spca-line); border-radius: 14px; box-shadow: 0 1px 2px rgba(22, 35, 58, 0.04); } body .widget.widget-shadow:hover { box-shadow: 0 6px 18px rgba(20, 58, 110, 0.1); } body .widget .widget-head .widget-title, body .widget-group .widget-group-head .widget-group-title { color: var(--spca-ink); } body .widget .widget-subtitle, body .widget .widget-footer { color: var(--spca-muted); } /* shortcut tiles */ body .shortcut-widget-box:hover { border-color: var(--spca-blue-600); } /* links widget rows */ body .links-widget-box .link-item { border-radius: 8px; } body .links-widget-box .link-item:hover { background: var(--spca-blue-50); } /* number cards */ body .number-widget-box .widget-title, body .number-widget-box .number { color: var(--spca-ink); } /* -------------------------------------------------------------------------- 7. List views -------------------------------------------------------------------------- */ body .frappe-list .list-row-head { background: #f7fafd; border-radius: 9px; } body .frappe-list .list-row-head .list-subject, body .frappe-list .list-row-head .list-row-col { font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; font-weight: 600; color: var(--spca-muted); } body .list-row-container { border-radius: 9px; } body .list-row { border-bottom: 1px solid var(--spca-line); } body .list-subject { color: var(--spca-ink); } body .list-subject a:hover { color: var(--spca-blue-700); } body .list-paging-area, body .footnote-area { border-top-color: var(--spca-line); color: var(--spca-muted); } /* filter bar */ body .filter-section .filter-selector .btn-group .filter-label { background-color: var(--spca-blue-100); color: var(--spca-blue-800); } /* -------------------------------------------------------------------------- 8. Form pages -------------------------------------------------------------------------- */ body .form-section { border-top-color: var(--spca-line); } body .form-section .section-head { color: var(--spca-blue-800); font-weight: 600; } body .form-section .section-head:hover { color: var(--spca-blue-700); } body .form-section .section-body .form-column .frappe-control .control-label, body .frappe-control .control-label { color: #3d4c63; font-weight: 500; } /* inputs */ body .form-control, body .frappe-control .form-control, body .control-input .form-control { background-color: #fff; border: 1px solid var(--spca-line); border-radius: 9px; color: var(--spca-ink); } body .form-control:hover:not(:disabled):not([readonly]) { border-color: #d8e1ee; } body .form-control:focus, body .frappe-control .form-control:focus { background-color: #fff; border-color: var(--spca-blue-600); box-shadow: 0 0 0 3px rgba(31, 90, 168, 0.12); outline: none; } body .form-control:disabled, body .form-control[readonly] { background-color: #eef2f8; color: #9aa8ba; } body .form-control::placeholder { color: #9aa8ba; } /* form tabs */ body .form-tabs .nav-tabs { border-bottom-color: var(--spca-line); } body .form-tabs .nav-link { color: var(--spca-muted); } body .form-tabs .nav-link.active { color: var(--spca-blue-700); font-weight: 600; border-bottom-color: var(--spca-blue-700); } /* right-hand form sidebar */ body .form-sidebar { border-left: 1px solid var(--spca-line); } body .form-sidebar .sidebar-label, body .form-sidebar .text-muted { color: var(--spca-muted); } /* timeline / comments */ body .new-timeline::before { border-left-color: var(--spca-line); } body .timeline-item .timeline-content { border-color: var(--spca-line); border-radius: 12px; } /* -------------------------------------------------------------------------- 9. Overlays — dialogs, dropdowns, toasts, pickers -------------------------------------------------------------------------- */ body .modal-content { border: 1px solid var(--spca-line); border-radius: 14px; box-shadow: 0 12px 40px rgba(14, 42, 82, 0.18); } body .modal-header { border-bottom: 1px solid var(--spca-line); } body .modal-header .modal-title { color: var(--spca-ink); font-weight: 600; } body .modal-footer { border-top: 1px solid var(--spca-line); } body .dropdown-menu { border: 1px solid var(--spca-line); border-radius: 10px; box-shadow: 0 10px 28px rgba(22, 35, 58, 0.14); padding: 6px; } body .dropdown-menu .dropdown-item { border-radius: 6px; color: var(--spca-ink); font-size: 13px; } body .dropdown-menu .dropdown-item:hover { background: var(--spca-blue-50); color: var(--spca-blue-800); } body .dropdown-menu .dropdown-divider { border-top-color: var(--spca-line); } body .alert { border-radius: 10px; border: 1px solid var(--spca-line); box-shadow: 0 6px 20px rgba(22, 35, 58, 0.12); } /* awesomplete (link field autocomplete) */ body .awesomplete > ul { border: 1px solid var(--spca-line); border-radius: 10px; box-shadow: 0 10px 28px rgba(22, 35, 58, 0.14); } body .awesomplete > ul > li[aria-selected="true"], body .awesomplete > ul > li:hover { background: var(--spca-blue-50); } /* datepicker */ body .datepicker { border: 1px solid var(--spca-line); border-radius: 12px; box-shadow: 0 10px 28px rgba(22, 35, 58, 0.14); } /* -------------------------------------------------------------------------- 10. Desk home (app icon grid) -------------------------------------------------------------------------- */ body[data-route="/desk"] .desktop-icon, body[data-route="/"] .desktop-icon { border-radius: 14px; } /* desk-home navbar brand logo (src swapped to the PawTrack mascot by spca_theme.js) */ body header.desktop-navbar .navbar-home img, body img#brand-logo { border-radius: 8px; background: #fff; padding: 1px; box-shadow: 0 1px 4px rgba(20, 58, 110, 0.25); } /* PawTrack desktop tile — white tile so the navy mascot reads well */ body .desktop-icon[data-id="PawTrack"] .icon-container, body .desktop-icon[data-id="SPCA"] .icon-container { background-color: #ffffff !important; border: 1px solid var(--spca-line); } /* toggle switches — frappe hardcodes black via --invert-neutral for "on" */ body input:checked + .slider { background-color: var(--spca-blue-700); } /* -------------------------------------------------------------------------- 11. Login page (web page — scoped by data-path) -------------------------------------------------------------------------- */ body[data-path="login"] { background: var(--spca-bg, #f4f7fb); } body[data-path="login"] .page-card { background: #fff; border: 1px solid #e5ebf3; border-radius: 14px; box-shadow: 0 12px 40px rgba(14, 42, 82, 0.1); padding: 34px 30px; } body[data-path="login"] .app-logo { content: url("/assets/spca_forms/images/pawtrack-mascot.png"); width: auto; height: 64px; border-radius: 0; box-shadow: none; } body[data-path="login"] .page-card-head-text::before { content: "PawTrack"; display: block; font-size: 22px; font-weight: 700; color: #143a6e; letter-spacing: 0.3px; } body[data-path="login"] .page-card-head h4 { color: #16233a; font-weight: 700; font-size: 22px; } body[data-path="login"] .page-card-subtitle { color: #6b7a90; } body[data-path="login"] .form-group label { color: #3d4c63; font-weight: 600; font-size: 12px; } body[data-path="login"] .form-control { background: #fff; border: 1px solid #e5ebf3; border-radius: 9px; color: #16233a; height: 38px; } body[data-path="login"] .form-control:focus { border-color: #1f5aa8; box-shadow: 0 0 0 3px rgba(31, 90, 168, 0.14); } /* frappe's login bundle loads after this file and uses hardcoded var(--gray-900)/var(--gray-100) backgrounds — !important is required here */ body[data-path="login"] .page-card-actions .btn-login { background: #1b4a8a !important; color: #fff !important; border: none !important; border-radius: 9px; font-weight: 600; height: 38px; box-shadow: 0 1px 2px rgba(20, 58, 110, 0.28) !important; } body[data-path="login"] .page-card-actions .btn-login:hover, body[data-path="login"] .page-card-actions .btn-login:focus, body[data-path="login"] .page-card-actions .btn-login:active { background: #143a6e !important; color: #fff !important; } body[data-path="login"] .page-card-actions .btn-login-option, body[data-path="login"] .page-card-actions .btn-default:not(.btn-login) { background: #fff !important; border: 1px solid #e5ebf3 !important; color: #3d4c63 !important; border-radius: 9px; font-weight: 600; height: 38px; box-shadow: none !important; } body[data-path="login"] .page-card-actions .btn-login-option:hover, body[data-path="login"] .page-card-actions .btn-default:not(.btn-login):hover { background: #eef4fc !important; color: #1b4a8a !important; } body[data-path="login"] a { color: #1b4a8a; } body[data-path="login"] .forgot-password-message a { color: #6b7a90; } body[data-path="login"] .sign-up-message { color: #6b7a90; }