/* Правки Макса поверх стилей 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) */ 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); } /* Кружок «работает» в каталоге (custom.js markSidebar): у строки чата и на плашке проекта (с числом) */ .mx-live-dot { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-width: 10px; height: 10px; margin-left: 6px; padding: 0 3px; box-sizing: border-box; border-radius: 6px; font-size: 9px; font-weight: 700; line-height: 10px; color: hsl(217 90% 85%); background: hsl(217 90% 60%); animation: mx-live-pulse 1.6s ease-in-out infinite; } h3 + .mx-live-dot { margin-right: auto; min-width: 14px; height: 14px; border-radius: 7px; line-height: 14px; font-size: 10px; } @keyframes mx-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .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) */ 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; } html[data-mx-archives="0"] [data-mx-archived] { display: none !important; } #mx-pm-panel .mx-pm-toggle { 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-toggle 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; } /* Кнопка «обновить список» (2026-09-12, custom.js «Кнопка обновления»): на телефоне штатная 32×32 в шапке панели спрятана, её копия 64×40 стоит справа от «Настройки» в одной строке */ @media (max-width: 767px) { div.flex.flex-shrink-0[class*="gap-1.5"]:has(> button[class*="bg-primary/90"]) > button[class*="bg-muted/50"].h-8.w-8 { display: none !important; } .mx-settings-row { display: flex; align-items: center; gap: 8px; } .mx-settings-row > button { min-width: 0; } .mx-refresh { width: 64px; flex: 0 0 64px; } } /* Unified panel: tab order is fixed; existing map filters and jump list retained. */ #mx-panel-tabs{display:flex;align-items:center;gap:3px;flex:1;min-width:0} #mx-panel-tabs button{padding:8px 10px;border:0;border-radius:6px;background:transparent;color:inherit;font-size:13px;white-space:nowrap;opacity:.65} #mx-panel-tabs button[aria-selected="true"]{background:rgba(128,128,160,.2);opacity:1} #mx-panel-tabs button:focus-visible{outline:2px solid #e4bd52;outline-offset:1px} #mx-panel-tabs #mx-map-count{font-size:10px;margin-left:4px} #mx-map-head:has(#mx-panel-tabs){padding:7px 9px;flex-shrink:0} #mx-map-panel[data-tab="limits"]{width:100vw;max-width:1500px} #mx-panel-content{flex:1;min-height:0;overflow:auto;background:#09090f} #mx-map[data-tab]:not([data-tab="map"]) #mx-map-list,#mx-map[data-tab]:not([data-tab="map"]) #mx-map-filter{display:none} @media(max-width:450px){#mx-panel-tabs button{padding:8px;font-size:12px}} /* Milestones with explicit, server-protected approvals. */ #mx-map-panel[data-tab="plan"]{width:min(100vw,900px)} #mx-work-plan{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden;color:inherit} #mx-work-plan[hidden]{display:none} #mx-work-plan .wp-scroll{overflow:auto;padding:20px;flex:1;min-height:0} #mx-work-plan h2{font-size:22px;margin:0 0 8px;font-weight:650} #mx-work-plan .wp-notice{font-size:13px;color:#bc8b30;white-space:pre-wrap} #mx-work-plan .wp-notice:empty{display:none} #mx-work-plan .wp-empty{padding:55px 12px;text-align:center;max-width:440px;margin:auto} #mx-work-plan .wp-empty-title{font-size:21px;font-weight:600} #mx-work-plan .wp-empty p{opacity:.65;font-size:14px;line-height:1.7;margin:14px 0 24px} #mx-work-plan button{border:1px solid #8885;border-radius:8px;padding:10px 15px;color:inherit;background:#8881;font-size:13px;cursor:pointer} #mx-work-plan button:disabled{opacity:.4;cursor:default} #mx-work-plan .wp-primary{background:#247854;color:white;border-color:#247854} #mx-work-plan .wp-summary{display:flex;justify-content:space-between;font-size:12px;opacity:.7;margin:16px 0 8px} #mx-work-plan .wp-progress{height:4px;background:#8883;border-radius:8px;overflow:hidden} #mx-work-plan .wp-progress div{height:100%;background:#3baf82} #mx-work-plan .wp-result{font-size:14px;line-height:1.6;opacity:.8;margin:18px 0} #mx-work-plan .wp-milestone{border:1px solid #8884;border-radius:12px;padding:15px;margin:12px 0} #mx-work-plan .wp-locked{border-color:#3baf8280;background:#3baf8209} #mx-work-plan .wp-line{display:flex;align-items:flex-start;gap:12px} #mx-work-plan input[type=checkbox]{width:21px;height:21px;flex-shrink:0;margin-top:6px;accent-color:#299768;cursor:pointer} #mx-work-plan .wp-title{flex:1;min-width:0} #mx-work-plan .wp-number{font-size:10px;letter-spacing:1.2px;opacity:.55} #mx-work-plan h3{font-size:16px;line-height:1.4;margin:3px 0 8px;overflow-wrap:anywhere} #mx-work-plan .wp-badge{font-size:10px;padding:4px 6px;border-radius:5px;background:#8882;white-space:nowrap} #mx-work-plan .wp-locked .wp-badge{color:#299768;background:#29976818} #mx-work-plan .wp-meta{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:12px;opacity:.8;margin:3px 0 12px 33px} #mx-work-plan .wp-meta span:last-child{width:100%} #mx-work-plan details{font-size:13px;margin-left:33px;line-height:1.6} #mx-work-plan summary{cursor:pointer;opacity:.75} #mx-work-plan details p{white-space:pre-wrap;overflow-wrap:anywhere} #mx-work-plan .wp-total{border-top:1px solid #8883;margin-top:20px;padding:16px 0;font-size:14px} #mx-work-plan .wp-total p{opacity:.6;font-size:12px;margin:6px 0} #mx-work-plan .wp-history{margin:20px 0} #mx-work-plan .wp-history details{margin:10px 0} #mx-work-plan .wp-footer{display:flex;gap:10px;padding:12px 20px;border-top:1px solid #8883;flex-shrink:0} #mx-work-plan .wp-footer .wp-primary{flex:1} @media(max-width:500px){#mx-work-plan .wp-scroll{padding:14px}#mx-work-plan .wp-milestone{padding:12px}#mx-work-plan .wp-line{gap:9px}#mx-work-plan h3{font-size:14px}#mx-work-plan .wp-badge{font-size:9px}#mx-work-plan .wp-meta{margin-left:30px;display:grid;gap:5px}#mx-work-plan .wp-footer{padding:12px 14px}} /* Compact plan: retain content in disclosures, comfortable touch targets. */ #mx-work-plan .wp-scroll{padding:12px 14px} #mx-work-plan h2{font-size:17px;line-height:1.35;margin:0 0 8px} #mx-work-plan .wp-summary{margin:8px 0 6px} #mx-work-plan .wp-about{margin:4px 0 6px;font-size:12px} #mx-work-plan .wp-about summary{padding:6px 0} #mx-work-plan .wp-milestone{padding:8px 10px;margin:7px 0;border-radius:9px} #mx-work-plan .wp-line{gap:5px;align-items:flex-start} #mx-work-plan .wp-check{display:flex;align-items:center;justify-content:center;width:32px;min-height:44px;flex-shrink:0;cursor:pointer;margin:-6px 0 -4px -4px} #mx-work-plan .wp-check input{margin:0;width:21px;height:21px} #mx-work-plan h3{font-size:14px;line-height:1.35;margin:0 0 5px} #mx-work-plan .wp-badge{font-size:9px;padding:3px 5px} #mx-work-plan .wp-meta{display:flex;flex-wrap:wrap;gap:3px 12px;margin:0 0 1px 33px;font-size:12px;line-height:1.4} #mx-work-plan .wp-meta span:last-child{width:auto} #mx-work-plan .wp-meta .wp-dates{width:100%} #mx-work-plan .wp-time{font-weight:600} #mx-work-plan .wp-milestone details{margin-left:33px;font-size:12px} #mx-work-plan .wp-milestone summary{padding:5px 0;min-height:30px;box-sizing:border-box} #mx-work-plan .wp-total{margin-top:12px;padding:10px 0;font-size:13px} #mx-work-plan .wp-footer{padding:8px 14px} #mx-work-plan .wp-footer button{min-height:44px} /* Explicit optional dates, per-milestone approval and risk disclosure. */ #mx-work-plan .wp-meta .wp-owner{width:100%} #mx-work-plan .wp-meta .wp-dates{width:auto;white-space:pre-wrap} #mx-work-plan .wp-paragraphs{padding:2px 0 2px 12px;border-left:2px solid #8883;margin:6px 0 10px} #mx-work-plan .wp-paragraphs p{margin:0 0 10px;line-height:1.65} #mx-work-plan .wp-paragraphs p:last-child{margin-bottom:0} #mx-work-plan .wp-card-actions{display:flex;justify-content:flex-end;margin-top:4px;min-height:40px;align-items:center} #mx-work-plan .wp-card-actions button{min-height:40px;padding:7px 14px} #mx-work-plan .wp-approved-label{color:#299768;font-size:12px} #mx-work-plan .wp-footer{justify-content:flex-end} /* Editable milestone disclosure; approval stays alongside its title. */ #mx-work-plan .wp-line>button{flex-shrink:0;padding:7px 9px;min-height:40px;font-size:12px;margin-top:-3px} #mx-work-plan .wp-edit-form{display:grid;gap:10px;padding:8px 0 12px} #mx-work-plan .wp-field{display:flex;flex-direction:column;gap:5px;font-size:12px;min-width:0} #mx-work-plan .wp-field input,#mx-work-plan .wp-field textarea{box-sizing:border-box;min-width:0;width:100%;padding:8px;border:1px solid #8886;border-radius:6px;color:inherit;background:transparent;font:inherit;font-size:14px} #mx-work-plan .wp-field textarea{min-height:110px;resize:vertical;line-height:1.6} #mx-work-plan .wp-field input:disabled,#mx-work-plan .wp-field textarea:disabled{opacity:.75;cursor:default} #mx-work-plan .wp-date-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px} #mx-work-plan .wp-risks>.wp-field{margin:8px 0 12px}