/** * Myximus Mail — brand skin for Roundcube (extends Elastic). [T-008b] * * Architecture * ------------ * - @imports Elastic's compiled CSS, then layers a Myximus brand on top. * - The brand is driven by CSS CUSTOM PROPERTIES so a single set of rules * serves FOUR user-selectable themes. The active theme is a class on : * .myx-theme-dark (default) .myx-theme-light * .myx-theme-hc (high contrast) .myx-theme-dusk * Dark / HC / Dusk also carry Elastic's `.dark-mode` (set by the skin layout * or the myximus_mail plugin); Light intentionally does NOT, so it rides * Elastic's maintained light base. * - Reading prefs add classes too: .myx-density-{compact,comfortable,spacious} * and .myx-readfont-{sm,md,lg} and .myx-listpreview-off. * * No Roundcube core files are modified. */ @import url('../../elastic/styles/styles.css'); /* =================================================== THEME PALETTES ======= */ /* Defaults (Dark). Every brand rule below reads these variables. */ html[class*="myx-theme-"] { --myx-canvas: #0A192F; --myx-panel: #0E2440; --myx-rail: #061427; --myx-menu: #0D2038; --myx-elevated: #0E2440; --myx-border: #1E3A5F; --myx-border-soft: rgba(34,211,238,.12); --myx-text: #E6EDF3; --myx-text-dim: #94A3B8; --myx-text-list: #C9D6E2; --myx-accent: #22D3EE; --myx-accent-bright:#67E8F9; --myx-link: #38BDF8; --myx-link-hover: #67E8F9; --myx-compose: #2563EB; --myx-compose-hover:#1D4ED8; --myx-selected: rgba(34,211,238,.13); --myx-row-hover: rgba(255,255,255,.04); --myx-input: #0D2038; --myx-input-border: #23456E; --myx-badge-bg: #22D3EE; --myx-badge-fg: #04293A; --myx-rail-text: #93A7BE; --myx-rail-text-on: #FFFFFF; } /* Myximus Light — white canvas, navy text, cyan accents (dark rail kept as the brand "spine"). */ html.myx-theme-light { --myx-canvas: #F4F8FC; --myx-panel: #FFFFFF; --myx-rail: #0A192F; --myx-menu: #FFFFFF; --myx-elevated: #FFFFFF; --myx-border: #D8E2EC; --myx-border-soft: rgba(37,99,235,.12); --myx-text: #0A192F; --myx-text-dim: #5A6B7E; --myx-text-list: #243B53; --myx-accent: #0891B2; --myx-accent-bright:#22D3EE; --myx-link: #2563EB; --myx-link-hover: #1D4ED8; --myx-compose: #2563EB; --myx-compose-hover:#1D4ED8; --myx-selected: rgba(8,145,178,.12); --myx-row-hover: rgba(0,0,0,.035); --myx-input: #FFFFFF; --myx-input-border: #CBD8E6; --myx-badge-bg: #0891B2; --myx-badge-fg: #FFFFFF; --myx-rail-text: #9FB3CC; --myx-rail-text-on: #FFFFFF; } /* Myximus High Contrast — pure black, white text, bright cyan. */ html.myx-theme-hc { --myx-canvas: #000000; --myx-panel: #000000; --myx-rail: #000000; --myx-menu: #000000; --myx-elevated: #0A0A0A; --myx-border: #8A8A8A; --myx-border-soft: rgba(0,229,255,.35); --myx-text: #FFFFFF; --myx-text-dim: #D6D6D6; --myx-text-list: #FFFFFF; --myx-accent: #00E5FF; --myx-accent-bright:#5CFBFF; --myx-link: #5CFBFF; --myx-link-hover: #FFFFFF; --myx-compose: #0091EA; --myx-compose-hover:#00B0FF; --myx-selected: rgba(0,229,255,.28); --myx-row-hover: rgba(255,255,255,.12); --myx-input: #000000; --myx-input-border: #FFFFFF; --myx-badge-bg: #00E5FF; --myx-badge-fg: #000000; --myx-rail-text: #E0E0E0; --myx-rail-text-on: #FFFFFF; } /* Myximus Dusk — deep purple-navy, lavender accents. */ html.myx-theme-dusk { --myx-canvas: #1A1040; --myx-panel: #241654; --myx-rail: #120A2E; --myx-menu: #241654; --myx-elevated: #241654; --myx-border: #3A2D6B; --myx-border-soft: rgba(167,139,250,.14); --myx-text: #ECE8FF; --myx-text-dim: #A99FD6; --myx-text-list: #D6CFF2; --myx-accent: #A78BFA; --myx-accent-bright:#C4B5FD; --myx-link: #A78BFA; --myx-link-hover: #C4B5FD; --myx-compose: #7C3AED; --myx-compose-hover:#6D28D9; --myx-selected: rgba(167,139,250,.18); --myx-row-hover: rgba(255,255,255,.05); --myx-input: #1C1148; --myx-input-border: #3A2D6B; --myx-badge-bg: #A78BFA; --myx-badge-fg: #160C36; --myx-rail-text: #B6ABE0; --myx-rail-text-on: #FFFFFF; } /* ============================================================= CANVAS ===== */ html[class*="myx-theme-"] body { background-color: var(--myx-canvas) !important; color: var(--myx-text) !important; } html[class*="myx-theme-"] #layout-list, html[class*="myx-theme-"] #layout-sidebar, html[class*="myx-theme-"] #layout-content, html[class*="myx-theme-"] #layout > div > .header, html[class*="myx-theme-"] #layout > div > .footer { border-color: var(--myx-border) !important; } html[class*="myx-theme-"] #layout > div > .header, html[class*="myx-theme-"] #layout > div > .footer { background-color: var(--myx-elevated) !important; color: var(--myx-text) !important; } html[class*="myx-theme-"] #layout > div > .header a.button, html[class*="myx-theme-"] #layout > div > .footer a.button, html[class*="myx-theme-"] .header .header-title { color: var(--myx-text) !important; } html[class*="myx-theme-"] { scrollbar-color: var(--myx-border) transparent; } html[class*="myx-theme-"] ::-webkit-scrollbar-thumb { background-color: var(--myx-border) !important; } html[class*="myx-theme-"] ::-webkit-scrollbar-track { background-color: transparent !important; } /* ===================================================== LEFT RAIL (menu) === */ html[class*="myx-theme-"] #layout-menu { background: var(--myx-rail) !important; border-right: 1px solid var(--myx-border) !important; } html[class*="myx-theme-"] #taskmenu a.button { color: var(--myx-rail-text) !important; } html[class*="myx-theme-"] #taskmenu a.button:hover, html[class*="myx-theme-"] #taskmenu a.button.selected { color: var(--myx-rail-text-on) !important; } html[class*="myx-theme-"] #taskmenu a.button.selected { background: var(--myx-border-soft) !important; } html[class*="myx-theme-"] #taskmenu a.logout { color: #F87171 !important; } html.myx-theme-hc #taskmenu a.logout { color: #FF6B6B !important; } html[class*="myx-theme-"] #taskmenu a.about { display: none !important; } /* --- Desktop-only structural changes (mobile keeps Elastic's slide-in) ---- */ @media screen and (min-width: 769px) { html[class*="myx-theme-"] #layout-menu { width: 74px !important; min-width: 74px !important; flex: 0 0 74px !important; overflow-y: auto; overflow-x: hidden; } /* Brand mark pinned to the top of the rail — references swappable asset */ html[class*="myx-theme-"] #taskmenu:before { content: ""; display: block; height: 38px; margin: 12px 10px 6px; background: url('https://myximus.com/assets/logo-mark.svg') center / 34px 34px no-repeat; flex: 0 0 auto; } /* Icon-only task buttons (labels hidden) */ html[class*="myx-theme-"] #taskmenu a.mail .inner, html[class*="myx-theme-"] #taskmenu a.contacts .inner, html[class*="myx-theme-"] #taskmenu a.settings .inner, html[class*="myx-theme-"] #taskmenu a.logout .inner { font-size: 0 !important; height: 0 !important; overflow: hidden; } html[class*="myx-theme-"] #taskmenu a.mail, html[class*="myx-theme-"] #taskmenu a.contacts, html[class*="myx-theme-"] #taskmenu a.settings, html[class*="myx-theme-"] #taskmenu a.logout { height: 50px !important; margin: 2px 8px !important; border-radius: 10px !important; } html[class*="myx-theme-"] #taskmenu a.button:before { font-size: 1.35rem !important; } /* Prominent full-width Compose button */ html[class*="myx-theme-"] #taskmenu .action-buttons { padding: 4px 0 8px; } html[class*="myx-theme-"] #taskmenu a.compose { display: flex !important; flex-direction: column; align-items: center; justify-content: center; height: 54px !important; margin: 4px 8px 8px !important; background: var(--myx-compose) !important; color: #FFFFFF !important; border-radius: 12px !important; box-shadow: 0 6px 16px rgba(37, 99, 235, .45) !important; transition: background .15s, box-shadow .15s, transform .05s; } html[class*="myx-theme-"] #taskmenu a.compose:hover { background: var(--myx-compose-hover) !important; box-shadow: 0 8px 20px rgba(37, 99, 235, .6) !important; } html[class*="myx-theme-"] #taskmenu a.compose:active { transform: translateY(1px); } html[class*="myx-theme-"] #taskmenu a.compose:before { color: #FFFFFF !important; font-size: 1.25rem !important; margin: 0 0 1px !important; } html[class*="myx-theme-"] #taskmenu a.compose .inner { display: block !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: .3px; color: #FFFFFF !important; height: auto !important; line-height: 1.1 !important; } /* ---- Item 4: folder shortcut strip in the slim rail ------------------ */ /* Injected by myximus_mail.js as #myx-folderrail inside #taskmenu. */ html[class*="myx-theme-"] #myx-folderrail { display: flex; flex-direction: column; align-items: stretch; margin: 6px 0 4px; padding-top: 6px; border-top: 1px solid var(--myx-border); } html[class*="myx-theme-"] #myx-folderrail a.myx-fbtn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 46px; margin: 1px 8px; border-radius: 10px; color: var(--myx-rail-text); text-decoration: none; cursor: pointer; transition: background .12s, color .12s; } html[class*="myx-theme-"] #myx-folderrail a.myx-fbtn:hover { color: var(--myx-rail-text-on); background: var(--myx-border-soft); } html[class*="myx-theme-"] #myx-folderrail a.myx-fbtn.active { color: var(--myx-rail-text-on); background: var(--myx-selected); box-shadow: inset 3px 0 0 var(--myx-accent); } /* Icons are outline (line) SVGs. Elastic fills inline SVGs via a `fill: currentColor` rule which would turn our outlines into solid white blobs — force fill:none + stroke:currentColor with !important on the svg AND every child shape so no inherited rule can break the rendering. */ html[class*="myx-theme-"] #myx-folderrail a.myx-fbtn .myx-ficon, html[class*="myx-theme-"] #myx-folderrail a.myx-fbtn .myx-ficon * { fill: none !important; stroke: currentColor !important; } html[class*="myx-theme-"] #myx-folderrail a.myx-fbtn .myx-ficon { width: 22px !important; height: 22px !important; stroke-width: 2px !important; vertical-align: middle; flex: 0 0 auto; } html[class*="myx-theme-"] #myx-folderrail a.myx-fbtn .myx-flabel { font-size: 9px; font-weight: 600; letter-spacing: .2px; margin-top: 2px; line-height: 1; } /* unread badge */ html[class*="myx-theme-"] #myx-folderrail a.myx-fbtn .myx-fbadge { position: absolute; top: 4px; right: 12px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; background: var(--myx-badge-bg); color: var(--myx-badge-fg); font-size: 9px; font-weight: 700; line-height: 16px; text-align: center; border-radius: 8px; display: none; } html[class*="myx-theme-"] #myx-folderrail a.myx-fbtn .myx-fbadge.show { display: block; } } /* Hide the injected folder rail on mobile (Elastic slide-in menu used there) */ @media screen and (max-width: 768px) { #myx-folderrail { display: none !important; } } /* ================================================== LISTS / MESSAGE LIST === */ html[class*="myx-theme-"] .listing, html[class*="myx-theme-"] .listing td, html[class*="myx-theme-"] table.listing tbody td { color: var(--myx-text-list); } html[class*="myx-theme-"] .listing tbody tr, html[class*="myx-theme-"] table.listing tbody tr, html[class*="myx-theme-"] .messagelist tbody tr { border-color: var(--myx-border) !important; } html[class*="myx-theme-"] .listing tbody tr:hover, html[class*="myx-theme-"] .messagelist tbody tr:hover { background-color: var(--myx-row-hover) !important; } html[class*="myx-theme-"] .listing li.selected > a, html[class*="myx-theme-"] .listing tbody tr.selected, html[class*="myx-theme-"] .messagelist tbody tr.selected, html[class*="myx-theme-"] table.listing tbody tr.selected td { background-color: var(--myx-selected) !important; color: var(--myx-text) !important; } html[class*="myx-theme-"] .messagelist tbody tr.selected td:first-child, html[class*="myx-theme-"] .listing li.selected > a { box-shadow: inset 3px 0 0 var(--myx-accent); } html[class*="myx-theme-"] .messagelist tbody tr.unread { font-weight: 600; } html.myx-theme-dark .messagelist tbody tr.unread, html.myx-theme-hc .messagelist tbody tr.unread, html.myx-theme-dusk .messagelist tbody tr.unread { color: var(--myx-rail-text-on); } html[class*="myx-theme-"] .folderlist li a, html[class*="myx-theme-"] ul.listing li a { color: var(--myx-text-list); } html[class*="myx-theme-"] .folderlist li.selected > a { color: var(--myx-text); } html[class*="myx-theme-"] .listing .unreadcount, html[class*="myx-theme-"] .badge, html[class*="myx-theme-"] span.badge, html[class*="myx-theme-"] .messagecounter .badge { background-color: var(--myx-badge-bg) !important; color: var(--myx-badge-fg) !important; } /* ---- Item 7: message-list DENSITY ---------------------------------------- */ html.myx-density-compact .messagelist tbody td { padding-top: 2px !important; padding-bottom: 2px !important; font-size: .82rem; } html.myx-density-comfortable .messagelist tbody td { padding-top: 6px !important; padding-bottom: 6px !important; } html.myx-density-spacious .messagelist tbody td { padding-top: 12px !important; padding-bottom: 12px !important; font-size: .98rem; } /* Preview text in list (off) — hide the secondary fragment row if present */ html.myx-listpreview-off .messagelist .fragment, html.myx-listpreview-off .messagelist td.subject .fragment { display: none !important; } /* ---- Item 7: reading FONT size ------------------------------------------ */ html.myx-readfont-sm #messagebody, html.myx-readfont-sm .message-htmlpart { font-size: .9rem; } html.myx-readfont-md #messagebody, html.myx-readfont-md .message-htmlpart { font-size: 1rem; } html.myx-readfont-lg #messagebody, html.myx-readfont-lg .message-htmlpart { font-size: 1.15rem; } /* ============================================================= ACCENTS ===== */ html[class*="myx-theme-"] a { color: var(--myx-link); } html[class*="myx-theme-"] a:hover { color: var(--myx-link-hover); } html[class*="myx-theme-"] .listing li a:hover { color: var(--myx-link-hover); } html[class*="myx-theme-"] .btn-primary, html[class*="myx-theme-"] button.btn-primary, html[class*="myx-theme-"] .button.btn-primary, html[class*="myx-theme-"] .formbuttons .btn-primary { background-color: var(--myx-compose) !important; border-color: var(--myx-compose) !important; color: #FFFFFF !important; } html[class*="myx-theme-"] .btn-primary:hover { background-color: var(--myx-compose-hover) !important; } html[class*="myx-theme-"] .btn-secondary, html[class*="myx-theme-"] .button.btn-secondary { background-color: var(--myx-input) !important; border-color: var(--myx-border) !important; color: var(--myx-text) !important; } html[class*="myx-theme-"] .custom-control-input:checked ~ .custom-control-label::before, html[class*="myx-theme-"] input[type=checkbox]:checked, html[class*="myx-theme-"] .pretty input:checked ~ .state label:after { background-color: var(--myx-accent) !important; } html[class*="myx-theme-"] .quota_text_value, html[class*="myx-theme-"] .quota .value { background-color: var(--myx-accent) !important; } html[class*="myx-theme-"] #logo { opacity: 1 !important; } /* ============================================== INPUTS / SEARCH / FORMS ===== */ html[class*="myx-theme-"] input:not([type=checkbox]):not([type=radio]):not([type=image]), html[class*="myx-theme-"] textarea, html[class*="myx-theme-"] select, html[class*="myx-theme-"] .form-control, html[class*="myx-theme-"] .searchbar input, html[class*="myx-theme-"] .ui-autocomplete { background-color: var(--myx-input) !important; border-color: var(--myx-input-border) !important; color: var(--myx-text) !important; } html[class*="myx-theme-"] input::placeholder, html[class*="myx-theme-"] textarea::placeholder { color: var(--myx-text-dim) !important; } html[class*="myx-theme-"] .form-control:focus, html[class*="myx-theme-"] input:focus { border-color: var(--myx-accent) !important; box-shadow: 0 0 0 .15rem var(--myx-border-soft) !important; } html[class*="myx-theme-"] .searchbar, html[class*="myx-theme-"] #searchmenulink, html[class*="myx-theme-"] .searchbar > a { background-color: var(--myx-input) !important; color: var(--myx-text) !important; } html[class*="myx-theme-"] .input-group-text, html[class*="myx-theme-"] .recipient-input { background-color: var(--myx-input) !important; border-color: var(--myx-input-border) !important; color: var(--myx-text) !important; } /* ---- Item 3: CC / BCC visible by default in compose ---------------------- */ /* Elastic hides the cc/bcc rows until the "add Cc/Bcc" link is used; force them visible. (myximus_mail.js also clicks the toggles as a belt-and-braces fallback for versions that render them lazily.) */ html[class*="myx-theme-"] #compose-cc, html[class*="myx-theme-"] #compose-bcc, html[class*="myx-theme-"] .compose-headers tr.cc, html[class*="myx-theme-"] .compose-headers tr.bcc, html[class*="myx-theme-"] #composeview-content .cc.hidden, html[class*="myx-theme-"] #composeview-content .bcc.hidden { display: table-row !important; } html[class*="myx-theme-"] .compose-headers .show-headers, html[class*="myx-theme-"] a.addcc, html[class*="myx-theme-"] a.addbcc { display: none !important; } /* ===================================== POPOVERS / MENUS / DIALOGS / TABS ===== */ html[class*="myx-theme-"] .popupmenu, html[class*="myx-theme-"] .popover, html[class*="myx-theme-"] .popover-body, html[class*="myx-theme-"] .toolbarmenu, html[class*="myx-theme-"] ul.toolbarmenu, html[class*="myx-theme-"] .ui-dialog, html[class*="myx-theme-"] .ui-dialog .ui-dialog-content, html[class*="myx-theme-"] .ui-widget-content, html[class*="myx-theme-"] .ui-menu, html[class*="myx-theme-"] .dialog .ui-dialog-content { background-color: var(--myx-menu) !important; color: var(--myx-text) !important; border-color: var(--myx-border) !important; } html[class*="myx-theme-"] .ui-dialog .ui-dialog-titlebar, html[class*="myx-theme-"] .popover-header { background-color: var(--myx-canvas) !important; color: var(--myx-text) !important; border-color: var(--myx-border) !important; } html[class*="myx-theme-"] .popupmenu a, html[class*="myx-theme-"] .toolbarmenu a, html[class*="myx-theme-"] .toolbarmenu li a, html[class*="myx-theme-"] .ui-menu .ui-menu-item a { color: var(--myx-text) !important; } html[class*="myx-theme-"] .popupmenu a:hover, html[class*="myx-theme-"] .toolbarmenu li a:hover, html[class*="myx-theme-"] .toolbarmenu li.active a { background-color: var(--myx-accent) !important; color: var(--myx-badge-fg) !important; } html[class*="myx-theme-"] .menu.toolbar:not(#taskmenu) { background-color: transparent !important; } /* message preview header block */ html[class*="myx-theme-"] .messageheaderbox, html[class*="myx-theme-"] .messageheader, html[class*="myx-theme-"] #messageheader, html[class*="myx-theme-"] .message-partheaders { background-color: var(--myx-elevated) !important; color: var(--myx-text) !important; border-color: var(--myx-border) !important; } html[class*="myx-theme-"] .messageheader .subject, html[class*="myx-theme-"] #messageheader .subject { color: var(--myx-text) !important; } html[class*="myx-theme-"] .rcmContactAddress, html[class*="myx-theme-"] .adr, html[class*="myx-theme-"] .text-muted, html[class*="myx-theme-"] .hint { color: var(--myx-text-dim) !important; } /* ============================================================== LOGIN ======= */ html[class*="myx-theme-"] body.task-login, html[class*="myx-theme-"] #layout.login, html[class*="myx-theme-"] .login-form { background-color: var(--myx-canvas) !important; } html[class*="myx-theme-"] .login-form, html[class*="myx-theme-"] #login-form .box, html[class*="myx-theme-"] #login-form { background-color: var(--myx-elevated) !important; border: 1px solid var(--myx-border) !important; box-shadow: 0 18px 50px rgba(0, 0, 0, .45) !important; border-radius: 14px !important; } html[class*="myx-theme-"] #login-form .formcontent input { background-color: var(--myx-input) !important; } html[class*="myx-theme-"] #login-form .logo, html[class*="myx-theme-"] .login-form #logo { margin-bottom: 1.25rem; } /* keep HTML e-mail bodies on their own card (don't force-theme sender content) */ html[class*="myx-theme-"] .messagecontent .message-htmlpart, html[class*="myx-theme-"] #messagebody { background: transparent; } /* =========================================================================== LOGIN PAGE = LIGHT (Myximus brand), 2026-06-24. The app skin stays dark for logged-in users; this only targets body.task-login. Redefining the --myx-* custom properties on body.task-login makes the skin's own `html[class*="myx-theme-"] …{ background:var(--myx-*) }` surface rules resolve to LIGHT on the login page (body is a closer ancestor than ), then explicit !important rules light-ify the login form that Elastic's .dark-mode styles directly. Logged-in tasks (task-mail/settings/…) untouched. =========================================================================== */ body.task-login { --myx-canvas: #F8F9FA; --myx-panel: #FFFFFF; --myx-menu: #FFFFFF; --myx-elevated: #FFFFFF; --myx-border: #E2E8F0; --myx-border-soft: rgba(27,111,232,.12); --myx-text: #1A2332; --myx-text-dim: #64748B; --myx-text-list: #243B53; --myx-accent: #1B6FE8; --myx-link: #1B6FE8; --myx-link-hover: #1557C2; --myx-input: #FFFFFF; --myx-input-border: #E2E8F0; background-color: #F8F9FA !important; color: #1A2332 !important; } body.task-login #layout, body.task-login #layout-content, body.task-login #layout > div, body.task-login #layout-content .formcontent { background-color: #F8F9FA !important; } /* the centered login card */ body.task-login #login-form { background: #FFFFFF !important; border: 1px solid #E2E8F0 !important; border-radius: 16px !important; box-shadow: 0 6px 24px rgba(16,24,40,.08), 0 1px 3px rgba(16,24,40,.05) !important; color: #1A2332 !important; } body.task-login #login-form label, body.task-login #login-form .col-form-label, body.task-login #login-form legend, body.task-login #login-form .input-group-text { color: #1A2332 !important; } /* input fields: white with light border, dark text */ body.task-login #login-form .form-control, body.task-login #login-form input, body.task-login #login-form select { background: #FFFFFF !important; border: 1px solid #E2E8F0 !important; color: #1A2332 !important; } body.task-login #login-form .form-control:focus { border-color: #1B6FE8 !important; box-shadow: 0 0 0 2px rgba(27,111,232,.18) !important; } /* LOGIN button: trust blue, white text */ body.task-login #rcmloginsubmit, body.task-login #login-form .btn-primary, body.task-login #login-form button[type="submit"] { background: #1B6FE8 !important; border-color: #1B6FE8 !important; color: #FFFFFF !important; } body.task-login #rcmloginsubmit:hover, body.task-login #login-form .btn-primary:hover { background: #1557C2 !important; border-color: #1557C2 !important; } /* links (Forgot your password, etc.) */ body.task-login a, body.task-login #login-footer a { color: #1B6FE8 !important; } body.task-login #login-footer { color: #64748B !important; } /* Folder-rail icons (esp. Trash) were clipping at the box/viewport edge — allow the SVG and its button to overflow, and let the button grow instead of a hard fixed height. Rail is display:none on mobile, so applying outside the desktop media query is harmless. (2026-06-24) */ html[class*="myx-theme-"] #myx-folderrail a.myx-fbtn { height: auto !important; min-height: 46px !important; overflow: visible !important; } html[class*="myx-theme-"] #myx-folderrail a.myx-fbtn .myx-ficon { overflow: visible !important; } /* FIX 3 (2026-06-24): the slim folder rail (#myx-folderrail) is the folder nav in the mail view, so hide the duplicate default folder panel (#layout-sidebar) — folders were showing twice. Scoped to task-mail so Settings/Contacts side panels are unaffected. NOTE: only the rail's standard folders are reachable here; manage custom folders via Settings > Folders. */ body.task-mail #layout-sidebar { display: none !important; } /* ===== C7 fix (2026-06-26): folder-rail scrollability ===================== The slim left rail (#layout-menu) stacks the brand + app buttons + the injected folder rail (#myx-folderrail: Inbox…Trash). On short / laptop viewports those buttons exceed the column height and push the last folder (Trash) below the fold. #layout-menu is already overflow-y:auto so it DOES scroll, but the OS overlay scrollbar on a 74px column is easy to miss, so Trash looks clipped. Force a reliable, discoverable thin scrollbar so every folder (incl. Trash) is reachable at any viewport height / folder count. */ html[class*="myx-theme-"] #layout-menu { overflow-y: auto !important; overflow-x: hidden !important; scrollbar-width: thin; scrollbar-color: var(--myx-border) transparent; } html[class*="myx-theme-"] #layout-menu::-webkit-scrollbar { width: 6px; } html[class*="myx-theme-"] #layout-menu::-webkit-scrollbar-track { background: transparent; } html[class*="myx-theme-"] #layout-menu::-webkit-scrollbar-thumb { background: var(--myx-border); border-radius: 3px; } html[class*="myx-theme-"] #layout-menu::-webkit-scrollbar-thumb:hover { background: var(--myx-rail-text); } /* ===== Light sidebar (2026-06-26) ======================================== The light theme inherited a dark-navy rail (--myx-rail:#0A192F). Flip the rail vars to light JUST for .myx-theme-light (appended so it wins over the earlier light block; other themes keep their dark rails untouched). */ html.myx-theme-light { --myx-rail: #EEF3F8; /* soft light rail, distinct from white panels */ --myx-rail-text: #5A6B7E; /* muted dark for inactive folder labels */ --myx-rail-text-on: #0A192F; /* strong dark for active / hover */ } /* Light sidebar polish (2026-06-26): Elastic styles the brand band (.popover-header) and the active task button with dark greys that the light theme did not override (they blended on the dark rail, stick out on light). Force them light in .myx-theme-light with id-level specificity to win the cascade. The logo.svg wordmark is dark navy + colored mark, so it reads fine on the light band. Other themes are untouched. */ html.myx-theme-light #layout-menu .popover-header { background-color: var(--myx-canvas) !important; color: var(--myx-text) !important; border-color: var(--myx-border) !important; } html.myx-theme-light #taskmenu a.button.selected, html.myx-theme-light #taskmenu a.mail.selected { background-color: var(--myx-selected) !important; }