MediaWiki:Common.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* =========================
   Pamphlet table + cover hover preview
   (scoped so it ONLY affects tables with class="pamphletTable")
   ========================= */

/* Table layout */
.mw-parser-output table.pamphletTable {
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
}

/* Cell padding / spacing */
.mw-parser-output table.pamphletTable th,
.mw-parser-output table.pamphletTable td {
  padding: 10px 14px;      /* increase/decrease to taste */
  vertical-align: middle;
  text-align: left;
}

/* Header styling (optional but nice) */
.mw-parser-output table.pamphletTable th {
  font-weight: 600;
}

/* Cover column locked + centered */
.mw-parser-output table.pamphletTable th:first-child,
.mw-parser-output table.pamphletTable td:first-child {
  width: 80px;
  min-width: 80px;
  text-align: center;
  padding: 6px;            /* tighter padding for the image cell */
  overflow: visible;       /* important so hover-zoom can escape */
}

/* Keep the cover cell from wrapping oddly */
.mw-parser-output table.pamphletTable td:first-child {
  white-space: nowrap;
}

/* =========================
   CoverThumb thumbnail box (uniform)
   ========================= */

.mw-parser-output table.pamphletTable .coverThumb {
  position: relative;
  display: inline-block;
  z-index: 1;
}

.mw-parser-output table.pamphletTable .coverSmall {
  width: 60px;
  height: 80px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Smooth hover */
.mw-parser-output table.pamphletTable .coverSmall img,
.mw-parser-output table.pamphletTable img.zoom-img {
  transition: transform 120ms ease;
  transform-origin: top left;
}

/* =========================
   Hover zoom (pop-out preview)
   - This assumes your template adds class=zoom-img to the <img>
   ========================= */

.mw-parser-output table.pamphletTable .coverThumb:hover img.zoom-img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;

  /* final preview size is controlled by scale + translate */
  transform: translate(100px, -20px) scale(3);

  z-index: 10000 !important;
  pointer-events: none !important;

  background: #fff;
  border: 1px solid #888;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* If anything clips the preview, this usually fixes it */
.mw-parser-output table.pamphletTable td {
  overflow: visible;
}