/** * Solar Vega brand overlay for Roundcube's Elastic skin (Ref #1872). * * This is a plain CSS override, NOT a LESS rebuild. Elastic's own styles * are LESS-compiled to styles.min.css at image-build time and are shipped * pre-compiled in the roundcube/roundcubemail docker image -- there is no * LESS toolchain available at deploy time, and the task scope explicitly * says not to recompile the whole Elastic LESS tree. Instead this file is * registered as an *additional* stylesheet via meta.json's "links" key, * loaded after Elastic's own /styles/styles.css in the page , so a * normal CSS cascade lets these rules win for the selectors below without * needing !important almost anywhere. * * Selectors below were confirmed against the actual compiled CSS shipped * in the pinned roundcube/roundcubemail:1.7.1-apache image (inspected live * via `docker exec webmail-roundcube cat .../skins/elastic/styles/styles.min.css`), * not guessed from the un-compiled LESS source. * * Brand source of truth: brand/visual/colours.md * Primary #0D9488 (teal) * Secondary #8B5CF6 (purple) * Background #F8FAFC Surface #FFFFFF * Foreground #111827 Muted #64748B * * Contrast note: Elastic's stock accent (#37beff) paired with white text is * only used on small/medium UI chrome (buttons, badges, menu highlights), * where WCAG 2.1 AA requires >=4.5:1 for normal-size text. The literal * brand teal #0D9488 with white text is ~3.75:1 (fails that floor), so a * darkened, same-hue teal (#0B7A70, ~5.2:1 with white) is used everywhere * white text sits directly on a teal fill. The lighter #0D9488 is used for * borders, focus rings, and dark-on-light accents where no contrast risk * exists. Secondary purple (#8B5CF6) is used only as a light-touch accent * (never as a solid white-on-fill background) for the same reason. */ :root { --svl-teal: #0D9488; --svl-teal-fill: #0B7A70; /* AA-safe shade for white-text-on-fill */ --svl-teal-tint: #E6F5F3; /* light wash for selected-row/folder backgrounds */ --svl-purple: #8B5CF6; --svl-bg: #F8FAFC; --svl-surface: #FFFFFF; --svl-fg: #111827; --svl-muted: #64748B; } /* --------------------------------------------------------------------- * Top bar / header chrome * ------------------------------------------------------------------- */ .header { background-color: var(--svl-surface); border-bottom: 3px solid var(--svl-teal); } /* Task menu (left icon rail) — retint selected/hover/action states */ #taskmenu a.selected, #taskmenu a.selected:hover, #taskmenu a:hover, #taskmenu a:focus { background: var(--svl-teal-fill); } #taskmenu .action-buttons a, .dark-mode #taskmenu .action-buttons a { color: var(--svl-teal); } #taskmenu .action-buttons a:hover { color: var(--svl-teal); background: var(--svl-teal-fill); } /* --------------------------------------------------------------------- * Primary buttons * ------------------------------------------------------------------- */ .btn-primary { background: var(--svl-teal-fill); border-color: var(--svl-teal-fill); color: #fff; } .btn-primary:hover, .btn-primary:focus { background: #096058; border-color: #096058; box-shadow: 0 0 0 .2rem rgba(13, 148, 136, .35); } .btn-primary.disabled, .btn-primary:disabled { background: var(--svl-teal-fill); border-color: var(--svl-teal-fill); } .floating-action-buttons a.button { background: var(--svl-teal-fill); box-shadow: 0 0 5px 5px rgba(13, 148, 136, .12); } /* --------------------------------------------------------------------- * Folder / message list highlights * ------------------------------------------------------------------- */ .folderlist li.selected > a, ul.treelist li.selected > div > a, .popupmenu .listing li.selected { color: var(--svl-fg); background-color: var(--svl-teal-tint); } .popupmenu .listing li.selected { color: #fff; background-color: var(--svl-teal-fill); } .listing tr.selected td { color: var(--svl-fg); background-color: var(--svl-teal-tint); } html.dark-mode .listing li.selected > div > a, html.dark-mode .listing tr.selected td { color: #5EEAD4; /* light teal, legible on Elastic's dark row background */ background-color: #374549; } .folderlist li.mailbox .unreadcount, .mailbox.recent > a > .unreadcount { background: var(--svl-teal-fill); color: #fff; } .quota-widget .value { background-color: var(--svl-teal); } /* --------------------------------------------------------------------- * Form focus rings (inputs, compose editor, search) * ------------------------------------------------------------------- */ .form-control:focus, .recipient-input.focus, .multi-input > .content.focused, .custom-file-label, .raweditor .CodeMirror-focused, .tox.focused, .tox .tox-textfield:focus { border-color: var(--svl-teal); box-shadow: 0 0 0 .2rem rgba(13, 148, 136, .25); } .ui-menu .ui-state-active, .ui-datepicker a.ui-state-active { background-color: var(--svl-teal-fill) !important; } .tox .tox-dialog__footer .tox-button { background: var(--svl-teal-fill); border-color: var(--svl-teal-fill); } /* Secondary purple — light-touch accent only, never a solid white-on-fill */ .tox .tox-dialog__body-nav-item--active, .tox .tox-collection__item--enabled { color: var(--svl-purple); } /* --------------------------------------------------------------------- * Login page — branded card, subtle brand wash, wordmark, footer line * ------------------------------------------------------------------- */ body.task-login { background: radial-gradient(circle at 15% 10%, rgba(139, 92, 246, .10), transparent 45%), radial-gradient(circle at 85% 90%, rgba(13, 148, 136, .12), transparent 45%), var(--svl-bg); } body.task-login #logo { opacity: 1; top: 10vh; max-height: 56px; } body.task-login #login-form { top: 16vh; max-width: 360px; background: var(--svl-surface); border-radius: 14px; border-top: 4px solid var(--svl-teal); box-shadow: 0 10px 40px rgba(17, 24, 39, .10); padding: 2.25rem 1.75rem 1.5rem; } body.task-login #login-form .btn-primary { width: 100%; } body.task-login #login-footer { color: var(--svl-muted); text-align: center; margin-top: .75rem; } body.task-login #login-footer::after { content: "Solar Vega \2014 secure mail"; display: block; margin-top: .5rem; font-size: .8rem; color: var(--svl-muted); }