MediaWiki:Gadget-Synovial-joints-table.css: Difference between revisions
From WikiMSK
No edit summary |
No edit summary |
||
(12 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
#synovial-joints { | #synovial-joints { | ||
display: flex; | display: flex; | ||
flex-direction: row; | |||
flex-wrap: wrap; | |||
} | } | ||
#synovial-joints thead { | #synovial-joints thead { | ||
width: | width: 260px; | ||
order: 0; | |||
} | |||
#synovial-joints thead .sorting { | |||
background-position: 0 50%; | |||
} | |||
#synovial-joints thead tr { | |||
display: flex; | |||
flex-direction: column; | |||
} | |||
#synovial-joints thead tr th { | |||
border: 0 !important; | |||
} | } | ||
#synovial-joints tbody { | #synovial-joints tbody { | ||
display: flex; | display: flex; | ||
flex-direction: column; | flex-direction: column; | ||
width: | width: calc(100% - 260px); | ||
order: 1; | |||
} | |||
@media only screen and (max-width: 1000px) { | |||
#synovial-joints tbody { | |||
width: 100%; | |||
} | |||
} | } | ||
#synovial-joints tbody tr { | #synovial-joints tbody tr { | ||
display: flex; | display: flex; | ||
Line 15: | Line 35: | ||
width: 100%; | width: 100%; | ||
flex: 1; | flex: 1; | ||
border: 1px solid #aaa; | |||
padding: 6px; | |||
margin-bottom: 1rem; | |||
} | } | ||
#synovial-joints td { | #synovial-joints td { | ||
padding: 4px 1rem; | padding: 4px 1rem; | ||
display: flex; | |||
gap: 2px; | |||
} | } | ||
#synovial-joints td:empty { | #synovial-joints td:empty { | ||
display: none; | display: none; | ||
} | |||
#synovial-joints tr td:not(:first-of-type) b { | |||
flex-basis: 120px; | |||
min-width: 120px; | |||
} | } |
Latest revision as of 18:14, 2 May 2022
#synovial-joints {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
#synovial-joints thead {
width: 260px;
order: 0;
}
#synovial-joints thead .sorting {
background-position: 0 50%;
}
#synovial-joints thead tr {
display: flex;
flex-direction: column;
}
#synovial-joints thead tr th {
border: 0 !important;
}
#synovial-joints tbody {
display: flex;
flex-direction: column;
width: calc(100% - 260px);
order: 1;
}
@media only screen and (max-width: 1000px) {
#synovial-joints tbody {
width: 100%;
}
}
#synovial-joints tbody tr {
display: flex;
flex-direction: column;
width: 100%;
flex: 1;
border: 1px solid #aaa;
padding: 6px;
margin-bottom: 1rem;
}
#synovial-joints td {
padding: 4px 1rem;
display: flex;
gap: 2px;
}
#synovial-joints td:empty {
display: none;
}
#synovial-joints tr td:not(:first-of-type) b {
flex-basis: 120px;
min-width: 120px;
}