MediaWiki:Common.css/PortableInfobox.css

.portable-infobox { --border-color: var(--accent-color, #000000); --text-color: #FFFFFF; font-size: 12.6px; border-width: 3px; border-style: solid; border-color: var(--border-color, --accent-color); border-radius: 7px; color: var(--text-color, #FFFFFF); }

.portable-infobox.pi-background { background-color: #333333; }

.portable-infobox .pi-border-color { border-color: transparent; border-style: none; border-width: 0; }

.portable-infobox .pi-item-spacing { padding: 0; } .portable-infobox .pi-image-collection { background: linear-gradient(20deg, #bbb, #222); border-radius: 5px; } .portable-infobox .pi-image-collection-tab-content { background-color: inherit; } .portable-infobox .pi-image-collection-tabs { margin: 0; padding: 3px 0; border-bottom: 1px solid #778; font: bold 12px Verdana, sans-serif; word-wrap: normal; border-bottom: none; display: flex; flex-wrap: wrap; justify-content: space-around; } .portable-infobox .pi-tab-link { list-style: none; margin: 0; display: inline; line-height: normal; padding: 3px; border-radius: 5px; } .portable-infobox .pi-tab-link.current a:hover { color: #000; background: white; border-bottom: 1px solid white; } .portable-infobox .pi-tab-link.current a:hover { color: #6bf !important; } .portable-infobox .pi-tab-link.current a { background-color: #fff; border-bottom: 1px solid #fff; } .portable-infobox .pi-tab-link a:hover { color: #000; background: #AAE; border-color: #227; } .portable-infobox .pi-tab-link a:visited { color: #667; } .portable-infobox .pi-tab-link a:link { color: #448; } .portable-infobox .pi-tab-link.current a { background-color: #1b1b1b !important; color: #FFF !important; border-bottom-color: #1b1b1b !important; } .portable-infobox .pi-tab-link a:hover { background-color: #333 !important; color: #FFF !important; } .portable-infobox .pi-tab-link a:link { color: #6bf !important; } .portable-infobox .pi-tab-link a { padding: 3px 0.5em; margin-left: 3px; border: 1px solid #778; border-bottom: none; background: #DDE; text-decoration: none; } .portable-infobox .pi-tab-link a { background: #000 !important; border: 1px solid #484848 !important; margin-left: 3px !important; margin-right: 0px; border-top-left-radius: 7px; border-top-right-radius: 7px; } .portable-infobox .pi-title, .portable-infobox .pi-header, .portable-infobox .pi-data-label { text-align: center; background: var(--accent-color, #111111); border-radius: 3.5px; display: flex; justify-content: center; align-items: center; }

.portable-infobox .pi-title:first-of-type, .portable-infobox .pi-header, .portable-infobox .pi-data-label { color: var(--accent-color-text, #FFFFFF); }

.portable-infobox .pi-title, .portable-infobox .pi-header { margin: 2px; }

.portable-infobox .pi-header { font-size: larger; padding: 3px; }

.portable-infobox .pi-data { margin: 0 1px; }

.portable-infobox .pi-data-label, .portable-infobox .pi-data-value { margin: 1px; padding: 2px; }

.portable-infobox .pi-title ~ .pi-title, .portable-infobox .pi-data-value { background: #222222; border-radius: 3.5px; }

.portable-infobox .pi-data-value { margin-right: 3px; }

.pi-theme-mt1, .pi-theme-kmt, .pi-theme-kmt1 { --accent-color: #000000; --accent-color-text: #FF0000; --border-color: #FF0000; }

.pi-theme-mt2, .pi-theme-kmt2 { --accent-color: #c0b37c; --accent-color-text: #000; }

.pi-theme-giten, .pi-theme-gmt { --accent-color: #091F92; --accent-color-text: #FF0000; }

.pi-theme-smt1 { --accent-color: #608341; --font2: #529488; --statt: #529488; }

.pi-theme-smt2 { --accent-color: #2F4F4F; --font2: #529488; }

.pi-theme-smtif, .pi-theme-smtifhc { --accent-color: #8FBC8F; --accent-color-text: #000; --font2: #529488; --statt: #529488; --statb: #DE2805; }

.pi-theme-20xx, .pi-theme-20xxdc { --accent-color: #CC0000; } .pi-theme-smt3 { --accent-color: linear-gradient(90deg, #3B3A62, #201E33); --accent-color-2: linear-gradient(#3B3A62, #201E33); --border-color: #333158; --font2: #529488; --hp: #CB91BA; --mp: #A09DEA; --hp2: #F19246; --mp2: #7B55E9; --statt: #529488; --statb: #B15A60; --statb2: #9BEFFB; }

.pi-theme-smtsj { --accent-color: #200470; --font2: #529488; --hp: #E39A94; --mp: #85E795; --hp2: #DDBF77; --mp2: #85BD64; --statt: #FFFFFF; --statb: #63C6B9; } .pi-theme-smt4 { --accent-color: #FFFFFF; --accent-color-2: #F49800; --accent-color-text: #000000; --font2: #F49800; --hp: #FDEC3C; --mp: #69BB29; --statt: #F49800; --statb: #8BC800; } .pi-theme-smt4a, .pi-theme-smt4f { --accent-color: #FFFFFF; --accent-color-2: #394D5B; --accent-color-text: #000000; --font2: #B0D6D7; --hp: #DCAA63; --mp: #499DC2; --statt: #A1CCD3; --statb: #357C95; }

.pi-theme-smtim { --accent-color: #009D96; }

.pi-theme-smt9 { --accent-color: #000000; }

.pi-theme-ldx2 { --accent-color: linear-gradient(90deg, #D71EFF, #850A9E); --accent-color-2: linear-gradient(#D71EFF, #850A9E); --accent-color-text: #FFF; --border-color: #D71EFF; } .pi-theme-lb1 { --accent-color: #FF0000; }

.pi-theme-lb2 { --accent-color: #FF0044; }

.pi-theme-lb3 { --accent-color: #995599; }

.pi-theme-ab { --accent-color: #FF4400; }

.pi-theme-lbs { --accent-color: #665588; }

.pi-theme-majin1 { --accent-color: #002446; }

.pi-theme-majin2 { --accent-color: #514F7E; }

.pi-theme-ronde { --accent-color: #444444; --border-color: #000000; }

.pi-theme-smtds { --accent-color: #4372AA; }

.pi-theme-sh { --accent-color: #302878; }

.pi-theme-raidou1 { --accent-color: #856363; --accent-color-text: #000000; }

.pi-theme-raidou2 { --accent-color: #8E283D; }

.pi-theme-dcbrb { --accent-color: #DCB; --accent-color-text: #000000; }

.pi-theme-childred { --accent-color: #CC0000; --accent-color-text: #000000; }

.pi-theme-childblack { --accent-color: #CC0000; --accent-color-text: #000000; }

.pi-theme-childps { --accent-color: #CC9933; --accent-color-text: #000000; }

.pi-theme-childwhite { --accent-color: #FFFFFF; --accent-color-text: #000000; }

.pi-theme-childlight, .pi-theme-childdark, .pi-theme-dm, .pi-theme-dmk { --accent-color: #6600CC; }

.pi-theme-childfire { --accent-color: #FF9933; --accent-color-text: #000000; }

.pi-theme-childice { --accent-color: #FF9933; --accent-color-text: #000000; }

.pi-theme-childmessiah { --accent-color: #CC3300; --accent-color-text: #000000; }

.pi-theme-p1 { --accent-color: #A9A9A9; --accent-color-text: #000000; --statt: #9098AF; --statb: #BC023B; }

.pi-theme-p2is { --accent-color: #8B668B; --statt: #B490B4; --statb: #8B668B; }

.pi-theme-p2ep { --accent-color: #B3668B; --statt: #D4A1BA; --statb: #B3668B; }

.pi-theme-p3, .pi-theme-p3f, .pi-theme-p3p, .pi-theme-p3ta { --accent-color: #4372AA; --accent-color-text: #000000; --hp2: #F19246; --mp2: #7B55E9; --statt: #82BFEC; --statb: #79AAF6; }

.pi-theme-pts { --accent-color: #26466D; } .pi-theme-p4, .pi-theme-p4g, .pi-theme-p4a, .pi-theme-p4au, .pi-theme-p4d { --accent-color: #FFE600; --accent-color-text: #000000; --hp2: #EEF243; --mp2: #ACFA35; --statt: #FFDF2D; --statb: #FFFF85; }

.pi-theme-pq { --accent-color: #AA1CA9; --accent-color-text: #000000; --statb: #DED8AA; }

.pi-theme-pq2 { --accent-color: #FF520C; --accent-color-text: #FFF; --statb: #DED8AA; } .pi-theme-p5 { --accent-color: #F41000; --accent-color-2: #000000; --font2: #FAFA5B; --hp: #65FFDD; --mp: #FF73F0; --hp2: #65FFDD; --mp2: #FF73F0; --statt: #F9A804; --statb: #F41000; }

.pi-theme-cs { --accent-color: #0047AB; }

.pi-theme-ddsaga1 { --accent-color: #66CD00; --accent-color-text: #000000; }

.pi-theme-ddsaga2 { --accent-color: #EC8A05; --accent-color-text: #000000; }

.pi-theme-desu1, .pi-theme-desu1oc { --accent-color: #E83145; --hp: #CB91BA; --mp: #A09DEA; --hp2: #F19246; --mp2: #7B55E9; --statt: #FFFFFF --statb: #206880; }

.pi-theme-desu2, .pi-theme-desu2rb { --accent-color: #0078E8; --hp: #CB91BA; --mp: #A09DEA; --hp2: #F19246; --mp2: #7B55E9; --statt: #FFFFFF; --statb: #206880; }

.pi-theme-mx { --accent-color: #FFFFFF; --border-color: #FF0000; --accent-color-text: #000000; }

.pi-theme-tmsfe, .pi-theme-smtxfe { --accent-color: #84FF00; --accent-color-text: #000; }

.infobox { background-color: #222222; border: 1px solid #66bbff; border-width: 1px; border-style: solid; margin-bottom: 0.5em; margin-left: 1em; padding: 0.2em; float: right; clear: right; } .infobox td, .infobox th { vertical-align: top; } .infobox caption { font-size: larger; margin-left: inherit; } .infobox.bordered { border-collapse: collapse; } .infobox.bordered td, .infobox.bordered th { border: 1px solid #66bbff; } .infobox.bordered .borderless td, .infobox.bordered .borderless th { border: 0; }