User:Ursuul/hxh.css

/** * @Name:          HunterXHunter.css * @Description:   Applies aesthetic themes to all Portable Infoboxes * @For Europa?:   No * @Authors:        Isaac   *                 Ursuul  *                 Patrik  */ /* All Infoboxes — General */ .portable-infobox:not(.pi-europa) { overflow: hidden; background: #FFFFFF; line-height: 1.2; color: #000000; border: 1px solid rgba(34, 34, 34, 0.2); border-radius: 2ex; }

.portable-infobox { font-size: 13px; }

.portable-infobox .pi-item-spacing, .pi-europa .pi-item-spacing { padding: 0; }

.portable-infobox .pi-border-color { border-color: rgb(153, 153, 153); }/**/

/* All Infoboxes — Headers & Titles */ .portable-infobox .pi-header { font-size: inherit; text-align: center; padding: 3px 0; }

.portable-infobox > .pi-header, .portable-infobox .pi-title { font-weight: bold; font-size: 14px; line-height: 28px; text-align: center; padding: 1px 0 2px; }/**/

/* All Infoboxes — Images */ .portable-infobox .pi-title + .pi-image-collection { margin: 0.5ex 0; }

.portable-infobox .pi-image-collection-tab-content { background: transparent; }

.portable-infobox .pi-image-collection-tabs { font-size: 13px; padding-bottom: 3px; }

.portable-infobox .pi-tab-link { font-weight: bold; font-size: smaller; color: #337800; border: 0; }

.portable-infobox .pi-tab-link:not(.current):hover { text-decoration: underline; }

.portable-infobox .pi-tab-link.current { background: transparent; color: inherit; cursor: text; }

.portable-infobox .pi-tab-link + .pi-tab-link { padding-left: 2px; border-left: 1pt solid #000000; margin-left: 3px; }

.portable-infobox .pi-caption { color: #FFFFFF; text-align: center; }

.portable-infobox.pi-theme-chapter .pi-image + .pi-navigation + .pi-navigation, .portable-infobox.pi-theme-chapter .pi-image + .pi-navigation { background: transparent; font-style: italic; font-weight: normal; font-size: medium; }/**/

/* All Infoboxes — Data */ .portable-infobox .pi-group, .portable-infobox .pi-data { border-bottom: 0; }

.portable-infobox .pi-data-label:not(.pi-horizontal-group-item) { padding: 3px 1px 3px 3px; }

.portable-infobox .pi-data-value { background: #FFFFFF; padding: 3px 1px 3px 3px; border-top: 1px solid rgb(153, 153, 153); }

.portable-infobox .pi-data-value ul, .portable-infobox .pi-data-value ol { margin-left: 20px; list-style-position: outside; }/**/

/* All Infoboxes — Horizontal Groups */ .portable-infobox .pi-horizontal-group .pi-horizontal-group-item.pi-data-value { border-top: 0; }

.portable-infobox .pi-horizontal-group .pi-horizontal-group-item:not(:first-child) { border-left: 0; }/**/

/* Gradients */ .portable-infobox .pi-data-label:not(.pi-horizontal-group-item), .portable-infobox .pi-header, .portable-infobox .pi-title { background: #008000; background-image: -o-linear-gradient(top, #008000 25%, #006200 75%); background-image: -ms-linear-gradient(top, #008000 25%, #006200 75%); background-image: -moz-linear-gradient(top, #008000 25%, #006200 75%); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(25%, #008000), color-stop(75%, #006200)); background-image: gradient(linear, 0% 0%, 0% 100%, color-stop(25%, #008000), color-stop(75%, #006200)); color: #FFFFFF; border-top: 1px solid rgb(153, 153, 153); }

.portable-infobox .pi-navigation { background: #111111; background-image: -o-linear-gradient(top, #111111 25%, #000000 75%); background-image: -ms-linear-gradient(top, #111111 25%, #000000 75%); background-image: -moz-linear-gradient(top, #111111 25%, #000000 75%); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(25%, #111111), color-stop(75%, #000000)); background-image: gradient(linear, 0% 0%, 0% 100%, color-stop(25%, #111111), color-stop(75%, #000000)); font-size: normal; color: #FFFFFF; text-align: center; }

.portable-infobox .pi-navigation a { color: #FFFFFF; }/**/

/* Theme — Chapter */ .portable-infobox.pi-theme-chapter { border-radius: 0; }

.portable-infobox.pi-theme-chapter .pi-title { padding: 1em; }

.portable-infobox.pi-theme-chapter .pi-data-label { text-align: center; }

.portable-infobox.pi-theme-chapter .pi-data-label:not(.pi-horizontal-group-item), .portable-infobox.pi-theme-chapter .pi-navigation, .portable-infobox.pi-theme-chapter .pi-header, .portable-infobox.pi-theme-chapter .pi-title { background-color: #808080; background-image: none; color: inherit; }

.portable-infobox.pi-theme-chapter .pi-navigation { background-color: Gainsboro; margin: 1ex; }

.portable-infobox.pi-theme-chapter .pi-navigation a { color: inherit; }/**/

/* Theme — Episode */ .portable-infobox.pi-theme-episode { border-radius: 0; }

.portable-infobox.pi-theme-episode .pi-data-label { flex-basis: 60%; }

.portable-infobox.pi-theme-episode .pi-data-label:not(.pi-horizontal-group-item), .portable-infobox.pi-theme-episode .pi-navigation, .portable-infobox.pi-theme-episode .pi-header, .portable-infobox.pi-theme-episode .pi-title { background-color: #1C1A16; background-image: none; }

.portable-infobox.pi-theme-episode .pi-group + .pi-navigation { background: transparent; font-weight: normal; font-size: x-small; color: inherit; border-top: 1px solid rgb(153, 153, 153); }

.portable-infobox.pi-theme-episode .pi-navigation { background-color: Gainsboro; color: inherit; }

.portable-infobox.pi-theme-episode .pi-navigation a { color: inherit; }/**/

/* Theme — Arc */ .portable-infobox.pi-theme-arc { border-radius: 0; }

.portable-infobox.pi-theme-arc .pi-data-label:not(.pi-horizontal-group-item), .portable-infobox.pi-theme-arc .pi-navigation, .portable-infobox.pi-theme-arc .pi-header, .portable-infobox.pi-theme-arc .pi-title { background-color: #008000; background-image: none; }

.portable-infobox.pi-theme-arc .pi-title { background-color: #0A3300; }

.portable-infobox.pi-theme-arc .pi-navigation { background: transparent; font-weight: normal; font-size: x-small; color: inherit; border-top: 1px solid rgb(153, 153, 153); }

.portable-infobox.pi-theme-arc .pi-navigation a { color: #337800; }/**/

/* Theme — Cards */ .portable-infobox.pi-theme-greedcard, .portable-infobox.pi-theme-spellcard, .portable-infobox.pi-theme-master, .portable-infobox.pi-theme-free { background-color: #DFDFDF; padding: 0.5em; border-radius: 0; }

.portable-infobox.pi-theme-greedcard .pi-image, .portable-infobox.pi-theme-spellcard .pi-image, .portable-infobox.pi-theme-master .pi-image, .portable-infobox.pi-theme-free .pi-image { margin: 0.5ex 0 0.5ex; }

.portable-infobox.pi-theme-greedcard .pi-title, .portable-infobox.pi-theme-spellcard .pi-title, .portable-infobox.pi-theme-master .pi-title, .portable-infobox.pi-theme-free .pi-title { padding: 1em; }

.portable-infobox.pi-theme-greedcard .pi-navigation, .portable-infobox.pi-theme-spellcard .pi-navigation, .portable-infobox.pi-theme-master .pi-navigation, .portable-infobox.pi-theme-free .pi-navigation, .portable-infobox.pi-theme-greedcard .pi-header, .portable-infobox.pi-theme-spellcard .pi-header, .portable-infobox.pi-theme-master .pi-header, .portable-infobox.pi-theme-free .pi-header, .portable-infobox.pi-theme-greedcard .pi-title, .portable-infobox.pi-theme-spellcard .pi-title, .portable-infobox.pi-theme-master .pi-title, .portable-infobox.pi-theme-free .pi-title { background-color: purple; background-image: none; color: #FFFFFF; }

.portable-infobox.pi-theme-spellcard .pi-navigation, .portable-infobox.pi-theme-spellcard .pi-header, .portable-infobox.pi-theme-spellcard .pi-title { background-color: #000080; }

.portable-infobox.pi-theme-master .pi-navigation, .portable-infobox.pi-theme-master .pi-header, .portable-infobox.pi-theme-master .pi-title { background-color: #000000; }

.portable-infobox.pi-theme-free .pi-navigation, .portable-infobox.pi-theme-free .pi-header, .portable-infobox.pi-theme-free .pi-title { background-color: #FF8000; }

.portable-infobox.pi-theme-greedcard .pi-data, .portable-infobox.pi-theme-spellcard .pi-data, .portable-infobox.pi-theme-master .pi-data, .portable-infobox.pi-theme-free .pi-data { padding: 0.5ex; }

.portable-infobox.pi-theme-greedcard .pi-data:first-of-type .pi-data-label, .portable-infobox.pi-theme-spellcard .pi-data:first-of-type .pi-data-label, .portable-infobox.pi-theme-master .pi-data:first-of-type .pi-data-label, .portable-infobox.pi-theme-free .pi-data:first-of-type .pi-data-label, .portable-infobox.pi-theme-greedcard .pi-data:first-of-type .pi-data-value, .portable-infobox.pi-theme-spellcard .pi-data:first-of-type .pi-data-value, .portable-infobox.pi-theme-master .pi-data:first-of-type .pi-data-value, .portable-infobox.pi-theme-free .pi-data:first-of-type .pi-data-value { border: 0; }

.portable-infobox.pi-theme-greedcard .pi-data-label:not(.pi-horizontal-group-item), .portable-infobox.pi-theme-spellcard .pi-data-label:not(.pi-horizontal-group-item), .portable-infobox.pi-theme-master .pi-data-label:not(.pi-horizontal-group-item), .portable-infobox.pi-theme-free .pi-data-label:not(.pi-horizontal-group-item) { background-color: transparent; background-image: none; color: inherit; margin-right: 0.5em; }

.portable-infobox.pi-theme-greedcard .pi-data-value, .portable-infobox.pi-theme-spellcard .pi-data-value, .portable-infobox.pi-theme-master .pi-data-value, .portable-infobox.pi-theme-free .pi-data-value { background-color: #DFDFDF; }

.portable-infobox.pi-theme-greedcard .pi-navigation, .portable-infobox.pi-theme-spellcard .pi-navigation, .portable-infobox.pi-theme-master .pi-navigation, .portable-infobox.pi-theme-free .pi-navigation { background-color: Gainsboro; color: inherit; }

.portable-infobox.pi-theme-greedcard .pi-navigation a, .portable-infobox.pi-theme-spellcard .pi-navigation a, .portable-infobox.pi-theme-master .pi-navigation a, .portable-infobox.pi-theme-free .pi-navigation a { color: inherit; }/**/

/* Theme — Video Game */ .portable-infobox.pi-theme-vidya { background-color: #DFDFDF; padding: 0.3em; border-radius: 0; }

.portable-infobox.pi-theme-vidya .pi-caption { font-style: normal; color: inherit; margin-bottom: 0.5em; }

.portable-infobox.pi-theme-vidya .pi-item { border: 0; }

.portable-infobox.pi-theme-vidya .pi-navigation, .portable-infobox.pi-theme-vidya .pi-header, .portable-infobox.pi-theme-vidya .pi-title { background-color: #4CC417; background-image: none; color: inherit; }

.portable-infobox.pi-theme-vidya .pi-data-label:not(.pi-horizontal-group-item) { background-color: #4CC417; background-image: none; color: inherit; border: 0; }

.portable-infobox.pi-theme-vidya .pi-data { margin-bottom: 1px; }

.portable-infobox.pi-theme-vidya .pi-data-value:not(.pi-horizontal-group-item) { background-color: inherit; background-image: none; border: 0; }/**/

/* Theme — Location */ .portable-infobox.pi-theme-location .pi-data-label:not(.pi-horizontal-group-item), .portable-infobox.pi-theme-location .pi-header, .portable-infobox.pi-theme-location .pi-title { background-image: -o-linear-gradient(top, #5CB3FF 25%, #348BD7 75%); background-image: -ms-linear-gradient(top, #5CB3FF 25%, #348BD7 75%); background-image: -moz-linear-gradient(top, #5CB3FF 25%, #348BD7 75%); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(25%, #5CB3FF), color-stop(75%, #348BD7)); background-image: gradient(linear, 0% 0%, 0% 100%, color-stop(25%, #5CB3FF), color-stop(75%, #006200)); }

.portable-infobox.pi-theme-location .pi-navigation { background-color: Gainsboro; background-image: none; color: inherit; }

.portable-infobox.pi-theme-location .pi-navigation a { color: inherit; }/**/

/* Theme — Music */ .portable-infobox.pi-theme-music .pi-data-label:not(.pi-horizontal-group-item), .portable-infobox.pi-theme-music .pi-header, .portable-infobox.pi-theme-music .pi-title { background-image: -o-linear-gradient(top, #E42217 25%, #C60400 75%); background-image: -ms-linear-gradient(top, #E42217 25%, #C60400 75%); background-image: -moz-linear-gradient(top, #E42217 25%, #C60400 75%); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(25%, #E42217), color-stop(75%, #C60400)); background-image: gradient(linear, 0% 0%, 0% 100%, color-stop(25%, #E42217), color-stop(75%, #C60400)); }

.portable-infobox.pi-theme-music .pi-navigation { background-color: Gainsboro; background-image: none; color: inherit; }

.portable-infobox.pi-theme-music .pi-navigation a { color: inherit; }/**/

/* Theme — Group */ .portable-infobox.pi-theme-group .pi-data-label:not(.pi-horizontal-group-item), .portable-infobox.pi-theme-group .pi-header, .portable-infobox.pi-theme-group .pi-title { background-image: -o-linear-gradient(top, #E5E4E2 25%, #D1D0CE 75%); background-image: -ms-linear-gradient(top, #E5E4E2 25%, #D1D0CE 75%); background-image: -moz-linear-gradient(top, #E5E4E2 25%, #D1D0CE 75%); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(25%, #E5E4E2), color-stop(75%, #D1D0CE)); background-image: gradient(linear, 0% 0%, 0% 100%, color-stop(25%, #E5E4E2), color-stop(75%, #D1D0CE)); color: inherit; }

.portable-infobox.pi-theme-group .pi-navigation { background-color: Gainsboro; background-image: none; color: inherit; }

.portable-infobox.pi-theme-group .pi-navigation a { color: inherit; }/**/

/* Theme — Item */ .portable-infobox.pi-theme-item .pi-data-label:not(.pi-horizontal-group-item), .portable-infobox.pi-theme-item .pi-header, .portable-infobox.pi-theme-item .pi-title { background-image: -o-linear-gradient(top, #FFCBA4 25%, #EBB790 75%); background-image: -ms-linear-gradient(top, #FFCBA4 25%, #EBB790 75%); background-image: -moz-linear-gradient(top, #FFCBA4 25%, #EBB790 75%); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(25%, #FFCBA4), color-stop(75%, #EBB790)); background-image: gradient(linear, 0% 0%, 0% 100%, color-stop(25%, #FFCBA4), color-stop(75%, #EBB790)); }

.portable-infobox.pi-theme-item .pi-navigation { background-color: Gainsboro; background-image: none; color: inherit; }

.portable-infobox.pi-theme-item .pi-navigation a { color: inherit; }/**/

/* Theme — Bestiary */ .portable-infobox.pi-theme-bestiary .pi-data-label:not(.pi-horizontal-group-item), .portable-infobox.pi-theme-bestiary .pi-header, .portable-infobox.pi-theme-bestiary .pi-title { background-image: -o-linear-gradient(top, #CB2C8D 25%, #A30465 75%); background-image: -ms-linear-gradient(top, #CB2C8D 25%, #A30465 75%); background-image: -moz-linear-gradient(top, #CB2C8D 25%, #A30465 75%); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(25%, #CB2C8D), color-stop(75%, #A30465)); background-image: gradient(linear, 0% 0%, 0% 100%, color-stop(25%, #CB2C8D), color-stop(75%, #A30465)); }/**/

/* Theme — GI */ .portable-infobox.pi-theme-gi .pi-data-label:not(.pi-horizontal-group-item), .portable-infobox.pi-theme-gi .pi-header, .portable-infobox.pi-theme-gi .pi-title { background-image: -o-linear-gradient(top, #B2693F 25%, #9E552B 75%); background-image: -ms-linear-gradient(top, #B2693F 25%, #9E552B 75%); background-image: -moz-linear-gradient(top, #B2693F 25%, #9E552B 75%); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(25%, #B2693F), color-stop(75%, #9E552B)); background-image: gradient(linear, 0% 0%, 0% 100%, color-stop(25%, #B2693F), color-stop(75%, #9E552B)); color: inherit; }

.portable-infobox.pi-theme-gi .pi-navigation { background-color: Gainsboro; background-image: none; color: inherit; }

.portable-infobox.pi-theme-gi .pi-navigation a { color: inherit; }/**/

/* Theme — Flora */ .portable-infobox.pi-theme-flora .pi-data-label:not(.pi-horizontal-group-item), .portable-infobox.pi-theme-flora .pi-header, .portable-infobox.pi-theme-flora .pi-title { background-image: -o-linear-gradient(top, #B1EB84 25%, #9DD770 75%); background-image: -ms-linear-gradient(top, #B1EB84 25%, #9DD770 75%); background-image: -moz-linear-gradient(top, #B1EB84 25%, #9DD770 75%); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(25%, #B1EB84), color-stop(75%, #9DD770)); background-image: gradient(linear, 0% 0%, 0% 100%, color-stop(25%, #B1EB84), color-stop(75%, #9DD770)); color: inherit; }

.portable-infobox.pi-theme-flora .pi-navigation { background-color: Gainsboro; background-image: none; color: inherit; }

.portable-infobox.pi-theme-flora .pi-navigation a { color: inherit; }/**/

/* Theme — Flora */ .portable-infobox.pi-theme-omake .pi-data-label:not(.pi-horizontal-group-item), .portable-infobox.pi-theme-omake .pi-header, .portable-infobox.pi-theme-omake .pi-title { background-image: -o-linear-gradient(top, #0A2ACC 25%, #0002A4 75%); background-image: -ms-linear-gradient(top, #0A2ACC 25%, #0002A4 75%); background-image: -moz-linear-gradient(top, #0A2ACC 25%, #0002A4 75%); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(25%, #0A2ACC), color-stop(75%, #0002A4)); background-image: gradient(linear, 0% 0%, 0% 100%, color-stop(25%, #0A2ACC), color-stop(75%, #0002A4)); }

.portable-infobox.pi-theme-omake .pi-navigation { background-color: Gainsboro; background-image: none; color: inherit; }

.portable-infobox.pi-theme-omake .pi-navigation a { color: inherit; }/**/

/* JS-tabbers replacement */ .custom-tabber .tabber { font-size: 13px; }

.custom-tabber .tabber .tabbertab { padding: 0; border: 0; }

.custom-tabber .tabber .tabbernav { font-size: smaller; font-family: inherit; margin-left: 0; border: 0; }

.custom-tabber .tabber .tabbernav li:first-of-type a { margin-left: 0; }

.custom-tabber .tabber .tabbernav wbr + li:before, .custom-tabber .tabber .tabbernav li + li:before { content: " | "; }

.custom-tabber .tabber .tabbernav li a { background: transparent; color: #337800; padding: 0; border: 0; }

.custom-tabber .tabber .tabbernav li:not(.tabberactive) a:hover { text-decoration: underline; }

.custom-tabber .tabber .tabbernav .tabberactive a { background: transparent; color: inherit; border: 0; cursor: text; }

.custom-tabber.custom-tabber-center .tabber { text-align: center; }

.custom-tabber.custom-tabber-center .tabber .tabbernav li a, .custom-tabber.custom-tabber-center .tabber .tabbernav li { font-size: 18px; }

.custom-tabber.custom-tabber-center .tabber .tabbernav li a { font-weight: bold; }/**/