PCv5/app/static/css/table.css

table {
  border-collapse: collapse;
  border-color: var(--border);
  border-style: solid;
  border-width: 0 0 1px 0;
  /* Code fragments */
  /* Forum and sub-forum listings */
  /* Topic table */
  /* Thread table */
  /* Tables with filters */
}
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;
}
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;
}
table.forumlist {
  border-collapse: separate;
  border-spacing: 0;
  margin: 16px 0;
  width: 100%;
}
table.forumlist tr {
  background: unset;
}
table.forumlist tr > td:last-child,
table.forumlist tr > th:last-child {
  width: 20%;
  text-align: center;
}
table.forumlist tr:nth-child(4n+2),
table.forumlist tr:nth-child(4n+3) {
  background: rgba(0, 0, 0, 0.05);
}
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.topiclist tr > td:last-child,
table.topiclist tr > th:last-child {
  width: 20%;
  text-align: center;
}
table.thread {
  width: 100%;
  border-width: 1px 0;
}
table.thread.topcomment {
  border: none;
}
table.thread.topcomment td.message {
  padding-top: 0;
}
table.thread.topcomment div.info {
  padding-bottom: 4px;
}
table.thread td {
  vertical-align: top;
}
table.thread td.author {
  width: 256px;
}
@media screen and (max-width: 1199px) {
  table.thread td.author {
    /* Includes padding */
    width: 136px;
    overflow-wrap: anywhere;
  }
}
@media screen and (max-width: 849px) {
  table.thread td.author {
    width: 104px;
  }
}
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:not(.topcomment) div.info {
  float: right;
}
table.thread div.info {
  text-align: right;
  position: relative;
}
@media screen and (max-width: 1199px) {
  table.thread div.info {
    float: none;
  }
}
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 .topcomment-placeholder div {
  font-style: italic;
  opacity: 0.5;
  padding: 8px 0;
}
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;
}
table.filter-target th:after {
  content: attr(data-filter);
  display: block;
  font-size: 80%;
  font-family: monospace;
  font-weight: normal;
}