User:Soronos/global.css/mobile.css

/* Code de ResponsiveMobile, navigation globale en moins
 * A responsive mobile interface for FandomDesktop.
 * Authors:
 * * Noreplyz (Oasis)
 * * Sophiedp (UCP)
 * * dr03ramos (UCX)
 * Maintainers:
 * * SuperDragonXD1
 * Notes
 * * If you have issues with the global navigation (excluding the simplified FandomMobile-like style), please edit/post your issues in TopGlobalNav
 * * SuperDragonXD1
 * Notes
 * * If you have issues with the global navigation (excluding the simplified FandomMobile-like style), please edit/post your issues in TopGlobalNav
 * * If you have issues with the global navigation (excluding the simplified FandomMobile-like style), please edit/post your issues in TopGlobalNav

@media only screen and (max-width: 1023px) { .sticky-modules-wrapper { display: flex; justify-content: space-between; }

.rail-module__list { grid-template-columns: unset; }

.rail-module, .rail-sticky-module, .mcf-column { flex-basis: 48%; width: 48%; }

.mcf-column:nth-child(2) { display: none; }

.global-navigation__bottom .wds-dropdown__toggle { width: unset; }

.right-rail-wrapper { padding: 0; }

.page__main, .page__right-rail, .mcf-wrapper { padding-left: 26px; padding-right: 26px; }

.page-header__action-button.has-label .wds-icon { margin-right: 6px !important; }

.page-side-tools__wrapper { left: -5px; }

.bottom-ads-container .ad-slot-placeholder, .top-ads-container .ad-slot-placeholder { width: unset !important; max-width: none; min-width: unset !important; overflow: hidden !important; } /* Just why Fandom... why do you have to have this tiny inconcistentcy */ .fandom-sticky-header a.wds-button.wds-is-secondary.wiki-tools__theme-switch { border-radius: 3px 0 0 3px; } }

/*   * ====||||====    * Sticky header */ .fandom-sticky-header, .search-modal, .search-modal:before { left: 0; top: -46px; /* Fix to rm */ }

.fandom-sticky-header__sitename { display: block; }

.fandom-sticky-header { min-width: unset; }

.fandom-sticky-header .fandom-community-header__local-navigation { display: none; }

/* Making the notifs position with the sticky header */ .fandom-sticky-header.is-visible+.global-navigation .global-navigation__bottom .notifications .wds-dropdown .wds-dropdown__content { top: 46px; height: 94%; }

/*   * ====||||====    * The community header thingy, after the lobal nav */ .community-header-wrapper { width: 95%; margin-left: auto; margin-right: auto; display: block; margin-top: 12px; height: auto; } .fandom-community-header { grid-template-areas: unset; grid-template-columns: min-content 1fr; grid-template-rows: auto auto; }

.fandom-community-header__image { grid-column: 1; }

.fandom-community-header__top-container { grid-column: 2; }

.fandom-community-header__local-navigation { grid-column: 1/3; grid-row: 2; }

.fandom-community-header__image img { max-height: 45px; max-width: 100px; }

.fandom-community-header__background.fullScreen { width: 100%; }

.fandom-community-header__local-navigation .wds-tabs { display: flex; flex-wrap: wrap; }

.fandom-community-header__local-navigation .wds-tabs__tab-label { font-size: 11px; /* The font is too big, so this.... */ }

.fandom-community-header__local-navigation .wds-dropdown.wds-is-active.is-clicked .wds-dropdown__toggle a:not([href="#"]) { text-decoration: underline; color: var(--theme-link-color); }

/*   * ====||||====    * Page content usability */ .mw-parser-output, .page-content p, .page-content section { font-weight: 300; }

#content { font-size: 16px; }

.page-content #mw-content-text .mw-parser-output > h2 { border-bottom-width: 0.3px; display: flex; justify-content: space-between; font-weight: 430; }

.page-content #mw-content-text .mw-parser-output > h2 .mw-headline { width: 100%; }

.page-content #mw-content-text .mw-parser-output > h2 svg { width: 24px; height: 24px; fill: currentColor }

.page-content ul, .page-content ol { font-weight: 300; }

/*   * ====||||====    * Other snippets */

/* Sitenotice/Notifs */ .notifications-placeholder { width: fit-content; bottom: 1px; left: unset; width: -moz-available; /* WebKit-based browsers will ignore this. */   width: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */   width: fill-available; }

