GameCult/repixelizer
Watch
9
0
Fork
You've already forked repixelizer
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Clean up GUI CSS structure

Browse source
This commit is contained in:
Meta Vens 2026-04-25 04:29:45 +01:00
commit b4311870f3
4 changed files with 155 additions and 201 deletions
Download patch file Download diff file Expand all files Collapse all files

18
frontend/src/app.ts
View file

@ -289,7 +289,7 @@ function renderEventLog(): void {
}
for (const entry of state.eventLog) {
const node = document.createElement("div");
node.className = "event-item";
node.className = "info-card event-item";
node.innerHTML = `<strong>${entry.label}</strong><span>${entry.detail}</span>`;
eventLog.appendChild(node);
}
@ -516,7 +516,7 @@ function renderStatusMetricItems(items: StatusMetricItem[]): void {
statusMetrics.style.setProperty("--status-metric-count", String(Math.max(items.length, 1)));
for (const { label, value } of items) {
const node = document.createElement("div");
node.className = "status-metric";
node.className = "info-card status-metric";
node.title = `${label}: ${value}`;
node.innerHTML = `<strong>${label}</strong><span>${value}</span>`;
statusMetrics.appendChild(node);
@ -537,15 +537,15 @@ function renderInference(): void {
return;
}
inferenceSummary.innerHTML = `
<div class="summary-card">
<div class="info-card summary-card">
<strong>Chosen Grid</strong>
<span>${state.inference.target_width} x ${state.inference.target_height}</span>
</div>
<div class="summary-card">
<div class="info-card summary-card">
<strong>Phase</strong>
<span>${formatNumber(state.inference.phase_x, 2)}, ${formatNumber(state.inference.phase_y, 2)}</span>
</div>
<div class="summary-card">
<div class="info-card summary-card">
<strong>Confidence</strong>
<span>${formatNumber(state.inference.confidence, 3)}</span>
</div>
@ -554,7 +554,7 @@ function renderInference(): void {
const topCandidates = state.inference.top_candidates.slice(0, 6);
for (const candidate of topCandidates) {
const node = document.createElement("div");
node.className = "candidate-card";
node.className = "info-card candidate-card";
const rerank = candidate.breakdown["phase_rerank_rank"];
node.innerHTML = `
<strong>${candidate.target_width} x ${candidate.target_height}</strong>
@ -662,7 +662,7 @@ function renderSummary(): void {
];
for (const [label, value] of entries) {
const card = document.createElement("div");
card.className = "summary-card";
card.className = "info-card summary-card";
card.innerHTML = `<strong>${label}</strong><span>${formatNumber(value, 3)}</span>`;
summaryPanel.appendChild(card);
}
@ -1024,11 +1024,11 @@ function renderEditor(): void {
}
editorMeta.innerHTML = `
<div class="summary-card">
<div class="info-card summary-card">
<strong>Canvas</strong>
<span>${offscreenCanvas.width} x ${offscreenCanvas.height}</span>
</div>
<div class="summary-card">
<div class="info-card summary-card">
<strong>State</strong>
<span>${state.editorDirty ? "Edited" : "Matches solver output"}</span>
</div>

18
src/repixelizer/gui_static/app.js
View file

@ -158,7 +158,7 @@ function renderEventLog() {
}
for (const entry of state.eventLog) {
const node = document.createElement("div");
node.className = "event-item";
node.className = "info-card event-item";
node.innerHTML = `<strong>${entry.label}</strong><span>${entry.detail}</span>`;
eventLog.appendChild(node);
}
@ -349,7 +349,7 @@ function renderStatusMetricItems(items) {
statusMetrics.style.setProperty("--status-metric-count", String(Math.max(items.length, 1)));
for (const { label, value } of items) {
const node = document.createElement("div");
node.className = "status-metric";
node.className = "info-card status-metric";
node.title = `${label}: ${value}`;
node.innerHTML = `<strong>${label}</strong><span>${value}</span>`;
statusMetrics.appendChild(node);
@ -368,15 +368,15 @@ function renderInference() {
return;
}
inferenceSummary.innerHTML = `
<div class="summary-card">
<div class="info-card summary-card">
<strong>Chosen Grid</strong>
<span>${state.inference.target_width} x ${state.inference.target_height}</span>
</div>
<div class="summary-card">
<div class="info-card summary-card">
<strong>Phase</strong>
<span>${formatNumber(state.inference.phase_x, 2)}, ${formatNumber(state.inference.phase_y, 2)}</span>
</div>
<div class="summary-card">
<div class="info-card summary-card">
<strong>Confidence</strong>
<span>${formatNumber(state.inference.confidence, 3)}</span>
</div>
@ -385,7 +385,7 @@ function renderInference() {
const topCandidates = state.inference.top_candidates.slice(0, 6);
for (const candidate of topCandidates) {
const node = document.createElement("div");
node.className = "candidate-card";
node.className = "info-card candidate-card";
const rerank = candidate.breakdown["phase_rerank_rank"];
node.innerHTML = `
<strong>${candidate.target_width} x ${candidate.target_height}</strong>
@ -492,7 +492,7 @@ function renderSummary() {
];
for (const [label, value] of entries) {
const card = document.createElement("div");
card.className = "summary-card";
card.className = "info-card summary-card";
card.innerHTML = `<strong>${label}</strong><span>${formatNumber(value, 3)}</span>`;
summaryPanel.appendChild(card);
}
@ -825,11 +825,11 @@ function renderEditor() {
}
}
editorMeta.innerHTML = `
<div class="summary-card">
<div class="info-card summary-card">
<strong>Canvas</strong>
<span>${offscreenCanvas.width} x ${offscreenCanvas.height}</span>
</div>
<div class="summary-card">
<div class="info-card summary-card">
<strong>State</strong>
<span>${state.editorDirty ? "Edited" : "Matches solver output"}</span>
</div>

116
src/repixelizer/gui_static/index.html
View file

@ -9,14 +9,14 @@
<body>
<div class="shell app-shell">
<div class="app-grid">
<main class="workspace page-content">
<header class="app-shell-header">
<main class="workspace">
<header class="app-shell-header ui-surface ui-frame">
<div class="brand">
<div class="brand-lockup">
<div class="brand-emblem" aria-hidden="true">
<span class="brand-emblem-core"></span>
</div>
<div class="copy-stack brand-copy">
<div class="copy-stack">
<p class="eyebrow">Live Pipeline</p>
<h1>Repixelizer</h1>
<p class="copy-tag brand-tag">Take fake pixel art, force it onto a real lattice, then inspect the crime scene frame by frame.</p>
@ -31,41 +31,41 @@
</div>
</header>
<section class="hero viewer-panel">
<section class="hero panel-stack ui-surface ui-frame">
<div class="card-head viewer-head">
<div class="copy-stack card-copy viewer-heading">
<div class="copy-stack">
<h2 id="viewerTitle">Pipeline Stages</h2>
</div>
</div>
<div id="metricsPanel" class="metrics-panel">
<div id="statusPanel" class="metric-chip metric-status-block" data-job-state="idle">
<div id="statusPanel" class="status-panel ui-surface ui-frame" data-job-state="idle">
<div class="status-heading">
<span id="statusBadge" class="status-badge">Idle</span>
<p id="statusStage" class="status-stage">Waiting for input</p>
</div>
<p id="statusText" class="status-text metrics-status-text">Choose a file, then run the machine.</p>
<p id="statusText" class="status-text">Choose a file, then run the machine.</p>
<div class="status-activity" aria-hidden="true">
<span class="status-activity-bar"></span>
</div>
<div id="statusMetrics" class="status-metrics"></div>
</div>
</div>
<canvas id="lossCanvas" class="loss-canvas" width="800" height="148" hidden></canvas>
<div class="viewer-grid viewer-grid-dual">
<figure class="viz-card">
<canvas id="lossCanvas" class="loss-canvas ui-surface" width="800" height="148" hidden></canvas>
<div class="viewer-grid">
<figure class="viz-card ui-surface ui-frame">
<div class="viz-label" id="leftVizLabel">Input</div>
<canvas id="leftCanvas"></canvas>
</figure>
<figure class="viz-card">
<figure class="viz-card ui-surface ui-frame">
<div class="viz-label" id="rightVizLabel">Output</div>
<canvas id="rightCanvas"></canvas>
</figure>
</div>
<div class="viewer-inspect-row">
<div class="viewer-inspect-row ui-surface ui-frame">
<span class="viz-label viewer-inspect-label">Zoom</span>
<p class="viewer-inspect-copy">Hold left mouse in either preview to inspect both panels together. Drag while holding to pan around. Release to drop back to fit view.</p>
<label class="field viewer-inspect-field">
<select id="inspectZoomInput">
<select id="inspectZoomInput" class="field-control">
<option value="1">Native source</option>
<option value="2">2x</option>
<option value="4">4x</option>
@ -75,9 +75,9 @@
</div>
</section>
<section class="card editor-panel">
<div class="card-head editor-head">
<div class="copy-stack card-copy">
<section class="card panel-stack ui-surface ui-frame">
<div class="card-head">
<div class="copy-stack">
<p class="eyebrow">Pixel Fixes</p>
<h2>Output Editor</h2>
<p class="copy-tag">Pencil the stragglers. Wheel zooms to cursor, middle mouse pans, Alt steals color.</p>
@ -88,41 +88,41 @@
</div>
</div>
<div class="editor-toolbar">
<div class="paint-block">
<div class="editor-toolbar ui-surface ui-frame">
<div class="editor-paint-controls">
<div id="paintSwatch" class="paint-swatch"></div>
<div class="rgba-inputs">
<div class="editor-rgba-fields">
<label class="field">
<span>R</span>
<input id="paintR" type="number" min="0" max="255" value="255" />
<span class="field-label">R</span>
<input id="paintR" class="field-control" type="number" min="0" max="255" value="255" />
</label>
<label class="field">
<span>G</span>
<input id="paintG" type="number" min="0" max="255" value="255" />
<span class="field-label">G</span>
<input id="paintG" class="field-control" type="number" min="0" max="255" value="255" />
</label>
<label class="field">
<span>B</span>
<input id="paintB" type="number" min="0" max="255" value="255" />
<span class="field-label">B</span>
<input id="paintB" class="field-control" type="number" min="0" max="255" value="255" />
</label>
<label class="field">
<span>A</span>
<input id="paintA" type="number" min="0" max="255" value="255" />
<span class="field-label">A</span>
<input id="paintA" class="field-control" type="number" min="0" max="255" value="255" />
</label>
</div>
</div>
<div class="zoom-block field">
<label for="zoomInput">Zoom</label>
<div class="editor-zoom-control field">
<label for="zoomInput" class="field-label">Zoom</label>
<input id="zoomInput" type="range" min="4" max="32" step="1" value="12" />
<span id="zoomValue">12x</span>
</div>
<label class="toggle-row compact">
<label class="toggle-row ui-surface ui-frame">
<input id="gridToggle" type="checkbox" checked />
<span>Grid</span>
</label>
</div>
<div class="editor-stage">
<div class="checkerboard editor-surface" id="editorSurface">
<div class="checkerboard editor-surface ui-surface ui-frame" id="editorSurface">
<canvas id="editorCanvas"></canvas>
<canvas id="editorGridCanvas"></canvas>
</div>
@ -137,24 +137,24 @@
</main>
<aside class="sidebar">
<section class="card section-block">
<section class="card sidebar-section ui-surface ui-frame">
<div class="card-head">
<div class="copy-stack card-copy">
<div class="copy-stack">
<h2>Input</h2>
<p class="copy-tag">Start with the ugly input.</p>
</div>
<button id="pickFileButton" class="button button-small button-secondary" type="button">Choose File</button>
</div>
<input id="fileInput" type="file" accept="image/png,image/*" hidden />
<button id="dropzone" class="dropzone" type="button">
<button id="dropzone" class="dropzone ui-surface ui-frame" type="button">
<strong>Drop image</strong>
<span id="dropzoneLabel">PNG, sprite scrap, cursed logo. Whatever started this.</span>
</button>
</section>
<section class="card section-block">
<section class="card sidebar-section ui-surface ui-frame">
<div class="card-head">
<div class="copy-stack card-copy">
<div class="copy-stack">
<h2>Run Controls</h2>
<p class="copy-tag">Pin what you know. Search what you do not.</p>
</div>
@ -162,7 +162,7 @@
<form id="controlsForm" class="controls-grid">
<label class="field">
<span class="field-heading">
<span>Device</span>
<span class="field-label">Device</span>
<span
class="help-tip"
tabindex="0"
@ -172,7 +172,7 @@
>?</span
>
</span>
<select id="deviceInput" name="device">
<select id="deviceInput" class="field-control" name="device">
<option value="auto" selected>auto</option>
<option value="cpu">cpu</option>
<option value="cuda">cuda</option>
@ -180,7 +180,7 @@
</label>
<label class="field">
<span class="field-heading">
<span>Target Size</span>
<span class="field-label">Target Size</span>
<span
class="help-tip"
tabindex="0"
@ -190,11 +190,11 @@
>?</span
>
</span>
<input id="targetSizeInput" name="targetSize" type="number" min="1" placeholder="auto" />
<input id="targetSizeInput" class="field-control" name="targetSize" type="number" min="1" placeholder="auto" />
</label>
<label class="field">
<span class="field-heading">
<span>Target Width</span>
<span class="field-label">Target Width</span>
<span
class="help-tip"
tabindex="0"
@ -204,11 +204,11 @@
>?</span
>
</span>
<input id="targetWidthInput" name="targetWidth" type="number" min="1" placeholder="auto" />
<input id="targetWidthInput" class="field-control" name="targetWidth" type="number" min="1" placeholder="auto" />
</label>
<label class="field">
<span class="field-heading">
<span>Target Height</span>
<span class="field-label">Target Height</span>
<span
class="help-tip"
tabindex="0"
@ -218,11 +218,11 @@
>?</span
>
</span>
<input id="targetHeightInput" name="targetHeight" type="number" min="1" placeholder="auto" />
<input id="targetHeightInput" class="field-control" name="targetHeight" type="number" min="1" placeholder="auto" />
</label>
<label class="field">
<span class="field-heading">
<span>Phase X</span>
<span class="field-label">Phase X</span>
<span
class="help-tip"
tabindex="0"
@ -232,11 +232,11 @@
>?</span
>
</span>
<input id="phaseXInput" name="phaseX" type="number" step="0.05" placeholder="search" />
<input id="phaseXInput" class="field-control" name="phaseX" type="number" step="0.05" placeholder="search" />
</label>
<label class="field">
<span class="field-heading">
<span>Phase Y</span>
<span class="field-label">Phase Y</span>
<span
class="help-tip"
tabindex="0"
@ -246,11 +246,11 @@
>?</span
>
</span>
<input id="phaseYInput" name="phaseY" type="number" step="0.05" placeholder="search" />
<input id="phaseYInput" class="field-control" name="phaseY" type="number" step="0.05" placeholder="search" />
</label>
<label class="field">
<span class="field-heading">
<span>Steps</span>
<span class="field-label">Steps</span>
<span
class="help-tip"
tabindex="0"
@ -260,11 +260,11 @@
>?</span
>
</span>
<input id="stepsInput" name="steps" type="number" min="0" value="48" />
<input id="stepsInput" class="field-control" name="steps" type="number" min="0" value="48" />
</label>
<label class="field">
<span class="field-heading">
<span>Seed</span>
<span class="field-label">Seed</span>
<span
class="help-tip"
tabindex="0"
@ -274,9 +274,9 @@
>?</span
>
</span>
<input id="seedInput" name="seed" type="number" min="0" value="7" />
<input id="seedInput" class="field-control" name="seed" type="number" min="0" value="7" />
</label>
<label class="toggle-row">
<label class="toggle-row ui-surface ui-frame">
<input id="stripBackgroundInput" name="stripBackground" type="checkbox" />
<span class="toggle-copy">
<span>Strip checkerboard-ish junk</span>
@ -290,7 +290,7 @@
>
</span>
</label>
<label class="toggle-row">
<label class="toggle-row ui-surface ui-frame">
<input id="skipRerankInput" name="skipRerank" type="checkbox" />
<span class="toggle-copy">
<span>Skip low-confidence phase rerank</span>
@ -308,9 +308,9 @@
<button id="runButton" class="button" type="button">Run The Machine</button>
</section>
<section class="card section-block">
<section class="card sidebar-section ui-surface ui-frame">
<div class="card-head">
<div class="copy-stack card-copy">
<div class="copy-stack">
<h2>Inference</h2>
<p class="copy-tag">The ruler and where it landed.</p>
</div>
@ -321,9 +321,9 @@
<div id="candidateList" class="candidate-list"></div>
</section>
<section class="card section-block">
<section class="card sidebar-section ui-surface ui-frame">
<div class="card-head">
<div class="copy-stack card-copy">
<div class="copy-stack">
<h2>Run Notes</h2>
<p class="copy-tag">A small log of what the machine thinks it is doing.</p>
</div>

204
src/repixelizer/gui_static/styles.css
View file

@ -190,8 +190,7 @@ p {
.app-shell,
.sidebar,
.workspace,
.page-content,
.section-block,
.sidebar-section,
.editor-meta,
.summary-panel,
.candidate-list,
@ -201,17 +200,23 @@ p {
gap: 10px;
}
.panel-stack {
display: grid;
gap: 12px;
}
.sidebar,
.section-block,
.sidebar-section,
.summary-panel,
.candidate-list,
.event-log,
.info-stack {
.info-stack,
.panel-stack {
min-width: 0;
}
:is(.hero, .card, .metric-chip, .summary-card, .app-shell-header, .viz-card, .loss-canvas, .editor-toolbar, .editor-surface, .dropzone, .viewer-inspect-row, .field input, .field select, .button, .toggle-row) {
position: relative;
.ui-surface,
.field-control {
overflow: hidden;
border: 4px solid var(--ui-panel-border);
border-bottom-width: 5px;
@ -224,7 +229,11 @@ p {
0 8px 0 var(--ui-shadow);
}
:is(.hero, .card, .metric-chip, .summary-card, .app-shell-header, .viz-card, .loss-canvas, .editor-toolbar, .editor-surface, .dropzone, .viewer-inspect-row, .field input, .field select, .toggle-row)::before,
.ui-frame {
position: relative;
}
.ui-frame::before,
.button::before {
content: "";
position: absolute;
@ -233,7 +242,7 @@ p {
border: 1px dotted rgba(148, 109, 38, 0.22);
}
:is(.hero, .card, .metric-chip, .summary-card, .app-shell-header, .viz-card, .loss-canvas, .editor-toolbar, .editor-surface, .dropzone, .viewer-inspect-row, .field input, .field select, .toggle-row)::after {
.ui-frame::after {
content: "";
position: absolute;
inset: 0;
@ -250,6 +259,11 @@ p {
linear-gradient(to top, var(--ui-corner-accent) 0 3px, transparent 3px 12px) right bottom / 4px 12px no-repeat;
}
.ui-frame > * {
position: relative;
z-index: 1;
}
.app-shell-header,
.hero,
.card {
@ -274,12 +288,15 @@ p {
.brand,
.brand-lockup,
.copy-stack,
.viewer-heading,
.header-instructions {
display: grid;
gap: 10px;
}
.copy-stack {
min-width: 0;
}
.brand {
min-height: 100%;
align-items: center;
@ -366,32 +383,6 @@ p {
color: var(--ui-text);
}
.candidate-card,
.event-item,
.metric-chip,
.summary-card {
padding: 10px;
}
.candidate-card strong,
.event-item strong,
.metric-chip strong,
.summary-card strong {
font-family: "Press Start 2P", "VT323", monospace;
letter-spacing: 0.06em;
}
.hero > *,
.card > *,
.metric-chip > *,
.summary-card > *,
.candidate-card > *,
.event-item > *,
.app-shell-header > * {
position: relative;
z-index: 1;
}
.status-badge {
display: inline-flex;
align-items: center;
@ -468,8 +459,7 @@ p {
gap: 7px;
}
.field > span,
.zoom-block label {
.field-label {
font-size: 0.84rem;
line-height: 1;
text-transform: uppercase;
@ -505,8 +495,7 @@ p {
outline-offset: 2px;
}
.field input,
.field select {
.field-control {
width: 100%;
box-sizing: border-box;
min-height: 42px;
@ -519,18 +508,18 @@ p {
background: linear-gradient(180deg, #0d2944, #07182b);
}
.field select {
select.field-control {
color: var(--ui-text-bright);
color-scheme: dark;
}
.field select option,
.field select optgroup {
select.field-control option,
select.field-control optgroup {
color: var(--ui-text-bright);
background: #07182b;
}
.field input::placeholder {
.field-control::placeholder {
color: rgba(211, 187, 127, 0.76);
}
@ -603,17 +592,6 @@ p {
0 4px 0 rgba(0, 0, 0, 0.28);
}
.viewer-panel,
.editor-panel {
display: grid;
gap: 12px;
}
.viewer-head,
.editor-head {
align-items: flex-start;
}
.viewer-head {
display: flex;
justify-content: space-between;
@ -621,15 +599,6 @@ p {
gap: 12px;
}
.viewer-heading {
min-width: 0;
align-content: start;
}
.metrics-status-text {
max-width: none;
}
.status-heading {
display: flex;
flex-wrap: wrap;
@ -738,7 +707,7 @@ p {
gap: 10px;
}
.metric-status-block {
.status-panel {
display: grid;
gap: 14px;
align-content: start;
@ -769,20 +738,20 @@ p {
animation-play-state: paused;
}
#statusPanel[data-job-state="queued"] .status-activity-bar,
#statusPanel[data-job-state="running"] .status-activity-bar,
#statusPanel[data-job-state="waiting"] .status-activity-bar {
.status-panel[data-job-state="queued"] .status-activity-bar,
.status-panel[data-job-state="running"] .status-activity-bar,
.status-panel[data-job-state="waiting"] .status-activity-bar {
animation-play-state: running;
}
#statusPanel[data-job-state="failed"] .status-activity-bar {
.status-panel[data-job-state="failed"] .status-activity-bar {
animation-play-state: paused;
transform: translateX(0);
width: 100%;
background: linear-gradient(90deg, rgba(210, 78, 62, 0.75), rgba(255, 137, 95, 0.88));
}
#statusPanel[data-job-state="completed"] .status-activity-bar {
.status-panel[data-job-state="completed"] .status-activity-bar {
animation-play-state: paused;
transform: translateX(0);
width: 100%;
@ -800,32 +769,54 @@ p {
scrollbar-width: thin;
}
.status-metric {
.info-card {
min-width: 0;
width: 100%;
min-height: 72px;
box-sizing: border-box;
padding: 10px;
border: 3px solid rgba(8, 36, 62, 0.88);
background: linear-gradient(180deg, rgba(11, 32, 52, 0.96), rgba(6, 19, 35, 0.94));
box-shadow:
inset 0 0 0 1px rgba(255, 216, 74, 0.22),
0 0 14px rgba(255, 216, 74, 0.08);
}
.info-card strong {
display: block;
margin-bottom: 5px;
color: var(--ui-accent);
font-family: "Press Start 2P", "VT323", monospace;
font-size: 0.72rem;
letter-spacing: 0.06em;
text-transform: uppercase;
overflow-wrap: anywhere;
word-break: break-word;
}
.info-card span {
display: block;
min-width: 0;
overflow-wrap: anywhere;
word-break: break-word;
}
.status-metric {
min-height: 72px;
padding: 8px 10px;
border: 2px solid rgba(8, 36, 62, 0.88);
background: linear-gradient(180deg, rgba(9, 27, 44, 0.96), rgba(5, 16, 28, 0.95));
display: grid;
grid-template-rows: auto minmax(0, 1fr);
align-content: start;
}
.status-metric strong {
display: block;
margin-bottom: 4px;
font-size: 0.58rem;
color: var(--ui-accent);
text-transform: uppercase;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.status-metric span {
display: block;
font-size: 1rem;
line-height: 1.12;
color: var(--ui-text);
@ -845,43 +836,6 @@ p {
}
}
.candidate-card,
.event-item,
.metric-chip,
.summary-card {
min-width: 0;
width: 100%;
box-sizing: border-box;
border: 3px solid rgba(8, 36, 62, 0.88);
background:
linear-gradient(180deg, rgba(11, 32, 52, 0.96), rgba(6, 19, 35, 0.94));
box-shadow:
inset 0 0 0 1px rgba(255, 216, 74, 0.22),
0 0 14px rgba(255, 216, 74, 0.08);
}
.candidate-card strong,
.event-item strong,
.metric-chip strong,
.summary-card strong {
display: block;
margin-bottom: 5px;
font-size: 0.72rem;
color: var(--ui-accent);
text-transform: uppercase;
overflow-wrap: anywhere;
word-break: break-word;
}
.candidate-card span,
.event-item span,
.summary-card span {
display: block;
min-width: 0;
overflow-wrap: anywhere;
word-break: break-word;
}
.editor-actions {
display: flex;
align-items: center;
@ -899,7 +853,7 @@ p {
background: linear-gradient(180deg, #0b233b, #061321);
}
.paint-block {
.editor-paint-controls {
display: flex;
align-items: center;
gap: 12px;
@ -915,28 +869,28 @@ p {
0 0 16px rgba(255, 216, 74, 0.08);
}
.rgba-inputs {
.editor-rgba-fields {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.rgba-inputs .field {
.editor-rgba-fields .field {
min-width: 82px;
}
.rgba-inputs input {
.editor-rgba-fields .field-control {
min-height: 38px;
padding: 6px 8px;
}
.zoom-block {
.editor-zoom-control {
min-width: 0;
width: min(100%, 180px);
overflow: hidden;
}
.zoom-block input[type="range"] {
.editor-zoom-control input[type="range"] {
-webkit-appearance: none;
appearance: none;
display: block;
@ -953,14 +907,14 @@ p {
box-shadow: none;
}
.zoom-block input[type="range"]::-webkit-slider-runnable-track {
.editor-zoom-control input[type="range"]::-webkit-slider-runnable-track {
height: 8px;
border: 2px solid rgba(255, 216, 74, 0.48);
background: linear-gradient(180deg, rgba(9, 27, 44, 0.98), rgba(5, 16, 28, 0.96));
box-shadow: inset 0 0 0 1px rgba(8, 36, 62, 0.9);
}
.zoom-block input[type="range"]::-webkit-slider-thumb {
.editor-zoom-control input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 14px;
@ -971,14 +925,14 @@ p {
box-shadow: 0 0 10px rgba(255, 216, 74, 0.32);
}
.zoom-block input[type="range"]::-moz-range-track {
.editor-zoom-control input[type="range"]::-moz-range-track {
height: 8px;
border: 2px solid rgba(255, 216, 74, 0.48);
background: linear-gradient(180deg, rgba(9, 27, 44, 0.98), rgba(5, 16, 28, 0.96));
box-shadow: inset 0 0 0 1px rgba(8, 36, 62, 0.9);
}
.zoom-block input[type="range"]::-moz-range-thumb {
.editor-zoom-control input[type="range"]::-moz-range-thumb {
width: 14px;
height: 14px;
border: 2px solid rgba(255, 216, 74, 0.86);
@ -986,7 +940,7 @@ p {
box-shadow: 0 0 10px rgba(255, 216, 74, 0.32);
}
.zoom-block input[type="range"]::-moz-focus-outer {
.editor-zoom-control input[type="range"]::-moz-focus-outer {
border: 0;
}