/* MSN Studio — фирменное оформление Roundcube (mail.msn-studio.ru). * * Скин наследует штатный elastic: сначала целиком подтягивается его таблица * стилей, ниже переопределяются только цвета, шрифт и скругления. Файлы elastic * не трогаются, поэтому обновление Roundcube оформление не ломает. * * Палитра из брендбука MSN Studio (18.09.2026): * Primary #6366F1 (кнопки, активные состояния), Secondary #06B6D4 (фокус, * живые индикаторы), Accent #A855F7 (только в градиенте главной кнопки), * Dark #0B0F1A (панель задач), карточка тёмной темы #131A2B (шапки колонок), * Light #F8FAFC (фон страницы входа). Шрифт Inter, самохостинг — из Китая * Google Fonts недоступен. * * Про тёмную тему: Roundcube ставит на класс dark-mode, когда включена * тёмная тема в настройках или так просит система. Всё, что задаёт светлый фон * или тёмный текст, ограничено светлой темой через html:not(.dark-mode). * Тёмные панели и градиентные кнопки одинаково уместны в обеих темах. */ @import url("../../elastic/styles/styles.min.css"); @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --msn-primary: #6366F1; --msn-primary-dark: #4F52D9; --msn-primary-text: #4F52D9; /* Primary как цвет текста на светлом, контраст 6:1 */ --msn-primary-light: #A5A7FA; /* то же для тёмной темы */ --msn-secondary: #06B6D4; --msn-accent: #A855F7; --msn-dark: #0B0F1A; --msn-dark-2: #131A2B; --msn-ink: #0B0F1A; --msn-muted: #64748B; --msn-line: #E2E8F0; --msn-bg: #F8FAFC; --msn-grad: linear-gradient(135deg, #6366F1, #A855F7); } /* ── Шрифт ──────────────────────────────────────────────────── */ body, input, button, select, textarea, optgroup, .form-control, .btn, .popover, .tooltip, .ui-widget { font-family: "Inter", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } /* ── Панель задач ───────────────────────────────────────────── Вертикальная полоса слева — Dark из брендбука. Знак лежит в шапке #layout-menu, у неё свой фон от elastic, поэтому красим и её. */ #taskmenu { background: var(--msn-dark) !important; } #layout-menu, #layout-menu > .popover-header, #layout-menu .popover-header { background: var(--msn-dark) !important; background-color: var(--msn-dark) !important; border: 0 !important; box-shadow: none !important; } #layout-menu #logo { max-height: 34px; width: auto; opacity: 1; } #taskmenu a { color: #8B95A8 !important; border-radius: 12px; } #taskmenu a:hover { color: #FFF !important; background: rgba(255, 255, 255, .07) !important; } #taskmenu a.selected { color: #FFF !important; background: var(--msn-primary) !important; } #taskmenu a.selected::before, #taskmenu a.selected::after { color: #FFF !important; } /* ── Шапки колонок ──────────────────────────────────────────── */ #layout .header { background: var(--msn-dark-2) !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; } #layout .header .searchbar input.form-control { color: #FFF; } /* ── Кнопки основного действия: градиент Primary → Accent, капсула ── */ .btn-primary, a.btn-primary, button.btn-primary, .button.primary, input.button.mainaction, button.mainaction { background: var(--msn-grad) !important; border-color: transparent !important; color: #FFF !important; border-radius: 100px !important; } .btn-primary:hover, a.btn-primary:hover, button.btn-primary:hover, .button.primary:hover, button.mainaction:hover { filter: brightness(.94); color: #FFF !important; } .btn-primary:focus, button.btn-primary:focus { box-shadow: 0 0 0 2px rgba(6, 182, 212, .45) !important; } .btn-secondary { border-radius: 100px !important; } /* ── Ссылки и выделение ─────────────────────────────────────── */ html:not(.dark-mode) a { color: var(--msn-primary-text); } html:not(.dark-mode) a:hover { color: var(--msn-primary); } html.dark-mode a { color: var(--msn-primary-light); } .listing li.selected::before, .listing tr.selected::before, .folderlist li.selected > a { border-color: var(--msn-primary) !important; } html:not(.dark-mode) .listing li.selected > a, html:not(.dark-mode) table.listing tr.selected td { color: var(--msn-primary-text) !important; } /* Счётчики непрочитанных — Primary, а не серые */ .folderlist li .unreadcount, .listing .unreadcount, span.unreadcount { background: var(--msn-primary) !important; color: #FFF !important; } /* Флажок остаётся красным — единственный красный вне ошибок */ .messagelist .flagged .flag span.flagged::before, .messagelist td.flag span.flagged::before { color: #EF4444 !important; } /* ── Поля ввода: фокус — обводка Secondary (брендбук, п. 5) ── */ .form-control:focus, input.form-control:focus, textarea.form-control:focus { border-color: var(--msn-secondary) !important; box-shadow: 0 0 0 2px rgba(6, 182, 212, .25) !important; } /* Переключатели и чекбоксы — Primary */ .custom-control-input:checked ~ .custom-control-label::before, .custom-switch .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--msn-primary) !important; border-color: var(--msn-primary) !important; } /* ── Страница входа: всегда тёмная, как сайт msn-studio.ru ────── Фон Dark, карточка #131A2B, поля #182135, кнопка — градиент. Рабочий интерфейс после входа остаётся светлым (письма читать удобнее), тёмными там только панель задач и шапки колонок. */ body.task-login, .task-login #layout, .task-login #layout-content { background: var(--msn-dark) !important; color: #8B95A8; } .task-login a { color: var(--msn-primary-light) !important; } #login-form .box-inner { background: var(--msn-dark-2) !important; border: 1px solid rgba(255, 255, 255, .08) !important; border-radius: 18px; padding: 26px 28px 22px; box-shadow: 0 24px 60px rgba(0, 0, 0, .45); } #login-form img.logo, #login-form .logo img, .task-login .logo img { max-width: 240px; height: auto; } #login-form .form-control, #login-form input.form-control, #login-form .input-group-text { background: #182135 !important; border-color: rgba(255, 255, 255, .14) !important; color: #F8FAFC !important; } #login-form .form-control::placeholder { color: #8B95A8 !important; opacity: 1; } #login-form .input-group-text, #login-form .input-group-text i, #login-form .input-group-text::before { color: #8B95A8 !important; } #login-form .form-control, #login-form input.form-control { border-radius: 100px !important; padding-left: 18px; padding-right: 18px; } #login-form .input-group .form-control { border-radius: 0 100px 100px 0 !important; } #login-form .input-group-prepend .input-group-text { border-radius: 100px 0 0 100px !important; } #login-form .input-group .form-control:focus { border-color: var(--msn-secondary) !important; box-shadow: 0 0 0 2px rgba(6, 182, 212, .3) !important; } #login-form .btn-primary, #login-form button.btn-primary, .task-login button.btn.btn-primary { text-transform: none !important; font-weight: 600 !important; font-size: 15px !important; letter-spacing: 0 !important; } /* ── Мелочи ─────────────────────────────────────────────────── */ .pagenav a.button:hover, .dropbutton .dropbuttontip:hover { color: var(--msn-primary) !important; } html:not(.dark-mode) .toolbar a.button.selected, html:not(.dark-mode) .toolbar a.button:focus { color: var(--msn-primary-text) !important; } #messagestack .confirmation { background: #22C55E !important; } #messagestack .error { background: #EF4444 !important; }