/* Вид «редактор» — как VS Code в Codespaces (новый облик с «плавающими» панелями): чёрные карточки со скруглёнными углами на тёмно-синей подложке, тонкие рамки, значки codicons, активный значок и вкладка — на серой подложке. Цвета сняты со скриншота VS Code, токены — GitHub Dark. Включается ?ui=code и живёт только под :root[data-ui="code"]. */ :root[data-ui="code"]{ --frame:#0d1117; /* подложка между карточками */ --bg:#000; /* карточки: проводник, редактор, панель */ --panel:#000; --panel2:#2c2f34; /* наведение, активная вкладка и значок */ --line:#222324; /* рамки карточек */ --line2:#30363d; /* разделители внутри */ --ink:#e6edf3; --gray:#8b949e; --dim:#6e7681; --gold:#d29922; --green:#3fb950; --red:#f85149; --blue:#2f81f7; --accent:#2f81f7; --well:#0d1117; /* поля ввода, блоки кода, меню */ --hover:#161b22; --tab-top:#f78166; --btn:#238636; --btn-hover:#2ea043; --btn-ink:#fff; --code:#ffa657; --link:#58a6ff; --me:#1f2a3a; --act-w:36px; /* ширина полосы значков */ --gap:4px; /* зазор между карточками */ --r:6px; /* скругление карточек */ --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; } :root[data-ui="code"] body{ background:var(--frame); font-size:13px; } /* Страницу нельзя прокрутить вбок даже программно (clip, а не hidden): если панель редактора или терминала на пару пикселей шире места, фокус в ней иначе сдвигал всё влево и полоса значков уезжала за край. */ :root[data-ui="code"], :root[data-ui="code"] body, :root[data-ui="code"] #main, :root[data-ui="code"] #work{ overflow:clip; } /* полосы прокрутки — тонкие, без стрелок, как в VS Code */ :root[data-ui="code"] *{ scrollbar-width:thin; scrollbar-color:var(--line2) transparent; } /* то, чего нет в других видах */ #activity, .vs-title, .term-acts{ display:none; } #tabbar{ display:contents; } /* в других видах обёртки вкладок как будто нет */ #tab-actions:empty{ display:none; } /* ---------------- раскладка: шапки нет, карточки на подложке ---------------- */ :root[data-ui="code"] #top{ display:none; } :root[data-ui="code"] #main{ grid-template-columns:var(--act-w) var(--side-w) var(--gap) 1fr; height:calc(100% - 22px); padding:6px var(--gap) 0 0; border-top:0; background:var(--frame); } :root[data-ui="code"] .split{ background:transparent; } :root[data-ui="code"] .split:hover, :root[data-ui="code"] body.dragging .split{ background:var(--blue); } :root[data-ui="code"] .split.h{ height:var(--gap); } /* полоса значков и проводник — одна карточка: у полосы скруглены левые углы, у проводника правые */ :root[data-ui="code"] #activity{ display:flex; flex-direction:column; align-items:center; gap:4px; background:var(--bg); border:1px solid var(--line); border-left:0; border-radius:0; padding:4px 0; } :root[data-ui="code"] #side{ background:var(--bg); border:1px solid var(--line); border-left:0; border-radius:0 var(--r) var(--r) 0; overflow:hidden; } :root[data-ui="code"] .act{ position:relative; width:30px; height:30px; flex:none; display:grid; place-items:center; background:none; border:0; border-radius:5px; color:var(--dim); cursor:pointer; padding:0; } :root[data-ui="code"] .act .ci{ width:22px; height:22px; } :root[data-ui="code"] .act[data-act="menu"] .ci{ width:16px; height:16px; } :root[data-ui="code"] .act[data-act="menu"]{ margin-bottom:8px; } :root[data-ui="code"] .act:hover{ color:var(--ink); } :root[data-ui="code"] .act.on{ color:var(--ink); background:var(--panel2); } :root[data-ui="code"] body.ask-open #activity [data-act="ask"]{ color:var(--ink); } :root[data-ui="code"] .act-gap{ flex:1; } :root[data-ui="code"] .act.live{ color:var(--ink); } :root[data-ui="code"] .act.live::after{ content:""; position:absolute; right:1px; bottom:2px; width:9px; height:9px; border-radius:50%; background:var(--blue); box-shadow:0 0 0 2px var(--bg); } /* редактор — карточка из трёх частей: вкладки, путь к файлу, сам редактор */ :root[data-ui="code"] #work{ min-width:0; } :root[data-ui="code"] #tabbar{ display:flex; flex:none; height:35px; background:var(--bg); border:1px solid var(--line); border-bottom-color:var(--line2); border-radius:var(--r) var(--r) 0 0; overflow:hidden; } :root[data-ui="code"] #crumbs, :root[data-ui="code"] #editor-wrap{ background:var(--bg); border:1px solid var(--line); border-top:0; border-bottom:0; } :root[data-ui="code"] #editor-wrap{ border-bottom:1px solid var(--line); border-radius:0 0 var(--r) var(--r); overflow:hidden; } :root[data-ui="code"] #empty{ background:var(--bg); } /* панель снизу: вкладки обычными буквами, активная — на серой подложке; справа кнопки */ :root[data-ui="code"] #term-wrap{ background:var(--bg); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin-bottom:var(--gap); } :root[data-ui="code"] .term-head{ height:35px; padding:0 8px 0 10px; gap:4px; border-bottom:0; background:var(--bg); font-size:13px; text-transform:none; letter-spacing:0; } :root[data-ui="code"] .t-tab{ height:24px; padding:0 8px; border:0; border-radius:4px; display:flex; align-items:center; color:var(--gray); text-transform:none; letter-spacing:0; } :root[data-ui="code"] .t-tab[hidden]{ display:none; } /* display выше перебивает атрибут hidden */ :root[data-ui="code"] .t-tab:hover{ color:var(--ink); } :root[data-ui="code"] .t-tab.on{ color:var(--ink); background:var(--panel2); } :root[data-ui="code"] .term-head .hint{ margin-left:8px; font-size:12px; color:var(--dim); opacity:1; } :root[data-ui="code"] #term-badge{ font-size:12px; } :root[data-ui="code"] .term-acts{ display:flex; gap:2px; margin-left:auto; } :root[data-ui="code"] #term-badge:not([hidden]) + .term-acts{ margin-left:8px; } :root[data-ui="code"] .term-acts button{ width:24px; height:24px; display:grid; place-items:center; padding:0; background:none; border:0; border-radius:4px; color:var(--gray); cursor:pointer; } :root[data-ui="code"] .term-acts button:hover{ background:var(--panel2); color:var(--ink); } :root[data-ui="code"] .term-acts .ci{ width:16px; height:16px; } :root[data-ui="code"] #term{ padding:4px 0 0 18px; } /* «Проблемы» и «Вывод» — только в этом виде */ #tab-problems, #tab-output{ display:none; } .t-pane{ display:none; } :root[data-ui="code"] #tab-problems:not([hidden]), :root[data-ui="code"] #tab-output:not([hidden]){ display:flex; } :root[data-ui="code"] .t-pane:not([hidden]){ display:block; flex:1; min-height:0; overflow:auto; margin:0; } :root[data-ui="code"] .t-badge{ display:inline-grid; place-items:center; min-width:16px; height:16px; margin-left:5px; padding:0 4px; border-radius:8px; background:var(--blue); color:var(--btn-ink); font-size:10.5px; font-weight:600; } :root[data-ui="code"] .t-badge[hidden]{ display:none; } :root[data-ui="code"] #output{ padding:4px 18px 10px; color:var(--ink); white-space:pre-wrap; word-break:break-word; font:13px/1.45 "JetBrains Mono","Fira Code",ui-monospace,Menlo,Consolas,monospace; } :root[data-ui="code"] #output .hd{ color:var(--gray); } :root[data-ui="code"] #output .hd.bad, :root[data-ui="code"] #output .err{ color:var(--red); } :root[data-ui="code"] #output .in{ color:var(--gold); } :root[data-ui="code"] #problems{ padding:2px 0; font-size:13px; } :root[data-ui="code"] .pr-empty{ padding:4px 18px; color:var(--gray); } :root[data-ui="code"] .pr-file{ display:flex; align-items:center; gap:6px; height:22px; padding:0 10px; } :root[data-ui="code"] .pr-file .dir{ color:var(--gray); font-size:12px; } :root[data-ui="code"] .pr-file .cnt{ min-width:16px; height:16px; padding:0 4px; border-radius:8px; background:var(--panel2); display:grid; place-items:center; font-size:10.5px; } :root[data-ui="code"] .pr-item{ display:flex; align-items:center; gap:6px; height:22px; padding:0 10px 0 32px; cursor:pointer; } :root[data-ui="code"] .pr-item:hover, :root[data-ui="code"] .pr-item:focus{ background:var(--hover); outline:none; } :root[data-ui="code"] .pr-item .ci{ color:var(--red); } :root[data-ui="code"] #problems .ci{ width:16px; height:16px; flex:none; } :root[data-ui="code"] .pr-item .loc{ color:var(--gray); } :root[data-ui="code"] #statusline .sl-problems{ cursor:pointer; } /* утёнок открыт — чат справа отдельной карточкой (как боковая панель чата в VS Code) */ :root[data-ui="code"] body.ask-open #main{ grid-template-columns:var(--act-w) var(--side-w) var(--gap) minmax(0,1fr) var(--ask-w); } :root[data-ui="code"] #ask-panel{ margin:0 0 var(--gap) var(--gap); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--bg); } @media (max-width:1100px) and (min-width:761px){ :root[data-ui="code"] body.ask-open #main{ grid-template-columns:var(--act-w) minmax(0,1fr) var(--ask-w); } :root[data-ui="code"] body.ask-open #activity{ border-radius:0; } :root[data-ui="code"] body.ask-open #work{ margin-left:var(--gap); } } /* ---------------- вкладки файлов и кнопки справа от них ---------------- */ :root[data-ui="code"] #tabs{ flex:1; min-width:0; height:auto; background:transparent; border:0; overflow-y:hidden; scrollbar-width:none; } /* вкладки листаются колесом, полоса прокрутки не нужна */ :root[data-ui="code"] .tab{ height:33px; padding:0 6px 0 12px; background:transparent; color:var(--gray); border-right:1px solid var(--line2); font-size:13px; } :root[data-ui="code"] .tab:hover{ color:var(--ink); } :root[data-ui="code"] .tab.on{ background:var(--bg); color:var(--ink); box-shadow:inset 0 1px 0 var(--tab-top); } :root[data-ui="code"] .tab .x{ width:20px; height:20px; border-radius:4px; color:var(--gray); font-size:15px; line-height:1; } :root[data-ui="code"] .tab .x:hover{ background:var(--panel2); } :root[data-ui="code"] .tab.dirty .x::before{ color:var(--ink); } :root[data-ui="code"] #tab-actions{ display:flex; align-items:center; gap:2px; padding:0 6px; flex:none; } :root[data-ui="code"] #tab-actions button{ height:24px; display:flex; align-items:center; gap:4px; padding:0 6px; background:none; border:0; border-radius:4px; color:var(--ink); font:12px var(--sans); cursor:pointer; box-shadow:none; } :root[data-ui="code"] #tab-actions button:hover:not(:disabled){ background:var(--panel2); } :root[data-ui="code"] #tab-actions button:disabled{ opacity:.4; cursor:default; } :root[data-ui="code"] #tab-actions .ci{ width:16px; height:16px; } :root[data-ui="code"] #run{ color:var(--ink); width:28px; justify-content:center; padding:0; } :root[data-ui="code"] #run.stop{ color:var(--red); } :root[data-ui="code"] #check-top{ color:var(--gray); } :root[data-ui="code"] #check-top:hover{ color:var(--ink); } :root[data-ui="code"] #check-top[hidden], :root[data-ui="code"] #share-term[hidden], :root[data-ui="code"] #peers[hidden]{ display:none; } :root[data-ui="code"] #ask-top .ava{ --ava-size:18px; } :root[data-ui="code"] #ask-top .lbl{ display:none; } :root[data-ui="code"] body.ask-open #ask-top{ background:var(--panel2); } :root[data-ui="code"] #peers{ font-size:12px; } /* путь к файлу под вкладкой */ #crumbs{ display:none; } :root[data-ui="code"] #crumbs{ display:flex; align-items:center; gap:4px; height:22px; padding:0 12px; color:var(--gray); font-size:12px; white-space:nowrap; overflow:hidden; } :root[data-ui="code"] #crumbs .sep{ opacity:.6; } :root[data-ui="code"] #crumbs .last{ color:var(--ink); } /* ---------------- боковая панель: заголовок «Проводник …», дерево файлов ---------------- */ :root[data-ui="code"] .side-tabs{ display:none; } /* их заменила полоса значков */ :root[data-ui="code"] .vs-title{ display:flex; align-items:center; height:35px; padding:0 12px; flex:none; font-size:13px; font-weight:600; color:var(--ink); } :root[data-ui="code"] .pane{ background:var(--bg); } :root[data-ui="code"] .side-head{ height:24px; padding:0 8px 0 4px; gap:2px; color:var(--ink); font-size:12px; font-weight:700; text-transform:none; letter-spacing:0; } :root[data-ui="code"] .side-head span{ display:flex; align-items:center; gap:2px; } :root[data-ui="code"] .side-head .ci{ width:16px; height:16px; } :root[data-ui="code"] .side-head button{ width:22px; height:22px; display:grid; place-items:center; padding:0; border:0; border-radius:4px; color:var(--gray); opacity:0; } :root[data-ui="code"] #files-pane:hover .side-head button{ opacity:1; } :root[data-ui="code"] .side-head button:hover{ background:var(--panel2); color:var(--ink); } :root[data-ui="code"] .node{ height:22px; font-size:13px; gap:4px; } :root[data-ui="code"] .node:hover{ background:var(--hover); } :root[data-ui="code"] .node.on{ background:var(--panel2); box-shadow:inset 0 0 0 1px var(--blue); } :root[data-ui="code"] .node .nm, :root[data-ui="code"] .node.dir .nm{ color:var(--ink); } :root[data-ui="code"] .node .ic{ color:var(--gray); } :root[data-ui="code"] .node.dir .ic{ color:var(--ink); } :root[data-ui="code"] .node .ic .ci{ width:16px; height:16px; display:block; } /* задание */ :root[data-ui="code"] .task-head{ border-bottom:0; padding:0 12px 8px; } :root[data-ui="code"] #task-select{ background:var(--well, #0d1117); border:1px solid var(--line2); border-radius:4px; padding:4px 8px; } :root[data-ui="code"] #task-foot{ background:var(--bg); border-top:1px solid var(--line2); } :root[data-ui="code"] .btn-check{ background:var(--btn); color:var(--btn-ink); border-radius:6px; font-weight:500; } :root[data-ui="code"] .btn-check:hover:not(:disabled){ background:var(--btn-hover); } :root[data-ui="code"] .btn-check.big{ font-size:13px; padding:7px; } :root[data-ui="code"] #tab-actions .btn-check{ background:none; color:var(--gray); font-weight:400; } /* задания и помощник — в тон редактору */ :root[data-ui="code"] #join form{ background:var(--well, #0d1117); border-color:var(--line2); } :root[data-ui="code"] .task-card, :root[data-ui="code"] .lesson-head, :root[data-ui="code"] .t-body pre, :root[data-ui="code"] .md pre, :root[data-ui="code"] .a-msg.ai, :root[data-ui="code"] .a-ctx{ background:var(--well, #0d1117); border-color:var(--line2); } :root[data-ui="code"] .a-msg.me{ background:var(--me); } :root[data-ui="code"] .a-head, :root[data-ui="code"] .a-form{ border-color:var(--line2); } :root[data-ui="code"] .a-head .ttl{ color:var(--ink); font-size:14px; font-weight:600; } :root[data-ui="code"] .a-chips button, :root[data-ui="code"] .a-btn{ background:var(--well, #0d1117); border-color:var(--line2); } :root[data-ui="code"] .a-chips button:hover{ border-color:var(--blue); } :root[data-ui="code"] .a-btn.send{ background:var(--blue); border-color:var(--blue); color:var(--btn-ink); } :root[data-ui="code"] .a-form textarea:focus{ border-color:var(--blue); } :root[data-ui="code"] .task-card:hover, :root[data-ui="code"] .task-card.on{ border-color:var(--blue); } :root[data-ui="code"] h1, :root[data-ui="code"] h2, :root[data-ui="code"] .t-body h3{ color:var(--ink); } :root[data-ui="code"] code, :root[data-ui="code"] kbd{ color:var(--code); } :root[data-ui="code"] a{ color:var(--link); } :root[data-ui="code"] input, :root[data-ui="code"] textarea{ background:var(--well, #0d1117); border:1px solid var(--line2); color:var(--ink); } :root[data-ui="code"] input:focus, :root[data-ui="code"] textarea:focus{ outline:1px solid var(--blue); outline-offset:-1px; } :root[data-ui="code"] #peers .peer{ background:var(--well, #0d1117); border-color:var(--line2); } /* ---------------- меню: гамбургер, аккаунт, настройки ---------------- */ #act-menu{ position:fixed; z-index:50; min-width:220px; padding:4px; background:var(--well, #0d1117); border:1px solid var(--line2, #30363d); border-radius:6px; box-shadow:0 8px 24px #000c; font:13px var(--sans); } #act-menu[hidden]{ display:none; } #act-menu .m-head{ padding:6px 10px 4px; color:var(--gray); font-size:12px; } #act-menu hr{ border:0; border-top:1px solid var(--line2, #30363d); margin:4px 0; } #act-menu button{ display:flex; align-items:center; width:100%; text-align:left; padding:4px 10px 4px 26px; background:none; border:0; border-radius:4px; color:var(--ink); cursor:pointer; position:relative; } #act-menu button kbd{ margin-left:auto; padding-left:20px; color:var(--gray); opacity:1; } #act-menu button:hover{ background:var(--blue); color:var(--btn-ink, #fff); } #act-menu button:hover kbd{ color:var(--btn-ink, #fff); } #act-menu button.on::before{ content:"✓"; position:absolute; left:9px; } /* ---------------- строка состояния: на подложке, серым; слева ошибки, справа позиция и язык ---------------- */ :root[data-ui="code"] #statusline{ display:flex; align-items:center; gap:14px; height:22px; padding:0 10px; background:var(--frame); border-top:0; color:var(--gray); font-size:12px; font-family:var(--sans); white-space:nowrap; overflow:hidden; } :root[data-ui="code"] #statusline .mode{ display:none; } :root[data-ui="code"] #statusline .sl-problems{ color:var(--gray); } :root[data-ui="code"] #statusline .sl-file{ display:none; } :root[data-ui="code"] #statusline .sl-room{ color:var(--ink); } :root[data-ui="code"] #statusline #status{ color:var(--gray); font-size:12px; } :root[data-ui="code"] #statusline #status.busy{ color:var(--ink); } :root[data-ui="code"] #statusline .sl-right{ margin-left:auto; display:flex; gap:14px; } :root[data-ui="code"] #statusline .sl-clock{ display:none; } /* в остальных видах лишние части строки состояния не показываем */ :root[data-ui="term"] #statusline .sl-problems, :root[data-ui="term"] #statusline .sl-tabs, :root[data-ui="term"] #statusline .sl-enc, :root[data-ui="term"] #statusline .sl-eol, :root[data-ui="term"] #statusline .sl-lang{ display:none; }