MediaWiki:Fandomdesktop.css

/* Taken code from https://weeekly.fandom.com/wiki/MediaWiki:Wikia.css */

/*Font*/ .WikiaPage { font-family: 'Montserrat'; border: 0.2px solid #000; color:#000; border:0.2; } .WikiaPageHeader > h1 { font-family: Montserrat; /* This changes the header on every article */ }

.WikiaArticle { font-family: Montserrat; /* This changes the text in the content space only */ }

.wds-community-header{ font-family: 'We can'; }

h1,h2,h3,h4,h5 { font-family: 'We can'; }

body, .category-gallery-item, .snippet, .text, .wikia-button, .wikia-single-button, a, .wikia-menu-button, input, .button, button, select, .tabbernav { font-family:Montserrat !important; }

/* Languages test
 * lang(ko) {

font-family: 'Noto Sans KR', sans-serif; }
 * lang(ja) {

font-family: 'Noto Sans JP', sans-serif; }
 * lang(ko) {

font-family: 'Noto Sans KR', sans-serif; }
 * lang(zh) {

font-family: 'Noto Sans SC', 'Noto Sans HK', sans-serif; }
 * lang(zh-Hans) {

font-family: 'Noto Sans SC', sans-serif; }
 * lang(zh-Hant) {

font-family: 'Noto Sans TC', sans-serif; }

/* Hover (BTS Wiki) */ .hoverimage img { transition: all 0.4s ease; opacity: 1; filter: alpha(opacity=100); } .hoverimage img:hover { opacity: 0.8; filter: alpha(opacity=80); transform:scaleX(0.95) scaleY(0.95); }

/* Credit to fategrandorder.wikia.com */ .spanse, .spancr, .spanmm, .spanen, .spanqunew, .spansk{ float:left; display: block; position: relative; z-index: 99; } .spanse2, .spancr2, .spanmm2, .spanen2, .spanqunew2, .spansk2{ transition-duration: 0.4s; transition-timing-function: ease-out; display: block; position: absolute; z-index: 100; } .spanse2, .spancr2, .spanmm2, .spanen2, .spanqunew2, .spansk2 { opacity: 0; } .spanse2:hover, .spanmm2:hover, .spanen2:hover, .spancr2:hover, .spanqunew2:hover, .spansk2:hover{ opacity: 100; } .spanse2:hover img, .spanmm2:hover img, .spanen2:hover img, .spancr2:hover img, .spanqunew2:hover img, .spansk2:hover img { opacity: .9; }

/* Albums Hover (Credit to BLACKPINK Wiki) */ .book-container, .book-container-comic { -moz-perspective: 1200px; -webkit-perspective: 1200px; -moz-user-select: none; -webkit-user-select: none; user-select: none; -khtml-user-drag: none; -moz-user-drag: none; -ms-user-drag: none; -webkit-user-drag: none; user-drag: none; display: block; margin: 0 auto; perspective: 1200px; width: 250px; }

.book-container { width: 250px; }

.book-container-comic { width: 150px; }

.book, .book-comic { -moz-transform-origin: 125px 0; -moz-transform-style: preserve-3d; -moz-transition: 0.75s; -webkit-transform-origin: 125px 0; -webkit-transform-style: preserve-3d; -webkit-transition: 0.75s; box-shadow: 0 2px 4px rgba(227, 109, 118, 0.25); transform-origin: 125px 0; transform-style: preserve-3d; transition: 0.75s; z-index: 5; }

.book:after, .book-comic:after { bottom: 0; content: ""; left: 3px; position: absolute; top: 0; width: 7px; z-index: 20; }

.book:hover { -moz-transform: translateX(-10px) translateZ(35px) translateX(35px) rotateY(45deg); -webkit-transform: translateX(-10px) translateZ(35px) translateX(35px) rotateY(45deg); transform: translateX(-10px) translateZ(35px) translateX(35px) rotateY(45deg); }

.book-comic:hover { -moz-transform: translateX(-10px) translateZ(5px) translateX(5px) rotateY(45deg); -webkit-transform: translateX(-10px) translateZ(5px) translateX(5px) rotateY(45deg); transform: translateX(-10px) translateZ(5px) translateX(5px) rotateY(45deg); }

.book-cover { position: relative; z-index: 10; }

.book-cover img { height: auto; max-width: 100%; vertical-align: bottom; }

.book-spine { background: url(https://i.imgur.com/Mshm8sZ.png); }

.book-spine-comic1 { background: #8772B3; }

.book-spine-comic2 { background: #FFFFFF; }

.book-spine-comic3 { background: #FBE969; }

.book-spine-comic1, .book-spine-comic2, .book-spine-comic3, .book-spine { -moz-transform-origin: 0; -moz-transform: rotateY(-90deg) translateX(-49px); -webkit-transform-origin: 0; -webkit-transform: rotateY(-90deg) translateX(-49px); background-size: auto 100%; bottom: 0; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); color: #fff; smargin-left: 5px; overflow: hidden; position: absolute; top: 0; transform-origin: 0; z-index: 5; }

.book-spine { transform: rotateY(-90deg) translateX(-30px); width: 30px; }

.book-spine-comic1, .book-spine-comic2, .book-spine-comic3 { transform: rotateY(-90deg) translateX(-20px); width: 20px; }

.book-spine-comic1 h1, .book-spine-comic2 h1, .book-spine-comic3 h1, .book-spine h1 { -moz-transform-origin: 0; -moz-transform: rotateZ(90deg); -webkit-font-smoothing: antialiased; -webkit-transform-origin: 0; -webkit-transform: rotateZ(90deg); color: #fff; display: block; font-size: 2em; font-weight: normal; left: 39px; opacity: 0.75; position: absolute; text-align: left; text-indent: 43px; text-transform: uppercase; top: 0; transform-origin: 0; transform: rotateZ(90deg); width: 250px; }

.book-spine-comic1:before, .book-spine-comic2:before, .book-spine-comic3:before, .book-spine:before { content: ""; display: block; height: 100%; width: 100%; } /*End*/

/* Infoboxes (LOONA Wiki) */ .portable-infobox .pi-image-collection-tabs .pi-tab-link { border: none; border-bottom: 2px solid var(--theme-article-text-color); margin: 2px; padding: 0 5px; color: CurrentColor; font-weight: bold; } ul.pi-image-collection-tabs { margin: 0 -1px -1px 0 !important; } .portable-infobox .pi-image-collection-tabs .pi-tab-link.current { color: CurrentColor; border-bottom: 2px solid var(--theme-accent-color); }

.pi-data-label, .pi-title, .pi-header { font-family: 'Roboto', sans-serif; }

.portable-infobox .pi-header { font-size: small; }

.portable-infobox .pi-title { border-radius: 3px 3px 0 0; }

.portable-infobox .pi-item-spacing { border-color: transparent; }

.pi-image-collection-tabs li.tabberactive { background-color: #EDEDED; }

.pi-border-color { border-color: var(--activity-light-background-color); }

.pi-image-collection-tabs li, .portable-infobox .pi-data, .portable-infobox .pi-horizontal-group, .pi-smart-group-body { background-color: var(--activity-light-background-color); }

.pi-smart-group-body a.external:after { display: none; }

.portable-infobox.pi-background, .portable-infobox.pi-header { background-color: transparent; }

.pi-title, .pi-header, .pi-horizontal-group .pi-header { color: #fff; font-weight: bold; text-align: center; background-color: var(--theme-accent-color); }

.portable-infobox .pi-image img { max-width: 100%; height: auto; background-color: var(--activity-light-background-color); } .pi-data, .pi-group { border-bottom-width: 0; } .pi-horizontal-group { border-radius: 0 0 3px 3px; }

/* Rounded Avatars */ .avatar { border-radius: 100%; border-width: 2px; }

/* Custom Tags */ .tag { color: inherit; }

/* Custom Tabber (LOONA Wiki) */ ul.tabbernav {font-family: Roboto, sans-serif !important; font-weight:bold !important; padding:5px 0px !important; border: none !important; }

ul.tabbernav li a {padding:5px 5px !important; margin-left:0px !important; border:0 !important; background: transparent !important; transition-duration: 0.2s !important; transition-timing-function: ease-out !important;}

ul.tabbernav li a:link {color:CurrentColor  !important; border-bottom: 2px solid var(--theme-article-text-color)  !important; margin-right: 2px !important;}

ul.tabbernav li a:visited {color:CurrentColor !important; border-bottom: 2px solid var(--theme-article-text-color)  !important; margin-right: 2px !important;}

ul.tabbernav li a:hover {color:CurrentColor !important; border-bottom: 2px solid var(--theme-article-text-color) !important; background-color: transparent !important;  margin-right: 2px !important; transition-duration: 0.2s !important; transition-timing-function: ease-out !important;}

ul.tabbernav li.tabberactive a {color:CurrentColor !important; border-bottom: 2px solid var(--theme-accent-color) !important; background-color: transparent !important;  margin-right: 2px !important;}

ul.tabbernav li.tabberactive a:hover {border-bottom: 2px solid var(--theme-accent-color) !important;  margin-right: 2px !important;}

.tabberlive .tabbertab {border:0px solid transparent !important; border-top:0 !important;}

/* Custom Dropdown Menu (LOONA Wiki) */ .WikiaArticle { overflow: visible; } .custom-dropdown { background: transparent !important; color: CurrentColor !important; font-weight:bold; padding: 1px 8px; } .custom-dropdown:hover ul { display: block; } .custom-dropdown li a, .custom-dropdown li strong.selflink { height: 14px; line-height: 14px; font-size:10px !important; } .wikia-menu-button ul strong.selflink { display: block; padding: 9px 9px 7px; } .wikia-menu-button ul strong.selflink:hover { text-decoration: underline var(--activity-dark-background-color); background: var(--activity-dark-morelink-color); cursor: default; } .custom-dropdown:not(:first-of-type) > :first-child:before { content: "•"; position: relative; left: -9px; } .custom-dropdown > :first-child:after { background-image: url(data:image/gif;base64,R0lGODlhAQABAIABAAAAAP///yH5BAEAAAEALAAAAAABAAEAQAICTAEAOw%3D%3D); border-color: #fff9 transparent transparent; width: 0px; }

/* Background (FandomDesktop) --> Credits to TWICE Wiki Note: Do not use the Header background cause it will be overlaped by the background There's eight element on this code: Gradient background & Font, Border and box shadow, To make the background visible, Background, Remove the Header background (something like that), Make the right rail background transparent, Table of Contents Background Color, Article Table Background */ /* == Gradient background & Font == */ /* === Light Theme (Default) === */ @media screen and (min-width: 1025px) { body.theme-fandomdesktop-light { background: linear-gradient(#EBD0D999, #FFFFFF99, #EBD0D999) fixed; font-family:'Montserrat', 'Gothic A1', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans HK', 'Noto Sans JP', 'Noto Sans KR', sans-serif; } }

/* === Dark Theme === */ @media screen and (min-width: 1025px) { body.theme-fandomdesktop-dark { background: linear-gradient(#977FFF99,#F43EEF99) fixed; font-family:'Montserrat', 'Gothic A1', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans HK', 'Noto Sans JP', 'Noto Sans KR', sans-serif; } }

/* == Border and box shadow == */ .resizable-container .page { background: #fff4; position: relative; -moz-box-shadow:0 0 30px var(--theme-accent-color); -webkit-box-shadow:0 0 30px var(--theme-accent-color); border: 2px solid var(--theme-link-color); box-shadow:0 0 30px var(--theme-accent-color); border-top: 2px solid var(--theme-link-color); }

/* == To make the background visible == */ .page__main { background-color: transparent; border-radius: 3px; min-height: 480px; padding: 24px 36px; position: relative; }

/* == Background == */ /* === Light Theme (Default) */ .theme-fandomdesktop-light .resizable-container .page::before { opacity: 0.2; background: transparent url("https://static.wikia.nocookie.net/yuqiroshii/images/d/dc/Pink_background.png/revision/latest?cb=20210408095516&format=original") center top fixed; background-size: 1300px; content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;z-index: -1; }

/* === Dark Theme === */ .theme-fandomdesktop-dark .resizable-container .page::before { opacity: 0.2; background: transparent url("https://static.wikia.nocookie.net/the-bangtan-boys/images/3/3a/Background_planet_animation_by_plupluru.gif/revision/latest?cb=20210621073124&format=original") center top fixed; background-size: 1300px; content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; }

/* == Remove the Header background (something like that) == */ .fandom-community-header__background { background: var(--theme-body-background-image) no-repeat; height: 160px; position: fixed; top: 0; width: 100%; z-index: -2; opacity: 0; }

/* == Make the right rail background transparent == */ .page__right-rail { background-color: transparent; }

/* == Table of Contents Background Color == */ .page-content #toc { background: var(--theme-page-background-color); }

/* == Article Table Background == */ .article-table .wikitable { background: var(--theme-page-background-color); }

/* == Transparent Rail Module Background == */ .rail-module { background-color: transparent; border-bottom: transparent; }

/* Slider Button (Anonminati from Dev Wiki) */ .wikiaPhotoGallery-slider-body .wikia-button.secondary { background-color: transparent !important; border-radius: 2px !important; border-color: var(--theme-accent-color); color: var(--theme-accent-color); font-size: 15px; font-weight: normal !important; text-transform: none; font-family: Roboto, sans-serif; } .wikiaPhotoGallery-slider-body a:not(.wds-button).wikia-button.secondary:hover { border-color: var(--theme-article-text-color) !important; transition-duration: 0.4s !important; transition-timing-function: ease-out !important; }

/* TOC (JustLeafy's Wiki) */

border-left: 2px solid var(--theme-accent-color) !important; border: none; padding: 1em; background-color: var(--activity-light-background-color); border-radius: 0 3px 3px 0; }
 * 1) toc {

.WikiaArticle #toctitle h2 { font-size: 16px; font-weight: bold; }

.WikiaArticle h2 { font-weight: bold; }

.WikiaArticle h5 { font-size: 15px; }

background-image: url("https://images.wikia.nocookie.net/dev/images/8/89/Ui-icons_666666_256x240.png") !important; }
 * 1) toc-open {

/* Rails (LOONA Wiki) */ .WikiaRail .rail-module,.WikiaRail .module { border-radius: 5px; }

.activityfeed > li { border-radius: 0 3px 3px 0; }

/* Categories (LOONA Wiki) */ .article-categories { border-width: 0; border-top-width: 1px; border-bottom-width: 1px; }

/* Galleries */ .wikia-gallery-border-small .thumb .gallery-image-wrapper, .wikia-gallery-border-medium .thumb .gallery-image-wrapper { border-color: var(--theme-link-color); }

/* Tabview */ border-radius: 0 0 0 2px; }
 * 1) mw-content-text .tabs li.selected a:first-child {

padding: 0; }
 * 1) mw-content-text .tabs {

.tabBody.selected { background: var(--activity-light-background-color) !important; border-radius: 2px 2px 3px 3px !important; padding: 1em !important; }

font-size: 10px; padding: 11px 9px; }
 * 1) mw-content-text .tabs li:not(.selected) a,
 * 2) mw-content-text .tabs li.selected a {

/* Navbox */ .themed-bg { background:var(--theme-accent-color); }

/* Scrollbar */ /* non-standard version */
 * -webkit-scrollbar {

width: 1rem; height: 1rem; background-color: var(--theme-link-color--active); }
 * -webkit-scrollbar-thumb {

background: var(--theme-accent-color); }


 * -webkit-scrollbar-thumb:hover {

background: var(--theme-accent-color--hover); }


 * -webkit-scrollbar-thumb:active {

background: var(--theme-link-color--hover); }

/* standard version */ html { scrollbar-color: var(--theme-accent-color) var(--theme-link-color--active); scrollbar-width: thin; }

/* Selection */
 * selection {

background: var(--theme-link-color); color: #FFF; text-shadow: none; }

/* New releases in header - Credits to ITZY Wiki */ .wds-community-header__local-navigation [href="/wiki/Category:Discography"] span::after, .wds-community-header__local-navigation [href="/wiki/Category:Mini_album"] span::after, .wds-community-header__local-navigation [href="/wiki/Category:Title_track"] span::after, .wds-community-header__local-navigation [href="/wiki/We_play"]::after, .wds-community-header__local-navigation [href="/wiki/After_School"]::after{ content: 'new'; position: relative; background-color: var(--theme-accent-color); vertical-align: top; padding: 0 3px; font-size: 80%; font-weight: bold; border-radius: 3px; text-transform: lowercase; color: var(--theme-accent-label-color); margin-left: 5px; }

/* Wordmark (Credits to Jiaer) */ .wds-community-header__wordmark img { opacity: 1; filter: alpha(opacity=100); transition: all 1.5s ease; } .wds-community-header__wordmark img:hover { opacity: 0.5; filter: alpha(opacity=50); -webkit-transform: rotateY(360deg); -moz-transform: rotateY(360deg); -o-transform: rotateY(360deg); -ms-transform: rotateY(360deg); transform: rotateY(360deg); } /*End*/

/* Toolbar (Credit to DubuHasBeenSnatched *-*) */ .WikiaBarWrapper { background-image:linear-gradient(to right, #E99FC2,#0099FF,#0099FF,#E99FC2); box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); font-family: Roboto; text-transform: uppercase; font-weight:bold; }

.WikiaBarWrapper .toolbar .tools { display: flex; flex-wrap: wrap; justify-content: center; padding-left: 0; }

/*End*/

/* Tabs (Credit to UtauSteam) */ .tab > div:hover { border-bottom: 0 !important; margin-top: 3px; background-color: #f08ab9 !important; } .tab > .selftab:hover { background-color: #00a070 !important; } /*End*/

/* Image Overlay (Credit to (G)I-DLE Wiki) */ .image-overlay { position: relative; overflow: hidden; } .image-overlay > .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: 0.5s; background: #00000080; color: #fff; } .image-overlay:hover > .overlay { opacity: 1; } .image-overlay > .overlay > .overlay-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 180%; font-family: Playfair Display; padding-left: 3px; padding-right: 3px; text-align: center; width: 100%; } .image-overlay p { margin: .0em 0 .0em !important; } .image-overlay a:hover { opacity: 0.6; -webkit-transition: all .4s linear 0s; -moz-transition: all .4s linear 0s; -ms-transition: all .4s linear 0s; -o-transition: all .4s linear 0s; transition: all .4s linear 0s; text-decoration: none; } .image-overlay a { color: #eaeaea; -webkit-transition: all .3s linear 0s; -moz-transition: all .3s linear 0s; -ms-transition: all .3s linear 0s; -o-transition: all .3s linear 0s; transition: all .3s linear 0s; } .image-overlay.overlay-zoom:hover img { -moz-transform:scale(1.05); -webkit-transform:scale(1.05); -o-transform:scale(1.05); -ms-transform:scale(1.05); transform:scale(1.05); -webkit-backface-visibility:hidden; backface-visibility:hidden; filter:alpha(opacity=100); opacity:1; -webkit-transition:all 3s ease-in-out; -moz-transition:all 3s ease-in-out; -ms-transition:all 3s ease-in-out; -o-transition:all 3s ease-in-out; transition:all 3s ease-in-out; } .image-overlay.overlay-zoom img { -webkit-transition:all 3s ease-in-out; -moz-transition:all 3s ease-in-out; -ms-transition:all 3s ease-in-out; -o-transition:all 3s ease-in-out; transition:all 3s ease-in-out; }