:root{ --bg: #0a0e16; --bg-rail: #0d1119; --bg-panel: #10141d; --bg-panel-2: #131826; --bg-elevated: #161c29; --bg-hover: #1c2330; --border: #232d3d; --border-soft: #1a212d; --text: #dbe4ef; --text-dim: #6b7788; --text-dimmer: #4a5464; --danger: #ff4d70; --warn: #ffcc4d; --accent: #00ffa8; --accent-rgb: 0,255,168; --accent-soft: rgba(0,255,168,.12); --accent-glow: 0 0 12px rgba(0,255,168,.45); /* Scratch-artige Kategorie-Farben */ --cat-logic: #5cb1d6; --cat-loops: #ffab19; --cat-text: #cf63cf; --cat-math: #59c059; --cat-vars: #ff8c1a; --cat-lists: #4c97ff; --cat-funcs: #ff6680; --cat-raw: #7a8599; } body.theme-purple{ --accent: #b565ff; --accent-rgb: 181,101,255; --accent-soft: rgba(181,101,255,.14); --accent-glow: 0 0 12px rgba(181,101,255,.5); } *{ box-sizing:border-box; margin:0; padding:0; } html,body{ height:100%; } body{ font-family:'JetBrains Mono', monospace; background:var(--bg); color:var(--text); display:flex; flex-direction:column; height:100vh; overflow:hidden; font-size:13px; } h1,h2,h3,.display{ font-family:'Rajdhani', sans-serif; letter-spacing:.04em; } ::selection{ background:var(--accent-soft); color:var(--accent); } ::-webkit-scrollbar{ width:9px; height:9px; } ::-webkit-scrollbar-track{ background:var(--bg-panel); } ::-webkit-scrollbar-thumb{ background:var(--border); border-radius:4px; } ::-webkit-scrollbar-thumb:hover{ background:var(--text-dimmer); } button{ font-family:inherit; cursor:pointer; } textarea{ font-family:inherit; } /* ---------- Top bar ---------- */ .top-bar{ height:52px; min-height:52px; background:var(--bg-panel); border-bottom:2px solid var(--border); box-shadow:0 2px 10px rgba(0,0,0,.25); display:flex; align-items:center; padding:0 16px; gap:10px; position:relative; z-index:30; /* Reichen die Knöpfe (inkl. Sprachauswahl, Profil-Chip, UI- und Akzent- Umschalter) nicht in die Breite, würde ohne dies der Rest einfach vom overflow:hidden des verschluckt — unsichtbar, ohne Scrollbalken. Lieber scrollbar als abgeschnitten. */ overflow-x:auto; overflow-y:hidden; scrollbar-width:none; /* Firefox */ } .top-bar::-webkit-scrollbar{ display:none; height:0; } .top-bar > *{ flex-shrink:0; } .logo{ display:flex; align-items:center; gap:8px; font-family:'Rajdhani',sans-serif; font-weight:700; font-size:19px; letter-spacing:.06em; margin-right:8px; white-space:nowrap; } .logo .bolt{ color:var(--accent); text-shadow:var(--accent-glow); font-size:20px; } .logo .sub{ color:var(--text-dim); font-weight:500; font-size:11px; letter-spacing:.12em; margin-left:2px;} .logo img.logo-icon{ width:22px; height:22px; object-fit:contain; filter:drop-shadow(var(--accent-glow)); } .divider-v{ width:1px; align-self:stretch; margin:10px 4px; background:var(--border); } .tb-btn{ background:var(--bg-elevated); color:var(--text); border:1px solid var(--border); padding:7px 12px; border-radius:5px; font-size:12px; display:flex; align-items:center; gap:6px; transition:border-color .15s, box-shadow .15s, color .15s; white-space:nowrap; } .tb-btn:hover{ border-color:var(--accent); color:var(--accent); box-shadow:var(--accent-glow); } .tb-btn.primary{ border-color:var(--accent); color:var(--accent); } .tb-btn.primary:hover{ box-shadow:var(--accent-glow); } .tb-btn:active{ transform:translateY(1px); } .top-bar .spacer{ flex:1; } select.tb-select{ background:var(--bg-elevated); color:var(--text); border:1px solid var(--border); border-radius:5px; padding:7px 10px; font-size:12px; font-family:inherit; } /* Topbar-Dropdown: geschlossener Zustand ist die ganze Zeit sichtbar; der Browser bestimmt sonst die Breite anhand des laengsten Options-Texts ("Spigot-Plugin (Java)"). Mit max-width bleibt das Feld im Zaun, waehrend das geoeffnete Popup-Overlay weiterhin so breit sein darf wie noetig. */ .top-bar select.tb-select{ max-width:148px; text-overflow:ellipsis; overflow:hidden; } select.tb-select:hover{ border-color:var(--accent); } /* Alert-Modal: kleinere Karte, vollstaendig am Inhalt ausgerichtet, ohne Form-Felder. Folgt den Modal-Basisregeln und ergaenzt nur das Wenige. */ .alert-modal-card{ width:min(94vw, 460px); } .alert-modal-body{ padding:14px 18px 4px; } .alert-modal-message{ margin:0; font-size:13px; line-height:1.55; color:var(--text); | padding:10px 12px; border:1px solid var(--warn); background:rgba(255,204,77,.08); border-radius:6px; } .alert-modal-message code{ font-family:'JetBrains Mono',monospace; background:rgba(0,0,0,.3); padding:1px 6px; border-radius:4px; color:var(--warn); font-size:12.5px; } .alert-modal-actions{ display:flex; gap:10px; justify-content:flex-end; padding:14px 18px 18px; border-top:1px solid var(--border-soft); } .alert-modal-btn{ padding:9px 14px; border-radius:6px; font-size:12.5px; font-family:inherit; cursor:pointer; background:var(--bg-elevated); border:1px solid var(--border); color:var(--text); } .alert-modal-btn:hover{ border-color:var(--accent); color:var(--accent); } .alert-modal-btn.primary{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent); } .alert-modal-btn.primary:hover{ box-shadow:var(--accent-glow); } .alert-modal-head{ border-bottom-color:var(--warn) !important; } .accent-switch{ display:flex; gap:6px; align-items:center; } .accent-dot{ width:20px; height:20px; border-radius:50%; border:2px solid var(--border-soft); cursor:pointer; transition:transform .15s, border-color .15s; } .accent-dot:hover{ transform:scale(1.12); } .accent-dot.active{ border-color:#fff; } .accent-dot.green{ background:#00ffa8; box-shadow:0 0 8px rgba(0,255,168,.6); } .accent-dot.purple{ background:#b565ff; box-shadow:0 0 8px rgba(181,101,255,.6); } .accent-dot.custom{ position:relative; overflow:hidden; padding:0; background: conic-gradient(from 180deg, #ff4d4d, #ffcc4d, #4dff88, #4dd2ff, #6b6bff, #ff4dd2, #ff4d4d); } .accent-dot.custom input[type=color]{ position:absolute; inset:-4px; width:calc(100% + 8px); height:calc(100% + 8px); border:none; padding:0; cursor:pointer; opacity:0; /* echtes Farbfeld unsichtbar, Kreis dient als Vorschau */ } .accent-dot.custom.active{ border-color:#fff; } .lang-switch{ display:flex; border:1px solid var(--border); border-radius:5px; overflow:hidden; } .lang-switch button{ background:var(--bg-elevated); color:var(--text-dim); border:none; padding:6px 10px; font-size:11px; font-weight:600; letter-spacing:.04em; } .lang-switch button.active{ background:var(--accent-soft); color:var(--accent); } .lang-switch button:hover{ color:var(--accent); } /* ---------- Projekt-Dropdown im Topbar (Projekt auswaehlen) ---------- */ /* Themen / Akzent-Schalter kompakt in der Topbar. */ .top-accent{ display:flex; align-items:center; gap:5px; padding:0 2px; } .top-accent .accent-dot{ width:18px; height:18px; border-width:2px; } .top-accent .accent-dot.custom{ box-shadow:none; } /* ---------- Main layout ---------- */ .main-container{ display:flex; flex:1; min-height:0; } .icon-rail{ width:50px; min-width:50px; background:var(--bg-rail); border-right:2px solid var(--border); display:flex; flex-direction:column; align-items:center; padding-top:10px; gap:4px; } .icon-btn{ width:36px; height:36px; display:flex; align-items:center; justify-content:center; background:transparent; border:1px solid transparent; border-radius:6px; color:var(--text-dim); font-size:17px; } .icon-btn:hover{ color:var(--text); background:var(--bg-hover); } .icon-btn.active{ color:var(--accent); background:var(--accent-soft); border-color:var(--accent); } .sidebar{ width:190px; min-width:190px; background:var(--bg-panel); border-right:2px solid var(--border); box-shadow:2px 0 12px rgba(0,0,0,.2); display:flex; flex-direction:column; overflow:hidden; transition:width .15s, min-width .15s; } .sidebar.collapsed{ width:0; min-width:0; border-right:none; box-shadow:none; } .sidebar-panel{ display:none; flex-direction:column; height:100%; overflow-y:auto; } .sidebar-panel.active{ display:flex; } .sidebar-head{ padding:9px 14px 7px; font-size:10.5px; text-transform:uppercase; letter-spacing:.14em; color:var(--text-dimmer); display:flex; align-items:center; justify-content:space-between; background:var(--bg-panel-2); } .sidebar-head .mini-btn{ background:none; border:1px solid transparent; color:var(--text-dim); width:20px; height:20px; padding:0; border-radius:4px; font-size:13px; line-height:1; display:inline-flex; align-items:center; justify-content:center; } .sidebar-head .mini-btn:hover{ color:var(--accent); border-color:var(--accent); background:var(--bg-hover); } /* Wenn die Explorer-Section per Caret zugeklappt wird, verschwindet der Baum. */ .explorer-section-head.collapsed ~ .file-tree{ display:none; } /* ---------- Explorer-Sektion (VS Code-Look) ---------- */ .explorer-section-head{ display:flex; align-items:center; gap:2px; padding:4px 10px 4px 14px; font-size:11.5px; font-weight:600; letter-spacing:.04em; color:var(--text); background:var(--bg-panel-2); border-top:1px solid var(--border-soft); user-select:none; } .explorer-section-head .explorer-section-caret{ background:none; border:none; padding:2px 4px; cursor:pointer; color:var(--text-dim); display:inline-flex; align-items:center; justify-content:center; border-radius:3px; } .explorer-section-head .explorer-section-caret:hover{ color:var(--text); background:var(--bg-hover); } .explorer-section-head .explorer-section-caret svg{ width:11px; height:11px; stroke:currentColor; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; transition:transform .12s; } .explorer-section-head.collapsed .explorer-section-caret svg{ transform:rotate(-90deg); } .explorer-section-head .explorer-section-title{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .explorer-section-head .explorer-section-actions{ display:flex; gap:2px; align-items:center; } .explorer-section-actions .mini-btn{ background:none; border:1px solid transparent; color:var(--text-dim); width:22px; height:22px; padding:0; border-radius:4px; display:inline-flex; align-items:center; justify-content:center; line-height:1; font-size:14px; } .explorer-section-actions .mini-btn:hover{ color:var(--accent); background:var(--bg-hover); border-color:var(--border); } .explorer-section-actions .mini-btn .mini-icon{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .explorer-section-actions .mini-btn .mini-icon path{ fill:currentColor; stroke:none; } /* Bild-Button: Plus-Badge ueberlagert das Bild-Icon wie in VS Code. */ .explorer-section-actions .mini-btn.btn-overlay{ position:relative; overflow:visible; } .explorer-section-actions .mini-btn.btn-overlay .mini-icon{ width:16px; height:16px; } .plus-badge{ position:absolute; right:-5px; bottom:-5px; width:13px; height:13px; line-height:11px; background:var(--accent); color:#0a0e16; font-size:10.5px; font-weight:800; text-align:center; border-radius:50%; border:1.5px solid var(--bg-panel-2); box-shadow:0 0 0 1px rgba(0,0,0,.4); pointer-events:none; } .file-tree{ list-style:none; padding:4px 0; margin:0; } .file-tree ul{ list-style:none; padding:0; margin:0; } .file-tree li{ padding:3px 10px 3px 0; margin:0; border-radius:0; cursor:pointer; color:var(--text-dim); display:flex; align-items:center; gap:4px; font-size:13px; line-height:1.5; min-height:22px; border:1px solid transparent; user-select:none; } .file-tree li:hover{ background:var(--bg-hover); color:var(--text); } .file-tree li.active{ background:var(--bg-panel-2); color:var(--text); box-shadow:inset 2px 0 0 var(--accent); } .file-tree li .name{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-right:4px; } .file-tree li .del{ opacity:0; color:var(--text-dimmer); font-size:10.5px; width:14px; height:14px; line-height:14px; text-align:center; border-radius:3px; transition:opacity .12s, color .12s, background .12s; } .file-tree li:hover .del{ opacity:.8; } .file-tree li .del:hover{ color:var(--danger); background:rgba(255,77,112,.12); opacity:1; } /* ---------- Chevron + Folder-Glyph in Explorer-Zeilen ---------- */ .file-tree li .folder-chevron{ flex:0 0 14px; width:14px; height:16px; display:inline-flex; align-items:center; justify-content:center; color:var(--text-dimmer); cursor:pointer; border-radius:3px; transition:color .12s, transform .12s; } .file-tree li .folder-chevron:hover{ color:var(--text); background:var(--bg-hover); } .file-tree li .folder-chevron svg{ width:9px; height:9px; stroke:currentColor; fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; transition:transform .12s; } .file-tree li .folder-chevron.open svg{ transform:rotate(90deg); } .file-tree li .folder-icon{ flex:0 0 15px; width:15px; height:16px; display:inline-flex; align-items:center; justify-content:center; color:var(--text-dim); } .file-tree li .folder-icon svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; } .file-tree li .folder-icon svg path{ fill:currentColor; stroke:none; opacity:.85; } .file-tree li.folder-row:hover .folder-chevron, .file-tree li.folder-row:hover .folder-icon{ color:var(--text); } .file-tree li.folder-row.active .folder-chevron, .file-tree li.folder-row.active .folder-icon{ color:var(--accent); } .file-tree li.inline-create-row{ cursor:default; gap:6px; } .inline-create-input{ flex:1; min-width:0; background:var(--bg-elevated); color:var(--text); border:1px solid var(--accent); border-radius:4px; padding:3px 6px; font-size:12.5px; font-family:inherit; outline:none; box-shadow:var(--accent-glow); } .pkg-list{ padding:8px; display:flex; flex-direction:column; gap:6px; } .pkg-card{ border:1px solid var(--border); border-radius:6px; padding:8px 10px; background:var(--bg-elevated); border-left:3px solid var(--accent); } .pkg-card .pkg-name{ font-weight:600; color:var(--text); font-size:12.5px; } .pkg-card .pkg-desc{ color:var(--text-dim); font-size:11px; margin-top:2px; line-height:1.4; } .pkg-card .pkg-status{ margin-top:6px; font-size:10.5px; color:var(--accent); display:flex; align-items:center; gap:5px; } .pkg-card .pkg-status .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:var(--accent-glow); } .pkg-empty{ padding:20px 14px; color:var(--text-dimmer); font-size:11.5px; line-height:1.6; text-align:center; } .settings-row{ display:flex; align-items:center; justify-content:space-between; padding:10px 14px; font-size:12px; color:var(--text-dim); border-bottom:1px solid var(--border-soft); } .settings-row input[type=range]{ width:90px; accent-color:var(--accent); } .toggle{ width:34px; height:18px; border-radius:10px; background:var(--bg-elevated); border:1px solid var(--border); position:relative; cursor:pointer; } .toggle .knob{ width:14px; height:14px; border-radius:50%; background:var(--text-dim); position:absolute; top:1px; left:1px; transition:left .15s, background .15s; } .toggle.on{ border-color:var(--accent); } .toggle.on .knob{ left:17px; background:var(--accent); box-shadow:var(--accent-glow); } /* ---------- Workspace area ---------- */ .workspace-area{ flex:1; display:flex; min-width:0; position:relative; } #blocklyDiv{ flex:1; height:100%; min-width:0; } .block-zoom-ctrl{ position:absolute; left:8px; bottom:8px; z-index:20; display:flex; align-items:center; gap:2px; background:var(--bg-elevated); border:1px solid var(--border); border-radius:6px; padding:3px; box-shadow:0 4px 14px rgba(0,0,0,.3); } .block-zoom-ctrl button{ width:22px; height:22px; display:flex; align-items:center; justify-content:center; background:none; border:none; color:var(--text-dim); font-size:14px; border-radius:4px; line-height:1; } .block-zoom-ctrl button:hover{ color:var(--accent); background:var(--bg-hover); } .block-zoom-ctrl .block-zoom-label{ font-size:10px; color:var(--text-dimmer); width:34px; text-align:center; user-select:none; } .code-panel{ width:380px; min-width:380px; background:var(--bg-panel); border-left:2px solid var(--border); box-shadow:-2px 0 12px rgba(0,0,0,.2); display:flex; flex-direction:column; transition:width .15s, min-width .15s; } .code-panel.collapsed{ width:34px; min-width:34px; overflow:hidden; box-shadow:none; } .code-panel.collapsed .code-panel-head{ flex-direction:column; height:100%; padding:10px 0; justify-content:flex-start; } .code-panel.collapsed .code-panel-head > *{ display:none; } .code-panel.collapsed .code-panel-head #btnCollapseCode{ display:inline-flex; } .code-panel-head .vertical-label{ display:none; } .code-panel.collapsed .code-panel-head .vertical-label{ display:block; writing-mode:vertical-rl; transform:rotate(180deg); font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); margin-top:12px; white-space:nowrap; } .code-panel.collapsed pre, .code-panel.collapsed textarea, .code-panel.collapsed .code-panel-actions{ display:none; } /* Data-Modus: kein Blockly-Workspace; stattdessen das Code-Panel in voller Breite mit der textarea als Standard-Ansicht. Wird aktiv, sobald der aktive File lang='json' oder lang='txt' hat — das kommt vom Unsupported-Extension-Flow (fahh.jar, recipe.json, …). */ .workspace-area.data-mode #blocklyDiv, .workspace-area.data-mode .block-zoom-ctrl, .workspace-area.data-mode #resizeCodePanel{ display:none !important; } .workspace-area.data-mode .code-panel{ width:auto !important; min-width:0 !important; flex:1; border-left:none !important; box-shadow:none !important; } .workspace-area.data-mode .code-panel-head{ border-bottom-color:var(--border) !important; box-shadow:none !important; } .workspace-area.data-mode .code-panel-actions, .workspace-area.data-mode .code-file-info, .workspace-area.data-mode pre, .workspace-area.data-mode .code-image-view{ display:none !important; } .workspace-area.data-mode #codeEditor{ display:block !important; resize:none; height:100%; padding:14px 16px; border:none; font-family:'JetBrains Mono', monospace; } .code-panel-head{ height:38px; min-height:38px; display:flex; align-items:center; gap:8px; padding:0 12px; background:var(--bg-panel-2); border-bottom:2px solid var(--accent); box-shadow:0 1px 0 var(--border); color:var(--text-dim); font-size:11px; text-transform:uppercase; letter-spacing:.1em; } .code-panel-head .live-dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:var(--accent-glow); animation:pulse 2s infinite; } @keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.35;} } .code-panel-head .spacer{ flex:1; } .code-panel-head button{ background:none; border:none; color:var(--text-dim); font-size:13px; } .code-panel-head button:hover{ color:var(--accent); } .code-panel pre{ margin:0; flex:1; overflow:auto; background:transparent !important; } .code-panel pre code{ font-size:12px !important; line-height:1.55 !important; background:transparent !important; } .code-panel textarea{ flex:1; resize:none; border:none; outline:none; background:#0d1119; color:var(--text); font-size:12px; line-height:1.55; padding:12px; } /* Kopfzeile, wenn rechts eine erzeugte Datei statt des Codes steht. */ .code-file-info{ display:flex; align-items:center; gap:10px; padding:7px 12px; background:var(--bg-panel-2); border-bottom:1px solid var(--border-soft); font-size:11px; color:var(--text-dim); } .code-file-info span{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .code-file-info button{ background:var(--bg-elevated); border:1px solid var(--border); color:var(--text); padding:3px 9px; border-radius:5px; font-size:11px; white-space:nowrap; } .code-file-info button:hover{ border-color:var(--accent); color:var(--accent); } /* Texturen sind 16x16 — ohne pixelated wirkt das im Panel wie ein Farbverlauf. */ .code-image-view{ flex:1; display:flex; align-items:center; justify-content:center; padding:20px; background:repeating-conic-gradient(#181d27 0% 25%, #11151d 0% 50%) 50% / 16px 16px; } .code-image-view img{ width:min(256px, 60%); aspect-ratio:1; image-rendering:pixelated; border:1px solid var(--border); border-radius:4px; } .code-panel.collapsed .code-file-info, .code-panel.collapsed .code-image-view{ display:none !important; } .code-panel-actions{ display:flex; gap:8px; padding:8px 10px; border-top:1px solid var(--border-soft); background:var(--bg-panel-2); } .code-panel-actions button{ flex:1; background:var(--bg-elevated); border:1px solid var(--border); color:var(--text); padding:6px 8px; border-radius:5px; font-size:11px; } .code-panel-actions button:hover{ border-color:var(--accent); color:var(--accent); } .code-panel-actions button.primary{ border-color:var(--accent); color:var(--accent); } /* ---------- Console ---------- */ .console-panel{ height:180px; min-height:34px; background:var(--bg-panel); border-top:2px solid var(--border); box-shadow:0 -2px 12px rgba(0,0,0,.2); display:flex; flex-direction:column; transition:height .15s; } .console-panel.collapsed{ height:34px; box-shadow:none; } .console-head{ height:34px; min-height:34px; display:flex; align-items:center; gap:8px; padding:0 12px; background:var(--bg-panel-2); border-bottom:1px solid var(--border); color:var(--text-dim); font-size:11px; text-transform:uppercase; letter-spacing:.1em; } .console-head .spacer{ flex:1; } .console-head button{ background:none; border:none; color:var(--text-dim); font-size:12px; } .console-head button:hover{ color:var(--accent); } .console-body{ flex:1; overflow-y:auto; padding:8px 12px; font-size:12px; line-height:1.7; } .console-panel.collapsed .console-body{ display:none; } .log-line{ display:flex; gap:8px; } .log-line .ts{ color:var(--text-dimmer); flex-shrink:0; } .log-line.ok .msg{ color:var(--accent); } .log-line.info .msg{ color:var(--text-dim); } .log-line.warn .msg{ color:var(--warn); } .log-line.err .msg{ color:var(--danger); } /* ---------- Modal ---------- */ .modal-overlay{ position:fixed; inset:0; background:rgba(4,6,10,.65); display:none; align-items:center; justify-content:center; z-index:100; backdrop-filter:blur(2px); } .modal-overlay.open{ display:flex; } .modal{ width:480px; max-height:74vh; display:flex; flex-direction:column; background:var(--bg-panel); border:1px solid var(--border); border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,.5); } .modal-head{ padding:16px 18px; border-bottom:2px solid var(--accent); display:flex; align-items:center; justify-content:space-between; background:var(--bg-panel-2); } .modal-head h2{ font-size:17px; } .modal-head button{ background:none; border:none; color:var(--text-dim); font-size:16px; } .modal-head button:hover{ color:var(--danger); } .modal-sub{ padding:10px 18px 0; color:var(--text-dim); font-size:11px; } .modal-search{ margin:10px 18px 6px; display:flex; gap:8px; } .modal-search input{ flex:1; background:var(--bg-elevated); border:1px solid var(--border); border-radius:5px; padding:8px 10px; color:var(--text); font-family:inherit; font-size:12.5px; } .modal-search input:focus{ outline:none; border-color:var(--accent); } .modal-list{ overflow-y:auto; padding:6px 18px 18px; display:flex; flex-direction:column; gap:8px; } .modal-pkg{ display:flex; align-items:center; gap:10px; border:1px solid var(--border); border-radius:7px; padding:10px 12px; background:var(--bg-elevated); } .modal-pkg .icon{ font-size:18px; width:22px; text-align:center; } .modal-pkg .info{ flex:1; min-width:0; } .modal-pkg .info .n{ font-weight:600; font-size:12.5px; } .modal-pkg .info .d{ color:var(--text-dim); font-size:11px; margin-top:1px; } .modal-pkg .info .cmd{ color:var(--text-dimmer); font-size:10px; margin-top:3px; } .modal-pkg .add-btn{ background:none; border:1px solid var(--accent); color:var(--accent); border-radius:5px; padding:5px 10px; font-size:11px; white-space:nowrap; } .modal-pkg .add-btn:hover{ box-shadow:var(--accent-glow); } .modal-pkg .add-btn[disabled]{ border-color:var(--border); color:var(--text-dimmer); cursor:default; box-shadow:none; } /* Blockly overrides to sit flush in the dark canvas */ .blocklyMainBackground{ stroke:none !important; } /* ---------- Resize handles (frei konfigurierbares Layout) ---------- */ .resize-h{ width:5px; min-width:5px; cursor:col-resize; background:transparent; position:relative; z-index:20; flex-shrink:0; } .resize-h:hover, .resize-h.dragging{ background:var(--accent-soft); } .resize-h::after{ content:''; position:absolute; top:0; bottom:0; left:2px; width:1px; background:var(--border); } .resize-v{ height:5px; min-height:5px; cursor:row-resize; background:transparent; position:relative; z-index:20; flex-shrink:0; } .resize-v:hover, .resize-v.dragging{ background:var(--accent-soft); } .resize-v::after{ content:''; position:absolute; left:0; right:0; top:2px; height:1px; background:var(--border); } body.resizing-col, body.resizing-col *{ cursor:col-resize !important; user-select:none !important; } body.resizing-row, body.resizing-row *{ cursor:row-resize !important; user-select:none !important; } /* ---------- Datei-Icons & Ordner ---------- */ .file-icon{ font-size:13px; line-height:1; flex-shrink:0; width:15px; text-align:center; } .file-icon.file-icon-dot{ font-size:8.5px; font-weight:700; padding:2px 4px; border-radius:3px; width:auto; border:1px solid currentColor; background:rgba(255,255,255,.04); letter-spacing:.02em; } .file-tree li.folder-row{ color:var(--text); } /* Aktiver Ordner nutzt dieselbe Highlight-Behandlung wie aktive Dateien (heller Vordergrund, Inset-Akzent) — VS Code traegt hier kein anderes Akzent-Textfarbe auf, weil das bei dichter Baumstruktur zu bunt wird. */ /* ---------- Sidebar / Panel Collapse-Pfeile ---------- */ .collapse-arrow{ margin-left:4px; } .arrow-btn{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:4px; transition:background .15s, color .15s, transform .15s; color:var(--text-dim); } .arrow-btn:hover{ background:rgba(255,255,255,.06); color:var(--accent); } .arrow-btn svg{ width:11px; height:11px; display:block; stroke:currentColor; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; transition:transform .15s; } .arrow-btn.flipped svg{ transform:rotate(180deg); } /* ---------- Live-Vorschau-Modal ---------- */ .rawcode-modal{ width:min(92vw, 760px); max-height:86vh; display:flex; flex-direction:column; background:var(--bg-panel); border:1px solid var(--border); border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,.5); } .rawcode-body{ padding:16px 18px; overflow-y:auto; display:flex; flex-direction:column; gap:12px; } .rawcode-field label{ display:block; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-dim); margin-bottom:6px; } .rawcode-field input[type="text"], .rawcode-field textarea{ width:100%; background:var(--bg-elevated); border:1px solid var(--border); border-radius:5px; padding:8px 10px; color:var(--text); font-family:inherit; font-size:12.5px; resize:vertical; } .rawcode-field input[type="text"]:focus, .rawcode-field textarea:focus{ outline:none; border-color:var(--accent); box-shadow:var(--accent-glow); } .rawcode-field textarea.rawcode-desc{ min-height:44px; } .rawcode-code-grid{ position:relative; min-height:220px; border-radius:5px; overflow:hidden; border:1px solid var(--border-soft); background:#0d1117; } .rawcode-code-grid:focus-within{ border-color:var(--accent); box-shadow:var(--accent-glow); } .rawcode-code-grid textarea, .rawcode-code-grid .rawcode-preview{ position:absolute; inset:0; margin:0; padding:10px 12px; box-sizing:border-box; font-family:'JetBrains Mono', monospace; font-size:12.5px; line-height:1.6; white-space:pre-wrap; word-break:break-word; overflow:auto; } .rawcode-code-grid textarea{ background:transparent; color:transparent; caret-color:#f1f3f8; border:none; resize:none; z-index:2; } .rawcode-code-grid textarea::selection{ background:rgba(255,255,255,.25); } .rawcode-code-grid textarea:focus{ outline:none; box-shadow:none; border-color:transparent; } .rawcode-preview{ pointer-events:none; z-index:1; border:none; background:transparent; } .rawcode-preview code{ font-size:12.5px; line-height:1.6; white-space:pre-wrap; word-break:break-word; } .rawcode-actions{ padding:14px 18px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:10px; } .rawcode-actions button{ padding:8px 16px; border-radius:5px; font-size:12.5px; background:var(--bg-elevated); border:1px solid var(--border); color:var(--text); } .rawcode-actions button:hover{ border-color:var(--accent); color:var(--accent); } .rawcode-actions button.primary{ border-color:var(--accent); color:var(--accent); } .rawcode-actions button.primary:hover{ box-shadow:var(--accent-glow); } /* Kleine, gedämpfte Beschreibungszeile unter dem Rohcode-Block-Titel */ .sb-rawcode-desc.blocklyText{ font-size:9.5px !important; fill:#8a95a6 !important; } .preview-modal{ width:min(94vw, 1100px); height:82vh; max-height:82vh; display:flex; flex-direction:column; background:var(--bg-panel); border:1px solid var(--border); border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,.5); } .preview-modal .modal-head{ flex:0 0 auto; } #previewFrame{ flex:1; width:100%; border:none; background:#fff; border-radius:0 0 10px 10px; } /* ---------- Start-Seite / Projektübersicht ---------- */ .start-modal{ width:min(94vw, 900px); max-height:86vh; display:flex; flex-direction:column; background:var(--bg-panel); border:1px solid var(--border); border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,.5); } .start-body{ padding:18px 20px 22px; overflow-y:auto; } .start-current-card{ display:flex; align-items:center; justify-content:space-between; gap:14px; background:var(--bg-elevated); border:1px solid var(--border); border-radius:8px; padding:12px 16px; margin-bottom:16px; } .start-current-label{ font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--text-dim); } .start-current-name{ font-family:'Rajdhani',sans-serif; font-size:17px; font-weight:600; margin-top:2px; } .start-new-project-btn{ width:100%; padding:12px; margin-bottom:18px; border-radius:8px; background:var(--accent-soft); border:1.5px dashed var(--accent); color:var(--accent); font-size:13px; font-weight:600; display:flex; align-items:center; justify-content:center; gap:8px; transition:box-shadow .15s, background .15s; } .start-new-project-btn:hover{ box-shadow:var(--accent-glow); background:rgba(var(--accent-rgb),.18); } .project-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:12px; } .project-card{ background:var(--bg-elevated); border:1px solid var(--border); border-radius:8px; padding:14px; display:flex; flex-direction:column; gap:8px; transition:border-color .15s, box-shadow .15s; } .project-card:hover{ border-color:var(--accent); box-shadow:var(--accent-glow); } .project-card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; } .project-card-name{ font-family:'Rajdhani',sans-serif; font-size:15.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .project-card-actions{ display:flex; gap:4px; flex-shrink:0; } .project-card-actions button{ width:22px; height:22px; border-radius:4px; background:none; border:1px solid var(--border); color:var(--text-dim); font-size:11px; display:flex; align-items:center; justify-content:center; } .project-card-actions button:hover{ color:var(--accent); border-color:var(--accent); } .project-card-actions button.danger:hover{ color:var(--danger); border-color:var(--danger); } .project-card-meta{ font-size:11px; color:var(--text-dim); display:flex; gap:10px; flex-wrap:wrap; } .project-card-open{ margin-top:2px; padding:7px; border-radius:5px; text-align:center; background:var(--bg-hover); border:1px solid var(--border); color:var(--text); font-size:12px; } .project-card-open:hover{ border-color:var(--accent); color:var(--accent); } .project-card.active{ border-color:var(--accent); box-shadow:var(--accent-glow); } .project-empty{ display:none; text-align:center; color:var(--text-dim); font-size:12.5px; padding:30px 10px; border:1px dashed var(--border); border-radius:8px; } /* ---------- Profil-Chip in der Top-Bar ---------- */ .profile-chip{ display:flex; align-items:center; gap:7px; padding:4px 10px 4px 4px; background:var(--bg-elevated); border:1px solid var(--border); border-radius:999px; color:var(--text); font-family:inherit; font-size:12px; cursor:pointer; transition:border-color .15s, box-shadow .15s; } .profile-chip:hover{ border-color:var(--accent); box-shadow:var(--accent-glow); } .profile-avatar{ width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; flex:0 0 auto; } .profile-name{ max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* ---------- Profil-Dialog ---------- */ .profile-modal{ width:min(94vw, 460px); display:flex; flex-direction:column; background:var(--bg-panel); border:1px solid var(--border); border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,.5); } .profile-body{ padding:18px 20px 6px; } .profile-field{ margin-bottom:14px; } .profile-field label{ display:block; margin-bottom:6px; font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--text-dim); } .profile-field input[type=text]{ width:100%; background:var(--bg-elevated); border:1px solid var(--border); border-radius:5px; padding:8px 10px; color:var(--text); font-family:inherit; font-size:13px; } .profile-field input[type=text]:focus{ outline:none; border-color:var(--accent); } .profile-emoji-row, .profile-colour-row{ display:flex; flex-wrap:wrap; gap:6px; } .profile-emoji{ width:32px; height:32px; border-radius:7px; font-size:15px; background:var(--bg-elevated); border:1px solid var(--border); cursor:pointer; } .profile-emoji:hover{ border-color:var(--accent); } .profile-emoji.active{ border-color:var(--accent); box-shadow:var(--accent-glow); } .profile-colour{ width:26px; height:26px; border-radius:50%; border:2px solid transparent; cursor:pointer; } .profile-colour.active{ border-color:var(--text); } .profile-stats{ font-size:11.5px; color:var(--text-dim); margin-bottom:8px; } .profile-hint{ font-size:11.5px; color:var(--text-dimmer); line-height:1.5; margin:0 0 4px; } .profile-actions{ display:flex; gap:8px; padding:12px 20px 18px; border-top:1px solid var(--border-soft); } .profile-actions button{ flex:1; padding:9px; border-radius:6px; font-size:12px; font-family:inherit; background:var(--bg-elevated); border:1px solid var(--border); color:var(--text); cursor:pointer; } .profile-actions button:hover{ border-color:var(--accent); color:var(--accent); } /* ---------- Bauen ---------- */ .tb-btn.build{ border-color:#7cb342; color:#9ccc65; } .tb-btn.build:hover{ box-shadow:0 0 12px rgba(124,179,66,.45); } .build-modal{ width:min(94vw, 560px); display:flex; flex-direction:column; background:var(--bg-panel); border:1px solid var(--border); border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,.5); } .build-body{ padding:18px 20px 8px; } .build-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px 14px; } .build-field-wide{ grid-column:1 / -1; } .build-field label{ display:block; margin-bottom:6px; font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--text-dim); } .build-field input, .build-field select{ width:100%; background:var(--bg-elevated); border:1px solid var(--border); border-radius:5px; padding:8px 10px; color:var(--text); font-family:'JetBrains Mono',monospace; font-size:12.5px; } .build-field input:focus, .build-field select:focus{ outline:none; border-color:var(--accent); } .build-hint{ font-size:11.5px; color:var(--text-dimmer); line-height:1.5; margin:14px 0 0; } .build-status{ min-height:18px; margin-top:10px; font-size:12px; color:var(--text-dim); } .build-status.ok{ color:var(--accent); } .build-status.err{ color:var(--danger); } .build-actions{ padding:12px 20px 18px; border-top:1px solid var(--border-soft); } .build-actions button{ width:100%; padding:11px; border-radius:6px; font-size:13px; font-weight:600; font-family:inherit; background:var(--accent-soft); border:1.5px solid var(--accent); color:var(--accent); cursor:pointer; transition:box-shadow .15s; } .build-actions button:hover{ box-shadow:var(--accent-glow); } /* ---------- Material-Auswahl mit Suche ---------- 1480 Materialien passen in kein Blockly-Dropdown; dieses Feld sucht stattdessen. */ .mc-material-picker{ width:270px; padding:8px; } .mc-material-search{ width:100%; background:var(--bg-panel); border:1px solid var(--border); border-radius:5px; padding:7px 9px; color:var(--text); font-family:'JetBrains Mono',monospace; font-size:12px; } .mc-material-search:focus{ outline:none; border-color:var(--accent); } .mc-material-hint{ font-size:10px; color:var(--text-dimmer); padding:6px 2px 4px; } .mc-material-list{ max-height:240px; overflow-y:auto; display:flex; flex-direction:column; gap:2px; } .mc-material-item{ text-align:left; padding:6px 8px; border-radius:4px; border:1px solid transparent; background:none; color:var(--text); font-family:inherit; font-size:12px; cursor:pointer; } .mc-material-item:hover{ background:var(--bg-hover); } .mc-material-item.active{ border-color:var(--accent); color:var(--accent); } .mc-material-empty{ padding:12px 8px; font-size:11.5px; color:var(--text-dim); text-align:center; } /* Trennt in der Zutatenauswahl die eigenen Sachen von denen aus Minecraft. */ .mc-material-group{ font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-dimmer); padding:8px 2px 3px; border-top:1px solid var(--border); margin-top:4px; } .mc-material-group:first-child{ border-top:none; margin-top:0; padding-top:2px; } /* ---------- Startvorlagen ---------- */ .templates-modal{ width:min(94vw, 760px); max-height:86vh; display:flex; flex-direction:column; background:var(--bg-panel); border:1px solid var(--border); border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,.5); } .templates-body{ padding:18px 20px 22px; overflow-y:auto; } .templates-hint{ font-size:12px; color:var(--text-dim); line-height:1.55; margin:0 0 16px; } .template-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:12px; } .template-card{ text-align:left; padding:14px; border-radius:8px; cursor:pointer; background:var(--bg-elevated); border:1px solid var(--border); color:var(--text); font-family:inherit; display:flex; flex-direction:column; gap:8px; transition:border-color .15s, box-shadow .15s, transform .1s; } .template-card:hover{ border-color:var(--accent); box-shadow:var(--accent-glow); } .template-card:active{ transform:translateY(1px); } .template-card-head{ display:flex; align-items:center; gap:9px; } .template-icon{ font-size:20px; } .template-name{ font-family:'Rajdhani',sans-serif; font-size:16px; font-weight:600; } .template-desc{ font-size:11.5px; color:var(--text-dim); line-height:1.5; } .template-lang{ font-size:10.5px; text-transform:uppercase; letter-spacing:.09em; margin-top:auto; } /* ---------- Struktur-Vorschau im Bauen-Dialog ---------- */ .build-structure{ margin:14px 0 0; padding:10px 12px; border-radius:6px; background:var(--bg); border:1px solid var(--border-soft); font-family:'JetBrains Mono',monospace; font-size:11px; line-height:1.65; color:var(--text-dim); white-space:pre-wrap; word-break:break-all; } .build-structure:empty{ display:none; } /* ---------- Projektwahl (Seitenleiste) ---------- */ .setup-body{ padding:12px; overflow-y:auto; } .kind-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:14px; } .kind-card{ text-align:left; padding:11px; border-radius:8px; cursor:pointer; background:var(--bg-elevated); border:1px solid var(--border); color:var(--text); font-family:inherit; transition:border-color .15s, box-shadow .15s; } .kind-card:hover{ border-color:var(--accent); } .kind-card.active{ border-color:var(--accent); box-shadow:var(--accent-glow); } .kind-head{ display:flex; align-items:center; gap:8px; margin-bottom:5px; } .kind-icon{ font-size:17px; } .kind-name{ font-family:'Rajdhani',sans-serif; font-size:14.5px; font-weight:600; } .kind-desc{ font-size:11px; color:var(--text-dim); line-height:1.5; } .setup-field{ margin-bottom:11px; } .setup-field label{ display:block; margin-bottom:5px; font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--text-dim); } .setup-field input, .setup-field select{ width:100%; background:var(--bg-elevated); border:1px solid var(--border); border-radius:5px; padding:7px 9px; color:var(--text); font-family:'JetBrains Mono',monospace; font-size:12px; } .setup-field input:focus, .setup-field select:focus{ outline:none; border-color:var(--accent); } .setup-hint{ font-size:10.5px; color:var(--text-dimmer); line-height:1.5; margin:6px 0 0; } .setup-create{ width:100%; padding:10px; border-radius:6px; font-size:12.5px; font-weight:600; font-family:inherit; background:var(--accent-soft); border:1.5px solid var(--accent); color:var(--accent); cursor:pointer; transition:box-shadow .15s; } .setup-create:hover:not(:disabled){ box-shadow:var(--accent-glow); } .setup-create:disabled{ opacity:.5; cursor:default; } .setup-progress{ margin-top:12px; } .setup-progress-track{ height:5px; border-radius:3px; background:var(--bg); overflow:hidden; } .setup-progress-bar{ height:100%; width:0; background:var(--accent); transition:width .22s ease; } .setup-progress-text{ margin-top:6px; font-size:10.5px; color:var(--text-dim); line-height:1.45; word-break:break-all; } /* Erzeugte Struktur-Eintraege: sichtbar, aber erkennbar nicht bearbeitbar. */ .file-tree li.generated .name{ color:var(--text-dimmer); font-style:italic; } /* ---------- Texturen ---------- */ .textures-modal{ width:min(94vw, 720px); max-height:88vh; display:flex; flex-direction:column; background:var(--bg-panel); border:1px solid var(--border); border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,.5); } .textures-body{ padding:18px 20px 22px; overflow-y:auto; } .tex-note{ padding:9px 12px; margin-bottom:14px; border-radius:6px; font-size:11.5px; line-height:1.5; background:rgba(255,204,77,.10); border:1px solid var(--warn); color:var(--warn); } .tex-form{ display:grid; grid-template-columns:repeat(4, 1fr); gap:12px 14px; } .tex-field-wide{ grid-column:1 / -1; } .tex-field label{ display:block; margin-bottom:6px; font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--text-dim); } .tex-field input, .tex-field select{ width:100%; background:var(--bg-elevated); border:1px solid var(--border); border-radius:5px; padding:8px 10px; color:var(--text); font-family:inherit; font-size:12.5px; } .tex-field input:focus, .tex-field select:focus{ outline:none; border-color:var(--accent); } .tex-gen-row{ display:flex; align-items:center; gap:12px; margin:16px 0 4px; } .tex-gen-row button{ padding:9px 14px; border-radius:6px; font-size:12.5px; font-family:inherit; cursor:pointer; background:var(--bg-elevated); border:1px solid var(--border); color:var(--text); } .tex-gen-row button.primary{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent); } .tex-gen-row button:hover:not(:disabled){ border-color:var(--accent); } .tex-gen-row button:disabled{ opacity:.45; cursor:default; } .tex-status{ font-size:11.5px; color:var(--text-dim); } .tex-status.ok{ color:var(--accent); } .tex-status.err{ color:var(--danger); } /* 16x16 vergroessert: ohne pixelated verwaschen die Pixel zu Matsch. */ .tex-preview, .tex-thumb{ image-rendering:pixelated; image-rendering:crisp-edges; background:var(--bg); border:1px solid var(--border); border-radius:4px; } .tex-preview{ width:56px; height:56px; } .tex-thumb{ width:100%; aspect-ratio:1; display:block; } .tex-lib-head{ margin:22px 0 10px; font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--text-dim); } .tex-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:10px; } .tex-card{ background:var(--bg-elevated); border:1px solid var(--border); border-radius:7px; padding:7px; display:flex; flex-direction:column; gap:5px; } .tex-card-name{ font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .tex-card-type{ font-size:9.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-dimmer); } .tex-card-actions{ display:flex; gap:4px; } .tex-card-actions button{ flex:1; padding:3px; border-radius:4px; font-size:11px; cursor:pointer; background:none; border:1px solid var(--border); color:var(--text-dim); } .tex-card-actions button:hover{ border-color:var(--accent); color:var(--accent); } .tex-card-actions .danger:hover{ border-color:var(--danger); color:var(--danger); } .tex-empty{ display:none; text-align:center; color:var(--text-dim); font-size:12px; padding:24px 10px; border:1px dashed var(--border); border-radius:8px; } /* ========================================================================= Mobil und Tablet ========================================================================= Die Oberflaeche war auf drei nebeneinanderliegende Spalten ausgelegt: Icon-Leiste (50px) + Sidebar (190px) + Blockly + Code-Panel (380px). Auf einem Telefon mit ~390px Breite passt davon nichts, und es gab bisher gar keine Media Queries — die Seite lief einfach ueber den Rand hinaus. Auf schmalen Geraeten wird daraus: Blockly bekommt die ganze Breite, die Sidebar wird zu einer Schublade ueber dem Inhalt, und das Code-Panel rutscht unter die Arbeitsflaeche. ========================================================================= */ @media (max-width: 860px) { /* --- Top-Bar: Beschriftungen weg, nur noch Symbole --- */ .top-bar{ flex-wrap:nowrap; overflow-x:auto; gap:4px; padding:6px 8px; } .top-bar::-webkit-scrollbar{ height:0; } .tb-btn{ padding:7px 9px; flex:0 0 auto; } .tb-btn span:not(.ico){ display:none; } .tb-btn .ico{ margin:0; font-size:15px; } .logo .sub, .logo-icon{ display:none; } .logo{ font-size:14px; flex:0 0 auto; } .divider-v{ display:none; } .spacer{ flex:0 0 4px; } .tb-select{ flex:0 0 auto; max-width:130px; font-size:11.5px; } .profile-name{ display:none; } .profile-chip{ padding:4px; flex:0 0 auto; } /* --- Sidebar als Schublade ueber dem Inhalt --- Die Icon-Leiste bleibt sichtbar; die Sidebar schiebt sich darueber ein und nimmt keinen Platz mehr von der Arbeitsflaeche weg. --- */ .sidebar{ position:absolute; top:0; bottom:0; left:50px; z-index:60; width:min(78vw, 280px) !important; min-width:0 !important; transform:translateX(-115%); transition:transform .18s ease; box-shadow:6px 0 24px rgba(0,0,0,.45); } .sidebar.mobile-open{ transform:translateX(0); } .main-container{ position:relative; } /* Abgedunkelter Hintergrund hinter der ausgeschobenen Sidebar-Schublade — rein per CSS über :has(), ohne eigenes HTML-Element oder JS-Zutun. Der Tipp-daneben-schliesst-Effekt kommt schon aus panels.js (globaler pointerdown-Listener); das hier ist nur die optische Abdunkelung. */ body:has(.sidebar.mobile-open)::before{ content:''; position:fixed; inset:0; z-index:55; background:rgba(0,0,0,.45); } /* Ziehgriffe ergeben ohne Maus keinen Sinn. */ .resize-h, .resize-v{ display:none !important; } /* --- Code-Panel unter die Arbeitsflaeche statt daneben --- */ .workspace-area{ flex-direction:column; } .code-panel{ width:100% !important; min-width:0 !important; max-height:34vh; border-left:none; border-top:1px solid var(--border); } .code-panel.collapsed{ max-height:38px; } .code-panel.collapsed pre, .code-panel.collapsed textarea, .code-panel.collapsed .code-panel-actions{ display:none; } #codePanelVerticalLabel{ display:none; } /* --- Konsole niedriger --- */ .console-panel{ max-height:30vh; } .console-body{ font-size:11px; } /* --- Dialoge fast bildschirmfuellend --- */ .tex-form{ grid-template-columns:1fr 1fr; } .tex-gen-row{ flex-wrap:wrap; } .modal, .start-modal, .profile-modal, .build-modal, .templates-modal, .textures-modal, .rawcode-modal, .preview-modal{ width:calc(100vw - 20px) !important; max-width:none; max-height:90vh; } .modal-overlay{ padding:10px; } .build-grid{ grid-template-columns:1fr; } .project-grid, .template-grid{ grid-template-columns:1fr; } .start-current-card{ flex-direction:column; align-items:stretch; gap:10px; } /* Bei ausgeblendeten Beschriftungen braucht der Knopf im Dialog seinen Text. */ .start-current-card .tb-btn span:not(.ico), .profile-actions button span, .build-actions button span{ display:inline !important; } /* --- Materialauswahl an schmale Bildschirme --- */ .mc-material-picker{ width:min(84vw, 270px); } .mc-material-list{ max-height:44vh; } /* --- Groessere Beruehrungsflaechen --- */ .icon-btn{ min-height:44px; } .file-tree li{ padding-top:7px; padding-bottom:7px; } .mc-material-item{ padding:9px 8px; } } /* Sehr schmal (Telefone hochkant) */ @media (max-width: 480px) { .top-bar{ padding:5px 6px; } .tb-select{ max-width:104px; } .sidebar{ width:min(86vw, 260px) !important; } .modal-head h2{ font-size:15px; } .templates-hint, .profile-hint, .build-hint{ font-size:11px; } } /* Quer gehaltenes Telefon: wenig Hoehe, also Code-Panel und Konsole kleiner. */ @media (max-height: 520px) and (max-width: 960px) { .code-panel{ max-height:40vh; } .console-panel{ max-height:26vh; } }