MediaWiki:Common.css: Difference between revisions
Styles for By The Numbers showcase cards |
Style By The Numbers wikitable showcase cards |
||
| Line 1,011: | Line 1,011: | ||
} | } | ||
/* By The Numbers showcase hub */ | /* By The Numbers showcase hub (v3 — wikitable cards) */ | ||
. | .mw-parser-output table.wikitable.rb-numbers-table { | ||
margin: 1em 0 | width: 100%; | ||
margin: 1em 0 0.75em 0; | |||
border-collapse: separate; | |||
border-spacing: 0.55em; | |||
border: none; | |||
background: transparent; | |||
} | } | ||
. | .mw-parser-output table.wikitable.rb-numbers-table > tr > th, | ||
.mw-parser-output table.wikitable.rb-numbers-table > * > tr > th, | |||
.mw-parser-output table.wikitable.rb-numbers-table > tr > td, | |||
.mw-parser-output table.wikitable.rb-numbers-table > * > tr > td { | |||
width: 25%; | |||
vertical-align: top; | |||
text-align: center; | |||
background: #f7f4ee; | background: #f7f4ee; | ||
border: 1px solid #c3b7a4; | border: 1px solid #c3b7a4; | ||
border-top: 3px solid #3f4a3c; | border-top: 3px solid #3f4a3c; | ||
padding: 0. | padding: 0.75em 0.65em; | ||
} | |||
.mw-parser-output table.wikitable.rb-numbers-table > tr > th, | |||
.mw-parser-output table.wikitable.rb-numbers-table > * > tr > th { | |||
font-weight: 700; | |||
font-size: 1em; | |||
color: inherit; | |||
background: #f7f4ee; | |||
} | } | ||
. | .mw-parser-output .rb-numbers-stat-num { | ||
font-size: 2. | display: block; | ||
font-size: 2.1em; | |||
font-weight: 700; | font-weight: 700; | ||
line-height: 1.1; | line-height: 1.1; | ||
| Line 1,034: | Line 1,047: | ||
letter-spacing: -0.02em; | letter-spacing: -0.02em; | ||
} | } | ||
. | .mw-parser-output .rb-numbers-stat-note { | ||
display: block; | |||
font-size: 84%; | font-size: 84%; | ||
line-height: 1.35; | line-height: 1.35; | ||
color: #555; | color: #555; | ||
font-weight: 400; | |||
} | |||
.mw-parser-output table.wikitable.rb-numbers-links { | |||
width: 100%; | |||
margin: 0.75em 0 1em 0; | |||
border-collapse: separate; | |||
border-spacing: 0.55em; | |||
border: none; | |||
background: transparent; | |||
} | |||
.mw-parser-output table.wikitable.rb-numbers-links > tr > td, | |||
.mw-parser-output table.wikitable.rb-numbers-links > * > tr > td { | |||
width: 33%; | |||
vertical-align: top; | |||
background: #f7f4ee; | |||
border: 1px solid #c3b7a4; | |||
border-top: 3px solid #3f4a3c; | |||
padding: 0.75em 0.85em; | |||
} | |||
.mw-parser-output table.wikitable.rb-numbers-links small { | |||
display: block; | |||
margin-top: 0.35em; | |||
color: #444; | |||
line-height: 1.35; | |||
} | } | ||
/* Legacy div-card classes (v1/v2) */ | |||
.rb-numbers-showcase, | |||
.btn-showcase { margin: 1em 0 1.25em 0; } | |||
.rb-numbers-stat-grid, | |||
.rb-numbers-link-grid, | |||
.btn-stat-grid, | |||
.btn-link-grid { | .btn-link-grid { | ||
display: grid; | display: grid; | ||
grid-template-columns: repeat(auto-fit, minmax( | grid-template-columns: repeat(auto-fit, minmax(12em, 1fr)); | ||
gap: 0. | gap: 0.85em; | ||
} | } | ||
.rb-numbers-stat, | |||
.rb-numbers-link-card, | |||
.btn-stat, | |||
.btn-link-card { | .btn-link-card { | ||
background: # | background: #f7f4ee; | ||
border: 1px solid # | border: 1px solid #c3b7a4; | ||
padding: 0. | border-top: 3px solid #3f4a3c; | ||
padding: 0.9em 1em 1em; | |||
box-sizing: border-box; | |||
} | } | ||
.btn- | .rb-numbers-stat, | ||
.btn-stat { text-align: center; } | |||
} | .btn-stat-num { | ||
.btn- | font-size: 2.15em; | ||
font-weight: 700; | |||
font- | line-height: 1.1; | ||
color: # | color: #3f4a3c; | ||
} | } | ||
.btn-stat-label, | |||
.rb-numbers-stat-label { margin-top: 0.4em; font-size: 95%; font-weight: 600; line-height: 1.3; } | |||
.btn-stat-note { margin-top: 0.35em; font-size: 84%; line-height: 1.35; color: #555; } | |||
.btn-link-grid, | |||
.rb-numbers-link-grid { margin: 0.75em 0 1em 0; } | |||
.btn-link-card > a, | |||
.rb-numbers-link-card > a { font-weight: 600; } | |||
.btn-link-desc, | |||
.rb-numbers-link-desc { margin-top: 0.35em; font-size: 90%; color: #444; } | |||