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

Refactor critical tables layout to CSS grid

Browse Source
This commit is contained in:
Frank Tovar
2026-03-21 11:44:37 +01:00
parent 7322b93120
commit 89f393ca35
3 changed files with 148 additions and 213 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -737,36 +737,57 @@ textarea {
overflow-x: auto;
}
.critical-table {
width: 100%;
border-collapse: collapse;
.critical-table-grid {
width: max-content;
min-width: 100%;
font-size: 1.5rem;
border-top: 1px solid rgba(127, 96, 55, 0.2);
border-left: 1px solid rgba(127, 96, 55, 0.2);
}
.critical-table th,
.critical-table td {
border: 1px solid rgba(127, 96, 55, 0.2);
.critical-table-grid-row {
display: grid;
align-items: stretch;
}
.critical-table-grid-header-cell {
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
padding: 0.35rem;
vertical-align: top;
}
.critical-table th {
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);
text-transform: uppercase;
text-align: center;
vertical-align: middle;
letter-spacing: 0.08em;
box-sizing: border-box;
}
.critical-table td {
background: rgba(255, 255, 255, 0.85);
min-width: 190px;
max-width: 250px;
padding: 0.55rem;
.critical-table-grid-column-row .critical-table-grid-header-cell,
.critical-table-grid-group-row .critical-table-grid-header-cell {
font-size: 2rem;
}
.critical-table-grid-corner,
.critical-table-grid-roll-band-header {
background: rgba(255, 247, 230, 0.52);
}
.critical-table-grid-roll-band {
background: rgba(255, 247, 230, 0.52);
font-size: 1.5rem;
}
.critical-table-cell {
position: relative;
display: flex;
min-width: 0;
padding: 0.55rem;
border-right: 1px solid rgba(127, 96, 55, 0.2);
border-bottom: 1px solid rgba(127, 96, 55, 0.2);
box-sizing: border-box;
}
.critical-table-cell.is-curated {
@@ -785,8 +806,8 @@ textarea {
display: flex;
flex-direction: column;
gap: 0.55rem;
height: 100%;
min-height: 100%;
flex: 1 1 auto;
min-height: 0;
}
.critical-table-cell-shell > .critical-cell {
@@ -826,23 +847,16 @@ textarea {
background: rgba(255, 248, 236, 0.98);
}
.critical-table td .critical-cell {
.critical-table-grid .critical-cell {
display: flex;
flex-direction: column;
gap: 0.25rem;
box-sizing: border-box;
}
.critical-table .roll-band-header {
width: 96px;
background: rgba(255, 247, 230, 0.52);
font-size: 1.5rem;
text-align: center;
vertical-align: middle;
}
.critical-table thead th {
font-size: 2rem;
.critical-table-cell-empty {
align-items: center;
justify-content: center;
}
.empty-cell {