Michel2/image2cpp
1
0
Fork 0
mirror of https://github.com/javl/image2cpp.git synced 2026-09-11 09:03:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

layout tweaks

Browse Source
This commit is contained in:
javl
2026-08-18 09:26:39 +02:00
parent 1845f4ea81
commit d21cc62c34
3 changed files with 99 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/style.css
+53 -38
View File
@@ -39,6 +39,7 @@
/* Fonts */
--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--font-size: 14px;
}
* {
@@ -49,7 +50,7 @@
body {
font-family: var(--font-body);
font-size: 16px;
font-size: var(--font-size);
line-height: 24px;
color: var(--on-background);
background-color: var(--background);
@@ -67,7 +68,7 @@ body {
}
.topnav-inner {
max-width: 1400px;
max-width: 1200px;
margin: auto;
height: 64px;
padding: 0 var(--space-6);
@@ -96,7 +97,7 @@ body {
.topnav-links a {
color: var(--secondary);
font-weight: 500;
font-size: 14px;
font-size: var(--font-size);
text-decoration: underline;
}
@@ -142,7 +143,7 @@ body {
.layout {
display: flex;
gap: var(--space-7);
max-width: 1400px;
max-width: 1200px;
margin: auto;
padding: var(--space-7) var(--space-6) var(--space-9);
align-items: flex-start;
@@ -353,6 +354,7 @@ code {
.table-row {
display: table-row;
width: 100%;
border-bottom: 1px solid var(--border-subtle);
}
.table-cell {
@@ -370,66 +372,71 @@ code {
width: 70%;
}
.table-cell:first-child label {
.table-cell:first-child > label {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 500;
/* font-weight: 500; */
color: var(--primary);
}
.table-cell:last-child label {
.table-cell:last-child > label {
margin-right: var(--space-2);
color: var(--on-surface-variant);
font-size: 14px;
font-size: var(--font-size);
}
.nested-table {
margin: 0;
}
/* ---- Settings grid (step 2) ----
2-column min-width forces a predictable 2-up (or 1-up) grid instead of
auto-fitting 3 columns, which paired short/tall fields at random and
left ragged whitespace between rows. */
/* ---- Settings rows (step 2) ----
Single-column label-left / value-right rows, hairline-divided. Denser
than the old 2-up grid, and keeps each setting's note attached under
its label instead of floating below the control in the value column. */
.settings-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: var(--space-6) var(--space-7);
}
.settings-grid.table {
display: block;
margin: var(--space-2) 0 0;
}
.settings-grid .table-row {
display: flex;
flex-direction: column;
gap: var(--space-2);
align-items: flex-start;
gap: var(--space-6);
padding: var(--space-1) 0;
border-top: 1px solid var(--border-subtle);
}
.settings-grid .table-row.full-row {
grid-column: 1 / -1;
.settings-grid .table-row:first-child {
border-top: none;
padding-top: 0;
}
.settings-grid .table-cell {
display: block;
padding: 0;
}
.settings-grid .table-cell:first-child {
width: auto;
padding-right: 0;
width: 34%;
flex-shrink: 0;
}
.settings-grid .table-cell:last-child {
width: auto;
flex: 1;
min-width: 0;
}
.settings-grid .table-cell:first-child .note {
font-size: 13px;
line-height: 1.45em;
margin: var(--space-1) 0 0;
}
.nested-table .table-cell {
color: var(--text-muted);
font-size: 0.9em;
width: 200px;
/* width: 200px; */
}
#format-caption-container {
@@ -442,14 +449,14 @@ code {
/* Reserve space for the tallest combination (Adafruit GFX shows both its
own fields and the Arduino identifier fields) so the Generate/Copy/
Download buttons don't jump around when switching output format. */
min-height: 278px;
/* min-height: 278px; */
transition: min-height 0.15s ease;
}
#format-caption-container div {
color: var(--text-muted);
display: none;
font-size: 14px;
font-size: var(--font-size);
line-height: 1.5em;
padding: var(--space-2) 0 var(--space-4);
width: 100%;
@@ -459,7 +466,7 @@ code {
.note {
color: var(--text-muted);
font-size: 14px;
font-size: var(--font-size);
line-height: 1.5em;
margin: var(--space-1) 0;
}
@@ -468,9 +475,9 @@ code {
display: none;
}
.upload-note {
/* .upload-note {
max-width: 320px;
}
} */
#continue-note {
display: none;
@@ -494,7 +501,7 @@ input[type="number"],
textarea,
select {
font-family: var(--font-body);
font-size: 14px;
font-size: var(--font-size);
color: var(--on-surface-variant);
background: var(--surface-container);
border: 1px solid transparent;
@@ -530,13 +537,13 @@ input[type="radio"] {
min-width: 360px;
width: 100%;
font-family: var(--font-mono);
font-size: 14px;
font-size: var(--font-size);
line-height: 22px;
resize: vertical;
}
#text-input-error {
color: var(--error);
font-size: 14px;
font-size: var(--font-size);
margin-top: var(--space-2);
display: none;
}
@@ -558,7 +565,7 @@ input[type="radio"] {
.text-input-size {
margin: var(--space-2) 0;
color: var(--on-surface-variant);
font-size: 14px;
font-size: var(--font-size);
}
.size-input {
@@ -577,7 +584,10 @@ input[type="radio"] {
}
.sub-field-label {
min-width: 160px;
min-width: 200px;
font-family: var(--font-mono);
font-size: 13px;
color: var(--primary);
}
.glyph-input {
@@ -618,7 +628,7 @@ input[type="file"] {
color: var(--on-surface-variant);
/* border: 2px dashed var(--outline-variant); */
border-radius: var(--radius-lg);
font-size: 14px;
font-size: var(--font-size);
padding: 16px 20px;
margin: var(--space-2) 0 0;
cursor: pointer;
@@ -778,7 +788,7 @@ input[type="file"]::file-selector-button {
border: 1px solid var(--on-surface-variant);
border-radius: var(--radius-xl);
font-family: var(--font-mono);
font-size: 14px;
font-size: var(--font-size);
line-height: 22px;
padding: 20px;
resize: vertical;
@@ -870,6 +880,11 @@ input[type="file"]::file-selector-button {
.table-cell:first-child {
padding-bottom: 0;
}
.settings-grid .table-row {
flex-direction: column;
gap: var(--space-1);
}
}
/* ---- Dark theme ---- */