Template:Infobox/styles.css: Difference between revisions

Fix TemplateStyles-safe infobox styles
Fix TemplateStyles infobox selector scoping
 
(2 intermediate revisions by the same user not shown)
Line 1: Line 1:
.mw-parser-output table.infobox{
table.infobox{
   float:right;
   float:right;
   clear:right;
   clear:right;
   width:340px;
   width:22em;
   max-width:100%;
   max-width:100%;
   margin:0 0 1.5rem 1.5rem;
   margin:0 0 1em 1.4em;
   border:1px solid #d7e1ec;
   border:1px solid #a2a9b1;
   border-collapse:separate;
   border-collapse:collapse;
  border-spacing:0;
   background:#f8f9fa;
  border-radius:20px;
   color:#202122;
  overflow:hidden;
   font-size:88%;
   background:linear-gradient(180deg,#ffffff,#f7fbfd);
   line-height:1.5;
   box-shadow:0 18px 42px rgba(17,35,62,.12);
   font-size:92%;
   line-height:1.55;
}
}
.mw-parser-output table.infobox .infobox-title{
table.infobox .infobox-title{
   padding:.8rem 1rem;
   padding:.45em .6em;
   text-align:center;
   text-align:center;
   font-weight:700;
   font-weight:700;
   font-size:1.08rem;
   font-size:125%;
   color:#ffffff;
   color:#202122;
   background:linear-gradient(135deg,#124e63,#1d7c8a);
   background:#eaecf0;
   border:0;
  border:1px solid #a2a9b1;
   border-width:0 0 1px;
}
}
.mw-parser-output table.infobox .infobox-image{
table.infobox .infobox-image{
   padding:1rem;
   padding:.5em;
   text-align:center;
   text-align:center;
   background:linear-gradient(180deg,#eef6fb,rgba(255,255,255,.92));
   background:#ffffff;
}
}
.mw-parser-output table.infobox .infobox-image img{
table.infobox .infobox-image img{
   display:block;
   display:block;
   width:100%;
   max-width:100%;
   height:auto;
   height:auto;
   border-radius:16px;
  margin:0 auto;
   box-shadow:0 14px 30px rgba(17,35,62,.16);
  border:1px solid #c8ccd1;
   border-radius:0;
   box-shadow:none;
}
}
.mw-parser-output table.infobox .infobox-caption{
table.infobox .infobox-caption{
   padding:0 1rem 1rem;
   padding:0 .6em .6em;
   text-align:center;
   text-align:center;
   color:#5b6f84;
   color:#54595d;
   font-size:.88rem;
   font-size:95%;
   background:linear-gradient(180deg,#eef6fb,rgba(255,255,255,.92));
   background:#ffffff;
}
}
.mw-parser-output table.infobox th,
table.infobox th,
.mw-parser-output table.infobox td{
table.infobox td{
   padding:.72rem .95rem;
   padding:.35em .6em;
   border-top:1px solid #e6edf4;
   border:1px solid #eaecf0;
   vertical-align:top;
   vertical-align:top;
}
}
.mw-parser-output table.infobox th{
table.infobox th{
   width:34%;
   width:35%;
   text-align:left;
   text-align:left;
   color:#35516b;
   color:#202122;
   background:#f8fbfe;
   background:#eaecf0;
   font-weight:700;
   font-weight:600;
}
}
.mw-parser-output table.infobox td{
table.infobox td{
   color:#18324b;
   color:#202122;
  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%;
     margin:0 0 1.25rem;
     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;
   }
   }
}
}