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.

:root{
  --bg:#181818; --ink:#e0e0e0; --muted:#aaaaaa; --accent:#ff9c00;
  --shadow:0 4px 8px rgba(0,0,0,.3);
}

body{ background:var(--bg); color:var(--ink); }
img,video{ max-width:100%; height:auto; }

a{ color:#3b82f6; }

.resp-card{
  background:#181818; border:1px solid var(--accent);
  border-radius:12px; box-shadow:var(--shadow);
}

.wikitable{
  width:100% !important;
  max-width:100%;
  border-collapse:collapse;
  table-layout:auto;
}

/* add class="rwd" (recommended) for reliable horizontal scroll on phones */
table.rwd{
  display:block;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
table.rwd > *{ min-width:600px; } /* let columns breathe */

@media (max-width:768px){
  .wikitable{
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
}

.m2m-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; }
.m2m-grid-lg{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:15px; }

.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.two-col > *{ width:100% !important; float:none !important; margin:0 !important; }

@media (max-width:1024px){
  [style*="padding: 25px"]{ padding:20px !important; }
}
@media (max-width:768px){
  .two-col{ grid-template-columns:1fr; }

  [style*="font-size: 28px"]{ font-size:22px !important; }
  [style*="font-size: 24px"]{ font-size:20px !important; }
  [style*="font-size: 20px"]{ font-size:18px !important; }

  [style*="padding: 30px"]{ padding:18px !important; }
}

[style*="width: 100%"]{ max-width:100% !important; }
[style*="width: 49%"]{ width:100% !important; } /* just in case */
[style*="width: 292px"]{ width:100% !important; max-width:292px; margin-left:auto; margin-right:auto; }

a:focus,button:focus{ outline:2px dashed var(--accent); outline-offset:2px; }