MediaWiki:Common.css

/* CSS placed here will be applied to all skins */ /* Montserrat i choose you */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

font-family: "Montserrat", sans-serif; }
 * 1) content,
 * 2) content h1,
 * 3) content h2,
 * 4) content h3,
 * 5) content h4{

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

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

/**Mainpage Layout**/

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

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

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

/* -- Infobox -- */

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

.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: black; border-bottom: 2px var(--accent-color) solid; background-image: var(--dorm-icon); font-family: serif; width: 85%; text-align:center; color:white; font-weight:bold; font-size:18px; padding:12px 9px; line-height:1.25; }

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: black; border-top: 2px var(--accent-color) solid; border-bottom: 2px var(--accent-color) solid; width: 85%; margin: 0 auto; text-align: center; color:white; 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; }

.article-table th { border:1px solid #b39f73; text-align: center; font-weight: bold; background: black; }

.article-table td { border:1px solid #b39f73; padding:0.2em; background: black; }

/**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 { background-color:var(--secondary-header, initial); 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 { background-color:black; padding:0.3em; border-top: 1px solid var(--border-color, transparent); border-bottom: 1px solid var(--border-color, transparent); }

.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; }

.Savanaclaw th a, .Savanaclaw .secondaryheader a { 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; }

.Diasomnia th a { color:#1C3323; }

.Diasomnia .secondaryheader a { 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; }

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

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

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

.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: #EEEBE6; color: black; text-align: center; font-weight: bold; font-style: italic; padding: 0.4em; border: 3px solid black; border-radius: 0.8em; }

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

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

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

.card th, .card td { background-color: black; border:none; color: white; }

.themedtable { border-radius: 7px; border: 1px solid #333; }

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

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

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

.themedtable td { border:none; }

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

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

.main .inactive { background-color: #1C3323; }

.main .inactive a { color: white; }

.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; }

.storytab { margin-left: auto; margin-right: auto; }

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

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

.storytab .inactive a { color: white; }

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

/**End table styles**/

/* -- Tabbers -- */

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

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

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

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

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

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

.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; }

/**End tabber styles**/

/* -- Misc -- */

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

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

/**tooltip styles**/ .tooltip { display: none; position: fixed; background: black; border: 1px solid white; padding: 0.4em; color: white; z-index: 1; text-align: center; margin: 10px; } .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 button */

.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 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 { background: black; border-color:#b39f73; }

/* tables css */ table { background: black; }

table.wikitable { background: black; border-width: 0.5px; border-color: #b39f73; } table.wikitable > tr > th, table.wikitable > tr > td, table.wikitable > * > tr > th, table.wikitable > * > tr > td { border:none; }

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

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

table.wikitable td { background: black; }

.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: black; }

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

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

pre { background: #262625; border-color: #337700; }

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

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