|
|
| Line 1: |
Line 1: |
| .infobox { | | .infobox { |
| /* In case if tooltips go out of boundary */
| | font-family: 'Barlow', sans-serif; |
| overflow: visible;
| | background: #FEFFF5; |
| width: 100%;
| | color: #333; |
| max-width: 300px;
| | max-width: 300px; |
| margin: 0px 0px 1.6rem 15px;
| | margin: 0 0 1.6rem 15px; |
| background: #FEFFF5;
| | border-radius: 6px; |
| border-spacing: 0;
| | box-shadow: none; |
| text-align: left;
| | border: none; |
| padding-bottom: 10px;
| | overflow: hidden; |
| box-shadow: 0 0 8px rgba(0,0,0,0.1);
| | width: 100%; |
| border-radius: 6px;
| | font-size: 14px; |
| color: black;
| | line-height: 1.5; |
| padding-top: 10px;
| |
| }
| |
| | |
| /* Table elements */
| |
| .infobox tbody {
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| } | | } |
|
| |
|
| | /* General rows */ |
| .infobox tr { | | .infobox tr { |
| display: flex;
| | border-bottom: 1px solid #e5e5e5; |
| box-sizing: border-box;
| |
| justify-content: space-between;
| |
| flex-direction: row;
| |
| padding: 5px 0px;
| |
| margin: 0px 10px;
| |
| border-bottom: 1px solid #ccc;
| |
| }
| |
| | |
| .data-tag {
| |
| background-color: #6fef93;
| |
| color: #000;
| |
| padding: 2px 8px !important;
| |
| font-size: 12px;
| |
| font-weight: 500;
| |
| margin: 0 2px !important;
| |
| } | | } |
|
| |
|
| .infobox th, | | .infobox th, |
| .infobox td { | | .infobox td { |
| padding: 0 5px;
| | padding: 10px; |
| }
| | text-align: left; |
| | | vertical-align: top; |
| /* Infobox column */
| |
| .infobox .infobox-nocol {
| |
| width: 100%;
| |
| flex-direction: row;
| |
| }
| |
| | |
| .infobox .infobox-nocol th {
| |
| width: 30%;
| |
| }
| |
| | |
| .infobox .infobox-nocol td {
| |
| width: 70%;
| |
| }
| |
| | |
| .infobox .infobox-col1 {
| |
| width: 100%;
| |
| }
| |
| | |
| .infobox .infobox-col2 {
| |
| width: 50%;
| |
| }
| |
| | |
| .infobox .infobox-col3 {
| |
| width: calc( 100% / 3 );
| |
| }
| |
| | |
| .infobox .infobox-col4 {
| |
| width: 25%;
| |
| }
| |
| | |
| .infobox-data {
| |
| min-width: 25%;
| |
| }
| |
| | |
| /* Infobox image */
| |
| .infobox .infobox-image {
| |
| overflow: hidden;
| |
| padding: 0;
| |
| margin: 0;
| |
| }
| |
| | |
| .infobox-image td {
| |
| padding: 0;
| |
| }
| |
| | |
| .infobox-image--light .image {
| |
| background: rgba(29,26,31,0.50);
| |
| }
| |
| | |
| .infobox-image--dark .image {
| |
| background: rgba(29,26,31,0.50);
| |
| }
| |
| | |
| .infobox-image img {
| |
| display: block;
| |
| max-width: 100%;
| |
| max-height: 210px;
| |
| background: linear-gradient(to right bottom, #a7b1bf, #99a4b4, #8c97a8, #7e8a9d, #717e92);
| |
| object-fit: contain;
| |
| }
| |
| | |
| .infobox-image a {
| |
| border-radius: 0;
| |
| } | | } |
|
| |
|
| /* Infobox title */ | | /* Highlight tags */ |
| .infobox .infobox-title { | | .data-tag td { |
| width: 100%;
| | background-color: #6fef93; |
| font-size: 26px;
| | color: #000; |
| | padding: 4px 10px; |
| | font-weight: 500; |
| | font-size: 12px; |
| | border-bottom: none; |
| } | | } |
|
| |
|
| .infobox .infobox-title th {
| | /* Weapon quote */ |
| color: black;
| | .infobox-quote td { |
| | color: #929292; |
| | font-weight: 500; |
| | font-style: normal; |
| | padding: 12px 10px; |
| | font-size: 14px; |
| | line-height: 1.4; |
| } | | } |
|
| |
|
| /* Infobox indicator */ | | /* Warning box */ |
| .infobox .infobox-indicator { | | .data-warning td { |
| margin-top: 0;
| | background: #DEDFD8; |
| padding: 0;
| | color: #27282C; |
| | font-weight: 600; |
| | padding: 14px; |
| | border-radius: 6px; |
| | margin: 10px 0; |
| | font-size: 13px; |
| } | | } |
|
| |
|
| /* Infobox quote */ | | /* Header row */ |
| .infobox .infobox-quote {
| | .infobox-header { |
| color: #929292;
| | background: none; |
| font-weight: 500;
| | color: #4a4a4a; |
| margin-bottom: 10px;
| | font-size: 16px; |
| | font-weight: 600; |
| | text-align: center; |
| | border-bottom: none; |
| | padding: 12px 0 4px; |
| } | | } |
|
| |
|
| .infobox .infobox-indicator th, | | /* Mod images */ |
| .infobox .infobox-quote th {
| | .data-mods td { |
| display: none;
| | text-align: center; |
| | padding: 10px 5px; |
| } | | } |
|
| |
|
| /* Infobox header */
| | .data-mods img { |
| .infobox .infobox-header {
| | margin: 0 5px; |
| width: 100%;
| | vertical-align: middle; |
| padding: 5px 0 5px 0;
| | border-radius: 4px; |
| margin-top: 15px;
| |
| color: #F1F2F4;
| |
| font-size: 20px;
| |
| text-align: center;
| |
| border: none;
| |
| }
| |
| | |
| /* Infobox value */
| |
| .infobox-data th {
| |
| color: black;
| |
| font-weight: bold;
| |
| }
| |
| | |
| .data-mods { | |
| text-align:center;
| |
| }
| |
| | |
| .infobox-data ul,
| |
| .infobox-data ol {
| |
| margin-top: 0;
| |
| }
| |
| | |
| /* Infobox button */
| |
| .infobox .infobox-button-bar {
| |
| width: 100%;
| |
| padding: 0;
| |
| margin-top: 25px;
| |
| text-align: center;
| |
| }
| |
| | |
| .infobox-button-bar th {
| |
| padding: 0;
| |
| }
| |
| | |
| .data-warning {
| |
| background: #DEDFD8;
| |
| color: #27282C;
| |
| padding: 14px;
| |
| font-size: 14px;
| |
| font-weight: 600;
| |
| border-radius: 6px;
| |
| margin-bottom: 15px;
| |
| }
| |
| | |
| /* Collapsible toggle */
| |
| .infobox tr:first-of-type .mw-collapsible-toggle {
| |
| position: relative;
| |
| display: none;
| |
| float: none;
| |
| }
| |
| | |
| .infobox tr:first-of-type .mw-collapsible-toggle .mw-collapsible-text {
| |
| position: absolute;
| |
| right: 0;
| |
| display: block;
| |
| padding: 5px 15px;
| |
| background: black;
| |
| color: black;
| |
| }
| |
| | |
| .infobox tr:first-of-type .mw-collapsible-toggle .mw-collapsible-text:hover {
| |
| background: #b9c0c6;
| |
| }
| |
| | |
| .infobox tr:first-of-type .mw-collapsible-toggle .mw-collapsible-text:active {
| |
| background: #b9c0c6;
| |
| }
| |
| | |
| .infobox tr:first-of-type .mw-collapsible-toggle-collapsed .mw-collapsible-text {
| |
| background: #b9c0c6;
| |
| }
| |
| | |
| .infobox tr:first-of-type .mw-collapsible-toggle-collapsed .mw-collapsible-text:hover {
| |
| background: #b9c0c6;
| |
| }
| |
| | |
| .infobox tr:first-of-type .mw-collapsible-toggle-collapsed .mw-collapsible-text:active {
| |
| background: #b9c0c6;
| |
| }
| |
| | |
| .infobox tr:first-of-type .mw-collapsible-toggle:before,
| |
| .infobox tr:first-of-type .mw-collapsible-toggle:after {
| |
| content: none;
| |
| }
| |
| | |
| @media only screen and ( max-width: 720px ) {
| |
| .infobox {
| |
| margin-right: auto;
| |
| margin-left: auto;
| |
| float: none;
| |
| }
| |
| | |
| .infobox tr:first-of-type .mw-collapsible-toggle {
| |
| display: block;
| |
| }
| |
| } | | } |
.infobox {
font-family: 'Barlow', sans-serif;
background: #FEFFF5;
color: #333;
max-width: 300px;
margin: 0 0 1.6rem 15px;
border-radius: 6px;
box-shadow: none;
border: none;
overflow: hidden;
width: 100%;
font-size: 14px;
line-height: 1.5;
}
/* General rows */
.infobox tr {
border-bottom: 1px solid #e5e5e5;
}
.infobox th,
.infobox td {
padding: 10px;
text-align: left;
vertical-align: top;
}
/* Highlight tags */
.data-tag td {
background-color: #6fef93;
color: #000;
padding: 4px 10px;
font-weight: 500;
font-size: 12px;
border-bottom: none;
}
/* Weapon quote */
.infobox-quote td {
color: #929292;
font-weight: 500;
font-style: normal;
padding: 12px 10px;
font-size: 14px;
line-height: 1.4;
}
/* Warning box */
.data-warning td {
background: #DEDFD8;
color: #27282C;
font-weight: 600;
padding: 14px;
border-radius: 6px;
margin: 10px 0;
font-size: 13px;
}
/* Header row */
.infobox-header {
background: none;
color: #4a4a4a;
font-size: 16px;
font-weight: 600;
text-align: center;
border-bottom: none;
padding: 12px 0 4px;
}
/* Mod images */
.data-mods td {
text-align: center;
padding: 10px 5px;
}
.data-mods img {
margin: 0 5px;
vertical-align: middle;
border-radius: 4px;
}
