/* ==UserStyle==
@name         Basic Wikia Cleaner
@version      20241014.14.30
@namespace    userstyles.world/user/polycement
@description  Cleans up unnecessary elements on Fandom/Wikia sites, giving the actual content more room to breathe.
@author       polycement
@license      No License
==/UserStyle== */

@-moz-document regexp(".+\\.fandom\\.com.*") {
/*
    Poly's Wikia/Fandom Cleaner 2k21
    (last edit: 14/10/24)

    this was originally hacked together after wikia's 2021 redesign added a sidebar and
    "popular pages" element, crushing the actual page content into a tiny column and rendering
    a lot of wikia sites borderline unusable (specifically the binding of isaac: rebirth wikia,
    which i was using a LOT at the time and previously had very nice custom styling)

    for the most part this just removes a lot of gunk from wikia's theming, with a few
    additional changes added over time that are more based on my own personal preferences

    features:
    - removal of sidebar and "popular pages" element
    - removal of (most) of the garbage wikia added to try and direct people to other wikias
    - removal of ads (ublock catches most of these but why rely on it when i'm in here anyway)
    - floating header fixed to always be visible instead of popping in and out
    - removal of redundant copies of wikia controls (edit, search, etc)
    - restyling of search modal to use each wikia site's custom theming
*/

/*
    hides the following, in order:
    - left-hand sidebar
    - "right rail" (popular pages, etc)
    - "fan feed" (all the other wiki garbage at the bottom)
    - weird negative height element at the top (some kind of weird hack?)
    - banner ad (adblockers catch this one these days but just in case)
    - second copy of search/discuss/theme buttons (explained below)
    - second copy of navigation tools (again, explained below)
    - video after table of contents (this one demands i use !important as it's specifying "display" at the element level)
    - second banner ad (weirdly ublock origin doesn't block this element, just its contents)
    - most of the wikia footer (just a load more useless garbage, but i left the "view mobile site" option just in case)
    - "wikia bar" (that popup on the bottom right with annoying ticker feed type text)
    - inline ads in search results
    - ads at the top and bottom of search results (i think? didn't turn adblocker off to check, it was inserting iframes tho)
    - the "related community" tab to the right of search results
*/
.global-navigation, .page__right-rail, #mixed-content-footer, .fandom-community-header__background,
.top-ads-container, .main-container .wiki-tools, .main-container .fandom-community-header__local-navigation,
#ds_cpp, .bottom-ads-container, .global-footer__content, #WikiaBar, .instant-suggestion,
div[data-s1search="mainline-top"], div[data-s1search="mainline-bottom"], .unified-search__layout__right-rail {
    display: none !important;
}

/* space compensation for the now-missing sidebar element */
html, body, .main-container, .app-wrapper {
    margin-left: 0;
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    height: 100%;
}
.search-modal, .search-modal::before {
    left: 0;
}
.notifications-placeholder {
    left: 18px;
}

/* same deal but for search results */
.page-content .unified-search__layout {
    grid-template-columns: repeat(9,1fr) auto;
}

/*
    fix for backgrounds no longer staying in the right place
    (also gives a more sensible sidebar with the fixed header)
*/
.main-container, .app-wrapper {
    margin-top: 46px;
    position: fixed;
    overflow-y: auto;
    height: calc(100vh - 46px);
    min-height: calc(100vh - 46px);
}

/*
    force the navbar ("sticky header") to display at all times
    this one is more of a personal choice: i've never been a fan of elements that pop in on scroll
    with this always visible we don't need the repeat copies of the navigation and wiki tools,
    which is why they're hidden above
*/
.fandom-sticky-header {
    left: 0;
    transform: translateY(100%);
}

/*
    adjust page headers to compensate for duplicate controls being hidden
    i'm forcing the header to be 80px tall so the (new?) sign up/register buttons don't overlap it
*/
.fandom-community-header__image img {
    height: 80px;
    object-position: center;
}
.fandom-community-header__top-container {
    align-items: center;
}
.fandom-community-header__top-container {
    padding-top: 0;
}

/* fix weird inconsistent spacing at end of comments section */
.CommentList_comment-list__2eFaY {
    padding-bottom: 0;
}
.Comment_wrapper__2mxBn:last-child {
    margin-bottom: 0;
}

/* fix spacing on discussion pages */
.wds-fandom-content-well {
    margin-bottom: 48px;
}
.is-sticky-rail {
    top: 0;
}

/*
    reduce gap between main content and footer on longer pages,
    and make the footer rise up on short pages
*/
.page__main {
    min-height: 0;
}
.global-footer {
    margin-top: auto;
}
    
/*
    fix "view mobile site" link showing the wrong cursor type
    extremely minor but it was REALLY bugging me...
*/
.global-footer__switch-view {
    cursor: pointer;
}

/*
    make edit pages look less weird
    NOTE: this one is kind of involved so i've added more comments for each part
*/
/* override js-based height calculations in favour of just using a flex */
.ve-init-mw-desktopArticleTarget-originalContent {
    height: unset !important;
    flex-grow: 1;
}
.ve-init-mw-desktopArticleTarget-originalContent > div {
    min-height: unset !important;
}
/* parent elements all have to have height 100% for flex approach to work */
.action-edit .resizable-container, .page-is-edit, .page-is-edit .page__main,
.page-is-edit .page__main .page-content {
    height: 100%;
}
/* and this one needs to be a flex (obviously) */
.page-is-edit .page__main .page-content .ve-init-target-source {
    height: 100%;
    display: flex;
    flex-direction: column;
}
/* fix weird margins and padding */
.action-edit .resizable-container {
    padding: 58px 0;
}
.page.page-is-edit {
    margin: 0;
}
.ve-ui-summaryPanel-copyrightWarningFooter {
    margin: 0;
}
.ve-active .skin-fandomdesktop .page-is-edit .page__main {
    padding-bottom: 24px;
}
.page-is-edit .page__main .page-content .ve-init-target-source .ve-ui-summaryPanel {
    margin-bottom: 0;
    padding-bottom: 10px;
}
/* fix weird popup height and overlap issues */
.ve-ui-toolbar {
    z-index: 101;
}
.oo-ui-clippableElement-clippable.oo-ui-popupWidget-body {
    height: unset !important;
    max-height: calc(100vh - 400px) !important;
    overflow-y: auto !important;
}

/*
    adjust search modal styling to bring it in line with the lightbox modal
    (it bothered me that the search modal uses wikia's default (and imo, ugly) styling)
    also change the background overlay for both modals to be black at .7 opacity instead of that weird purple
    NOTE: i see those random strings on the end of the class names - there's a non-zero chance that
    wikia is using styled-components, so i'll have to keep an eye out for those changing in future
*/
.search-modal::before, .lightboxContainer .blackout {
    background-color: rgba(0, 0, 0, .7) !important;
}
.search-modal__content {
    background-color: var(--theme-page-background-color);
    border: 1px solid var(--theme-border-color);
    border-radius: 3px;
}
.search-modal__content, .SearchInput-module_input__1VKWi,
.SearchResults-module_results__p4ucz.wds-list.wds-is-linked > li > a {
    color: var(--theme-page-text-color);
}
.SearchInput-module_form__139GD .wds-button[type="button"] {
    --wds-text-button-label-color: var(--theme-page-text-color);
    --wds-text-button-label-color--hover: var(--theme-page-text-color--hover);
}
.SearchInput-module_form__139GD .wds-button {
  --wds-primary-button-background-color: var(--theme-accent-color);
  --wds-primary-button-background-color--hover: var(--theme-accent-color--hover);
  --wds-primary-button-label-color: var(--theme-accent-label-color);
}
.SearchInput-module_form__139GD {
    border-bottom-color: var(--theme-accent-color);
}
.SearchResults-module_results__p4ucz.wds-list.wds-is-linked > li > a.SearchResults-module_isSelected__3WmRu,
.SearchResults-module_results__p4ucz.wds-list.wds-is-linked > li > a:hover {
    background-color: rgba(var(--theme-link-color--rgb), 0.3);
}
.SearchResults-module_results__p4ucz.wds-list.wds-is-linked > li > a.SearchResults-module_seeAllResults__3cBcn {
    color: var(--theme-link-color);
}
}