User:Bimbobraixen/global.css

/** * * @title           PseudoMonobook * @description    Introduces Monobook visual design cues to the Oasis skin. * @author         Speedit * @version        1.4.0 * @license        CC-BY-SA 3.0 * */

/** * @section        Skin container styling * @element        .WikiaSiteWrapper */ .skin-fandomdesktop .resizable-container { margin-bottom: 0; margin-left: 0; max-width: initial; position: relative; width: 100%; } .skin-fandomdesktop .page, .skin-fandomdesktop .global-footer { margin: 0; min-width: 758px; width: 100%; }
 * root:not(.ve-active) .skin-fandomdesktop:not(.action-edit) .page {

box-sizing: border-box; padding-left: 150px; } .skin-fandomdesktop .page .page__main { border-radius: 0; } .ve-active .skin-fandomdesktop .page, .skin-fandomdesktop .page.page-is-edit { margin-top: 45px; padding-left: 0; } .ve-active .skin-fandomdesktop .page, .skin-fandomdesktop .page.page-is-edit { margin-top: 45px; padding-left: 0; } .skin-fandomdesktop .page__main .page-side-tools__wrapper { pointer-events: none; } .skin-fandomdesktop .page__main .page-side-tools { pointer-events: all; position: relative; } .ve-active .skin-fandomdesktop .page .page-side-tools__wrapper, .skin-fandomdesktop .page.page-is-edit .page-side-tools__wrapper { z-index: 501; } .skin-fandomdesktop .page__main .page-side-tools__wrapper .page-side-tool.content-size-toggle { display: none; } @media only screen and (max-width: 1309px) { :root:not(.ve-active) .skin-fandomdesktop:not(.action-edit) .page.has-right-rail { grid-template-columns: 100%; padding-right: 0; }   :root:not(.ve-active) .skin-fandomdesktop:not(.action-edit) .page.has-right-rail .page__right-rail, :root:not(.ve-active) .skin-fandomdesktop:not(.action-edit) .page .main-page-tag-rcs, :root:not(.ve-active) .skin-fandomdesktop:not(.action-edit) .page .main-page-tag-rcs .mainpage-wrap, :root:not(.ve-active) .skin-fandomdesktop:not(.action-edit) .page .main-page-tag-rcs .rcs-container { clear: both; float: none; padding: 0; width: 100%; }   :root:not(.ve-active) .skin-fandomdesktop:not(.action-edit) .page.has-right-rail .page__right-rail, :root:not(.ve-active) .skin-fandomdesktop:not(.action-edit) .page .main-page-tag-rcs .mainpage-wrap { column-count: 2; padding: 6px 18px; }   :root:not(.ve-active) .skin-fandomdesktop:not(.action-edit) .page.has-right-rail .right-rail-wrapper { display: block; }   :root:not(.ve-active) .skin-fandomdesktop:not(.action-edit) .page.has-right-rail .rail-module__list { grid-template-columns: 50% 50%; } }
 * root:not(.ve-active) .skin-fandomdesktop:not(.action-edit) #WikiaBarWrapper {

max-width: calc(100% - 216px); } .skin-fandomdesktop #WikiaBarWrapper { right: 0; }
 * root:not(.ve-active) .skin-fandomdesktop:not(.action-edit) #WikiaBarWrapper .message {

overflow: hidden; text-overflow: ellipsis; }
 * root:not(.ve-active) .skin-fandomdesktop:not(.action-edit) #WikiaBarWrapper .wikiabar-button {

text-overflow: ellipsis; white-space: nowrap; } .ve-active .ve-ui-summaryPanel { width: 100% !important; }

/** * @subsection     Modal fix styling * @element        .WikiaSiteWrapper * @see            https://github.com/Wikia/app/blob/release-778.001/resources/wikia/ui_components/modal/css/modal_default.scss#L214-L236 */
 * root:not(.ve-active) .skin-fandomdesktop.with-blackout .WikiaSiteWrapper.fake-scrollbar {

overflow-y: hidden; position: static; width: auto; }

