/** * SERSO Family — Roundcube Skin (Dark) * Version: 1.4 * Last updated: 2026-06-04 * * Extends: elastic * Deploy to: /var/lib/roundcube/skins/serso-dark/styles/styles.css * * Brand palette (aligned with portal.serso.com): * Deep bg: #0b0f14 (body, login background) * Dark bg: #111820 (header, toolbar) * Surface: #161e28 (sidebar, panels) * Surface mid: #1e2c3a (borders, dividers) * Surface light: #243040 (hover states) * Accent: #33FFCC (aqua — primary action colour) * Accent dim: #1a8a6e (hover on accent) * Text primary: #e8f4ff * Text secondary: #6a8aa0 * Unread text: #a8f0e0 (softer aqua for dense list text) * * Typography: * Primary: Barlow (Google Fonts) * Fallback: Roboto (legacy SERSO styleguide), sans-serif * * Notes: * - All dark overrides are scoped to html.dark-mode to avoid * breaking elastic's light theme for users who prefer it. * - elastic adds .dark-mode to via cookie colorMode=dark * or OS prefers-color-scheme: dark. * - meta.json links uses object syntax keyed by rel value — * array syntax is silently ignored by Roundcube's template engine. * - Absolute URL required in meta.json href to bypass Roundcube's * skin path prepending on relative URLs. */ @import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600&family=Barlow+Condensed:wght@400;600;700&family=Roboto:wght@300;400;500;700&display=swap'); /* ── Font: apply to both modes ──────────────────────────────── */ body, html { font-family: 'Barlow', 'Roboto', sans-serif !important; } /* ── All dark overrides scoped to html.dark-mode ────────────── */ html.dark-mode body, html.dark-mode { background-color: #0b0f14 !important; color: #e8f4ff !important; } /* ── Header / toolbar ───────────────────────────────────────── */ html.dark-mode #header, html.dark-mode #topbar, html.dark-mode .toolbar { background-color: #111820 !important; border-bottom: 1px solid #1e2c3a !important; color: #e8f4ff !important; } /* ── Login page ─────────────────────────────────────────────── */ html.dark-mode body.task-login { background-color: #0b0f14 !important; } html.dark-mode #login-form, html.dark-mode .loginbox, html.dark-mode #login-form > div { background-color: #161e28 !important; border: 1px solid #1e2c3a !important; border-radius: 4px !important; } html.dark-mode #login-form .formbuttons a.button.mainaction, html.dark-mode #login-form button[type=submit], html.dark-mode .task-login .formbuttons a.button.mainaction { background-color: #33FFCC !important; color: #0b0f14 !important; border-color: #33FFCC !important; } html.dark-mode #login-form .formbuttons a.button.mainaction:hover, html.dark-mode .task-login .formbuttons a.button.mainaction:hover { background-color: #1a8a6e !important; border-color: #1a8a6e !important; } /* ── Sidebar / folder list ──────────────────────────────────── */ html.dark-mode #folderlist-collapse, html.dark-mode #mailboxlist, html.dark-mode .folderlist, html.dark-mode #layout-sidebar { background-color: #161e28 !important; border-right: 1px solid #1e2c3a !important; } html.dark-mode #mailboxlist a, html.dark-mode .folderlist a { color: #6a8aa0 !important; } html.dark-mode #mailboxlist li.selected > a, html.dark-mode #mailboxlist li:hover > a, html.dark-mode .folderlist li.selected > a, html.dark-mode .folderlist li:hover > a { color: #e8f4ff !important; background-color: #1e2c3a !important; } html.dark-mode #mailboxlist .unread, html.dark-mode .folderlist .unread { color: #a8f0e0 !important; font-weight: 500; } /* ── Message list ───────────────────────────────────────────── */ html.dark-mode #layout-list, html.dark-mode #messagelist, html.dark-mode .messagelist { background-color: #0b0f14 !important; } html.dark-mode #messagelist tr, html.dark-mode .messagelist tr { border-bottom: 1px solid #161e28 !important; color: #6a8aa0 !important; } html.dark-mode #messagelist tr.unread td, html.dark-mode .messagelist tr.unread td { color: #a8f0e0 !important; font-weight: 500; } html.dark-mode #messagelist tr:hover td, html.dark-mode .messagelist tr:hover td { background-color: #161e28 !important; } html.dark-mode #messagelist tr.selected td, html.dark-mode .messagelist tr.selected td { background-color: #1e2c3a !important; color: #e8f4ff !important; } /* ── Main content area ──────────────────────────────────────── */ html.dark-mode #layout-content, html.dark-mode #messagecontframe, html.dark-mode .message-part { background-color: #0b0f14 !important; color: #e8f4ff !important; } /* ── Primary action buttons ─────────────────────────────────── */ html.dark-mode a.button.mainaction, html.dark-mode button.mainaction, html.dark-mode input[type=submit].mainaction { background-color: #33FFCC !important; color: #0b0f14 !important; border-color: #33FFCC !important; } html.dark-mode a.button.mainaction:hover, html.dark-mode button.mainaction:hover { background-color: #1a8a6e !important; border-color: #1a8a6e !important; } /* ── Inputs ─────────────────────────────────────────────────── */ html.dark-mode input[type='text'], html.dark-mode input[type='password'], html.dark-mode input[type='email'], html.dark-mode input[type='search'], html.dark-mode textarea, html.dark-mode select { background-color: #161e28 !important; color: #e8f4ff !important; border: 1px solid #1e2c3a !important; } html.dark-mode input[type='text']:focus, html.dark-mode input[type='password']:focus, html.dark-mode input[type='email']:focus, html.dark-mode textarea:focus { border-color: #33FFCC !important; outline: none !important; box-shadow: 0 0 0 2px rgba(51, 255, 204, 0.15) !important; } /* ── Links ──────────────────────────────────────────────────── */ html.dark-mode a { color: #33FFCC !important; } html.dark-mode a:hover { color: #1a8a6e !important; } /* ── Scrollbar ──────────────────────────────────────────────── */ html.dark-mode ::-webkit-scrollbar { width: 6px; height: 6px; } html.dark-mode ::-webkit-scrollbar-track { background: #0b0f14; } html.dark-mode ::-webkit-scrollbar-thumb { background: #1e2c3a; border-radius: 3px; } html.dark-mode ::-webkit-scrollbar-thumb:hover { background: #6a8aa0; }