/* ============================================================ COMPILER SHARED STYLES — style.css ============================================================ Questo foglio di stile è pensato per essere riutilizzato con qualsiasi tipo di compilatore (HTML/CSS/JS, Python, C++, ecc.). Vedi README.md per le istruzioni di utilizzo. INDICE: 01. CSS Custom Properties (tokens) 02. Reset & Base 03. Layout struttura compilatore 04. Toolbar 05. Tab group (file switcher) 06. Action buttons (theme, fullscreen, run) 07. Editor panel 08. CodeMirror overrides 09. Resize handle 10. Preview panel 11. Console panel 12. Dark mode 13. Fullscreen mode 14. Responsive / mobile 15. SEO section ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Calistoga&family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap'); /* ── 01. CSS Custom Properties ─────────────────────────────── */ :root { /* Brand palette (light) */ --lightblue: #e1eeff; --blue: #c0dbff; --darkblue: #9ec7ff; --mainblue: #106fde; --darkmainblue: #005ac3; --lightgrey: #f2f2f3; --grey: #ececec; --white: #fff; --black: #000; /* Semantic UI tokens — light mode */ --bg-app: #f5f8ff; --bg-surface: var(--white); --bg-toolbar: var(--white); --bg-editor: var(--white); --bg-preview: var(--white); --bg-tab-active: var(--lightblue); --bg-tab-hover: var(--lightgrey); --bg-resize: var(--grey); --text-primary: #111827; --text-secondary: #4b5563; --text-muted: #9ca3af; --text-tab-active: var(--mainblue); --border-color: #dce7f8; --border-subtle: #eaf0fb; --accent: var(--mainblue); --accent-dark: var(--darkmainblue); --danger: #dc2626; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --toolbar-h: 48px; --preview-header-h: 36px; --transition-fast: 150ms ease; --font-primary: 'IBM Plex Sans', sans-serif; --font-monospace: 'IBM Plex Mono', monospace; --font-display: 'Calistoga', cursive; } /* ── 02. Reset & Base ───────────────────────────────────────── */ html { height: 100%; font-size: 14px; font-family: var(--font-primary) !important; } body { -webkit-font-smoothing: antialiased; overflow-x: hidden; font-family: var(--font-primary) !important; } button { font-family: var(--font-primary); cursor: pointer; border: none; background: none; color: inherit; } /* ── 03. Compiler wrapper ───────────────────────────────────── */ /* .compiler-wrapper è il contenitore principale del compilatore. Occupa tutto lo spazio disponibile sotto la navbar (60px). Per i compilatori futuri, aggiungi data-compiler="python" ecc. sul o su .compiler-wrapper per stili specifici. */ .compiler-wrapper { display: flex; flex-direction: column; width: 100%; height: calc(100vh - 60px); /* 60px = altezza navbar esterna */ border-top: 1px solid var(--border-color); overflow: hidden; margin-top: 60px; /* spinge il compilatore sotto la navbar */ } /* ── 04. Toolbar ────────────────────────────────────────────── */ .compiler-toolbar { display: flex; align-items: center; justify-content: space-between; height: var(--toolbar-h); padding: 0 12px 0 0; background: var(--bg-toolbar); border-bottom: 1px solid var(--border-color); flex-shrink: 0; gap: 8px; } /* ── 05. Tab group ──────────────────────────────────────────── */ .tab-group { display: flex; align-items: stretch; height: 100%; overflow-x: auto; scrollbar-width: none; } .tab-group::-webkit-scrollbar { display: none; } .tab-btn { display: flex; align-items: center; gap: 6px; padding: 0 16px; font-size: 13px; font-weight: 500; color: var(--text-secondary); background: transparent; border-right: 1px solid var(--border-subtle); border-bottom: 2px solid transparent; white-space: nowrap; transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast); position: relative; } .tab-btn:hover { background: var(--bg-tab-hover); color: var(--text-primary); } .tab-btn.active { color: var(--text-tab-active); background: var(--bg-tab-active); border-bottom-color: var(--accent); font-weight: 600; } /* ── 06. Action buttons ─────────────────────────────────────── */ .toolbar-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } /* Base action button */ .action-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 14px; font-size: 13px; font-weight: 500; border-radius: var(--radius-md); transition: background var(--transition-fast), color var(--transition-fast); } /* Icon-only variant */ .action-btn--icon { width: 34px; height: 34px; padding: 0; border-radius: var(--radius-md); color: var(--text-secondary); background: transparent; } .action-btn--icon:hover { background: var(--bg-tab-hover); color: var(--text-primary); } .action-btn--icon svg { width: 18px; height: 18px; display: block; } .action-btn--run { background: var(--accent); color: #fff; padding: 6px 16px; font-weight: 600; } .action-btn--run:hover { background: var(--accent-dark); } .action-btn--run svg { width: 14px; height: 14px; } .action-btn--run.is-loading { background: #8f98a6; color: #f4f5f7; pointer-events: none; cursor: wait; } .action-btn--run.is-loading:hover { background: #8f98a6; } .action-btn--run.is-loading svg { display: none; } .action-btn--run.is-loading::before { content: ''; width: 14px; height: 14px; display: inline-block; background: currentColor; mask: center / contain no-repeat url('https://biadets.com/img/loading-svg-grey.svg'); -webkit-mask: center / contain no-repeat url('https://biadets.com/img/loading-svg-grey.svg'); } /* Theme toggle icon visibility */ .light-mode .icon-sun { display: none; } .light-mode .icon-moon { display: block; } .dark-mode .icon-moon { display: none; } .dark-mode .icon-sun { display: block; } /* Fullscreen toggle icon visibility */ .compiler-wrapper:not(.is-fullscreen) .icon-compress { display: none; } .compiler-wrapper.is-fullscreen .icon-expand { display: none; } .action-btn--mobile-menu { display: inline-flex; } .mobile-menu-container { position: relative; display: none; } .mobile-menu-dropdown { position: absolute; top: calc(100% + 6px); right: 0; min-width: 190px; padding: 6px; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18); display: none; z-index: 50; } .mobile-menu-container.is-open .mobile-menu-dropdown { display: block; } .mobile-menu-item { width: 100%; height: 34px; padding: 0 10px; border-radius: var(--radius-sm); display: flex; align-items: center; gap: 8px; color: var(--text-secondary); font-size: 13px; } .mobile-menu-item:hover { background: var(--bg-tab-hover); color: var(--text-primary); } .mobile-menu-item--theme { display: none; } .mobile-menu-item svg { width: 16px; height: 16px; flex: 0 0 auto; } .mobile-menu-item .icon-compress { display: none; } .compiler-wrapper.is-fullscreen .mobile-menu-item .icon-expand { display: none; } .compiler-wrapper.is-fullscreen .mobile-menu-item .icon-compress { display: block; } .mobile-menu-item--fullscreen { display: none; } /* ── 07. Compiler body & panels ─────────────────────────────── */ .compiler-body { display: flex; flex: 1; overflow: hidden; min-height: 0; } /* Editor panel */ .editor-panel { display: flex; flex-direction: column; flex: 0 0 50%; min-width: 120px; overflow: hidden; background: var(--bg-editor); border-right: 1px solid var(--border-color); } /* ── 08. CodeMirror overrides ───────────────────────────────── */ .CodeMirror { flex: 1; /* height: 100% funziona solo se il genitore ha un'altezza esplicita. Poiché .editor-panel è un flex container, impostiamo height su auto e lasciamo che CodeMirror.setSize('100%','100%') gestisca il resto agendo sul wrapper .CodeMirror che è già in un flex container. */ height: 100% !important; font-family: var(--font-monospace); font-size: 13.5px; line-height: 1.65; background: var(--bg-editor) !important; color: var(--text-primary) !important; border: none !important; } /* Il wrapper generato da CodeMirror deve espandersi nel flex */ .CodeMirror-wrap, .editor-panel > .CodeMirror { flex: 1; height: 100% !important; min-height: 0; } .CodeMirror-scroll { height: 100%; } .CodeMirror-lines { padding-top: 4px; } .CodeMirror-gutters { background: var(--bg-editor) !important; border-right: 1px solid var(--border-subtle) !important; } .CodeMirror-linenumber { color: var(--text-muted) !important; padding: 0 10px !important; } .CodeMirror-activeline-background { background: rgba(16, 111, 222, 0.05) !important; } /* Hint / autocomplete dropdown */ .CodeMirror-hints { background: var(--bg-surface) !important; border: 1px solid var(--border-color) !important; border-radius: var(--radius-md) !important; font-family: var(--font-monospace) !important; font-size: 13px !important; box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important; z-index: 9999 !important; } .CodeMirror-hint { color: var(--text-primary) !important; padding: 4px 12px !important; } li.CodeMirror-hint-active { background: var(--mainblue) !important; color: #fff !important; } /* ── 09. Resize handle ──────────────────────────────────────── */ .resize-handle { width: 6px; background: var(--bg-resize); cursor: col-resize; flex-shrink: 0; display: flex; align-items: center; justify-content: center; position: relative; user-select: none; transition: background var(--transition-fast); z-index: 10; } .resize-handle:hover, .resize-handle.dragging { background: var(--darkblue); } .resize-dots { display: flex; flex-direction: column; gap: 3px; pointer-events: none; } .resize-dots::before, .resize-dots::after, .resize-dots { content: ''; } .resize-handle .resize-dots::before { content: ''; display: block; width: 2px; height: 24px; background: var(--text-muted); border-radius: 2px; opacity: 0.5; } /* ── 10. Preview panel ──────────────────────────────────────── */ .preview-panel { flex: 1; display: flex; flex-direction: column; min-width: 100px; overflow: hidden; background: var(--bg-preview); position: relative; } .preview-header { display: flex; align-items: center; gap: 10px; height: var(--preview-header-h); padding: 0 14px; background: var(--bg-toolbar); border-bottom: 1px solid var(--border-color); flex-shrink: 0; } .preview-label { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; } .preview-console-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; height: 28px; border-radius: 0; color: var(--text-secondary); font-size: 12px; font-weight: 600; transition: background var(--transition-fast), color var(--transition-fast); position: absolute; left: 0; bottom: 0; z-index: 12; background: var(--bg-toolbar); border-top: 1px solid var(--border-color); border-right: 1px solid var(--border-color); } .preview-console-toggle:hover { background: var(--bg-tab-hover); color: var(--text-primary); } .preview-console-caret { display: inline-block; font-size: 11px; line-height: 1; } .preview-console-toggle[aria-expanded='true'] .preview-console-caret { transform: rotate(180deg); } .preview-console-badge { display: none; min-width: 16px; height: 16px; padding: 0 5px; border-radius: 999px; align-items: center; justify-content: center; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; line-height: 1; } .preview-console-badge.visible { display: inline-flex; } #previewFrame { width: 100%; height: 100%; border: none; display: block; background: #fff; } .preview-frame-wrap { flex: 1; min-height: 0; position: relative; overflow: hidden; } .preview-frame-wrap #previewFrame { width: 100%; height: 100%; display: block; } .preview-console { display: none; height: 120px; border-top: 1px solid var(--border-color); background: var(--bg-surface); overflow: hidden; } .preview-panel.console-open .preview-console { display: block; } .preview-console-list { height: 100%; overflow: auto; padding: 8px 14px; font-family: var(--font-monospace); font-size: 12px; line-height: 1.5; } .preview-console-line { padding: 4px 0; border-bottom: 1px solid var(--border-subtle); color: var(--text-primary); white-space: pre-wrap; word-break: break-word; } .preview-console-line--error { color: var(--danger); } .preview-console-line--warn { color: #b45309; } .preview-console-empty { color: var(--text-muted); padding: 8px 0; } .preview-console-table-block { padding: 8px 0; border-bottom: 1px solid var(--border-subtle); } .preview-console-table-title { color: var(--text-muted); font-size: 11px; font-weight: 600; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.04em; } .preview-console-table-wrap { width: fit-content; min-width: 50%; max-width: 100%; overflow: auto; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); } .preview-console-table { width: max-content; min-width: 100%; border-collapse: collapse; table-layout: fixed; } .preview-console-table th, .preview-console-table td { padding: 6px 8px; border-bottom: 1px solid var(--border-subtle); text-align: left; white-space: nowrap; overflow: hidden; } .preview-console-cell-text { display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .preview-console-table th { font-weight: 700; color: var(--text-primary); background: var(--bg-tab-hover); } .preview-console-table td { color: var(--text-secondary); } /* ── 11. Dark mode ──────────────────────────────────────────── */ .dark-mode { --bg-app: #0d1117; --bg-surface: #161b22; --bg-toolbar: #161b22; --bg-editor: #0d1117; --bg-preview: #161b22; --bg-tab-active: #1a2332; --bg-tab-hover: #1f2937; --bg-resize: #1f2937; --text-primary: #e6edf3; --text-secondary: #8b949e; --text-muted: #ada9a3; --text-tab-active: #58a6ff; --border-color: #21262d; --border-subtle: #1a1f27; --accent: #58a6ff; --accent-dark: #79b8ff; --danger: #f87171; } /* CodeMirror dark mode — usa il tema one-dark, qui si correggono i token */ .dark-mode .CodeMirror { background: var(--bg-editor) !important; color: #e6edf3 !important; } .dark-mode .CodeMirror-gutters { background: var(--bg-editor) !important; border-right-color: var(--border-subtle) !important; } .dark-mode .CodeMirror-activeline-background { background: rgba(88, 166, 255, 0.06) !important; } .dark-mode .CodeMirror-hints { background: #1c2128 !important; border-color: var(--border-color) !important; } .dark-mode .CodeMirror-hint { color: #e6edf3 !important; } .dark-mode .preview-console-line--warn { color: #f59e0b; } .dark-mode .preview-console-table th { background: #1f2937; } .dark-mode .preview-console-table td { color: #c9d1d9; } .dark-mode li.CodeMirror-hint-active { background: #1f6feb !important; } /* ── 13. Fullscreen mode ────────────────────────────────────── */ .compiler-wrapper.is-fullscreen { position: fixed; inset: 0; height: 100vh; z-index: 99990; margin-top: 0; } /* overflow hidden on body when fullscreen is active */ body.compiler-fullscreen-lock { overflow: hidden; } /* ── 14. Responsive / mobile ────────────────────────────────── */ @media (max-width: 768px) { .compiler-wrapper { height: calc(100vh - 60px); } /* Stack editor and preview vertically */ .compiler-body { flex-direction: column; } .editor-panel { flex: 0 0 50%; min-width: unset; border-right: none; border-bottom: 1px solid var(--border-color); /* Fix per calcolo altezza su mobile */ position: relative; overflow: hidden; } /* Resize disabilitato su mobile */ .resize-handle { display: none; } .preview-panel { flex: 1; } .tab-btn { padding: 0 12px; font-size: 12px; } .action-btn--desktop-only { display: none; } .action-btn--desktop-medium { display: inline-flex; } .mobile-menu-item--theme { display: flex; } .compiler-wrapper.is-fullscreen { height: 100dvh; } } @media (max-width: 480px) { .action-btn--icon { width: 30px; height: 30px; } .action-btn--icon svg { width: 16px; height: 16px; } .action-btn--desktop-medium { display: none; } .mobile-menu-item--fullscreen { display: flex; } } /* ── 15. SEO section ────────────────────────────────────────── */ .seo-section { background: var(--bg-surface); border-top: 1px solid var(--border-color); padding: 64px 0; } .seo-container { max-width: 860px; margin: 0 auto; padding: 0 24px; color: var(--text-secondary); line-height: 1.8; } .seo-container h1 { font-size: 24px; color: var(--text-primary); font-weight: 700; margin: 0 0 16px 0; line-height: 1.3; } .seo-container h2 { font-size: 19px; color: var(--text-primary); font-weight: 600; margin: 36px 0 10px; } .seo-container p { font-size: 15px; margin-bottom: 14px; } .seo-container p > code, .seo-container li > code { font-family: var(--font-monospace); font-size: 0.88em; background: var(--lightblue); color: var(--darkmainblue); padding: 2px 6px; border-radius: var(--radius-sm); } .dark-mode .seo-container p > code, .dark-mode .seo-container li > code { background: #1a2332; color: var(--accent); } .seo-container pre > code { display: block; padding: 12px; background: var(--lightgrey); color: var(--text-primary); font-family: var(--font-monospace); font-size: 13px; border-radius: var(--radius-md); overflow: auto; } .dark-mode .seo-container pre > code { background: var(--bg-editor); color: var(--text-primary); } .dark-mode .seo-section { background: var(--bg-surface); } .seo-container a { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color var(--transition-fast); } /* ── 16. SQL compiler layout ───────────────────────────────── */ .sql-compiler { display: flex; flex-direction: column; } .sql-compiler .compiler-body { flex: 1; min-height: 0; } .sql-schema-panel { display: flex; flex-direction: column; } .sql-tables-list { flex: 1; min-height: 0; overflow: auto; padding: 10px; font-family: var(--font-monospace); font-size: 12px; } .sql-table-item { padding: 8px 10px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); color: var(--text-primary); background: var(--bg-surface); } .sql-table-item + .sql-table-item { margin-top: 8px; } .sql-table-card { border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--bg-surface); overflow: hidden; } .sql-table-card + .sql-table-card { margin-top: 10px; } .sql-table-title { margin: 0; padding: 8px 10px; font-size: 12px; font-weight: 700; color: var(--text-primary); border-bottom: 1px solid var(--border-subtle); background: var(--bg-tab-hover); } .sql-table-data-wrap { width: 100%; overflow: auto; } .sql-table-data { width: 100%; border-collapse: collapse; min-width: 280px; font-family: var(--font-monospace); font-size: 12px; } .sql-table-data th, .sql-table-data td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--border-subtle); white-space: nowrap; } .sql-table-data th { color: var(--text-primary); font-weight: 600; } .sql-table-data td { color: var(--text-secondary); } .sql-table-empty, .sql-table-empty-cell { color: var(--text-muted); } .sql-table-empty { padding: 8px 10px; } .dark-mode .sql-table-title { background: #1f2937; } .sql-tables-empty { color: var(--text-muted); padding: 8px 0; } .sql-console-panel { border-top: 1px solid var(--border-color); background: var(--bg-surface); min-height: 170px; max-height: 36vh; display: flex; flex-direction: column; } .sql-console-header { height: 36px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; border-bottom: 1px solid var(--border-subtle); } .sql-console-panel .preview-console-toggle { position: static; height: 100%; border: 0; background: var(--bg-toolbar); } .sql-console-list { flex: 1; min-height: 0; } .sql-console-panel:not(.console-open) .sql-console-list { display: none; } @media (max-width: 768px) { .sql-console-panel { max-height: 45vh; } } /* ── 17. Only-console compiler layout ───────────────────────────────── */ /* ── Single-editor compiler (PHP, Node.js, etc.) ──────────── */ .single-editor-compiler { display: flex; flex-direction: column; } .single-editor-compiler .compiler-body { flex: 1; min-height: 0; } .editor-console-panel { display: flex; flex-direction: column; min-width: 320px; max-width: 50%; border-left: 1px solid var(--border-color); border-top: 0; } .editor-console-header { justify-content: space-between; } .editor-console-toggle { display: none; } .editor-console-list { display: block !important; flex: 1; min-height: 0; overflow: auto; } /* ── Console input field (for interactive programs) ──────────── */ .editor-console-input-container { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--border-color); background: var(--bg-secondary); } .editor-console-input-prompt { color: var(--text-secondary); font-size: 13px; font-family: var(--font-monospace); white-space: pre; } .editor-console-input { flex: 1; padding: 6px 10px; border: 1px solid var(--border-color); border-radius: 4px; background: var(--bg-primary); color: var(--text-primary); font-size: 13px; font-family: var(--font-monospace); outline: none; } .editor-console-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.2); } .editor-console-input::placeholder { color: var(--text-tertiary); } /* ── Console loading spinner (npm install, etc.) ──────────── */ .editor-console-loading { display: flex; align-items: center; gap: 8px; padding: 8px 12px; color: var(--text-secondary); font-size: 13px; font-family: var(--font-monospace); } .editor-console-spinner { width: 14px; height: 14px; border: 2px solid var(--border-color); border-top-color: var(--accent); border-radius: 50%; animation: editor-console-spin 0.8s linear infinite; } @keyframes editor-console-spin { to { transform: rotate(360deg); } } .editor-install-modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(10, 16, 28, 0.55); z-index: 100000; } .editor-install-modal.visible { display: flex; } .editor-install-modal .editor-install-card { width: min(520px, 100%); border-radius: var(--radius-lg); border: 1px solid var(--border-color); background: var(--bg-surface); box-shadow: var(--shadow); padding: 18px; } .editor-install-modal h2 { margin: 0 0 16px; color: var(--text-primary); font-size: 18px; } .editor-install-modal p { margin: 0 0 12px; color: var(--text-primary); font-size: 14px; line-height: 1.45; } .editor-install-modal .flex { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .editor-install-modal .editor-install-track { width: 100%; height: 10px; border-radius: 999px; background: var(--bg-tab-hover); border: 1px solid var(--border-subtle); overflow: hidden; } .editor-install-modal .editor-install-bar { width: 0; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-dark)); transition: width 360ms cubic-bezier(0.22, 0.61, 0.36, 1); } .editor-install-modal .editor-install-percent { color: var(--text-secondary); font-family: var(--font-monospace); font-size: 12px; text-align: right; } @media (max-width: 900px) { .editor-console-panel { max-width: none; min-width: 0; border-left: 0; border-top: 1px solid var(--border-color); } }