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 */

/* Theme colors */ .themed-page-bg { background-color: var(--theme-page-background-color); } .themed-button-bg { background-color: var(--theme-accent-color); }


 * 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; }

/* Links */ /** 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; }

/*Username, Message Wall, Comments Color and Userlinks*/ /** Mariathemermaid **/ a[href="/wiki/User:Mariathemermaid"] { text-shadow:0px 0px 2px black; color:orange !important; font-weight:bold !important; font-family: Alex Brush !important;}

/** I Love Blue 02 **/ a[href$="/wiki/User:I_Love_Blue_02"] { color: blue !important; font-family: Megrim !important; font-weight: bold !important; } a[href$=":I_Love_Blue_02"], a[href$="/I_Love_Blue_02"] { color: blue !important; font-family: Megrim !important; font-weight: bold !important; }

.WikiaMainContent a[href$="/wiki/User:I_Love_Blue_02"], .WikiaMainContent a[href$=":I_Love_Blue_02"], .WikiaMainContent a[href$="/I_Love_Blue_02"] { color: blue !important; font-family: Megrim !important; font-weight: bold !important; }

.Wall .edited-by a.subtle[href$="Wall:I_Love_Blue_02"]:after { color: #00FFFF !important; content: "admin" !important; font-family: 'Open Sans', sans-serif; text-transform: uppercase; font-size: 12px; font-variant: small-caps; }

/** Button for I Love Blue 02 **/ .ilb02button { background: blue; color: white; width: 80px; height: 40px; padding: 10px; }

.ilb02button:hover { background: khaki; color: black; width: 80px; height: 40px; padding: 10px; }

.ilb022button { background: powderblue; color: black; width: 80px; height: 40px; padding: 10px; } .ilb022button:hover { background: khaki; color: white; width: 80px; height: 40px; padding: 10px; }

/* Selection (DubuHasBeenSnatched) */
 * selection {

background:var(--theme-accent-color); color:var(--theme-accent-label-color); }

/******************/ /* Infoboxes */

/* Lyrics */ .pi-theme-lyrics { width: 100%; clear: none !important; font-weight: bold; text-align: center; }

.pi-theme-lyrics .pi-header { display: none; }

/* 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; }

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

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

/*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; }

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

/* Custom Dropdown Menu */ .WikiaArticle { overflow: visible; } .custom-dropdown { background: transparent !important; color: currentColor !important; font-weight:bold; padding: 1px 8px; } .custom-dropdown:hover { padding-bottom: 1px !important; } .custom-dropdown > :first-child:after { border-color: currentColor transparent transparent; } .custom-dropdown ul { list-style: none; min-width: 90px; } .custom-dropdown:hover ul { display: block; } .custom-dropdown li a, .custom-dropdown li strong.selflink { height: 14px; line-height: 14px; } .custom-dropdown .wikia-menu-button:hover { background-color: rgba(10, 10, 10, 0.3) !important; } .wikia-menu-button ul strong.selflink { display: block; padding: 9px 9px 7px; } .wikia-menu-button ul strong.selflink:hover { background: rgba(10, 10, 10, 0.3); }

/* 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; } /*Infobox*/ .pi-border-color { border: none !important; } .portable-infobox.type-integrante .wds-tabs__wrapper { margin: 0.25rem; z-index: 9999; position: absolute; } .portable-infobox.type-integrante .wds-tabs__wrapper .wds-tabs__tab { cursor: pointer; border-radius: 6px; margin-right: 0.25rem; color: #fff; transition: background 0.2s ease-in-out; } .portable-infobox.type-integrante .wds-tabs__wrapper .wds-tabs__tab:hover { background: rgba(0, 0, 0, 0.2); } .portable-infobox.type-integrante .wds-tabs__wrapper .wds-tabs__tab.wds-is-current { background: rgba(0, 0, 0, 0.4); box-shadow: 0 0; backdrop-filter: blur(3px); }

.portable-infobox { width:18rem; border-radius:8px; background: var(--theme-page-background-color); filter:drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.35)); margin-right: 0.25rem; } .portable-infobox .pi-group[data-item-name="ficha"] { position: relative;

} .pi-group .pi-smart-group section:not(:last-of-type) { border: 1px solid rgb(var(--theme-link-dynamic-color-2--rgb)) !important; border-left:0 !important; border-right:0 !important; } .portable-infobox .pi-smart-data-label { font-family: Inter !important; align-content: center; display: flex; justify-content: center; vertical-align: center; } .portable-infobox .pi-smart-data-value { margin-left: 0.5rem; font-size: 0.9rem; vertical-align: center; } .portable-infobox .pi-group[data-item-name="ficha"] :is(.pi-data, .pi-title) { position: absolute; bottom: 0.5rem; padding: 0.5rem; } .portable-infobox .pi-group[data-item-name="ficha"] .pi-data-label { display: none;

} .portable-infobox .pi-group[data-item-name="ficha"] .pi-title { background: 0; z-index: 1; font-size: 26px; font-weight: 700; margin-bottom: 1.25rem; margin-left: 0.5rem; } .portable-infobox .pi-group[data-item-name="ficha"] .pi-data-value { font-weight: 300; font-size: 18px; line-height: 21px; letter-spacing: 0.11em; flex-basis: 100%; text-transform: uppercase;

} .portable-infobox .pi-group[data-item-name="ficha"] .pi-title { background: 0; z-index: 1; font-family: var(--theme-page-headings-font),rubik,helvetica,arial,sans-serif; font-size: 26px; bottom: 1rem; } .pi-smart-group-body {padding:.35rem} .portable-infobox .pi-group[data-item-name="ficha"] .pi-image::before { background: linear-gradient(360deg, var(--theme-page-background-color) 0%, rgba(0, 0, 0, 0) 65.83%); position: absolute; content: ''; width: 100%; left: 0; height: 100%; } .portable-infobox .pi-image img { width: 100%; border-radius:8px 8px 0 0; } .pi-smart-group .pi-smart-data-label, .pi-smart-group .pi-smart-data-value { padding:0; }