/* RU Seller — фирменное оформление Roundcube. * * Скин наследует штатный elastic: сначала целиком подтягивается его таблица * стилей, ниже переопределяются только цвета. Файлы elastic не трогаются, * поэтому обновление Roundcube оформление не ломает. * * Палитра из брендбука: графит #353F49, киноварь #B02A27, тёмная #8E211E. * * ВАЖНО про тёмную тему. Roundcube ставит на класс dark-mode, когда * система просит тёмное оформление. Поэтому всё, что задаёт фон или цвет * текста, ограничено светлой темой через html:not(.dark-mode) — иначе тёмный * интерфейс получает светлую подложку под белым текстом и становится пустым. * Акценты (графит и киноварь) безопасны в обеих темах: они и там и там * работают как тёмное поле с белым текстом. */ @import url("../../elastic/styles/styles.min.css"); :root { --rs-graphite: #353F49; --rs-graphite-dark: #2A323A; --rs-red: #B02A27; --rs-red-dark: #8E211E; --rs-red-light: #D14A45; --rs-ink: #1C232B; --rs-muted: #5E6975; --rs-line: #DFE3E8; --rs-bg: #F6F7F9; } /* ── Панель задач ───────────────────────────────────────────── Вертикальная полоса слева. Графит здесь работает как в шапке брендбука: тёмное поле, на котором знак остаётся двуцветным. Одинаково уместен в обеих темах, поэтому без ограничений. */ #taskmenu { background: var(--rs-graphite) !important; } /* Знак лежит не внутри #taskmenu, а в шапке #layout-menu — у неё свой фон от elastic, и без этого правила под логотипом видна чужая плашка. */ #layout-menu, #layout-menu > .popover-header, #layout-menu .popover-header { background: var(--rs-graphite) !important; background-color: var(--rs-graphite) !important; border: 0 !important; box-shadow: none !important; } #layout-menu #logo { max-height: 34px; width: auto; opacity: 1; } #taskmenu a { color: #AEB6BF !important; } #taskmenu a:hover { color: #FFF !important; background: rgba(255, 255, 255, .07) !important; } #taskmenu a.selected { color: #FFF !important; background: var(--rs-red) !important; } #taskmenu a.selected::before, #taskmenu a.selected::after { color: #FFF !important; } /* ── Шапки колонок ──────────────────────────────────────────── */ #layout .header { background: var(--rs-graphite) !important; color: #FFF !important; border-bottom: 0 !important; } #layout .header a, #layout .header .header-title, #layout .header .menu-button, #layout .header .back-sidebar-button, #layout .header .back-list-button { color: #FFF !important; } /* ── Кнопки основного действия ──────────────────────────────── */ .btn-primary, a.btn-primary, button.btn-primary, .button.primary, input.button.mainaction, button.mainaction { background-color: var(--rs-red) !important; border-color: var(--rs-red) !important; color: #FFF !important; } .btn-primary:hover, a.btn-primary:hover, button.btn-primary:hover, .button.primary:hover, button.mainaction:hover { background-color: var(--rs-red-dark) !important; border-color: var(--rs-red-dark) !important; } /* ── Ссылки и выделение ─────────────────────────────────────── */ html:not(.dark-mode) a { color: var(--rs-red-dark); } html:not(.dark-mode) a:hover { color: var(--rs-red); } /* В тёмной теме тёмно-красный не читается — берём осветлённый */ html.dark-mode a { color: var(--rs-red-light); } .listing li.selected::before, .listing tr.selected::before, .folderlist li.selected > a { border-color: var(--rs-red) !important; } html:not(.dark-mode) .listing li.selected > a, html:not(.dark-mode) table.listing tr.selected td { color: var(--rs-red-dark) !important; } .messagelist .flagged .flag span.flagged::before, .messagelist td.flag span.flagged::before { color: var(--rs-red) !important; } /* ── Страница входа ─────────────────────────────────────────── */ html:not(.dark-mode) body.task-login, html:not(.dark-mode) .task-login #layout { background: var(--rs-bg) !important; } /* Киноварная линия поверх формы — единственный акцент на входе */ #login-form .box-inner { border-top: 3px solid var(--rs-red); border-radius: 3px; } html:not(.dark-mode) #login-form .box-inner { box-shadow: 0 2px 18px rgba(28, 35, 43, .10); } #login-form img.logo, #login-form .logo img, .task-login .logo img { max-width: 240px; height: auto; } #login-form input.form-control:focus, #login-form .formcontent input:focus { border-color: var(--rs-red) !important; box-shadow: 0 0 0 2px rgba(176, 42, 39, .18) !important; } /* ── Мелочи ─────────────────────────────────────────────────── */ .pagenav a.button:hover, .dropbutton .dropbuttontip:hover { color: var(--rs-red) !important; }