☰

Greasy Fork 还支持 简体中文。

Fandom.com – Clean Enhanced Nav [Ath]

Redesigns Wikia.com/Fandom.com and moves community menu to the left side. Removes all panels you don't need. Configurable hiding of panels, menu depth and page size. Unique feature: doesn't break website when logged in.

  1. /* ==UserStyle==
  2. @name           Fandom.com – Clean Enhanced Nav [Ath]
  3. @namespace      athari
  4. @version        1.1.1
  5. @description    Redesigns Wikia.com/Fandom.com and moves community menu to the left side. Removes all panels you don't need. Configurable hiding of panels, menu depth and page size. Unique feature: doesn't break website when logged in.
  6. @author         Athari (https://github.com/Athari)
  7. @homepageURL    https://github.com/Athari/AthariUserCSS
  8. @supportURL     https://github.com/Athari/AthariUserCSS/issues
  9. @license        MIT
  10. @preprocessor   default
  11.  
  12. @var            number   ath-sidebar-width       "Sidebar width"                           [250, 150, 500, 10, 'px']
  13. @var            number   ath-max-content-width   "Max content width"                       [1000, 800, 10000, 10, 'px']
  14. @var            checkbox ath-center-content      "Center content"                          1
  15. @var            range    ath-expand-menu         "Expand menu level (1-6 subitems)"        [2, 1, 4, 1]
  16. @var            checkbox ath-show-left-sidebar   "Show left explore sidebar"               0
  17. @var            checkbox ath-show-right-sidebar  "Show right sidebar (when not logged in)" 1
  18. @var            checkbox ath-show-top-bar        "Show top toolbar"                        0
  19. @var            checkbox ath-show-bottom-bar     "Show bottom social bar"                  0
  20. ==/UserStyle== */
  21.  
  22. @-moz-document domain("fandom.com") {
  23.   :root {
  24.     color-scheme: dark light;
  25.     --ath-top-margin: 110px;
  26.   }
  27.  
  28.   .fandom-sticky-header#community-navigation {
  29.     position: static !important;
  30.     width: auto !important;
  31.     min-width: 0 !important;
  32.     margin: 10px 0 auto 0 !important;
  33.     padding: 0 !important;
  34.     height: auto !important;
  35.     display: grid !important;
  36.     grid-template-columns: 1fr;
  37.     grid-template-rows: auto;
  38.     align-items: flex-start !important;
  39.     gap: 10px !important;
  40.     background: none !important;
  41.     border: none !important;
  42.     transform: none !important;
  43.     .fandom-sticky-header__logo {
  44.       grid-area: 1 / 1;
  45.       img {
  46.         margin: 0;
  47.         width: auto !important;
  48.         max-width: var(--ath-sidebar-width);
  49.         height: auto !important;
  50.         max-height: 300px;
  51.       }
  52.     }
  53.     .fandom-sticky-header__sitename {
  54.       grid-area: 2 / 1;
  55.       max-width: var(--ath-sidebar-width);
  56.       margin: 0;
  57.     }
  58.     .community-navigation__fandom-heart {
  59.       grid-area: 3 / 1;
  60.       width: 40px;
  61.     }
  62.     .search-container {
  63.       grid-area: 3 / 1;
  64.       margin: 0 0 0 50px;
  65.       width: auto;
  66.       min-width: 0;
  67.       .search-app__wrapper {
  68.         width: auto;
  69.         margin: 0;
  70.       }
  71.       .search-app__button {
  72.         display: none;
  73.       }
  74.       .search-app__suggestions-box {
  75.         z-index: 500;
  76.       }
  77.     }
  78.     .sign-in {
  79.       grid-area: 4 / 1;
  80.       margin: 0 auto 0 0;
  81.       .sign-in__dropdown-content {
  82.         inset-inline: 0 auto;
  83.         z-index: 500;
  84.       }
  85.     }
  86.     .wiki-tools {
  87.       grid-area: 4 / 1;
  88.     }
  89.     .global-action__user {
  90.       grid-area: 4 / 1;
  91.       margin: 0 auto 0 0;
  92.     }
  93.     .global-action-notifications {
  94.       grid-area: 4 / 1;
  95.       margin: 0 auto 0 40px;
  96.     }
  97.     .fandom-community-header__local-navigation {
  98.       grid-area: 5 / 1;
  99.       margin: 0;
  100.       > .wds-tabs {
  101.         display: flex;
  102.         flex-flow: column;
  103.         align-items: stretch;
  104.         ::before, ::after {
  105.           display: none;
  106.         }
  107.         .wds-dropdown:not(.explore-menu) {
  108.           display: flex;
  109.           flex-flow: column;
  110.           align-items: stretch;
  111.           margin: 5px 0;
  112.           padding: 8px 0;
  113.           background: var(--wds-dropdown-background-color);
  114.           color: var(--wds-dropdown-linked-item-color);
  115.           border-color: var(--wds-dropdown-border-color);
  116.           border-radius: 10px;
  117.           .wds-tabs__tab-label {
  118.             display: flex;
  119.             height: auto;
  120.             max-width: none;
  121.             a {
  122.               flex: 1;
  123.               padding: 10px 10px;
  124.               text-decoration: none;
  125.               &:hover {
  126.                 background: var(--wds-dropdown-linked-item-background-color);
  127.                 color: var(--wds-dropdown-linked-item-color);
  128.               }
  129.             }
  130.             .wds-dropdown__toggle-chevron {
  131.               display: none !important;
  132.             }
  133.           }
  134.           .wds-dropdown__content {
  135.             position: static;
  136.             width: auto;
  137.             min-width: 0;
  138.             max-width: none;
  139.             margin: 0;
  140.             padding: 0;
  141.             display: block;
  142.             transform: none;
  143.             border: none;
  144.             border-radius: 10px;
  145.             > li {
  146.               padding: 0 0 0 20px;
  147.             }
  148.           }
  149.           .wds-dropdown-level-nested__content {
  150.             min-width: min(var(--ath-sidebar-width), 150px);
  151.           }
  152.           @container style(--ath-expand-menu: 2) or style(--ath-expand-menu: 3) or style(--ath-expand-menu: 4) {
  153.             .wds-dropdown-level-nested__toggle[data-tracking="custom-level-2"]:not(:has(+ div > ul > li:nth-child(7))) {
  154.               svg {
  155.                 display: none;
  156.               }
  157.             }
  158.             [data-tracking="custom-level-2"] + .wds-dropdown-level-nested__content:not(:has(> ul > li:nth-child(7))) {
  159.               position: static;
  160.               width: auto;
  161.               min-width: 0;
  162.               max-width: none;
  163.               margin: 0;
  164.               padding: 0;
  165.               display: block;
  166.               transform: none;
  167.               border: none;
  168.               border-radius: 10px;
  169.             }
  170.           }
  171.           @container style(--ath-expand-menu: 3) or style(--ath-expand-menu: 4) {
  172.             .wds-dropdown-level-nested__toggle[data-tracking="custom-level-3"]:not(:has(+ div > ul > li:nth-child(7))) {
  173.               svg {
  174.                 display: none;
  175.               }
  176.             }
  177.             [data-tracking="custom-level-3"] + .wds-dropdown-level-nested__content:not(:has(> ul > li:nth-child(7))) {
  178.               position: static;
  179.               width: auto;
  180.               min-width: 0;
  181.               max-width: none;
  182.               margin: 0;
  183.               padding: 0;
  184.               display: block;
  185.               transform: none;
  186.               border: none;
  187.               border-radius: 10px;
  188.             }
  189.           }
  190.           @container style(--ath-expand-menu: 4) {
  191.             .wds-dropdown-level-nested__toggle[data-tracking="custom-level-4"]:not(:has(+ div > ul > li:nth-child(7))) {
  192.               svg {
  193.                 display: none;
  194.               }
  195.             }
  196.             [data-tracking="custom-level-4"] + .wds-dropdown-level-nested__content:not(:has(> ul > li:nth-child(7))) {
  197.               position: static;
  198.               width: auto;
  199.               min-width: 0;
  200.               max-width: none;
  201.               margin: 0;
  202.               padding: 0;
  203.               display: block;
  204.               transform: none;
  205.               border: none;
  206.               border-radius: 10px;
  207.             }
  208.           }
  209.         }
  210.         .wds-dropdown.explore-menu {
  211.           .wds-dropdown__content {
  212.             inset-inline: 0 auto;
  213.             transform: none;
  214.             z-index: 500;
  215.           }
  216.         }
  217.         .wds-tabs__tab {
  218.           margin: 0 10px;
  219.         }
  220.       }
  221.     }
  222.   }
  223.  
  224.   body {
  225.     display: grid !important;
  226.     grid-template-areas:
  227.       "r1a sidebar main   rail r1b"
  228.       "r2a footer  footer rail r2b";
  229.     grid-template-columns: minmax(20px, 1fr) var(--ath-sidebar-width) var(--ath-max-content-width) auto minmax(20px, 1fr);
  230.     grid-template-rows: 1fr auto;
  231.     @container style(--ath-center-content: 1) {
  232.       grid-template-areas:
  233.         "r1a sidebar main   rail    r1b"
  234.         "r2a footer  footer footer  r2b";
  235.       grid-template-columns: minmax(20px, 1fr) var(--ath-sidebar-width) var(--ath-max-content-width) var(--ath-sidebar-width) minmax(20px, 1fr);
  236.     }
  237.     .community-navigation#community-navigation {
  238.       grid-area: sidebar;
  239.     }
  240.     .main-container {
  241.       display: contents;
  242.       > :not(:is(.fandom-community-header__background, .resizable-container, .global-footer)) {
  243.         display: none !important;
  244.       }
  245.       .fandom-community-header__background {
  246.         grid-area: 1 / 1 / 1 / span all;
  247.       }
  248.       .resizable-container {
  249.         display: contents !important;
  250.         > :not(.page, .community-header-wrapper) {
  251.           display: none !important;
  252.         }
  253.         .community-header-wrapper { /* sticky disabled unless this is out ofscreen */
  254.           position: absolute;
  255.           top: -999999px;
  256.         }
  257.         .page {
  258.           display: contents !important;
  259.           .page__main {
  260.             grid-area: main;
  261.             margin: var(--ath-top-margin) 0px auto 30px;
  262.             border-radius: 10px;
  263.           }
  264.           .page__right-rail {
  265.             grid-area: rail;
  266.             align-self: flex-start !important;
  267.             position: relative !important;
  268.             margin: var(--ath-top-margin) 0px 0px 30px;
  269.             width: var(--ath-sidebar-width) !important;
  270.             max-width: var(--ath-sidebar-width) !important;
  271.             height: auto !important;
  272.             min-height: 0 !important;
  273.             border-radius: 10px !important;
  274.             #WikiaAdInContentPlaceHolder,
  275.             .render-new-wiki-recommendations,
  276.             .rail-module,
  277.             .right-rail-wrapper {
  278.               display: block !important;
  279.               width: auto !important;
  280.               height: auto !important;
  281.             }
  282.             .alice-carousel__stage {
  283.               flex-wrap: wrap !important;
  284.               gap: 10px;
  285.             }
  286.             .alice-carousel__arrow {
  287.               display: none !important;
  288.             }
  289.             .alice-carousel__stage-item,
  290.             .slider-item {
  291.               padding: 0 !important;
  292.               width: auto !important;
  293.             }
  294.           }
  295.           .page__right-rail.is-rail-hidden {
  296.             width: 0 !important;
  297.             .right-rail-toggle {
  298.               position: relative !important;
  299.               left: -57px !important;
  300.             }
  301.           }
  302.         }
  303.       }
  304.       .global-footer {
  305.         grid-area: footer;
  306.       }
  307.     }
  308.   }
  309.   html.is-content-expanded body {
  310.     grid-template-columns: 20px var(--ath-sidebar-width) 1fr 20px;
  311.   }
  312.   .notifications-placeholder {
  313.     z-index: 1000;
  314.   }
  315.   
  316.   @container style(--ath-show-left-sidebar: 0) {
  317.     .global-explore-navigation#global-explore-navigation {
  318.       display: none !important;
  319.     }
  320.   }
  321.   @container style(--ath-show-right-sidebar: 0) {
  322.     .page__right-rail:not(:has(.right-rail-toggle)) {
  323.       display: none !important;
  324.     }
  325.   }
  326.   @container style(--ath-show-top-bar: 0) {
  327.     body:not(:has(.global-action-notifications)) {
  328.       .global-top-navigation#global-top-navigation {
  329.         display: none !important;
  330.       }
  331.     }
  332.     body:has(.global-action-notifications) {
  333.       .global-top-navigation#global-top-navigation {
  334.         position: absolute !important;
  335.         height: 0;
  336.         > a {
  337.           height: 0;
  338.         }
  339.         .search-container {
  340.           display: none;
  341.         }
  342.         .global-top-navigation__action-wrapper {
  343.           margin-top: -45px !important;
  344.         }
  345.         .navigation-tab,
  346.         #notifications__content {
  347.           top: 0 !important;
  348.           height: 100% !important;
  349.         }
  350.       }
  351.     }
  352.     .fandom-community-header__background {
  353.       transform: none !important;
  354.     }
  355.     .global-explore-navigation {
  356.       top: 0px !important;
  357.     }
  358.   }
  359.   @container style(--ath-show-bottom-bar: 0) {
  360.     #WikiaBar {
  361.       display: none !important;
  362.     }
  363.   }
  364.  
  365.   #rail-boxad-wrapper,
  366.   .gpt-ad {
  367.     display: none;
  368.   }
  369. }