MediaWiki:Common.css

/***** CSS placed here will be applied to all skins on the entire site. *****/

/*MediaWiki:StaffColors.css*/ @import url("/load.php?mode=articles&only=styles&articles=MediaWiki:StaffColors.css");

/*Dev Fandom Addons*/ /* @import "/load.php?mode=articles&articles=u:dev:MediaWiki:BalancedCommentsUCP.css&only=styles"; */ /*Testing*/ @import "/load.php?mode=articles&articles=u:dev:MediaWiki:BalancedProfileUCP.css&only=styles";

/* ITZY Wiki Imports */ @import "/load.php?mode=articles&articles=u:itzy:MediaWiki:Media.css&only=styles"; @import "/load.php?mode=articles&articles=u:itzy:MediaWiki:DropdownMenu.css&only=styles"; @import "/load.php?mode=articles&articles=u:itzy:MediaWiki:Other.css&only=styles";

/* BTS Wiki Imports */ @import "/load.php?mode=articles&articles=u:bts:MediaWiki:UserProfile.css&only=styles"; @import "/load.php?mode=articles&articles=u:bts:MediaWiki:ModernLeaderboard.css&only=styles"; @import "/load.php?mode=articles&articles=u:bts:MediaWiki:FandomizedHeader.css&only=styles"; @import "/load.php?mode=articles&articles=u:bts:MediaWiki:MinimalistSlider.css&only=styles"; @import "/load.php?mode=articles&articles=u:bts:MediaWiki:ModernComment.css&only=styles";

/* Credit to GFriend Wiki */

/* Imports */ @import url('/load.php?mode=articles&articles=u:dev:MediaWiki:ModernRail.css|MediaWiki:Root.css|u:loonatheworld:MediaWiki:DropdownMenu.css|u:dev:MediaWiki:FandomizedButtons.css|MediaWiki:Hover.css|MediaWiki:Infobox.css|u:dev:MediaWiki:CategoryRefresh.css|u:dev:MediaWiki:BalancedInterwiki.css|MediaWiki:UserProfile.css|u:dev:MediaWiki:FandomizedActivityFeed.css&only=styles');

@import "/load.php?articles=MediaWiki:Wikia.css&only=styles&mode=articles";

/* Fonts */ @import url('https://fonts.googleapis.com/css?family=Antic+Slab|PT+Sans|Nanum+Myeongjo|Noto+Serif+JP|Noto+Serif+JP|Rubik|Montserrat|Monoton|Quicksand|Nanum+Gothic|Comfortaa|Open+Sans|Roboto|Fira+Sans|Noto+Sans'); @font-face { font-family: Noctis; src:  url('https://vignette.wikia.nocookie.net/gfriend/images/e/ea/Songs_of_the_Sirens.otf/revision/latest?cb=20200816032132') format('truetype'); }

@font-face { font-family: WalpurgisLogo-Regular; src: url("https://gfriend.fandom.com/wiki/Special:FilePath/Sprat-CondesedRegular.otf") }

@font-face { font-family: WalpurgisLogo-Bold; src: url("https://gfriend.fandom.com/wiki/Special:FilePath/Sprat-CondesedBold.otf") }

@font-face { font-family: Walpurgis; src: url("https://gfriend.fandom.com/wiki/Special:FilePath/Bluunext-bold.ttf") }

/* Url */ a { font-weight:bold; }

