Template:Wiki table/styles.css

/* ==========================================================
   PokeNexus Wiki — Shared table styles

   Usage:
   - Add class="pn-table" to a normal MediaWiki table.
   - For wide tables, wrap it in .pn-table-wrap.

   Example markup will come in the next step.
   ========================================================== */

/* ==========================================================
   Responsive wrapper
   ========================================================== */

.pn-table-wrap {
  max-width: 100%;

  overflow-x: auto;

  margin-block: 1rem 1.5rem;
}

/* ==========================================================
   Base table
   ========================================================== */

.pn-table {
  width: 100%;

  margin-block: 1rem 1.5rem;

  border: 1px solid #cbbda8;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 0.45rem;

  background-color: var(--background-color-base, #f7f1e7);

  color: var(--color-base, #312b25);

  overflow: hidden;

  font-size: inherit;
  line-height: 1.4;
}

.pn-table-wrap .pn-table {
  margin-block: 0;

  min-width: 36rem;
}

/* ==========================================================
   Header
   ========================================================== */

.pn-table th {
  padding: 0.65rem 0.8rem;

  background-color: var(--background-color-neutral, #e0d6c4);

  color: var(--color-emphasized, #211d19);

  border-right: 1px solid #cbbda8;
  border-bottom: 1px solid #b29f86;

  font-weight: 700;
  text-align: left;
}

.pn-table th:last-child {
  border-right: 0;
}

/* ==========================================================
   Cells
   ========================================================== */

.pn-table td {
  padding: 0.6rem 0.8rem;

  border-right: 1px solid #ddd2c1;
  border-bottom: 1px solid #ddd2c1;

  vertical-align: top;
}

.pn-table td:last-child {
  border-right: 0;
}

.pn-table tr:last-child td {
  border-bottom: 0;
}

/* ==========================================================
   Alternating rows
   ========================================================== */

.pn-table tbody tr:nth-child(even) {
  background-color: var(--background-color-neutral-subtle, #eee6d8);
}

/* ==========================================================
   Row hover
   ========================================================== */

.pn-table tbody tr:hover {
  background-color: var(--background-color-interactive-subtle, #eee6d8);
}

/* ==========================================================
   Links
   ========================================================== */

.pn-table a:not(.new) {
  font-weight: 500;
}

/* ==========================================================
   Compact variant
   ========================================================== */

.pn-table--compact th,
.pn-table--compact td {
  padding: 0.45rem 0.65rem;
}

/* ==========================================================
   Dark appearance
   ========================================================== */

html.skin-theme-clientpref-night .pn-table {
  border-color: #54595d;
}

html.skin-theme-clientpref-night .pn-table th {
  border-right-color: #54595d;
  border-bottom-color: #72777d;
}

html.skin-theme-clientpref-night .pn-table td {
  border-right-color: #54595d;
  border-bottom-color: #54595d;
}

@media screen and (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .pn-table {
    border-color: #54595d;
  }

  html.skin-theme-clientpref-os .pn-table th {
    border-right-color: #54595d;
    border-bottom-color: #72777d;
  }

  html.skin-theme-clientpref-os .pn-table td {
    border-right-color: #54595d;
    border-bottom-color: #54595d;
  }
}