MediaWiki:Common.css

/* CSS placed here will be applied to all skins */ /**import fonts**/ @import url('https://fonts.googleapis.com/css2?family=Merriweather&family=Open+Sans&family=Libre+Baskerville&display=swap'); @import url('https://fonts.googleapis.com/icon?family=Material+Icons+Round'); @font-face { font-family: 'OpenDyslexic'; src: local("OpenDyslexic"), url(https://static.miraheze.org/twistedwonderlandwiki/6/69/OpenDyslexic.otf); }

/**Username Colors for admins**/ a[href$="User:Xnotyuki"], a[href$="User:Ylimegirl"], a[href$="User:FlowersGems%26Months"], a[href$="User:Bluemorpho"] { color: #0e69bd !important; position:relative; }

content: "Admin"; font-variant: small-caps; position: absolute; right: 0; top: calc(100% + 2px); min-width: 10px; border: 1px #b39f73 solid; border-radius: 4px; padding: 4px; font-size: 14px; line-height: 1.2em; z-index: 5000; text-align: center; background-color:white; color:#b39f73; }
 * 1) content a[href$="User:Xnotyuki"]:hover::after,
 * 2) content a[href$="User:Ylimegirl"]:hover::after,
 * 3) content a[href$="User:FlowersGems%26Months"]:hover::after,
 * 4) content a[href$="User:Bluemorpho"]:hover::after {

.theme-dark #content a[href$="User:Xnotyuki"]:hover::after, .theme-dark #content a[href$="User:Ylimegirl"]:hover::after, .theme-dark #content a[href$="User:FlowersGems%26Months"]:hover::after, .theme-dark #content a[href$="User:Bluemorpho"]:hover::after { background-color: black; color: white; }

/**Mainpage Layout**/

.mainpage-columns { display:grid; gap:5px; grid-template-columns:7fr 3fr; align-items:start; }

.mainpage-left { display:grid; gap:1em 5px; }

.mainpage-left .mainpage-current-news { display:grid; gap:1em 5px; grid-template-columns:6fr 4fr; }

.mainpage-right { display:grid; gap:1em; }

/* -- Infobox -- */

.portable-infobox.pi-theme-twisted { --infobox-background: white; border: 1px solid #b39f73; box-shadow: 0 0 0 4px var(--infobox-background), 0 0 0 7px #b39f73; margin: 7px 7px 22px 22px; width: 310px; background-color: var(--infobox-background); border-radius:3px; box-sizing:border-box; --accent-color: #2d2d2d; --dorm-icon: none; }

.theme-dark .portable-infobox.pi-theme-twisted { --infobox-background:black; } .pi-theme-twisted .pi-border-color { border: none; }

.pi-theme-twisted .pi-item { box-sizing:inherit; }

.pi-theme-twisted p { margin:0; }

.pi-theme-twisted .pi-font { line-height:1.5; }

.pi-theme-twisted .pi-title { background: var(--infobox-background); border-bottom: 2px var(--accent-color) solid; background-image: var(--dorm-icon); font-family: serif; width: 85%; text-align:center; font-weight:bold; font-size:18px; padding:12px 9px; line-height:1.25; } .theme-dark .pi-theme-twisted .pi-title, .theme-dark .pi-theme-twisted .pi-header { color:white; }

margin:0 auto !important; }
 * 1) bodyContent .pi-theme-twisted h2 {

.pi-theme-twisted .pi-caption { text-align: center; color: #ccbfa1; font-style: italic; padding:9px; font-size:14px; line-height:1.75; }

.pi-theme-twisted .pi-image { padding-top: 5px; }

.pi-theme-twisted .pi-header { background: var(--infobox-background); border-top: 2px var(--accent-color) solid; border-bottom: 2px var(--accent-color) solid; width: 85%; margin: 0 auto; text-align: center; padding:9px; }

.pi-theme-twisted .pi-data { padding:9px; font-size:12px; }

.pi-theme-twisted .pi-horizontal-group .pi-data-label, .pi-theme-twisted .pi-horizontal-group .pi-data-value { text-align:center; border-left:none; }

.pi-theme-twisted.pi-theme-Heartslabyul .pi-title, .pi-theme-twisted.pi-theme-Savanaclaw .pi-title, .pi-theme-twisted.pi-theme-Octavinelle .pi-title, .pi-theme-twisted.pi-theme-Scarabia .pi-title, .pi-theme-twisted.pi-theme-Pomefiore .pi-title, .pi-theme-twisted.pi-theme-Ignihyde .pi-title, .pi-theme-twisted.pi-theme-Diasomnia .pi-title, .pi-theme-twisted.pi-theme-Night-Raven-College .pi-title { padding-left: 45px; padding-right: 45px; background-size: 45px; background-position: top right; background-repeat: no-repeat; }

.pi-theme-twisted.pi-theme-Heartslabyul { --accent-color: #d50000; --dorm-icon: url("https://static.miraheze.org/twistedwonderlandwiki/7/73/Heartslabyul.png"); }

.pi-theme-twisted.pi-theme-Savanaclaw { --accent-color: #EFA406; --dorm-icon: url("https://static.miraheze.org/twistedwonderlandwiki/4/47/Savanaclaw.png"); }

.pi-theme-twisted.pi-theme-Octavinelle { --accent-color: #787aa4; --dorm-icon: url("https://static.miraheze.org/twistedwonderlandwiki/0/09/Octavinelle.png"); }

.pi-theme-twisted.pi-theme-Scarabia { --accent-color: #9a1719; --dorm-icon: url("https://static.miraheze.org/twistedwonderlandwiki/3/34/Scarabia.png"); }

.pi-theme-twisted.pi-theme-Pomefiore { --accent-color: #352687; --dorm-icon: url("https://static.miraheze.org/twistedwonderlandwiki/0/00/Pomefiore.png"); }

.pi-theme-twisted.pi-theme-Ignihyde { --accent-color: #346CBC; --dorm-icon: url("https://static.miraheze.org/twistedwonderlandwiki/e/e3/Ignihyde.png"); }

.pi-theme-twisted.pi-theme-Diasomnia { --accent-color: #85c02e; --dorm-icon: url("https://static.miraheze.org/twistedwonderlandwiki/1/16/Diasomnia.png"); }

.pi-theme-twisted.pi-theme-Night-Raven-College { --accent-color: white; --dorm-icon: url("https://static.miraheze.org/twistedwonderlandwiki/9/93/Night_Raven_College.png"); }

/* -- Tables -- */

.article-table { border-collapse:collapse; border:1px solid #b39f73; margin-top:5px; margin-bottom:5px; }

.article-table td, .article-table th { background-color:#f8f3eb; border:1px solid #b39f73; padding:0.1em 0.25em; }

.theme-dark .article-table td, .theme-dark .article-table th { background-color: black; }

.article-table th { text-align:center; font-weight: bold; }

/**Dorm tables**/ .Heartslabyul, .Savanaclaw, .Octavinelle, .Scarabia, .Pomefiore, .Ignihyde, .Diasomnia, .NRC { border-collapse: collapse; }

.Heartslabyul > tbody th, .Savanaclaw > tbody th, .Octavinelle > tbody th, .Scarabia > tbody th, .Pomefiore > tbody th, .Ignihyde > tbody th, .Diasomnia > tbody th, .NRC > tbody th { background-color:var(--primary-header, initial); color: var(--primary-text, white); font-weight: bold; padding: 0.2em; text-align: center; }

.Heartslabyul > tbody .secondaryheader, .Savanaclaw > tbody .secondaryheader, .Octavinelle > tbody .secondaryheader, .Scarabia > tbody .secondaryheader, .Pomefiore > tbody .secondaryheader, .Ignihyde > tbody .secondaryheader, .Diasomnia > tbody .secondaryheader, .NRC > tbody .secondaryheader, .theme-dark .Heartslabyul > tbody .secondaryheader, .theme-dark .Savanaclaw > tbody .secondaryheader, .theme-dark .Octavinelle > tbody .secondaryheader, .theme-dark .Scarabia > tbody .secondaryheader, .theme-dark .Pomefiore > tbody .secondaryheader, .theme-dark .Ignihyde > tbody .secondaryheader, .theme-dark .Diasomnia > tbody .secondaryheader, .theme-dark .NRC > tbody .secondaryheader { background-color:var(--secondary-header, initial) !important; color:var(--secondary-text, white); font-weight: bold; padding: 0.2em; text-align: center; }

.Heartslabyul > tbody td, .Savanaclaw > tbody td, .Octavinelle > tbody td, .Scarabia > tbody td, .Pomefiore > tbody td, .Ignihyde > tbody td, .Diasomnia > tbody td, .NRC > tbody td { padding:0.3em; border-top: 1px solid var(--border-color, transparent); border-bottom: 1px solid var(--border-color, transparent); background-color:#f8f3eb; }

.theme-dark .Heartslabyul > tbody td, .theme-dark .Savanaclaw > tbody td, .theme-dark .Octavinelle > tbody td, .theme-dark .Scarabia > tbody td, .theme-dark .Pomefiore > tbody td, .theme-dark .Ignihyde > tbody td, .theme-dark .Diasomnia > tbody td, .theme-dark .NRC > tbody td { background-color:black; }

.Heartslabyul > tbody th, .Savanaclaw > tbody th, .Octavinelle > tbody th, .Scarabia > tbody th, .Pomefiore > tbody th, .Ignihyde > tbody th, .Diasomnia > tbody th, .NRC > tbody th { border-top: 1px solid var(--border-color, transparent); border-bottom: 1px solid var(--border-color, transparent); }

.Heartslabyul { --primary-header: #d50000; --secondary-header:#8A1305; --border-color: #B4A073; }

.Savanaclaw { --primary-header: #EFA406; --secondary-header: #F5C663; --secondary-text: black; --border-color: #b6b3b6; }

.theme-dark .Savanaclaw th a, .theme-dark .Savanaclaw .secondaryheader a, .theme-dark #content .Savanaclaw th a.external, .theme-dark #content .Savanaclaw .secondaryheader a.external { color:#74811C; }

.Octavinelle { --primary-header: #8A80BB; --secondary-header: #493470; --border-color: #a59dc1; }

.Scarabia { --primary-header: #9a1719; --secondary-header: #611710; --border-color: #E3A70E; }

.Pomefiore { --primary-header: #352687; --secondary-header: #241d48; --border-color: #7C6E66; }

.Ignihyde { --primary-header: #147AEE; --secondary-header: #516EDD; --border-color: #403e43; }

.Diasomnia { --primary-header: #85c02e; --primary-text: black; --secondary-header: #375F00; --border-color: #1b1a21; }

.theme-dark .Diasomnia th a, .theme-dark #content .Diasomnia th a.external { color:#3e7805; }

.theme-dark .Diasomnia .secondaryheader a, .theme-dark #content .Diasomnia .secondaryheader a.external { color: #B8C93D; }

.NRC { --primary-header: black; --secondary-header: #686868; --secondary-text: black; --border-color: #B4A073; }

/**other table styles**/ .storytable { border: none; border-collapse:collapse; width:100%; text-align:left; -webkit-user-select: none; -webkit-touch-callout: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.storytable th { color: #B39F73; padding: 0.4em; font-size: 1.2em; text-align: center; border-top: none; border-bottom: 1.2px solid #B39F73; background-color: #f8f3eb; }

.theme-dark .storytable th, .theme-dark .storytable td, .theme-dark .storytable .secondaryheader, .theme-dark .storytable .bottomnav { background-color: black; }

.storytable td { padding: 0.1em 0.4em 0 0.4em; border: none; background-color:#f8f3eb; }

.storytable .secondaryheader { color: #C29C48; font-weight: bold; padding: 0.4em; text-align: center; border-bottom: 1px solid #C29C48; background-color:#f8f3eb; }

.storytable .character { text-align: center; font-size: 1em; font-weight: bold; padding: 2.5em 0.5em; box-sizing:border-box; width:150px; }

.storytable .choice { background-color:white; text-align: center; font-weight: bold; font-style: italic; padding: 0.4em; border-radius: 0.8em; border:3px solid #f8f3eb; }

.theme-dark .storytable .choice { background-color: #EEEBE6; color: black; border: 3px solid black; }

.storytable .choice a { color: #007300; }

.storytable .bottomnav { color: #B39F73; padding: 0.4em; font-weight: bold; text-align: center; border-top: 1.2px solid #B39F73; background-color:#f8f3eb; }

.card { border:1px solid #b39f73; background-color:#f8f3eb; }

.theme-dark .card { background-color:black; }

.card th, .card td { border:none; background-color:#f8f3eb; }

.theme-dark .card th, .theme-dark .card td { background-color:black; color: white; }

.themedtable { border-radius: 7px; border: 1px solid #464748; margin-top:5px; margin-bottom:5px; }

.theme-dark .themedtable { border-color:#333; }

.themedtable > tbody { border-radius:5px; overflow:hidden;/**fallback because some browsers don't support clip**/ overflow:clip; }

.themedtable th { background-color: #338E4F; color: white; text-align: center; border-top-left-radius:5px; border-top-right-radius:5px; }

.theme-dark .themedtable th { background-color: #1C3323; }

.themedtable th a { color: #b2d551; }

.theme-dark .themedtable th a { color: #c4d167; }

.themedtable .secondaryheader { text-align: center; border: 1px solid #b39f73; font-weight: bold; background-color:#b39f73; color: white; }

.theme-dark .themedtable .secondaryheader { background-color: black; }

.themedtable td { border:none; }

.main .active, .main .inactive, .main.button { padding: 5px 10px; border: none; font-weight: bold; text-align: center; }

.main .active, .main .inactive, .main .inactive a { color:#202122; }

.theme-dark .main .active, .theme-dark .main .inactive, .theme-dark .main .inactive a { color:white; }

.main .active, .main .inactive:hover { background: #7EDD4A; }

.theme-dark .main .active, .theme-dark .main .inactive:hover, .theme-dark .main.active.button, .theme-dark .main.button:hover { background-color: #2E533A; }

.main .inactive { background-color:#C1EEA7; }

.theme-dark .main .inactive, .theme-dark .main.button { background-color: #1C3323; }

.main .inactive:hover a { color:#719707; }

.theme-dark .main .inactive:hover a { color: #C4D167; }

.main td:first-child { border-radius: 7px 0 0 7px; }

.main td:last-child { border-radius: 0 7px 7px 0; }

.main td:first-child:last-child { border-radius:7px; }

.main.button { display: inline-block; } .storytab { margin-left: auto; margin-right: auto; }

.storytab td { margin: 2px; vertical-align: middle; }

.storytab .inactive, .storytab .active { border: 1px solid #b39f73; line-height:1.2em; padding-left: 1.0em; padding-right: 1.0em; font-weight: bold; min-height:30px; }

.storytab .flex { display:flex; align-items:center; }

.theme-dark .storytab .inactive, .theme-dark .storytab .active, .theme-dark .storytab .active a, .theme-dark .storytab .inactive a { color:white; }

.storytab .inactive { transition: background-color 0.2s; background-color:#f8f3eb; }

.theme-dark .storytab .inactive { background-color:black; }

.storytab .active, .storytab .inactive:hover { background-color: #C29C48; }

.nocopy { -webkit-user-select: none; -webkit-touch-callout: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.noborder, .noborder th, .noborder td { border:none !important; }

/**End table styles**/

/* -- Tabbers -- */

/*general tabber styles*/ ul.tabbernav { display: flex; flex-wrap: wrap; justify-content:center; }

ul.tabbernav { margin: 0; padding: 3px 0; border-bottom: 1px solid #ccc; font: bold 12px 'Verdana', sans-serif; }

ul.tabbernav li { list-style: none; margin: 0; display: inline; }

ul.tabbernav li a { padding: 3px 0.5em; margin-left: 3px; border: 1px solid #ccc; border-bottom: none; background: #f2f7ff; text-decoration: none; }

ul.tabbernav li a:link { color: #448; }

ul.tabbernav li a:visited { color: #667; }

ul.tabbernav li a:hover { color: #000; background: #fff9f2; border-color: #ccc; }

ul.tabbernav li.tabberactive a { background-color: #fff; border-bottom: 1px solid #fff; }

ul.tabbernav li.tabberactive a:hover { color: #000; background: #fff; border-bottom: 1px solid #fff; }

.tabber .tabbertab { padding: 5px; border: 1px solid #ccc; border-top: 0; }

/*specific tabber styles*/ .themedtabber div.tabbertab { padding: 0!important; border:none!important; }

.themedtabber ul.tabbernav { border-bottom: 2px solid #b39f73!important; padding: 1.0em!important; }

.themedtabber ul.tabbernav li a { background-color: black!important; transition: background-color 0.2s!important; border: 1px solid #b39f73!important; line-height:2em!important; margin: 0 0.2em 0!important; padding: 3px 0.5em!important; border-radius: 0!important; }

.themedtabber ul.tabbernav li a:link, .themedtabber ul.tabbernav li a:hover { color:white!important; }

.themedtabber ul.tabbernav li a:hover, .themedtabber ul.tabbernav li.tabberactive a { background-color: #C29C48!important; border: 1px solid #b39f73!important; }

.Heartslabyul div.tabbertab, .Savanaclaw div.tabbertab, .Octavinelle div.tabbertab, .Scarabia div.tabbertab, .Pomefiore div.tabbertab, .Ignihyde div.tabbertab, .Diasomnia div.tabbertab { padding: 5px; box-sizing: border-box; width: 100%; border: 1px solid var(--active-color, initial); }

.Heartslabyul ul.tabbernav, .Savanaclaw ul.tabbernav, .Octavinelle ul.tabbernav, .Scarabia ul.tabbernav, .Pomefiore ul.tabbernav, .Ignihyde ul.tabbernav, .Diasomnia ul.tabbernav { padding: 1.0em; border-bottom: 2px solid var(--active-color, initial); }

.Heartslabyul ul.tabbernav li a:link, .Savanaclaw ul.tabbernav li a:link, .Octavinelle ul.tabbernav li a:link, .Scarabia ul.tabbernav li a:link, .Pomefiore ul.tabbernav li a:link, .Ignihyde ul.tabbernav li a:link, .Diasomnia ul.tabbernav li a:link { transition: background-color 0.2s; color: white; background-color: var(--tab-color, initial); border:none; }

.Heartslabyul ul.tabbernav li a:hover, .Savanaclaw ul.tabbernav li a:hover, .Octavinelle ul.tabbernav li a:hover, .Scarabia ul.tabbernav li a:hover, .Pomefiore ul.tabbernav li a:hover, .Ignihyde ul.tabbernav li a:hover, .Diasomnia ul.tabbernav li a:hover { background-color: var(--hover-color, initial); }

.Heartslabyul ul.tabbernav li.tabberactive a, .Savanaclaw ul.tabbernav li.tabberactive a, .Octavinelle ul.tabbernav li.tabberactive a, .Scarabia ul.tabbernav li.tabberactive a, .Pomefiore ul.tabbernav li.tabberactive a, .Ignihyde ul.tabbernav li.tabberactive a, .Diasomnia ul.tabbernav li.tabberactive a { background-color: var(--active-color, initial); }

.Heartslabyul .tabber { --tab-color: #d50000; --hover-color: #A51002; --active-color: #8A1305; }

.Savanaclaw .tabber { --tab-color: #F5C663; --hover-color: #ebab1c; --active-color: #EFA406; }

.Octavinelle .tabber { --tab-color: #8A80BB; --hover-color: #A7A0CC; --active-color: #493470; }

.Scarabia .tabber { --tab-color: #9a1719; --hover-color: #7E1402; --active-color: #611710; }

.Pomefiore .tabber { --tab-color: #352687; --hover-color: #7C6E66; --active-color: #241d48; }

.Ignihyde .tabber { --tab-color: #147AEE; --hover-color: #403e43; --active-color: #516EDD; }

.Diasomnia .tabber { --tab-color: #85c02e; --hover-color: #698740; --active-color: #375F00; }

.imgtabber div.tabbertab { padding: 5px 0; border:none; }

.servertab .tabbertab { padding: 20px ; border: none ; } .servertab ul.tabbernav { position:sticky; top: 15px; border-bottom: none; } .servertab ul.tabbernav li { height:20px; } .servertab ul.tabbernav li a:link { padding: 10px 10px; background-color: #1C3323; border-radius: 7px; border: none; color: white; } .servertab ul.tabbernav li.tabberactive a { background-color: #2E533A; } /**End tabber styles**/

/** card links **/ .square-card-link { padding:4px 4px 2px 4px; display:inline-block; vertical-align: text-top; font-size: 0.8em; line-height:1.5em; text-align:center; }

.square-card-link a, .theme-dark .square-card-link a { color:white; font-weight:bold; }

.square-card-link.rarity-SSR { background:#b69e74; }

.square-card-link.rarity-SR { background:#a1a2a1; }

.square-card-link.rarity-R { background:#5e4328; }

/* -- Misc -- */

.imgfit .image { max-width:900px; margin:0 auto; }

.imgfit img { max-width:100%; height:auto; }

.flashback img { filter:grayscale(1); }

.onetwozero img { max-height:120px; width:auto;

}

.btn-group { display: flex; justify-content: center;

}

.btn-group > :first-child { border-radius: 4px 0 0 4px; }

.btn-group > :not(:first-child) { border-radius: 0; border-left: 0; }

.btn-group > :last-child { border-radius: 0 4px 4px 0; }

/**tooltip styles**/ .tooltip { display: none; position: fixed; border: 1px solid black; padding: 0.4em; z-index: 1; text-align: center; margin: 10px; background:white; }

.theme-dark .tooltip { background: black; color: white; border: 1px solid white; }

.tooltip-active { display: block; }

.buddy-tooltip .tooltip { width: 80px; }

.magic-tooltip .tooltip { width: 300px; }

/* Adds padding to the wrapper to make space for a shadow */ padding: 3px 7px 2px 3px; }
 * 1) tooltip-wrapper {

/* Hides tooltips with redlinks, not yet loaded ones and elements containing tooltip contents for advanced tooltips */ .has-redlinks, .tooltip-loading, .advanced-tooltip .tooltip-contents { display: none; }

.tooltips-init-complete { cursor: help; }

/**end tooltip styles**/

/* Cursor CSS Cursor file copyrighted to www.lolirock.fr */ body { cursor: url('https://static.miraheze.org/twistedwonderlandwiki/c/cc/Magicpencursor.png'), auto; } a:link, a:visited, a:hover, a:active { cursor: url('https://static.miraheze.org/twistedwonderlandwiki/c/cc/Magicpencursor.png'), pointer; }

/* Cursor CSS End */

/* CSS for Audio buttons */

.audio-button { width: 18px; height: 18px; background-color: #C4D167; border: none; border-radius: 5px; background-image: url('https://static.miraheze.org/twistedwonderlandwiki/8/85/OggPlayer_Play.png'); display: inline-block; background-size: 18px auto; } .audio-button.playing, .audio-button:hover, .audio-button-parent:hover > .click-parent { background-color: #C4D167 !important; } .audio-button.playing { background-image: url('https://static.miraheze.org/twistedwonderlandwiki/3/3e/OggPlayer_Stop.png'); background-size: 18px auto; } .audio-button.no-audio { background-color: #337701; background-size: 18px auto; background-image: url('https://static.miraheze.org/twistedwonderlandwiki/b/b3/OggPlayer_Mute.png'); }

.audio-button>*{ display: none; }

.audio-lilia { width: 50px; height: 50px; background-color: transparent; border: none; background-image: url('https://static.miraheze.org/twistedwonderlandwiki/d/d1/Lilia_Music_1.png'); display: inline-block; background-size: 50px auto; filter: grayscale(50%); transition: filter 1s, background-image 1s, } .audio-lilia.playing, .audio-lilia:hover, .audio-lilia-parent:hover > .click-parent { background-color: transparent !important; background-image: url('https://static.miraheze.org/twistedwonderlandwiki/7/71/Lilia_Music_2.png'); background-size: 50px auto; filter: none;} .audio-lilia.playing { animation-duration: 3s; animation-name: wiggle; animation-iteration-count: infinite; animation-timing-function: linear; }

@keyframes wiggle { 0% {transform: rotate(0deg);} 25% {transform: rotate(10deg);} 75% {transform: rotate(-20deg);} } .audio-lilia.no-audio { background-color: transparent; background-size: 50px auto; background-image: url('https://static.miraheze.org/twistedwonderlandwiki/d/d1/Lilia_Music_1.png'); filter: grayscale(100%); }

.audio-lilia>*{ display: none; }

/* Audio Button CSS End */

/* Back-to-top Button Format */ opacity: 0.7; transition: .5s; }   opacity: 1; }   background: none; background-color: transparent; color: #b39f73; border: none; }   text-decoration: underline; } /* Back-to-top Button End */
 * 1) BackToTopBtn div {
 * 1) BackToTopBtn div:hover {
 * 1) backtotop button {
 * 1) backtotop button:hover {

/* Spoiler images */ .spoiler img { transition: all 0s 9999999s; opacity: 0.0; filter: alpha(opacity=00); }

.spoiler img:active { transition: all 0s; opacity: 1.0; filter: alpha(opacity=100); }

/* Spoiler images end */

/* newlinks */ .new a { color: #d33 !important; }

/* recent changes */ .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend { border-color:#b39f73; }

.theme-dark .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend { background:black; }

/* tables css */ table { background-color:unset; } table.wikitable { border-width: 0.5px; border-color: #b39f73; }

.theme-dark table.wikitable .secondaryheader, .theme-dark table.wikitable td, .theme-dark .mw-datatable td { background:black; }

table.wikitable > tr > th, table.wikitable > tr > td, table.wikitable > * > tr > th, table.wikitable > * > tr > td { border:none; background:#f8f3eb; }

table.wikitable th, table.wikitable > tr > th, table.wikitable > * > tr > th { background: #1C3323; text-align: center; }

.theme-dark table.wikitable th, .theme-dark table.wikitable > tr > th, .theme-dark table.wikitable > * > tr > th { color:white; }

table.wikitable .secondaryheader { text-align: center; border:none; font-weight: bold; background:#f8f3eb; }

.mw-datatable th { border-color:#b39f73; text-align: center; font-weight: bold; background-color: #1C3323; }

.mw-datatable td { border-color:#b39f73; padding:0.2em; background:#f8f3eb; }

.mw-datatable tr:hover td { background-color: #262626; }

/*story options configurations, taken from https://tsukina.ga/leo/story.css*/

.storytable .highlight { background-color:blue!important; }

.story-options li { list-style: none; } .storytable { font-size: var(--story-font-size); transition: font 0.25s ease; } /* image swapping stuff */ .character-render-icon img { width:50px; height:75px; min-width:50px !important; border-radius: 50px; }

.character-render-icon img { width:50px; min-width:50px !important; border-radius: 50px; }

.character-render-full{ display:block; } .character-render-icon{ display:none; }

.story-minimized .character-render-icon{ display:block !important; } .story-minimized .character-render-full{ display:none !important; } /* minimized css */ .story-minimized .storytable .character-render-icon img{ margin-bottom: 5px; border:2px solid #b39f73; } .story-minimized .storytable { max-width: 800px; margin:auto; }

.story-minimized .storytable .choice { width: 50%; padding: 0.4em; }

.story-minimized .storytable tr { display:flex; margin-bottom: 2em; }

.story-minimized .storytable tr td { display:block; padding: 0px 10px; }

.story-minimized .storytable tr td:not([class="choice"]):not([colspan="3"]):last-child { min-width: 33%; border-radius:2px 10px 10px 10px; border:1px solid #b39f73; position: relative; top: 1.5em; }

.story-minimized .storytable tr td[colspan="3"] { width: 100%; border-radius: 10px; border:1px solid #b39f73; }

.story-minimized .storytable tr th { display: inline-block; padding: 3px 0px !important; border-radius: 0px; background: none ; color: var(--theme-page-text-color) !important; letter-spacing: 1px; text-transform: uppercase; width: 100%; }

/*navbar stuff*/ storyNavBar-wrapper{ overflow:visible; }

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

.storyTopNav{ position:sticky; top: -1px; margin: 0px auto; margin-bottom: 20px; transition: all 0s ease; height: 40px; }

.storyNavBar tbody{ display:block;/* overflow: hidden;*/ transition: all 0s ease; margin: auto; border-radius: 5px; overflow: hidden; }

.storyTopNav tbody{/* border-radius: 20px;*/ padding: 0px; display:flex; flex-wrap: wrap; justify-content: center; gap: 5px; overflow: visible; }

.storyTopNav.storyOptions tbody{ gap: 0px; }

.storyNavBar tbody tr{ background: var(--theme-page-background-color--secondary); transition: all 0.3s ease; padding: 10px; }

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

.storyTopNav tr{ border-radius: 5px; }

.storyNavBar th { padding-top:5px; padding-bottom:5px; font-weight: bold; }

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

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

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

.story-options > div{ transition: all 0.3s ease; width: unset; background: none; border: none; padding: 0px 10px; flex-grow: 0; white-space: nowrap; } .story-options > div:not(:last-child){ border-right: solid 2px rgba(var(--theme-page-text-color--rgb),.5); }

.storyNavBar tr.story-options{ justify-content: center; }

.storyTopNav .story-options{ position:relative; width: 100%; display:flex; justify-content: center; flex-wrap: wrap; }

.storyTopNav tbody > tr:first-child { padding: 10px; }

.storyTopNav tbody > tr:first-child{

z-index: 10; }

.storyTopNav .story-options-wrapper{ transform: translateY(0%); z-index: 5;

max-height: 400px; transition: max-height 0s step-start, transform 0.3s 0.0s ease; }

.storyTopNav.storyOptions .story-options-wrapper{ transform: translateY( calc( -100% - 5px) ); max-height: 0px; transition: transform 0.3s ease, max-height 0s 0.3s step-end; }

.storyTopNav .story-options-wrapper{ display: flex; overflow: hidden; flex: 0 0 auto; width: auto;

}

.story-format ul li { opacity: 0.4; }

.story-format ul li .story-minimized { opacity: 1; }

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

.storyNavBar .material-icons-round a { color:white; }

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

.story-resize-text ul{ list-style-type: none; display: inline-flex; margin: 0px; overflow: hidden; font-size: 14px; font-weight: bold; user-select: none; margin-left: 8px; left: 0px; }

.story-resize-text ul li{ font-size: 14px; padding: 3px; border-radius: 5px; opacity: 0.4; }

.story-resize-text ul li.currentFontSize { font-weight: 700; opacity: 1; }

.storyNavBar tr th.story-options { padding: 5px; }

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

.story-natsume img { height: 20px; transition: transform 0.2s ease, filter 0.2s ease, opacity 0.2s ease; }

.opendyslexic .story-natsume img { filter: grayscale(100%);

opacity: 0.4; }

.opendyslexic .storytable * { font-family: 'OpenDyslexic'; font-weight: normal; }

/* misc */ border-color: #b39f73 !important; }
 * 1) filetoc {

.theme-dark #filetoc { background: #1C3323 !important; }

pre { border-color: #337700; }

.theme-dark pre { background: #262625; }

.mw-gallery-slideshow-buttons { filter: invert(100%); }

ul.gallery { margin:2px !important; padding:2px !important; }

ul.gallery.mw-gallery-slideshow { margin: 0; }

.catlinks, .toc, .mw-warning { border-color:#b39f73; background:white; } .theme-dark .catlinks, .theme-dark #toc, .theme-dark .toc, .theme-dark .mw-warning { background: black; }
 * toc,

fieldset { border-color:#b39f73; }

.theme-dark .mw-content-ltr.mw-highlight-lines pre, .theme-dark .mw-content-ltr.content .mw-highlight-lines pre { background-color:white; color:#222; } .theme-dark .oo-ui-window-content { color:#222; }