MediaWiki:Common.css: Difference between revisions

From 3DO World
Jump to navigation Jump to search
← Older editNewer edit →
No edit summary
Tag: Reverted
No edit summary
Tag: Reverted
Line 1: Line 1:
/* =========================
/* =========================
   Pamphlet table + cover hover preview
   TABLE PADDING FIX ONLY
  (scoped so it ONLY affects tables with class="pamphletTable")
   ========================= */
   ========================= */


/* Table layout */
/* Add consistent padding to cells (does NOT touch hover) */
.mw-parser-output table.pamphletTable {
.mw-parser-output .wikitable td,
  width: 100%;
.mw-parser-output .wikitable th {
  table-layout: auto;
   padding: 10px 14px !important;
  border-collapse: collapse;
   vertical-align: middle !important;
}
 
/* 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;
   text-align: left;
}
}


/* Header styling (optional but nice) */
/* Keep cover column tight + centered */
.mw-parser-output table.pamphletTable th {
.mw-parser-output .wikitable td:first-child,
  font-weight: 600;
.mw-parser-output .wikitable th:first-child {
}
   width: 80px !important;
 
   min-width: 80px !important;
/* Cover column locked + centered */
   text-align: center !important;
.mw-parser-output table.pamphletTable th:first-child,
   padding: 6px 6px !important; /* tighter just for cover */
.mw-parser-output table.pamphletTable td:first-child {
   overflow: visible !important; /* needed for hover */
   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)
   YOUR WORKING HOVER (UNCHANGED)
   ========================= */
   ========================= */


.mw-parser-output table.pamphletTable .coverThumb {
/* 1. Ensure the table expands to fit the content comfortably */
  position: relative;
.mw-parser-output .wikitable {
  display: inline-block;
   width: 100% !important;
  z-index: 1;
   table-layout: auto !important;
}
   border-collapse: collapse !important;
 
.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 - keep your exact working rule */
  Hover zoom (pop-out preview)
.mw-parser-output .coverThumb:hover .coverSmall img {
  - This assumes your template adds class=zoom-img to the <img>
  ========================= */
 
.mw-parser-output table.pamphletTable .coverThumb:hover img.zoom-img {
   position: absolute !important;
   position: absolute !important;
   top: 0 !important;
   top: 0 !important;
   left: 0 !important;
   left: 0 !important;
 
  width: 400px !important;
   /* final preview size is controlled by scale + translate */
   height: auto !important;
   transform: translate(100px, -20px) scale(3);
   transform: translate(100px, -20px) !important;
 
   z-index: 10000 !important;
   z-index: 10000 !important;
   pointer-events: none !important;
   pointer-events: none !important;
   background: #fff;
   background: #fff;
   border: 1px solid #888;
   border: 1px solid #888;
   box-shadow: 0 10px 30px rgba(0,0,0,0.5);
   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;
}
}

Revision as of 10:22, 29 January 2026

/* =========================
   TABLE PADDING FIX ONLY
   ========================= */

/* Add consistent padding to cells (does NOT touch hover) */
.mw-parser-output .wikitable td,
.mw-parser-output .wikitable th {
  padding: 10px 14px !important;
  vertical-align: middle !important;
  text-align: left;
}

/* Keep cover column tight + centered */
.mw-parser-output .wikitable td:first-child,
.mw-parser-output .wikitable th:first-child {
  width: 80px !important;
  min-width: 80px !important;
  text-align: center !important;
  padding: 6px 6px !important;  /* tighter just for cover */
  overflow: visible !important; /* needed for hover */
}

/* =========================
   YOUR WORKING HOVER (UNCHANGED)
   ========================= */

/* 1. Ensure the table expands to fit the content comfortably */
.mw-parser-output .wikitable {
  width: 100% !important;
  table-layout: auto !important;
  border-collapse: collapse !important;
}

/* Hover zoom - keep your exact working rule */
.mw-parser-output .coverThumb:hover .coverSmall img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 400px !important;
  height: auto !important;
  transform: translate(100px, -20px) !important;
  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);
}
Retrieved from "http://3do.world/index.php?title=MediaWiki:Common.css&oldid=17418"