diff --git a/src/app/app.css b/src/app/app.css index 56b0a620..2bcae22d 100644 --- a/src/app/app.css +++ b/src/app/app.css @@ -65,8 +65,8 @@ button:disabled { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100vh; - gap: 12px; - padding: 12px; + gap: 10px; + padding: 10px; overflow: hidden; } @@ -74,44 +74,66 @@ button:disabled { display: flex; align-items: center; justify-content: space-between; - gap: 16px; - padding: 0 18px; + gap: 12px; + padding: 8px 14px; background: rgba(18, 22, 28, 0.88); border: 1px solid var(--color-border); - border-radius: 18px; + border-radius: 16px; box-shadow: var(--shadow-panel); backdrop-filter: blur(16px); min-width: 0; } +.toolbar__brand { + display: flex; + flex-direction: column; + gap: 1px; + min-width: 0; +} + +.toolbar__title { + font-size: 0.9rem; + font-weight: 700; + line-height: 1.1; +} + +.toolbar__subtitle { + color: var(--color-muted); + font-size: 0.74rem; + line-height: 1.2; +} + .toolbar__scene-name { flex: 1 1 320px; min-width: 220px; - max-width: 520px; + max-width: 460px; } .toolbar__actions { display: flex; align-items: center; justify-content: flex-end; - gap: 8px; + gap: 6px; flex-wrap: wrap; min-width: 0; } .toolbar__group { display: flex; - gap: 8px; - padding: 8px; + gap: 6px; + padding: 6px; background: rgba(255, 255, 255, 0.02); border: 1px solid var(--color-border); - border-radius: 14px; + border-radius: 12px; } .toolbar__button { - padding: 0.65rem 0.9rem; + min-height: 34px; + padding: 0.48rem 0.72rem; background: var(--color-surface-strong); color: var(--color-text); + font-size: 0.84rem; + line-height: 1.1; } .toolbar__button:hover:not(:disabled) { @@ -125,8 +147,9 @@ button:disabled { } .toolbar__button--compact { - padding: 0.5rem 0.75rem; - font-size: 0.84rem; + min-height: 32px; + padding: 0.4rem 0.62rem; + font-size: 0.78rem; } .toolbar__button--accent { @@ -140,9 +163,9 @@ button:disabled { } .toolbar__scene-name-input { - height: 44px; - padding: 0 14px; - font-size: 1rem; + height: 36px; + padding: 0 12px; + font-size: 0.92rem; font-weight: 700; } @@ -1170,19 +1193,21 @@ button:disabled { align-items: center; justify-content: flex-start; flex-wrap: wrap; - gap: 16px; - min-height: 44px; - padding: 8px 16px; + gap: 12px; + min-height: 36px; + padding: 6px 12px; background: rgba(18, 22, 28, 0.88); border: 1px solid var(--color-border); - border-radius: 16px; + border-radius: 14px; color: var(--color-muted); + font-size: 0.8rem; + line-height: 1.2; } .status-bar__item { display: flex; align-items: baseline; - gap: 6px; + gap: 4px; min-width: 0; } @@ -1234,7 +1259,7 @@ button:disabled { .toolbar { flex-direction: column; align-items: flex-start; - padding: 16px; + padding: 12px; } .workspace {