/* ================== CE App Themes ================== Usage: set in base.html Add more themes as extra [data-theme="..."] blocks below. */ /* ===================== THEME: Neutral Pro (default) =================== */ :root[data-theme="neutral-pro"]{ /* Navbar */ --brand: #374151; /* Slate charcoal */ --nav-hover: #ff7f50; /* Coral Orange */ --nav-text: #ffffff; --dropdown-bg: #303846; --dropdown-text:#e5e7eb; /* Logo */ /* Logo */ --logo-CE: #fff; /* Pink (adjust as needed) */ --logo-App: #fff; /* Warm orange/gold (adjust as needed) */ --logo-bg: #ff7f50; /* Background square */ --logo-people: #ffffff; /* People inside */ --logo-height: 32px; /* Controls scaling of SVG */ /* Logo font */ .navbar .navbar-brand .logo-ce { color: #000; /* off-white */ font-family: Handlee, cursive !important; font-size: 1.3em; /* increase relative size */ font-weight: 700; /* keep it strong */ margin-right: 4px; } .navbar .navbar-brand .logo-app { color: #ffffff; /* pure white */ /* 'Roboto Slab' */ font-family: 'Handlee', cursive !important; font-size: 1.1em; /* slightly smaller */ font-weight: 700 !important; line-height: 1; margin-left: 0; } /* Page */ --background: #f7f7f5; --text-primary: #1f2937; --text-main: #1f2937; /* Buttons / accents */ --accent: #ff7f50; /* Save / primary */ --accent-hover: #e76e41; --accent-border:#e76e41; --danger: #dc3545; /* Delete */ --danger-hover: #b02a37; --secondary: #6b7280; /* Cancel / secondary */ --secondary-hover:#4b5563; /* Sizes */ --navbar-padding-y: .55rem; --logo-height: 44px; } /* -------------------------- */ /* Page-title */ .page-title { font-size: 2.10rem; font-weight: 600; margin-top: 1.5rem; /* space below navbar */ margin-bottom: 1rem; /* space before content */ color: var(--text-main); } /* Navbar */ .navbar, .navbar-custom{ background-color: var(--brand); } .navbar{ padding-top: var(--navbar-padding-y); padding-bottom: var(--navbar-padding-y); } .navbar-brand, .navbar .nav-link{ color: var(--nav-text); } .navbar .nav-link:hover, .navbar .nav-link:focus{ color: var(--nav-hover); } /* Dropdowns */ .navbar .dropdown-menu{ background-color: var(--dropdown-bg); border: none; } .navbar .dropdown-item{ color: var(--dropdown-text); } .navbar .dropdown-item:hover{ color: var(--nav-hover); background: transparent; } /* Logo image sizing */ .navbar .navbar-brand .logo svg { height: var(--logo-height); width: auto; display: block; } /* (Optional) force bg to follow the theme var */ .navbar .navbar-brand .logo rect { fill: var(--logo-bg) !important; } /* Wordmark colors – make these win over inherited link color */ .navbar .navbar-brand .logo-ce { color: var(--logo-CE) !important; font-weight: 800; letter-spacing: .3px; } .navbar .navbar-brand .logo-app { color: var(--logo-App) !important; font-weight: 700; margin-left: .15rem; } /* ==================== CURRENT THEME: Slate + Orange =========== */ :root[data-theme="slate-orange"]{ --brand:#475569; /* slate navbar */ --nav-text:#ffffff; /* menu/link text */ --nav-hover:#ff7f50; /* hover color (logo orange) */ --dropdown-bg:#3b4758; /* dropdown background */ --dropdown-text:#e5e7eb; /* dropdown text */ --background:#fdf2f2; /* soft peach page bg */ --text-primary: #1f2937; /* Dark slate text for strong readability */ --text-main:#334155; /* slate body text */ --accent:#ff7f50; /* primary btn + highlights */ --accent-hover:#e76e41; /* darker on hover */ --accent-border:#e76e41; /* button border */ --navbar-padding-y:.55rem; --logo-height:44px; } /* -------------------------- */ /* Navbar */ .navbar, .navbar-custom{ background-color: var(--brand); } .navbar{ padding-top: var(--navbar-padding-y); padding-bottom: var(--navbar-padding-y); } .navbar-brand, .navbar .nav-link{ color: var(--nav-text); } .navbar .nav-link:hover, .navbar .nav-link:focus{ color: var(--nav-hover); } /* Dropdowns */ .navbar .dropdown-menu{ background-color: var(--dropdown-bg); border: none; } .navbar .dropdown-item{ color: var(--dropdown-text); } .navbar .dropdown-item:hover{ color: var(--nav-hover); background: transparent; } /* Logo + wordmark */ .navbar-brand .logo{ height: var(--logo-height); width: auto; display: block; } .navbar-brand .brand-ce{ color: var(--nav-text); font-weight: 800; letter-spacing:.3px; } .navbar-brand .brand-app{ color: var(--accent); font-weight: 700; margin-left:.15rem; } /* Page */ body{ background-color: var(--background); color: var(--text-main); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Inter", "Nunito", sans-serif; } /* Buttons */ .btn-primary{ background-color: var(--accent); border-color: var(--accent-border); } .btn-primary:hover{ background-color: var(--accent-hover); border-color: var(--accent-hover); } /* Optional card look */ .main-content{ background:#fff; border-radius:.75rem; box-shadow:0 2px 6px rgba(0,0,0,.05); padding:2rem; } /* =============== THEME: GitHub Light ================ */ :root[data-theme="github-light"]{ /* Navbar */ --brand: #ffffff; /* white top bar */ --nav-text: #24292f; /* almost-black */ --nav-hover: #0969da; /* GitHub link blue */ --navbar-border: #d0d7de; /* subtle bottom border */ --dropdown-bg:#ffffff; --dropdown-text:#24292f; /* Page */ --background: #f6f8fa; /* GitHub page bg */ --surface: #ffffff; /* cards, panels */ --text-main: #24292f; --text-primary: #1f2937; /* Dark slate text for strong readability */ --text-muted: #57606a; --border: #d0d7de; /* neutral border */ /* Buttons / links */ --accent: #0969da; /* primary blue */ --accent-hover: #0759b3; --accent-border: #0759b3; /* Sizes */ --navbar-padding-y: .5rem; --logo-height: 36px; /* slightly smaller in a light header */ }