Jump to content

MediaWiki:Common.css: Difference between revisions

From Yusupov's House
No edit summary
No edit summary
Line 1: Line 1:
/* === Infobox (light theme default) === */
table.infobox {
table.infobox {
   border: 1px solid #a2a9b1;
   border: 1px solid #a2a9b1;
   background: #f8f9fa;
   background: #f8f9fa;
  color: inherit;              /* use skin's text color */
   font-size: 90%;
   font-size: 90%;
   line-height: 1.4em;
   line-height: 1.4em;
   border-collapse: collapse;
   border-collapse: collapse;
}
}
table.infobox th, table.infobox td { padding: .25em .5em; vertical-align: top; }
table.infobox th,
table.infobox th { text-align: left; background: #f2f2f2; }
table.infobox td {
.infobox-title { text-align: center; font-size: 120%; font-weight: bold; background: #cfe3a3; }
  padding: .25em .5em;
  vertical-align: top;
}
table.infobox th {
  text-align: left;
  background: #f2f2f2;
}
.infobox-title {
  text-align: center;
  font-size: 120%;
  font-weight: bold;
  background: #cfe3a3;         /* tweak to taste */
}


@media (prefers-color-scheme: dark) {
/* === Infobox (dark theme via skin toggle) ===
  table.infobox { background: #202124; border-color: #5f6368; color: #e8eaed; }
  Vector/Minerva add `skin-theme-clientpref-night` on <html>
  table.infobox th { background: #2a2b2e; }
  when the user selects Dark. We override based on that. */
   .infobox-title { background: #466c2c; }
html.skin-theme-clientpref-night table.infobox {
  background: #202124;
  border-color: #5f6368;
  color: #e8eaed;
}
html.skin-theme-clientpref-night table.infobox th {
  background: #2a2b2e;
   color: #e8eaed;
}
}
html.skin-theme-clientpref-night .infobox-title {
  background: #323f2b;          /* header tint for dark; adjust if you like */
  color: #e8eaed;
}
/* Optional: make links inside infobox readable in dark mode */
html.skin-theme-clientpref-night table.infobox a { color: #8ab4f8; }
html.skin-theme-clientpref-night table.infobox a:visited { color: #c58af9; }

Revision as of 21:57, 1 October 2025

/* === Infobox (light theme default) === */
table.infobox {
  border: 1px solid #a2a9b1;
  background: #f8f9fa;
  color: inherit;               /* use skin's text color */
  font-size: 90%;
  line-height: 1.4em;
  border-collapse: collapse;
}
table.infobox th,
table.infobox td {
  padding: .25em .5em;
  vertical-align: top;
}
table.infobox th {
  text-align: left;
  background: #f2f2f2;
}
.infobox-title {
  text-align: center;
  font-size: 120%;
  font-weight: bold;
  background: #cfe3a3;          /* tweak to taste */
}

/* === Infobox (dark theme via skin toggle) ===
   Vector/Minerva add `skin-theme-clientpref-night` on <html>
   when the user selects Dark. We override based on that. */
html.skin-theme-clientpref-night table.infobox {
  background: #202124;
  border-color: #5f6368;
  color: #e8eaed;
}
html.skin-theme-clientpref-night table.infobox th {
  background: #2a2b2e;
  color: #e8eaed;
}
html.skin-theme-clientpref-night .infobox-title {
  background: #323f2b;          /* header tint for dark; adjust if you like */
  color: #e8eaed;
}

/* Optional: make links inside infobox readable in dark mode */
html.skin-theme-clientpref-night table.infobox a { color: #8ab4f8; }
html.skin-theme-clientpref-night table.infobox a:visited { color: #c58af9; }