Template:Sort under/styles.css

From Zoophilia Wiki
Revision as of 23:13, 1 January 2026 by SockyPaws (talk | contribs) (Import TemplateStyles from English Wikipedia)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigationJump to search
/** Reposition sort arrows under column header text in the same cell.
 *
 * Table classes:
 *   - sort-under (consensus right)
 *   - sort-under-center
 *
 * Tested:
 *   - Windows 10: (all skins) Chrome, Firefox, Edge.
 *   - Android Galaxy S21 (MinervaNeue): Chrome, Firefox.
 *   - Wikipedia Android app.
 *   - Print: Not styled.
 *   - No JavaScript.
 *
 * Note: Can't align {{Static row numbers}} column label after sorting
 * when exactly one header row is followed by any "sorttop" rows.
 * See Phab:T355492 - "Move sorttop rows from thead to second tbody."
 * Lint error: thead tr:first-child:has(+ tr.sorttop)::before {}
 */
@media screen {
  /* Reclaim old space. */
  .sort-under.sortable.wikitable th.headerSort,
  .sort-under-center.sortable.wikitable th.headerSort {
    padding-right: 0.4em;
  }

  .sort-under.sortable:not(.wikitable) th.headerSort,
  .sort-under-center.sortable:not(.wikitable) th.headerSort {
    padding-right: 1px;
  }

  body.skin-minerva .sort-under.sortable.wikitable th.headerSort,
  body.skin-minerva .sort-under-center.sortable.wikitable th.headerSort {
    padding-right: 0.2em;
  }

  body.skin-timeless .sort-under.sortable.wikitable th.headerSort,
  body.skin-timeless .sort-under-center.sortable.wikitable th.headerSort {
    padding-right: 0.5em;
  }

  /* Reposition arrows. */
  html.client-js .sort-under.sortable th.headerSort {
    background-position: right bottom 0.2em;
  }

  html.client-js .sort-under-center.sortable th.headerSort {
    background-position: center bottom 0.2em;
  }

  /* Add new space. */
  .sort-under.sortable th.headerSort,
  .sort-under.sortable th.unsortable,
  .sort-under-center.sortable th.headerSort,
  .sort-under-center.sortable th.unsortable {
    padding-bottom: 1em;
  }

  body.skin-timeless .sort-under.sortable.wikitable th.headerSort,
  body.skin-timeless .sort-under.sortable.wikitable th.unsortable,
  body.skin-timeless .sort-under-center.sortable.wikitable th.headerSort,
  body.skin-timeless .sort-under-center.sortable.wikitable th.unsortable {
    padding-bottom: 1.2em;
  }

  body.skin-timeless .sort-under.sortable:not(.wikitable) th.headerSort,
  body.skin-timeless .sort-under.sortable:not(.wikitable) th.unsortable,
  body.skin-timeless .sort-under-center.sortable:not(.wikitable) th.headerSort,
  body.skin-timeless .sort-under-center.sortable:not(.wikitable) th.unsortable,
  body.skin-minerva .sort-under.sortable:not(.wikitable) th.headerSort,
  body.skin-minerva .sort-under.sortable:not(.wikitable) th.unsortable,
  body.skin-minerva .sort-under-center.sortable:not(.wikitable) th.headerSort,
  body.skin-minerva .sort-under-center.sortable:not(.wikitable) th.unsortable {
    padding-bottom: 0.8em;
  }

  /* Align {{static row numbers}} column header text. */
  .static-row-numbers.sort-under.sortable thead tr:only-child::before,
  .static-row-numbers.sort-under-center.sortable thead tr:only-child::before {
    padding-bottom: 0.9em;
  }

  body.skin-timeless .static-row-numbers.sort-under.sortable thead tr:only-child::before,
  body.skin-timeless .static-row-numbers.sort-under-center.sortable thead tr:only-child::before,
  body.skin-minerva .static-row-numbers.sort-under.sortable thead tr:only-child::before,
  body.skin-minerva .static-row-numbers.sort-under-center.sortable thead tr:only-child::before {
    padding-bottom: 0.8em;
  }

  /* Adjust {{vertical header}} space. */
  .sort-under.sortable th.ts-vertical-header.headerSort,
  .sort-under-center.sortable th.ts-vertical-header.headerSort {
    padding-right: 0.4em;
    padding-top: 0.4em;
  }
}

/* Increase touch screen button spacing for fat-finger error on header link. */
@media screen and (pointer: coarse) {
  /* Arrows. */
  html.client-js .sort-under.sortable.wikitable th.headerSort {
    background-position: right bottom 0.5em;
  }

  html.client-js .sort-under-center.sortable.wikitable th.headerSort {
    background-position: center bottom 0.5em;
  }

  /* Space. */
  .sort-under.sortable.wikitable th.headerSort,
  .sort-under.sortable.wikitable th.unsortable,
  .sort-under-center.sortable.wikitable th.headerSort,
  .sort-under-center.sortable.wikitable th.unsortable {
    padding-bottom: 1.6em;
  }

  body.skin-timeless .sort-under.sortable.wikitable th.headerSort,
  body.skin-timeless .sort-under.sortable.wikitable th.unsortable,
  body.skin-timeless .sort-under-center.sortable.wikitable th.headerSort,
  body.skin-timeless .sort-under-center.sortable.wikitable th.unsortable {
    padding-bottom: 1.8em;
  }

  /* {{Static row numbers}}. */
  .static-row-numbers.sort-under.sortable.wikitable thead tr:only-child::before,
  .static-row-numbers.sort-under-center.sortable.wikitable thead tr:only-child::before {
    padding-bottom: 1.5em;
  }

  body.skin-timeless .static-row-numbers.sort-under.sortable.wikitable thead tr:only-child::before,
  body.skin-timeless .static-row-numbers.sort-under-center.sortable.wikitable thead tr:only-child::before,
  body.skin-minerva .static-row-numbers.sort-under.sortable.wikitable thead tr:only-child::before,
  body.skin-minerva .static-row-numbers.sort-under-center.sortable.wikitable thead tr:only-child::before {
    padding-bottom: 1.4em;
  }
}