Oberleiste-Mittelweg: BAR_H 22, Font zurueck 11, Logo 17 — Toolbar-Gap bleibt
User: vorher zu klein. Mittelding zwischen 24 (original) und 20 (zu klein): - BAR_H 20 → 22, PILL_H 18 → 20, Sep 18 → 20 - Select-Font 10 → 11, Padding 22/10 → 24/12, Caret 8 → 9 - BarButton Icon 12 → 13 - View-Toggle Font 9 → 10, Icon 12 → 13, Padding 8 → 10, Gap 3 → 4 - Live-Zoom Font 10 → 11, MinWidth 56 → 60 - Custom-Input Width 90 → 100, Padding 10 → 12, Font 10 → 11 - Logo 15 → 17 Toolbar-Gap 6 + Padding 3/10/6 bleiben (User: "find ich gut"). Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
+16
-16
@@ -64,11 +64,11 @@ function parseScale(input) {
|
|||||||
// Caret rechts — alle in einem rechteckigen Container, sichtbare Trennung
|
// Caret rechts — alle in einem rechteckigen Container, sichtbare Trennung
|
||||||
// zwischen Icon-Kompartiment und Inhalt.
|
// zwischen Icon-Kompartiment und Inhalt.
|
||||||
|
|
||||||
const PILL_H = 18 // alte Pill-Hoehe (Buttons/Chips die nicht migriert sind)
|
const PILL_H = 20 // alte Pill-Hoehe (Buttons/Chips die nicht migriert sind)
|
||||||
const BAR_H = 20 // neue Widget-Hoehe (BarSelect, BarButton, BarGroup)
|
const BAR_H = 22 // neue Widget-Hoehe (BarSelect, BarButton, BarGroup)
|
||||||
|
|
||||||
const sep = {
|
const sep = {
|
||||||
width: 1, height: 18,
|
width: 1, height: 20,
|
||||||
background: 'var(--border)', flexShrink: 0,
|
background: 'var(--border)', flexShrink: 0,
|
||||||
margin: '0 3px',
|
margin: '0 3px',
|
||||||
}
|
}
|
||||||
@@ -110,12 +110,12 @@ function BarSelect({ icon, value, onChange, title, disabled, width, children, jo
|
|||||||
borderTopRightRadius: joinedRight ? 0 : 999,
|
borderTopRightRadius: joinedRight ? 0 : 999,
|
||||||
borderBottomRightRadius: joinedRight ? 0 : 999,
|
borderBottomRightRadius: joinedRight ? 0 : 999,
|
||||||
borderRight: joinedRight ? 'none' : '1px solid var(--border)',
|
borderRight: joinedRight ? 'none' : '1px solid var(--border)',
|
||||||
padding: '0 22px 0 10px',
|
padding: '0 24px 0 12px',
|
||||||
fontSize: 10, fontFamily: 'var(--font)',
|
fontSize: 11, fontFamily: 'var(--font)',
|
||||||
appearance: 'none', WebkitAppearance: 'none',
|
appearance: 'none', WebkitAppearance: 'none',
|
||||||
backgroundImage: 'var(--select-arrow)',
|
backgroundImage: 'var(--select-arrow)',
|
||||||
backgroundRepeat: 'no-repeat',
|
backgroundRepeat: 'no-repeat',
|
||||||
backgroundPosition: 'right 8px center',
|
backgroundPosition: 'right 9px center',
|
||||||
cursor: disabled ? 'not-allowed' : 'pointer',
|
cursor: disabled ? 'not-allowed' : 'pointer',
|
||||||
flexShrink: 0, outline: 'none',
|
flexShrink: 0, outline: 'none',
|
||||||
letterSpacing: 0,
|
letterSpacing: 0,
|
||||||
@@ -143,7 +143,7 @@ function BarButton({ icon, onClick, title, disabled, active, joinedLeft }) {
|
|||||||
opacity: disabled ? 0.5 : 1, flexShrink: 0,
|
opacity: disabled ? 0.5 : 1, flexShrink: 0,
|
||||||
padding: 0,
|
padding: 0,
|
||||||
}}>
|
}}>
|
||||||
<Icon name={icon} size={12}
|
<Icon name={icon} size={13}
|
||||||
style={{ color: active ? 'var(--bg-panel)' : 'var(--text-muted)' }} />
|
style={{ color: active ? 'var(--bg-panel)' : 'var(--text-muted)' }} />
|
||||||
</button>
|
</button>
|
||||||
)
|
)
|
||||||
@@ -305,7 +305,7 @@ export default function OberleisteApp() {
|
|||||||
>
|
>
|
||||||
<span style={{
|
<span style={{
|
||||||
fontFamily: "Krungthep, 'Archivo Black', sans-serif",
|
fontFamily: "Krungthep, 'Archivo Black', sans-serif",
|
||||||
fontSize: 15,
|
fontSize: 17,
|
||||||
letterSpacing: '-0.02em',
|
letterSpacing: '-0.02em',
|
||||||
color: 'var(--text-primary)',
|
color: 'var(--text-primary)',
|
||||||
lineHeight: 1,
|
lineHeight: 1,
|
||||||
@@ -340,7 +340,7 @@ export default function OberleisteApp() {
|
|||||||
onClick={() => setView(v.value)}
|
onClick={() => setView(v.value)}
|
||||||
title={`Ansicht ${v.label}`}
|
title={`Ansicht ${v.label}`}
|
||||||
style={{
|
style={{
|
||||||
height: BAR_H, padding: '0 8px',
|
height: BAR_H, padding: '0 10px',
|
||||||
background: isActive ? 'var(--accent)' : 'var(--bg-item)',
|
background: isActive ? 'var(--accent)' : 'var(--bg-item)',
|
||||||
color: isActive ? 'var(--bg-panel)' : 'var(--text-primary)',
|
color: isActive ? 'var(--bg-panel)' : 'var(--text-primary)',
|
||||||
border: '1px solid var(--border)',
|
border: '1px solid var(--border)',
|
||||||
@@ -349,12 +349,12 @@ export default function OberleisteApp() {
|
|||||||
borderBottomLeftRadius: isFirst ? 999 : 0,
|
borderBottomLeftRadius: isFirst ? 999 : 0,
|
||||||
borderTopRightRadius: isLast ? 999 : 0,
|
borderTopRightRadius: isLast ? 999 : 0,
|
||||||
borderBottomRightRadius: isLast ? 999 : 0,
|
borderBottomRightRadius: isLast ? 999 : 0,
|
||||||
display: 'inline-flex', alignItems: 'center', gap: 3,
|
display: 'inline-flex', alignItems: 'center', gap: 4,
|
||||||
fontSize: 9, fontWeight: isActive ? 600 : 500,
|
fontSize: 10, fontWeight: isActive ? 600 : 500,
|
||||||
cursor: 'pointer', flexShrink: 0,
|
cursor: 'pointer', flexShrink: 0,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Icon name={v.icon} size={12} />
|
<Icon name={v.icon} size={13} />
|
||||||
<span>{v.label}</span>
|
<span>{v.label}</span>
|
||||||
</button>
|
</button>
|
||||||
)
|
)
|
||||||
@@ -409,8 +409,8 @@ export default function OberleisteApp() {
|
|||||||
color: isPerspective ? 'var(--text-muted)' : 'var(--bg-panel)',
|
color: isPerspective ? 'var(--text-muted)' : 'var(--bg-panel)',
|
||||||
border: '1px solid var(--border-light)',
|
border: '1px solid var(--border-light)',
|
||||||
borderRadius: 999,
|
borderRadius: 999,
|
||||||
fontFamily: 'DM Mono, monospace', fontSize: 10, fontWeight: 600,
|
fontFamily: 'DM Mono, monospace', fontSize: 11, fontWeight: 600,
|
||||||
minWidth: 56, justifyContent: 'center', flexShrink: 0,
|
minWidth: 60, justifyContent: 'center', flexShrink: 0,
|
||||||
}} title="Live-Zoom">
|
}} title="Live-Zoom">
|
||||||
{isPerspective ? '—' : fmtScale(scaleVal)}
|
{isPerspective ? '—' : fmtScale(scaleVal)}
|
||||||
</div>
|
</div>
|
||||||
@@ -427,12 +427,12 @@ export default function OberleisteApp() {
|
|||||||
}}
|
}}
|
||||||
onBlur={applyDraft}
|
onBlur={applyDraft}
|
||||||
style={{
|
style={{
|
||||||
height: BAR_H, width: 90,
|
height: BAR_H, width: 100,
|
||||||
background: 'var(--bg-item)',
|
background: 'var(--bg-item)',
|
||||||
color: 'var(--text-primary)',
|
color: 'var(--text-primary)',
|
||||||
border: '1px solid var(--border)',
|
border: '1px solid var(--border)',
|
||||||
borderRadius: 999,
|
borderRadius: 999,
|
||||||
padding: '0 10px', fontSize: 10,
|
padding: '0 12px', fontSize: 11,
|
||||||
fontFamily: 'DM Mono, monospace',
|
fontFamily: 'DM Mono, monospace',
|
||||||
outline: 'none',
|
outline: 'none',
|
||||||
}}
|
}}
|
||||||
|
|||||||
Reference in New Issue
Block a user