User:Coriumheap/fandomdesktop.css


 * root {

--story-font-size: 16px; }


 * root  { --theme-color-character-color: #FCF000; }
 * root  { --theme-color-character-color: inherit; }
 * root .pi-theme-eichi-color { --theme-color-character-color: #FFF3B7; }
 * root .pi-theme-wataru-color { --theme-color-character-color: #A0D7E2; }
 * root .pi-theme-tori-color  { --theme-color-character-color: #F4B2B2; }
 * root .pi-theme-yuzuru-color { --theme-color-character-color: #3E62AC; }
 * root .pi-theme-hokuto-color { --theme-color-character-color: #0067B6; }
 * root .pi-theme-subaru-color { --theme-color-character-color: #F4981C; }
 * root .pi-theme-makoto-color { --theme-color-character-color: #65AB31; }
 * root .pi-theme-mao-color   { --theme-color-character-color: #951E56; }
 * root .pi-theme-chiaki-color { --theme-color-character-color: #E70032; }
 * root .pi-theme-kanata-color { --theme-color-character-color: #008DB6; }
 * root .pi-theme-tetora-color { --theme-color-character-color: #312834; }
 * root .pi-theme-midori-color { --theme-color-character-color: #005340; }
 * root .pi-theme-shinobu-color{ --theme-color-character-color: #FEDC00; }
 * root .pi-theme-hiiro-color { --theme-color-character-color: #BA2634; }
 * root .pi-theme-aira-color  { --theme-color-character-color: #F1D796; }
 * root .pi-theme-mayoi-color { --theme-color-character-color: #522F5F; }
 * root .pi-theme-tatsumi-color{ --theme-color-character-color: #7EBDA6; }
 * root .pi-theme-nagisa-color { --theme-color-character-color: #A83638; }
 * root .pi-theme-hiyori-color { --theme-color-character-color: #B7D201; }
 * root .pi-theme-ibara-color { --theme-color-character-color: #74325D; }
 * root .pi-theme-jun-color   { --theme-color-character-color: #1A2F61; }
 * root .pi-theme-shu-color   { --theme-color-character-color: #E5ABAF; }
 * root .pi-theme-mika-color  { --theme-color-character-color: #006A6D; }
 * root .pi-theme-hinata-color { --theme-color-character-color: #EB6FA2; }
 * root .pi-theme-yuta-color  { --theme-color-character-color: #00A1E8; }
 * root .pi-theme-rinne-color { --theme-color-character-color: #BA2636; }
 * root .pi-theme-himeru-color { --theme-color-character-color: #8AC3EB; }
 * root .pi-theme-kohaku-color { --theme-color-character-color: #F3B3C2; }
 * root .pi-theme-niki-color  { --theme-color-character-color: #507EA5; }
 * root .pi-theme-rei-color   { --theme-color-character-color: #46266E; }
 * root .pi-theme-kaoru-color { --theme-color-character-color: #FDD25D; }
 * root .pi-theme-koga-color  { --theme-color-character-color: #C9C9C9; }
 * root .pi-theme-adonis-color { --theme-color-character-color: #915DA3; }
 * root .pi-theme-tomoya-color { --theme-color-character-color: #EDDDB3; }
 * root .pi-theme-nazuna-color { --theme-color-character-color: #FFED48; }
 * root .pi-theme-mitsuru-color{ --theme-color-character-color: #ED6D34; }
 * root .pi-theme-hajime-color { --theme-color-character-color: #CBB8D9; }
 * root .pi-theme-keito-color { --theme-color-character-color: #316645; }
 * root .pi-theme-kuro-color  { --theme-color-character-color: #E83929; }
 * root .pi-theme-souma-color { --theme-color-character-color: #5554A2; }
 * root .pi-theme-tsukasa-color{ --theme-color-character-color: #952242; }
 * root .pi-theme-leo-color   { --theme-color-character-color: #ED6D52; }
 * root .pi-theme-izumi-color { --theme-color-character-color: #BADBF2; }
 * root .pi-theme-ritsu-color { --theme-color-character-color: #001E44; }
 * root .pi-theme-arashi-color { --theme-color-character-color: #ECDF7B; }
 * root .pi-theme-natsume-color{ --theme-color-character-color: #D60132; }
 * root .pi-theme-tsumugi-color{ --theme-color-character-color: #00608D; }
 * root .pi-theme-sora-color  { --theme-color-character-color: #FFF353; }
 * root .pi-theme-madara-color { --theme-color-character-color: #622D18; }
 * root .pi-theme-jin-color   { --theme-color-character-color: #8DA0B6; }
 * root .pi-theme-akiomi-color { --theme-color-character-color: #915C8B; }
 * root .pi-theme-anzu-color  { --theme-color-character-color: #FFB6DA; }
 * root .pi-theme-seiya-color { --theme-color-character-color: #292b3c; }
 * root .pi-theme-gatekeeper-color { --theme-color-character-color: #5f2222; }

body[class*="_-_Story"]:not([class*="_-_Story_Index"]) .character-render-full { display: block; position: relative; }

body[class*="_-_Story"]:not([class*="_-_Story_Index"]) .character-render-full img { display: block; }

body[class*="_-_Story"]:not([class*="_-_Story_Index"]) .character-render-full::after { content: attr(data-char-name); font: 14px Rubik; }

body[class*="_-_Story"]:not([class*="_-_Story_Index"]) .character-render-icon img { width:50px; min-width:50px !important; border-radius: 50px; }

body[class*="_-_Story"]:not([class*="_-_Story_Index"]).render-maximized .character-render-full{ display:block; } body[class*="_-_Story"]:not([class*="_-_Story_Index"]).render-maximized .character-render-icon{ display:none; }

body[class*="_-_Story"]:not([class*="_-_Story_Index"]).render-minimized .character-render-icon{ display:block; } body[class*="_-_Story"]:not([class*="_-_Story_Index"]).render-minimized .character-render-full{ display:none; }

body[class*="_-_Story"]:not([class*="_-_Story_Index"]).render-minimized .article-table{ border: none; }

body[class*="_-_Story"]:not([class*="_-_Story_Index"]) .article-table tr td p, body[class*="_-_Story"]:not([class*="_-_Story_Index"]) .article-table th { font-size: var(--story-font-size); transition: font 0.3s ease; }

body[class*="_-_Story"]:not([class*="_-_Story_Index"]).render-minimized .center { text-align: left; }

body[class*="_-_Story"]:not([class*="_-_Story_Index"]).render-minimized .article-table:not(.storyNavBar) { max-width: 800px; margin:auto; }

body[class*="_-_Story"]:not([class*="_-_Story_Index"]).render-minimized .article-table:not(.storyNavBar) tr { display:flex; margin-bottom: 15px; text-align: left; }

body[class*="_-_Story"]:not([class*="_-_Story_Index"]).render-minimized .article-table tr td { display:block; border: none; vertical-align: top; padding: 0px 10px; }

body[class*="_-_Story"]:not([class*="_-_Story_Index"]).render-minimized .article-table tr td:first-child { flex: 1 0 50px; }

body[class*="_-_Story"]:not([class*="_-_Story_Index"]).render-minimized .article-table tr td:nth-child(2) { flex: 1 1 710px; }

body[class*="_-_Story"]:not([class*="_-_Story_Index"]).render-minimized .article-table tr td[colspan="2"] { padding-left: 80px; }

body[class*="_-_Story"]:not([class*="_-_Story_Index"]).render-minimized .article-table:not(.storyNavBar) tr th { border:none; display: inline-block; padding: 3px 0px; border-radius: 0px; margin-left: 80px; background: none !important; color: var(--theme-page-text-color) !important; letter-spacing: 1px; text-transform: uppercase; } /* .render-minimized .article-table.storyNavBar tr:not(.story-options) { display:flex; gap: 10px; }

.render-minimized .article-table.storyNavBar tr:not(.story-options) th { background: var(--theme-infobox-main-light-color) !important; border-radius: 5px; padding: 10px 20px; margin-left: 0px; transition: all 0.3s ease; }

.render-minimized .article-table.storyNavBar tr:not(.story-options) th:first-child:hover { transform: translateX(-3px); } .render-minimized .article-table.storyNavBar tr:not(.story-options) th:last-child:hover { transform: translateX(3px); }

.render-minimized .article-table.storyNavBar tr.story-options th { margin-left: 0px; display:block; }*/

body[class*="_-_Story"]:not([class*="_-_Story_Index"]).render-minimized .article-table tr td[colspan="2"] img { border-radius: 10px; }

body[class*="_-_Story"]:not([class*="_-_Story_Index"]).render-minimized .article-table tr td p { background-color: var(--theme-infobox-main-light-color); padding: 10px 15px; display:table; border-collapse: separate; margin: 0px 0px 5px 0px; border-radius: 2px 10px 10px 2px; transition: 0.15s all ease; background: linear-gradient(rgba(var(--theme-page-background-color--rgb), 0.9), rgba(var(--theme-page-background-color--rgb), 0.9)), linear-gradient(var(--theme-color-character-color), var(--theme-color-character-color)); }

body[class*="_-_Story"]:not([class*="_-_Story_Index"]).render-minimized .article-table tr td p:hover { transform: translateX(2px); }

body[class*="_-_Story"]:not([class*="_-_Story_Index"]).render-minimized .article-table tr td p:first-child { margin-top: 16px; }

body[class*="_-_Story"]:not([class*="_-_Story_Index"]).render-minimized .article-table tr td p:last-child { border-radius: 2px 10px 10px; }

body[class*="_-_Story"]:not([class*="_-_Story_Index"]).render-minimized .article-table tr td:first-child div[alt] { position:relative; }

body[class*="_-_Story"]:not([class*="_-_Story_Index"]).render-minimized .article-table tr td:first-child div[alt]::after { content: attr(alt); position:absolute; left: calc(100% + 20px); white-space:nowrap; font: 700 10.5px Rubik; letter-spacing: 1px; text-transform: uppercase; opacity: 0.6; }

@media only screen and (max-width: 812px) { .character-render-icon img { width:40px; min-width:40px !important; }   .render-minimized .article-table tr td[colspan="2"] { padding-left: 70px; }

.render-minimized .article-table tr th { margin-left: 70px; } }

storyNavBar-wrapper{ overflow:visible; }

.storyNavBar{ z-index: 399; border: none; display:block; transition: all 0.3s ease; margin: 10px auto; }

.storyTopNav{ position:sticky; top: -1px; margin: 0px auto; width: min(100%,80vw); max-width: 900px; margin-bottom: 20px; height: 40px; }

.storyNavBar tbody{ background: var(--theme-page-background-color--secondary); border-radius: 10px; display:block; overflow: hidden; transition: all 0.3s ease; padding: 10px; max-width: 900px; margin: auto; }

.storyTopNav tbody{ border-radius: 20px; padding: 0px; }

.storyNavBar tbody tr{ transition: all 0.3s ease; padding: 5px 0px; }

.storyNavBar tr{ position:relative; width: 100%; display:flex; justify-content: space-between; flex-wrap: nowrap; margin-bottom: 0px; }

.storyTopNav tr{ overflow-x: auto; }

.storyNavBar tr th, .storyNavBar tr td{ transition: all 0.3s ease; width: unset; background: none; border: none; padding: 0px 10px; font: 700 14px Rubik, 'sans-serif'; flex-grow: 1; white-space: nowrap; row-gap: 100px; }

.storyNavBar tr td{ font-weight: 400; }

.storyNavBar tr th:first-child:hover { padding-left: 8px; } .storyNavBar tr th:last-child:hover { padding-right: 8px; }

.storyNavBar.storyTopNav tr { padding: 10px; }

padding: 0px 20px; margin: auto; }
 * 1) chapterList{

.storyNavBar.storyTopNav tr th:not(:last-child){ border-right: solid 2px rgba(var(--theme-page-text-color--rgb),.5); }

.storyNavBar tr th[class|="story"]{ flex: 0 1 auto; }

.storyNavBar .material-icons-round { font-size: 16px; line-height: 2px; vertical-align: -3px; }

.storyNavBar .story-resize-text .material-icons-round { margin-right: 8px; }

.isSticky{ padding-top: 55px; margin-top: -15px; margin-bottom: 20px; }

.isSticky tbody{ height: 12px; width: 20%; margin: auto; display:flex; justify-content: center; box-shadow: 0 0px 6px 0 rgba(0,0,0,.15); }

.isSticky tbody tr{ flex: 0 0 min(80vw, 900px); }

.isSticky tbody tr th{ visibility: hidden; }

.isSticky:hover tbody{ height: 44px; width: 100%; box-shadow: 0 3px 12px 0 rgba(0,0,0,.2); }

.isSticky:hover tbody tr th{ visibility: visible; }

.story-resize-text ul{ list-style-type: none; display: inline-flex; margin: 0px; gap:5px; font-weight: 500; user-select: none; }

.current-option{ display: none; }

.currentFontSize { font-weight: 700; color: var(--theme-link-color); }