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&articles=u:dev:MediaWiki:CustomSlider.css|u:dev:MediaWiki:ContribsButtons.css|u:loonatheworld:MediaWiki:DropdownMenu.css&only=styles');

/* 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); } .themed-back-bg { background-color: rgba(var(--theme-page-dynamic-color-1--inverted--rgb), .3); }


 * 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: fit-content !important; float: 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 #d1d1d1 !important; border-left:0 !important; border-right:0 !important; } .portable-infobox .pi-smart-data-label { font-family: 'Monument Extended' !important; align-content: left; display: flex; justify-content: left; vertical-align: left; } .portable-infobox .pi-smart-data-value { margin-left: 0.5rem; font-size: 0.9rem; vertical-align: left; } .portable-infobox .pi-group[data-item-name="ficha"] :is(.pi-data, .pi-title) { position: absolute; bottom: 0.5rem; padding: 0.5rem; left:0.7rem; } .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: 28px; font-weight: 700; margin-bottom: 1rem; font-family: 'Monument Extended'; } .page-Minnie .portable-infobox .pi-group[data-item-name="ficha"] .pi-title { bottom: 2rem; } .page-I_love .portable-infobox .pi-group[data-item-name="ficha"] .pi-title { bottom: 2rem; } .portable-infobox .pi-group[data-item-name="ficha"] .pi-data-value { font-weight: 300; font-size: 16px; 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: 'Monument Extended'; font-size: 28px; 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; }

/*General page design*/ .page-header__title { font-family: 'Monument Extended'; color: var(--theme-accent-label-color); padding-top: 5px; } .page-content h2 { font-family: 'Monument Extended'; font-size: 21px; border-bottom: 1px solid var(--theme-link-dynamic-color-2); margin-top: 30px; }

element.style { } a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, time, tt, u, ul, var, video { /* border: 0; */ font: normal normal normal 100% inherit; margin: 0; padding: 0; vertical-align: baseline; /* font-family: 'Monument Extended'; */ }   -webkit-box-sizing: inherit; box-sizing: inherit; } .page-content h3 { font-size: 15px; font-weight: 900; font-family: 'Montserrat'; text-transform: uppercase; letter-spacing: 1.2px; margin-top: 27px;
 * , :after, :before {

} .fandom-community-header__community-name:hover { background: -webkit-linear-gradient(#eb3941, #f15e64, #e14e53, #e2373f); -webkit-background-clip: text; -webkit-text-fill-color: transparent; transition: all .3s; } .wikia-gallery-item .thumb .gallery-image-wrapper { border-width: 0px; filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.15)); border-radius: 8px; } /*Sticky header by Shuhua*/ .fandom-sticky-header { background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(3px); } .fandom-sticky-header.is-visible { background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(3px); }