/* ============================================================ SOLARA Mail — Premium Roundcube Elastic theme overrides Target: modern, premium, not bulky. No JS, no skin fork. Upstream skin = elastic. Fonts via layout.html . ============================================================ */ :root { --sm-font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --sm-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, 'Courier New', monospace; --sm-surface: #FAFBFC; --sm-surface-raised: #FFFFFF; --sm-border: #E5E7EB; --sm-border-strong: #D1D5DB; --sm-text: #0B1F3A; --sm-text-muted: #55627A; --sm-text-subtle: #8490A8; --sm-primary: #0B1F3A; --sm-accent: #C5A572; --sm-accent-soft: rgba(197, 165, 114, 0.12); --sm-quote-bar: #C5A572; --sm-quote-text: #55627A; --sm-shadow: 0 1px 2px rgba(11, 31, 58, 0.04), 0 8px 24px rgba(11, 31, 58, 0.06); --sm-radius: 10px; --sm-radius-sm: 6px; --sm-transition: 150ms ease; } html.dark-mode { --sm-surface: #0F172A; --sm-surface-raised: #1E293B; --sm-border: #1E293B; --sm-border-strong: #334155; --sm-text: #E2E8F0; --sm-text-muted: #94A3B8; --sm-text-subtle: #64748B; --sm-primary: #E2E8F0; --sm-accent: #D4B989; --sm-accent-soft: rgba(212, 185, 137, 0.14); --sm-quote-bar: #D4B989; --sm-quote-text: #94A3B8; --sm-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.4); } /* ---------- Base typography ---------- */ body, html, html.layout-small body, html.layout-phone body { font-family: var(--sm-font-ui) !important; font-size: 14px; line-height: 1.5; color: var(--sm-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6, .popover-header, .listing thead th, .header .title { font-family: var(--sm-font-ui) !important; font-weight: 600; letter-spacing: -0.01em; } button, input, select, textarea, .btn { font-family: var(--sm-font-ui) !important; font-size: 14px; } /* ---------- Logo sizing (Roundcube renders ) ---------- */ #logo, a#logo img, img#logo { max-width: 180px; max-height: 180px; width: auto; height: auto; display: block; margin: 0 auto 1.5rem; } /* Sidebar variant — smaller */ #layout-sidebar #logo, #layout-sidebar img#logo, .taskmenu #logo { max-width: 72px; max-height: 72px; margin: 14px auto 10px; opacity: 0.95; } /* ---------- Login page ---------- */ body.task-login { background: radial-gradient(1200px 600px at 20% -10%, rgba(197, 165, 114, 0.10), transparent 60%), radial-gradient(900px 500px at 100% 100%, rgba(11, 31, 58, 0.08), transparent 55%), var(--sm-surface) !important; } html.dark-mode body.task-login { background: radial-gradient(1200px 600px at 20% -10%, rgba(212, 185, 137, 0.12), transparent 60%), radial-gradient(900px 500px at 100% 100%, rgba(30, 41, 59, 0.6), transparent 55%), var(--sm-surface) !important; } #login-form { max-width: 440px; margin: 6vh auto 0 !important; padding: 2.5rem 2.25rem !important; background: var(--sm-surface-raised); border: 1px solid var(--sm-border); border-radius: 14px; box-shadow: var(--sm-shadow); } #login-form table.propform td, #login-form .row { padding: 0.35rem 0; } #login-form .input-group, #login-form .form-control, #login-form input[type="text"], #login-form input[type="password"] { font-family: var(--sm-font-ui); font-size: 15px; } #login-form .input-group-text { background: var(--sm-surface); border-color: var(--sm-border-strong); color: var(--sm-text-muted); } #login-form input.form-control { border-radius: var(--sm-radius-sm); border-color: var(--sm-border-strong); padding: 0.625rem 0.75rem; transition: var(--sm-transition); } #login-form input.form-control:focus { border-color: var(--sm-accent); box-shadow: 0 0 0 3px var(--sm-accent-soft); outline: none; } #login-form .formbuttons button, #login-form button[type="submit"], #login-form input[type="submit"], body.task-login button.btn-primary, body.task-login input.button.mainaction { width: 100%; padding: 0.75rem 1rem !important; background: var(--sm-primary) !important; color: #FFFFFF !important; border: none !important; border-radius: var(--sm-radius-sm) !important; font-weight: 600 !important; letter-spacing: 0.02em; text-transform: none; transition: var(--sm-transition); box-shadow: 0 1px 2px rgba(11,31,58,0.08); } #login-form .formbuttons button:hover, #login-form button[type="submit"]:hover, body.task-login button.btn-primary:hover, body.task-login input.button.mainaction:hover { background: #122a4d !important; transform: translateY(-1px); } html.dark-mode #login-form .formbuttons button, html.dark-mode #login-form button[type="submit"], html.dark-mode body.task-login button.btn-primary, html.dark-mode body.task-login input.button.mainaction { background: var(--sm-accent) !important; color: var(--sm-surface) !important; } /* Hide Roundcube wordmark on login */ body.task-login .product-name, #login-form .product-name { color: var(--sm-text-subtle) !important; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 1.25rem; } /* ---------- Chrome: sidebar + toolbar ---------- */ #layout-sidebar { background: var(--sm-surface-raised); border-right: 1px solid var(--sm-border); } .listing li a, .listing .treelist li a { border-radius: var(--sm-radius-sm); transition: background-color var(--sm-transition), color var(--sm-transition); } .listing li.selected > a, .listing li.selected > .collapsed ~ a { background: var(--sm-accent-soft) !important; color: var(--sm-text) !important; box-shadow: inset 3px 0 0 var(--sm-accent); } #taskmenu a.button, .toolbar a.button { border-radius: var(--sm-radius-sm); transition: var(--sm-transition); } #taskmenu a.button.selected, #taskmenu a.button:hover { background: var(--sm-accent-soft); color: var(--sm-accent); } /* ---------- Message list ---------- */ .messagelist tbody tr td { padding-top: 0.55rem; padding-bottom: 0.55rem; font-size: 14px; } .messagelist tbody tr:hover { background: var(--sm-accent-soft); } .messagelist tbody tr.unread td { font-weight: 600; } .messagelist tbody tr.selected td { background: var(--sm-accent-soft) !important; box-shadow: inset 3px 0 0 var(--sm-accent); } /* ---------- Message reading pane ---------- */ #messagebody, #message-content, .message-htmlpart, .message-part { font-family: var(--sm-font-ui) !important; font-size: 15px; line-height: 1.65; color: var(--sm-text); } /* Plaintext messages: premium monospace instead of default browser monospace */ .message-part pre, .message-htmlpart pre, #messagebody pre, div.pre { font-family: var(--sm-font-mono) !important; font-size: 14px; line-height: 1.6; white-space: pre-wrap; word-wrap: break-word; background: transparent; border: none; padding: 0; color: var(--sm-text); } /* Quoted-reply lines: border-accent instead of raw `>` soup */ blockquote, .message-htmlpart blockquote, .message-part blockquote { margin: 0.5rem 0; padding: 0.35rem 0 0.35rem 1rem; border-left: 3px solid var(--sm-quote-bar); color: var(--sm-quote-text); background: transparent; font-style: normal; } /* Message header block */ .message-header, .header-content .headers-table { border-bottom: 1px solid var(--sm-border); padding-bottom: 0.75rem; margin-bottom: 1rem; } .message-header .subject, #message-header .subject { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; } /* ---------- Compose window ---------- */ #compose-content, #compose-body { background: var(--sm-surface); } /* Plaintext compose textarea: premium mono, tinted bg so it reads intentional */ #composebody, textarea#composebody, textarea.plaintextarea { font-family: var(--sm-font-mono) !important; font-size: 14px; line-height: 1.6; background: var(--sm-surface-raised); color: var(--sm-text); border: 1px solid var(--sm-border); border-radius: var(--sm-radius-sm); padding: 1rem; } #compose-headers input, #compose-headers .form-control { font-family: var(--sm-font-ui) !important; font-size: 14px; border-radius: var(--sm-radius-sm); } /* ---------- Popovers / dialogs / buttons ---------- */ .popover, .popupmenu, .ui-dialog { border-radius: var(--sm-radius); box-shadow: var(--sm-shadow); border: 1px solid var(--sm-border); } .btn, button.btn { border-radius: var(--sm-radius-sm); transition: var(--sm-transition); font-weight: 500; } .btn-primary { background: var(--sm-primary); border-color: var(--sm-primary); } .btn-primary:hover { background: #122a4d; border-color: #122a4d; } html.dark-mode .btn-primary { background: var(--sm-accent); border-color: var(--sm-accent); color: var(--sm-surface); } /* ---------- Hide the empty Help link (support_url is blank) ---------- */ #taskmenu a.about[href="#"], #taskmenu a.help[href="#"], a.button.help[href=""] { display: none !important; } /* ---------- Scrollbars (webkit) ---------- */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--sm-border-strong); border-radius: 5px; border: 2px solid var(--sm-surface); } ::-webkit-scrollbar-thumb:hover { background: var(--sm-text-subtle); } /* ---------- Focus rings (accessibility) ---------- */ :focus-visible { outline: 2px solid var(--sm-accent); outline-offset: 2px; }