Template:Infobox/styles.css
Jump to navigation
Jump to search
.portable-infobox {
--infobox-width: 300px;
--infobox-background: #0a0a0a;
--infobox-background-select: var(--background-main-color--dark);
--infobox-background-section-header: var(--background-main-color--light);
--infobox-border: #2c2c2c;
--infobox-border-data: var(--background-main-color--light);
}
.portable-infobox {
font-size: 0.9em;
width: var(--infobox-width);
background-color: var(--infobox-background);
border-top: 5px solid var(--infobox-border);
border-bottom: 5px solid var(--infobox-border);
border-radius: 5px;
padding-bottom: 20px;
}
.portable-infobox .pi-secondary-background {
background-color: var(--infobox-background-secondary);
}
.portable-infobox .pi-title {
font-weight: bold;
font-size: 1.4em;
line-height: 1;
}
.portable-infobox .pi-header {
color: var(--text-color--dark);
}
.portable-infobox .pi-section-content .pi-header {
color: var(--text-color);
}
.portable-infobox .pi-title,
.portable-infobox .pi-header,
.portable-infobox .pi-navigation {
text-align: center;
}
.portable-infobox .pi-image,
.portable-infobox .pi-image-thumbnail {
width: var(--infobox-width);
max-width: var(--infobox-width);
}
.portable-infobox .pi-border-color {
border-color: var(--infobox-border-data);
}
.portable-infobox .pi-border-color:last-child {
border-bottom: none;
}
.portable-infobox .pi-section-navigation {
margin: 0;
padding: 0;
}
.portable-infobox .pi-section-tab.pi-section-active {
color: var(--text-color);
background-color: var(--infobox-background-select);
box-shadow: none;
}
.portable-infobox .pi-section-tab:hover {
color: var(--text-color);
}
.portable-infobox .pi-section-tab {
color: var(--text-color--dark);
background: transparent;
box-shadow: 0 0 4px 0 #000 inset;
border: none;
flex: 1;
margin: 0;
padding: 10px;
}
.portable-infobox .pi-data {
background-color: var(--infobox-background-select);
}
@supports(-webkit-mask-image: url(#mask)) or (mask-image: url(#mask)) {
.portable-infobox {
position: relative;
background: #0a0a0a;
z-index: 0;
}
.portable-infobox::before {
content: '';
background: #111;
mask-image: url('https://remnant.wiki/images/8/8d/Lines_mask.png');
mask-mode: luminance;
mask-size: 40%;
position: absolute;
top: 0;
left: 0;
bottom: 100%;
right: 100%;
width: 100%;
height: 100%;
z-index: -1;
}
}
/* Theme: box-navigation */
.portable-infobox.pi-theme-box-navigation {
padding-bottom: 0;
}
/* Theme: box-icon */
.portable-infobox.pi-theme-box-icon .pi-image-thumbnail {
width: auto;
height: auto;
max-height: 128px;
padding: 12px 0;
}