/* * brafa custom overrides — loaded after material-dashboard.css * ------------------------------------------------------------------ * Design tokens * --brafa-accent : #5e72e4 (focus rings, active borders) * --brafa-border : #e2e5ee (default input border) * --brafa-hover : #c8cee0 (hovered input border) * * NOTE: Every .form-control rule uses :not(.input-group-outline .form-control) * so that Material Dashboard's floating-label inputs (.input-group-outline) * are completely untouched — their borders, background and label animation * are handled entirely by material-dashboard.css. * ------------------------------------------------------------------ */ :root { --brafa-accent : #5e72e4; --brafa-accent-rgb : 94, 114, 228; --brafa-border : #e2e5ee; --brafa-hover-border: #c8cee0; --brafa-radius-input: 8px; --brafa-radius-sm : 6px; } /* ══════════════════════════════════════════════════════════════════ FORM INPUTS Scoped away from .input-group-outline via :not() so MD's floating- label pattern on the login / register pages is fully preserved. ══════════════════════════════════════════════════════════════════ */ /* ── Shared exclusion helper ──────────────────────────────────────────── Both .form-control and .form-select rules carry :not(.input-group-outline *) so Material Dashboard's floating-label inputs are never touched by our CSS. ─────────────────────────────────────────────────────────────────────── */ /* Base */ .form-control:not(.input-group-outline .form-control), .form-select:not(.input-group-outline .form-select):not(.input-group-outline select) { background-color : #fff !important; border : 1.5px solid var(--brafa-border) !important; border-radius : var(--brafa-radius-input) !important; color : #344767 !important; transition : border-color .18s ease, box-shadow .18s ease, background-color .18s ease !important; } /* Hover — border darkens slightly */ .form-control:not(.input-group-outline .form-control):hover:not(:focus):not(:disabled):not([readonly]), .form-select:not(.input-group-outline .form-select):not(.input-group-outline select):hover:not(:focus):not(:disabled) { border-color: var(--brafa-hover-border) !important; } /* Focus — accent border + soft glow ring */ .form-control:not(.input-group-outline .form-control):focus, .form-select:not(.input-group-outline .form-select):not(.input-group-outline select):focus { background-color: #fff !important; border-color : var(--brafa-accent) !important; box-shadow : 0 0 0 3px rgba(var(--brafa-accent-rgb), .13) !important; outline : none !important; } /* Disabled / readonly */ .form-control:not(.input-group-outline .form-control):disabled, .form-control:not(.input-group-outline .form-control)[readonly], .form-select:not(.input-group-outline .form-select):not(.input-group-outline select):disabled { background-color: #f4f6fb !important; border-color : #e9ecef !important; opacity : 1 !important; cursor : not-allowed; } /* Placeholder */ .form-control:not(.input-group-outline .form-control)::placeholder { color : #b0b7c3 !important; opacity: 1 !important; } /* Small variant */ .form-control-sm:not(.input-group-outline .form-control) { border-radius: var(--brafa-radius-sm) !important; font-size : 0.8125rem !important; padding : 0.3125rem 0.625rem !important; min-height : 32px; } /* Validation states */ .form-control:not(.input-group-outline .form-control).is-valid { border-color: #2dce89 !important; } .form-control:not(.input-group-outline .form-control).is-invalid { border-color: #f5365c !important; } .form-control:not(.input-group-outline .form-control).is-valid:focus { box-shadow: 0 0 0 3px rgba(45, 206, 137, .15) !important; } .form-control:not(.input-group-outline .form-control).is-invalid:focus { box-shadow: 0 0 0 3px rgba(245, 54, 92, .15) !important; } /* Input groups (standard, not outline) */ .input-group:not(.input-group-outline) .form-control:not(:first-child) { border-left: none !important; } .input-group:not(.input-group-outline) .form-control:not(:last-child) { border-right: none !important; } .input-group-text { background-color: #f8faff; border : 1.5px solid var(--brafa-border); color : #8392ab; transition : border-color .18s ease; } .input-group:not(.input-group-outline):focus-within .input-group-text { border-color: var(--brafa-accent); } /* ══════════════════════════════════════════════════════════════════ CHECKBOXES (square, not switches/radios) Material Dashboard's default is so faint that an unchecked checkbox is almost invisible against a white card. We give it a real border, a hover state, an accent fill on check, and a focus ring. ══════════════════════════════════════════════════════════════════ */ /* `html body` prefix bumps specificity to (0,1,3) so we beat MD's `.form-check:not(.form-switch) .form-check-input[type="checkbox"]` rule (0,3,1). Also explicitly targets `.month-cb` for the by-property tab checkboxes which sit outside any .form-check wrapper. */ html body .form-check-input[type="checkbox"], html body input.month-cb { width : 1.25em !important; height : 1.25em !important; margin-top : 0.15em !important; border : 2px solid var(--brafa-border) !important; border-radius : 4px !important; background-color : #fff !important; background-image : none !important; transition : border-color .15s ease, background-color .15s ease, box-shadow .15s ease !important; cursor : pointer; appearance : none !important; -webkit-appearance: none !important; flex-shrink : 0; position : relative; } html body .form-check-input[type="checkbox"]:hover:not(:disabled), html body input.month-cb:hover:not(:disabled) { border-color: var(--brafa-hover-border) !important; } html body .form-check-input[type="checkbox"]:focus, html body input.month-cb:focus { outline : none !important; box-shadow : 0 0 0 3px rgba(var(--brafa-accent-rgb), .22) !important; border-color: var(--brafa-accent) !important; } html body .form-check-input[type="checkbox"]:checked, html body input.month-cb:checked { background-color: var(--brafa-accent) !important; border-color : var(--brafa-accent) !important; /* White check-mark SVG */ background-image: url("data:image/svg+xml;utf8,") !important; background-size : 70% 70% !important; background-position: center !important; background-repeat : no-repeat !important; } /* Material Dashboard adds a ::after pseudo-element for its own check-mark inside .form-check wrappers — hide it so we only see our SVG. */ html body .form-check:not(.form-switch) .form-check-input[type="checkbox"]:after, html body .form-check:not(.form-switch) .form-check-input[type="checkbox"]:checked:after { display: none !important; content: none !important; } html body .form-check-input[type="checkbox"]:disabled, html body input.month-cb:disabled { background-color: #f4f6fb !important; border-color : #e9ecef !important; cursor : not-allowed; opacity : .55 !important; } /* Re-assert switch (pill) overrides — switches share .form-check-input but need to keep their wide pill shape. .form-switch .form-check-input has higher specificity (0,2,0) than [type="checkbox"] (0,1,1). */ .form-switch .form-check-input { width : 2em !important; height : 1em !important; border-radius: 2em !important; margin-top : 0.25em !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important; background-size: contain !important; background-position: left center !important; } .form-switch .form-check-input:checked { background-position: right center !important; } /* ══════════════════════════════════════════════════════════════════ BUTTONS MD already handles gradient-btn shadows well. We add a hover lift, a richer initial shadow on outline buttons, and a pressed "sink" on :active. ══════════════════════════════════════════════════════════════════ */ /* Universal lift on hover (non-disabled) */ .btn:not(:disabled):not(.disabled):hover { transform : translateY(-1px); } /* Pressed / active — sink back down */ .btn:not(:disabled):not(.disabled):active, .btn:not(:disabled):not(.disabled).active { transform : translateY(0) !important; } /* ── Outline buttons: give them a tangible initial shadow ── */ .btn-outline-primary, .btn-outline-secondary, .btn-outline-success, .btn-outline-info, .btn-outline-warning, .btn-outline-danger, .btn-outline-dark, .btn-outline-light { box-shadow: 0 1px 3px rgba(0, 0, 0, .07), 0 1px 2px rgba(0, 0, 0, .05) !important; } .btn-outline-primary:hover:not(:disabled), .btn-outline-secondary:hover:not(:disabled), .btn-outline-success:hover:not(:disabled), .btn-outline-info:hover:not(:disabled), .btn-outline-warning:hover:not(:disabled), .btn-outline-danger:hover:not(:disabled), .btn-outline-dark:hover:not(:disabled), .btn-outline-light:hover:not(:disabled) { box-shadow: 0 4px 10px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .08) !important; } .btn-outline-primary:active, .btn-outline-secondary:active, .btn-outline-success:active, .btn-outline-info:active, .btn-outline-warning:active, .btn-outline-danger:active, .btn-outline-dark:active, .btn-outline-light:active { box-shadow: 0 1px 2px rgba(0, 0, 0, .08) !important; } /* ── Gradient (solid) buttons: augment hover shadow ── */ .btn.bg-gradient-primary:hover, .btn.bg-gradient-secondary:hover, .btn.bg-gradient-success:hover, .btn.bg-gradient-info:hover, .btn.bg-gradient-warning:hover, .btn.bg-gradient-danger:hover, .btn.bg-gradient-dark:hover { box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .35), 0 4px 10px -2px rgba(0, 0, 0, .18) !important; } /* ── Small buttons ── */ .btn-sm { border-radius: var(--brafa-radius-sm) !important; } /* Icon-only square buttons (sync / pdf / email in the Billing tab). IMPORTANT: only target buttons whose ONLY child is the material-icons element (no text). Otherwise this collapses any button with an icon + text label (e.g. "Create invoice") to 32 px wide, mangling its label vertically. */ .btn.btn-sm.mb-0.w-100:has(> .material-icons:only-child) { min-width: 32px; width : 32px !important; padding : 4px !important; }