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 base (light theme default) ===== */
table.infobox{
table.infobox{
   width:22em;                 /* fixed like enwiki */
   width:22em; max-width:22em; box-sizing:border-box;
  max-width:22em;
   float:right; clear:right; margin:0 0 1em 1em;
  box-sizing:border-box;       /* include border in the 270px */
   border:1px solid #a2a9b1; background:#f8f9fa; color:inherit;
   float:right; clear:right;
   font-size:90%; line-height:1.5em;
  margin:0 0 1em 1em;
  /* use 'separate' so table padding works like enwiki */
   border:1px solid #a2a9b1;
   border-collapse:separate; border-spacing:0; padding:.35em;
  background:#f8f9fa;
  color:inherit;
   font-size:90%;
  line-height:1.5em;           /* enwiki-ish line height */
   border-collapse:collapse;
}
}
table.infobox th, table.infobox td{
table.infobox th, table.infobox td{
   padding:.2em .4em;           /* enwiki padding */
   padding:.2em .45em;         /* enwiki-ish cell padding */
   vertical-align:top;
   vertical-align:top;
}
}
table.infobox th{ text-align:left; }
table.infobox th{ text-align:left; }
/* Title — no background by default; 125% and centered */
table.infobox th.infobox-title{
table.infobox th.infobox-title{
  /* title styling (light mode); center + 125% */
   text-align:center;
   text-align:center;
   font-size:125%;
   font-size:125%;
   font-weight:bold;
   font-weight:bold;
   background:var(--ib-title-bg, #cfe3a3); /* uses |color= if set */
  background:transparent;      /* default: none */
  padding:.35em .45em .3em;
}
 
/* Only apply color when |color= was set (module adds class + CSS var) */
table.infobox th.infobox-title.has-title-color{
   background:var(--ib-title-bg);
}
}
/* Wrap very long strings/URLs so width stays 270px */
 
/* Image row: remove padding so image can touch the inner edges; make image 100% */
table.infobox td.infobox-image-cell{
  padding:0;
}
table.infobox td.infobox-image-cell img{
  display:block; width:100%; height:auto;
}
 
/* Prevent long strings from breaking layout */
table.infobox td{ overflow-wrap:anywhere; word-break:break-word; }
table.infobox td{ overflow-wrap:anywhere; word-break:break-word; }


/* ===== Dark theme via skin toggle ===== */
/* ===== Dark theme (skin toggle) ===== */
html.skin-theme-clientpref-night table.infobox{
html.skin-theme-clientpref-night table.infobox{
   background:#202124; border-color:#5f6368; color:#e8eaed;
   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{
html.skin-theme-clientpref-night table.infobox th.infobox-title{
   background:#323f2b; color:#e8eaed;   /* ignore |color= in dark */
  /* ignore |color= in dark mode */
   background:#323f2b; color:#e8eaed;
}
}
/* 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:35, 1 October 2025

/* ===== Infobox base (light theme default) ===== */
table.infobox{
  width:22em; max-width:22em; box-sizing:border-box;
  float:right; clear:right; margin:0 0 1em 1em;
  border:1px solid #a2a9b1; background:#f8f9fa; color:inherit;
  font-size:90%; line-height:1.5em;
  /* use 'separate' so table padding works like enwiki */
  border-collapse:separate; border-spacing:0; padding:.35em;
}

table.infobox th, table.infobox td{
  padding:.2em .45em;          /* enwiki-ish cell padding */
  vertical-align:top;
}
table.infobox th{ text-align:left; }

/* Title — no background by default; 125% and centered */
table.infobox th.infobox-title{
  text-align:center;
  font-size:125%;
  font-weight:bold;
  background:transparent;      /* default: none */
  padding:.35em .45em .3em;
}

/* Only apply color when |color= was set (module adds class + CSS var) */
table.infobox th.infobox-title.has-title-color{
  background:var(--ib-title-bg);
}

/* Image row: remove padding so image can touch the inner edges; make image 100% */
table.infobox td.infobox-image-cell{
  padding:0;
}
table.infobox td.infobox-image-cell img{
  display:block; width:100%; height:auto;
}

/* Prevent long strings from breaking layout */
table.infobox td{ overflow-wrap:anywhere; word-break:break-word; }

/* ===== Dark theme (skin toggle) ===== */
html.skin-theme-clientpref-night table.infobox{
  background:#202124; border-color:#5f6368; color:#e8eaed;
}
html.skin-theme-clientpref-night table.infobox th.infobox-title{
  /* ignore |color= in dark mode */
  background:#323f2b; color:#e8eaed;
}
html.skin-theme-clientpref-night table.infobox a{ color:#8ab4f8; }
html.skin-theme-clientpref-night table.infobox a:visited{ color:#c58af9; }