MediaWiki:Fandomdesktop.css

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

.WikiaPage h1, .WikiaPage h2, .WikiaPage h3, .WikiaPage h4, .WikiaPage h5, .WikiaPage h6, .WikiaPage .heading { font-family: Monument Extended; text-transform: lowercase; letter-spacing: 2px; color: #000; }

.wikia-photogallery-add { display: none !important; } .resizable-container { font-family: 'Montserrat'; }

/* Mainpage banner, credits to Normani Wiki */ /* Banner 1, Releases */ .hp-banner { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheioPkp-PLWapajUIO4Lia9b9Uo3scjCOb4lgcBQNP732wKDrEhVxM0hrUh1Zh4MaahND8eT4TRj5a1RRfV_CiYs6aZ57-5i1gwS7i_jrXhkViOwSu3fwY-IchhlYAWa82GNM286_skycUf2J6PiZi1udeUuNmW8_3bN9N31QW9fxn7aLeWqjC5x5z/s16000/Banner%20-%20I%20feel%203.jpg); background-size: cover; background-position: center; background-position-y: top; margin-bottom: 0px; -webkit-transform: scaleX(-1); transform: scaleX(-1); } .banner { background: linear-gradient(360deg,#000000cf,transparent); -webkit-transform: scaleX(-1); transform: scaleX(-1); }

/* Banner 2, Welcome */ .hp-banner2 { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZlbNcNPgU8IT_Zz1OGugh9WQMTvUuGOCgmue7yIaZVKb8JnIzcn-2nRX3XwfMmZ4MhmGO0k11Cpd7s388sqCiRr6GJ-jzHzFS2lRQV-oHw1OellSbyWeFA7TrnoRCAKaeb3MfxRJUEwOwEUEfX8mI5XKzNbsaF3jMYRULxWhx2KLF-P-N4sqTNvUJGeM/s16000/gidlewikimain2.png); background-size: cover; background-position: center; background-position-y: top; margin-bottom: 0px; -webkit-transform: scaleX(1); transform: scaleX(1); } .banner2 { background: transparent; -webkit-transform: scaleX(1); transform: scaleX(1); }

/* Banner 3, Members Main Page */ .hp-banner3 { background: url(https://1.bp.blogspot.com/-yk8ZSr-qPPw/YRmYQgtBJhI/AAAAAAAADvQ/taf6ahbSjzYQmyojSsN95lSp4i1tUX8lQCLcBGAsYHQ/s16000/Banner%2B-%2BMembers%2B6.png); background-size: cover; background-position: center; background-position-y: top; border: 1px solid transparent; border-width: 0; margin-bottom: 0px; -webkit-transform: scaleX(1); transform: scaleX(1); } .theme-fandomdesktop-dark .hp-banner3::before { content: ""; position: absolute; width: 100%; height: 100%; background: url(https://1.bp.blogspot.com/-yk8ZSr-qPPw/YRmYQgtBJhI/AAAAAAAADvQ/taf6ahbSjzYQmyojSsN95lSp4i1tUX8lQCLcBGAsYHQ/s16000/Banner%2B-%2BMembers%2B6.png); background-size: cover; background-position: center; background-position-y: top; filter: invert(1) hue-rotate(180deg); } .theme-fandomdesktop-dark .hp-banner3 + div { background: #0f6d7f !important; }

.banner3 { background: transparent; -webkit-transform: scaleX(1); transform: scaleX(1); }

/* Buttons */ .custom-button { font-family: Monument Extended; font-weight: 500; color: #8bc2ce; width: 13.125rem; text-align: center; font-size: 1.375rem; padding: 1rem 4rem 1rem; margin-bottom: .625rem; border: 1px solid #8bc2ce; user-select: none; } .custom-button:hover { color: #fff; background-color: #8bc2ce; transition: all .3s; cursor: pointer; } .custom-button a.new:active, a.new:focus, a.new:hover { text-decoration: none; } .custom-button a:active, a:focus, a:hover { text-decoration: none; }

/* Buttons ver2 by Shuhua */ .button2 { display: inline-block; border: none; color: #FFFFFF; text-align: center; font-size: 18px; letter-spacing: 2px; transition: all 0.5s; cursor: pointer; width:390px; background: linear-gradient(90deg, rgba(196,59,75,1) 0%, rgba(234,100,111,1) 100%); border-radius:30px; padding-top:12px; padding-bottom:10px; margin-bottom: 2px; box-shadow: 2px 2px 25px #e98394; font-family: Monument Extended; text-transform: lowercase; }

.button2 span { cursor: pointer; display: inline-block; position: relative; transition: 0.5s; }

.button2 span:after { content: '➜'; position: absolute; opacity: 0; top: 0; right: -20px; transition: 0.5s; }

.button2:hover span { padding-right: 25px; }

.button2:hover span:after { opacity: 1; right: 0; }

/* Main Page customization by Shuhua */ .page-_G_I-DLE_Wiki .page-header__bottom, .page-header__top { display: none; } .page-_G_I-DLE_Wiki .page-side-tool { display: none; } .theme-fandomdesktop-light .blackfont { color: #000; }

/* Custom Header by Shuhua */ .fandom-community-header__community-name { font-family: 'Monument Extended'; letter-spacing: 2px; text-transform: lowercase; }

.fandom-community-header__local-navigation .first-level-item a span { font-family: 'Montserrat'; } .page-counter__value { font-family: 'Montserrat'; font-weight: bold; } .page-counter__label { font-family: 'Montserrat'; font-weight: bold; }

.fandom-community-header__local-navigation { border-bottom: 0px solid #000; } .fandom-sticky-header{ border-bottom: 0px solid #000; background-color: #fff; box-shadow: none; padding: 0 18px; } .fandom-sticky-header__sitename { font-family: 'Monument Extended'; text-transform: lowercase; } .page__main { border-top: 1px solid transparent; margin-top: -12px; }

/* Flex Grid */ .centered-grid { display: flex; justify-content: center; flex-wrap: wrap; }

/* Members Main Page by Shuhua */

.membername { font-family: 'Monument Extended'; font-size: 28.7px; color: #fff; text-transform: uppercase; text-align: center; padding-top: 200px; text-shadow: 2px 2px 25px #6b6b6b; } .position { font-family: Montserrat; font-weight: 500; font-size: 10px; color: #fff; text-transform: uppercase; text-align: center; margin-top: -5px; } .button4 { font-family: Montserrat; font-weight: 500; font-size: 10px; color: #000; margin-top: 35px; margin-left: 35px; margin-right: 35px; display: inline-block; border: none; text-align: center; transition: all 0.5s; cursor: pointer; background: white; border-radius: 20px; padding-top: 8px; padding-bottom: 8px; box-shadow: 2px 2px 25px #6b6b6b; } .button4 span { cursor: pointer; display: inline-block; position: relative; transition: 0.5s; }

.button4 span:after { content: '➜'; position: absolute; opacity: 0; top: 0; right: -20px; transition: 0.5s; }

.button4:hover span { padding-right: 25px; }

.button4:hover span:after { opacity: 1; right: 0; } .card-miyeon { display: flex; cursor: pointer; flex-direction: column; position: relative; overflow: hidden; background-color: #fff; border-radius: 18px; width: 200px; height: 350px; white-space: normal; box-shadow: 2px 4px 12px rgb(0 0 0 / 8%); transition: all .3s cubic-bezier(0,0,.5,1); background: linear-gradient(to top,rgba(0,0,0,1) 0%, rgba(255,255,255,0) 100%), url(https://static.wikia.nocookie.net/g-idle/images/5/5e/Miyeon_I_feel_Concept_Photo_Queen_Ver_1.jpg/revision/latest?cb=20230428211954); background-size: cover; background-position: center; } .card-minnie { display: flex; cursor: pointer; flex-direction: column; position: relative; overflow: hidden; background-color: #fff; border-radius: 18px; width: 200px; height: 350px; white-space: normal; box-shadow: 2px 4px 12px rgb(0 0 0 / 8%); transition: all .3s cubic-bezier(0,0,.5,1); background: linear-gradient(to top,rgba(0,0,0,1) 0%, rgba(255,255,255,0) 100%), url(https://static.wikia.nocookie.net/g-idle/images/b/b7/Minnie_I_feel_Concept_Photo_Queen_Ver_2.jpg/revision/latest?cb=20230428212326); background-size: cover; background-position: center; } .card-soyeon { display: flex; cursor: pointer; flex-direction: column; position: relative; overflow: hidden; background-color: #fff; border-radius: 18px; width: 200px; height: 350px; white-space: normal; box-shadow: 2px 4px 12px rgb(0 0 0 / 8%); transition: all .3s cubic-bezier(0,0,.5,1); background: linear-gradient(to top,rgba(0,0,0,1) 0%, rgba(255,255,255,0) 100%), url(https://static.wikia.nocookie.net/g-idle/images/5/5a/Soyeon_I_feel_Concept_Photo_Queen_Ver_1.jpg/revision/latest?cb=20230428212344); background-size: cover; background-position: center; }

.card-yuqi { display: flex; cursor: pointer; flex-direction: column; position: relative; overflow: hidden; background-color: #fff; border-radius: 18px; width: 200px; height: 350px; white-space: normal; box-shadow: 2px 4px 12px rgb(0 0 0 / 8%); transition: all .3s cubic-bezier(0,0,.5,1); background: linear-gradient(to top,rgba(0,0,0,1) 0%, rgba(255,255,255,0) 100%), url(https://static.wikia.nocookie.net/g-idle/images/c/c5/Yuqi_I_feel_Concept_Photo_Queen_Ver_3.jpg/revision/latest?cb=20230428212437); background-size: cover; background-position: center; }

.card-shuhua { display: flex; cursor: pointer; flex-direction: column; position: relative; overflow: hidden; background-color: #fff; border-radius: 18px; width: 200px; height: 350px; white-space: normal; box-shadow: 2px 4px 12px rgb(0 0 0 / 8%); transition: all .3s cubic-bezier(0,0,.5,1); background: linear-gradient(to top,rgba(0,0,0,1) 0%, rgba(255,255,255,0) 100%), url(https://static.wikia.nocookie.net/g-idle/images/4/47/Shuhua_I_feel_Concept_Photo_Queen_Ver_1.jpg/revision/latest?cb=20230428212450); background-size: cover; background-position: center; }

.mv-card { /* latest mv box on the main page by admin Shuhua */ display: flex; cursor: pointer; flex-direction: column; position: relative; overflow: hidden; background-color: #fff; border-radius: 18px; width: 450px; height: 200px; white-space: normal; box-shadow: 2px 4px 12px rgb(0 0 0 / 8%); transition: all .3s cubic-bezier(0,0,.5,1); background: linear-gradient(to top,rgba(0,0,0,1) 0%, rgba(255,255,255,0) 100%), url(https://64.media.tumblr.com/1fe594825e5b471a68baf989079caf35/a0458d738ddafb4d-36/s540x810/f040f359a3332e2bb8fbfeadf1f70550e96dcad9.gifv); background-size: cover; background-position: center; } .mv-tag { font-family: Monument Extended; font-size: 9px; color: #fff; text-transform: uppercase; text-align: center; background: rgba(255,255,255,0.2); backdrop-filter: blur(10px); border-radius: 30px; padding: 2px; border: 1px solid rgba(255,255,255,0.3); text-shadow: 2px 2px 25px #6b6b6b; margin: 55px 190px 0px 190px; } .mv-title { font-family: Monument Extended; font-size: 28px; color: #fff; text-transform: uppercase; text-align: center; text-shadow: 2px 2px 25px #6b6b6b; } .mv-artist { font-family: Montserrat; font-weight: 500; font-size: 12px; color: #fff; text-transform: uppercase; text-align: center; margin-top: 0px; } /* Members Main Page ver 2 by Shuhua*/

.membersmainpage { border-radius: 20px; width: 29.875rem; background: #e0e0e0; font-family: Montserrat; margin: 10px; display: flex; flex-direction: column; box-sizing: border-box; position: relative; overflow: hidden; border-radius: 18px; box-shadow: 2px 4px 12px rgb(0 0 0 / 8%); transition: all .3s cubic-bezier(0,0,.5,1); }

.membersmainpage:hover { border: 0px solid #ccc; box-shadow: 0px 0px 40px #c8c8c8; transition: all .3s cubic-bezier(0,0,.5,1); } .theme-fandomdesktop-dark .membersmainpage:hover { box-shadow: 0px 0px 40px #787878; }

.membersmainpageimg { width: 100%; border-radius:100%; padding: 20px; height: auto; }

.membersmainpagedesc { padding: 15px; text-align: center; } /* Hover imgs */ .increase img { opacity: 1; filter: alpha(opacity=100); transition: all 0.6s ease; border-radius: 100%; } .increase img:hover { opacity: 1; filter: alpha(opacity=80); transform:scaleX(1.05) scaleY(1.05); border-radius: 100%; }

/******** DROPDOWN ********/ /* Style The Dropdown Button */ .dropbtn { border: none; cursor: pointer; }

/* The container - needed to position the dropdown content */ .dropdown { position: relative; display: inline-block; }

/* Dropdown Content (Hidden by Default) */ .dropdown-content { display: none; position: absolute; background-color: var(--abilityblue); white-space: nowrap; padding-right: 1em; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; }

/* Links inside the dropdown */ .dropdown-content li { padding: 12px 16px; display: block; }

/* Change color of dropdown links on hover */ .dropdown-content li:hover { /*background-color: #f1f1f1*/ }

/* Show the dropdown menu on hover */ .dropdown:hover .dropdown-content { display: block; }

/* Change the background color of the dropdown button when the dropdown content is shown */ .dropdown:hover .dropbtn { /*background-color: #3e8e41;*/ }

.pi-image-collection .pi-image-collection-tabs { margin: 0; }

.mw-parser-output a[href*="g-idle.fandom.com"].external:after { display: none; }

/* Tooltip */ .advanced-tooltip { border: 1px solid #999; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); border-radius: 4px; margin-bottom: 5px; padding: 2px 5px; background-color: #082644; }

/* Adds padding to the wrapper to make space for a shadow + z-index so tooltips are visible over edit preview screen */ padding: 3px 7px 2px 3px; z-index: 6000000; } .tooltips-init-complete { cursor: help; }
 * 1) tooltip-wrapper {