xTr1m/RolemasterDB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tighten tables layout and grid behavior

Browse Source
This commit is contained in:
Frank Tovar
2026-04-11 23:45:09 +02:00
parent c892a6d07a
commit 6719967907
9 changed files with 221 additions and 419 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
src/RolemasterDb.App/wwwroot/app.css
View File

@@ -51,6 +51,7 @@
--button-secondary-bg-hover: rgba(250, 236, 210, 0.95);
--button-secondary-text: #6a4b28;
--button-secondary-border: rgba(127, 96, 55, 0.18);
--control-height: 3rem;
--font-display: "Fraunces", Georgia, serif;
--font-body: "IBM Plex Sans", "Segoe UI", sans-serif;
--font-ui: "IBM Plex Sans", "Segoe UI", sans-serif;
@@ -315,11 +316,13 @@ pre,
display: grid;
gap: 0.95rem;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
align-items: start;
}
.field-shell {
display: grid;
gap: 0.35rem;
align-content: start;
}
.roll-input-row {
@@ -341,12 +344,19 @@ pre,
.input-shell {
width: 100%;
min-height: var(--control-height);
border-radius: 14px;
border: 1px solid var(--button-secondary-border);
background: var(--surface-input);
padding: 0.8rem 0.9rem;
color: var(--text-primary);
box-sizing: border-box;
line-height: 1.25;
}
input.input-shell,
select.input-shell {
height: var(--control-height);
}
.input-shell:focus {
@@ -425,6 +435,7 @@ pre,
padding: 1rem;
background: var(--surface-card);
border: 1px solid rgba(127, 96, 55, 0.14);
min-width: 0;
}
.result-card h3,
@@ -510,6 +521,9 @@ pre,
flex-direction: column;
gap: 0.35rem;
min-height: 100%;
min-width: 0;
max-width: 100%;
box-sizing: border-box;
}
.critical-cell-status-chip,
@@ -543,6 +557,7 @@ pre,
display: flex;
flex-direction: column;
gap: 0.65rem;
min-width: 0;
}
.critical-cell-description {
@@ -550,12 +565,14 @@ pre,
color: #2c1a10;
font-size: 1.2rem;
line-height: 1.4;
overflow-wrap: anywhere;
}
.critical-branch-stack {
display: flex;
flex-direction: column;
gap: 0.4rem;
min-width: 0;
}
.critical-branch-card {
@@ -563,6 +580,7 @@ pre,
border-radius: 12px;
border: 1px solid rgba(127, 96, 55, 0.12);
background: rgba(255, 255, 255, 0.85);
min-width: 0;
}
.critical-branch-header {
@@ -571,6 +589,7 @@ pre,
justify-content: space-between;
gap: 0.5rem;
flex-wrap: wrap;
min-width: 0;
}
.critical-branch-condition {
@@ -579,6 +598,7 @@ pre,
letter-spacing: 0.05em;
text-transform: uppercase;
color: #6b4c29;
overflow-wrap: anywhere;
}
.critical-branch-description {
@@ -586,6 +606,7 @@ pre,
font-size: 0.85rem;
line-height: 1.35;
color: #3b2a21;
overflow-wrap: anywhere;
}
.critical-branch-header .affix-badge-list {
@@ -645,6 +666,8 @@ pre,
flex-wrap: wrap;
gap: 0.25rem;
margin-top: 0.5rem;
min-width: 0;
max-width: 100%;
}
.affix-badge {
@@ -1146,7 +1169,7 @@ pre,
.tables-reference-layout {
display: grid;
grid-template-columns: minmax(17rem, 20rem) minmax(0, 1fr) minmax(19rem, 24rem);
grid-template-columns: minmax(17rem, 20rem) minmax(0, 1fr);
gap: 1rem;
align-items: start;
}
@@ -1341,6 +1364,23 @@ pre,
min-width: 0;
}
.tables-selection-menu {
position: fixed;
right: 1rem;
bottom: calc(var(--shell-mobile-nav-height, 0rem) + 1rem);
z-index: 40;
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
padding: 0.75rem;
border-radius: 18px;
background: color-mix(in srgb, var(--surface-card-strong) 96%, transparent);
border: 1px solid var(--border-default);
box-shadow: var(--shadow-2);
backdrop-filter: blur(12px);
}
.tables-reference-inspector-shell {
position: sticky;
top: calc(var(--shell-header-height) + 1rem);
@@ -1382,6 +1422,9 @@ pre,
}
.table-shell {
display: grid;
gap: 0.75rem;
min-height: 0;
border-radius: 20px;
padding: 1.2rem;
background: var(--surface-card-strong);
@@ -1394,15 +1437,14 @@ pre,
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1rem;
margin-bottom: 0;
}
.tables-context-bar {
position: sticky;
top: calc(var(--shell-header-height) + 1rem);
z-index: 4;
padding-bottom: 1rem;
margin-bottom: 1rem;
top: calc(var(--shell-header-height, 5.75rem) + 1rem);
z-index: 8;
padding-bottom: 0.75rem;
background: linear-gradient(180deg, rgba(255, 251, 245, 0.96), rgba(255, 251, 245, 0.92));
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(127, 96, 55, 0.14);
@@ -1414,14 +1456,21 @@ pre,
.tables-context-primary,
.tables-context-controls {
display: grid;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.85rem;
flex-wrap: wrap;
}
.tables-context-controls {
margin-top: 0.85rem;
}
.tables-context-primary .panel-title {
margin: 0;
}
.tables-context-tab-row {
display: flex;
flex-wrap: wrap;
@@ -1495,6 +1544,12 @@ pre,
display: none;
}
.tables-selection-menu {
right: 0.75rem;
left: 0.75rem;
justify-content: flex-end;
}
.tables-inspector-sheet {
position: fixed;
inset: 0;
@@ -1544,19 +1599,30 @@ pre,
}
.table-shell .table-scroll {
overflow-x: auto;
overflow: auto;
min-width: 0;
max-height: min(72dvh, calc(100dvh - var(--shell-header-height, 5.75rem) - var(--shell-mobile-nav-height, 0rem) - 5rem));
border-radius: 18px;
overscroll-behavior: contain;
scrollbar-gutter: stable both-edges;
}
.critical-table-grid {
display: grid;
align-items: stretch;
width: 100%;
min-width: 100%;
width: max-content;
font-size: 1.5rem;
border-top: 1px solid rgba(127, 96, 55, 0.2);
border-left: 1px solid rgba(127, 96, 55, 0.2);
isolation: isolate;
--tables-header-row-height: 3.2rem;
--tables-group-header-top: 0;
--tables-column-header-top: 3.2rem;
--tables-column-header-top: 0;
}
.critical-table-grid.has-groups {
--tables-column-header-top: var(--tables-header-row-height);
}
.critical-table-grid-header-cell {
@@ -1564,10 +1630,11 @@ pre,
align-items: center;
justify-content: center;
min-width: 0;
min-height: var(--tables-header-row-height);
padding: 0.35rem;
border-right: 1px solid rgba(127, 96, 55, 0.2);
border-bottom: 1px solid rgba(127, 96, 55, 0.2);
background: rgba(238, 223, 193, 0.45);
background: color-mix(in srgb, var(--surface-card-strong) 94%, var(--accent-1));
text-transform: uppercase;
text-align: center;
letter-spacing: 0.08em;
@@ -1582,18 +1649,18 @@ pre,
.critical-table-grid-group-header {
position: sticky;
top: var(--tables-group-header-top);
z-index: 3;
z-index: 5;
}
.critical-table-grid-column-header {
position: sticky;
top: var(--tables-column-header-top);
z-index: 3;
z-index: 4;
}
.critical-table-grid.is-dense {
font-size: 1.2rem;
--tables-column-header-top: 2.6rem;
--tables-header-row-height: 2.6rem;
}
.critical-table-grid.is-dense .critical-table-grid-header-cell {
@@ -1606,34 +1673,35 @@ pre,
.critical-table-grid-corner,
.critical-table-grid-roll-band-header {
background: rgba(255, 247, 230, 0.52);
background: color-mix(in srgb, var(--surface-card-strong) 94%, var(--accent-1));
}
.critical-table-grid-corner {
position: sticky;
top: var(--tables-group-header-top);
left: 0;
z-index: 5;
z-index: 7;
}
.critical-table-grid-roll-band-header {
position: sticky;
top: var(--tables-column-header-top);
left: 0;
z-index: 5;
z-index: 6;
}
.critical-table-grid-roll-band {
background: rgba(255, 247, 230, 0.52);
background: color-mix(in srgb, var(--surface-card-strong) 94%, var(--accent-1));
font-size: 1.5rem;
position: sticky;
left: 0;
z-index: 2;
z-index: 3;
}
.critical-table-cell {
position: relative;
display: flex;
z-index: 1;
min-width: 0;
padding: 0.55rem;
border-right: 1px solid rgba(127, 96, 55, 0.2);
@@ -2412,10 +2480,6 @@ pre,
flex-direction: column;
}
.table-browser-edit-hint {
white-space: normal;
}
.tables-context-fields {
flex-direction: column;
}