/*Admin Nav*/ .wds-community-header__local-navigation [href="/wiki/User:FelixSaidStay"]::after { content: 'Inactive'; position: relative; background-color: #9CD4FF; top: 0; padding: 0 2px; font-size: 80%; font-weight: normal; border-radius: 4px; color: black; margin-left: 5px; }

/* ===================    BACKGROUND - FANDOMDESKTOP (Credits to ITZY Wiki) ==================== */ /* == Gradient background & Font == /* === Light Theme (Default) === */ @media screen and (min-width: 1025px) { body.theme-fandomdesktop-light { background: linear-gradient(#FAF8F9,#F4F4F2,#EAEAE4,#DADAD4,#CFCFCA,#BEBEBB) fixed; font-family:'Montserrat'; } }

/* === Dark Theme === */ @media screen and (min-width: 1025px) { body.theme-fandomdesktop-dark { background: linear-gradient(#232323,#1A1A1A,#0F0F0F,#000000) fixed; font-family:'Montserrat'; } }

/* == Border and box shadow == */ .resizable-container .page { border-top: 2px solid transparent; }

/* == 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://coryxkenshin.fandom.com/wiki/Special:FilePath/Wiki_background_light.jpg") center top 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://coryxkenshin.fandom.com/wiki/Special:FilePath/Wiki_background_dark.jpg") center fixed; background-size: 1200px; 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: 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: transparent; }

/*Members Background (Hi! The member backgrounds are SUPER sensetive. They are currently at risk of crashing and erasing the entire CSS or other parts of the wiki if edited incorrectly. Please do not change anything here without talking to Rheinaldi, or one of the admins, first! Thank you!)*/ .page-Sowon .WikiaPage .WikiaPageContentWrapper::before, .page-Sowon_Gallery .WikiaPage .WikiaPageContentWrapper::before, .page-Sowon_Trivia .WikiaPage .WikiaPageContentWrapper::before { opacity: 0.3; background: #000 url("https://gfriend.fandom.com/wiki/Special:FilePath/Sowon_Background.jpg") top center fixed !important; background-size:1280px; }

.page-Yerin .WikiaPage .WikiaPageContentWrapper::before, .page-Yerin_Gallery .WikiaPage .WikiaPageContentWrapper::before, .page-Yerin_Trivia .WikiaPage .WikiaPageContentWrapper::before{ opacity: 0.3; background: #000 url("https://gfriend.fandom.com/wiki/Special:FilePath/Yerin_Background.jpg") center fixed !important; background-size:1280px; }

.page-Eunha .WikiaPage .WikiaPageContentWrapper::before, .page-Eunha_Gallery .WikiaPage .WikiaPageContentWrapper::before, .page-Eunha_Trivia .WikiaPage .WikiaPageContentWrapper::before {   opacity: 0.3; background: #000 url("https://gfriend.fandom.com/wiki/Special:FilePath/Eunha_Background.jpg") center fixed !important; background-size:1280px; }

.page-Yuju .WikiaPage .WikiaPageContentWrapper::before, .page-Yuju_Gallery .WikiaPage .WikiaPageContentWrapper::before, .page-Yuju_Trivia .WikiaPage .WikiaPageContentWrapper::before{ opacity: 0.3; background: #000 url("https://gfriend.fandom.com/wiki/Special:FilePath/Yuju_Background.jpg") center fixed !important; background-size:1280px; }

.page-SinB .WikiaPage .WikiaPageContentWrapper::before, .page-SinB_Gallery .WikiaPage .WikiaPageContentWrapper::before, .page-SinB_Trivia .WikiaPage .WikiaPageContentWrapper::before{ opacity: 0.3; background: #000 url("https://gfriend.fandom.com/wiki/Special:FilePath/SinB_Background.jpg") center fixed !important; background-size:1280px; }

.page-Umji .WikiaPage .WikiaPageContentWrapper::before, .page-Umji_Gallery .WikiaPage .WikiaPageContentWrapper::before, .page-Umji_Trivia .WikiaPage .WikiaPageContentWrapper::before{ opacity: 0.3; background: #000 url("https://gfriend.fandom.com/wiki/Special:FilePath/Umji_Background.jpg") center fixed !important; background-size:1280px; }

.page-User_BonTheFox .WikiaPage .WikiaPageContentWrapper::before, .page-Message_Wall_BonTheFox .WikiaPage .WikiaPageContentWrapper::before, .page-User_blog_BonTheFox .WikiaPage .WikiaPageContentWrapper::before, .page-Special_Contributions_BonTheFox .WikiaPage .WikiaPageContentWrapper::before, .page-Special_UserProfileActivity_BonTheFox .WikiaPage .WikiaPageContentWrapper::before{ opacity: 0.30; background: #000 url(https://vignette.wikia.nocookie.net/countryhumans/images/9/9c/She_loves_her_food_by_yuqiroshii.jpg/revision/latest?cb=20200927031533&format=original) top center fixed !important; }

/*Background End*/

/* Tabber Customization */ .tabbernav { border-bottom: 0 !important; padding: 3px 0 !important; line-height: 20px !important; /*2lines tabber fix*/ } .tabbertab .ajax-poll, .tabbertab { border: none !important; } .noarticletext { border: none !important; }

ul.tabbernav li a { border-top:1px solid rgba(0, 0, 0, 0.25) !important; border-bottom:1px solid rgba(0, 0, 0, 0.25) !important; border-left:#B3B2D2 !important; border-right:#B3B2D2 !important; background: #ffffff !important; font-family: Helvetica !important; font-size: 12px !important; color: #000000 !important; font-weight: 300 !important; margin:0 !important; padding:2px 12px !important; font-size: 13px !important; cursor:default; } ul.tabbernav li:first-child a { border-left:#B3B2D2 !important; border-top-left-radius: 3px; border-bottom-left-radius: 3px; } ul.tabbernav li:last-of-type a { border-right:#B3B2D2 !important; border-top-right-radius: 3px; border-bottom-right-radius: 3px; } .tabberlive .tabbertab { border: #B3B2D2 !important; border-radius: 3px !important; } ul.tabbernav { border-bottom: #B3B2D2 !important; padding: 3px 0 !important; text-align:center; margin: 0 0 -10px 0 !important; } ul.tabbernav li.tabberactive a { background:#B3B2D2 !important; color:white !important; } ul.tabbernav li.tabberactive a:active { background:#B3B2D2 !important; color:white !important; }

/*Members*/ a[href="/wiki/Sowon"],a[href="/wiki/Sowon/Gallery"],a[href="/wiki/Sowon/Trivia"] {color:red} a[href="/wiki/Yerin"],a[href="/wiki/Yerin/Gallery"],a[href="/wiki/Yerin/Trivia"] {color:yellow} a[href="/wiki/Eunha"],a[href="/wiki/Eunha/Gallery"],a[href="/wiki/Eunha/Trivia"] {color:purple} a[href="/wiki/Yuju"],a[href="/wiki/Yuju/Gallery"],a[href="/wiki/Yuju/Trivia"] {color:lightgray} a[href="/wiki/SinB"],a[href="/wiki/SinB/Gallery"],a[href="/wiki/SinB/Trivia"] {color:orange} a[href="/wiki/Umji"],a[href="/wiki/Umji/Gallery"],a[href="/wiki/Umji/Trivia"] {color:skyblue} /* End highlight link */

/* Albums -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: #cdd2dd; } .book-spine-comic2 { background: #900005; } .book-spine-comic3 { background: black; } .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%; }

/*Avatar Style -Credit to ITZY Wiki*/ .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); }

/** Rotate **/ .rotate img { opacity: 1; filter: alpha(opacity=100); transition: all 1.5s ease; } .rotate 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*/

/*Hover*/ .hoverimage img { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; opacity: 1; filter: alpha(opacity=100); } .hoverimage img:hover { opacity: 0.5; filter: alpha(opacity=50); }

/* Arrow Animations + Dropdown Styling */ transition: transform cubic-bezier(0.66,0.52,0.26,1) 0.35s; }	transform: rotate(180deg) } .wds-dropdown__content .wds-list.wds-is-linked>li > a svg { transition: transform cubic-bezier(0.6, 1.8, 0.6, 0.8) 0.4s; } .wds-community-header .wds-dropdown__content .wds-list.wds-is-linked li:hover > a svg { transform: rotate(90deg); } .WikiaFooter .toolbar .tools .arrow-icon-single, .WikiaBarWrapper .toolbar .tools .arrow-icon-single:hover { transform: rotate(180deg); margin-left: 0px; } /** Dropdown Slide **/ .wds-dropdown.wds-has-dark-shadow .wds-dropdown__content, .wds-dropdown.wds-has-shadow .wds-dropdown__content, .WikiaPage .page-header .wds-dropdown__content, .wds-tabs__tab .wds-dropdown__content, .pi-section-tab .wds-dropdown__content, .wds-community-header .wds-dropdown__content .wds-list.wds-is-linked .wds-dropdown-level-2 .wds-dropdown-level-2__content, .wds-community-header .wds-dropdown__content { border: 0 !important; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); } .wds-dropdown.wds-is-active:not(.wds-no-chevron)::after, .wds-dropdown.wds-is-active:not(.wds-no-chevron)::before, .wds-dropdown:not(.wds-is-touch-device):hover:not(.wds-no-chevron)::after, .wds-dropdown:not(.wds-is-touch-device):hover:not(.wds-no-chevron)::before { display: none !important; } .wds-dropdown.wds-has-dark-shadow .wds-dropdown__content, .wds-dropdown.wds-has-shadow .wds-dropdown__content, .WikiaPage .page-header .wds-dropdown__content, .wds-tabs__tab .wds-dropdown__content, .pi-section-tab .wds-dropdown__content, .wds-community-header .wds-dropdown__content { animation: slideDownFade 0.2s ease normal; } @keyframes slideDownFade { 0%{opacity: 0; margin-top: -10px;} 100%{opacity: 1; margin-top: 0px;} } .wds-community-header .wds-dropdown__content .wds-list.wds-is-linked .wds-dropdown-level-2 .wds-dropdown-level-2__content { animation: slideLeftFade 0.2s ease normal; } @keyframes slideLeftFade { 0%{opacity: 0; margin-left: -10px;} 100%{opacity: 1; margin-left: 0px;} }
 * 1) wds-icons-dropdown-tiny {
 * 1) wds-icons-dropdown-tiny:hover {

.borderportal { border-radius:10em; width: 100px; height: 100px; margin: auto; border: 2px solid transparent; border-image: linear-gradient(#f1f0ec,#00abc0,#5f4b8b); border-image-slice: 1; }

/* Custom Notification Background (Credit to Overlook Bay Wiki) */ .wds-notifications__notification-list>li.wds-notification-card:hover { background-color: #ECECEC; }

/* Label to match BalancedInterwiki and CategoryRefresh */ .article-inter-lang-header, .special-categories { display: block; height: 28px; margin-top: 3px; box-sizing: border-box; padding: 6px 10px !important; background-color: rgba(0, 0, 0, .08); border-radius: 3px; font-size: 14px !important; font-weight: bold !important; letter-spacing: 0; line-height: 16px !important; }