12,652
editsno edit summary
(Add some minimal PortableInfobox styling.) |
No edit summary |
||
(34 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
/* CSS placed here will be applied to all skins */ | /* CSS placed here will be applied to all skins */ | ||
/* | |||
* The CSS here should be moved to Vector.css as much as possible. Currently, | |||
* no other skin is supported for desktop, and mobile doesn't use Common.css | |||
* anyway. Any future skin that we intend to support will need careful | |||
* consideration and porting of CSS to its own skin-specific CSS page. | |||
*/ | |||
/* Global variables used for various things */ | /* Global variables used for various things */ | ||
Line 9: | Line 18: | ||
/* PortableInfobox configuration */ | /* PortableInfobox configuration */ | ||
--pi- | --pi-width: 280px; | ||
} | } | ||
Line 60: | Line 67: | ||
/* Item, spell, etc. properties */ | /* Item, spell, etc. properties */ | ||
.bg3wiki-property-list | .bg3wiki-property-list > ul { | ||
margin-left: 0; | margin-left: 0; | ||
list-style: none; | |||
} | } | ||
.mw-content-ltr ul.bg3wiki-property-list { | .mw-content-ltr ul.bg3wiki-property-list { | ||
margin-left: 0; | margin-left: 0; | ||
list-style: none; | list-style: none; | ||
} | |||
.bg3wiki-property-list dd { | |||
margin-left: 0; | |||
} | } | ||
Line 762: | Line 770: | ||
/* PortableInfobox */ | /* PortableInfobox */ | ||
.portable-infobox { | |||
.infobox { | background-color: var(--bg3wiki-box-detail-bg); | ||
background-color: var(--bg3wiki-box-detail-bg | |||
border: var(--bg3wiki-wikitable-border); | border: var(--bg3wiki-wikitable-border); | ||
padding: 4px; | |||
} | |||
.portable-infobox .pi-item-spacing { | |||
padding: 0 | padding: 0; | ||
} | } | ||
.portable-infobox .pi-group { | |||
.infobox- | border: none; | ||
border: | |||
} | } | ||
.infobox- | .portable-infobox .pi-data { | ||
border: none; | |||
margin: 2px 0; | |||
} | } | ||
.infobox- | .portable-infobox .pi-title { | ||
background: var(--bg3wiki-box-header-bg); | background: var(--bg3wiki-box-header-bg); | ||
text-align: center; | |||
font-size: 1.4em; | |||
font-weight: bold; | |||
} | } | ||
.infobox | .portable-infobox .pi-data[data-source="title"] { | ||
. | text-align: center; | ||
font-style: italic; | |||
font-size: 1.2em; | |||
margin-top: 2px; | |||
margin-bottom: 2px; | |||
} | } | ||
.infobox- | .portable-infobox .pi-tab-link, | ||
.portable-infobox .pi-section-tab { | |||
color: var(--link); | |||
border: none; | border: none; | ||
color: var(--fg); | flex-grow: 1; | ||
text-align: left; | } | ||
padding: 0.2em 0.4em 0.2em 0.4em; | |||
vertical-align: top; | .portable-infobox .pi-tab-link.current, | ||
font-weight: normal; | .portable-infobox .pi-section-tab.pi-section-active { | ||
} | background: none; | ||
border-bottom: 1px solid var(--link); | |||
.infobox-label:has(.bg3wiki-icontext-block) { | } | ||
vertical-align: middle; | |||
} | .portable-infobox .pi-header { | ||
background: var(--bg3wiki-box-label-bg); | |||
.infobox-data { | text-align: center; | ||
background-color: transparent; | font-size: 1.05em; | ||
color: var(--fg); | padding: 5px 0; | ||
border: none; | } | ||
text-align: center; | |||
padding: 0.2em 0.4em 0.2em 0.4em; | .portable-infobox .pi-data-label, | ||
} | .portable-infobox .pi-data-value { | ||
padding: 3px 5px 3px 5px; | |||
/* Will remove this when I re-do the themes variables */ | } | ||
.infobox-data-last { | |||
border-bottom: none !important; | .portable-infobox .pi-data-label { | ||
} | background-color: var(--bg3wiki-box-label-bg); | ||
font-weight: normal; | |||
.infobox-below { | } | ||
background: var(--bg3wiki-box-header-bg); | |||
color: var(--fg); | .portable-infobox table { | ||
border: none; | background: none; | ||
} | } | ||
.pi-horizontal-group .pi-horizontal-group-item:not(:first-child) { | |||
/** | border-left: 2px solid var(--bg3wiki-box-detail-bg); | ||
Navbox classes | } | ||
**/ | .pi-horizontal-group th.pi-horizontal-group-item { | ||
.navbox, | border-top: 2px solid var(--bg3wiki-box-detail-bg); | ||
.mw-parser-output .navbox-list-with-group, | padding-top: 5px; | ||
} | |||
.pi-horizontal-group thead + tbody .pi-data-value { | |||
padding: 5px 0; | |||
} | |||
.pi-type-creature [data-item-name="resistances"] ul { | |||
margin: 0; | |||
list-style: none; | |||
display: flex; | |||
justify-content: center; | |||
gap: 5px; | |||
flex-wrap: wrap; | |||
} | |||
.pi-type-creature li:first-child .bg3wiki-pi-creature-detail { | |||
margin-top: 5px; | |||
} | |||
.pi-type-creature li:not(:last-child) .bg3wiki-pi-creature-detail { | |||
margin-bottom: 12px; | |||
} | |||
.pi-type-creature .bg3wiki-pi-creature-detail .bg3wiki-icontext-text { | |||
margin-top: -16px; | |||
padding-left: 5px; | |||
} | |||
.pi-type-creature .bg3wiki-pi-creature-detail-text { | |||
margin-top: -12px; | |||
padding-left: 34px; | |||
} | |||
.pi-type-creature .bg3wiki-pi-creature-detail p { | |||
margin: 0; | |||
} | |||
.pi-type-creature .bg3wiki-pi-creature-detail-text a { | |||
color: unset; | |||
text-decoration: underline dotted var(--link); | |||
} | |||
.pi-type-creature .bg3wiki-pi-creature-detail-text a:hover { | |||
text-decoration: underline solid var(--link); | |||
} | |||
/* Character info template styling */ | |||
.infobox { | |||
background-color: var(--bg3wiki-box-detail-bg); | |||
color: var(--fg); | |||
border: var(--bg3wiki-wikitable-border); | |||
font-size: 90%; | |||
float: right; | |||
margin: 0.5em 0 0.5em 1em; | |||
padding: 0.2em 0.2em 0.6em 0.2em; | |||
clear: right; | |||
line-height: 1.5em; | |||
width: 23em; | |||
vertical-align: top; | |||
} | |||
.infobox-title { | |||
border: 0; | |||
} | |||
.infobox-above { | |||
background: var(--bg3wiki-box-header-bg); | |||
color: var(--fg); | |||
font-size: 130%; | |||
border: var(--bg3wiki-box-accent-dark-border); | |||
} | |||
.infobox-header { | |||
background: var(--bg3wiki-box-header-bg); | |||
color: var(--fg); | |||
border: none; | |||
} | |||
.infobox-subheader, | |||
.infobox-image, | |||
.infobox-caption { | |||
background-color: var(--bg3wiki-box-detail-bg); | |||
border: var(--bg3wiki-box-detail-border); | |||
color: var(--fg); | |||
} | |||
.infobox-label { | |||
background-color: var(--bg3wiki-box-label-bg); | |||
border: none; | |||
color: var(--fg); | |||
text-align: left; | |||
padding: 0.2em 0.4em 0.2em 0.4em; | |||
vertical-align: top; | |||
font-weight: normal; | |||
} | |||
.infobox-label:has(.bg3wiki-icontext-block) { | |||
vertical-align: middle; | |||
} | |||
.infobox-data { | |||
background-color: transparent; | |||
color: var(--fg); | |||
border: none; | |||
text-align: center; | |||
padding: 0.2em 0.4em 0.2em 0.4em; | |||
} | |||
/* Will remove this when I re-do the themes variables */ | |||
.infobox-data-last { | |||
border-bottom: none !important; | |||
} | |||
.infobox-below { | |||
background: var(--bg3wiki-box-header-bg); | |||
color: var(--fg); | |||
border: none; | |||
} | |||
/** | |||
Navbox classes | |||
**/ | |||
.navbox, | |||
.mw-parser-output .navbox-list-with-group, | |||
.bg3wiki-navbox { | .bg3wiki-navbox { | ||
text-align: center; | text-align: center; | ||
Line 1,500: | Line 1,615: | ||
.bg3wiki-achievement { | .bg3wiki-achievement { | ||
width: 100%; | width: 100%; | ||
} | |||
/* For visual effect, as of now only used on [[Illithid Powers]]. */ | |||
.bg3wiki-visible-on-hover { | |||
opacity: 0; | |||
transition-property: opacity; | |||
transition-duration: .4s; | |||
} | |||
.bg3wiki-visible-on-hover:hover, | |||
.bg3wiki-visible-on-hover:focus { | |||
opacity: 1; | |||
} | |||
/* Template:WeaponsTableHeader / Template:WeaponsTableRow */ | |||
.bg3wiki-weapons-table td:not(:last-child) { | |||
text-align: center; | |||
} | } |