/* Pracovní plocha: lišta, editor a kolem něj oblasti s panely (dokování, viz dock.js). */ /* Barvy jsou jen tady. Atribut data-theme na nastavuje wwwroot/js/appearance.js ještě před prvním vykreslením (volba uživatele, jinak podle systému). */ :root { color-scheme: light; --surface: #ffffff; --surface-dim: #f3f3f3; --surface-hover: #e8e8e8; --border: #d4d4d4; --text: #1f1f1f; --text-dim: #616161; --icon: #8a8a8a; --accent: #0a6cbd; --accent-bg: #0a6cbd; --accent-text: #ffffff; --badge-text: #ffffff; --error: #b91c1c; --error-bg: #fdeaea; --warning: #9a6700; --warning-bg: #fff6e0; --success: #1a7f37; --paused: #b45309; --input-bg: #fdf0dc; --index-bg: #dbe9f7; --index-text: #0b3f6b; --breakpoint: #c1121f; --icon-file: #5a5a5a; --icon-folder: #b7862a; --icon-run: #1a7f37; --icon-stop: #c1121f; --breakpoint-line-bg: rgba(193, 18, 31, 0.1); --step-line-bg: #fff3bf; --shadow: 0 4px 16px rgba(0, 0, 0, 0.16); --statusbar-bg: #0a6cbd; --statusbar-busy-bg: #c05a00; --statusbar-error-bg: #b91c1c; --statusbar-text: #ffffff; --backdrop: rgba(0, 0, 0, 0.35); --drop-target-bg: rgba(10, 108, 189, 0.18); /* Paleta konzole (číslo = ConsoleColor). --con-N je skutečná paleta Windows (Campbell), stejná v obou tématech — pozadí a text na barevném pozadí. --con-text-N je barva textu na pozadí tématu, upravená tak, aby byla čitelná (žlutá i bílá na bílé). */ --con-0: #0c0c0c; --con-1: #0037da; --con-2: #13a10e; --con-3: #3a96dd; --con-4: #c50f1f; --con-5: #881798; --con-6: #c19c00; --con-7: #cccccc; --con-8: #767676; --con-9: #3b78ff; --con-10: #16c60c; --con-11: #61d6d6; --con-12: #e74856; --con-13: #b4009e; --con-14: #f9f1a5; --con-15: #f2f2f2; --con-text-0: #000000; --con-text-1: #0037da; --con-text-2: #107c10; --con-text-3: #0e7490; --con-text-4: #a4121e; --con-text-5: #881798; --con-text-6: #8a6d00; --con-text-7: #6e6e6e; --con-text-8: #4a4a4a; --con-text-9: #2563eb; --con-text-10: #15803d; --con-text-11: #0891b2; --con-text-12: #dc2626; --con-text-13: #c026d3; --con-text-14: #a16207; --con-text-15: #a3a3a3; } /* Tmavá sada ladí s tématem editoru vs-dark (pozadí #1e1e1e). */ :root[data-theme="dark"] { color-scheme: dark; --surface: #1e1e1e; --surface-dim: #252526; --surface-hover: #2f2f31; --border: #3c3c3c; --text: #d4d4d4; --text-dim: #9d9d9d; --icon: #9d9d9d; --accent: #4aa3f0; --accent-bg: #0e639c; --accent-text: #ffffff; --badge-text: #1e1e1e; --error: #f47272; --error-bg: #3f1d1d; --warning: #d7ba4a; --warning-bg: #3d3310; --success: #6ccf8a; --paused: #e5a150; --input-bg: #3a2c17; --index-bg: #1d3a57; --index-text: #a8d4ff; --breakpoint: #f14c4c; --icon-file: #c5c5c5; --icon-folder: #dcb67a; --icon-run: #89d185; --icon-stop: #f14c4c; --breakpoint-line-bg: rgba(241, 76, 76, 0.18); --step-line-bg: #4a4417; --shadow: 0 4px 16px rgba(0, 0, 0, 0.5); --statusbar-bg: #0e639c; --statusbar-busy-bg: #a84e00; --statusbar-error-bg: #9b1c1c; --statusbar-text: #ffffff; --backdrop: rgba(0, 0, 0, 0.55); --drop-target-bg: rgba(74, 163, 240, 0.22); --con-text-0: #6b6b6b; --con-text-1: #4a7dff; --con-text-2: #23b31c; --con-text-3: #3a96dd; --con-text-4: #e0414f; --con-text-5: #b552c8; --con-text-6: #c19c00; --con-text-7: #cccccc; --con-text-8: #8a8a8a; --con-text-9: #6f9bff; --con-text-10: #16c60c; --con-text-11: #61d6d6; --con-text-12: #ff6b77; --con-text-13: #e05ad0; --con-text-14: #f9f1a5; --con-text-15: #f2f2f2; } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; /* Pri zoomu stranky se sirka poctem pixelu meni; bez tohohle vylezl obsah z okna a stranka se musela scrollovat do strany (viz docs/COMMENTS.md). */ overflow-x: hidden; font-family: "Segoe UI", system-ui, sans-serif; font-size: 14px; color: var(--text); background: var(--surface); } #app { height: 100%; } /* ---------- úvodní obrazovka (index.html), než naběhne Blazor ---------- */ /* Průběh nastavuje Blazor do --blazor-load-percentage (např. „42%") a do --blazor-load-percentage-text (řetězec v uvozovkách pro content). Než se objeví, je pruh prázdný a jen se po něm přelévá odlesk — je vidět, že se něco děje. */ .splash { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 100%; padding: 24px 16px; text-align: center; background: var(--surface); } .splash-logo { width: 72px; height: 72px; margin-bottom: 8px; } /* Šipka kroku v logu „krokuje" — posune se a vrátí. */ .splash-step { animation: splash-step 1.2s ease-in-out infinite; } @keyframes splash-step { 0%, 40% { transform: translateX(0); } 55%, 85% { transform: translateX(3px); } 100% { transform: translateX(0); } } .splash-title { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: 0.5px; } .splash-tagline { margin: 0 0 18px; color: var(--text-dim); } .splash-progress { position: relative; overflow: hidden; width: min(280px, 100%); height: 4px; border-radius: 2px; background: var(--surface-hover); } .splash-progress-bar { width: var(--blazor-load-percentage, 0%); height: 100%; border-radius: inherit; background: var(--accent); transition: width 0.2s ease-out; } .splash-progress::after { content: ""; position: absolute; inset: 0; width: 40%; background: linear-gradient(90deg, transparent, var(--drop-target-bg), transparent); animation: splash-shimmer 1.4s ease-in-out infinite; } @keyframes splash-shimmer { from { transform: translateX(-100%); } to { transform: translateX(250%); } } .splash-status { margin: 6px 0 0; color: var(--text-dim); font-size: 13px; font-variant-numeric: tabular-nums; } .splash-percent::after { content: var(--blazor-load-percentage-text, ""); } @media (prefers-reduced-motion: reduce) { .splash-step, .splash-progress::after { animation: none; } } /* ---------- rozvržení: lišta, editor a oblasti s panely kolem něj ---------- */ /* Grid plochy: 5 sloupců (levá oblast │ úchyt │ střed │ úchyt │ pravá oblast) a 7 řádků (lišta, horní oblast, úchyt, editor, úchyt, spodní oblast, stavový řádek). Boční oblasti jdou přes celou výšku mezi lištou a stavovým řádkem, horní a spodní jen nad / pod editorem. Prázdná oblast má nulovou stopu — třídy has-left / has-right / has-bottom / has-top dává Blazor podle rozložení (Layout/DockLayout.cs). Velikosti (--dock--size) i parametry (--dock--default, --dock-min-*) nastavuje wwwroot/js/dock.js na — ladí se tam, na začátku souboru. clamp() je pojistka pro případ, že se okno po uložení velikosti zmenší: oblast ani editor nezmizí. Lišta má vlastní výšku, aby se při zoomu (nebo v úzkém okně) mohla zalomit. */ .workspace { --dock-splitter: 5px; --dock-side-max: calc(100% - var(--dock-min-editor-width) - 2 * var(--dock-splitter)); --dock-band-max: calc(100% - var(--dock-min-editor-height) - 90px); display: grid; grid-template-columns: var(--dock-left-track, 0px) var(--dock-left-gap, 0px) minmax(0, 1fr) var(--dock-right-gap, 0px) var(--dock-right-track, 0px); grid-template-rows: auto var(--dock-top-track, 0px) var(--dock-top-gap, 0px) minmax(0, 1fr) var(--dock-bottom-gap, 0px) var(--dock-bottom-track, 0px) auto; height: 100%; max-width: 100%; overflow: hidden; } /* Obě boční (horní i spodní) oblasti naráz: každá smí nejvýš polovinu toho, co zbude editoru. */ .workspace.has-left.has-right { --dock-side-max: calc(50% - var(--dock-min-editor-width) / 2 - var(--dock-splitter)); } .workspace.has-top.has-bottom { --dock-band-max: calc(50% - (var(--dock-min-editor-height) + 90px) / 2); } .workspace.has-left { --dock-left-track: clamp(var(--dock-min-side), var(--dock-left-size, var(--dock-left-default)), var(--dock-side-max)); --dock-left-gap: var(--dock-splitter); } .workspace.has-right { --dock-right-track: clamp(var(--dock-min-side), var(--dock-right-size, var(--dock-right-default)), var(--dock-side-max)); --dock-right-gap: var(--dock-splitter); } .workspace.has-top { --dock-top-track: clamp(var(--dock-min-band), var(--dock-top-size, var(--dock-top-default)), var(--dock-band-max)); --dock-top-gap: var(--dock-splitter); } .workspace.has-bottom { --dock-bottom-track: clamp(var(--dock-min-band), var(--dock-bottom-size, var(--dock-bottom-default)), var(--dock-band-max)); --dock-bottom-gap: var(--dock-splitter); } .toolbar { grid-column: 1 / -1; grid-row: 1; } .statusbar { grid-column: 1 / -1; grid-row: 7; } .editor { grid-column: 3; grid-row: 4; } .dock-left { grid-column: 1; grid-row: 2 / 7; } .area-splitter[data-area="left"] { grid-column: 2; grid-row: 2 / 7; } .dock-right { grid-column: 5; grid-row: 2 / 7; } .area-splitter[data-area="right"] { grid-column: 4; grid-row: 2 / 7; } .dock-top { grid-column: 3; grid-row: 2; } .area-splitter[data-area="top"] { grid-column: 3; grid-row: 3; } .area-splitter[data-area="bottom"] { grid-column: 3; grid-row: 5; } .dock-bottom { grid-column: 3; grid-row: 6; } .editor { border-top: 1px solid var(--border); min-height: 0; min-width: 0; } .editor > * { height: 100%; } /* ---------- úchyty (tažení obsluhuje wwwroot/js/dock.js, dvojklik = výchozí) ---------- */ /* aria-orientation je směr čáry: vodorovná čára mění výšku, svislá šířku. */ .dock-splitter { position: relative; flex: none; background: var(--surface-dim); touch-action: none; z-index: 2; } .dock-splitter[aria-orientation="horizontal"] { height: var(--dock-splitter); border-top: 1px solid var(--border); cursor: row-resize; } .dock-splitter[aria-orientation="vertical"] { width: var(--dock-splitter); border-left: 1px solid var(--border); cursor: col-resize; } /* Pět pixelů se špatně trefuje (hlavně prstem) — chytací plocha je o kus větší než čára. */ .dock-splitter::before { content: ""; position: absolute; inset: 0; } .dock-splitter[aria-orientation="horizontal"]::before { top: -4px; bottom: -4px; } .dock-splitter[aria-orientation="vertical"]::before { left: -4px; right: -4px; } .dock-splitter:hover, .dock-splitter:focus-visible, .dock-splitter:active { background: var(--accent); outline: none; } /* Za tažení se nic neoznačuje a kurzor zůstane, i když myš uteče nad editor. */ .resizing-rows-dock, .resizing-rows-dock * { cursor: row-resize !important; user-select: none; } .resizing-columns-dock, .resizing-columns-dock * { cursor: col-resize !important; user-select: none; } /* ---------- přetažení panelu za záhlaví (dock.js) ---------- */ .dragging-panel, .dragging-panel * { cursor: grabbing !important; user-select: none; } /* Na dotykové obrazovce by prohlížeč tah prstem po záhlaví bral jako posun stránky. V úzkém okně se netáhne (vše je dole v záložkách) — tam zůstane, jak je. */ @media (min-width: 768px) { [data-dock-header] { touch-action: none; } } .dock-dragging { opacity: 0.5; } /* Značka cíle: obdélník, kam panel padne, nebo svislá čára mezi záložkami (.line). Je mimo strom Blazoru (document.body), velikost a pozici jí dává dock.js. */ .dock-drop-marker { position: fixed; z-index: 1000; border: 2px solid var(--accent); border-radius: 3px; background: var(--drop-target-bg); pointer-events: none; transition: left 80ms ease-out, top 80ms ease-out, width 80ms ease-out, height 80ms ease-out; } .dock-drop-marker.line { border: none; border-radius: 1px; background: var(--accent); transition: none; } /* Štítek s názvem panelu u ukazatele. */ .dock-drag-label { position: fixed; z-index: 1001; padding: 3px 10px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); color: var(--text); box-shadow: var(--shadow); font-size: 0.85rem; white-space: nowrap; pointer-events: none; } /* ---------- oblasti s panely (Components/DockAreaView.razor) ---------- */ .dock { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: var(--surface); } /* Boční oblasti začínají hned pod lištou — oddělí je čára jako editor. */ .dock-left, .dock-right { border-top: 1px solid var(--border); } /* Dole a nahoře jsou panely v režimu „pod sebou" vedle sebe. */ .dock-bottom.stacked, .dock-top.stacked { flex-direction: row; } /* Panel v režimu pod sebou / vedle sebe; flex-grow (poměr) dává inline styl z CSS proměnné. */ .dock-panel { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; min-height: 0; overflow: hidden; } .dock-left .dock-panel, .dock-right .dock-panel { min-height: var(--dock-min-panel); } .dock-bottom .dock-panel, .dock-top .dock-panel { min-width: var(--dock-min-panel); } /* Titulek panelu v režimu pod sebou; v režimu záložky je záhlavím záložka. Pravé tlačítko (Shift+F10) na něm otevře místní menu. */ .dock-title { display: flex; flex: none; align-items: center; gap: 6px; min-height: 30px; padding: 0 4px 0 12px; background: var(--surface-dim); border-bottom: 1px solid var(--border); font-weight: 600; user-select: none; } .dock-title:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .dock-title-text { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; } .dock-title .tool { width: 26px; height: 26px; } .panel-body { display: flex; flex: 1; flex-direction: column; min-height: 0; overflow: hidden; } /* ---------- ovládací lišta ---------- */ .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 44px; padding: 6px 12px; background: var(--surface-dim); } .app-title { font-weight: 600; letter-spacing: 0.02em; } .file-name { max-width: 24ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: Consolas, "Cascadia Mono", monospace; } .dirty-mark { color: var(--paused); font-weight: 600; } .toolbar-separator { align-self: stretch; width: 1px; margin: 2px 4px; background: var(--border); } .command { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); color: inherit; font: inherit; cursor: pointer; } .command:hover:not(:disabled) { border-color: var(--accent); } .command:disabled { opacity: 0.45; cursor: default; } .command.primary { background: var(--accent-bg); border-color: var(--accent-bg); color: var(--accent-text); } /* Odsune menu uživatele doprava. */ .toolbar-filler { margin-left: auto; } /* ---------- tlačítka s ikonou (Components/ToolButton.razor) ---------- */ .toolbar-group { display: flex; align-items: center; gap: 2px; } .tool { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid transparent; border-radius: 4px; background: none; color: var(--icon-file); cursor: pointer; } .tool:hover:not(:disabled) { border-color: var(--border); background: var(--surface-hover); } .tool:active:not(:disabled) { background: var(--border); } .tool:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } /* Zakázané tlačítko ztratí i barvu ikony — zelené Spustit za běhu nesmí lákat ke kliknutí. */ .tool:disabled { opacity: 0.35; filter: grayscale(1); cursor: default; } .tool.run { color: var(--icon-run); } .tool.step { color: var(--accent); } .tool.stop { color: var(--icon-stop); } .tool.breakpoint { color: var(--breakpoint); } .tool.check { color: var(--accent); } /* Menší tlačítko v pásu záložek panelů. */ .tabs .tool { align-self: center; width: 28px; height: 28px; } /* Ikona je maska: tvar z SVG, barva z currentColor — mění se s tématem, stavem i při najetí. */ .icon { display: block; flex: none; width: 18px; height: 18px; background-color: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; } /* Přehrávač (play-fill, stop-fill) má v Bootstrapu kolem tvaru víc vzduchu než ostatní ikony. */ .tool .icon-run, .tool .icon-stop { width: 22px; height: 22px; } .tool .icon-open { color: var(--icon-folder); } .tool .icon-save, .tool .icon-save-as { color: var(--accent); } /* Ikony jsou (kromě Krok) z Bootstrap Icons 1.11.3, https://icons.getbootstrap.com/ Copyright (c) 2019-2024 The Bootstrap Authors, licence MIT. Bereme jen ty, které potřebujeme, vložené přímo sem — žádný další soubor ke stažení. Znak # musí být v data URL jako %23. */ /* Bootstrap Icons: file-earmark-plus */ .icon-new { --icon: url("data:image/svg+xml,"); } /* Bootstrap Icons: folder2-open */ .icon-open { --icon: url("data:image/svg+xml,"); } /* Bootstrap Icons: floppy */ .icon-save { --icon: url("data:image/svg+xml,"); } /* Bootstrap Icons: floppy + pencil-fill (složeno, tužka vykousne kus diskety) */ .icon-save-as { --icon: url("data:image/svg+xml,"); } /* Bootstrap Icons: play-fill */ .icon-run { --icon: url("data:image/svg+xml,"); } /* vlastní: oblouk přes tečku (Step Over jako ve Visual Studiu), Bootstrap ho nemá */ .icon-step { --icon: url("data:image/svg+xml,"); } /* Bootstrap Icons: stop-fill */ .icon-stop { --icon: url("data:image/svg+xml,"); } /* Kroužek bez výplně (velikostí jako Bootstrap Icons record) — plný kruh byl moc výrazný. Stejně vypadá stop-značka v pruhu editoru (.breakpoint-glyph). */ .icon-breakpoint { --icon: url("data:image/svg+xml,"); } /* Bootstrap Icons: check2-circle */ .icon-check { --icon: url("data:image/svg+xml,"); } /* Bootstrap Icons: eraser */ .icon-clear { --icon: url("data:image/svg+xml,"); } /* ---------- menu uživatele (vpravo v liště) ---------- */ .user-menu { position: relative; } .user-button { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid transparent; border-radius: 50%; background: none; color: var(--icon); cursor: pointer; } .user-button:hover, .user-button[aria-expanded="true"] { border-color: var(--border); background: var(--surface); color: var(--text); } .user-button svg { width: 22px; height: 22px; } /* Průhledná vrstva přes celou stránku: klik mimo menu ho zavře. */ .menu-backdrop { position: fixed; inset: 0; z-index: 900; } .menu { position: absolute; top: calc(100% + 4px); right: 0; z-index: 901; min-width: 200px; padding: 4px 0; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); box-shadow: var(--shadow); /* Menu uživatele je dlouhé — na nízké obrazovce se v něm roluje. */ max-height: calc(100vh - 56px); overflow-y: auto; } .menu-heading { margin: 0; padding: 6px 12px 4px; color: var(--text-dim); font-size: 12px; } .menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 12px; border: none; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; } .menu-item:hover, .menu-item:focus-visible { background: var(--surface-hover); outline: none; } /* Zaškrtnutí u vybrané volby; místo pro ni zůstává i u ostatních, aby texty nepřeskakovaly. */ .menu-item .check { width: 1em; color: var(--accent); text-align: center; } /* ---------- stavový řádek (dole, jako ve Visual Studiu) ---------- */ .statusbar { display: flex; align-items: center; gap: 16px; min-width: 0; height: 24px; padding: 0 12px; background: var(--statusbar-bg); color: var(--statusbar-text); font-size: 12px; white-space: nowrap; } .statusbar.busy, .statusbar.paused { background: var(--statusbar-busy-bg); } .statusbar.failure { background: var(--statusbar-error-bg); } .statusbar-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .statusbar.paused .statusbar-text { font-weight: 600; } .statusbar-item:empty { display: none; } /* Točící se kolečko, dokud se něco děje. Animuje se jen transform, takže se kolečko točí i ve chvíli, kdy vlákno stránky drží překlad (prohlížeč ho kreslí mimo hlavní vlákno). */ .spinner { flex: none; width: 12px; height: 12px; margin-right: -8px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } } /* ---------- dialog (O aplikaci) ---------- */ .dialog-backdrop { position: fixed; inset: 0; z-index: 950; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--backdrop); } .dialog { width: min(520px, 100%); max-height: 100%; overflow: auto; padding: 20px 24px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow); } .dialog h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; font-size: 20px; } .dialog h2 img { width: 32px; height: 32px; } .dialog h3 { margin: 18px 0 6px; font-size: 14px; } .dialog p { margin: 8px 0; line-height: 1.45; } .dialog a { color: var(--accent); } .dialog .beta { padding: 1px 6px; border-radius: 8px; background: var(--paused); color: var(--badge-text); font-size: 11px; font-weight: 600; text-transform: uppercase; } .dialog .dim { color: var(--text-dim); font-size: 12px; } .dialog .coffee { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 6px; background: #ffdd00; color: #1f1f1f; font-weight: 600; text-decoration: none; } .dialog .shortcuts { border-collapse: collapse; } .dialog .shortcuts td { padding: 2px 16px 2px 0; } .dialog .shortcuts kbd { font-family: inherit; padding: 1px 6px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface-dim); font-size: 12px; } .dialog-buttons { display: flex; justify-content: flex-end; margin-top: 16px; } .menu-separator { height: 1px; margin: 4px 0; background: var(--border); } .menu-item:disabled { color: var(--text-dim); cursor: default; } .menu-item:disabled:hover { background: none; } /* Vysvětlivka pod volbami menu (např. proč jsou zašedlé). */ .menu-note { max-width: 260px; margin: 4px 0 0; padding: 6px 12px; border-top: 1px solid var(--border); color: var(--text-dim); font-size: 12px; } /* ---------- záložky panelů ---------- */ .tabs { display: flex; flex-wrap: wrap; align-items: stretch; gap: 2px; padding: 0 8px; background: var(--surface-dim); border-bottom: 1px solid var(--border); } .tab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: none; border-bottom: 2px solid transparent; background: none; color: var(--text-dim); font: inherit; cursor: pointer; } .tab.active { color: var(--text); border-bottom-color: var(--accent); background: var(--surface); } .tabs-filler { flex: 1; } .badge { min-width: 18px; padding: 0 5px; border-radius: 9px; font-size: 11px; line-height: 16px; text-align: center; color: var(--badge-text); } .badge.error { background: var(--error); } .badge.warning { background: var(--warning); } /* ---------- panel Výstupy ---------- */ .output { flex: 1; margin: 0; padding: 8px 12px; overflow: auto; white-space: pre-wrap; word-break: break-word; font-family: Consolas, "Cascadia Mono", monospace; } /* Barvy konzole (Console.ForegroundColor / BackgroundColor), třídy dává ConsoleColorCss. con-fg-N na pozadí tématu kreslí upravenou paletou --con-text-N (čitelnou na světlém i tmavém); na barevném pozadí (.con-bg — úsek i celá plocha po Console.Clear) platí skutečná paleta konzole --con-N a text bez barvy je šedý jako ve Windows. */ .con-bg { color: var(--con-7); } .con-bg-0 { background: var(--con-0); } .con-bg-1 { background: var(--con-1); } .con-bg-2 { background: var(--con-2); } .con-bg-3 { background: var(--con-3); } .con-bg-4 { background: var(--con-4); } .con-bg-5 { background: var(--con-5); } .con-bg-6 { background: var(--con-6); } .con-bg-7 { background: var(--con-7); } .con-bg-8 { background: var(--con-8); } .con-bg-9 { background: var(--con-9); } .con-bg-10 { background: var(--con-10); } .con-bg-11 { background: var(--con-11); } .con-bg-12 { background: var(--con-12); } .con-bg-13 { background: var(--con-13); } .con-bg-14 { background: var(--con-14); } .con-bg-15 { background: var(--con-15); } .con-fg-0 { color: var(--con-text-0); } .con-fg-1 { color: var(--con-text-1); } .con-fg-2 { color: var(--con-text-2); } .con-fg-3 { color: var(--con-text-3); } .con-fg-4 { color: var(--con-text-4); } .con-fg-5 { color: var(--con-text-5); } .con-fg-6 { color: var(--con-text-6); } .con-fg-7 { color: var(--con-text-7); } .con-fg-8 { color: var(--con-text-8); } .con-fg-9 { color: var(--con-text-9); } .con-fg-10 { color: var(--con-text-10); } .con-fg-11 { color: var(--con-text-11); } .con-fg-12 { color: var(--con-text-12); } .con-fg-13 { color: var(--con-text-13); } .con-fg-14 { color: var(--con-text-14); } .con-fg-15 { color: var(--con-text-15); } .con-bg.con-fg-0, .con-bg .con-fg-0 { color: var(--con-0); } .con-bg.con-fg-1, .con-bg .con-fg-1 { color: var(--con-1); } .con-bg.con-fg-2, .con-bg .con-fg-2 { color: var(--con-2); } .con-bg.con-fg-3, .con-bg .con-fg-3 { color: var(--con-3); } .con-bg.con-fg-4, .con-bg .con-fg-4 { color: var(--con-4); } .con-bg.con-fg-5, .con-bg .con-fg-5 { color: var(--con-5); } .con-bg.con-fg-6, .con-bg .con-fg-6 { color: var(--con-6); } .con-bg.con-fg-7, .con-bg .con-fg-7 { color: var(--con-7); } .con-bg.con-fg-8, .con-bg .con-fg-8 { color: var(--con-8); } .con-bg.con-fg-9, .con-bg .con-fg-9 { color: var(--con-9); } .con-bg.con-fg-10, .con-bg .con-fg-10 { color: var(--con-10); } .con-bg.con-fg-11, .con-bg .con-fg-11 { color: var(--con-11); } .con-bg.con-fg-12, .con-bg .con-fg-12 { color: var(--con-12); } .con-bg.con-fg-13, .con-bg .con-fg-13 { color: var(--con-13); } .con-bg.con-fg-14, .con-bg .con-fg-14 { color: var(--con-14); } .con-bg.con-fg-15, .con-bg .con-fg-15 { color: var(--con-15); } /* V úzkém panelu (boční oblast) se tlačítka zalomí pod vstupní pole, místo aby se ořízla. Zvýrazněné je samotné vstupní pole (jemně oranžové jako stavový řádek „Čeká na vstup…"), ne celý řádek — ať je vidět, proč program stojí a kam se píše. */ .input-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--border); } /* Kam se vstup uloží (název proměnné), před polem — jen když ho runtime zná. */ .input-target { flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: Consolas, "Cascadia Mono", monospace; font-weight: 600; } .input-row .command { white-space: nowrap; } .input-row input { flex: 1 1 140px; min-width: 0; padding: 5px 8px; border: 1px solid var(--paused); border-radius: 4px; background: var(--input-bg); color: var(--text); font-family: Consolas, "Cascadia Mono", monospace; font-size: inherit; } .input-row input:focus { outline: 2px solid var(--paused); outline-offset: -1px; } /* ---------- panel Chyby ---------- */ .empty { padding: 12px; color: var(--text-dim); } .diagnostics { flex: 1; margin: 0; padding: 0; list-style: none; overflow: auto; } .diagnostic { display: grid; grid-template-columns: 80px 170px 1fr; gap: 10px; width: 100%; padding: 5px 12px; border: none; border-bottom: 1px solid var(--border); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; } .diagnostic:hover { background: var(--surface-dim); } .diagnostic.error .severity { color: var(--error); } .diagnostic.warning .severity { color: var(--warning); } .diagnostic .position { color: var(--text-dim); } /* ---------- panely Proměnné a Pole ---------- */ .state-scroll { flex: 1; min-height: 0; overflow: auto; } .note { margin: 0; padding: 4px 12px; border-top: 1px solid var(--border); color: var(--text-dim); font-size: 12px; } .state-table, .array-table { border-collapse: collapse; font-family: Consolas, "Cascadia Mono", monospace; } .state-table th, .array-table th, .state-table td, .array-table td { padding: 3px 10px; border: 1px solid var(--border); text-align: left; white-space: pre; } /* Záhlaví zůstane vidět i při odrolování dlouhého seznamu. */ .state-table thead th, .array-table thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-dim); font-weight: 600; } .state-table tbody tr:nth-child(even) { background: var(--surface-dim); } .state-table .col-name { font-weight: 600; } .state-table .col-type { color: var(--text-dim); } /* Proměnná, jejíž platnost už skončila (řídicí proměnná for po cyklu, proměnná z bloku): zůstává vidět s poslední hodnotou, ale ztlumeně. */ .state-table tr.out-of-scope td { color: var(--text-dim); font-style: italic; } .state-table tr.out-of-scope .col-name { font-weight: normal; } .array-tab.out-of-scope { color: var(--text-dim); font-style: italic; } /* ---------- tabulka s přizpůsobitelnými sloupci (Components/ColumnTable.razor) ---------- */ /* Šířky sloupců jsou v z CSS proměnných --col-- (wwwroot/js/columns.js); sloupec bez šířky vyplní zbytek. Tabulka je široká jako panel, ale nejméně jako součet sloupců (--column-table-min) — pak se roluje do strany. */ .column-table { table-layout: fixed; width: max(100%, var(--column-table-min, 0px)); } .column-table th, .column-table td { overflow: hidden; text-overflow: ellipsis; } .column-table thead th { cursor: grab; user-select: none; } /* Úchyt pro šířku u pravého okraje záhlaví; čára se ukáže při najetí. Je uvnitř buňky, protože ta ořezává přetékající obsah. */ .column-resizer { position: absolute; top: 0; right: 0; bottom: 0; width: 7px; cursor: col-resize; } .column-resizer::after { content: ""; position: absolute; top: 3px; right: 1px; bottom: 3px; width: 2px; border-radius: 1px; } .column-resizer:hover::after, .resizing-columns .column-resizer:active::after { background: var(--accent); } .column-table thead th.column-dragging { background: var(--surface-hover); color: var(--text-dim); } /* Kam se přetahovaný sloupec vloží. Kreslí ji JavaScript mimo strom Blazoru. */ .column-drop-marker { position: fixed; z-index: 1000; width: 3px; border-radius: 1px; background: var(--accent); pointer-events: none; } .resizing-columns, .resizing-columns * { cursor: col-resize !important; user-select: none; } .reordering-columns, .reordering-columns * { cursor: grabbing !important; user-select: none; } /* Místní menu záhlaví se otevírá u myši, ne pod tlačítkem. */ .menu.context-menu { position: fixed; right: auto; } /* Indexy pole jsou modré po obou stranách tabulky — stejně jako v původním programu. */ .array-table .index { background: var(--index-bg); color: var(--index-text); text-align: center; font-weight: 600; } .array-table thead th.index { background: var(--index-bg); } .array-table .corner { background: var(--surface-dim); } .array-table td { min-width: 3ch; } /* Čísla doprava (řády pod sebou), text doleva — v panelu Proměnné i v buňkách pole. */ .state-table td.number, .array-table td.number { text-align: right; } .array-tabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px 8px 0; border-bottom: 1px solid var(--border); } .array-tab { padding: 3px 12px; border: 1px solid var(--border); border-bottom: none; border-radius: 4px 4px 0 0; background: var(--surface-dim); color: var(--text-dim); font: inherit; cursor: pointer; } .array-tab.active { background: var(--surface); color: var(--text); font-weight: 600; } /* ---------- dekorace v editoru ---------- */ /* Pozor na názvy: .current-line má Monaco pro řádek s kurzorem — naše třída by obarvila i ten. */ .step-line { background: var(--step-line-bg); } /* Šipka u aktuálního řádku a puntík u stop-značky se kreslí do glyph marginu. */ .step-line-glyph::after { content: "▶"; display: block; color: var(--accent); font-size: 11px; text-align: center; line-height: inherit; } /* Kroužek bez výplně, stejný jako ikona v liště (.icon-breakpoint). Je v ::before, aby šel nakreslit spolu se šipkou (::after) — Monaco dá obě třídy jednomu prvku, když program stojí na řádku se stop-značkou; šipka je pak menší uvnitř kroužku jako ve Visual Studiu. */ .breakpoint-glyph::before { content: ""; position: absolute; inset: 0; width: 10px; height: 10px; margin: auto; border: 2px solid var(--breakpoint); border-radius: 50%; } .breakpoint-glyph.step-line-glyph::after { position: relative; font-size: 7px; } .breakpoint-line { background: var(--breakpoint-line-bg); } /* ---------- chybová lišta Blazoru ---------- */ #blazor-error-ui { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; padding: 10px 14px; background: var(--warning-bg); border-top: 1px solid var(--warning); } #blazor-error-ui .dismiss { position: absolute; right: 12px; top: 8px; cursor: pointer; }