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/AVvXsEi0tS9OYMOjO23iYJsGfjWQxzvsgH1PmyWa6H49Pnmm5Kyl1A2Zofg31KcxM_I8Y0Z0B6CB-LpIViKU-3GeomK5bsQ1YFazf6SHuHOb7w5O4_cU33aV8bK2X7pymvqDMIz5SnkQk0p4FMfAwgYsOqYzZY5hrajyQpqSCn0qg0n12AeVAJqcKEdrSfNv/s16000/Banner%20-%20I%20love%201.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/AVvXsEgm_MmCDUwse9xI9Rn1tjnBioJperYs_Un5i2UZmjSjJzZjZ21PASAR1SZkOaRoKvqYBV7AVlhCK2592snF9RvtZXrQXdrksull3eqMybzbGLWVyTP1HrDOIWj3w_Rad_C4sKrGmleYTiFd_DU5snjBQ3qi173hlzCjczm6yl-o8_pCbVFatzFvVUmO/s16000/Welcome%20Banner%20-%20I%20love%202.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: #de5d6c; width: 13.125rem; text-align: center; font-size: 1.375rem; padding: 1rem 4rem 1rem; margin-bottom: .625rem; border: 1px solid #de5d6c; user-select: none; } .custom-button:hover { color: #fff; background-color: #de5d6c; 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://64.media.tumblr.com/9742e5245e34c78f673d2f0bac80458d/167ec55ba382e279-28/s1280x1920/7f4ecb51214a38a50f9f14028520fd5446eea9c1.gifv); 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://64.media.tumblr.com/a67c269410bfd61e4e6b75f5cfa0d0db/167ec55ba382e279-a6/s1280x1920/3ac502bd3594d544a0612d63b3dd6b0bfdf915d8.gifv); 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://64.media.tumblr.com/2d2c91b8fee6cef6b48824c608d05927/167ec55ba382e279-26/s1280x1920/8155b0a0ddd9d88f7208a579f3c41ee7aac626c8.gifv); 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://64.media.tumblr.com/024aa1a60977e140f5f9e57b2eeb9df1/167ec55ba382e279-6d/s1280x1920/a365ae2b33b6aab88cece0dd6bbcab51e463f7b1.gifv); 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://64.media.tumblr.com/47fabd4354f0fe60b1be0c637259bddf/167ec55ba382e279-c5/s1280x1920/f677ca0a7d8811e3c6233bd5e1cb47df026f3a8d.gifv); background-size: cover; background-position: center; } /* 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 {