/** * @section        Typography reversion (by OneTwoThreeFall) * @see            https://dev.wikia.com/wiki/AntiBigText */

@media only screen and (min-width: 1500px) { body.skin-fandomdesktop { font-size: 14px; } }

/** * @section        Banner notification styling * @element        .wds-banner-notification__container */ .skin-fandomdesktop .wds-banner-notification__container { width: 100%; }
 * root:not(.ve-active) .skin-fandomdesktop:not(.action-edit) .wds-banner-notification__container.float {

margin-left: calc(150px - 50%); width: calc(100% - 150px); } .skin-fandomdesktop .wds-banner-notification__container .wds-banner-notification { align-items: center; display: flex; } .skin-fandomdesktop .wds-banner-notification__container .wds-banner-notification__icon { align-self: stretch; min-width: 44px; } .skin-fandomdesktop .wds-banner-notification__container .wds-banner-notification__text, .skin-fandomdesktop .wds-banner-notification__container .wds-banner-notification__close { padding: 10px 12px; }

/** * @section        Ad & recirculation removal * @element        .wikia-ad */ .skin-fandomdesktop #hivi_leaderboard, .skin-fandomdesktop #top_leaderboard, .skin-fandomdesktop #bottom_leaderboard, .skin-fandomdesktop #top_boxad, .skin-fandomdesktop .top-ads-container, .skin-fandomdesktop #mixed-content-footer { display: none !important; }

/** * @section        Global navigation styling * @element        .wds-global-navigation */ .skin-fandomdesktop .wds-global-navigation { left: 0; right: 0; }

/** * @section        Community header styling * @element        .fandom-community-header * @modifier       wordmark * @type           descendant */
 * root:not(.ve-active) .skin-fandomdesktop:not(.action-edit) .community-header-wrapper {

height: 0; }
 * root:not(.ve-active) .skin-fandomdesktop:not(.action-edit) .fandom-community-header__background {

display: none !important; }
 * root:not(.ve-active) .skin-fandomdesktop:not(.action-edit) .fandom-community-header {

background-color: rgba(var(--theme-page-dynamic-color-1--inverted--rgb),.5); background-image: none !important; background-size: auto; display: flex; flex-flow: column nowrap; height: 100%; left: 0; margin: 0; padding-top: 36px; position: absolute; top: 0; width: 150px; z-index: 200; }
 * root:not(.ve-active) .skin-fandomdesktop:not(.action-edit) .fandom-community-header .fandom-community-header__image {

float: none; height: auto; margin: 20px auto; max-width: 110px; }
 * root:not(.ve-active) .skin-fandomdesktop:not(.action-edit) .fandom-community-header .fandom-community-header__image img {

height: auto; max-width: 110px; object-fit: scale-down; width: auto; }

