Jump to content

MediaWiki:Common.css

From ILP
Revision as of 22:56, 22 July 2026 by ILPTest (talk | contribs) (Bot: Automated import of articles *** existing text overwritten ***)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

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.
/* ============ ILP visual identity ============
   Palette: deep slate navy primary, muted gold accent, warm white ground.
   Serif display for headings, clean sans for data. Applies inside page
   content on any skin; site chrome is handled by skin config. */
:root {
  --ilp-navy: #1f2a44;
  --ilp-navy-deep: #16203a;
  --ilp-gold: #b08d3e;
  --ilp-gold-soft: #e9ddc0;
  --ilp-paper: #faf8f4;
  --ilp-ink: #23272e;
  --ilp-line: #d8d3c8;
  --ilp-green: #2e6f40;
  --ilp-red: #a33a2e;
  --ilp-serif: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --ilp-sans: -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
.mw-parser-output { font-family: var(--ilp-sans); color: var(--ilp-ink); }
.mw-parser-output [class^="ilp-"], .mw-parser-output [class*=" ilp-"] { box-sizing: border-box; }
.mw-parser-output h1, .mw-parser-output h2, .mw-parser-output h3,
.ilp-hero-title, .ilp-state-name, .ilp-card-title {
  font-family: var(--ilp-serif); color: var(--ilp-navy); }

/* ---- hero ---- */
.ilp-hero { background: var(--ilp-navy); color: #fff; border-radius: 10px;
  padding: 42px 34px; margin: 6px 0 22px; }
.ilp-hero-title { color: #fff; font-size: clamp(1.5em, 4.5vw, 2.1em); margin: 0 0 6px;
  letter-spacing: .01em; }
.ilp-hero-tag { color: var(--ilp-gold-soft); font-size: clamp(.98em, 2.6vw, 1.08em); margin: 0 0 18px; }
.ilp-btn a, a.ilp-btn { display: inline-block; background: var(--ilp-gold);
  color: var(--ilp-navy-deep) !important; font-weight: 600; padding: 8px 18px;
  border-radius: 6px; text-decoration: none !important; margin: 0 10px 8px 0; }
.ilp-btn a:hover { background: #c9a75a; }

/* ---- stat cards ---- */
.ilp-stats { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 24px; }
.ilp-stat { flex: 1 1 140px; background: #fff; border: 1px solid var(--ilp-line);
  border-top: 3px solid var(--ilp-gold); border-radius: 8px; padding: 14px 16px; }
.ilp-stat .n { display: block; font-family: var(--ilp-serif); font-size: 1.7em;
  color: var(--ilp-navy); }
.ilp-stat .l { color: #6b6f76; font-size: .86em; text-transform: uppercase;
  letter-spacing: .06em; }

/* ---- tile-grid US map ---- */
.ilp-usmap { display: grid; grid-template-columns: repeat(11, 1fr);
  gap: 5px; max-width: min(760px, 100%); margin: 10px auto 6px; }
.ilp-tile { border-radius: 5px; text-align: center; }
.ilp-tile a { display: block; padding: clamp(6px, 1.6vw, 12px) 0; color: inherit !important;
  text-decoration: none !important; font-weight: 700;
  font-size: clamp(.58em, 2.4vw, .92em); }
.ilp-tile:hover { outline: 2px solid var(--ilp-gold); }
.ilp-avail-0 { background: #eee8dc; color: #8a8577; }
.ilp-avail-1 { background: #cdd4e2; color: var(--ilp-navy-deep); }
.ilp-avail-2 { background: #9aa8c6; color: var(--ilp-navy-deep); }
.ilp-avail-3 { background: #5d6f9b; color: #fff; }
.ilp-avail-3 a, .ilp-avail-4 a { color: #fff !important; }
.ilp-avail-4 { background: var(--ilp-navy); color: #fff; }
.ilp-legend { text-align: center; color: #6b6f76; font-size: .85em;
  margin-bottom: 22px; }
.ilp-lg { display: inline-block; width: 13px; height: 13px; border-radius: 3px;
  vertical-align: -2px; margin: 0 4px 0 12px; }

/* ---- topic cards ---- */
.ilp-topics { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 24px; }
.ilp-topic-card { flex: 1 1 210px; background: #fff; border: 1px solid var(--ilp-line);
  border-radius: 8px; padding: 14px 16px; }
.ilp-topic-card h3 { margin: 0 0 4px; font-size: 1.12em; }
.ilp-topic-card p { margin: 0 0 8px; color: #55595f; font-size: .93em; }
.ilp-topic-card .meta { color: var(--ilp-gold); font-size: .84em;
  font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }

/* ---- cards / badges / pills ---- */
.ilp-card { background: #fff; border: 1px solid var(--ilp-line);
  border-radius: 8px; padding: 14px 16px; margin: 0 0 14px; overflow-x: auto; }
.ilp-card-head { display: flex; align-items: baseline; gap: 10px;
  border-bottom: 1px solid var(--ilp-line); padding-bottom: 8px;
  margin-bottom: 10px; }
.ilp-card-title { font-size: 1.18em; }
.ilp-badge { font-size: .74em; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; padding: 2px 9px; border-radius: 10px; }
.ilp-ok { background: #e4efe6; color: var(--ilp-green); }
.ilp-na { background: #efece4; color: #8a8577; }
.ilp-pill { display: inline-block; background: var(--ilp-paper);
  border: 1px solid var(--ilp-line); border-radius: 14px; padding: 3px 12px;
  margin: 2px 6px 2px 0; font-size: .9em; color: var(--ilp-navy); }
.ilp-pill small { color: #8a8577; }

/* ---- state pages ---- */
.ilp-state-header { background: #fff; border: 1px solid var(--ilp-line);
  border-top: 4px solid var(--ilp-navy); border-radius: 8px;
  padding: 16px 18px; margin-bottom: 14px; }
.ilp-state-name { margin: 0 0 8px; font-size: 1.7em; }
.ilp-state-footer { color: #6b6f76; margin-top: 4px; }

/* ---- data tables (Cargo output) ---- */
.mw-parser-output table.cargoTable, .mw-parser-output table.wikitable {
  border-collapse: collapse; font-size: .94em; }
.mw-parser-output table.cargoTable th, .mw-parser-output table.wikitable th {
  background: var(--ilp-navy); color: #fff; font-weight: 600;
  padding: 6px 10px; text-align: left; border: 1px solid var(--ilp-navy-deep); }
.mw-parser-output table.cargoTable td, .mw-parser-output table.wikitable td {
  border: 1px solid var(--ilp-line); padding: 5px 10px; background: #fff; }
.mw-parser-output table.cargoTable tr:nth-child(even) td { background: var(--ilp-paper); }

/* ---- topic-page question boxes ---- */
.ilp-qbox { border: 1px solid var(--ilp-line); border-left: 3px solid var(--ilp-gold);
  border-radius: 6px; background: #fff; margin: 8px 0; padding: 8px 12px;
  overflow-x: auto; }

/* ---- state index ---- */
.ilp-index { column-width: 190px; column-gap: 26px; margin-bottom: 22px; }
.ilp-idx { display: block; padding: 2px 0; break-inside: avoid; }
.ilp-idx small { color: #8a8577; }

/* ---- responsive ---- */
@media (max-width: 720px) {
  .ilp-hero { padding: 26px 18px; }
  .ilp-stats, .ilp-topics { gap: 8px; }
  .ilp-stat { flex-basis: 44%; }
  .ilp-topic-card { flex-basis: 100%; }
  .ilp-index { column-width: 140px; }
  .ilp-state-header { padding: 12px 14px; }
  /* any data table wider than the screen scrolls instead of overflowing */
  .mw-parser-output table.cargoTable,
  .mw-parser-output table.wikitable { display: block; max-width: 100%;
    overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 480px) {
  .ilp-usmap { gap: 3px; }
  .ilp-tile { border-radius: 3px; }
  .ilp-legend { font-size: .74em; }
  .ilp-card, .ilp-qbox { padding: 10px; }
  .ilp-stat .n { font-size: 1.4em; }
  .ilp-hero { padding: 20px 14px; }
}

/* ---- maintenance dashboard ---- */
.ilp-stat.ok { border-top-color: var(--ilp-green); }
.ilp-stat.ok .n { color: var(--ilp-green); }
.ilp-stat.bad { border-top-color: var(--ilp-red); }
.ilp-stat.bad .n { color: var(--ilp-red); }
.ilp-maint-note { background: var(--ilp-gold-soft); border: 1px solid var(--ilp-line);
  border-radius: 6px; padding: 8px 12px; color: var(--ilp-navy-deep);
  font-size: .93em; margin-bottom: 14px; }

/* ---- per-state accents (subtle; header top border only) ---- */
.ilp-acc-alabama .ilp-state-header { border-top-color: hsl(0, 30%, 36%); }
.ilp-acc-alaska .ilp-state-header { border-top-color: hsl(7, 30%, 36%); }
.ilp-acc-arizona .ilp-state-header { border-top-color: hsl(14, 30%, 36%); }
.ilp-acc-arkansas .ilp-state-header { border-top-color: hsl(21, 30%, 36%); }
.ilp-acc-california .ilp-state-header { border-top-color: hsl(28, 30%, 36%); }
.ilp-acc-colorado .ilp-state-header { border-top-color: hsl(35, 30%, 36%); }
.ilp-acc-connecticut .ilp-state-header { border-top-color: hsl(42, 30%, 36%); }
.ilp-acc-delaware .ilp-state-header { border-top-color: hsl(49, 30%, 36%); }
.ilp-acc-florida .ilp-state-header { border-top-color: hsl(56, 30%, 36%); }
.ilp-acc-georgia .ilp-state-header { border-top-color: hsl(63, 30%, 36%); }
.ilp-acc-hawaii .ilp-state-header { border-top-color: hsl(70, 30%, 36%); }
.ilp-acc-idaho .ilp-state-header { border-top-color: hsl(77, 30%, 36%); }
.ilp-acc-illinois .ilp-state-header { border-top-color: hsl(84, 30%, 36%); }
.ilp-acc-indiana .ilp-state-header { border-top-color: hsl(91, 30%, 36%); }
.ilp-acc-iowa .ilp-state-header { border-top-color: hsl(98, 30%, 36%); }
.ilp-acc-kansas .ilp-state-header { border-top-color: hsl(105, 30%, 36%); }
.ilp-acc-kentucky .ilp-state-header { border-top-color: hsl(112, 30%, 36%); }
.ilp-acc-louisiana .ilp-state-header { border-top-color: hsl(120, 30%, 36%); }
.ilp-acc-maine .ilp-state-header { border-top-color: hsl(127, 30%, 36%); }
.ilp-acc-maryland .ilp-state-header { border-top-color: hsl(134, 30%, 36%); }
.ilp-acc-massachusetts .ilp-state-header { border-top-color: hsl(141, 30%, 36%); }
.ilp-acc-michigan .ilp-state-header { border-top-color: hsl(148, 30%, 36%); }
.ilp-acc-minnesota .ilp-state-header { border-top-color: hsl(155, 30%, 36%); }
.ilp-acc-mississippi .ilp-state-header { border-top-color: hsl(162, 30%, 36%); }
.ilp-acc-missouri .ilp-state-header { border-top-color: hsl(169, 30%, 36%); }
.ilp-acc-montana .ilp-state-header { border-top-color: hsl(176, 30%, 36%); }
.ilp-acc-nebraska .ilp-state-header { border-top-color: hsl(183, 30%, 36%); }
.ilp-acc-nevada .ilp-state-header { border-top-color: hsl(190, 30%, 36%); }
.ilp-acc-new_hampshire .ilp-state-header { border-top-color: hsl(197, 30%, 36%); }
.ilp-acc-new_jersey .ilp-state-header { border-top-color: hsl(204, 30%, 36%); }
.ilp-acc-new_mexico .ilp-state-header { border-top-color: hsl(211, 30%, 36%); }
.ilp-acc-new_york .ilp-state-header { border-top-color: hsl(218, 30%, 36%); }
.ilp-acc-north_carolina .ilp-state-header { border-top-color: hsl(225, 30%, 36%); }
.ilp-acc-north_dakota .ilp-state-header { border-top-color: hsl(232, 30%, 36%); }
.ilp-acc-ohio .ilp-state-header { border-top-color: hsl(240, 30%, 36%); }
.ilp-acc-oklahoma .ilp-state-header { border-top-color: hsl(247, 30%, 36%); }
.ilp-acc-oregon .ilp-state-header { border-top-color: hsl(254, 30%, 36%); }
.ilp-acc-pennsylvania .ilp-state-header { border-top-color: hsl(261, 30%, 36%); }
.ilp-acc-rhode_island .ilp-state-header { border-top-color: hsl(268, 30%, 36%); }
.ilp-acc-south_carolina .ilp-state-header { border-top-color: hsl(275, 30%, 36%); }
.ilp-acc-south_dakota .ilp-state-header { border-top-color: hsl(282, 30%, 36%); }
.ilp-acc-tennessee .ilp-state-header { border-top-color: hsl(289, 30%, 36%); }
.ilp-acc-texas .ilp-state-header { border-top-color: hsl(296, 30%, 36%); }
.ilp-acc-utah .ilp-state-header { border-top-color: hsl(303, 30%, 36%); }
.ilp-acc-vermont .ilp-state-header { border-top-color: hsl(310, 30%, 36%); }
.ilp-acc-virginia .ilp-state-header { border-top-color: hsl(317, 30%, 36%); }
.ilp-acc-washington .ilp-state-header { border-top-color: hsl(324, 30%, 36%); }
.ilp-acc-west_virginia .ilp-state-header { border-top-color: hsl(331, 30%, 36%); }
.ilp-acc-wisconsin .ilp-state-header { border-top-color: hsl(338, 30%, 36%); }
.ilp-acc-wyoming .ilp-state-header { border-top-color: hsl(345, 30%, 36%); }
.ilp-acc-puerto_rico .ilp-state-header { border-top-color: hsl(352, 30%, 36%); }
Retrieved from "https://ilptest.org/wiki/index.php?title=MediaWiki:Common.css&oldid=286"