/* Вид «терминал» — как рабочий стол Omarchy: моноширинный шрифт везде, прямые углы, тонкие рамки и приглушённая оливково-бирюзовая гамма. Включается ?ui=term (или кнопкой в шапке) и живёт только под :root[data-ui="term"] — обычный вид не трогается вовсе. */ :root[data-ui="term"]{ --bg:#222724; --panel:#272c28; --panel2:#2e332e; --line:#3f4a43; --ink:#c9d2c6; --gray:#89948b; --gold:#d7af5f; --green:#9fc59b; --red:#d0878f; --blue:#8ec7c0; --accent:#8ec7c0; /* бирюзовый — выделение, как у активной вкладки */ --sans:"JetBrains Mono","CaskaydiaMono Nerd Font","Fira Code",ui-monospace,Menlo,Consolas,monospace; } /* прямые углы и моноширинный шрифт — основа всего вида */ :root[data-ui="term"] body, :root[data-ui="term"] button, :root[data-ui="term"] input, :root[data-ui="term"] textarea, :root[data-ui="term"] select{ font-family:var(--sans); } :root[data-ui="term"] *{ border-radius:0 !important; } /* внешняя рамка окна — как у тайлингового окружения */ :root[data-ui="term"] #main{ border:1px solid var(--line); border-top:0; } /* шапка: тонкая полоса, имя проекта слева, состояние справа */ :root[data-ui="term"] #top{ background:var(--bg); border-bottom:1px solid var(--line); gap:10px; } :root[data-ui="term"] .brand b{ color:var(--accent); font-weight:600; } :root[data-ui="term"] .brand .tag{ color:var(--gray); } :root[data-ui="term"] .crumb{ color:var(--gray); } :root[data-ui="term"] #status{ color:var(--green); } :root[data-ui="term"] #status.busy{ color:var(--gold); } /* кнопки шапки — рамочные, без заливки; главная подсвечена бирюзовым */ :root[data-ui="term"] #top button{ background:none; border:1px solid var(--line); color:var(--gray); padding:4px 10px; font-size:13px; } :root[data-ui="term"] #top button:hover:not(:disabled){ border-color:var(--accent); color:var(--ink); } :root[data-ui="term"] #run{ background:none; border:1px solid var(--accent); color:var(--accent); font-weight:600; } :root[data-ui="term"] #run.stop{ border-color:var(--red); color:var(--red); } :root[data-ui="term"] #check-top{ border-color:var(--green); color:var(--green); } :root[data-ui="term"] #collab-top.on, :root[data-ui="term"] #share-term.on{ border-color:var(--gold); color:var(--gold); } :root[data-ui="term"] #ask-top{ border-color:var(--line); } /* боковая панель — дерево файлов как в терминальном проводнике */ :root[data-ui="term"] #side{ background:var(--bg); border-right:1px solid var(--line); } :root[data-ui="term"] .side-tab{ color:var(--gray); } :root[data-ui="term"] .side-tab.on{ color:var(--bg); background:var(--accent); } :root[data-ui="term"] .node.dir .nm{ color:var(--gold); } :root[data-ui="term"] .node .ic{ color:var(--gray); } :root[data-ui="term"] .node.dir .ic{ color:var(--gold); } :root[data-ui="term"] .node.on{ background:var(--panel2); box-shadow:inset 2px 0 0 var(--accent); } :root[data-ui="term"] .node:hover{ background:var(--panel2); } /* вкладки файлов — как вкладки терминала: активная залита бирюзовым */ :root[data-ui="term"] #tabs{ background:var(--bg); border-bottom:1px solid var(--line); } :root[data-ui="term"] .tab{ border-right:1px solid var(--line); color:var(--gray); } :root[data-ui="term"] .tab.on{ background:var(--accent); color:var(--on-accent, #222724); box-shadow:none; } :root[data-ui="term"] .tab.on .x{ color:var(--on-accent, #222724); } :root[data-ui="term"] .tab.dirty .x::before{ color:var(--gold); } /* редактор и терминал — одна плоскость, разделённая линией */ :root[data-ui="term"] #work{ background:var(--bg); } :root[data-ui="term"] #term-wrap{ background:var(--bg); border-top:1px solid var(--line); } :root[data-ui="term"] .term-head{ background:var(--bg); color:var(--gray); } :root[data-ui="term"] .t-tab.on{ color:var(--ink); border-color:var(--accent); } :root[data-ui="term"] #term-badge{ color:var(--gold); } :root[data-ui="term"] .split{ background:var(--line); } :root[data-ui="term"] .split:hover{ background:var(--accent); } /* задания, помощник, окно комнаты — тот же строгий вид */ :root[data-ui="term"] .pane, :root[data-ui="term"] #ask-panel, :root[data-ui="term"] #join form{ background:var(--bg); border-color:var(--line); } :root[data-ui="term"] .task-card, :root[data-ui="term"] .lesson-head, :root[data-ui="term"] .t-body pre, :root[data-ui="term"] .a-msg{ background:var(--panel); border-color:var(--line); } :root[data-ui="term"] .task-card:hover{ border-color:var(--accent); } :root[data-ui="term"] .task-card.on{ border-color:var(--accent); background:var(--panel2); } :root[data-ui="term"] h1, :root[data-ui="term"] h2, :root[data-ui="term"] .t-body h3{ color:var(--accent); } :root[data-ui="term"] code, :root[data-ui="term"] kbd{ color:var(--gold); } :root[data-ui="term"] a{ color:var(--accent); } :root[data-ui="term"] input, :root[data-ui="term"] textarea{ background:var(--panel); border:1px solid var(--line); color:var(--ink); } :root[data-ui="term"] input:focus, :root[data-ui="term"] textarea:focus{ border-color:var(--accent); outline:none; } :root[data-ui="term"] #join button[type=submit]{ background:var(--accent); color:var(--on-accent, #222724); } :root[data-ui="term"] #peers .peer{ background:var(--panel); border-color:var(--line); } /* кнопка переключения вида — незаметная, пока на неё не навели */ #ui-toggle{ background:none; border:1px solid transparent; color:var(--gray); cursor:pointer; padding:4px 8px; font-size:13px; opacity:.6; } #ui-toggle:hover{ opacity:1; border-color:var(--line); color:var(--ink); } /* внешняя рамка окна — самый узнаваемый признак тайлингового окружения. Рисуем накладкой, чтобы не двигать вёрстку. */ :root[data-ui="term"] body::after{ content:""; position:fixed; inset:0; border:2px solid var(--accent); pointer-events:none; z-index:60; } /* нижняя строка состояния — как в vim: режим, файл, комната, позиция, версия, часы */ #statusline{ display:none; } :root[data-ui="term"] #statusline{ display:flex; align-items:center; gap:14px; height:22px; padding:0 10px; background:var(--bg); border-top:1px solid var(--line); font-size:12px; color:var(--gray); white-space:nowrap; overflow:hidden; } :root[data-ui="term"] #statusline .mode{ background:var(--accent); color:var(--on-accent, #222724); font-weight:700; padding:0 10px; height:100%; display:flex; align-items:center; letter-spacing:.08em; } :root[data-ui="term"] #statusline .mode.run{ background:var(--gold); } :root[data-ui="term"] #statusline .mode.wait{ background:var(--green); } :root[data-ui="term"] #statusline .sl-file{ color:var(--ink); } :root[data-ui="term"] #statusline .sl-room{ color:var(--gold); } :root[data-ui="term"] #statusline .sl-right{ margin-left:auto; display:flex; gap:14px; } :root[data-ui="term"] #statusline .sl-pos{ color:var(--accent); } :root[data-ui="term"] #main{ height:calc(100% - 46px - 22px); } /* утёнок в этой гамме слишком яркий — приглушаем, чтобы не спорил с остальным */ :root[data-ui="term"] #ask-top .ava img{ filter:saturate(.75) brightness(.95); }