/** * @subsection     Community header wiki styling * @element        .fandom-community-header * @modifier       top-container * @type           descendant */
 * root:not(.ve-active) .skin-fandomdesktop:not(.action-edit) .fandom-community-header .fandom-community-header__top-container {

flex-flow: column; height: auto; }
 * root:not(.ve-active) .skin-fandomdesktop:not(.action-edit) .fandom-community-header .fandom-community-header__top-container:first-child {

margin-top: 28px; }
 * root:not(.ve-active) .skin-fandomdesktop:not(.action-edit) .fandom-community-header .fandom-community-header__community-name-wrapper {

margin: 0 20px 20px; text-align: center; text-overflow: initial; white-space: normal; width: calc(100% - 40px); }
 * root:not(.ve-active) .skin-fandomdesktop:not(.action-edit) .fandom-community-header .fandom-community-header__community-name {

font-size: 14px; margin-right: 3px; }
 * root:not(.ve-active) .skin-fandomdesktop:not(.action-edit) .fandom-community-header .fandom-community-header__community-name:only-child,
 * root:not(.ve-active) .skin-fandomdesktop:not(.action-edit) .fandom-community-header .gp-wiki-badge:last-child,
 * root:not(.ve-active) .skin-fandomdesktop:not(.action-edit) .fandom-community-header .official-wiki-badge:last-child {

margin-right: 0; }
 * root:not(.ve-active) .skin-fandomdesktop:not(.action-edit) .fandom-community-header .fandom-community-header__community-name:nth-last-child(3),
 * root:not(.ve-active) .skin-fandomdesktop:not(.action-edit) .fandom-community-header .page-counter {

display: none; }
 * root:not(.ve-active) .skin-fandomdesktop:not(.action-edit) .fandom-community-header .wiki-tools {

border-radius: 0; height: 36px; left: 66px; position: fixed; top: 0; width: 150px; }
 * root:not(.ve-active) .skin-fandomdesktop:not(.action-edit) .fandom-community-header .wiki-tools .wds-button {

border-radius: initial; flex-grow: 1; margin-left: 0; }
 * root:not(.ve-active) .skin-fandomdesktop:not(.action-edit) .fandom-community-header .wiki-tools .wds-button.wds-is-secondary.wds-dropdown__toggle {

box-sizing: border-box; height: 36px; }

/** * @subsection     Community header navigation styling * @element        .fandom-community-header * @modifier       local-navigation * @type           descendant */
 * root:not(.ve-active) .skin-fandomdesktop:not(.action-edit) .fandom-community-header .fandom-community-header__local-navigation {

flex-flow: column nowrap; margin-top: 0; padding: 0; position: sticky; top: 55px; }
 * root:not(.ve-active) .skin-fandomdesktop:not(.action-edit) .fandom-community-header .fandom-community-header__local-navigation .wds-tabs {

display: grid; grid-template-columns: none; grid-template-rows: repeat(auto-fit,minmax(2ch,max-content)); }
 * root:not(.ve-active) .skin-fandomdesktop:not(.action-edit) .fandom-community-header .fandom-community-header__local-navigation .wds-tabs__tab,
 * root:not(.ve-active) .skin-fandomdesktop:not(.action-edit) .fandom-community-header .fandom-community-header__local-navigation .wds-dropdown {

width: 100%; }
 * root:not(.ve-active) .skin-fandomdesktop:not(.action-edit) .fandom-community-header .fandom-community-header__local-navigation .wds-tabs__tab-label {

font-size: 12px; justify-content: center; margin: 0 auto; white-space: normal; width: 100%; }
 * root:not(.ve-active) .skin-fandomdesktop:not(.action-edit) .fandom-community-header .fandom-community-header__local-navigation .wds-dropdown__toggle-chevron {

position: absolute; right: 8px; transform: rotate(270deg); }
 * root:not(.ve-active) .skin-fandomdesktop:not(.action-edit) .fandom-community-header .fandom-community-header__local-navigation .wds-dropdown:hover .wds-dropdown__toggle-chevron {

transform: rotate(90deg); }

/** * @subsection     Community header dropdown styling * @element        .fandom-community-header .wds-dropdown * @type           descendant */
 * root:not(.ve-active) .skin-fandomdesktop:not(.action-edit) .fandom-community-header .wds-dropdown:after,
 * root:not(.ve-active) .skin-fandomdesktop:not(.action-edit) .fandom-community-header .wds-dropdown:before {

bottom: auto; top: 12px; transform: rotate(270deg); }
 * root:not(.ve-active) .skin-fandomdesktop:not(.action-edit) .fandom-community-header .wds-dropdown:after {

left: calc(100% - 7px); }
 * root:not(.ve-active) .skin-fandomdesktop:not(.action-edit) .fandom-community-header .wds-dropdown:before {

left: calc(100% - 8px); top: 11px; }
 * root:not(.ve-active) .skin-fandomdesktop:not(.action-edit) .fandom-community-header .wds-dropdown__content {

left: 100%; right: auto; top: 0; transform: initial; }

