/* Site overrides on top of sewantic + styles.css */ /* Keep Semantic primary green on-brand in fleet chrome */ .ui.primary.button { background-color: #1d9940 !important; } .ui.primary.button:hover, .ui.primary.button:focus { background-color: #33ff66 !important; color: #0a0f0a !important; } /* Auth modals (core) still use Semantic basic modal; don't fight them */ body .auth.ui.modal { font-family: system-ui, sans-serif; } /* Dimmer over dark landing */ .ui.dimmer { background-color: rgba(5, 10, 5, 0.85) !important; } /* ---- Core account pages (profile etc.) in the dark phosphor theme ---- */ /* Scoped to .db-main so Semantic auth modals appended to keep their stock look. Only dark needs help; stock Semantic white already suits the light paper theme. */ [data-theme="dark"] .db-main .ui.header { color: var(--text-hi); } [data-theme="dark"] .db-main .ui.styled.accordion, [data-theme="dark"] .db-main .ui.styled.accordion .accordion { background: var(--panel); border: 1px solid var(--hairline); border-radius: 8px; box-shadow: var(--panel-shadow); } [data-theme="dark"] .db-main .ui.styled.accordion .title, [data-theme="dark"] .db-main .ui.styled.accordion .accordion .title { color: var(--text-hi); border-top: 1px solid var(--hairline); } [data-theme="dark"] .db-main .ui.styled.accordion .title:hover, [data-theme="dark"] .db-main .ui.styled.accordion .active.title, [data-theme="dark"] .db-main .ui.styled.accordion .accordion .title:hover, [data-theme="dark"] .db-main .ui.styled.accordion .accordion .active.title { color: var(--green); } [data-theme="dark"] .db-main .ui.styled.accordion .content, [data-theme="dark"] .db-main .ui.styled.accordion .accordion .content { background: var(--panel); } [data-theme="dark"] .db-main .ui.form .field > label { color: var(--muted); } [data-theme="dark"] .db-main .ui.form input[type="text"], [data-theme="dark"] .db-main .ui.form input[type="password"], [data-theme="dark"] .db-main .ui.form input[type="email"], [data-theme="dark"] .db-main .ui.form input[type="tel"], [data-theme="dark"] .db-main .ui.form input[type="number"], [data-theme="dark"] .db-main .ui.form textarea, [data-theme="dark"] .db-main .ui.form select { background: var(--panel-hi); color: var(--text-hi); border: 1px solid var(--hairline); border-radius: 6px; } [data-theme="dark"] .db-main .ui.form input:focus, [data-theme="dark"] .db-main .ui.form textarea:focus, [data-theme="dark"] .db-main .ui.form select:focus { background: var(--panel-hi); color: var(--text-hi); border-color: var(--green-dim); box-shadow: 0 0 8px rgba(51, 255, 102, 0.25); } [data-theme="dark"] .db-main .ui.form input::placeholder, [data-theme="dark"] .db-main .ui.form textarea::placeholder { color: var(--muted); opacity: 0.7; } /* Semantic selection dropdowns (date format, country pickers) */ [data-theme="dark"] .db-main .ui.selection.dropdown { background: var(--panel-hi); color: var(--text-hi); border: 1px solid var(--hairline); border-radius: 6px; } [data-theme="dark"] .db-main .ui.selection.dropdown .menu { background: var(--panel); border: 1px solid var(--hairline); } [data-theme="dark"] .db-main .ui.selection.dropdown .menu .item { color: var(--text); border-top: 1px solid var(--hairline); } [data-theme="dark"] .db-main .ui.selection.dropdown .menu .item:hover, [data-theme="dark"] .db-main .ui.selection.dropdown .menu .selected.item { background: var(--panel-hi); color: var(--green); } [data-theme="dark"] .db-main .ui.selection.dropdown > .text, [data-theme="dark"] .db-main .ui.selection.dropdown > .dropdown.icon { color: var(--text-hi); } /* Segments and messages */ [data-theme="dark"] .db-main .ui.segment { background: var(--panel); color: var(--text); border: 1px solid var(--hairline); box-shadow: none; } [data-theme="dark"] .db-main .ui.basic.segment { background: transparent; border: none; } [data-theme="dark"] .db-main .ui.success.message { background: rgba(51, 255, 102, 0.08); color: var(--green); box-shadow: 0 0 0 1px var(--green-dim) inset; } [data-theme="dark"] .db-main .ui.success.message .header, [data-theme="dark"] .db-main .ui.warning.message .header { color: var(--text-hi); } [data-theme="dark"] .db-main .ui.warning.message { background: rgba(255, 191, 63, 0.08); color: var(--amber); box-shadow: 0 0 0 1px var(--amber) inset; } /* Plain buttons (Cancel) and checkbox labels */ [data-theme="dark"] .db-main .ui.button:not(.primary):not(.green):not(.red):not(.basic) { background: var(--panel-hi); color: var(--text-hi); border: 1px solid var(--hairline); } [data-theme="dark"] .db-main .ui.button:not(.primary):not(.green):not(.red):not(.basic):hover { background: var(--panel); color: var(--green); } [data-theme="dark"] .db-main .ui.checkbox label, [data-theme="dark"] .db-main .ui.checkbox + label { color: var(--text); } /* Semantic slider/toggle paints the CHECKED label black !important; beat it */ [data-theme="dark"] .db-main .ui.slider.checkbox input:checked ~ label, [data-theme="dark"] .db-main .ui.toggle.checkbox input:checked ~ label, [data-theme="dark"] .db-main .ui.slider.checkbox input:focus:checked ~ label, [data-theme="dark"] .db-main .ui.toggle.checkbox input:focus:checked ~ label { color: var(--text) !important; } [data-theme="dark"] .db-main .ui.slider.checkbox input:checked ~ label:hover, [data-theme="dark"] .db-main .ui.toggle.checkbox input:checked ~ label:hover { color: var(--text-hi) !important; } /* Breadcrumbs on account pages */ [data-theme="dark"] .db-main .ui.breadcrumb, [data-theme="dark"] .db-main .ui.breadcrumb a { color: var(--muted); } [data-theme="dark"] .db-main .ui.breadcrumb a:hover { color: var(--green); } [data-theme="dark"] .db-main .ui.breadcrumb .active { color: var(--text-hi); }