MediaWiki:Common.css

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

/* Import*/ /** Fonts**/ @import url('https://fonts.googleapis.com/css?family=Megrim|Julius+Sans+One|Caveat+Brush|Open+Sans|Just+Another+Hand|Tajawal|Rouge+Script|Abril+Fatface|Playfair+Display:900|Annie+Use+Your+Telescope|Alex+Brush|Architects+Daughter|Cinzel+Decorative|Coming+Soon|Indie+Flower|Lobster|Nothing+You+Could+Do|Pangolin|Shadows+Into+Light|The+Girl+Next+Door|Waiting+for+the+Sunrise|Pacifico|Life+Savers|Unica+One|Josefin+Sans|Bilbo+Swash+Caps|Marck+Script|Abril+Fatface|Henny+Penny|Eater|BenchNine|Bigelow+Rules|Almendra+Display|Exo+2|IM+Fell+DW+Pica|Coiny|Black+Melody|Modak|Cherry+Swash|Merienda|Pacifico|Tangerine|Audiowide|Inherit|Exo|Exo+2|Montserrat|Comfortaa|Courgette|Caveat|Papyrus|Cookie|Orbitron|Futura&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@800&family=Montserrat:wght@500&display=swap'); @import url(//db.onlinewebfonts.com/c/55d433372d270829c51e2577a78ef12d?family=Monument+Extended); @font-face {font-family: "Monument Extended"; src: url("//db.onlinewebfonts.com/t/55d433372d270829c51e2577a78ef12d.eot"); src: url("//db.onlinewebfonts.com/t/55d433372d270829c51e2577a78ef12d.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/55d433372d270829c51e2577a78ef12d.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/55d433372d270829c51e2577a78ef12d.woff") format("woff"), url("//db.onlinewebfonts.com/t/55d433372d270829c51e2577a78ef12d.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/55d433372d270829c51e2577a78ef12d.svg#Monument Extended") format("svg"); }

/**dev**/ @import url('/load.php?mode=articles&only=styles&articles=u:dev:MediaWiki:CustomSlider.css|u:dev:MediaWiki:ContribsButtons.css|u:loonatheworld:MediaWiki:DropdownMenu.css|u:dev:MediaWiki:EditorSourceMinimal/code.css|u:dev:MediaWiki:FandomizedCategoryExhibition/code.css|u:dev:MediaWiki:FandomizedRailModules/code.css|u:dev:MediaWiki:FandomizedThemeDesigner.css|u:dev:MediaWiki:MinifiedLeftTabs/code.css|u:dev:MediaWiki:MinimalistSliderText/code.css|u:dev:MediaWiki:ModernCommentsSection.css|u:dev:MediaWiki:ModernPolls.css|u:dev:MediaWiki:ModernProfile/Masthead.css|u:dev:MediaWiki:ModernProfile/Wall.css|u:dev:MediaWiki:ModernWikiActivity.css|u:dev:MediaWiki:RectangularButtons/code.css|');

/* Designed by Shuhuhuhua Design elements credits to dev, Jiaer & others (G)I-DLE WIKI CSS */


 * root {

--theme-Miyeon: #212121; --theme-Miyeon--rgb: 33,33,33; --theme-Miyeon--hover: #545454; --theme-Miyeon-label-color: #ffffff; --theme-Minnie: #0093ce; --theme-Minnie--rgb: 0,147,206; --theme-Minnie--hover: #004a68; --theme-Minnie-label-color: #0e191a; --theme-Soojin: #ef5601; --theme-Soojin--rgb: 239,86,1; --theme-Soojin--hover: #893101; --theme-Soojin-label-color: #0e191a; --theme-Soyeon: #e40d83; --theme-Soyeon--rgb: 228,13,131; --theme-Soyeon--hover: #f661b3; --theme-Soyeon-label-color: #ffffff; --theme-Yuqi: #01b561; --theme-Yuqi--rgb: 1,181,97; --theme-Yuqi--hover: #00502b; --theme-Yuqi-label-color: #0e191a; --theme-Shuhua: #c7ce28; --theme-Shuhua--rgb: 199,206,40; --theme-Shuhua--hover: #747917; --theme-Shuhua-label-color: #0e191a; }

/** Members **/ a[href="/wiki/Miyeon"]:hover, a[href="/wiki/Miyeon/Gallery"]:hover, a[href="/wiki/Miyeon/Facts"]:hover, a[href="/wiki/Category:Miyeon"]:hover { color:var(--theme-Miyeon) !important; }

a[href="/wiki/Minnie"]:hover, a[href="/wiki/Minnie/Gallery"]:hover, a[href="/wiki/Minnie/Facts"]:hover, a[href="/wiki/Category:Minnie"]:hover { color:var(--theme-Minnie) !important; }

a[href="/wiki/Soojin"]:hover, a[href="/wiki/Soojin/Gallery"]:hover, a[href="/wiki/Soojin/Facts"]:hover, a[href="/wiki/Category:Soojin"]:hover { color:var(--theme-Soojin) !important; }

a[href="/wiki/Soyeon"]:hover, a[href="/wiki/Soyeon/Gallery"]:hover, a[href="/wiki/Soyeon/Facts"]:hover, a[href="/wiki/Category:Soyeon"]:hover { color:var(--theme-Soyeon) !important; }

a[href="/wiki/Yuqi"]:hover, a[href="/wiki/Yuqi/Gallery"]:hover, a[href="/wiki/Yuqi/Facts"]:hover, a[href="/wiki/Category:Yuqi"]:hover { color:var(--theme-Yuqi) !important; }

a[href="/wiki/Shuhua"]:hover, a[href="/wiki/Shuhua/Gallery"]:hover, a[href="/wiki/Shuhua/Facts"]:hover, a[href="/wiki/Category:Shuhua"]:hover { color:var(--theme-Shuhua) !important; }

/*To round images*/ .round img { border-radius:50% }

/******************/

/* Slider */ .SlideIMG { margin-top: 50px; } margin: 10px; margin-right: 5px; margin-top: 5px; padding: 10px; } .nmLeft { background: transparent; color: #fff; }
 * 1) NavBtns li {

.nmLeft li:hover { background: #A0522D; color: #fff; } .nmRight { height: 110%; right: 0px; top: 0px; background:transparent; text-align: center; font-family: Montserrat; text-transform: uppercase; } .nmRight li { list-style: none; background: rgba(10, 10, 10, 0.2); border-bottom: 0px solid transparent; border-top: 0px solid transparent; padding: 5px 15px 5px 15px; margin-top: 5px; margin-bottom: 5px; }

.nmRight li:hover { cursor: pointer; background: #d2d2d2; transition-duration: 0.5s; transition-timing-function: ease-out; color: #fff; } .nmTop { width: 705px; background: #d2d2d2; color: #e30414; text-transform: uppercase; font-family: 'Poppins' !important; text-align:center; }

.nmTop li:hover { background: rgba(10, 10, 10, 0.2); transition-duration: 0.5s; transition-timing-function: ease-out; text-transform: uppercase; font-family: 'Poppins' !important; color: #f4b133; }

.nmBottom { width: 705px; background: transparent; color: #000; font-family: Montserrat; text-transform: uppercase; font-weight: bold; }

.nmBottom li:hover { background: #FFF; color: #000; font-family: Montserrat; text-transform: uppercase; font-weight: bold; } .nbActiveLeft { background: #31193e; } .nbActiveRight { background: linear-gradient(to right top, #580e8b,#e70034); color: #fff; font-family: Montserrat; text-transform: uppercase; font-weight: bold; } .nbActiveTop { background: rgba(10, 10, 10, 0.1); color: #f4b133; } .nbActiveBottom { background: #FFF; font-family: Montserrat; text-transform: uppercase; font-weight: bold; }

/******************/

/*Hover*/ .hoverimage img { opacity: 1; transition: all 0.4s ease; } .hoverimage img:hover { opacity: 0.8; transform:scaleX(0.95) scaleY(0.95); }

.hoverspin { opacity: 1; transition: all 0.6s ease; }

.hoverspin:hover { opacity: 0.5; -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } .hoverimage2 img { transition: all 0.4s ease; opacity: 1; filter: alpha(opacity=100); } .hoverimage2 img:hover { opacity: 1; filter: alpha(opacity=100); transform:scaleX(1.06) scaleY(1.06); }

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

/******************/

/* Image Overlay (Taylor Swift 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; }