/** * @subsection     Community header tool styling * @element        .fandom-community-header * @modifier       wiki-buttons * @type           descendant */
 * root:not(.ve-active) .skin-fandomdesktop:not(.action-edit) .fandom-community-header .fandom-community-header__wiki-buttons {

justify-content: stretch; margin: 1px; position: absolute; top: 0; width: 150px; }
 * root:not(.ve-active) .skin-fandomdesktop:not(.action-edit) .fandom-community-header .fandom-community-header__wiki-buttons .wds-button {

border-radius: 0; border-top: none; flex: 1; margin: 0 0 0 -1px; padding: 9px 0; }
 * root:not(.ve-active) .skin-fandomdesktop:not(.action-edit) .fandom-community-header .fandom-community-header__wiki-buttons .wds-button:first-child {

border-left: none; }
 * root:not(.ve-active) .skin-fandomdesktop:not(.action-edit) .fandom-community-header .fandom-community-header__wiki-buttons .wds-button svg {

margin: 0; }
 * root:not(.ve-active) .skin-fandomdesktop:not(.action-edit) .fandom-community-header .fandom-community-header__wiki-buttons .wds-button span {

display: none; }
 * root:not(.ve-active) .skin-fandomdesktop:not(.action-edit) .fandom-community-header .fandom-community-header__wiki-buttons .wds-dropdown {

display: flex; flex: 1; position: static; }
 * root:not(.ve-active) .skin-fandomdesktop:not(.action-edit) .fandom-community-header .fandom-community-header__wiki-buttons .wds-dropdown:after,
 * root:not(.ve-active) .skin-fandomdesktop:not(.action-edit) .fandom-community-header .fandom-community-header__wiki-buttons .wds-dropdown:before {

display: none; }
 * root:not(.ve-active) .skin-fandomdesktop:not(.action-edit) .fandom-community-header__wiki-buttons .wds-dropdown__content {

border-radius: 0; left: calc(100% - 1px); padding: 0; top: -1px; width: calc(100vw - 150px); }
 * root:not(.ve-active) .skin-fandomdesktop.ns--1 .fandom-community-header__wiki-buttons .wds-dropdown__content,
 * root:not(.ve-active) .skin-fandomdesktop.ns-500:not(.MiniEditor) .fandom-community-header__wiki-buttons .wds-dropdown__content,
 * root:not(.ve-active) .skin-fandomdesktop.ns-1200 .fandom-community-header__wiki-buttons .wds-dropdown__content,
 * root:not(.ve-active) .skin-fandomdesktop.ns-1201 .fandom-community-header__wiki-buttons .wds-dropdown__content,
 * root:not(.ve-active) .skin-fandomdesktop.ns-2000 .fandom-community-header__wiki-buttons .wds-dropdown__content {

display: inline-block; }
 * root:not(.ve-active) .skin-fandomdesktop:not(.action-edit) .fandom-community-header .fandom-community-header__wiki-buttons .wds-list {

display: flex; }
 * root:not(.ve-active) .skin-fandomdesktop:not(.action-edit) .fandom-community-header .fandom-community-header__wiki-buttons .wds-list > li {

margin: 0; }
 * root:not(.ve-active) .skin-fandomdesktop:not(.action-edit) .fandom-community-header .fandom-community-header__wiki-buttons .wds-list > li > a {

font-size: 10px; font-weight: bold; line-height: 1em; padding: 13px 12px; text-transform: uppercase; }

