/* Elchat UI foundation — Material 3. Геометрия, материалы и движение, общие для Web и MAUI. Цвета сюда не пишутся: роли и палитры живут в material-theme.css, здесь — только то, как из них собираются элементы. Три вещи, которые этот файл делает иначе, чем прежняя версия: 1. Всплывающая поверхность (диалог, меню, снекбар) непрозрачна. Раньше она была полупрозрачной с `backdrop-filter: blur(24px)`; в M3 глубину задаёт тон подложки — `surface-container` тем плотнее, чем выше элемент, — а размытие только съедало кадр на телефоне и делало текст под собой читаемым «наполовину». 2. Наведение и нажатие рисуются слоем состояния: плёнка из цвета содержимого с фиксированной прозрачностью (8% / 10%) поверх той же подложки. Отдельный «цвет наведения» для каждой поверхности не нужен и всегда где-нибудь расходился. 3. Тени — пять уровней M3 вместо мягких размывов на 34–54 px. Они заметно плотнее и короче: на светлой теме отделяют слой, на тёмной почти не видны, и там разделение берёт на себя тон. */ /* Правила без префикса `.tg-main` — для того, что MudBlazor рисует в портале рядом с корнем приложения (диалоги, меню, снекбар): внутрь `.tg-main` это не попадает. Признак темы там — `boot-dark` на , его держит messengerSetBootTheme. */ /* ── Кнопки ───────────────────────────────────────────────────────────────────────── */ /* Плашки главного экрана прибиты к верху; когда видны обе (запрос уведомлений и обновление), вторая встаёт под первой. Правило общее: элементы — корни разных компонентов. */ .notification-permission-card ~ .app-update.card { top: calc(max(14px, env(safe-area-inset-top)) + 94px); } .tg-main .mud-button-root, .tg-main button, .tg-main [role="button"] { transition-duration: var(--m3-duration-short2, 100ms); transition-timing-function: var(--m3-easing-standard, cubic-bezier(.2, 0, 0, 1)); } /* Текстовая и залитая кнопки M3 — «таблетка» высотой 40 px с меткой label-large. */ .tg-main .mud-button-root:not(.mud-icon-button):not(.mud-fab) { min-height: 40px; padding: 0 24px; border-radius: var(--m3-shape-full, 999px); font-size: .875rem; font-weight: 500; letter-spacing: .00625em; line-height: 1.25rem; text-transform: none; } /* Иконочная кнопка остаётся круглой: у неё слой состояния сам круглый. */ .tg-main .mud-icon-button { border-radius: 50%; } /* Круглая, а не квадрат со скруглением 16, как даёт спецификация M3: форму выбрал человек. Остальное у кнопки материальное — третий уровень тени и четвёртый под курсором. */ .tg-main .mud-fab { border-radius: 50%; box-shadow: var(--m3-elevation-3); } .tg-main .mud-fab:hover { box-shadow: var(--m3-elevation-4); } /* Слой состояния. `currentColor` — цвет метки кнопки, поэтому одна запись работает и на залитой кнопке (плёнка из on-primary), и на текстовой (плёнка из primary). */ .tg-main .mud-button-root:hover:not(:disabled) { background-image: linear-gradient( color-mix(in srgb, currentColor calc(var(--m3-state-hover, .08) * 100%), transparent) 0 0); } .tg-main .mud-button-root:active:not(:disabled) { background-image: linear-gradient( color-mix(in srgb, currentColor calc(var(--m3-state-press, .1) * 100%), transparent) 0 0); } .tg-main .mud-button-root:focus-visible { outline: 3px solid color-mix(in srgb, var(--m3-primary) 40%, transparent); outline-offset: 2px; } /* ── Поля ввода ───────────────────────────────────────────────────────────────────── */ /* Outlined text field в M3 — 4 px. Собственные поля клиента (строка сообщения, поиск) скруглены «полным» радиусом через --tg-radius-control и сюда не попадают: это разные элементы, и одинаковыми они выглядели только пока всё было закруглено на 22. */ .tg-main .mud-input-outlined, .tg-main .mud-input-outlined-border { border-radius: var(--m3-shape-xs, 4px); } /* ── Поверхности ──────────────────────────────────────────────────────────────────── */ .tg-main .mud-paper, .tg-main .mud-card { border-radius: var(--m3-shape-lg, 16px); background-color: var(--m3-surface-container-low); box-shadow: var(--m3-elevation-1); } /* Диалог — surface-container-high, скругление 28, третий уровень тени. */ .mud-dialog { overflow: hidden; border: 0; border-radius: var(--m3-shape-xl, 28px) !important; background: var(--m3-surface-container-high) !important; color: var(--m3-on-surface); box-shadow: var(--m3-elevation-3) !important; } .mud-dialog .mud-dialog-title { padding: 24px 24px 12px; color: var(--m3-on-surface); font-size: 1.5rem; font-weight: 400; letter-spacing: 0; line-height: 2rem; } .mud-dialog .mud-dialog-content { padding: 0 24px 24px; color: var(--m3-on-surface-variant); } .mud-dialog .mud-dialog-actions { gap: 8px; padding: 0 24px 24px; } .mud-dialog .mud-dialog-actions .mud-button-root { min-height: 40px; border-radius: var(--m3-shape-full, 999px); text-transform: none; } /* Затемнение под диалогом — плоский scrim M3 без размытия. */ .mud-overlay .mud-overlay-scrim { background: rgba(var(--m3-scrim, 0, 0, 0), .32); } /* Меню. Спецификация даёт 4 px, но в M3 Expressive контейнер меню подрос до 12 — на 4 всплывающий список выглядит вырезанным из таблицы, а не поднятым над ней. */ .main-menu-popover, .mobile-more-popover, .emoji-popover, .user-search-popover { border: 0 !important; border-radius: var(--m3-shape-md, 12px) !important; background: var(--m3-surface-container) !important; box-shadow: var(--m3-elevation-2) !important; } .main-menu-list .mud-list-item, .main-menu-list .mud-list-item-clickable, .main-menu-list .mud-list-item .mud-ripple, .mobile-more-list .mud-list-item, .mobile-more-list .mud-list-item-clickable, .mobile-more-list .mud-list-item .mud-ripple { border-radius: var(--m3-shape-sm, 8px) !important; } /* Снекбар и подсказка — инверсная поверхность: единственный элемент, который обязан читаться поверх любого содержимого, поэтому он контрастирует с темой, а не следует ей. */ .mud-snackbar { border-radius: var(--m3-shape-xs, 4px) !important; background: var(--m3-inverse-surface) !important; color: var(--m3-inverse-on-surface) !important; box-shadow: var(--m3-elevation-3) !important; } .mud-snackbar .mud-snackbar-content-action .mud-button-root { color: var(--m3-inverse-primary) !important; } .mud-tooltip { border-radius: var(--m3-shape-xs, 4px) !important; background: var(--m3-inverse-surface) !important; color: var(--m3-inverse-on-surface) !important; } /* В тёмной теме знак и надпись меняются на светлые варианты. Исходный src остаётся рабочим fallback до загрузки этого файла и для печати. Надпись — картинка, а не текст: у знака свои буквы, нарисованные дизайнером (`logo-brand.svg`), и набор её только напоминал. Отсюда две копии — «chat» индиговый и светлый; красить одну через currentColor нельзя, не наследует цвет страницы. */ .tg-main.tg-dark img[src$="/images/logo.svg"], html.boot-dark img[src$="/images/logo.svg"] { content: url("images/logo-white.svg"); } .tg-main.tg-dark img[src$="/images/logo-wordmark.svg"], html.boot-dark img[src$="/images/logo-wordmark.svg"] { content: url("images/logo-wordmark-white.svg"); } /* Навигация по разделам на широком экране — колонка слева, а не оверлей поверх содержимого: она занимает свою полосу в раскладке, и содержимому не нужен отступ, про который забудут при следующей правке. До 769 px правило не действует — там навигация плавает снизу, и раскладка остаётся прежней. */ @media (min-width: 769px) { .tg-main { display: flex; flex-direction: row; } /* Всё, кроме самой полосы: экран блокировки, заставка запуска, сцена маршрута. */ .tg-main > *:not(nav.section-nav) { flex: 1 1 auto; min-width: 0; } } /* Root pages remain scrollable, but use the same clean, hidden scrollbar as chats. */ .tg-main .services-page, .tg-main .wallet-page, .tg-main .settings-page, .tg-main .profile-page, .tg-main .ride-page, .tg-main .taxi-page { -ms-overflow-style: none; scrollbar-width: none; } .tg-main .services-page::-webkit-scrollbar, .tg-main .wallet-page::-webkit-scrollbar, .tg-main .settings-page::-webkit-scrollbar, .tg-main .profile-page::-webkit-scrollbar, .tg-main .ride-page::-webkit-scrollbar, .tg-main .taxi-page::-webkit-scrollbar { width: 0; height: 0; display: none; } /* Полноэкранный просмотрщик — общая оболочка вложения и карты. Правила жили в изоляции MediaViewer; когда тем же слоем открылась геопозиция, вторая копия означала бы два экрана, расходящихся при первой же правке. Разметку внутри каждый рисует свою — общее здесь только само окно: тёмная подложка, верхняя полоса и круглые кнопки на ней. */ .viewer { position: fixed; inset: 0; /* Выше всей обвязки окна: нижняя панель в узкой раскладке и кнопка «написать» стоят на 40 и 41, и раскрытая на весь экран фотография или карта обязана перекрывать их обе. Прежде эта конкуренция была не видна — область чата запирала просмотрщик внутри себя (см. .chat-area в Home.razor.css), и он не доставал даже до списка бесед. */ z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(var(--m3-scrim, 0, 0, 0), .92); /* Вырезы и системные полосы телефона: кнопки не должны прятаться под ними. */ padding: max(12px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); animation: viewer-in var(--m3-duration-short2, 100ms) var(--m3-easing-decelerate, cubic-bezier(0, 0, 0, 1)); outline: none; } @keyframes viewer-in { from { opacity: 0; } to { opacity: 1; } } .viewer-bar { position: absolute; top: max(6px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); left: max(8px, env(safe-area-inset-left)); z-index: 5; display: flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, .92); } .viewer-title { flex: 1 1 auto; min-width: 0; overflow: hidden; font-size: .8rem; opacity: .8; text-overflow: ellipsis; white-space: nowrap; } .viewer-action { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: inherit; cursor: pointer; transition: background-color var(--m3-duration-short2, 100ms) var(--m3-easing-standard, ease), transform var(--m3-duration-short2, 100ms) var(--m3-easing-standard, ease); } .viewer-action:hover { background: rgba(255, 255, 255, .2); } .viewer-action:active { transform: scale(.94); } .viewer-close:hover, .viewer-close:active { background: color-mix(in srgb, var(--m3-error) 62%, transparent); } .viewer-action:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } @media (max-width: 520px) { .mud-dialog { width: calc(100vw - 24px); max-width: calc(100vw - 24px); border-radius: var(--m3-shape-xl, 28px) !important; } .mud-dialog .mud-dialog-title { padding: 20px 20px 10px; } .mud-dialog .mud-dialog-content { padding: 0 20px 20px; } .mud-dialog .mud-dialog-actions { padding: 0 20px 20px; } } @media (prefers-reduced-motion: reduce) { .tg-main *, .tg-main *::before, .tg-main *::after { scroll-behavior: auto !important; transition-duration: 0ms !important; animation-duration: 0ms !important; animation-iteration-count: 1 !important; } }