.notifications-placeholder .wds-banner-notification__container { width: 100%; }

.sitenotice { width: fit-content; }

/* Search UI */ .unified-search__layout { display: initial !important; }

.unified-search__input__wrapper__inner { flex-wrap: wrap; }

/* Images */ .skin-fandomdesktop .LightboxModal { margin: 0 !important; width: 90% !important; height: 90% !important; } /* Make media in lightbox scrollable */ .LightboxModal .media { overflow-x: visible; justify-content: normal; max-height: 100% !important; } /* Force thumb left/thumb right images to be displayed at center */ .page-content .tleft,.page-content .tright { clear: both; float: none; text-align: center; width: 100% !important; margin: 0 0 12px; }

/* Simplified lightbox */ .LightboxModal .LightboxHeader .share-button, .LightboxModal .LightboxHeader .more-info-button, .LightboxModal .LightboxHeader .see-full-size-link, .LightboxModal .LightboxHeader .user-details { display: none; }

/*   * ====||||====    * Uncategorized */ .resizable-container { width: 95% } #userProfileApp .user-identity-header__attributes { min-width: unset; }

.fandom-community-header__local-navigation .explore-menu .wds-dropdown__toggle>a>span { display: block; }

#WikiaBar, a[data-tracking-label="start-a-wiki"] { display: none; }

.main-container { min-width: unset; margin-left: 0; width: 100%; }

.mcf-mosaic { flex-direction: column; }

.rail-module, .rail-sticky-module, .sticky-modules-wrapper { display: block; width: 100%; max-width: unset; }

.mcf-column { flex-basis: 100%; width: 100%; }

.toc { width: 100%; clear: both; }

/* .global-footer { z-index: 99999999; /* immersive effect * / padding-top: 1em; }

.global-footer__content { padding-top: 12px; } */ }

