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) === */
/* ===== Infobox (light theme default) ===== */
table.infobox {
table.infobox{
   border: 1px solid #a2a9b1;
  width:270px;                /* fixed like enwiki */
   background: #f8f9fa;
  max-width:270px;
   color: inherit;
  box-sizing:border-box;      /* include border in the 270px */
   font-size: 90%;
  float:right; clear:right;
   line-height: 1.4em;
  margin:0 0 1em 1em;
   border-collapse: collapse;
   border:1px solid #a2a9b1;
  width: 22em;
   background:#f8f9fa;
   color:inherit;
   font-size:90%;
   line-height:1.5em;           /* enwiki-ish line height */
   border-collapse:collapse;
}
}
table.infobox th, table.infobox td { padding: .25em .5em; vertical-align: top; }
table.infobox th, table.infobox td{
table.infobox th { text-align: left; }
  padding:.2em .4em;           /* enwiki padding */
  vertical-align:top;
}
table.infobox th{ text-align:left; }
table.infobox th.infobox-title{
  /* title styling (light mode); center + 125% */
  text-align:center;
  font-size:125%;
  font-weight:bold;
  background:var(--ib-title-bg, #cfe3a3); /* uses |color= if set */
}
/* Wrap very long strings/URLs so width stays 270px */
table.infobox td{ overflow-wrap:anywhere; word-break:break-word; }


/* Title: centered, 125%, uses custom color if provided */
/* ===== Dark theme via skin toggle ===== */
table.infobox th.infobox-title {
html.skin-theme-clientpref-night table.infobox{
   text-align: center;         /* centering */
   background:#202124; border-color:#5f6368; color:#e8eaed;
  font-size: 125%;           /* size */
  font-weight: bold;
  background: var(--ib-title-bg, #cfe3a3); /* uses |color= if set */
}
}
 
html.skin-theme-clientpref-night table.infobox th{
/* === Dark theme via skin toggle (ignore custom color) === */
   background:#2a2b2e; color:#e8eaed;
html.skin-theme-clientpref-night table.infobox {
   background: #202124;
  border-color: #5f6368;
  color: #e8eaed;
}
}
html.skin-theme-clientpref-night table.infobox th { color: #e8eaed; }
html.skin-theme-clientpref-night table.infobox th.infobox-title{
html.skin-theme-clientpref-night table.infobox th.infobox-title {
   background:#323f2b; color:#e8eaed;    /* ignore |color= in dark */
   background: #323f2b; /* fixed dark header; overrides any --ib-title-bg */
  color: #e8eaed;
}
}


/* Optional: link colors inside infobox in dark mode */
/* Optional: link colors inside infobox in dark */
html.skin-theme-clientpref-night table.infobox a { color: #8ab4f8; }
html.skin-theme-clientpref-night table.infobox a{ color:#8ab4f8; }
html.skin-theme-clientpref-night table.infobox a:visited { color: #c58af9; }
html.skin-theme-clientpref-night table.infobox a:visited{ color:#c58af9; }
 
/* phone styles */
@media (max-width:600px){ table.infobox{ width:100%; max-width:none; float:none; margin:0 0 1em 0; } }

Revision as of 22:23, 1 October 2025

/* ===== Infobox (light theme default) ===== */
table.infobox{
  width:270px;                 /* fixed like enwiki */
  max-width:270px;
  box-sizing:border-box;       /* include border in the 270px */
  float:right; clear:right;
  margin:0 0 1em 1em;
  border:1px solid #a2a9b1;
  background:#f8f9fa;
  color:inherit;
  font-size:90%;
  line-height:1.5em;           /* enwiki-ish line height */
  border-collapse:collapse;
}
table.infobox th, table.infobox td{
  padding:.2em .4em;           /* enwiki padding */
  vertical-align:top;
}
table.infobox th{ text-align:left; }
table.infobox th.infobox-title{
  /* title styling (light mode); center + 125% */
  text-align:center;
  font-size:125%;
  font-weight:bold;
  background:var(--ib-title-bg, #cfe3a3); /* uses |color= if set */
}
/* Wrap very long strings/URLs so width stays 270px */
table.infobox td{ overflow-wrap:anywhere; word-break:break-word; }

/* ===== Dark theme via skin toggle ===== */
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 table.infobox th.infobox-title{
  background:#323f2b; color:#e8eaed;    /* ignore |color= in dark */
}

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

/* phone styles */
@media (max-width:600px){ table.infobox{ width:100%; max-width:none; float:none; margin:0 0 1em 0; } }