PCv5/app/static/css/table.css

192 lines
3.5 KiB
CSS

table {
border-collapse: collapse;
border-color: var(--border);
border-style: solid;
border-width: 0 0 1px 0;
}
table tr:nth-child(even) {
background: var(--background);
}
table tr:nth-child(odd) {
background: var(--background);
}
table th {
background: var(--background);
border-color: var(--border);
border-style: solid;
border-width: 1px 0;
padding: 2px 6px;
}
table:not(.codehilitetable) td {
padding: 4px 6px;
}
/* Code fragments */
table.codehilitetable {
border: none;
width: 100%;
/* This seems to be the only way to prevent the automatic table size
algorithm from assigning extreme widths when content overflows.
Fortunately the structure of the table is very simple, so we can afford to
set a fixed width on line numbers and move on */
table-layout: fixed;
}
table.codehilitetable tr:nth-child(even),
table.codehilitetable tr:nth-child(odd) {
background: none;
}
table.codehilitetable td {
padding: 0;
}
table.codehilitetable td.linenos {
width: 40px;
text-align: right;
}
table.codehilitetable td.linenos span {
padding-right: 8px;
}
table.codehilitetable td.code,
table.codehilitetable pre {
margin: 0;
width: 100%;
}
table.codehilitetable pre {
overflow-x: auto;
}
/* Forum and sub-forum listings */
table.forumlist {
border-collapse: separate;
border-spacing: 0;
margin: 16px 0;
width: 100%;
}
/* table.forumlist th {
background: #d05950;
border-color: #b04940;
color: white;
} */
table.forumlist tr {
background: unset;
}
table.forumlist tr:nth-child(4n+2),
table.forumlist tr:nth-child(4n+3) {
background: rgba(0, 0, 0, .05);
}
/* Topic table */
table.topiclist {
width: 100%;
margin: auto;
}
table.topiclist tr > *:nth-child(n+2) {
/* This matches all children except the first column */
text-align: center;
}
table.forumlist th > td:last-child,
table.forumlist tr > td:last-child,
table.topiclist th > td:last-child,
table.topiclist tr > td:last-child {
width: 20%; text-align: center;
}
/* Thread table */
table.thread {
width: 100%;
border-width: 1px 0;
}
table.thread.topcomment {
border: none;
}
table.thread td.author {
width: 256px;
}
table.thread td {
vertical-align: top;
}
table.thread td.message {
padding-top: 8px;
}
table.thread td.message > *:nth-child(2) {
margin-top: 0;
}
table.thread td.message img {
max-width: 100%;
}
table.thread div.info {
float: right;
text-align: right;
position: relative;
}
table.thread div.info > * {
display: inline-block;
vertical-align: top;
}
table.thread div.info summary {
list-style: none;
cursor: pointer;
user-select: none;
}
table.thread .context-menu {
position: absolute;
right: 0;
top: 100%;
margin: 0;
padding: 4px 0;
box-shadow: var(--shadow);
border-radius: 4px;
transition: none;
background: var(--background);
z-index: 2;
border: 1px solid var(--border);
}
table.thread .context-menu a {
display: block;
padding: 4px 8px;
text-align: center;
color: inherit;
}
table.thread .context-menu a:hover {
background: var(--background-light);
text-decoration: none;
}
@media screen and (max-width: 1199px) {
table.thread div.info {
float: none;
}
table.thread td.author {
/* Includes padding */
width: 136px;
overflow-wrap: anywhere;
}
}
@media screen and (max-width: 849px) {
table.thread td.author {
width: 104px;
}
}
/* Tables with filters */
table.filter-target th:after {
content: attr(data-filter);
display: block;
font-size: 80%;
font-family: monospace;
font-weight: normal;
}