Jump to content

Template:Infobox/styles.css: Difference between revisions

From Spike Wiki
>Kypho
Created page with "Spike Wiki – Infobox (TemplateStyles): .infobox{ float:right; max-width:340px; background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:12px; margin:0 0 12px 16px; font-size:14px; box-shadow:0 1px 0 rgba(0,0,0,.02) } .infobox .ib-title{font-weight:600;font-size:18px;margin:4px 0 8px} .infobox .ib-img{margin:6px 0;border-radius:10px;overflow:hidden} .infobox .ib-row{ display:flex; justify-content:space-between; gap:12px; padding:6px 0; borde..."
 
Fix TemplateStyles infobox selector scoping
 
(25 intermediate revisions by 2 users not shown)
Line 1: Line 1:
/* Spike Wiki – Infobox (TemplateStyles) */
table.infobox{
.infobox{
   float:right;
   float:right; max-width:340px; background:#fff; border:1px solid #e5e7eb;
  clear:right;
   border-radius:12px; padding:12px; margin:0 0 12px 16px; font-size:14px;
  width:22em;
   box-shadow:0 1px 0 rgba(0,0,0,.02)
  max-width:100%;
  margin:0 0 1em 1.4em;
  border:1px solid #a2a9b1;
   border-collapse:collapse;
  background:#f8f9fa;
  color:#202122;
  font-size:88%;
   line-height:1.5;
}
}
.infobox .ib-title{font-weight:600;font-size:18px;margin:4px 0 8px}
table.infobox .infobox-title{
.infobox .ib-img{margin:6px 0;border-radius:10px;overflow:hidden}
  padding:.45em .6em;
.infobox .ib-row{
  text-align:center;
   display:flex; justify-content:space-between; gap:12px;
  font-weight:700;
   padding:6px 0; border-top:1px solid #f1f5f9; line-height:1.35
  font-size:125%;
   color:#202122;
  background:#eaecf0;
   border:1px solid #a2a9b1;
  border-width:0 0 1px;
}
}
.infobox .ib-label{color:#64748b;white-space:nowrap}
table.infobox .infobox-image{
.infobox a{ text-decoration:none }
  padding:.5em;
.infobox a:hover{ text-decoration:underline }
  text-align:center;
 
  background:#ffffff;
/* Minerva / narrow screens: stack and remove float */
}
@media (max-width: 900px){
table.infobox .infobox-image img{
   .infobox{ float:none; max-width:100%; margin:0 0 12px 0 }
  display:block;
  max-width:100%;
  height:auto;
  margin:0 auto;
  border:1px solid #c8ccd1;
  border-radius:0;
  box-shadow:none;
}
table.infobox .infobox-caption{
  padding:0 .6em .6em;
  text-align:center;
  color:#54595d;
  font-size:95%;
  background:#ffffff;
}
table.infobox th,
table.infobox td{
  padding:.35em .6em;
  border:1px solid #eaecf0;
  vertical-align:top;
}
table.infobox th{
  width:35%;
  text-align:left;
  color:#202122;
  background:#eaecf0;
  font-weight:600;
}
table.infobox td{
  color:#202122;
  background:#ffffff;
}
table.infobox td a.external{
  overflow-wrap:anywhere;
}
@media (max-width:980px){
   table.infobox{
    float:none;
    width:100%;
    margin:0 0 1em;
  }
}
@media (max-width:720px){
  table.infobox{
    font-size:84%;
    line-height:1.4;
  }
  table.infobox .infobox-title{
    padding:.38em .5em;
    font-size:112%;
  }
  table.infobox .infobox-image{
    padding:.35em;
  }
  table.infobox th,
  table.infobox td{
    padding:.3em .45em;
  }
}
}

Latest revision as of 02:26, 17 April 2026

table.infobox{
  float:right;
  clear:right;
  width:22em;
  max-width:100%;
  margin:0 0 1em 1.4em;
  border:1px solid #a2a9b1;
  border-collapse:collapse;
  background:#f8f9fa;
  color:#202122;
  font-size:88%;
  line-height:1.5;
}
table.infobox .infobox-title{
  padding:.45em .6em;
  text-align:center;
  font-weight:700;
  font-size:125%;
  color:#202122;
  background:#eaecf0;
  border:1px solid #a2a9b1;
  border-width:0 0 1px;
}
table.infobox .infobox-image{
  padding:.5em;
  text-align:center;
  background:#ffffff;
}
table.infobox .infobox-image img{
  display:block;
  max-width:100%;
  height:auto;
  margin:0 auto;
  border:1px solid #c8ccd1;
  border-radius:0;
  box-shadow:none;
}
table.infobox .infobox-caption{
  padding:0 .6em .6em;
  text-align:center;
  color:#54595d;
  font-size:95%;
  background:#ffffff;
}
table.infobox th,
table.infobox td{
  padding:.35em .6em;
  border:1px solid #eaecf0;
  vertical-align:top;
}
table.infobox th{
  width:35%;
  text-align:left;
  color:#202122;
  background:#eaecf0;
  font-weight:600;
}
table.infobox td{
  color:#202122;
  background:#ffffff;
}
table.infobox td a.external{
  overflow-wrap:anywhere;
}
@media (max-width:980px){
  table.infobox{
    float:none;
    width:100%;
    margin:0 0 1em;
  }
}
@media (max-width:720px){
  table.infobox{
    font-size:84%;
    line-height:1.4;
  }
  table.infobox .infobox-title{
    padding:.38em .5em;
    font-size:112%;
  }
  table.infobox .infobox-image{
    padding:.35em;
  }
  table.infobox th,
  table.infobox td{
    padding:.3em .45em;
  }
}