MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
/* | /* ========================================================= | ||
CLASSIC MEDIAWIKI COLLAPSIBLE SECTIONS | |||
========================================================= */ | |||
.pravaha-collapse { | |||
clear: both !important; | |||
margin: 0.5em 0 !important; | |||
overflow: hidden !important; | |||
border: 1px solid #a2a9b1 !important; | |||
border-radius: 0 !important; | |||
background: #f8f9fa !important; | |||
box-shadow: none !important; | |||
box-sizing: border-box !important; | |||
} | |||
.pravaha-collapse-title { | |||
display: flex !important; | |||
min-height: 0 !important; | |||
padding: 0.4em 0.6em !important; | |||
align-items: center !important; | |||
gap: 0 !important; | |||
background: #eaecf0 !important; | |||
color: #202122 !important; | |||
font-family: sans-serif !important; | |||
font-size: 14px !important; | |||
font-weight: bold !important; | |||
line-height: 1.6 !important; | |||
} | |||
.pravaha-collapse-open, | |||
.pravaha-collapse-close { | |||
order: 2 !important; | |||
flex: none !important; | |||
width: auto !important; | |||
height: auto !important; | |||
margin: 0 0 0 auto !important; | |||
padding: 0 0 0 1em !important; | |||
border: 0 !important; | |||
border-radius: 0 !important; | |||
background: transparent !important; | |||
box-shadow: none !important; | |||
color: #36c !important; | |||
font-size: 0 !important; | |||
font-weight: normal !important; | |||
line-height: inherit !important; | |||
text-align: right !important; | |||
} | |||
.pravaha-collapse-open { | |||
display: inline-block !important; | |||
} | |||
.pravaha-collapse-close { | |||
display: none !important; | |||
} | |||
.pravaha-collapse-open a, | |||
.pravaha-collapse-close a { | |||
display: inline !important; | |||
width: auto !important; | |||
height: auto !important; | |||
margin: 0 !important; | |||
padding: 0 !important; | |||
border: 0 !important; | |||
background: transparent !important; | |||
color: #36c !important; | |||
font-size: 0 !important; | |||
font-weight: normal !important; | |||
line-height: inherit !important; | |||
text-decoration: none !important; | |||
} | |||
.pravaha-collapse-open a::after { | |||
content: "[expand]"; | |||
font-size: 12px !important; | |||
font-weight: normal !important; | |||
} | |||
.pravaha-collapse-close a::after { | |||
content: "[collapse]"; | |||
font-size: 12px !important; | |||
font-weight: normal !important; | |||
} | |||
.pravaha-collapse-open a:hover::after, | |||
.pravaha-collapse-close a:hover::after { | |||
color: #2a4b8d !important; | |||
text-decoration: underline !important; | |||
} | |||
.pravaha-collapse-content { | |||
display: none !important; | |||
padding: 0.75em !important; | |||
border-top: 1px solid #a2a9b1 !important; | |||
background: #fff !important; | |||
color: #202122 !important; | |||
} | |||
.pravaha-collapse:target .pravaha-collapse-content { | |||
display: block !important; | |||
} | |||
.pravaha-collapse:target .pravaha-collapse-open { | |||
display: none !important; | |||
} | |||
.pravaha-collapse:target .pravaha-collapse-close { | |||
display: inline-block !important; | |||
} | |||
/* ========================================================= | |||
SUMMARY EXPAND / COLLAPSE | |||
========================================================= */ | |||
#pravaha-abstract { | |||
box-sizing: border-box !important; | |||
} | |||
#pravaha-abstract .bjs-abstract-controls { | |||
display: flex !important; | |||
width: 100% !important; | |||
align-items: center !important; | |||
} | |||
#pravaha-abstract .bjs-abstract-open, | |||
#pravaha-abstract .bjs-abstract-close { | |||
order: 2 !important; | |||
margin-left: auto !important; | |||
padding-left: 1em !important; | |||
font-size: 0 !important; | |||
font-weight: normal !important; | |||
} | |||
#pravaha-abstract .bjs-abstract-open { | |||
display: inline-block !important; | |||
} | |||
#pravaha-abstract .bjs-abstract-close { | |||
display: none !important; | |||
} | |||
#pravaha-abstract .bjs-abstract-open a, | |||
#pravaha-abstract .bjs-abstract-close a { | |||
color: #36c !important; | |||
font-size: 0 !important; | |||
font-weight: normal !important; | |||
text-decoration: none !important; | |||
} | |||
#pravaha-abstract .bjs-abstract-open a::after { | |||
content: "[expand]"; | |||
font-size: 12px !important; | |||
} | |||
#pravaha-abstract .bjs-abstract-close a::after { | |||
content: "[collapse]"; | |||
font-size: 12px !important; | |||
} | |||
#pravaha-abstract .bjs-abstract-open a:hover::after, | |||
#pravaha-abstract .bjs-abstract-close a:hover::after { | |||
color: #2a4b8d !important; | |||
text-decoration: underline !important; | |||
} | |||
#pravaha-abstract .bjs-abstract-preview { | |||
display: block !important; | |||
} | |||
#pravaha-abstract .bjs-abstract-full { | |||
display: none !important; | |||
} | |||
/* Expanded Summary */ | |||
#pravaha-abstract:target .bjs-abstract-preview { | |||
display: none !important; | |||
} | |||
#pravaha-abstract:target .bjs-abstract-full { | |||
display: block !important; | |||
} | |||
#pravaha-abstract:target .bjs-abstract-open { | |||
display: none !important; | |||
} | |||
#pravaha-abstract:target .bjs-abstract-close { | |||
display: inline-block !important; | |||
} | |||
/* ========================================================= | |||
INFOBOX IMAGE GRID | |||
========================================================= */ | |||
.mw-parser-output table.infobox { | |||
box-sizing: border-box !important; | |||
} | |||
.mw-parser-output table.infobox > tbody > tr:first-child > td[colspan="2"] { | |||
padding: 0 !important; | |||
overflow: hidden !important; | |||
background: #fff !important; | |||
} | |||
.mw-parser-output | |||
table.infobox | |||
> tbody | |||
> tr:first-child | |||
> td[colspan="2"] | |||
> table { | |||
width: 100% !important; | |||
table-layout: fixed !important; | |||
border-collapse: collapse !important; | |||
border-spacing: 0 !important; | |||
} | |||
.mw-parser-output | |||
table.infobox | |||
> tbody | |||
> tr:first-child | |||
> td[colspan="2"] | |||
> table | |||
td { | |||
height: 115px !important; | |||
padding: 3px !important; | |||
overflow: hidden !important; | |||
vertical-align: middle !important; | |||
background: #fff !important; | |||
box-sizing: border-box !important; | |||
} | |||
.mw-parser-output | |||
table.infobox | |||
> tbody | |||
> tr:first-child | |||
> td[colspan="2"] | |||
> table | |||
figure { | |||
display: block !important; | |||
width: 100% !important; | |||
height: 100% !important; | |||
margin: 0 !important; | |||
padding: 0 !important; | |||
overflow: hidden !important; | |||
} | |||
.mw-parser-output | |||
table.infobox | |||
> tbody | |||
> tr:first-child | |||
> td[colspan="2"] | |||
> table | |||
figure | |||
a { | |||
display: block !important; | |||
width: 100% !important; | |||
height: 100% !important; | |||
margin: 0 !important; | |||
padding: 0 !important; | |||
} | |||
.mw-parser-output | |||
table.infobox | |||
> tbody | |||
> tr:first-child | |||
> td[colspan="2"] | |||
> table | |||
img { | |||
display: block !important; | |||
width: 100% !important; | |||
height: 115px !important; | |||
max-width: none !important; | |||
margin: 0 !important; | |||
object-fit: cover !important; | |||
object-position: center !important; | |||
} | |||
/* Full-width image row */ | |||
.mw-parser-output | |||
table.infobox | |||
> tbody | |||
> tr:first-child | |||
> td[colspan="2"] | |||
> table | |||
td[colspan="2"] { | |||
height: 145px !important; | |||
} | |||
.mw-parser-output | |||
table.infobox | |||
> tbody | |||
> tr:first-child | |||
> td[colspan="2"] | |||
> table | |||
td[colspan="2"] | |||
img { | |||
height: 145px !important; | |||
} | |||
/* ========================================================= | |||
WORD COUNT AND READING TIME — CLASSIC WIKI STYLE | |||
The border-spacing selector prevents this from affecting | |||
the infobox and Summary table. | |||
========================================================= */ | |||
.mw-parser-output | |||
> table[style*="float:right"][style*="width:300px"][style*="border-spacing:6px"] { | |||
float: right !important; | |||
clear: right !important; | |||
width: 300px !important; | |||
max-width: 100% !important; | |||
margin: 0 0 1em 1em !important; | |||
border: 1px solid #a2a9b1 !important; | |||
border-collapse: collapse !important; | |||
border-spacing: 0 !important; | |||
border-radius: 0 !important; | |||
background: #f8f9fa !important; | |||
box-shadow: none !important; | |||
font-family: sans-serif !important; | |||
} | |||
.mw-parser-output | |||
> table[style*="float:right"][style*="width:300px"][style*="border-spacing:6px"] | |||
td { | |||
width: 50% !important; | |||
padding: 0.5em 0.75em !important; | |||
border: 0 !important; | |||
border-radius: 0 !important; | |||
background: #f8f9fa !important; | |||
color: #202122 !important; | |||
font-family: sans-serif !important; | |||
font-size: 12px !important; | |||
font-weight: normal !important; | |||
line-height: 1.5 !important; | |||
text-align: center !important; | |||
} | |||
.mw-parser-output | |||
> table[style*="float:right"][style*="width:300px"][style*="border-spacing:6px"] | |||
td | |||
+ td { | |||
border-left: 1px solid #a2a9b1 !important; | |||
} | |||
.mw-parser-output | |||
> table[style*="float:right"][style*="width:300px"][style*="border-spacing:6px"] | |||
td | |||
b { | |||
color: #54595d !important; | |||
font-size: 11px !important; | |||
font-weight: normal !important; | |||
text-transform: uppercase !important; | |||
} | |||
.mw-parser-output | |||
> table[style*="float:right"][style*="width:300px"][style*="border-spacing:6px"] | |||
td | |||
span { | |||
color: #202122 !important; | |||
font-size: 15px !important; | |||
font-weight: bold !important; | |||
} | |||
/* ========================================================= | |||
MOBILE LAYOUT | |||
========================================================= */ | |||
@media screen and (max-width: 600px) { | |||
.pravaha-collapse-title { | |||
padding: 0.4em 0.5em !important; | |||
} | |||
#pravaha-abstract, | |||
.mw-parser-output table.infobox, | |||
.mw-parser-output | |||
> table[style*="float:right"][style*="width:300px"][style*="border-spacing:6px"] { | |||
float: none !important; | |||
clear: both !important; | |||
width: 100% !important; | |||
max-width: 100% !important; | |||
margin: 0 0 1em !important; | |||
} | |||
.mw-parser-output | |||
table.infobox | |||
> tbody | |||
> tr:first-child | |||
> td[colspan="2"] | |||
> table | |||
td { | |||
height: 140px !important; | |||
} | |||
.mw-parser-output | |||
table.infobox | |||
> tbody | |||
> tr:first-child | |||
> td[colspan="2"] | |||
> table | |||
img { | |||
height: 140px !important; | |||
} | |||
.mw-parser-output | |||
table.infobox | |||
> tbody | |||
> tr:first-child | |||
> td[colspan="2"] | |||
> table | |||
td[colspan="2"], | |||
.mw-parser-output | |||
table.infobox | |||
> tbody | |||
> tr:first-child | |||
> td[colspan="2"] | |||
> table | |||
td[colspan="2"] | |||
img { | |||
height: 180px !important; | |||
} | |||
} | |||
Latest revision as of 05:34, 11 August 2026
/* =========================================================
CLASSIC MEDIAWIKI COLLAPSIBLE SECTIONS
========================================================= */
.pravaha-collapse {
clear: both !important;
margin: 0.5em 0 !important;
overflow: hidden !important;
border: 1px solid #a2a9b1 !important;
border-radius: 0 !important;
background: #f8f9fa !important;
box-shadow: none !important;
box-sizing: border-box !important;
}
.pravaha-collapse-title {
display: flex !important;
min-height: 0 !important;
padding: 0.4em 0.6em !important;
align-items: center !important;
gap: 0 !important;
background: #eaecf0 !important;
color: #202122 !important;
font-family: sans-serif !important;
font-size: 14px !important;
font-weight: bold !important;
line-height: 1.6 !important;
}
.pravaha-collapse-open,
.pravaha-collapse-close {
order: 2 !important;
flex: none !important;
width: auto !important;
height: auto !important;
margin: 0 0 0 auto !important;
padding: 0 0 0 1em !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: #36c !important;
font-size: 0 !important;
font-weight: normal !important;
line-height: inherit !important;
text-align: right !important;
}
.pravaha-collapse-open {
display: inline-block !important;
}
.pravaha-collapse-close {
display: none !important;
}
.pravaha-collapse-open a,
.pravaha-collapse-close a {
display: inline !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
color: #36c !important;
font-size: 0 !important;
font-weight: normal !important;
line-height: inherit !important;
text-decoration: none !important;
}
.pravaha-collapse-open a::after {
content: "[expand]";
font-size: 12px !important;
font-weight: normal !important;
}
.pravaha-collapse-close a::after {
content: "[collapse]";
font-size: 12px !important;
font-weight: normal !important;
}
.pravaha-collapse-open a:hover::after,
.pravaha-collapse-close a:hover::after {
color: #2a4b8d !important;
text-decoration: underline !important;
}
.pravaha-collapse-content {
display: none !important;
padding: 0.75em !important;
border-top: 1px solid #a2a9b1 !important;
background: #fff !important;
color: #202122 !important;
}
.pravaha-collapse:target .pravaha-collapse-content {
display: block !important;
}
.pravaha-collapse:target .pravaha-collapse-open {
display: none !important;
}
.pravaha-collapse:target .pravaha-collapse-close {
display: inline-block !important;
}
/* =========================================================
SUMMARY EXPAND / COLLAPSE
========================================================= */
#pravaha-abstract {
box-sizing: border-box !important;
}
#pravaha-abstract .bjs-abstract-controls {
display: flex !important;
width: 100% !important;
align-items: center !important;
}
#pravaha-abstract .bjs-abstract-open,
#pravaha-abstract .bjs-abstract-close {
order: 2 !important;
margin-left: auto !important;
padding-left: 1em !important;
font-size: 0 !important;
font-weight: normal !important;
}
#pravaha-abstract .bjs-abstract-open {
display: inline-block !important;
}
#pravaha-abstract .bjs-abstract-close {
display: none !important;
}
#pravaha-abstract .bjs-abstract-open a,
#pravaha-abstract .bjs-abstract-close a {
color: #36c !important;
font-size: 0 !important;
font-weight: normal !important;
text-decoration: none !important;
}
#pravaha-abstract .bjs-abstract-open a::after {
content: "[expand]";
font-size: 12px !important;
}
#pravaha-abstract .bjs-abstract-close a::after {
content: "[collapse]";
font-size: 12px !important;
}
#pravaha-abstract .bjs-abstract-open a:hover::after,
#pravaha-abstract .bjs-abstract-close a:hover::after {
color: #2a4b8d !important;
text-decoration: underline !important;
}
#pravaha-abstract .bjs-abstract-preview {
display: block !important;
}
#pravaha-abstract .bjs-abstract-full {
display: none !important;
}
/* Expanded Summary */
#pravaha-abstract:target .bjs-abstract-preview {
display: none !important;
}
#pravaha-abstract:target .bjs-abstract-full {
display: block !important;
}
#pravaha-abstract:target .bjs-abstract-open {
display: none !important;
}
#pravaha-abstract:target .bjs-abstract-close {
display: inline-block !important;
}
/* =========================================================
INFOBOX IMAGE GRID
========================================================= */
.mw-parser-output table.infobox {
box-sizing: border-box !important;
}
.mw-parser-output table.infobox > tbody > tr:first-child > td[colspan="2"] {
padding: 0 !important;
overflow: hidden !important;
background: #fff !important;
}
.mw-parser-output
table.infobox
> tbody
> tr:first-child
> td[colspan="2"]
> table {
width: 100% !important;
table-layout: fixed !important;
border-collapse: collapse !important;
border-spacing: 0 !important;
}
.mw-parser-output
table.infobox
> tbody
> tr:first-child
> td[colspan="2"]
> table
td {
height: 115px !important;
padding: 3px !important;
overflow: hidden !important;
vertical-align: middle !important;
background: #fff !important;
box-sizing: border-box !important;
}
.mw-parser-output
table.infobox
> tbody
> tr:first-child
> td[colspan="2"]
> table
figure {
display: block !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
.mw-parser-output
table.infobox
> tbody
> tr:first-child
> td[colspan="2"]
> table
figure
a {
display: block !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.mw-parser-output
table.infobox
> tbody
> tr:first-child
> td[colspan="2"]
> table
img {
display: block !important;
width: 100% !important;
height: 115px !important;
max-width: none !important;
margin: 0 !important;
object-fit: cover !important;
object-position: center !important;
}
/* Full-width image row */
.mw-parser-output
table.infobox
> tbody
> tr:first-child
> td[colspan="2"]
> table
td[colspan="2"] {
height: 145px !important;
}
.mw-parser-output
table.infobox
> tbody
> tr:first-child
> td[colspan="2"]
> table
td[colspan="2"]
img {
height: 145px !important;
}
/* =========================================================
WORD COUNT AND READING TIME — CLASSIC WIKI STYLE
The border-spacing selector prevents this from affecting
the infobox and Summary table.
========================================================= */
.mw-parser-output
> table[style*="float:right"][style*="width:300px"][style*="border-spacing:6px"] {
float: right !important;
clear: right !important;
width: 300px !important;
max-width: 100% !important;
margin: 0 0 1em 1em !important;
border: 1px solid #a2a9b1 !important;
border-collapse: collapse !important;
border-spacing: 0 !important;
border-radius: 0 !important;
background: #f8f9fa !important;
box-shadow: none !important;
font-family: sans-serif !important;
}
.mw-parser-output
> table[style*="float:right"][style*="width:300px"][style*="border-spacing:6px"]
td {
width: 50% !important;
padding: 0.5em 0.75em !important;
border: 0 !important;
border-radius: 0 !important;
background: #f8f9fa !important;
color: #202122 !important;
font-family: sans-serif !important;
font-size: 12px !important;
font-weight: normal !important;
line-height: 1.5 !important;
text-align: center !important;
}
.mw-parser-output
> table[style*="float:right"][style*="width:300px"][style*="border-spacing:6px"]
td
+ td {
border-left: 1px solid #a2a9b1 !important;
}
.mw-parser-output
> table[style*="float:right"][style*="width:300px"][style*="border-spacing:6px"]
td
b {
color: #54595d !important;
font-size: 11px !important;
font-weight: normal !important;
text-transform: uppercase !important;
}
.mw-parser-output
> table[style*="float:right"][style*="width:300px"][style*="border-spacing:6px"]
td
span {
color: #202122 !important;
font-size: 15px !important;
font-weight: bold !important;
}
/* =========================================================
MOBILE LAYOUT
========================================================= */
@media screen and (max-width: 600px) {
.pravaha-collapse-title {
padding: 0.4em 0.5em !important;
}
#pravaha-abstract,
.mw-parser-output table.infobox,
.mw-parser-output
> table[style*="float:right"][style*="width:300px"][style*="border-spacing:6px"] {
float: none !important;
clear: both !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 0 1em !important;
}
.mw-parser-output
table.infobox
> tbody
> tr:first-child
> td[colspan="2"]
> table
td {
height: 140px !important;
}
.mw-parser-output
table.infobox
> tbody
> tr:first-child
> td[colspan="2"]
> table
img {
height: 140px !important;
}
.mw-parser-output
table.infobox
> tbody
> tr:first-child
> td[colspan="2"]
> table
td[colspan="2"],
.mw-parser-output
table.infobox
> tbody
> tr:first-child
> td[colspan="2"]
> table
td[colspan="2"]
img {
height: 180px !important;
}
}