MediaWiki:Fandomdesktop.css

/* Google Fonts */ @import url('https://fonts.googleapis.com/css?family=Roboto'); @import url('https://fonts.googleapis.com/css?family=Montserrat'); @import url('https://fonts.googleapis.com/css?family=Rubik'); body { font-family: 'Roboto'; } /* =====   BACKGROUND ===== */ /* === Light Theme (Default) === */ @media screen and (min-width: 1025px) { body.theme-fandomdesktop-light { background: linear-gradient(#e1dfdd,#fafafa) fixed; font-family:'Roboto'; } }

/* === Dark Theme === */ @media screen and (min-width: 1025px) { body.theme-fandomdesktop-dark { background: linear-gradient(#1e1f1f,#4b4b4b) fixed; font-family:'Roboto'; } }

/* == Border and box shadow == */ .head1 { padding-top: 5px !important; }

h1.head2 { padding: 5px 0px 0px 0px; } .page { border: 2px solid var(theme-link-color) !important; border-radius: 2px; }

html:not(.ve-activated) .page.has-right-rail .page__main, .page__right-rail { border-radius: unset; } .resizable-container .page { border-top: 2px solid transparent; box-shadow:0 0 20px var(--themed-link-color); }

/* == To make the background visible == */ .page__main { background-color: transparent; border-radius: 3px; min-height: 480px; padding: 24px 36px; position: relative; } /* === Light Theme (Default) */ .theme-fandomdesktop-light .resizable-container .page::before { opacity: 0.2; background: transparent url("https://to1.fandom.com/wiki/Special:FilePath/TO1_RE-ALIZE_2.png") center fixed; background-size: 1200px; 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://to1.fandom.com/wiki/Special:FilePath/TO1_RE_ALIZE_1.png") top center fixed; background-size: 1200px; content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; }

/* == Remove the Header background == */ .fandom-community-header__background { background: none !important; 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: 2px solid transparent; } /* Infobox*/ .pi-europa.pi-background { background-color: #FFFFFF88; }

.pi-europa.pi-image-collection { background-color: #FFFFFF88; }

.pi-europa .pi-image-collection-tabs .pi-tab-link { border: none; border-bottom: 2px solid var(--themed-link-color); margin: 2px; padding: 0 5px; font-weight: light; background:var(--themed-button-background--hover); }

.pi-europa .pi-image-collection-tabs .pi-tab-link.current { color: #fff; border-bottom: 2px solid var(--themed-button-background--hover); background:var(--themed-button-background); }

.pi-europa .pi-image-collection-tabs .pi-tab-link:not(.current):hover { border-bottom: 2px solid var(--themed-link-color); }

.pi-europa .pi-image-collection-tabs { text-align: center; background:none; } /** Lyrics **/ .pi-theme-lyrics.portable-infobox { width: auto; float: none; transition-duration: 0.3s; } .pi-theme-lyrics .pi-data { width: 90%; margin: 0 auto; } .pi-theme-lyrics .pi-navigation { background: transparent; font-size: 14px; font-weight: initial; } /* Tabber*/ 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 #D7D8D5  !important; margin-right: 2px !important;} ul.tabbernav li a:visited {color:CurrentColor !important; border-bottom: 2px solid #D7D8D5  !important; margin-right: 2px !important;} ul.tabbernav li a:hover {color:CurrentColor !important; border-bottom: 2px solid #FEFEFE !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 #886457 !important; background-color: transparent !important;  margin-right: 2px !important;} ul.tabbernav li.tabberactive a:hover {border-bottom: 2px solid #1B1A1B !important;  margin-right: 2px !important;} .tabberlive .tabbertab {border:0px solid transparent !important; border-top:0 !important;} /*Hovers*/ .increase img { opacity: 1; filter: alpha(opacity=100); transition: all 0.6s ease; } .increase img:hover { opacity: 0.8; filter: alpha(opacity=80); transform:scaleX(1.05) scaleY(1.05); } .hoverimage img { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; opacity: 1; filter: alpha(opacity=100); } .hoverimage img:hover { opacity: 0.5; filter: alpha(opacity=50); } .grayscalehover { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .grayscalehover:hover { -webkit-filter: invert(100%); } .hoverspin img { opacity: 1; filter: alpha(opacity=100); transition: all 0.6s ease; } .hoverspin img:hover { opacity: 0.5; filter: alpha(opacity=50); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }

/* Lyrics */ .pi-europa.pi-theme-lyrics { width: 90%; float: left; clear: none !important; font-weight: bold; }

.pi-theme-lyrics .pi-header { display: none; } /* Members Links */ /* == Jae Yun & Jerome== */ a[href="/wiki/Jae_Yun"]:hover, a[href="/wiki/Jae_Yun/Gallery"]:hover, a[href="/wiki/Jae_Yun/Trivia"]:hover, a[href="/wiki/Jae_Yun/Videos"]:hover, a[href="/wiki/Category:Jae_Yun"]:hover, a[href="/wiki/Jerome"]:hover, a[href="/wiki/Jerome/Gallery"]:hover, a[href="/wiki/Jerome/Trivia"]:hover, a[href="/wiki/Jerome/Videos"]:hover{ color:#FFFFFF !important; }

/* == Chi Hoon & J.You == */ a[href="/wiki/Chi_Hoon"]:hover, a[href="/wiki/Chi_Hoon/Gallery"]:hover, a[href="/wiki/Chi_Hoon/Trivia"]:hover, a[href="/wiki/Chi_Hoon/Videos"]:hover, a[href="/wiki/Category:Chi_Hoon"]:hover, a[href="/wiki/J.You"]:hover, a[href="/wiki/J.You/Gallery"]:hover, a[href="/wiki/J.You/Trivia"]:hover, a[href="/wiki/J.You/Videos"]:hover, a[href="/wiki/Category:J.You"]:hover { color:#1E22AA !important; }

/* == Dong Geon & Min Su == */ a[href="/wiki/Dong_Geon"]:hover, a[href="/wiki/Dong_Geon/Gallery"]:hover, a[href="/wiki/Dong_Geon/Trivia"]:hover, a[href="/wiki/Dong_Geon/Videos"]:hover, a[href="/wiki/Category:Dong_Geon"]:hover, a[href="/wiki/Min_Su"]:hover, a[href="/wiki/Min_Su/Gallery"]:hover, a[href="/wiki/Min_Su/Trivia"]:hover, a[href="/wiki/Min_Su/Videos"]:hover, a[href="/wiki/Category:Min_Su"]:hover { color:#F2A900 !important; }

/* == Chan & Kyung Ho == */ a[href="/wiki/Chan"]:hover, a[href="/wiki/Chan/Gallery"]:hover, a[href="/wiki/Chan/Trivia"]:hover, a[href="/wiki/Chan/Videos"]:hover, a[href="/wiki/Category:Chan"]:hover, a[href="/wiki/Kyung_Ho"]:hover, a[href="/wiki/Kyung_Ho/Gallery"]:hover, a[href="/wiki/Kyung_Ho/Trivia"]:hover, a[href="/wiki/Kyung_Ho/Videos"]:hover, a[href="/wiki/Category:Kyung_Ho"]:hover { color:#CB2C30 !important; }

/* == Ji Su & Woong Gi == */ a[href="/wiki/Ji_Su"]:hover, a[href="/wiki/Ji_Su/Gallery"]:hover, a[href="/wiki/Ji_Su/Trivia"]:hover, a[href="/wiki/Ji_Su/Videos"]:hover, a[href="/wiki/Category:Ji_Su"]:hover, a[href="/wiki/Woong_Gi"]:hover, a[href="/wiki/Woong_Gi/Gallery"]:hover, a[href="/wiki/Woong_Gi/Trivia"]:hover, a[href="/wiki/Woong_Gi/Videos"]:hover, a[href="/wiki/Category:Woong_Gi"]:hover { color:#000000 !important; }

/* Discography Links */ /* == Would You Like? == */ a[href="/wiki/Would_You_Like%3F"]:hover, a[href="/wiki/Would_You_Like%3F/Gallery"]:hover, a[href="/wiki/Would_You_Like%3F/Performances"]:hover, a[href="/wiki/Category:Would_You_Like%3F"]:hover { color:#F2B8CF !important; }

/* == THE SECRET == */ a[href="/wiki/THE_SECRET"]:hover, a[href="/wiki/THE_SECRET/Gallery"]:hover, a[href="/wiki/THE_SECRET/Performances"]:hover, a[href="/wiki/Category:THE_SECRET"]:hover { color:#AF458A !important; }

/* == From. WJSN == */ a[href="/wiki/From._WJSN"]:hover, a[href="/wiki/From._WJSN/Gallery"]:hover, a[href="/wiki/From._WJSN/Performances"]:hover, a[href="/wiki/Category:From._WJSN"]:hover { color:#B98F63 !important; }

/* == HAPPY MOMENT == */ a[href="/wiki/HAPPY_MOMENT"]:hover, a[href="/wiki/HAPPY_MOMENT/Gallery"]:hover, a[href="/wiki/HAPPY_MOMENT/Performances"]:hover, a[href="/wiki/Category:HAPPY_MOMENT"]:hover { color:#01BAE2 !important; }

/* == WJ PLEASE? == */ a[href="/wiki/WJ_PLEASE%3F"]:hover, a[href="/wiki/WJ_PLEASE%3F/Gallery"]:hover, a[href="/wiki/WJ_PLEASE%3F/Performances"]:hover, a[href="/wiki/Category:WJ_PLEASE%3F"]:hover { color:#544b87 !important; }

/* == Dream your dream == */ a[href="/wiki/Dream_your_dream"]:hover, a[href="/wiki/Dream_your_dream/Gallery"]:hover, a[href="/wiki/Dream_your_dream/Performances"]:hover, a[href="/wiki/Category:Dream_your_dream"]:hover { color:#0b2c6c !important; } /* Scrollbar */
 * -webkit-scrollbar {

width: 12px !important; height:12px !important; background-color:#fff; }
 * -webkit-scrollbar-thumb {

background-color: var(--theme-accent-color) !important; transition:0.2s; }
 * -webkit-scrollbar-thumb:hover {

background-color: var(--theme-accent-color) !important; transition:0.2s; }
 * -webkit-scrollbar-thumb:active {

background-color: var(--theme-accent-hover-color) !important; transition:0.2s; }


 * -webkit-scrollbar-track {

background-color: transparent !important; } /* Selection (Credits to PURPLE K!SS Wiki!) */
 * selection {

background: #c1c8f5; color: #FFFFFF; text-shadow: none; }