/** * @section        Page header contribution button styling * @element        .page-header * @modifier       contribution-buttons * @type           descendant */ .skin-fandomdesktop .page .page-header { position: static; } .skin-fandomdesktop .page .page-header .page-header__contribution-buttons .wds-button-group { left: -20px; position: absolute; right: -24px; top: 0; } .skin-fandomdesktop .page .page-header .page-header__contribution-buttons .wds-button-group { left: 150px; right: 0; top: 55px; } .skin-fandomdesktop .page .page-header .page-header__contribution-buttons .wds-button { border-radius: 0; } .skin-fandomdesktop .page .page-header .page-header__contribution-buttons .wds-dropdown__content { border-radius: 0; display: flex; flex: 1; padding: 0; position: static; } .skin-fandomdesktop .page .page-header .page-header__contribution-buttons .wds-dropdown { display: flex; flex: 1; } .skin-fandomdesktop .page .page-header .page-header__contribution-buttons .wds-dropdown__toggle, .skin-fandomdesktop .page .page-header .page-header__contribution-buttons .wds-dropdown:before, .skin-fandomdesktop .page .page-header .page-header__contribution-buttons .wds-dropdown:after { display: none; } .skin-fandomdesktop .page .page-header .page-header__contribution-buttons .wds-list { display: flex; flex-flow: row nowrap; overflow: hidden; } .skin-fandomdesktop .page .page-header .page-header__contribution-buttons .wds-list > li { margin: 0; } .skin-fandomdesktop .page .page-header .page-header__contribution-buttons .wds-list > li > a { font-size: 10px; font-weight: bold; padding: 11px 12px; text-transform: uppercase; }

/** * @section        Content modifications * @element        .WikiaMainContent */ .skin-fandomdesktop .WikiaMainContent .featured-video__wrapper, .skin-fandomdesktop #mw-content-text .jwplayer-in-article-video { margin: 0 auto; max-height: 396px; max-width: 704px; } .skin-fandomdesktop .WikiaMainContent .CommunityPageMainContent .community-page-cards-module, .skin-fandomdesktop .WikiaMainContent .CommunityPageMainContent .community-page-todo-list-module { max-width: auto; }

/** * @section        Global footer modifications * @element        .global-footer */ .skin-fandomdesktop .global-footer__main { flex-direction: row; margin: 0 auto; padding-bottom: 5px; zoom: 0.85; } .skin-fandomdesktop .global-footer .global-footer__header { display: flex; padding: 16px 0; zoom: 0.85; } .skin-fandomdesktop .global-footer .global-footer__header-logo { height: 36px; } .skin-fandomdesktop .global-footer__fandom-sections, .skin-fandomdesktop .global-footer__wikia-sections { align-content: flex-start; margin: 0 auto; order: 4; width: 720px; } .skin-fandomdesktop .global-footer .global-footer__bottom-bar { min-height: 3em; } .skin-fandomdesktop .global-footer .global-footer__bottom-bar-row { padding: 10px 0; } @media only screen and (max-width: 1313px) { .skin-fandomdesktop .global-footer .global-footer__wikia-section { flex: 1; margin-right: 25px; width: 25%; }   .skin-fandomdesktop .global-footer .global-footer__wikia-section.wds-is-community-apps .global-footer__links-list { flex-direction: column; }   .skin-fandomdesktop .global-footer .global-footer__wikia-section.wds-is-community-apps .global-footer__links-list-item { margin: 0; }   .skin-fandomdesktop .global-footer .global-footer__wikia-section.wds-is-create-wiki, .skin-fandomdesktop .global-footer .global-footer__wikia-section.wds-is-advertise { display: none !important; }   .skin-fandomdesktop .global-footer__wikia-sections .global-footer__links-list-item { margin-bottom: 8px; } } /** Hummel009's UCP Fix **/ .ve-init-mw-desktopArticleTarget-originalContent { height: 100%; overflow: hidden; } /* */ /* * NoGlobalNav * * @description Removes the FandomDesktop global navigation and moves user and notification dropdowns to top right * @author Joritochip * * Make sure you also import the JS at MediaWiki:NoGlobalNav.js */ .user-navigation-moved { --fandom-global-nav-link-color: var(--theme-community-header-color); --fandom-global-nav-icon-background-color: none; --fandom-global-nav-icon-background-color--hover: rgba(255, 255, 255, 0.25); --fandom-global-nav-icon-background-color--active: rgba(255, 255, 255, 0.4); } .fandom-sticky-header .user-navigation-moved { --fandom-global-nav-link-color: var(--theme-sticky-nav-text-color); } .user-navigation-moved .wds-avatar { --wds-avatar-border-color: var(--theme-community-header-color); --wds-avatar-border-color--hover: var(--theme-link-color); } .fandom-sticky-header .user-navigation-moved .wds-avatar { --wds-avatar-border-color: var(--theme-sticky-nav-text-color); }

