☰

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.

目前为 2025-02-15 提交的版本。查看 最新版本。

  1. /* ==UserStyle==
  2. @name           Fandom.com – Clean Enhanced Nav [Ath]
  3. @namespace      athari
  4. @version        1.0.0
  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) {
  251.           display: none !important;
  252.         }
  253.         .page {
  254.           display: contents !important;
  255.           .page__main {
  256.             grid-area: main;
  257.             margin: var(--ath-top-margin) 0px auto 30px;
  258.             border-radius: 10px;
  259.           }
  260.           .page__right-rail {
  261.             grid-area: rail;
  262.             align-self: flex-start !important;
  263.             position: relative !important;
  264.             margin: var(--ath-top-margin) 0px 0px 30px;
  265.             width: var(--ath-sidebar-width) !important;
  266.             max-width: var(--ath-sidebar-width) !important;
  267.             height: auto !important;
  268.             min-height: 0 !important;
  269.             border-radius: 10px !important;
  270.             #WikiaAdInContentPlaceHolder,
  271.             .render-new-wiki-recommendations,
  272.             .rail-module,
  273.             .right-rail-wrapper {
  274.               display: block !important;
  275.               width: auto !important;
  276.               height: auto !important;
  277.             }
  278.             .alice-carousel__stage {
  279.               flex-wrap: wrap !important;
  280.               gap: 10px;
  281.             }
  282.             .alice-carousel__arrow {
  283.               display: none !important;
  284.             }
  285.             .alice-carousel__stage-item,
  286.             .slider-item {
  287.               padding: 0 !important;
  288.               width: auto !important;
  289.             }
  290.           }
  291.           .page__right-rail.is-rail-hidden {
  292.             width: 0 !important;
  293.             .right-rail-toggle {
  294.               position: relative !important;
  295.               left: -57px !important;
  296.             }
  297.           }
  298.         }
  299.       }
  300.       .global-footer {
  301.         grid-area: footer;
  302.       }
  303.     }
  304.   }
  305.   html.is-content-expanded body {
  306.     grid-template-columns: 20px var(--ath-sidebar-width) 1fr 20px;
  307.   }
  308.   .notifications-placeholder {
  309.     z-index: 1000;
  310.   }
  311.   
  312.   @container style(--ath-show-left-sidebar: 0) {
  313.     .global-explore-navigation#global-explore-navigation {
  314.       display: none !important;
  315.     }
  316.   }
  317.   @container style(--ath-show-right-sidebar: 0) {
  318.     .page__right-rail:not(:has(.right-rail-toggle)) {
  319.       display: none !important;
  320.     }
  321.   }
  322.   @container style(--ath-show-top-bar: 0) {
  323.     body:not(:has(.global-action-notifications)) {
  324.       .global-top-navigation#global-top-navigation {
  325.         display: none !important;
  326.       }
  327.     }
  328.     body:has(.global-action-notifications) {
  329.       .global-top-navigation#global-top-navigation {
  330.         position: absolute !important;
  331.         height: 0;
  332.         > a {
  333.           height: 0;
  334.         }
  335.         .search-container {
  336.           display: none;
  337.         }
  338.         .global-top-navigation__action-wrapper {
  339.           margin-top: -45px !important;
  340.         }
  341.         .navigation-tab,
  342.         #notifications__content {
  343.           top: 0 !important;
  344.           height: 100% !important;
  345.         }
  346.       }
  347.     }
  348.     .fandom-community-header__background {
  349.       transform: none !important;
  350.     }
  351.     .global-explore-navigation {
  352.       top: 0px !important;
  353.     }
  354.   }
  355.   @container style(--ath-show-bottom-bar: 0) {
  356.     #WikiaBar {
  357.       display: none !important;
  358.     }
  359.   }
  360.  
  361.   #rail-boxad-wrapper,
  362.   .gpt-ad {
  363.     display: none;
  364.   }
  365. }

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址