m (additional tweaks to notifications) |
m (Fixed-ish Talk:ResponsiveMobile#Top Navigation is Unusable?... hopefully this won't break anything else) |
||
(136 intermediate revisions by 6 users not shown) | |||
Line 1: | Line 1: | ||
− | /* |
+ | /* <pre> |
+ | * |
||
* A responsive mobile interface for FandomDesktop. |
* A responsive mobile interface for FandomDesktop. |
||
+ | * |
||
− | * @author dr03ramos |
||
+ | * 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]] |
||
*/ |
*/ |
||
+ | |||
+ | /* CSS Imports */ |
||
+ | @import url("/load.php?articles=u:dev:MediaWiki:ResponsiveMobile/editor.css&only=styles&mode=articles"); |
||
+ | /* So I don't have to recreate the global nav anymore */ |
||
+ | @import url("/load.php?mode=articles&articles=u:dev:MediaWiki:TopGlobalNav.css&only=styles") |
||
+ | (max-width: 785px); |
||
@media only screen and (max-width: 1023px) { |
@media only screen and (max-width: 1023px) { |
||
− | + | .sticky-modules-wrapper { |
|
− | + | display: flex; |
|
− | + | justify-content: space-between; |
|
− | + | } |
|
+ | |||
− | .rail-module__list { |
||
+ | .rail-module__list { |
||
− | grid-template-columns: unset |
||
+ | grid-template-columns: unset; |
||
− | } |
||
+ | } |
||
− | .rail-module, |
||
+ | |||
− | .rail-sticky-module, |
||
− | + | .rail-module, |
|
+ | .rail-sticky-module, |
||
− | flex-basis: 48%; |
||
+ | .mcf-column { |
||
− | width: 48%; |
||
+ | flex-basis: 48%; |
||
− | } |
||
+ | width: 48%; |
||
− | .global-navigation__bottom .wds-dropdown { |
||
+ | } |
||
− | margin-left: 0; |
||
+ | |||
− | margin-right: 10px |
||
+ | .mcf-column:nth-child(2) { |
||
− | } |
||
+ | display: none; |
||
− | .mcf-column:nth-child(2) { |
||
+ | } |
||
− | display: none; |
||
+ | |||
− | } |
||
− | + | .global-navigation__bottom .wds-dropdown__toggle { |
|
− | + | width: unset; |
|
− | + | } |
|
+ | |||
− | .right-rail-wrapper { |
||
+ | .right-rail-wrapper { |
||
− | padding: 0 |
||
− | + | padding: 0; |
|
+ | } |
||
− | .page__main, |
||
+ | |||
− | .page__right-rail, |
||
+ | .page__main, |
||
− | .mcf-wrapper { |
||
+ | .page__right-rail, |
||
− | padding-left: 26px; |
||
+ | .mcf-wrapper { |
||
− | padding-right: 26px |
||
+ | padding-left: 26px; |
||
− | } |
||
+ | padding-right: 26px; |
||
− | .page-header__action-button.has-label .wds-icon { |
||
+ | } |
||
− | margin-right: 6px !important |
||
+ | |||
− | } |
||
+ | .page-header__action-button.has-label .wds-icon { |
||
− | .page-side-tools__wrapper { |
||
+ | margin-right: 6px !important; |
||
− | left: -5px |
||
− | + | } |
|
+ | |||
+ | .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 |
||
+ | .wiki-tools |
||
+ | a.wds-button.wds-is-secondary:not(.is-hidden-on-smaller-breakpoints) { |
||
+ | border-top-left-radius: 3px; |
||
+ | border-bottom-left-radius: 3px; |
||
+ | } |
||
+ | |||
+ | .fandom-sticky-header |
||
+ | .wiki-tools |
||
+ | a.wds-button.wds-is-secondary:not(.is-hidden-on-smaller-breakpoints) |
||
+ | ~ a.wds-button { |
||
+ | border-top-left-radius: 0; |
||
+ | border-bottom-left-radius: 0; |
||
+ | } |
||
+ | |||
+ | .fandom-community-header |
||
+ | .wiki-tools |
||
+ | a.wds-button.wds-is-secondary:not(.is-hidden-on-smaller-breakpoints) { |
||
+ | border-top-left-radius: 3px; |
||
+ | border-bottom-left-radius: 3px; |
||
+ | } |
||
+ | |||
+ | .fandom-community-header |
||
+ | .wiki-tools |
||
+ | a.wds-button.wds-is-secondary:not(.is-hidden-on-smaller-breakpoints) |
||
+ | ~ a.wds-button { |
||
+ | border-top-left-radius: 0; |
||
+ | border-bottom-left-radius: 0; |
||
+ | } |
||
} |
} |
||
+ | |||
@media only screen and (max-width: 785px) { |
@media only screen and (max-width: 785px) { |
||
+ | /* |
||
− | .global-navigation { |
||
− | + | * ====||||==== |
|
− | + | * Global Navigation |
|
− | + | * |
|
+ | * Replaced partially with [[TopGlobalNav]]. |
||
− | position: initial |
||
− | + | */ |
|
+ | |||
− | .global-navigation, |
||
− | + | .global-navigation { |
|
+ | position: relative !important; |
||
− | .global-navigation__bottom { |
||
− | + | padding: 0 12px; |
|
− | + | height: 55px; |
|
− | + | } |
|
+ | |||
− | .global-navigation__top { |
||
+ | .global-navigation .global-navigation__top, |
||
− | flex-direction: column; |
||
+ | .global-navigation .global-navigation__bottom { |
||
− | padding: 0; |
||
− | + | padding: 0; |
|
− | + | gap: 0; |
|
+ | } |
||
− | .global-navigation__links { |
||
+ | |||
− | display: inline-flex |
||
+ | .global-navigation .global-navigation__top { |
||
− | } |
||
+ | gap: 0; |
||
− | .global-navigation__link, |
||
+ | } |
||
− | .global-navigation .wds-dropdown { |
||
+ | |||
− | margin: 0 8px; |
||
+ | .global-navigation .global-navigation__top, |
||
− | } |
||
+ | .global-navigation .global-navigation__top .global-navigation__nav { |
||
− | a.global-navigation__logo { |
||
− | + | width: 100%; |
|
− | + | } |
|
+ | |||
− | .global-navigation__logo .wds-icon { |
||
+ | .global-navigation .global-navigation__top .global-navigation__logo { |
||
− | height: 40px; |
||
+ | margin-right: auto; |
||
− | } |
||
+ | z-index: 400; |
||
− | .global-navigation__bottom { |
||
+ | } |
||
− | padding: 13px 0 0 0; |
||
+ | |||
− | bottom: unset!important; |
||
+ | .global-navigation .global-navigation__top .global-navigation__search { |
||
− | right: 0; |
||
− | + | margin: 0.3em !important; |
|
− | + | } |
|
+ | |||
− | .wds-dropdown.wds-open-to-right:after, |
||
+ | .global-navigation |
||
− | .wds-dropdown.wds-open-to-right:before, |
||
+ | .global-navigation__top |
||
− | a[data-tracking-label="start-a-wiki"], |
||
+ | .global-navigation__search |
||
− | .fandom-sticky-header .fandom-community-header__local-navigation, |
||
− | + | .wds-icon { |
|
+ | height: 24px; |
||
− | display: none!important |
||
− | + | width: 24px; |
|
+ | } |
||
− | .global-navigation__search { |
||
+ | |||
− | margin: auto; |
||
+ | .global-navigation .global-navigation__top .global-navigation__links { |
||
− | } |
||
+ | display: none; |
||
− | .global-navigation__logo, |
||
+ | } |
||
− | .global-navigation__links { |
||
+ | |||
− | margin: 0 5px |
||
+ | .global-navigation .global-navigation__bottom { |
||
− | } |
||
+ | justify-content: flex-end; |
||
− | .global-navigation__logo span { |
||
− | + | align-items: center; |
|
− | + | } |
|
+ | |||
− | .main-container { |
||
+ | .global-navigation .global-navigation__bottom.is-overflowing { |
||
− | min-width: unset; |
||
− | + | -webkit-box-shadow: none; |
|
− | + | box-shadow: none; |
|
− | + | } |
|
+ | |||
− | .fandom-sticky-header, |
||
+ | .global-navigation |
||
− | .search-modal, |
||
+ | .global-navigation__bottom |
||
− | .search-modal:before { |
||
+ | .global-navigation__icon |
||
− | left: 0 |
||
− | + | .wds-avatar { |
|
+ | --wds-avatar-border-color: var(--fandom-global-nav-link-color) !important; |
||
− | .fandom-sticky-header__sitename { |
||
+ | } |
||
− | display: block; |
||
+ | |||
− | } |
||
+ | .global-navigation .global-navigation__bottom .global-navigation__icon { |
||
− | .fandom-sticky-header { |
||
+ | color: var(--fandom-global-nav-link-color) !important; |
||
− | min-width: unset; |
||
− | + | } |
|
+ | |||
− | .global-navigation .notifications { |
||
+ | .global-navigation .global-navigation__bottom .wds-dropdown { |
||
− | margin-bottom: 0 |
||
− | + | margin-left: 0; |
|
− | + | padding: 5px; |
|
+ | } |
||
− | flex-direction: column |
||
+ | |||
− | } |
||
+ | .global-navigation .global-navigation__bottom .wds-dropdown .wds-avatar { |
||
− | .rail-module, |
||
+ | --wds-avatar-size: 24px; |
||
− | .rail-sticky-module, |
||
+ | } |
||
− | .sticky-modules-wrapper { |
||
+ | |||
− | display: block; |
||
+ | .global-navigation .global-navigation__bottom .notifications { |
||
− | width: 100%; |
||
− | + | margin: 0; |
|
− | + | padding: 0; |
|
+ | } |
||
− | .mcf-column { |
||
+ | |||
− | flex-basis: 100%; |
||
+ | .global-navigation .global-navigation__bottom .notifications__counter { |
||
− | width: 100%; |
||
+ | background: var(--fandom-global-nav-link-color); |
||
− | } |
||
+ | } |
||
− | .global-navigation .wds-dropdown__content { |
||
+ | |||
− | bottom: auto !important; |
||
+ | .global-navigation |
||
− | top: 66px !important; |
||
+ | .global-navigation__bottom |
||
− | right: 12px !important; |
||
+ | div.notifications |
||
− | left: auto !important; |
||
− | + | .wds-dropdown |
|
− | + | .wds-dropdown__content { |
|
− | + | top: 55px !important; |
|
+ | } |
||
− | left: 0 !important; |
||
+ | |||
− | bottom: unset!important; |
||
+ | .main-container { |
||
− | width: 100%!important; |
||
− | + | margin-top: 0 !important; |
|
+ | } |
||
− | position: absolute!important; |
||
+ | |||
− | } |
||
− | + | /* |
|
+ | * ====||||==== |
||
− | .fandom-community-header__image { |
||
− | + | * Sticky header |
|
− | + | */ |
|
− | + | .fandom-sticky-header { |
|
− | + | left: 0; |
|
− | + | top: -46px; |
|
+ | /* Fix to rm */ |
||
− | .fandom-community-header__local-navigation { |
||
+ | } |
||
− | grid-area: c |
||
+ | |||
− | } |
||
+ | .fandom-sticky-header__sitename { |
||
− | .fandom-community-header__local-navigation .wds-tabs__tab-label { |
||
− | + | display: block; |
|
− | + | } |
|
+ | |||
− | .fandom-community-header { |
||
+ | .fandom-sticky-header { |
||
− | grid-template-areas: "a" "b" "c"; |
||
+ | min-width: unset; |
||
− | grid-template-columns: none |
||
− | + | } |
|
+ | |||
− | .community-header-wrapper { |
||
+ | .fandom-sticky-header .fandom-community-header__local-navigation { |
||
− | display: block; |
||
− | + | display: none; |
|
+ | } |
||
− | height: auto |
||
+ | |||
− | } |
||
+ | /* Making the notifs position with the sticky header */ |
||
− | /* Portable Infoboxes */ |
||
+ | .fandom-sticky-header.is-visible |
||
− | .portable-infobox { |
||
− | + | + .global-navigation |
|
+ | .global-navigation__bottom |
||
− | margin: auto; |
||
+ | .notifications |
||
− | clear: both; |
||
+ | .wds-dropdown |
||
− | width: 87%!important; |
||
+ | .wds-dropdown__content { |
||
− | } |
||
− | + | top: 46px; |
|
+ | height: 94%; |
||
− | #userProfileApp .user-identity-avatar { |
||
+ | } |
||
− | margin: auto; |
||
+ | |||
− | } |
||
+ | /* |
||
− | #userProfileApp .user-identity-box { |
||
+ | * ====||||==== |
||
− | flex-direction: column; |
||
+ | * The community header thingy, after the lobal nav |
||
− | } |
||
+ | */ |
||
− | #userProfileApp .user-identity-header__attributes { |
||
+ | .community-header-wrapper { |
||
− | clear: both; |
||
− | + | width: 95%; |
|
+ | margin-left: auto; |
||
− | } |
||
+ | margin-right: auto; |
||
− | #userProfileApp .user-identity-header { |
||
− | + | margin-top: 12px; |
|
− | + | height: auto; |
|
+ | } |
||
− | #userProfileApp .user-identity-header__actions { |
||
+ | |||
− | text-align: inherit; |
||
+ | .fandom-community-header { |
||
− | margin: auto; |
||
− | + | grid-template-areas: unset; |
|
+ | grid-template-columns: min-content 1fr; |
||
− | } |
||
+ | grid-template-rows: auto auto; |
||
− | #userProfileApp .user-profile-navigation { |
||
+ | } |
||
− | overflow: auto; |
||
+ | |||
− | } |
||
+ | .fandom-community-header__image { |
||
− | #userProfileApp ul.user-identity-stats, |
||
+ | grid-column: 1; |
||
− | #userProfileApp .user-identity-bio, |
||
+ | } |
||
− | #userProfileApp .user-identity-social { |
||
+ | |||
− | text-align: center; |
||
+ | .fandom-community-header__top-container { |
||
− | margin: auto; |
||
− | + | grid-column: 2; |
|
+ | } |
||
− | #userProfileApp .user-identity-header__attributes { |
||
+ | |||
− | display: flex; |
||
+ | .fandom-community-header__local-navigation { |
||
− | flex-direction: column; |
||
− | + | grid-column: 1/3; |
|
− | + | grid-row: 2; |
|
+ | } |
||
− | body.skin-fandomdesktop #userProfileApp .user-identity-header__tag { |
||
+ | |||
− | width: fit-content; |
||
+ | .fandom-community-header__image img { |
||
− | margin: 0.4em auto; |
||
+ | max-height: 45px; |
||
− | } |
||
+ | max-width: 100px; |
||
− | /*Sitenotice/Notifs */ |
||
+ | } |
||
− | .notifications-placeholder { |
||
+ | |||
− | width: fit-content; |
||
+ | .fandom-community-header__background.fullScreen { |
||
− | bottom: 1px; |
||
− | + | width: 100%; |
|
− | + | } |
|
+ | |||
− | .sitenotice { |
||
+ | .fandom-community-header__local-navigation .wds-tabs { |
||
− | width: fit-content; |
||
− | + | 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; |
||
+ | } |
||
+ | |||
+ | #WikiaRail.is-ready { |
||
+ | flex-flow: column nowrap!important; |
||
+ | max-height: none!important; |
||
+ | } |
||
+ | |||
+ | .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: 470px) { |
||
+ | @media only screen and (max-width: 570px) { |
||
− | .page-counter, |
||
+ | .resizable-container { |
||
− | .global-navigation__links { |
||
+ | width: 98% !important; |
||
− | display: none |
||
+ | } |
||
+ | |||
+ | .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; |
||
+ | } |
||
+ | |||
+ | .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 { |
||
+ | text-align: center; |
||
+ | margin: auto; |
||
+ | } |
||
+ | #userProfileApp .user-identity-social { |
||
+ | justify-content: center; |
||
+ | } |
||
+ | #userProfileApp .user-identity-social > li:last-child { |
||
+ | margin: 0; |
||
+ | } |
||
+ | |||
+ | #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; |
||
+ | } |
||
+ | |||
+ | .search-modal, .search-modal::before { |
||
+ | top: 55px; |
||
+ | } |
||
+ | |||
+ | /* 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 { |
||
+ | .global-navigation:has(.notifications > .wds-dropdown.wds-is-active) |
||
− | flex-direction: row; |
||
+ | + .main-container |
||
− | -webkit-box-orient: horizontal; |
||
− | + | .page-side-tools__wrapper, |
|
+ | .global-navigation:has(.notifications > .wds-dropdown.wds-is-active) |
||
− | } |
||
+ | + .main-container |
||
− | .fandom-sticky-header__sitename { |
||
− | + | .portable-infobox |
|
+ | :is(.wds-tabs__wrapper.right-arrow-visible |
||
− | } |
||
+ | .wds-tabs__arrow-right, .wds-tabs__wrapper.left-arrow-visible |
||
− | .fandom-community-header__top-container { |
||
− | + | .wds-tabs__arrow-left) { |
|
+ | visibility: hidden; |
||
} |
} |
||
+ | |||
− | .fandom-community-header .fandom-community-header__local-navigation .medium-navigation .wds-dropdown:first-child .wds-tabs__tab-label span { |
||
+ | .global-navigation:has(.notifications > .wds-dropdown.wds-is-active) { |
||
− | display: none |
||
+ | position: fixed; |
||
− | } |
||
− | .fandom-community-header .fandom-community-header__local-navigation .medium-navigation .wds-dropdown:first-child .wds-dropdown__content { |
||
− | left: 6em |
||
− | } |
||
− | .page-header__bottom { |
||
− | display: grid; |
||
− | grid-template-rows: auto auto; |
||
− | grid-template-columns: auto; |
||
− | grid-template-areas: "b" "a" |
||
− | } |
||
− | .page-header__title-wrapper { |
||
− | grid-area: a |
||
− | } |
||
− | .page-header__title-actions { |
||
− | grid-area: b |
||
− | } |
||
− | .page-header__actions { |
||
− | justify-content: flex-end |
||
− | } |
||
− | .page__main, |
||
− | .page__right-rail, |
||
− | .mcf-wrapper { |
||
− | padding-left: 20px; |
||
− | padding-right: 20px |
||
− | } |
||
− | .page-side-tools__wrapper { |
||
− | left: 94% |
||
− | } |
||
− | .sticky-toc.toc { |
||
− | right: 48px; |
||
− | left: unset |
||
} |
} |
||
+ | } |
||
} |
} |
Latest revision as of 16:46, 3 October 2023
/* <pre>
*
* 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]]
*/
/* CSS Imports */
@import url("/load.php?articles=u:dev:MediaWiki:ResponsiveMobile/editor.css&only=styles&mode=articles");
/* So I don't have to recreate the global nav anymore */
@import url("/load.php?mode=articles&articles=u:dev:MediaWiki:TopGlobalNav.css&only=styles")
(max-width: 785px);
@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
.wiki-tools
a.wds-button.wds-is-secondary:not(.is-hidden-on-smaller-breakpoints) {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.fandom-sticky-header
.wiki-tools
a.wds-button.wds-is-secondary:not(.is-hidden-on-smaller-breakpoints)
~ a.wds-button {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.fandom-community-header
.wiki-tools
a.wds-button.wds-is-secondary:not(.is-hidden-on-smaller-breakpoints) {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.fandom-community-header
.wiki-tools
a.wds-button.wds-is-secondary:not(.is-hidden-on-smaller-breakpoints)
~ a.wds-button {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
@media only screen and (max-width: 785px) {
/*
* ====||||====
* Global Navigation
*
* Replaced partially with [[TopGlobalNav]].
*/
.global-navigation {
position: relative !important;
padding: 0 12px;
height: 55px;
}
.global-navigation .global-navigation__top,
.global-navigation .global-navigation__bottom {
padding: 0;
gap: 0;
}
.global-navigation .global-navigation__top {
gap: 0;
}
.global-navigation .global-navigation__top,
.global-navigation .global-navigation__top .global-navigation__nav {
width: 100%;
}
.global-navigation .global-navigation__top .global-navigation__logo {
margin-right: auto;
z-index: 400;
}
.global-navigation .global-navigation__top .global-navigation__search {
margin: 0.3em !important;
}
.global-navigation
.global-navigation__top
.global-navigation__search
.wds-icon {
height: 24px;
width: 24px;
}
.global-navigation .global-navigation__top .global-navigation__links {
display: none;
}
.global-navigation .global-navigation__bottom {
justify-content: flex-end;
align-items: center;
}
.global-navigation .global-navigation__bottom.is-overflowing {
-webkit-box-shadow: none;
box-shadow: none;
}
.global-navigation
.global-navigation__bottom
.global-navigation__icon
.wds-avatar {
--wds-avatar-border-color: var(--fandom-global-nav-link-color) !important;
}
.global-navigation .global-navigation__bottom .global-navigation__icon {
color: var(--fandom-global-nav-link-color) !important;
}
.global-navigation .global-navigation__bottom .wds-dropdown {
margin-left: 0;
padding: 5px;
}
.global-navigation .global-navigation__bottom .wds-dropdown .wds-avatar {
--wds-avatar-size: 24px;
}
.global-navigation .global-navigation__bottom .notifications {
margin: 0;
padding: 0;
}
.global-navigation .global-navigation__bottom .notifications__counter {
background: var(--fandom-global-nav-link-color);
}
.global-navigation
.global-navigation__bottom
div.notifications
.wds-dropdown
.wds-dropdown__content {
top: 55px !important;
}
.main-container {
margin-top: 0 !important;
}
/*
* ====||||====
* Sticky header
*/
.fandom-sticky-header {
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;
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;
}
#WikiaRail.is-ready {
flex-flow: column nowrap!important;
max-height: none!important;
}
.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;
}
.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 {
text-align: center;
margin: auto;
}
#userProfileApp .user-identity-social {
justify-content: center;
}
#userProfileApp .user-identity-social > li:last-child {
margin: 0;
}
#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;
}
.search-modal, .search-modal::before {
top: 55px;
}
/* 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;
}
}
}