mirror of
https://github.com/caiwx86/small-packages.git
synced 2026-11-01 00:05:13 +08:00
62 lines
1.9 KiB
CSS
62 lines
1.9 KiB
CSS
@layer base {
|
|
/* LuCI tables are div soup (.table/.tr/.th/.td), display roles assigned by hand. */
|
|
.tr { display: table-row; }
|
|
.table[width="33%"], .th[width="33%"], .td[width="33%"] { width: 33%; }
|
|
.table[width="100%"], .th[width="100%"], .td[width="100%"] { width: 100%; }
|
|
|
|
.table {
|
|
display: table;
|
|
width: 100%;
|
|
margin-bottom: var(--fs-space-4);
|
|
padding: 0;
|
|
font-size: var(--fs-type);
|
|
border-collapse: collapse;
|
|
position: relative;
|
|
}
|
|
|
|
/* Separator on the ROW (theme/30-tables.css), not the cell — else doubled and squares off
|
|
* the frame's rounded corner (issue #7). */
|
|
.table .th, .table .td {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
padding: var(--fs-space-2) var(--fs-space-3);
|
|
text-align: start;
|
|
}
|
|
|
|
/* Containment default, not the data-table floor: docs/css.md "Tables: overflow-wrap follows
|
|
* the tier, not the file". First column is a label too; exempt once carded (.fs-stacked .td,
|
|
* theme/30-tables.css). */
|
|
.table .td { overflow-wrap: anywhere; }
|
|
.table .th { overflow-wrap: break-word; }
|
|
.table .tr > .td:first-child { overflow-wrap: break-word; }
|
|
|
|
.table .tr:first-child .th {
|
|
padding-top: var(--fs-space-2);
|
|
font-weight: var(--fs-weight-bold);
|
|
vertical-align: top;
|
|
}
|
|
|
|
/* Out-of-flow, static position (never `bottom: 0`): docs/css.md "Tables: the empty-table
|
|
* placeholder must not pin to the table's bottom" (issue #36). */
|
|
.tr.placeholder {
|
|
height: calc(3em + var(--fs-space-4));
|
|
}
|
|
|
|
.tr.placeholder > .td {
|
|
position: absolute;
|
|
inset-inline: 0;
|
|
text-align: center;
|
|
line-height: 3em;
|
|
padding-block: var(--fs-space-2); /* two --fs-space-2 = the row height above, one number */
|
|
}
|
|
|
|
/* Physical: border-block-start/-end need a css-floor.mjs support decision first. */
|
|
.tr.drag-over-above {
|
|
border-top: 2px solid var(--fs-accent);
|
|
}
|
|
|
|
.tr.drag-over-below {
|
|
border-bottom: 2px solid var(--fs-accent);
|
|
}
|
|
}
|