giers10/webeditor3d
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update CSS styles for toolbar and button components

Browse Source
This commit is contained in:
Victor Giers
2026-04-03 01:30:42 +02:00
parent 822105a215
commit fea1f32fc1
1 changed files with 47 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/app/app.css
View File

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