.global-navigation .notifications .wds-dropdown__content { left: inherit !important; right: 0; } .user-navigation-moved { display: flex; margin-left: 10px; flex-direction: row; } .user-navigation-moved .wds-dropdown__toggle { width: 30px; height: 30px; } .user-navigation-moved .wds-dropdown { margin-left: 0; } .user-navigation-moved .moved-notifications { line-height: 1; } .user-navigation-moved .global-navigation__icon { width: 30px; height: 30px; border: none; } .user-navigation-moved .moved-notifications__counter { align-items: center; background: #fff; border-radius: 50%; color: #5f7a7b; display: flex; font-size: 10px; font-weight: 500; height: 18px; justify-content: center; left: 0; line-height: 1; position: absolute; top: 0; width: 18px; } .user-navigation-moved .moved-notifications__counter:empty { display: none; } .wiki-tools.wds-button-group > .wds-dropdown .wds-button { border-right: 1px solid; } .global-navigation { position: absolute; left: -500vw; box-shadow: none; } .main-container { width: 100%; margin-left: 0; } .fandom-sticky-header { left: 0; } .notifications-placeholder { left: 18px; } .global-navigation .notifications .wds-dropdown .wds-dropdown__content { border-radius: 3px 3px 0 0; } .fandom-sticky-header.is-visible ~ .global-navigation .notifications .wds-dropdown .wds-dropdown__content { top: 46px; } .fandom-sticky-header:not(.is-visible) ~ .global-navigation .notifications .wds-dropdown .wds-dropdown__content { top: 113px; right: calc((100% - 1236px)/2); } .is-content-expanded .fandom-sticky-header:not(.is-visible) ~ .global-navigation .notifications .wds-dropdown .wds-dropdown__content { right: 2.5%; } @media only screen and (max-width: 785px) { .global-navigation { top: -500vw; position: absolute !important; } } @media only screen and (min-width: 1280px) and (max-width: 1454px) { body:not(.is-content-expanded) .fandom-sticky-header:not(.is-visible) ~ .global-navigation .notifications .wds-dropdown .wds-dropdown__content { right: 7.5%; } } @media only screen and (max-width: 1279px) { .fandom-sticky-header:not(.is-visible) ~ .global-navigation .notifications .wds-dropdown .wds-dropdown__content { right: 2.5%; } } .global-navigation .notifications .wds-dropdown:before, .global-navigation .notifications .wds-dropdown:after { display: none; } /* Hacky method to flip the dropdown items in the user dropdowns TODO: Find a better way to do this */ .user-navigation-moved > .wds-dropdown .wds-list { transform: scaleY(-1); } .user-navigation-moved > .wds-dropdown .wds-list li { transform: scaleY(-1); }

/* Make search background fadeout cover area where global nav used to be */ .search-modal, .search-modal:before { left: 0; }

/* Add some space before JS loads so that buttons don't jump around */ body:not(.noglobalnav-loaded) .wiki-tools.wds-button-group::after { content: ''; margin-left: 10px; width: 60px; display: block; background-color: rgba(0, 0, 0, 0.3); border-radius: 8px; }

/* Fix sign out button color */ /* From User:Sophiedp */ .global-navigation__signout-button { line-height: 1; } .global-navigation__signout-button:hover { background-color: rgba(var(--theme-link-color--rgb),0.1); }

/* Make fullscreen background expand to full width */ .fandom-community-header__background.fullScreen { width: 100%; }

/* Fix Map editor thinking that global nav is still there */ .interactive-map-editor { margin-left: unset; width: 100vw; }