mf-styling
Version:
css as used for mf apps
85 lines (66 loc) • 1.21 kB
CSS
:root {
--table-padding: 0.5rem;
}
table {
color: var(--color-primary-900);
border-collapse: collapse;
}
th {
background-color: var(--color-primary-200);
font-weight: bold;
}
th,
td {
padding: var(--table-padding);
}
.bordered :where(td, th) {
border: 1px solid var(--color-neutral-300);
}
.bordered-none-left {
border-left: 0;
}
.bordered-none-right {
border-right: 0;
}
.bordered-none-bottom {
border-bottom: 0;
}
.bordered-none-top {
border-top: 0;
}
.bordered-light-left {
border-left: 1px dotted var(--color-neutral-200);
}
.bordered-light-right {
border-right: 1px dotted var(--color-neutral-200);
}
.bordered-light-bottom {
border-bottom: 1px dotted var(--color-neutral-200);
}
.bordered-light-top {
border-top: 1px dotted var(--color-neutral-200);
}
.striped tr:nth-of-type(odd) {
background: var(--color-neutral-100);
}
.hoverable tr:hover {
background: var(--color-accent-100);
}
.sticky thead {
position: sticky;
inset-block-start: 0;
}
.sticky tfoot {
position: sticky;
inset-block-end: 0;
}
th input {
margin: 0.2rem;
padding: 0.1rem;
border: 0;
border-radius: 0;
font-size: 0.5rem;
}
th input:is(:focus) {
font-size: 0.8rem;
}