Template:Infobox/styles.css: Difference between revisions
MusikAnimal (talk | contribs) (Created page with "@media (min-width: 720px) { .content .infobox { margin: 0.5em 0 1em 35px !important; max-width: 340px !important; width: auto !important; float: right !important; c...") |
MusikAnimal (talk | contribs) No edit summary |
||
Line 1: | Line 1: | ||
.infobox { | |||
border: 1px solid #a2a9b1; | |||
border-spacing: 3px; | |||
background-color: #f8f9fa; | |||
color: black; | |||
/* @noflip */ | |||
margin: 0.5em 0 0.5em 1em; | |||
padding: 0.2em; | |||
/* @noflip */ | |||
float: right; | |||
/* @noflip */ | |||
clear: right; | |||
font-size: 88%; | |||
line-height: 1.5em; | |||
} | |||
.infobox caption { | |||
font-size: 125%; | |||
font-weight: bold; | |||
padding: 0.2em; | |||
text-align: center; | |||
} | |||
.infobox td, | |||
.infobox th { | |||
vertical-align: top; | |||
/* @noflip */ | |||
text-align: left; | |||
} | |||
.infobox.bordered { | |||
border-collapse: collapse; | |||
} | |||
.infobox.bordered td, | |||
.infobox.bordered th { | |||
border: 1px solid #a2a9b1; | |||
} | |||
.infobox.bordered .borderless td, | |||
.infobox.bordered .borderless th { | |||
border: 0; | |||
} | |||
.infobox.sisterproject { | |||
width: 20em; | |||
font-size: 90%; | |||
} | |||
.infobox.standard-talk { | |||
border: 1px solid #c0c090; | |||
background-color: #f8eaba; | |||
} | |||
.infobox.standard-talk.bordered td, | |||
.infobox.standard-talk.bordered th { | |||
border: 1px solid #c0c090; | |||
} | |||
/* styles for bordered infobox with merged rows */ | |||
.infobox.bordered .mergedtoprow td, | |||
.infobox.bordered .mergedtoprow th { | |||
border: 0; | |||
border-top: 1px solid #a2a9b1; | |||
/* @noflip */ | |||
border-right: 1px solid #a2a9b1; | |||
} | |||
.infobox.bordered .mergedrow td, | |||
.infobox.bordered .mergedrow th { | |||
border: 0; | |||
/* @noflip */ | |||
border-right: 1px solid #a2a9b1; | |||
} | |||
@media (min-width: 720px) { | @media (min-width: 720px) { | ||
.content .infobox { | .content .infobox { | ||
Line 14: | Line 83: | ||
padding: 0; | padding: 0; | ||
} | } | ||
.content .infobox { | .content .infobox { | ||
font-size: 90%; | |||
position: relative; | |||
border: 1px solid #eaecf0; | |||
background-color: #f8f9fa; | |||
display: flex; | |||
flex: 1 1 100%; | |||
flex-flow: column nowrap; | |||
} | } | ||
.infobox td, .infobox th { | .infobox td, .infobox th { | ||
vertical-align: top; | |||
text-align: left; | |||
} | } | ||
.content .infobox th, | .content .infobox th, | ||
.content .infobox td { | .content .infobox td { | ||
vertical-align: top; | |||
border: 0; | |||
border-bottom: 1px solid #eaecf0; | |||
padding: 7px 10px; | |||
} | } | ||
.content .infobox > tbody, | .content .infobox > tbody, | ||
.content .infobox > caption { | .content .infobox > caption { | ||
display: flex; | |||
flex-flow: column nowrap; | |||
} | } | ||
.content .infobox caption { | .content .infobox caption { | ||
padding: 10px 10px 0; | |||
text-align: center; | |||
} | } | ||
.infobox caption { | .infobox caption { | ||
font-size: 125%; | |||
font-weight: bold; | |||
text-align: center; | |||
} | } | ||
.content .infobox tbody > tr > td, | .content .infobox tbody > tr > td, | ||
.content .infobox tbody > tr > th { | .content .infobox tbody > tr > th { | ||
flex: 1 0; | |||
} | } | ||
.content .infobox td:only-child, | .content .infobox td:only-child, | ||
.content .infobox th:only-child { | .content .infobox th:only-child { | ||
display: block; | |||
width: 100%; | |||
box-sizing: border-box; | |||
} | } | ||
.content .infobox > tbody > tr { | .content .infobox > tbody > tr { | ||
min-width: 100%; | |||
display: flex; | |||
flex-flow: row nowrap; | |||
} | |||
} | } |
Revision as of 04:18, 28 October 2020
.infobox {
border: 1px solid #a2a9b1;
border-spacing: 3px;
background-color: #f8f9fa;
color: black;
/* @noflip */
margin: 0.5em 0 0.5em 1em;
padding: 0.2em;
/* @noflip */
float: right;
/* @noflip */
clear: right;
font-size: 88%;
line-height: 1.5em;
}
.infobox caption {
font-size: 125%;
font-weight: bold;
padding: 0.2em;
text-align: center;
}
.infobox td,
.infobox th {
vertical-align: top;
/* @noflip */
text-align: left;
}
.infobox.bordered {
border-collapse: collapse;
}
.infobox.bordered td,
.infobox.bordered th {
border: 1px solid #a2a9b1;
}
.infobox.bordered .borderless td,
.infobox.bordered .borderless th {
border: 0;
}
.infobox.sisterproject {
width: 20em;
font-size: 90%;
}
.infobox.standard-talk {
border: 1px solid #c0c090;
background-color: #f8eaba;
}
.infobox.standard-talk.bordered td,
.infobox.standard-talk.bordered th {
border: 1px solid #c0c090;
}
/* styles for bordered infobox with merged rows */
.infobox.bordered .mergedtoprow td,
.infobox.bordered .mergedtoprow th {
border: 0;
border-top: 1px solid #a2a9b1;
/* @noflip */
border-right: 1px solid #a2a9b1;
}
.infobox.bordered .mergedrow td,
.infobox.bordered .mergedrow th {
border: 0;
/* @noflip */
border-right: 1px solid #a2a9b1;
}
@media (min-width: 720px) {
.content .infobox {
margin: 0.5em 0 1em 35px !important;
max-width: 340px !important;
width: auto !important;
float: right !important;
clear: right !important;
}
.hlist dl,
.hlist ol,
.hlist ul {
margin: 0;
padding: 0;
}
.content .infobox {
font-size: 90%;
position: relative;
border: 1px solid #eaecf0;
background-color: #f8f9fa;
display: flex;
flex: 1 1 100%;
flex-flow: column nowrap;
}
.infobox td, .infobox th {
vertical-align: top;
text-align: left;
}
.content .infobox th,
.content .infobox td {
vertical-align: top;
border: 0;
border-bottom: 1px solid #eaecf0;
padding: 7px 10px;
}
.content .infobox > tbody,
.content .infobox > caption {
display: flex;
flex-flow: column nowrap;
}
.content .infobox caption {
padding: 10px 10px 0;
text-align: center;
}
.infobox caption {
font-size: 125%;
font-weight: bold;
text-align: center;
}
.content .infobox tbody > tr > td,
.content .infobox tbody > tr > th {
flex: 1 0;
}
.content .infobox td:only-child,
.content .infobox th:only-child {
display: block;
width: 100%;
box-sizing: border-box;
}
.content .infobox > tbody > tr {
min-width: 100%;
display: flex;
flex-flow: row nowrap;
}
}