MediaWiki:Common.css

/* Imports */ /** Wikitext Syntax Highlight styling **/ @import url('/load.php?mode=articles&only=styles&articles=MediaWiki:Pygments.css'); /** Fonts **/ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap'); @font-face { font-family: 'Montserrat', sans-serif; } /* End Imports */

/* Article Space & UI */ /** Applying font **/ .WikiaArticle, .WikiaArticleInterlang, .categoriesLink, .name > a, .license-description, .wikia-slideshow-image-caption, .WikiaArticle h1, h2, .thumbnails > li > a, #CategorySelectAdd, .description > p, .CommentList_empty-state__1pct4 > p, .FormEntryPoint_text__7JAhS, font, .activity-item > .page-title, .activity-item > .edit-info, .entity-content > p, .more, .EntityHeader_entity-header__3gtUI, .data-details, .badge-text > p, .tabbernav, figcaption, wikia-slideshow-image-caption { font-family: Montserrat !important; font-weight: 500; } /** End Applying Fonts **/ /** Admin colors **/ /*** Text colors ***/ a[href$=":ElpisGalaxy"], a[href$="/ElpisGalaxy"] { color: #9370DB !important; font-weight: 600 !important;} a[href$=":D4rkWzd"], a[href$="/D4rkWzd"] { color: #9370DB !important; font-weight: 600 !important;} /*** End Text colors ***/ /*** Profile frame colors ***/ .page-User_ElpisGalaxy div.user-identity-avatar img.user-identity-avatar__image, .page-Message_Wall_ElpisGalaxy div.user-identity-avatar img.user-identity-avatar__image, .page-User_blog_ElpisGalaxy div.user-identity-avatar img.user-identity-avatar__image, .page-Special_Contributions_ElpisGalaxy div.user-identity-avatar img.user-identity-avatar__image, .page-Special_UserProfileActivity_ElpisGalaxy div.user-identity-avatar img.user-identity-avatar__image, img.wds-avatar__image[alt='ElpisGalaxy'], div.EntityHeader_avatar__2TDnq[alt='ElpisGalaxy'] { border-color: #9370DB !important; } .page-User_D4rkWzd div.user-identity-avatar img.user-identity-avatar__image, .page-Message_Wall_D4rkWzd div.user-identity-avatar img.user-identity-avatar__image, .page-User_blog_D4rkWzd div.user-identity-avatar img.user-identity-avatar__image, .page-Special_Contributions_D4rkWzd div.user-identity-avatar img.user-identity-avatar__image, .page-Special_UserProfileActivity_D4rkWzd div.user-identity-avatar img.user-identity-avatar__image, img.wds-avatar__image[alt='D4rkWzd'], div.EntityHeader_avatar__2TDnq[alt='D4rkWzd'] { border-color: #9370DB !important; } /*** End Profile frame colors ***/ /** End Admin colors **/ /** Portable Infobox **/ /*** Centering image caption ***/ .portable-infobox .pi-caption { text-align: center; } /*** End image caption ***/ /*** Standalone caption styling ***/ .pi-item[data-source=caption] > div, .pi-item[data-source=caption2] > div { line-height: 1.75; font-size: 14px; word-wrap: break-word; } .pi-item[data-source=caption], .pi-item[data-source=caption2] { text-align: center; font-family: 'Montserrat'; color: rgba(var(--theme-page-text-color--rgb),.6); font-weight: 500; font-style: italic; display: block; } /*** End Standalone caption ***/ /*** Fixing titles with line breaks ***/ .page-content .portable-infobox .pi-title + p { font-family: 'Montserrat'; font-size: 18px; font-weight: 700; text-align: center; line-height: 1.25; padding-bottom: 12px; background-color: var(--theme-accent-color); color: var(--pi-secondary-background--label); } /*** End title fix ***/ /** End Portable Infobox **/ /** Wiki Wordmark hover animations **/ .fandom-community-header__image img { opacity: 1; filter: alpha(opacity=100); transition: all 1.5s ease; } .fandom-community-header__image img:hover { opacity: 0.5; filter: alpha(opacity=50); -webkit-transform: rotateY(360deg); -moz-transform: rotateY(360deg); -o-transform: rotateY(360deg); -ms-transform: rotateY(360deg); transform: rotateY(360deg); } /** End Wiki Wordmark **/ /** CSS Improvements for Template:Infocard **/ .infocard-image > a > img { position: absolute; transform: translate(-50%, -50%); height: 100%; object-fit: scale-down; } /** End Template:Infocard **/ /* Flexbox Grid in Template:Browse */ .browseGrid { display: flex; flex-wrap: wrap; justify-content: center; } .browseGrid > div { margin: 1px; } /* End Template:Browse */

