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 |
||
(8 intermediate revisions by the same user not shown) | |||
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: | font-size: 125%; | ||
font-weight: bold; | |||
padding: 0.2em; | |||
text-align: center; | |||
} | } | ||
.infobox td, .infobox th { | .infobox td, | ||
.infobox th { | |||
vertical-align: top; | vertical-align: top; | ||
/* @noflip */ | |||
text-align: left; | 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; | 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 | |||
.infobox.bordered .mergedrow td, | |||
.infobox.bordered .mergedrow th { | |||
border: 0; | |||
/* @noflip */ | |||
border-right: 1px solid #a2a9b1; | |||
} | } | ||
. | .infobox .plainlist .studio-sessions { | ||
padding: 0; | |||
} | } | ||
.infobox .plainlist .studio-sessions li { | |||
. | list-style: disc; | ||
margin-left: 12px; | |||
} | } | ||
. | |||
min-width: 100%; | /** MOBILE **/ | ||
@media (max-width: 720px) { | |||
.infobox { | |||
font-size: 90%; | |||
position: relative; | |||
border: 1px solid #eaecf0; | |||
background-color: #f8f9fa !important; | |||
display: flex; | |||
flex: 1 1 100%; | |||
flex-flow: column nowrap; | |||
width: 100% !important; | |||
max-width: 100% !important; | |||
} | |||
.infobox td, .infobox th { | |||
vertical-align: top; | |||
text-align: left; | |||
} | |||
.infobox th, | |||
.infobox td { | |||
vertical-align: top; | |||
border: 0; | |||
border-bottom: 1px solid #eaecf0; | |||
padding: 7px 10px; | |||
} | |||
.infobox > tbody, | |||
.infobox > caption { | |||
display: flex; | |||
flex-flow: column nowrap; | |||
} | |||
.infobox caption { | |||
padding: 10px 10px 0; | |||
text-align: center; | |||
} | |||
.infobox caption { | |||
font-size: 125%; | |||
font-weight: bold; | |||
text-align: center; | |||
} | |||
.infobox tbody > tr > td, | |||
.infobox tbody > tr > th { | |||
flex: 1 0; | |||
} | |||
.infobox td:only-child, | |||
.infobox th:only-child { | |||
display: block; | |||
width: 100%; | |||
box-sizing: border-box; | |||
} | |||
.infobox > tbody > tr { | |||
min-width: 100%; | |||
display: flex; | |||
flex-flow: row nowrap; | |||
} | |||
} | } |
Latest revision as of 20:36, 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;
}
.infobox .plainlist .studio-sessions {
padding: 0;
}
.infobox .plainlist .studio-sessions li {
list-style: disc;
margin-left: 12px;
}
/** MOBILE **/
@media (max-width: 720px) {
.infobox {
font-size: 90%;
position: relative;
border: 1px solid #eaecf0;
background-color: #f8f9fa !important;
display: flex;
flex: 1 1 100%;
flex-flow: column nowrap;
width: 100% !important;
max-width: 100% !important;
}
.infobox td, .infobox th {
vertical-align: top;
text-align: left;
}
.infobox th,
.infobox td {
vertical-align: top;
border: 0;
border-bottom: 1px solid #eaecf0;
padding: 7px 10px;
}
.infobox > tbody,
.infobox > caption {
display: flex;
flex-flow: column nowrap;
}
.infobox caption {
padding: 10px 10px 0;
text-align: center;
}
.infobox caption {
font-size: 125%;
font-weight: bold;
text-align: center;
}
.infobox tbody > tr > td,
.infobox tbody > tr > th {
flex: 1 0;
}
.infobox td:only-child,
.infobox th:only-child {
display: block;
width: 100%;
box-sizing: border-box;
}
.infobox > tbody > tr {
min-width: 100%;
display: flex;
flex-flow: row nowrap;
}
}