Files
dog_training/static/css/layouts/table-main.css

130 lines
2.6 KiB
CSS

#formFilters {
padding: 0.5vh 1vw;
margin-top: 1vh;
}
#tableMain {
overflow-x: auto;
padding: 1vh 1vw;
max-width: 88vw; /* min(calc(1vh * 80), calc(1vw * 90)); */
width: min-content;
align-items: normal;
justify-content: normal;
}
#tableMain * {
padding: 0.25vh 0.5vh;
}
#tableMain thead {
max-height: 4vh;
overflow-y: visible;
}
#tableMain tbody {
max-height: 60vh;
overflow-y: auto;
min-width: fit-content;
max-width: fit-content;
overflow-x: visible;
}
#tableMain tbody.is_collapsed {
display: block;
}
#tableMain:has(tbody > div) tbody {
}
#tableMain tbody > div {
margin-left: auto;
margin-right: auto;
text-align: center;
justify-content: center;
justify-items: center;
justify-self: center;
align-content: center;
align-items: center;
align-self: center;
position: relative;
display: block;
width: min(calc(90vh), calc(70vw));
}
#tableMain select,
#tableMain input:not([type="checkbox"]),
#tableMain textarea,
#tableMain div {
box-sizing: border-box;
width: 100%;
height: 100%;
border: 1px solid var(--colour-accent);
border-radius: 0.5vh;
text-align: center;
}
#tableMain thead tr th, #tableMain tbody tr td {
width: 20vh;
min-width: 20vh;
padding: 0 0.5vh;
}
#tableMain tbody tr td {
height: 5vh;
/* padding-top: 0.5vh; */
}
#tableMain tbody tr td:has(.dirty) {
background-color: var(--colour-primary);
}
#tableMain tbody tr:not(:last-of-type) td {
padding-bottom: 0.25vh;
}
#tableMain tbody tr td.ddl-preview div,
#tableMain tbody tr td.ddl-preview select {
padding-left: 2vh;
padding-right: 2vh;
}
#tableMain tbody tr td.ddl-preview select {
font-size: 12px;
}
#tableMain thead tr th.active,
#tableMain tbody tr td.active {
width: 6vh;
min-width: 6vh;
}
#tableMain thead tr th.active svg.active.add {
fill: var(--colour-primary);
background-color: var(--colour-accent);
border: 2px solid var(--colour-accent);
padding: 0;
border-radius: 1vh;
}
#tableMain tbody tr td.active svg.active.add {
fill: var(--colour-primary);
}
#tableMain tbody tr td.active svg.active.delete {
fill: var(--colour-error);
}
#tableMain tbody tr td.display_order,
#tableMain thead tr th.display_order {
width: 5vh;
min-width: 5vh;
}
#container-template-elements {
display: none;
}
@media screen and (max-width: 850px) {
}
@media screen and (max-width: 400px) {
#formFilters input[type="text"],
#formFilters select {
width: 15vh;
/* height: 3vh; */
}
#tableMain {
max-height: 60vh;
}
#tableMain tbody {
max-height: 53vh;
}
}