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');

/**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: #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:Sugarbeans"]:hover::after,
 * 4) content a[href$="User:FlowersGems%26Months"]:hover::after,
 * 5) 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:Sugarbeans"]: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; grid-template-columns:6fr 4fr; }

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

/* -- Infobox -- */

.portable-infobox.pi-theme-twisted { --infobox-background: #f8f3eb; 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:#f8f3eb; border:1px solid #b39f73; padding:0.1em 0.25em; }

.theme-dark .article-table td, .theme-dark .article-table th { background: 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 { 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 { 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; }

.Savanaclaw th a, .Savanaclaw .secondaryheader a,   color:#74811C; } .Octavinelle { --primary-header: #8A80BB; --secondary-header: #493470; --border-color: #a59dc1; }
 * 1) content .Savanaclaw th a.external,
 * 2) content .Savanaclaw .secondaryheader a.external {

.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:#3e7805; }
 * 1) content .Diasomnia th a.external {

.Diasomnia .secondaryheader a,   color: #B8C93D; }
 * 1) content .Diasomnia .secondaryheader a.external {

.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: #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 { 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 #333; margin-top:5px; margin-bottom:5px; }

.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; border-top-left-radius:5px; border-top-right-radius:5px; }

.theme-dark .themedtable th { color:white; }

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

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

.themedtable td { border:none; }

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

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

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

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

.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 { border: 1px solid #b39f73; line-height:1.2em; padding-left: 1.0em; padding-right: 1.0em; font-weight: bold; }

.theme-dark .storytab .inactive, .theme-dark .storytab .active, .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; }

/**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; border: 1px solid black; padding: 0.4em; z-index: 1; text-align: center; margin: 10px; background:#f8f3eb; }

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

/* 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%); }

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

fieldset { border-color:#b39f73; }