@media only screen and (max-width: 570px) { .resizable-container { width: 98%!important }

.page-counter { display: none; } /*  .page-side-tools { top: 80%; } */  .global-navigation { flex-direction: row; -webkit-box-orient: horizontal; box-orient: horizontal; }

.theme-fandomdesktop-dark a.global-navigation__logo { z-index: 800 }

.global-navigation__search { margin: auto; }

.fandom-sticky-header__sitename { font-size: 14px; }

.fandom-community-header__top-container { justify-content: space-between; }

.fandom-community-header .fandom-community-header__local-navigation .medium-navigation .wds-dropdown:first-child .wds-tabs__tab-label span { display: none; }

.fandom-community-header .fandom-community-header__local-navigation .medium-navigation .wds-dropdown:first-child .wds-dropdown__content { left: 6em; } /* Page title */ .page-header__bottom { display: grid; grid-template-rows: auto auto; grid-template-columns: auto; grid-template-areas: "a""b"; }

.page-header__title-wrapper { grid-area: a;   text-align: center; } .page-header .page-header__title { font-size: 32px; font-weight: 500; text-align: center }

.page-header__title-actions { grid-area: b; }

.page-header__actions { justify-content: center; } /* Page content */ .page__main, .page__right-rail, .mcf-wrapper { padding-left: 20px; padding-right: 20px; } .page__main { padding: 24px 13px; } .page-side-tools__wrapper { left: 94%; }

.sticky-toc.toc { right: 48px; left: unset; } .fandom-community-header .wiki-tools .wds-dropdown .wiki-tools-dropdown-separator { display: block; }  .fandom-community-header a.wds-button.wds-is-secondary.wiki-tools__theme-switch { border-radius: 3px 0 0 3px; }

.wiki-tools>.wds-dropdown .wiki-tool-in-dropdown { display: block; }

.wiki-tools>.wds-button.is-hidden-on-smaller-breakpoints { display: none; } /* Search modal */ .search-modal__content { height: 90%; width: 90%; }

.search-modal { top: 20px; } .search-modal .SearchInput-module_form__139GD .wds-button:last-child { width: 30% } .search-modal .SearchInput-module_form__139GD .wds-button:last-child::after { content: "Search"; margin: 0 6px; }

/* Notif full width */ div.global-navigation > div.global-navigation__bottom > div.notifications > div.wds-dropdown > div.wds-dropdown__content { width: 100%; left: 0 !important; right: 0 !important; }

/*    * ====||||====    * User pages */ #userProfileApp .user-identity-avatar { margin: auto; }

#userProfileApp .user-identity-box { flex-direction: column; }

#userProfileApp .user-identity-header__attributes { clear: both; margin: auto; }

#userProfileApp .user-identity-header { flex-direction: column; }

#userProfileApp .user-identity-header__actions { text-align: center; margin: auto; padding: 10px; }

#userProfileApp .user-profile-navigation { overflow: auto; }

#userProfileApp ul.user-identity-stats, #userProfileApp .user-identity-bio, #userProfileApp .user-identity-social { text-align: center; margin: auto; }

#userProfileApp .user-identity-header__attributes { display: flex; flex-direction: column; text-align: center; min-width: unset; }

body.skin-fandomdesktop #userProfileApp .user-identity-header__tag { width: fit-content; margin: 0.4em auto; }

body.skin-fandomdesktop #userProfileApp .modal-wrapper__main { flex-direction: column; }

body.skin-fandomdesktop #userProfileApp .user-profile-editor__bio-field .wds-input__field { height: 7em !important; }

body.fandom-sticky-header-visible .global-navigation .notifications .wds-dropdown .wds-dropdown__content { top: 46px !important; z-index: 99999; } /* CurseProfile */ .curseprofile .leftcolumn,.curseprofile .rightcolumn { width: 100%; } body.skin-fandomdesktop .curseprofile .userinfo { display: flex; flex-direction: column; align-items: center; } body.skin-fandomdesktop .curseprofile .mainavatar { margin-right: 0; } body.skin-fandomdesktop .curseprofile .headline,body.skin-fandomdesktop .curseprofile #profile-user-fields { text-align: center; } .is-gamepedia .comments .avatar { margin-right: 40px; } .curseprofile .rightfloat { float: none; text-align: center; } .is-gamepedia .friends li:not(:last-of-type) { margin-bottom: 10px; } .is-gamepedia .friends li img { height: 42px; width: 42px; margin-right: 5px; } /* No gallery margin */ .page-content ul.gallery { margin-left: 0; } /* Wiki search */ .WikiaPageContentWrapper .unified-search__result__community, .mw-body-content .unified-search__result__community, .page-content .unified-search__result__community { grid-template-areas: "thumbnail thumbnail" "content content"; grid-template-columns: auto auto; } /* Portable Infoboxes */ .portable-infobox { float: none; margin: auto; clear: both; width: 93% !important; }

.portable-infobox .pi-font, .portable-infobox .pi-data-label { font-size: 14px; } /* Preferences (this style can be loaded with Stylus/Stylish via Kiwi browser) */ #mw-htmlform-info > .oo-ui-fieldLayout-align-top > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header { display: block; width: 100%; font-weight: 450; } #mw-htmlform-info > .oo-ui-fieldLayout.oo-ui-fieldLayout-align-top > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field { display: block; width: 100%; } .skin-fandomdesktop #preferences { padding: 0; } .skin-fandomdesktop .oo-ui-tabSelectWidget-framed { display: flex; } .skin-fandomdesktop #preferences .mw-prefs-buttons { margin-left: 0; margin-right: 0; }

/*  * Fix for notifs and search being scrollable. *  * NOTE: This fix uses :has, which has very limited browser support (as of march 2022): *  * Chrome version => 105 * Chrome Canary version => 93.x (from > 2 June 2021) with BOTH of the following runtime test feature flags: ** chrome://flags/#enable-experimental-web-platform-features set to "Enabled" AND; ** --enable-blink-features=CSSPseudoHas as a command line switch * Safari version => v15.4 *  * Thanks to User:Polymeric */

@supports (selector(:has(works))) { html:has(.notifications > .wds-dropdown.wds-is-active), html:has(.search-modal) { overflow: hidden; }

.global-navigation:has(.notifications > .wds-dropdown.wds-is-active) + .main-container .page-side-tools__wrapper, .global-navigation:has(.notifications > .wds-dropdown.wds-is-active) + .main-container .portable-infobox :is(.wds-tabs__wrapper.right-arrow-visible .wds-tabs__arrow-right, .wds-tabs__wrapper.left-arrow-visible .wds-tabs__arrow-left) { visibility: hidden; }

.global-navigation:has(.notifications > .wds-dropdown.wds-is-active) { position: fixed; } } }