Jump to content

Template:Infobox/styles.css: Difference between revisions

From Spike Wiki
Tighten mobile infobox sizing
Fix TemplateStyles infobox selector scoping
 
Line 1: Line 1:
.mw-parser-output table.infobox{
table.infobox{
   float:right;
   float:right;
   clear:right;
   clear:right;
Line 12: Line 12:
   line-height:1.5;
   line-height:1.5;
}
}
.mw-parser-output table.infobox .infobox-title{
table.infobox .infobox-title{
   padding:.45em .6em;
   padding:.45em .6em;
   text-align:center;
   text-align:center;
Line 22: Line 22:
   border-width:0 0 1px;
   border-width:0 0 1px;
}
}
.mw-parser-output table.infobox .infobox-image{
table.infobox .infobox-image{
   padding:.5em;
   padding:.5em;
   text-align:center;
   text-align:center;
   background:#ffffff;
   background:#ffffff;
}
}
.mw-parser-output table.infobox .infobox-image img{
table.infobox .infobox-image img{
   display:block;
   display:block;
   max-width:100%;
   max-width:100%;
Line 36: Line 36:
   box-shadow:none;
   box-shadow:none;
}
}
.mw-parser-output table.infobox .infobox-caption{
table.infobox .infobox-caption{
   padding:0 .6em .6em;
   padding:0 .6em .6em;
   text-align:center;
   text-align:center;
Line 43: Line 43:
   background:#ffffff;
   background:#ffffff;
}
}
.mw-parser-output table.infobox th,
table.infobox th,
.mw-parser-output table.infobox td{
table.infobox td{
   padding:.35em .6em;
   padding:.35em .6em;
   border:1px solid #eaecf0;
   border:1px solid #eaecf0;
   vertical-align:top;
   vertical-align:top;
}
}
.mw-parser-output table.infobox th{
table.infobox th{
   width:35%;
   width:35%;
   text-align:left;
   text-align:left;
Line 56: Line 56:
   font-weight:600;
   font-weight:600;
}
}
.mw-parser-output table.infobox td{
table.infobox td{
   color:#202122;
   color:#202122;
   background:#ffffff;
   background:#ffffff;
}
}
.mw-parser-output table.infobox td a.external{
table.infobox td a.external{
   overflow-wrap:anywhere;
   overflow-wrap:anywhere;
}
}
@media (max-width:980px){
@media (max-width:980px){
   .mw-parser-output table.infobox{
   table.infobox{
     float:none;
     float:none;
     width:100%;
     width:100%;
Line 71: Line 71:
}
}
@media (max-width:720px){
@media (max-width:720px){
   .mw-parser-output table.infobox{
   table.infobox{
     font-size:84%;
     font-size:84%;
     line-height:1.4;
     line-height:1.4;
   }
   }
   .mw-parser-output table.infobox .infobox-title{
   table.infobox .infobox-title{
     padding:.38em .5em;
     padding:.38em .5em;
     font-size:112%;
     font-size:112%;
   }
   }
   .mw-parser-output table.infobox .infobox-image{
   table.infobox .infobox-image{
     padding:.35em;
     padding:.35em;
   }
   }
   .mw-parser-output table.infobox th,
   table.infobox th,
   .mw-parser-output table.infobox td{
   table.infobox td{
     padding:.3em .45em;
     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;
  }
}