MediaWiki:Common.css

@import url("/load.php?mode=articles&only=styles&articles=u:dev:MediaWiki:ThemeColorClasses.css|u:dev:MediaWiki:FontAwesome.css"); @import url("/load.php?mode=articles&articles=MediaWiki:InfoboxBG.css&only=styles");

/*Custom fonts*/ @font-face { font-family: 'Cookie Run Regular'; src: url('/wiki/Special:FilePath/CookieRun_Regular.woff2') format('woff2'); font-style: normal; font-weight: normal; }

@font-face { font-family: 'Cookie Run Bold'; src: url('/wiki/Special:FilePath/CookieRun_Bold.woff2') format('woff2'); font-style: normal; font-weight: bold; }

@font-face { font-family: 'Cookie Run Black'; src: url('/wiki/Special:FilePath/CookieRun_Black.woff2') format('woff2'); font-style: normal; font-weight: bold; }

.fandom-community-header__community-name, h1, .page-content h1, h2, .page-content h2, .page-content .portable-infobox .pi-data-label, .page-content h3, .page-content h4, .page-content h5, header, .header, .portable-infobox h2.pi-title, .portable-infobox h2.pi-header, .portable-infobox .wds-tabs__tab, .recent-wiki-activity__page-title, .fandom-sticky-header__sitename, .fandom-community-header__local-navigation, th { font-family: Cookie Run Regular, rubik, helvetica, arial, sans-serif; }

/* Assigning theme colors */


 * root .theme-fandomdesktop-light {

/*--theme*/ }


 * root .theme-fandomdesktop-dark {

/*--theme*/ }

/* Infobox styling */

