/* СГЕНЕРИРОВАНО gen-sogo: заголовок страницы входа (webmail_title, webmail_subtitle). */ :root { --elara-title: "Корпоративная почта"; --elara-subtitle: "Почта, календарь и контакты"; } /* ===================================================================== Классический вид веб-почты SOGo (ElaraMail). Цвета приходят из пересобранной темы (bin/gen-sogo-theme); здесь — только раскладка поверх штатной разметки SOGo 5: страница входа в виде обычной карточки, подписи у разделов, кнопка «Написать» слева, флажки выделения вместо аватаров. Логику SOGo не трогаем: вход с кодом 2FA, смена просроченного пароля и сообщения об ошибке остаются штатными. Файл кладёт gen-sogo в /var/www/elara-logos/, перед ним — строка с переменными заголовка (настройки webmail_title, webmail_subtitle). nginx подключает его в каждой страницы SOGo (sub_filter). ===================================================================== */ :root { --elara-navy: #1f4170; --elara-blue: #2f6fd6; --elara-blue-dark: #2455a8; --elara-sel: #dce8fa; --elara-hover: #eef3fa; --elara-text: #1f2d3d; --elara-dim: #5b6b80; --elara-line: #d5dce6; --elara-page: #eef2f7; } /* ------------------------------------------------------------ вход */ [ng-app="SOGo.MainUI"] main.view, [ng-app="SOGo.MainUI"] main.view > md-content { background: var(--elara-page) !important; } [ng-app="SOGo.MainUI"] main.view > md-content { align-items: center !important; justify-content: flex-start !important; margin: 0 !important; padding: 12vh 16px 24px !important; } /* Карточка входа повторяет вход в панель администрирования: та же ширина, скругление, рамка и тень. Пользователь должен видеть один продукт, а не два разных. Значения взяты из panel/style.css (.login). */ #loginContent { flex: 0 0 auto !important; flex-direction: column !important; justify-content: flex-start !important; width: 340px; max-width: 100%; height: auto !important; min-height: 0 !important; margin: 0 !important; background: #fff !important; border: 1px solid #cfd8e5; border-radius: 6px; overflow: hidden; box-shadow: 0 8px 28px rgba(0, 0, 0, .10) !important; } #loginContent > .sg-logo, #loginContent > .sg-login { flex: 1 1 auto !important; max-width: 100% !important; width: 100%; min-height: 0 !important; } #loginContent .sg-logo { background: #fff !important; text-align: center; margin: 0 !important; padding: 26px 28px 0; } /* Логотип ElaraMail — картинкой из /elara-logos/ (кладёт gen-sogo рядом с темой). Своя разметка SOGo сюда не годится: её занят логотипом домена, если он задан в настройках. */ #loginContent .sg-logo::before { content: ""; display: block; width: 210px; height: 77px; margin: 0 auto; background: url("/elara-logos/elaramail-logo.png") center/contain no-repeat; } #loginContent .sg-logo > .md-padding { justify-content: center; padding: 0 !important; } /* без своего логотипа строка с картинкой не нужна вовсе */ #loginContent .sg-logo > .md-padding:has(img[src*="sogo-full.svg"]) { display: none !important; } #loginContent .sg-logo .md-flex { display: none !important; } #loginContent .sg-logo img { max-height: 64px; max-width: 240px; margin: 0 auto 14px !important; } /* штатная картинка «sogo» не показывается; свой логотип домена — да */ #loginContent .sg-logo img[src*="sogo-full.svg"] { display: none !important; } /* Подписи под знаком нет: логотип говорит сам за себя. Настройка webmail_title осталась — она задаёт заголовок вкладки браузера. */ #loginContent .sg-logo::after { content: none !important; } #loginContent .sg-login { background: #fff !important; color: var(--elara-text) !important; } /* Вторая строка-пояснение (webmail_subtitle) на карточке не выводится: на входе в панель её нет, а две подписи подряд под знаком выглядят тяжело. Настройка сохранена — вернуть строку можно одним правилом. */ #loginContent .sg-login::before { content: none !important; } #loginContent .sg-login-content { width: 100% !important; max-width: none !important; box-sizing: border-box; padding: 18px 28px 22px !important; } #loginContent form, #loginContent form > div { width: 100%; } /* Раскладка формы: поля во всю ширину, ниже одной строкой кнопка входа и флажок «запомнить» справа от неё. В разметке SOGo поля, выбор языка и флажок лежат в одном блоке, а кнопка — в соседнем, ПОСЛЕ них. Поэтому первый блок распускаем через display:contents (его содержимое становится элементами самой формы), а порядок задаём свойством order — оно учитывается и при раскладке по сетке. */ /* minmax(0, 1fr), а не просто 1fr: иначе колонка растягивается под самое широкое содержимое (длинная подпись флажка) и форма вылезает за края карточки. То же и с min-width: 0 у ячеек. */ #loginContent form { display: grid !important; width: 100%; box-sizing: border-box; grid-template-columns: max-content minmax(0, 1fr); align-items: center; column-gap: 12px; } #loginContent form > div:first-child { display: contents; } #loginContent form md-input-container { order: 1; grid-column: 1 / -1; min-width: 0; } #loginContent form > div:has(> button[type="submit"]), #loginContent form > div:has(> div > button[type="submit"]) { order: 2; grid-column: 1; min-width: 0; } #loginContent form div:has(> md-switch) { order: 3; grid-column: 2; min-width: 0; } /* выбор языка убран: язык берётся из браузера и меняется в настройках почты */ #loginContent form div:has(> md-input-container md-select) { display: none !important; } /* накладки «проверяю…» и сообщения об ошибке — во всю ширину */ #loginContent form > sg-ripple, #loginContent form > sg-ripple-content { grid-column: 1 / -1; } /* поля: подпись над рамкой, без плавающих подписей и значков */ #loginContent md-input-container { display: block; margin: 0 0 16px !important; padding: 0 !important; } #loginContent md-input-container.md-icon-left, #loginContent md-input-container.md-icon-right { padding-left: 0 !important; padding-right: 0 !important; } #loginContent md-input-container > md-icon:not(#password-visibility-icon) { display: none !important; } #loginContent md-input-container label:not(.md-no-float) { position: static !important; transform: none !important; -webkit-transform: none !important; display: block; color: var(--elara-dim) !important; font-size: 12px; font-weight: 400; padding: 0 0 4px !important; width: auto !important; text-align: left; } #loginContent md-input-container label.md-required::after { content: none !important; } #loginContent md-input-container .md-input { border: 1px solid #cfd8e5 !important; border-radius: 3px; height: 32px; padding: 0 8px !important; background: #fff !important; color: var(--elara-text) !important; font-size: 15px; box-sizing: border-box; width: 100%; transition: border-color .15s, box-shadow .15s; } #loginContent md-input-container .md-input:focus { border-color: var(--elara-blue) !important; box-shadow: 0 0 0 3px rgba(47, 111, 214, .16); } #loginContent md-input-container .md-errors-spacer { display: none; } #loginContent md-input-container:has(#passwordField) .md-input { padding-right: 42px !important; } #loginContent #password-visibility-icon { position: absolute; right: 10px; bottom: 9px; top: auto !important; margin: 0 !important; color: #7a889b !important; cursor: pointer; } #loginContent .sg-hint { color: var(--elara-dim) !important; font-size: 12px; margin-top: 6px; } /* язык: одна компактная строка без подписи «Выбрать…» */ /* Выбор языка — по центру под кнопкой, как на входе в панель */ #loginContent div:has(> md-input-container md-select) { align-items: center !important; justify-content: center !important; margin: 14px 0 2px; } #loginContent div:has(> md-input-container md-select) > md-icon { color: #7a889b !important; margin: 0 8px 0 0 !important; } #loginContent md-input-container:has(md-select) { margin: 0 !important; } #loginContent md-input-container:has(md-select) label { display: none !important; } #loginContent md-select { margin: 0 !important; } #loginContent md-select .md-select-value { border-bottom-color: var(--elara-line) !important; color: var(--elara-text) !important; min-height: 32px; } /* «Запомнить имя пользователя» — обычная галочка справа от кнопки входа. Штатный md-switch (ползунок) переодеваем в квадратный флажок: полосу делаем рамкой, бегунок убираем, галочку рисуем уголком из рамок. Так не приходится трогать разметку и перевод подписи. */ #loginContent div:has(> md-switch) { justify-content: flex-start !important; } #loginContent md-switch { display: flex !important; align-items: center; margin: 14px 0 0 !important; padding: 0 !important; min-height: 0 !important; } #loginContent md-switch .md-container { width: 15px !important; height: 15px !important; margin: 0 7px 0 0 !important; } #loginContent md-switch .md-bar { width: 15px !important; height: 15px !important; top: 0 !important; left: 0 !important; border: 1px solid #b6c1d0; border-radius: 2px; background-color: #fff !important; } #loginContent md-switch .md-thumb-container, #loginContent md-switch .md-thumb { display: none !important; } #loginContent md-switch.md-checked .md-bar { background-color: var(--elara-blue) !important; border-color: var(--elara-blue); } #loginContent md-switch.md-checked .md-container::after { content: ""; position: absolute; left: 5px; top: 1px; width: 4px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } #loginContent md-switch .md-label { color: var(--elara-dim) !important; font-size: 12px; line-height: 1.25; margin: 0 !important; white-space: normal; /* подпись длинная — пусть переносится */ min-width: 0; } /* кнопка входа — обычная широкая кнопка с подписью */ #loginContent button[ng-click="app.showAbout()"] { display: none !important; } #loginContent form div:has(> button.md-fab[type="submit"]), #loginContent form div:has(> div > button.md-fab[type="submit"]) > div { flex: 1 1 auto; } #loginContent button.md-fab[type="submit"] { width: auto !important; min-width: 130px; padding: 0 20px !important; height: 34px !important; min-height: 34px; line-height: 34px; margin: 14px 0 0 !important; border-radius: 3px !important; background: var(--elara-blue) !important; color: #fff !important; box-shadow: none !important; font-size: 15px; font-weight: 600; text-transform: none; } #loginContent button.md-fab[type="submit"]:not([disabled]):hover { background: var(--elara-blue-dark) !important; } #loginContent button.md-fab[type="submit"][disabled] { background: #a7bfe6 !important; color: #fff !important; } #loginContent button.md-fab[type="submit"] md-icon { display: none !important; } #loginContent button.md-fab[type="submit"]::after { content: attr(aria-label); } #loginContent a.password-lost-link { color: var(--elara-blue) !important; font-size: 13px; } /* экраны «проверяю…», код 2FA, ошибка: белый фон вместо заливки */ #loginContent sg-ripple { background-color: #fff !important; } #loginContent sg-ripple.md-warn { background-color: #fff5f5 !important; } #loginContent sg-ripple-content, #loginContent sg-ripple-content .md-fg, #loginContent sg-ripple-content .md-padding { color: var(--elara-text) !important; } #loginContent sg-ripple-content md-icon { color: var(--elara-blue) !important; } #loginContent sg-ripple.md-warn + sg-ripple-content md-icon { color: #c62828 !important; } #loginContent sg-ripple-content .md-button:not(.md-fab) { color: var(--elara-blue) !important; font-weight: 600; } #loginContent md-progress-circular path { stroke: var(--elara-blue) !important; } /* =============================================== веб-почта: общее */ /* большая дата в шапке — не для почты */ .sg-date-group, .sg-date-today { display: none !important; } /* панель справа (письмо не выбрано, само письмо) — белая */ #detailView, #detailView > md-content { background-color: #fff !important; } @media (min-width: 960px) { /* разделы вверху справа — с подписями, как вкладки */ md-toolbar.toolbar-main .sg-toolbar-group-last > a.md-icon-button:not(.ng-hide) { width: auto !important; min-width: 0 !important; height: 36px !important; padding: 0 14px 0 10px !important; margin: 0 2px !important; border-radius: 6px !important; display: inline-flex !important; align-items: center; gap: 8px; line-height: 36px; } md-toolbar.toolbar-main .sg-toolbar-group-last > a.md-icon-button::after { content: attr(aria-label); font-size: 14px; font-weight: 500; text-transform: none; white-space: nowrap; } md-toolbar.toolbar-main .sg-toolbar-group-last > a.md-icon-button:hover { background: rgba(255, 255, 255, .12) !important; } md-toolbar.toolbar-main .sg-toolbar-group-last > a.md-icon-button[disabled] { background: rgba(255, 255, 255, .2) !important; color: #fff !important; opacity: 1 !important; } md-toolbar.toolbar-main .sg-toolbar-group-last > a.md-icon-button[disabled] md-icon { color: #fff !important; opacity: 1 !important; } md-toolbar.toolbar-main .sg-toolbar-group-last > div.hide-xs { width: 16px !important; } } /* ------------------------------------------- панель слева (папки) */ md-sidenav.md-sidenav-left, md-sidenav.md-sidenav-left > md-content, md-sidenav.md-sidenav-left md-content._md { background-color: #f5f7fa !important; } md-sidenav.md-sidenav-left > md-toolbar.md-tall { min-height: 64px !important; height: 64px !important; max-height: 64px !important; padding: 0 12px 0 16px !important; align-items: center; } md-sidenav.md-sidenav-left > md-toolbar.md-tall > sg-avatar-image { display: none !important; } md-sidenav.md-sidenav-left > md-toolbar.md-tall .md-toolbar-tools, md-sidenav.md-sidenav-left > md-toolbar.md-tall > div { min-height: 0 !important; height: auto !important; padding: 0 !important; } /* своя кнопка «Написать» (её вставляет elara-custom.js) */ #elara-compose { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px 16px 10px; height: 42px; border: 0; border-radius: 8px; background: var(--elara-blue); color: #fff; font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1; cursor: pointer; box-shadow: 0 1px 2px rgba(15, 35, 70, .18); flex: none; } #elara-compose:hover { background: var(--elara-blue-dark); } #elara-compose svg { width: 18px; height: 18px; fill: currentColor; } /* штатную круглую кнопку прячем, пока слева есть своя */ body.elara-has-compose md-fab-speed-dial.sg-fab-bottom-center:not(.sg-sidenav-close) { display: none !important; } /* папки: выделенная — светло-синяя с полосой слева */ md-sidenav.md-sidenav-left md-list-item.sg-active, md-sidenav.md-sidenav-left md-list-item[aria-selected="true"], md-sidenav.md-sidenav-left md-list-item.md-bg { background: var(--elara-sel) !important; box-shadow: inset 3px 0 0 var(--elara-blue); } md-sidenav.md-sidenav-left md-list-item:hover { background: var(--elara-hover); } .sg-counter-badge { background: var(--elara-blue) !important; color: #fff !important; border-radius: 10px; padding: 0 7px !important; } /* ------------------------------------------------- список писем */ md-list-item.sg-message-list-item { border-bottom: 1px solid #eef1f5; } md-list-item.sg-message-list-item:hover { background: var(--elara-hover); } md-list-item.sg-message-list-item.md-bg, md-list-item.sg-message-list-item.md-accent.md-bg.md-hue-2 { background: var(--elara-sel) !important; color: var(--elara-text) !important; } md-list-item.sg-message-list-item.md-bg * { color: var(--elara-text) !important; } md-list-item.sg-message-list-item.unread .sg-md-subhead, md-list-item.sg-message-list-item.unread .sg-tile-subject { font-weight: 700; } md-list-item.sg-message-list-item .sg-tile-date, md-list-item.sg-message-list-item .sg-tile-size { color: var(--elara-dim); } /* аватар отправителя = переключатель выделения → обычный флажок */ md-list-item.sg-message-list-item .sg-avatar-selectable sg-avatar-image { display: none !important; } md-list-item.sg-message-list-item .sg-avatar-selectable { width: 18px !important; height: 18px !important; min-width: 18px; margin: 0 auto; border: 2px solid #9aa7b8; border-radius: 4px; background: #fff; box-sizing: border-box; position: relative; } md-list-item.sg-message-list-item .sg-avatar-selectable.sg-avatar-selected { background: var(--elara-blue); border-color: var(--elara-blue); } md-list-item.sg-message-list-item .sg-avatar-selectable.sg-avatar-selected::after { content: ""; position: absolute; left: 4px; top: 0; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } /* ------------------------------------------------ окно нового письма */ /* «Отправить» — кнопка с подписью, а не безымянный самолётик */ md-dialog md-toolbar button.sg-icon-button[sg-ripple-click="mailEditor"] { width: auto !important; padding: 0 16px 0 12px !important; margin-right: 8px !important; border-radius: 6px !important; background: rgba(255, 255, 255, .18) !important; display: inline-flex !important; align-items: center; gap: 6px; } md-dialog md-toolbar button.sg-icon-button[sg-ripple-click="mailEditor"]:not([disabled]):hover { background: rgba(255, 255, 255, .28) !important; } md-dialog md-toolbar button.sg-icon-button[sg-ripple-click="mailEditor"]::after { content: "Отправить"; font-size: 14px; font-weight: 600; text-transform: none; } body.elara-en md-dialog md-toolbar button.sg-icon-button[sg-ripple-click="mailEditor"]::after { content: "Send"; }