chrisryn/fiddle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix syntax coloring, modernize toolbar UI, and clean up CSS

Browse Source 
- Fix Monarch tokenizer loading: await initLinter() before editor creation
  so loadScript() doesn't clobber window.define during lazy tokenizer init
- Fix JSX/TSX coloring: use file URIs with proper extensions (.jsx/.tsx)
  so Monaco enables JSX tokenization via the TypeScript language service
- Modernize toolbar: move settings to gear popover, replace text buttons
  with SVG icons, consolidate toggle checkboxes into compact group
- Clean up CSS: remove duplicate toggle classes, dead selectors, orphaned rules
This commit is contained in:
root
2026-02-27 15:19:10 -06:00
parent 0d84c56008
commit 26e232fd41
4 changed files with 222 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
public/css/style.css
View File

@@ -147,9 +147,6 @@ body.resizing iframe { pointer-events: none; }
.tab-lang-javascript .tab-color-dot { background: #F7DF1E; }
.tab-lang-typescript .tab-color-dot { background: #3178C6; }
.tab-lang-markdown .tab-color-dot { background: #83B; }
.tab-lang-html .tab-btn-label, .tab-lang-css .tab-btn-label,
.tab-lang-javascript .tab-btn-label, .tab-lang-typescript .tab-btn-label,
.tab-lang-markdown .tab-btn-label { /* no extra style needed, just grouping */ }
/* Active tab border matches language color */
.tab-lang-html.active { border-bottom-color: #E44D26; }
@@ -219,51 +216,39 @@ body.resizing iframe { pointer-events: none; }
flex-shrink: 0;
}
/* Auto-run toggle */
.auto-run-toggle {
/* Toolbar toggles (shared) */
.toolbar-toggles {
display: flex;
align-items: center;
gap: 4px;
font-size: 12px;
gap: 2px;
}
.toolbar-toggle {
display: flex;
align-items: center;
gap: 3px;
font-size: 11px;
color: var(--text-dim);
cursor: pointer;
user-select: none;
padding: 3px 6px;
border-radius: 4px;
transition: background 0.15s, color 0.15s;
}
.auto-run-toggle input { cursor: pointer; }
/* Tailwind toggle */
.tailwind-toggle {
display: flex;
align-items: center;
gap: 4px;
font-size: 12px;
color: var(--text-dim);
cursor: pointer;
user-select: none;
.toolbar-toggle:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.toolbar-toggle:has(input:checked) { color: var(--accent); }
.toolbar-toggle input { display: none; }
.toolbar-toggle span { pointer-events: none; }
.toolbar-divider {
width: 1px;
height: 20px;
background: var(--border);
margin: 0 4px;
flex-shrink: 0;
}
.tailwind-toggle input { cursor: pointer; }
/* Dividers */
.divider { background: var(--border); transition: background 0.15s; z-index: 2; }
/* Layout/keybinding/preview-theme selects — match framework select */
#layout-mode, #keybinding-mode, #preview-theme, #editor-theme {
background: var(--bg); color: var(--text); border: 1px solid var(--border);
padding: 4px 6px; border-radius: 4px; font-size: 12px; cursor: pointer;
}
/* Listed toggle */
.listed-toggle {
display: flex;
align-items: center;
gap: 4px;
font-size: 12px;
color: var(--text-dim);
cursor: pointer;
user-select: none;
}
.listed-toggle input { cursor: pointer; }
/* Tags input */
.tags-input-wrap {
display: flex;
@@ -294,6 +279,58 @@ body.resizing iframe { pointer-events: none; }
}
.btn-secondary:hover { color: var(--text); background: var(--border); }
/* Icon buttons */
.btn-icon {
background: transparent;
color: var(--text-dim);
border: none;
padding: 5px 6px;
border-radius: 4px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s, color 0.15s;
}
.btn-icon:hover { color: var(--text); background: rgba(255,255,255,0.08); }
.btn-icon svg { display: block; }
/* Settings popover */
.settings-popover-wrap { position: relative; }
.settings-popover {
position: absolute;
top: calc(100% + 6px);
right: 0;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 12px 14px;
min-width: 220px;
z-index: 100;
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
display: flex;
flex-direction: column;
gap: 10px;
}
.settings-popover.hidden { display: none; }
.settings-group {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.settings-label {
font-size: 12px;
color: var(--text-dim);
white-space: nowrap;
font-weight: 500;
}
.settings-popover select {
background: var(--bg); color: var(--text); border: 1px solid var(--border);
padding: 3px 6px; border-radius: 4px; font-size: 11px; cursor: pointer;
min-width: 120px;
}
/* QR Modal */
.modal-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,0.7);
@@ -617,24 +654,6 @@ body.resizing iframe { pointer-events: none; }
.templates-grid { grid-template-columns: 1fr; }
}
/* ===================== Format Save Toggle ===================== */
.format-save-toggle {
display: flex;
align-items: center;
gap: 4px;
font-size: 12px;
color: var(--text-dim);
cursor: pointer;
user-select: none;
}
.format-save-toggle input { cursor: pointer; }
/* ===================== Editor Font Select ===================== */
#editor-font {
background: var(--bg); color: var(--text); border: 1px solid var(--border);
padding: 4px 6px; border-radius: 4px; font-size: 12px; cursor: pointer;
}
/* ===================== Version History Modal ===================== */
.history-modal-content { min-width: 500px; max-width: 700px; text-align: left; }
.history-list {