.theme-fandomdesktop-light .portable-infobox { border: 1px solid #29100B; outline: 3px solid #5E4C35; margin-right: 3px; border-radius: 1px; background-color: #E8E0BE; }

.theme-fandomdesktop-dark .portable-infobox { border: 1px solid #220B3E; outline: 3px solid #3D2A68; margin-right: 3px; border-radius: 1px; background-color: #1C1628; }

.pi-horizontal-group-item.pi-data-value { padding: 4px 9px 9px; }

.theme-fandomdesktop-light .portable-infobox .wds-tabs__tab { color: #eee4db; background-color: #DDCFA8; text-shadow: 1px 1px 0 #816744,-1px 1px 0 #816744,1px -1px 0 #816744,-1px -1px 0 #816744,0px 1px 0 #816744,0px -1px 0 #816744,-1px 0px 0 #816744,1px 0px 0 #816744,1px 1px 0 #816744,-1px 1px 0 #816744,1px -1px 0 #816744,-1px -1px 0 #816744,0px 1px 0 #816744,0px -1px 0 #816744,-1px 0px 0 #816744,1px 0px 0 #816744,1px 1px 0 #816744,-1px 1px 0 #816744,1px -1px 0 #816744,-1px -1px 0 #816744,1px 1px 0 #816744,-1px 1px 0 #816744,1px -1px 0 #816744,-1px -1px 0 #816744; border-right: 1px solid #A08B68; }

.theme-fandomdesktop-dark .portable-infobox .wds-tabs__tab { color: #AA9FC6; background-color: #33284A; text-shadow: 1px 1px 0 black,-1px 1px 0 black,1px -1px 0 black,-1px -1px 0 black,0px 1px 0 black,0px -1px 0 black,-1px 0px 0 black,1px 0px 0 black,1px 1px 0 black,-1px 1px 0 black,1px -1px 0 black,-1px -1px 0 black,0px 1px 0 black,0px -1px 0 black,-1px 0px 0 black,1px 0px 0 black,1px 1px 0 black,-1px 1px 0 black,1px -1px 0 black,-1px -1px 0 black,1px 1px 0 black,-1px 1px 0 black,1px -1px 0 black,-1px -1px 0 black; border-right: 1px solid #4A3A6E; }

.theme-fandomdesktop-light .portable-infobox .wds-tabs__tab.wds-is-current { color: white; background-color: #C5B380; text-shadow:1px 1px 0 #281d10,-1px 1px 0 #281d10,1px -1px 0 #281d10,-1px -1px 0 #281d10,0px 1px 0 #281d10,0px -1px 0 #281d10,-1px 0px 0 #281d10,1px 0px 0 #281d10,1px 1px 0 #281d10,-1px 1px 0 #281d10,1px -1px 0 #281d10,-1px -1px 0 #281d10,0px 1px 0 #281d10,0px -1px 0 #281d10,-1px 0px 0 #281d10,1px 0px 0 #281d10,1px 1px 0 #281d10,-1px 1px 0 #281d10,1px -1px 0 #281d10,-1px -1px 0 #281d10,1px 1px 0 #281d10,-1px 1px 0 #281d10,1px -1px 0 #281d10,-1px -1px 0 #281d10; }

.theme-fandomdesktop-dark .portable-infobox .wds-tabs__tab.wds-is-current { color: #CBB5FF; background-color: #4C3B72; text-shadow:1px 1px 0 #1A1415,-1px 1px 0 #1A1415,1px -1px 0 #1A1415,-1px -1px 0 #1A1415,0px 1px 0 #1A1415,0px -1px 0 #1A1415,-1px 0px 0 #1A1415,1px 0px 0 #1A1415,1px 1px 0 #1A1415,-1px 1px 0 #1A1415,1px -1px 0 #1A1415,-1px -1px 0 #1A1415,0px 1px 0 #1A1415,0px -1px 0 #1A1415,-1px 0px 0 #1A1415,1px 0px 0 #1A1415,1px 1px 0 #1A1415,-1px 1px 0 #1A1415,1px -1px 0 #1A1415,-1px -1px 0 #1A1415,1px 1px 0 #1A1415,-1px 1px 0 #1A1415,1px -1px 0 #1A1415,-1px -1px 0 #1A1415; }

.theme-fandomdesktop-light .pi-image { border-bottom:1px solid #5E4C35; }

.theme-fandomdesktop-dark .pi-image { border-bottom:1px solid #6F6091; }

.theme-fandomdesktop-light .portable-infobox .wds-tabs { border-bottom:1px solid #5E4C35; background-color:#E8E0BE; }

.theme-fandomdesktop-dark .portable-infobox .wds-tabs { border-bottom:1px solid #6F6091; background-color:#1F1730; }

.pi-header { text-shadow:1px 1px 0 #29100B,-1px 1px 0 #29100B,1px -1px 0 #29100B,-1px -1px 0 #29100B,0px 1px 0 #29100B,0px -1px 0 #29100B,-1px 0px 0 #29100B,1px 0px 0 #29100B,1px 1px 0 #29100B,-1px 1px 0 #29100B,1px -1px 0 #29100B,-1px -1px 0 #29100B,0px 1px 0 #29100B,0px -1px 0 #29100B,-1px 0px 0 #29100B,1px 0px 0 #29100B,1px 1px 0 #29100B,-1px 1px 0 #29100B,1px -1px 0 #29100B,-1px -1px 0 #29100B,1px 1px 0 #29100B,-1px 1px 0 #29100B,1px -1px 0 #29100B,-1px -1px 0 #29100B; }

.portable-infobox .pi-data-label { font-size: 12px; line-height: 1.5; color: white; text-shadow: 1px 1px 0 #281d10,-1px 1px 0 #281d10,1px -1px 0 #281d10,-1px -1px 0 #281d10,0px 1px 0 #281d10,0px -1px 0 #281d10,-1px 0px 0 #281d10,1px 0px 0 #281d10,1px 1px 0 #281d10,-1px 1px 0 #281d10,1px -1px 0 #281d10,-1px -1px 0 #281d10,0px 1px 0 #281d10,0px -1px 0 #281d10,-1px 0px 0 #281d10,1px 0px 0 #281d10,1px 1px 0 #281d10,-1px 1px 0 #281d10,1px -1px 0 #281d10,-1px -1px 0 #281d10,1px 1px 0 #281d10,-1px 1px 0 #281d10,1px -1px 0 #281d10,-1px -1px 0 #281d10; padding-right: 1px; padding-left: 1px; }

.theme-fandomdesktop-light .portable-infobox .pi-data-label a { text-decoration: 1px underline #a88b72; color: white; }

.theme-fandomdesktop-dark .portable-infobox .pi-data-label a { text-decoration: 1px underline #CC9C81; color: white; }

/* End infobox styling */

.crobIcon { font-size: 14px; font-weight: 600; white-space: nowrap; position:absolute; left:2px; bottom:-5px; color:#FFF7E7; text-shadow: -1px -1px 1px #1E0900, 1px -1px 1px #1E0900, -1px 1px 1px #1E0900, 1px 1px 1px #1E0900; } .crobIcon a, .crobIcon a:link, .crobIcon a:hover, .crobIcon a:focus, .crobIcon a:active, .crobIcon a:visited { font-size: 14px; font-weight: 600; color: #FFF7E7; }

/* Message box styling */ .mbox a:link { color:#7B5536; } .mbox a:visited { color:#7B5536; } .mbox a:hover { color:#B87957; text-decoration:underline; } .mbox a:active { color:#B87957; text-decoration:underline; }

.mbox__content__text { font-size:14px; line-height:1.90; }

/* For header images */ .fluidimg100 img { max-width:100%; height:auto; overflow:hidden; margin:auto; }

.iconcontainerimg img { position: absolute; top: 54%; left: 50%; transform: translate(-50%, -50%); height: 123px; width: auto; image-rendering: optimizequality; }

/* User masthead */ .UserProfileMasthead .masthead-info { background: #ffffff url ('https://vignette.wikia.nocookie.net/cookierun/images/7/7d/Brave_Cookie_CSS.png') no-repeat bottom right; overflow:hidden; }

/* === Template:Ambox designs === */ /* Ambox design */ .ambox { font-size: 95%; width: 80%; margin: 0 auto; border: 1px #AAA solid; border-left: 10px solid #228b22; border-collapse: collapse; background-color: #EEE; } /* Ambox colours */ .ambox-blue { border-left: 10px solid #1e90ff;   /* Blue (notice) */ } .ambox-red { border-left: 10px solid #b22222;   /* Red (delete/serious) */ } .ambox-orange { border-left: 10px solid #f28500;   /* Orange (content) */ } .ambox-yellow { border-left: 10px solid #f4c430;   /* Yellow (style) */ } .ambox-purple { border-left: 10px solid #9932cc;   /* Purple (merge) */ } .ambox-gray { border-left: 10px solid #bba;       /* Gray (protection) */ } .ambox-green { border-left: 10px solid #228b22;   /* Green */ } /* Ambox small text */ .ambox-smalltext { font-size: smaller; margin-top:0.5em; margin-left:0.8em; } /* Ambox image */ .ambox-image {                   /* The left image cell */ width: 60px; padding: 2px 0px 2px 0.5em;       /* 0.5em left, 0px right */ text-align: center; } @media print { .ambox { display: none; } }   /* no ambox when printing */

/* Navbox styling */ table.navbox { border: 4px solid #412F27; border-radius: 7px; clear: both; color: white; font-size: 90%; margin: 5px auto auto; text-align: left; width: 100%; } table.navbox + table.navbox { margin-top: -1px; } .navbox, .navbox-subgroup { background: #dcccbc; } .navbox-title { background:#73664c; border: 1px solid #29100B; font-size: 125%; padding-top:1em; padding-bottom:1em; padding-left: 1em; padding-right: 1em; text-align: center; color: #29100B; }

.navbox-title a { color: white; }

.navbox-list a { color: #553E9F; } .navbox-group { background: #947B62; border: 1px solid #29100B; font-weight: bold; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; color: #ffffff; } .navbox .navbox-group a { white-space: normal; } .navbox-list { border: 1px solid #29100B; padding-bottom: 5px; padding-left: 7px; padding-right: 7px; background: #dfd1c3; color: #29100B; } .navbox-subgroup .navbox-title { background: #b19984; } .navbox-subgroup .navbox-group { background: #b19984; border: 1px solid #29100B; padding-bottom: 5px; } .navbox-subgroup .navbox-group a { white-space: normal; } .navbox-subgroup .navbox-list { background: #dfd1c3; border: 1px solid #29100B; } @media print { .navbox { display: none; } }

/* Rounded Userpage avatar */ .UserProfileMasthead .masthead-avatar { border: none; background: none; padding: 0; } .UserProfileMasthead .masthead-avatar .avatar { -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; border: none; }

/*All of this changes the scrollbar color*/


 * -webkit-scrollbar-track {

background: var(--theme-page-text-mix-color-95); }


 * -webkit-scrollbar-thumb {

background: #887869; }


 * -webkit-scrollbar-thumb:hover {

background: #6b5a51; }


 * -webkit-scrollbar {

width: 16px; }


 * root {

scrollbar-color: #887869 var(--theme-page-text-mix-color-95); }

/*removes name highlights on account nav and userpage tabs*/ .WikiaActivityModule.module, .HotSpotsModule.module, .FollowedPagesModule.module { background: url(https://vignette.wikia.nocookie.net/cookierun/images/7/7d/Brave_Cookie_CSS.png/revision/latest?cb=20150813191422) no-repeat right bottom; }

/* Adds an outline to infobox titles and headers */ .pi-title { text-shadow:1px 1px 0 #29100B,-1px 1px 0 #29100B,1px -1px 0 #29100B,-1px -1px 0 #29100B,0px 1px 0 #29100B,0px -1px 0 #29100B,-1px 0px 0 #29100B,1px 0px 0 #29100B,1px 1px 0 #29100B,-1px 1px 0 #29100B,1px -1px 0 #29100B,-1px -1px 0 #29100B,0px 1px 0 #29100B,0px -1px 0 #29100B,-1px 0px 0 #29100B,1px 0px 0 #29100B,1px 1px 0 #29100B,-1px 1px 0 #29100B,1px -1px 0 #29100B,-1px -1px 0 #29100B,1px 1px 0 #29100B,-1px 1px 0 #29100B,1px -1px 0 #29100B,-1px -1px 0 #29100B; }

.pi-header { text-shadow:1px 1px 0 #29100B,-1px 1px 0 #29100B,1px -1px 0 #29100B,-1px -1px 0 #29100B,0px 1px 0 #29100B,0px -1px 0 #29100B,-1px 0px 0 #29100B,1px 0px 0 #29100B,1px 1px 0 #29100B,-1px 1px 0 #29100B,1px -1px 0 #29100B,-1px -1px 0 #29100B,0px 1px 0 #29100B,0px -1px 0 #29100B,-1px 0px 0 #29100B,1px 0px 0 #29100B,1px 1px 0 #29100B,-1px 1px 0 #29100B,1px -1px 0 #29100B,-1px -1px 0 #29100B,1px 1px 0 #29100B,-1px 1px 0 #29100B,1px -1px 0 #29100B,-1px -1px 0 #29100B; }

/* For header images */ .fluidimg100 img { max-width:100%; height:auto; overflow:hidden; margin:auto; }

/* For relay icon */ .relayicon img { max-width:100%; height:auto; overflow:hidden; } .relayicon div { max-width:100%; height:auto; overflow:hidden; }

/*Slider "read more" link color correction */ .fandom-slider__nav__caption a:link { color:#dcac79; } .fandom-slider__nav__caption a:visited { color:#dcac79; } .fandom-slider__nav__caption a:hover { color:#f1dec9; text-decoration:underline; } .fandom-slider__nav__caption a:active { color:#f1dec9; text-decoration:underline; }

/* Class that forces links to be light mode-styled */

.lightlink a:link { color:#805236; }

.lightlink a:visited { color:#805236; }

.lightlink a:hover { color:#382417; text-decoration:underline; }

.lightlink a:active { color:#382417; text-decoration:underline; }

/* Tabber settings */ .tabbertab { border: none !important; border-top: none !important; }

ul.tabbernav { border-bottom: none !important; }

ul.tabbernav li a { background: #f9ecc3; }

ul.tabbernav li a:hover { background: #ccb47e; }

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

ul.pi-image-collection-tabs li { border: none; max-width: 100%; }

/* Multiple columns for a bulleted lists */ .twoColumns { -moz-column-count:2; -webkit-column-count:2; column-count:2; }

.threeColumns { -moz-column-count:3; -webkit-column-count:3; column-count:3; }

/* Trying to align the featured icon to the page title */ .page-header__contribution #header-icons { display: inline-block; vertical-align: top; }

/* Testing out collapsing comments in pages */ .page-Roguefort_Cookie #WikiaArticleComments { display: none; } /* Mark redirects in Special:Allpages and Special:Watchlist */ .allpagesredirect { font-style: italic; } .allpagesredirect:after { color: #808080; content: " (redirect)" } .watchlistredir { font-style: italic; }

/* For [show]/[hide] link of javascript collapsible tables */ .collapseButton {        /* 'show'/'hide' buttons created dynamically by the        */ float: right;        /* CollapsibleTables javascript in MediaWiki:Common.js */ font-weight: normal; /* are styled here so they can be customised. */   text-align: right; width: auto; } /* Standard Navigationsleisten, aka box hiding thingy from .de. Documentation at NavFrame. */ div.NavFrame { margin: 0; padding: 4px; border: 1px solid #aaa; text-align: center; border-collapse: collapse; font-size: 95%; } div.NavFrame + div.NavFrame { border-top-style: none; border-top-style: hidden; } div.NavPic { background-color: #fff; margin: 0; padding: 2px; /* @noflip */ float: left; } div.NavFrame div.NavHead { line-height: 1.6em; font-weight: bold; background-color: #ccf; position: relative; } div.NavFrame p, div.NavFrame div.NavContent, div.NavFrame div.NavContent p { font-size: 100%; } div.NavEnd { margin: 0; padding: 0; line-height: 1px; clear: both; } a.NavToggle { position: absolute; top: 0; /* @noflip */ right: 3px; font-weight: normal; font-size: 90%; }

div#header-icons > div { float:right; margin-left:12px; } /* i like ginseng cookie a lot - ranran 2022 */

background: transparent; height: auto; overflow: hidden; position: relative; text-align: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; width: 100%; }	position: relative; -webkit-transition: 1s; -moz-transition: 1s; -o-transition: 1s; transition: 1s; -webkit-transition-timing-function: cubic-bezier(.67,.01,.23,1); -moz-transition-timing-function: cubic-bezier(.67,.01,.23,1); -o-transition-timing-function: cubic-bezier(.67,.01,.23,1); transition-timing-function: cubic-bezier(.67,.01,.23,1); }	margin: 0; padding: 0; }	margin: 0; }
 * 1) SliderView {
 * 1) SliderWrapper {
 * 1) SliderWrapper, #SliderWrapper ul, #SliderWrapper li, #NavBtns, #NavBtns ul {
 * 1) NavBtns li {

.Sld { float: left; height: auto; list-style: none; }

.SlideIMG { width: 100%; }

.SlideIMG img { display: block; height: auto; max-width: 100%; min-height: 100%; min-width: 100%; position: relative; }

display: block; position: absolute; } .NavBtn { background: transparent; display: block; height: auto; list-style: none; position: relative; margin: 0; top: 0; width: auto; }
 * 1) NavBtns {

.nmLeft { background: linear-gradient(to right, rgba(61,61,61,0.8), rgba(61,61,61,0.8), transparent); height: 100%; left: 0; } .nmLeft li { list-style: none; padding: 10px 100px 10px 10px; } .nmLeft li:hover { background: linear-gradient(to right, rgba(81,81,81,0.8), rgba(81,81,81,0.8), transparent); cursor: pointer; }

.nmRight { background: linear-gradient(to left, rgba(61,61,61,0.8), rgba(61,61,61,0.8), transparent); height: 100%; right: 0; text-align: left; } .nmRight li { list-style: none; padding: 10px 10px 10px 100px; } .nmRight li:hover { background: linear-gradient(to left, rgba(81,81,81,0.8), rgba(81,81,81,0.8), transparent); cursor: pointer; }

.nmTop { background: linear-gradient(to bottom, rgba(61,61,61,0.8), rgba(61,61,61,0.8), transparent); text-align: left; top: 0; width: 100%; }

.nmTop li { display: inline-block; list-style: none; padding: 10px 10px 20px 10px; }

.nmTop li:hover { background: linear-gradient(to bottom, rgba(81,81,81,0.8), rgba(81,81,81,0.8), transparent); cursor: pointer; }

.nmBottom { background: linear-gradient(to top, rgba(61,61,61,0.8), rgba(61,61,61,0.8), transparent); bottom: 0; text-align: left; width: 100%; } .nmBottom li { display: inline-block; list-style: none; padding: 20px 10px 10px 10px; } .nmBottom li:hover { background: linear-gradient(to top, rgba(81,81,81,0.8), rgba(81,81,81,0.8), transparent); cursor: pointer; }

.nbActiveLeft { background: linear-gradient(to right, rgba(111,111,111,0.8), rgba(111,111,111,0.8), transparent); } .nbActiveRight { background: linear-gradient(to left, rgba(111,111,111,0.8), rgba(111,111,111,0.8), transparent); } .nbActiveTop { background: linear-gradient(to bottom, rgba(111,111,111,0.8), rgba(111,111,111,0.8), transparent); } .nbActiveBottom { background: linear-gradient(to top, rgba(111,111,111,0.8), rgba(111,111,111,0.8), transparent); }