/* * Custom overrides on top of the Elastic skin. * Loaded after elastic's own stylesheet (see templates/includes/layout.html), * so any rule here wins. * * Design system: shadcn/ui-style tokens (Zinc neutrals + Blue accent), * one light and one dark set. Elastic itself toggles dark mode by adding * `dark-mode` to (see skins/elastic/styles/dark.less), so nearly * every rule below is written ONCE against a var(--token) and simply * repaints itself when that class is present - only a handful of * non-color tweaks are duplicated under html.dark-mode. */ /* ========================================================================== 1. Design tokens ========================================================================== */ :root { --background: hsl(0 0% 100%); --foreground: hsl(240 10% 3.9%); --card: hsl(0 0% 100%); --popover: hsl(0 0% 100%); --popover-foreground: hsl(240 10% 3.9%); --primary: hsl(221.2 83.2% 53.3%); --primary-foreground: hsl(210 40% 98%); --primary-hover: hsl(221.2 83.2% 47%); --primary-shadow: hsl(221.2 83.2% 53.3% / 35%); --secondary: hsl(240 4.8% 95.9%); --secondary-foreground: hsl(240 5.9% 10%); --secondary-hover: hsl(240 4.8% 90%); --muted: hsl(240 4.8% 95.9%); --muted-foreground: hsl(240 3.8% 46.1%); --accent: hsl(240 4.8% 95.9%); --accent-foreground: hsl(240 5.9% 10%); --destructive: hsl(0 84.2% 60.2%); --destructive-foreground: hsl(0 0% 98%); --destructive-hover: hsl(0 72% 51%); --success: hsl(142.1 76.2% 36.3%); --success-foreground: hsl(0 0% 100%); --warning: hsl(32.5 94.6% 43.7%); --warning-foreground: hsl(0 0% 100%); --border: hsl(240 5.9% 90%); --input: hsl(240 5.9% 90%); --ring: hsl(221.2 83.2% 53.3%); --ring-shadow: hsl(221.2 83.2% 53.3% / 25%); --sidebar: hsl(240 5% 97%); --sidebar-foreground: hsl(240 5.9% 30%); --sidebar-border: hsl(240 5.9% 90%); --list-selected-bg: hsl(221.2 83.2% 95.5%); --list-selected-fg: hsl(221.2 70% 40%); --shadow-sm: 0 1px 2px hsl(240 5.9% 10% / 6%); --shadow-md: 0 4px 14px hsl(240 5.9% 10% / 10%); --shadow-lg: 0 10px 30px hsl(240 5.9% 10% / 14%); --radius: 0.65rem; --radius-sm: 0.4rem; --radius-lg: 0.9rem; } html.dark-mode { --background: hsl(240 10% 6%); --foreground: hsl(0 0% 95%); --card: hsl(240 8% 9.5%); --popover: hsl(240 8% 9.5%); --popover-foreground: hsl(0 0% 95%); --primary: hsl(217.2 91.2% 59.8%); --primary-foreground: hsl(222.2 47.4% 11.2%); --primary-hover: hsl(217.2 91.2% 66%); --primary-shadow: hsl(217.2 91.2% 59.8% / 35%); --secondary: hsl(240 4% 16%); --secondary-foreground: hsl(0 0% 95%); --secondary-hover: hsl(240 4% 21%); --muted: hsl(240 4% 16%); --muted-foreground: hsl(240 5% 65%); --accent: hsl(240 4% 16%); --accent-foreground: hsl(0 0% 95%); --destructive: hsl(0 72% 51%); --destructive-foreground: hsl(0 0% 98%); --destructive-hover: hsl(0 72% 57%); --success: hsl(142.1 70.6% 45.3%); --success-foreground: hsl(144 80% 96%); --warning: hsl(32.5 94.6% 55%); --warning-foreground: hsl(26 90% 97%); --border: hsl(240 4% 18%); --input: hsl(240 4% 20%); --ring: hsl(217.2 91.2% 59.8%); --ring-shadow: hsl(217.2 91.2% 59.8% / 30%); --sidebar: hsl(240 8% 8%); --sidebar-foreground: hsl(240 5% 75%); --sidebar-border: hsl(240 4% 16%); --list-selected-bg: hsl(217.2 45% 19%); --list-selected-fg: hsl(217.2 91.2% 72%); --shadow-sm: 0 1px 2px hsl(0 0% 0% / 30%); --shadow-md: 0 4px 14px hsl(0 0% 0% / 40%); --shadow-lg: 0 10px 30px hsl(0 0% 0% / 50%); } /* ========================================================================== 2. Base ========================================================================== */ html:not(.touch) { scrollbar-color: var(--border) transparent; } html:not(.touch) ::-webkit-scrollbar-track { background-color: transparent; } html:not(.touch) ::-webkit-scrollbar-thumb { background-color: var(--border); border-radius: 999px; } body { background-color: var(--background); color: var(--foreground); -webkit-font-smoothing: antialiased; } a { color: var(--primary); } a:hover { color: var(--primary-hover); } html.dark-mode #logo { opacity: .92; } /* ========================================================================== 3. Layout panels ========================================================================== */ #layout > div > .header, #layout > div > .footer, .popup .listbox .footer { background-color: var(--card); border-color: var(--border); color: var(--foreground); } #layout-sidebar { background-color: var(--sidebar); color: var(--sidebar-foreground); border-color: var(--sidebar-border); } #layout-list { background-color: var(--card); border-color: var(--border); } #layout-content { background-color: var(--background); } /* Task menu (leftmost icon rail): follow the theme instead of a fixed dark navy panel, with a soft rounded "pill" for the active task. */ #layout-menu .popover-header { background-color: var(--sidebar) !important; border-right: 1px solid var(--sidebar-border); } #taskmenu .special-buttons { background-color: var(--sidebar); } #taskmenu a { color: var(--sidebar-foreground); transition: background-color .12s ease, color .12s ease; } @media screen and (min-width: 481px) { #taskmenu a { margin: .15rem .4rem; border-radius: var(--radius-sm); width: calc(5.6rem - .8rem); } } #taskmenu a:hover { color: var(--accent-foreground); background: var(--accent) !important; } #taskmenu a.selected { color: var(--primary) !important; background: var(--accent) !important; } #taskmenu a.selected:hover { background: var(--accent) !important; } #taskmenu a.logout { color: var(--destructive) !important; } #taskmenu a.logout:hover { color: var(--destructive-foreground) !important; background: var(--destructive) !important; } /* Search bar: recolor + gentle focus highlight instead of a flat line */ .searchbar { background-color: var(--muted); border-color: var(--border); transition: box-shadow .12s ease; } .searchbar form:before { color: var(--muted-foreground); } .searchbar input { color: var(--foreground); } .searchbar:focus-within { box-shadow: inset 0 -2px 0 var(--primary); } .searchbar a { color: var(--muted-foreground); } .searchbar a.selected { color: var(--success); } /* ========================================================================== 4. Buttons ========================================================================== */ .btn, a.button, button.btn { border-radius: var(--radius-sm); transition: background-color .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease; } .btn:focus { box-shadow: 0 0 0 .2rem var(--ring-shadow); } .btn-link { color: var(--primary); } .btn-secondary { color: var(--secondary-foreground); background: var(--secondary); border-color: var(--secondary); } .btn-secondary:hover, .btn-secondary:focus { background: var(--secondary-hover); border-color: var(--secondary-hover); } .btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active { background: var(--secondary-hover); border-color: var(--secondary-hover); } .btn-primary { color: var(--primary-foreground); background: var(--primary); border-color: var(--primary); } .btn-primary:hover, .btn-primary:focus { background: var(--primary-hover); border-color: var(--primary-hover); } .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active { background: var(--primary-hover); border-color: var(--primary-hover); } .btn-danger { color: var(--destructive-foreground); background: var(--destructive); border-color: var(--destructive); } .btn-danger:hover, .btn-danger:focus { background: var(--destructive-hover); border-color: var(--destructive-hover); } .btn-danger:not(:disabled):not(.disabled):active, .btn-danger:not(:disabled):not(.disabled).active { background: var(--destructive-hover); border-color: var(--destructive-hover); } /* Toolbar / header icon buttons and popup menu rows */ .header a.button.icon, .menu.toolbar a, .menu.toolbar .dropbutton { color: var(--foreground); border-radius: var(--radius-sm); transition: background-color .12s ease, color .12s ease; } .header a.button.icon:not(.disabled):hover, .header a.button.icon:not(.disabled):focus, .menu.toolbar .dropbutton:not(.disabled):hover, .menu a:not(.disabled):hover, .menu a:not(.disabled):focus, .popupmenu .listing li > a:not(.disabled):hover { background-color: var(--accent) !important; color: var(--accent-foreground); } .menu.toolbar a.selected { color: var(--success); background: transparent; } .floating-action-buttons a.button { background: var(--primary); box-shadow: 0 6px 18px var(--primary-shadow); } .floating-action-buttons a.button:hover { background: var(--primary-hover); } /* ========================================================================== 5. Forms & inputs ========================================================================== */ .form-control, .custom-file-label, textarea, select { background-color: var(--background); color: var(--foreground); border-color: var(--input); border-radius: var(--radius-sm); transition: border-color .12s ease, box-shadow .12s ease; } .form-control:focus { background-color: var(--background); color: var(--foreground); border-color: var(--ring); box-shadow: 0 0 0 .2rem var(--ring-shadow); } .form-control.is-invalid { border-color: var(--destructive); } .form-control.is-invalid:focus { border-color: var(--destructive); box-shadow: 0 0 0 .2rem hsl(0 84.2% 60.2% / 25%); } .form-control::placeholder { color: var(--muted-foreground); } .input-group-text { color: var(--foreground); background-color: var(--muted); border-color: var(--input); } .multi-input:not(.is-invalid) > .content, .recipient-input { border-color: var(--input); border-radius: var(--radius-sm); } .multi-input:not(.is-invalid) > .content.focused, .recipient-input.focus { border-color: var(--ring); box-shadow: 0 0 0 .2rem var(--ring-shadow); } .recipient-input .recipient { background-color: var(--secondary); border-color: var(--secondary); border-radius: 999px; } .custom-switch .custom-control-label::before { background-color: var(--border); } .custom-switch .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--primary); border-color: var(--primary); } .invalid-feedback { color: var(--destructive); } /* ========================================================================== 6. Message list & folder list ========================================================================== */ .listing li a, .listing tbody td, .listing tbody td a { color: var(--foreground); } .listing li ul, .listing tbody td, .listing li { border-color: var(--border); } .listing li.selected, .listing li.selected > a, .listing tr.selected td { color: var(--list-selected-fg); background-color: var(--list-selected-bg); } .messagelist tr.selected td:first-child, .listing li.selected { border-top-left-radius: var(--radius-sm); border-bottom-left-radius: var(--radius-sm); } .messagelist tr.selected td:last-child { border-top-right-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); } .listing li:not(.selected):hover, .messagelist tr:not(.selected):hover td { background-color: var(--muted); } .messagelist tr:not(.flagged):not(.deleted) td.subject span.size, .messagelist tr:not(.flagged):not(.deleted) td.subject span.date, .messagelist tr:not(.flagged):not(.deleted) td.subject span.fromto { color: var(--muted-foreground); } .folderlist li.mailbox .unreadcount { background-color: var(--primary); color: var(--primary-foreground); border-radius: 999px; font-weight: 600; } .listing-info, .listing span.secondary { color: var(--muted-foreground); } /* ========================================================================== 7. Popovers, dropdowns, dialogs ========================================================================== */ .popover, .popupmenu, .ui-menu, .ui-widget-content, .ui-widget-header { background-color: var(--popover); color: var(--popover-foreground); border-color: var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); } .popover-body { color: var(--popover-foreground); } .popover .menu li.separator { background-color: transparent; border-color: var(--border); } .ui-dialog { background-color: var(--card); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } .ui-dialog .ui-dialog-titlebar, .ui-dialog .ui-dialog-buttonpane { border-color: var(--border); } .ui-dialog .ui-dialog-title { color: var(--foreground); } .ui-widget-overlay, .popover-overlay { background-color: hsl(240 10% 4% / 55%); } .ui-datepicker { border-radius: var(--radius); } .ui-datepicker .ui-state-highlight, .ui-datepicker.ui-widget-content .ui-state-highlight { color: var(--primary); background-color: var(--accent); border-radius: var(--radius-sm); } .ui-menu .ui-state-active { background-color: var(--accent) !important; color: var(--accent-foreground); border-radius: var(--radius-sm); } /* ========================================================================== 8. Alerts / messages ========================================================================== */ .ui.alert.boxinformation, #messagestack .alert-info { background-color: color-mix(in srgb, var(--primary) 14%, var(--background)); color: var(--foreground); border-left: 3px solid var(--primary); } .ui.alert.boxerror, #messagestack .alert-danger { background-color: color-mix(in srgb, var(--destructive) 14%, var(--background)); color: var(--foreground); border-left: 3px solid var(--destructive); } .ui.alert.boxwarning, #messagestack .alert-warning { background-color: color-mix(in srgb, var(--warning) 16%, var(--background)); color: var(--foreground); border-left: 3px solid var(--warning); } .ui.alert.boxconfirmation, #messagestack .alert-success { background-color: color-mix(in srgb, var(--success) 14%, var(--background)); color: var(--foreground); border-left: 3px solid var(--success); } .ui.alert, #messagestack div { border-radius: var(--radius-sm); } /* ========================================================================== 9. Misc: tabs, tables, quota bar ========================================================================== */ .nav-tabs { border-color: var(--border); } .nav-tabs .nav-link { color: var(--muted-foreground); border-radius: var(--radius-sm) var(--radius-sm) 0 0; } .nav-tabs .nav-link:hover { background: var(--muted); color: var(--foreground); } .nav-tabs .nav-link.active { background: var(--card); border-color: var(--border); border-bottom-color: var(--card); color: var(--primary); } .table, .table-widget { color: var(--foreground); border-color: var(--border); } .table td, .table th, .table thead th, .table-widget > .footer { border-color: var(--border); } .quota-widget { color: var(--muted-foreground); } .quota-widget .bar { border-color: var(--border); background-color: var(--muted); border-radius: 999px; overflow: hidden; } .quota-widget .value { background-color: var(--primary); opacity: 1; } .quota-widget .value.warning { background-color: var(--destructive); } .quota-info .root { color: var(--muted-foreground); }