|
|
| (6 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| /* === Wikipedia-style mobile infobox (full width) === */
| |
| @media screen and (max-width: 720px) {
| |
|
| |
| /* Infobox container */
| |
| .infobox {
| |
| float: none !important;
| |
| width: 100vw !important;
| |
| max-width: 100vw !important;
| |
| margin: 0 -16px 16px -16px !important;
| |
| border-left: none !important;
| |
| border-right: none !important;
| |
| box-sizing: border-box;
| |
| }
| |
|
| |
| /* Infobox title */
| |
| .infobox th[colspan="2"] {
| |
| font-size: 1.3em;
| |
| padding: 12px 10px !important;
| |
| text-align: center;
| |
| }
| |
|
| |
| /* Infobox image */
| |
| .infobox img {
| |
| width: 100% !important;
| |
| height: auto !important;
| |
| max-width: 100% !important;
| |
| display: block;
| |
| margin: 0 auto;
| |
| }
| |
|
| |
| /* Image caption */
| |
| .infobox caption,
| |
| .infobox .infobox-caption {
| |
| padding: 8px 10px;
| |
| font-size: 0.9em;
| |
| }
| |
|
| |
| /* Table cells spacing */
| |
| .infobox td,
| |
| .infobox th {
| |
| padding: 8px 10px !important;
| |
| }
| |
| }
| |
|
| |
| /* ============================= */ | | /* ============================= */ |
| /* Wikipedia Infobox Styling */ | | /* Wikipedia-style Infobox Look */ |
| /* ============================= */ | | /* ============================= */ |
|
| |
|
| .infobox { | | .infobox { |
| background-color: #f8f9fa; | | background: #f8f9fa; |
| border: 1px solid #a2a9b1; | | border: 1px solid #a2a9b1; |
| | border-collapse: collapse; |
| color: #202122; | | color: #202122; |
| border-spacing: 0; | | font-size: 90%; |
| border-collapse: collapse; | | } |
| | |
| | .infobox-above { |
| | background: #eaecf0; |
| | font-size: 125%; |
| | font-weight: bold; |
| | text-align: center; |
| | padding: 8px; |
| } | | } |
|
| |
|
| Line 59: |
Line 23: |
| padding: 6px 8px; | | padding: 6px 8px; |
| vertical-align: top; | | vertical-align: top; |
| font-size: 90%;
| |
| } | | } |
|
| |
|
| .infobox th { | | .infobox th { |
| background-color: #eaecf0; | | background: #eaecf0; |
| font-weight: bold;
| |
| text-align: left; | | text-align: left; |
| }
| |
|
| |
| .infobox-above {
| |
| background-color: #eaecf0;
| |
| font-size: 125%;
| |
| font-weight: bold;
| |
| text-align: center;
| |
| padding: 8px;
| |
| }
| |
|
| |
| .infobox caption {
| |
| font-size: 90%;
| |
| text-align: center;
| |
| color: #54595d;
| |
| } | | } |
|
| |
|
| Line 87: |
Line 35: |
| } | | } |
|
| |
|
| /* Remove ugly gaps */ | | /* ============================= */ |
| .infobox tr + tr th,
| | /* Desktop infobox alignment */ |
| .infobox tr + tr td {
| | /* ============================= */ |
| border-top: 1px solid #a2a9b1;
| |
| }
| |
|
| |
|
| /* Mobile infobox full width (Minerva skin) */
| |
| @media screen and (max-width: 720px) {
| |
| .infobox {
| |
| width: 100% !important;
| |
| float: none !important;
| |
| margin: 0 0 1em 0 !important;
| |
| }
| |
| }
| |
| /* Desktop infobox (Wikipedia style) */
| |
| @media screen and (min-width: 721px) { | | @media screen and (min-width: 721px) { |
| .infobox { | | .infobox { |
| Line 110: |
Line 47: |
| } | | } |
|
| |
|
| /* Mobile infobox full width */ | | /* ============================= */ |
| @media screen and (max-width: 720px) {
| | /* Mobile infobox (let Minerva handle width) */ |
| .infobox {
| | /* ============================= */ |
| width: 100% !important;
| |
| float: none !important;
| |
| margin: 0 0 1em 0 !important;
| |
| }
| |
| }
| |
| /* FORCE infobox full width on mobile (override inline styles) */ | |
| @media screen and (max-width: 720px) {
| |
| table.infobox {
| |
| width: 100vw !important;
| |
| max-width: 100vw !important;
| |
| float: none !important;
| |
| margin-left: 0 !important;
| |
| margin-right: 0 !important;
| |
| }
| |
| }
| |
| /* Minerva mobile full-width infobox */
| |
| @media screen and (max-width: 720px) {
| |
| .skin-minerva .content table.infobox {
| |
| width: 100vw !important;
| |
| max-width: 100vw !important;
| |
| margin-left: calc(-1 * var(--content-padding, 16px)) !important;
| |
| margin-right: calc(-1 * var(--content-padding, 16px)) !important;
| |
| float: none !important;
| |
| }
| |
| }
| |
| /* Wikipedia infobox core */ | |
| .infobox {
| |
| float: right;
| |
| clear: right;
| |
| margin: 0 0 1em 1em;
| |
| width: 22em;
| |
| background: #f8f9fa;
| |
| border: 1px solid #a2a9b1;
| |
| border-spacing: 0;
| |
| color: #202122;
| |
| }
| |
|
| |
|
| .infobox-above {
| |
| background: #eaecf0;
| |
| text-align: center;
| |
| font-size: 125%;
| |
| font-weight: bold;
| |
| }
| |
|
| |
| .infobox-image,
| |
| .infobox-caption {
| |
| text-align: center;
| |
| }
| |
|
| |
| .infobox th,
| |
| .infobox td {
| |
| padding: 6px 8px;
| |
| vertical-align: top;
| |
| }
| |
|
| |
| .infobox th {
| |
| background: #eaecf0;
| |
| text-align: left;
| |
| }
| |
|
| |
| /* Mobile (Minerva) full width */
| |
| @media screen and (max-width: 720px) { | | @media screen and (max-width: 720px) { |
| .infobox { | | .infobox { |
| | width: auto; |
| float: none; | | float: none; |
| width: 100%;
| |
| margin: 0 0 1em 0; | | margin: 0 0 1em 0; |
| } | | } |
| } | | } |
| | /* Remove ugly gaps */ |
| | .infobox tr + tr th, .infobox tr + tr td { border-top: 1px solid #a2a9b1; } |