User:Ryuseipuka/fandomdesktop.css

.characterNavBar-wrapper { background: var(--theme-page-background-color--secondary); border-bottom: solid 5px var(--theme-color-character-color); position: relative; padding: 20px 110px 20px 0px; width: 100%; max-width: 100%; margin-left: 0%; transform: translateX(0%); display: block; height: 185px; overflow: visible; transition: height 0.2s 0.2s ease, margin 0.2s ease, transform 0.2s ease, max-width 0.2s 0.2s ease; margin-top: 5px; margin-bottom: 5px; }

.characterNavBar-wrapper hr, .characterNavBar-wrapper .hidden-desktop { display: none; }

.characterNavBar-wrapper tbody { transition: padding-left 0.2s cubic-bezier(.32, 1.13, .5, 1.16); padding-left: 30px; }

.characterNavBar-wrapper tbody, .characterNavBar-wrapper tr, .characterNavBar-wrapper th { display: block; }

.characterNavBar-wrapper th { text-align: left; font: 900 italic 1.1em Montserrat; letter-spacing: 1px; text-transform: uppercase; position: absolute; width: 100%; height: 20px; right: 0; top: 0; padding: 20px 30px; z-index: 0; }

.characterNavBar-wrapper th span { text-transform: capitalize; font: 700 0.9em Rubik; letter-spacing: 0px; }

.characterNavBar-wrapper tbody th img { position: absolute; width: 100px; height: auto; top: 10px; left: 20px; transform: translate(10px, 0px) scale(1.3); opacity: 0.1; transition: transform 0.3s 0.2s cubic-bezier(.32, 1.13, .5, 1.16), opacity 0.2s ease; pointer-events: none; z-index: 1; }

.characterNavBar-wrapper tbody tr:nth-child(2) { height: auto; overflow: hidden; transition: height 0.2s ease; position: relative; }

.characterNavBar-wrapper .characterNavBar { padding: 5px 0px 0px; box-sizing: border-box; display: flex; flex-direction: row; overflow: auto; mask-image: linear-gradient(to left, transparent 0, black 50px); flex-wrap: wrap; align-items: flex-start; align-content: flex-start; gap: 0.2em; }

.characterNavBar-wrapper .characterNavBar center { padding: 0px 0px 10px; display: flex; flex-direction: row; overflow: auto; mask-image: linear-gradient(to left, transparent 0, black 50px); flex-wrap: wrap; align-items: flex-start; align-content: flex-start; gap: 0.2em; height: auto; }

.characterNavBar-wrapper .characterNavBar center > div:not(.subpage) { transition: margin-top 0.3s 0.4s cubic-bezier(.32, 1.13, .5, 1.16), opacity 0.3s 0.4s ease, margin-left 0s ease; opacity: 1; }

.characterNavBar-wrapper .characterNavGroupTitle { display: none; }

.characterNavBar-wrapper .characterNavBar .characterNavGroup, .characterNavBar-wrapper .characterNavBar .characterNavSubGroup { display: flex; justify-content: flex-start; flex-wrap: nowrap; gap: 10px; white-space: nowrap; padding-right: 50px; flex: 0 0 100%; position: static; }

.characterNavBar-wrapper .characterNavBar div a { display: block; z-index: 2; }

.characterNavBar-wrapper .characterNavGroup.unit span { position: absolute; height: calc(100% - 40px); top: 10px; right: 40px; z-index: 1; opacity: 0.1; pointer-events: none; }

.characterNavBar-wrapper .characterNavGroup.unit img { left: 0px; height: auto; width: auto; max-width: 300px; max-height: 100px; z-index: 1; pointer-events: none; }

.characterNavBar-wrapper .characterNavSubGroup > *:first-child, .characterNavBar-wrapper .characterNavGroup.unit a:nth-child(2) { font: 900 italic 1em Montserrat; flex: 0 0 30px; display: block; background: linear-gradient(var(--theme-infobox-accent-color) 0%, var(--theme-infobox-accent-color) 100%); background-repeat: no-repeat; background-size: 110% 40%; background-position: bottom; text-align: center; padding: 2px 5px 0px; }

/*****    special cases      *****/ .characterNavBar-wrapper.characterNavBarNewy { height: 160px; }

.characterNavBar-wrapper.characterNavBarNewy th img { transform: translate(10px, -10px) scale(1.15); }

.characterNavBar-wrapper.characterNavBarNoChibi th img { padding-top: 25px; }

.characterNavBar-wrapper.characterNavBarCharAnzu { height: 130px; }

.characterNavBar-wrapper.characterNavBarCharAnzu .characterNavSubGroup { display: none; }

.characterNavBar-wrapper.characterNavBarCharAnzu th img { transform: translate(10px, -25px) scale(1); }

.characterNavBarCharAnzu .characterNavGroup.unit img { lefT: 0px; height: auto; width: auto; max-width: 150px; max-height: 60px; z-index: 1; }

/*****      collapsed        *****/ .characterNavBar-wrapper.mw-collapsed { height: 100px; max-width: 800px; margin-left: 50%; transform: translateX(-50%); transition: height 0.2s 0.2s ease, margin 0.2s 0.2s ease, transform 0.2s 0.2s ease, max-width 0.2s 0.4s ease; }

.characterNavBar-wrapper.mw-collapsed .characterNavBar { overflow-y: hidden; }

.characterNavBar-wrapper.mw-collapsed .characterNavBar center { height: 4em; transition: height 0.2s 0.22s ease; }

.characterNavBar-wrapper.mw-collapsed tbody th img { transform: translate(0px, -45px) scale(0.8); opacity: 1; transition: transform 0.2s 0.2s ease, opacity 0.2s 0.2s ease; }

.characterNavBar-wrapper.mw-collapsed tr:nth-child(2) { display: flex !important; height: 4em; }

.characterNavBar-wrapper.mw-collapsed .characterNavBar center > div:not(.subpage) { transition: margin-top 0.2s ease, opacity 0.2s ease, margin-left 0s 0.4s ease; margin-top: 10px; opacity: 0; margin-left: -500%; }

.characterNavBar-wrapper.mw-collapsed tbody { transition: padding-left 0.2s 0.2s ease; padding-left: 140px; }

/***** Notice *****/ .characterNavBarNotice-wrapper { width: 100%; max-width: 100%; margin-left: 0%; transform: translateX(0%); transition: height 0.2s 0.2s ease, margin 0.2s ease, transform 0.2s ease, max-width 0.2s 0.2s ease; display: flex; gap: 5px; margin-top: 0px; margin-bottom: 25px; flex-wrap: wrap; }

.characterNavBarNotice { flex: 1 0 300px; padding: 15px 10px 15px 80px; position: relative; }

.characterNavBarNotice.Stub { background: rgba(255, 0, 0, .10); }

.characterNavBarNotice.Spoilers { background: rgba(99, 165, 200, .2); }

.characterNavBarNotice img { position: absolute; width: 50px; top: 10px; left: 15px; height: auto; transition: left 0.2s 0.0s ease; }

.characterNavBarNotice p { font: 400 italic 0.9em Rubik; margin: 0px; }

.characterNavBarNotice h3 { font: 700 italic 1.0em Rubik; margin: 0px; display: block; }

.characterNavBar-wrapper.mw-collapsed ~ .characterNavBarNotice-wrapper { max-width: 800px; margin-left: 50%; transform: translateX(-50%); transition: height 0.2s 0.2s ease, margin 0.2s 0.2s ease, transform 0.2s 0.2s ease, max-width 0.2s 0.4s ease, padding-left 0.2s 0.4s ease; }