/** Enabling multiline caption in sliders **/ .fandom-slider__nav { height: 80px; bottom: -80px; } .fandom-slider__nav__caption > div { white-space: normal; } /** End Multiline slider **/ /** Headings **/ .heading-a { text-align: center; overflow: auto !important; padding: 10px !important; margin: 10px 0 10px 0 !important; border-width: 1px !important; font-family: Montserrat !important; font-weight: 500 !important; border-radius: 0px !important; color: #3a3a3a !important; } .heading-b { text-align: center; overflow: auto !important; padding: 1px !important; margin: 10px 0 5px 0 !important; border-width: 0.5px !important; font-family: Montserrat !important; font-weight: 500 !important; border-radius: 0px !important; color: #3a3a3a !important; } /** End Headings **/ /** Flexbox Grid **/ .flexGrid { display: flex; flex-wrap: wrap; justify-content: center; } .flexGrid > div { margin: 1px; } /** End Flexbox Grid **/ /** Expand-Collapse button appearance **/ .mw-collapsible-toggle a { color: inherit !important; } .mw-collapsible-toggle { float:none !important; padding: 4px 6px; color: #037ec4; font-weight: bold; } /** End Expand-Collapse **/ /** Removing subpage navigation from all pages in the main namespace **/ /**this is to avoid wrong subpage links in double A-side single pages **/ .ns-0 .page-header__page-subtitle{ display:none; } /** End Subpage navigation **/ /** Maps background color **/ .interactive-maps__map { background-color: #b4dcfc !important; } /** End Maps **/ /** Deleted page warning red instead of orange **/ .warningbox { background-color: rgba(225,84,103,0.35); border-color: #e15467; } /** End Deleted warning **/ /* End Article Space & UI */

/* Utils */ /** Image Hover animations **/ .increase img { opacity: 1; filter: alpha(opacity=100); transition: all 0.6s ease; } .increase img:hover { opacity: 0.8; filter: alpha(opacity=80); transform:scaleX(1.05) scaleY(1.05); } .hoverimage img { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; opacity: 1; filter: alpha(opacity=100); } .hoverimage img:hover { opacity: 0.5; filter: alpha(opacity=50); } .grayscalehover { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .grayscalehover:hover { -webkit-filter: invert(100%); } .hoverspin img { opacity: 1; filter: alpha(opacity=100); transition: all 0.6s ease; } .hoverspin img:hover { opacity: 0.5; filter: alpha(opacity=50); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } /** End Hover animations **/ /** Colors that change automatically based on dark/light theme **/ .dynamic-color-1 { color: var(--theme-body-dynamic-color-1); } .dynamic-color-2 { color: var(--theme-body-dynamic-color-2); } .dynamic-border-1 { border-color: var(--theme-body-dynamic-color-1) !important; } .dynamic-border-2 { border-color: var(--theme-body-dynamic-color-2) !important; } .accent-color { color: var(--theme-accent-color); } .accent-color-bg { background-color: var(--theme-accent-color); } .accent-color-border { border-color: var(--theme-accent-color); } /** End Auto Colors **/ /** Utility classes **/ .text-center { text-align: center; } .text-white { color: white; } .text-justify { padding: 0 20px; text-align:justify; text-align-last: center; text-justify: inter-character; } .text-padding { padding-left: 20px; padding-right: 20px; } /** End Utility classes **/ /* End Utils */