/* Правки Макса поверх стилей CloudCLI. Подключается из index.html (см. apply.py). */ /* Лента чата: шрифт как в поле ввода (без засечек) вместо Merriweather/Noto Serif */ .font-serif { font-family: inherit !important; } /* Лента чата: размер из настройки CloudCLI «Размер шрифта» (custom.js ставит --mx-chat-font на каждом устройстве своё; без настройки 13px), книжный интервал 1.5 — для сообщений Claude и пользователя */ .prose.prose-sm.font-serif, .break-words.font-serif.text-sm { font-size: var(--mx-chat-font, 13px) !important; line-height: 1.5 !important; } /* Между абзацами 13px (у CloudCLI было ~15px) */ .prose.prose-sm.font-serif p { margin-top: 0; margin-bottom: 13px; } .prose.prose-sm.font-serif p:last-child { margin-bottom: 0; } /* Боковая панель: карточка ОТКРЫТОГО чата — фон чуть светлее остальных (обычная карточка 12%, эта 30%). Только карточки чатов (rounded-md), проекты не трогаем; рамка остаётся штатная. */ .rounded-md.bg-primary\/5.border-primary\/20 { background-color: hsl(0 0% 30%) !important; } /* Карта чата (custom.js): кнопка у правого края + панель справа */ #mx-map-backdrop { position: fixed; inset: 0; z-index: 9990; background: rgba(0, 0, 0, .5); } #mx-map-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 9991; width: min(92vw, 380px); display: flex; flex-direction: column; } #mx-map-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; font-size: 14px; font-weight: 600; } #mx-map-close { padding: 2px 8px; font-size: 16px; line-height: 1; opacity: .7; } #mx-map-close:hover { opacity: 1; } #mx-map-list { flex: 1; overflow-y: auto; padding: 6px 0; } .mx-map-item { display: block; width: 100%; text-align: left; padding: 8px 12px; border-bottom: 1px solid hsl(var(--border) / .5); } .mx-map-item:hover, .mx-map-item:active { background: hsl(var(--accent)); } .mx-map-time { display: block; font-size: 11px; opacity: .6; margin-bottom: 2px; } .mx-map-text { display: block; font-size: 13px; line-height: 1.35; word-break: break-word; } .mx-map-note { padding: 12px; font-size: 13px; opacity: .7; } #mx-map-toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 9992; padding: 8px 14px; border-radius: 999px; font-size: 12px; background: rgba(37, 99, 235, .95); color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.3); pointer-events: none; white-space: nowrap; } #mx-map-count { font-weight: 400; opacity: .6; font-size: 12px; } /* Карта чата: пункт, соответствующий видимой сейчас области ленты */ .mx-map-item.mx-map-current { background: hsl(0 0% 30%); box-shadow: inset 3px 0 0 hsl(217 91% 60%); } /* Фильтр ленты (custom.js): галки в карте чата + скрытые элементы ленты */ #mx-map-filter { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 8px 12px; font-size: 13px; border-bottom: 1px solid hsl(var(--border) / .5); } #mx-map-filter label { display: flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; } #mx-map-filter input { width: 15px; height: 15px; accent-color: hsl(217 91% 60%); } .chat-message[data-mx-hide="1"] { display: none !important; } /* Архивный чат (custom.js ставит data-mx-archive на по префиксу «[архив]» в имени): тёплый фон вместо чёрного, чтобы было видно, что пишешь в закрытый чат. */ html.dark[data-mx-archive="1"] { --background: 28 20% 10%; --card: 28 16% 14%; --popover: 28 16% 14%; --secondary: 28 13% 19%; --muted: 28 13% 19%; --border: 28 13% 23%; } html[data-mx-archive="1"]:not(.dark) { --background: 34 40% 91%; --card: 34 45% 96%; --popover: 34 45% 96%; --secondary: 34 25% 87%; --muted: 34 25% 87%; --border: 34 22% 80%; } .mx-archive-badge { flex-shrink: 0; margin-left: 6px; padding: 0 6px; font-size: 10px; font-weight: 700; letter-spacing: .04em; line-height: 16px; border-radius: 5px; white-space: nowrap; color: hsl(32 85% 68%); background: hsl(32 60% 32% / .35); border: 1px solid hsl(32 60% 50% / .45); } html[data-mx-archive="1"]:not(.dark) .mx-archive-badge { color: hsl(28 70% 32%); background: hsl(34 70% 82%); border-color: hsl(30 50% 62%); } /* Плашка проекта, мобильная раскладка (custom.js «Плашка проекта»): высота на ~15% меньше (62 → 52px) */ .md\:hidden > div.p-3.mx-3.my-1.rounded-lg:has(h3.truncate.text-sm) { padding-top: 7px; padding-bottom: 7px; } /* Кнопки «переименовать» (синий карандаш), «избранное» (звезда слева) и «удалить» (красная корзина) спрятаны; их копии показывает окошко #mx-pm-pop (слой в body) по «⋯». Атрибут data-mx-pm стоит на ряду плашки. */ [data-mx-pm] > div.flex-1 > button, [data-mx-pm] > div.gap-1 > button[class*="bg-red-500/10"], [data-mx-pm] > div.gap-1 > button[class*="bg-primary/10"] { display: none; } #mx-pm-backdrop { position: fixed; inset: 0; z-index: 9980; background: rgba(0, 0, 0, .25); } #mx-pm-panel { position: fixed; z-index: 9981; display: flex; gap: 8px; padding: 8px; border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); } #mx-pm-panel .mx-pm-copy { height: 40px; width: 40px; } /* Кнопка меню в мобильной шапке (три полоски, класс pwa-menu-button): зона нажатия 48×48 вместо 32×32. Отрицательные отступы компенсируют рост, иконка остаётся на месте, соседи не сдвигаются. */ .pwa-menu-button { width: 48px; height: 48px; padding: 14px; margin: -8px; box-sizing: border-box; } /* Метка состояния ответа в шапке (custom.js): «думаю…» / «в очереди: N» */ .mx-run-badge { flex-shrink: 0; margin-left: 6px; padding: 0 6px; font-size: 10px; font-weight: 600; line-height: 16px; border-radius: 5px; white-space: nowrap; color: hsl(217 90% 72%); background: hsl(217 60% 30% / .35); border: 1px solid hsl(217 60% 50% / .45); } .mx-run-badge[data-mx-queued="1"] { color: hsl(32 85% 70%); background: hsl(32 60% 32% / .35); border-color: hsl(32 60% 50% / .45); } /* Формулы KaTeX в ленте (патч math-preprocess, 2026-09-09). Штатный katex.css не даёт прокрутки: длинная выключная формула на телефоне (ширина ~390px) растягивала страницу. Держим формулу внутри пузыря сообщения, лишнее — горизонтальной прокруткой. */ .katex-display { overflow-x: auto; overflow-y: hidden; max-width: 100%; padding: 2px 0 6px; margin: .8em 0; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .katex-display > .katex { text-align: initial; /* иначе центр обрезается при прокрутке */ white-space: nowrap; } /* строчная формула переносится вместе с текстом, но не рвётся посередине */ .prose .katex { font-size: 1.06em; /* KaTeX мельче текста ленты */ max-width: 100%; } /* полоса прокрутки тонкая и незаметная, пока не листают */ .katex-display::-webkit-scrollbar { height: 4px; } .katex-display::-webkit-scrollbar-thumb { background: hsl(0 0% 50% / .35); border-radius: 2px; } /* битая формула (не дописанная человеком) — заметно, но не красной стеной */ .katex-error { font-family: ui-monospace, monospace; font-size: .9em; word-break: break-all; } /* Боковая панель, мобильная раскладка: плашки «Сообщить о проблеме» (GitHub issues) и «Присоединиться к сообществу» (Discord) спрятаны вместе со своими обёртками (Макс: «нафиг они нужны», 2026-09-09) */ .md\:hidden:has(> a[href^="https://github.com/siteboon/claudecodeui/issues"]), .md\:hidden:has(> a[href^="https://discord.gg/"]) { display: none !important; } /* Плашки чатов в мобильной панели: высота 50 → 36px (два раза «минус 15%», 2026-09-09); поля 8px → 1px, ниже нельзя без уменьшения иконки (внутренний ряд 32px) */ .md\:hidden > div.p-2.mx-3.rounded-md[class*="my-0.5"] { padding-top: 1px; padding-bottom: 1px; } /* Чаты моста «[мост] …» (custom.js «Чаты моста»): спрятаны, пока не включена галка «мосты» в окошке «⋯» */ html[data-mx-bridges="0"] [data-mx-bridge] { display: none !important; } #mx-pm-panel .mx-pm-bridges { display: flex; align-items: center; gap: 6px; padding: 0 6px 0 4px; font-size: 13px; border-left: 1px solid hsl(var(--border)); margin-left: 2px; } #mx-pm-panel .mx-pm-bridges input { width: 18px; height: 18px; accent-color: hsl(217 91% 60%); } /* Кнопка модели у поля ввода: на телефоне показывать и уровень рассуждений («Fable 5 · Max»), как на широком экране — у CloudCLI надпись усилия hidden sm:inline и кнопка max-w-20 (80px) до 640px */ button.max-w-20[aria-haspopup="menu"] { max-width: 9rem !important; } button.max-w-20[aria-haspopup="menu"] > span.hidden { display: inline !important; }