Forum:CSS help

/* * HydraRevived * * Introduces some elements from the legacy Hydra skin to FandomDesktop * * This script is NOT intended to re-create Hydra pixel for pixel, but rather to  * provide an experience similar to Hydra while retaining useful and important * features from FandomDesktop. * * @author Joritochip */


 * root {

--hydra-revived-sidebar-width: 160px; --hydra-revived-sidebar-width--large: 176px; /* For displays >982px wide */ } body { --fandom-dropdown-background-color: #121212; --fandom-notifications-background-color: #121212; --fandom-notifications-read-card-background-color: #121212; --fandom-notifications-unread-card-background-color: #222; --fandom-notifications-footer-text-color: #d6d0d5; --fandom-global-nav-background-color: #121212; --fandom-global-nav-icon-background-color--hover: #222; --fandom-global-nav-link-color: #fff; --fandom-global-nav-link-color--hover: #fff; --fandom-global-nav-icon-border-color: #fff; --fandom-global-nav-bottom-icon-color: #fff; --fandom-global-nav-counter-background-color: #f5f3f5; --fandom-global-nav-counter-label-color: #121212; } .search-modal, .search-modal:before { left: 0; } .notifications-placeholder { left: 18px; z-index: 700; } .top-ads-container, .gpt-ad, display: none !important; } .fandom-sticky-header { display: none; }
 * 1) top_boxad {
 * 1) mixed-content-footer,

/* Global Navigation */ .global-navigation { position: absolute; box-shadow: none; top: 0; left: 0; width: 100%; height: 31px; border-bottom: 1px solid #000; display: flex; flex-direction: row; } .global-navigation .global-navigation__top { padding: 0; display: flex; justify-content: flex-start; } .global-navigation .global-navigation__bottom { position: unset; display: flex; padding: 0; } .global-navigation .global-navigation__bottom, .global-navigation .notifications, .global-navigation .wds-dropdown { margin: 0; height: 30px; } .global-navigation .wds-dropdown:before, .global-navigation .wds-dropdown:after { display: none !important; } .global-navigation .wds-dropdown__toggle { width: auto; } .global-navigation .global-navigation__bottom > * { border-left: 1px solid #353535 } .global-navigation .global-navigation__link .global-navigation__icon, .global-navigation .notifications__toggle .global-navigation__icon { padding: 5px 6px; } .global-navigation .global-navigation__link .global-navigation__icon svg, .global-navigation .notificatons__toggle .global-navigation__icon svg { height: 18px; width: 18px; min-width: unset; margin: 0; padding: 0; } .global-navigation .global-navigation__icon { border-radius: 0; border-width: 0; transition: none; height: 30px; width: auto; padding: 0 5px; } .global-navigation .global-navigation__nav { border-right: 1px solid #353535; } .global-navigation .global-navigation__nav, .global-navigation .global-navigation__links { display: flex; align-items: center; } .global-navigation .global-navigation__logo { position: relative; box-sizing: content-box; width: 96px; height: 100%; padding: 0 0.75em; border-right: 1px solid #353535; } .global-navigation .global-navigation__logo:after { content: ''; position: absolute; top: 0; left: 0.75em;; background: url(/resources-ucp/v2/dist/svg/wds-brand-fandom-logo-light.svg); background-size: contain; background-repeat: no-repeat; background-position: center center; background-origin: content-box; width: 96px; height: 100%; } .global-navigation .global-navigation__logo > *, .global-navigation .global-navigation__links *[data-tracking-label*="link."], .global-navigation .global-navigation__search { display: none; } .global-navigation .global-navigation__link { position: relative; } .fandom-community-header .wiki-tools .wds-button:after { content: attr(data-title); } .global-navigation .global-navigation__links *[data-tracking-label="start-a-wiki"] .global-navigation__label, .fandom-community-header .wiki-tools .wds-button:after { display: none; line-height: 1.2; position: absolute; top: 110%; margin: 0; white-space: nowrap; max-width: unset; background: #222; padding: 5px 8px; font-size: 12px; border-radius: 6px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); } .global-navigation .global-navigation__links *[data-tracking-label="start-a-wiki"]:hover .global-navigation__label, .fandom-community-header .wiki-tools .wds-button[data-title]:hover:after { display: block; } /** Notifications Dropdown **/ .global-navigation .global-navigation__icon .wds-icon { height: 18px; width: 18px; min-width: unset; } .global-navigation .notifications .wds-dropdown.is-attached-to-bottom .wds-dropdown__content { --wds-dropdown-background-color: #121212; --wds-dropdown-border-color: #000; --wds-dropdown-text-color: #fff; --fandom-text-color: #f5f3f5; --fandom-text-color--rgb: 245, 243, 245; --fandom-border-color: #353535;

position: absolute; top: 31px; right: 0; left: unset; bottom: unset; max-height: 80vh; border-radius: 0; border-top: none; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); } .global-navigation .notifications .wds-dropdown .wds-dropdown__content { --fandom-link-color: #ffc500; } .global-navigation .notifications .wds-dropdown.is-attached-to-bottom .wds-tabs { --wds-tab-color--active: #ffc500; --wds-tab-color--hover: var(--fandom-text-color); } /** User Dropdown **/ .global-navigation .global-navigation__icon .wds-avatar { --wds-avatar-border-width: 0; height: 20px; width: 20px; min-width: unset; } .global-navigation .global-navigation__bottom > .wds-dropdown .global-navigation__icon { padding: 0 1em; } .global-navigation .global-navigation__bottom > .wds-dropdown .global-navigation__icon .wds-avatar { display: flex; align-items: center; width: auto; } .global-navigation .global-navigation__bottom > .wds-dropdown .global-navigation__icon .wds-avatar img { min-width: unset; width: 20px; } .global-navigation .global-navigation__bottom > .wds-dropdown .global-navigation__icon .wds-avatar:after { content: attr(title); font-size: 0.9em; display: block; margin-left: 5px; } .global-navigation .global-navigation__bottom > .wds-dropdown .wds-dropdown__content .wds-list { transform: scaleY(-1); } .global-navigation .global-navigation__bottom > .wds-dropdown .wds-dropdown__content li { transform: scaleY(-1); } /** Wiki Tools **/ .fandom-community-header__top-container { position: absolute; top: 0; left: 143px; padding: 0; margin: 0; height: 30px; z-index: 800; } .fandom-community-header__top-container .fandom-community-header__community-name-wrapper { align-items: center; height: 100%; margin-left: 0.3em; } .fandom-community-header__top-container .wiki-tools { height: 30px; order: -1; } .fandom-community-header__top-container .wiki-tools .wds-button { --wds-secondary-button-label-color: #fff; --wds-secondary-button-label-color--hover: #fff; transition: none; border-radius: 0 !important; border: none; border-right: 1px solid #353535; margin: 0; height: 100%; box-sizing: border-box; box-shadow: none; } .fandom-community-header__top-container .wiki-tools .wds-dropdown:hover .wds-button, .fandom-community-header__top-container .wiki-tools > .wds-button:hover, .global-navigation__logo:hover { background: #222 !important; } .fandom-community-header__top-container .wiki-tools .wds-dropdown { z-index: 600; } body .fandom-community-header .wiki-tools .wds-dropdown .wds-dropdown__content { left: 0; right: unset; } body.hydra-revived-ready .fandom-community-header__top-container .wiki-tools .wiki-tools__search { display: none; } /** Dropdown Styling **/ .global-navigation .global-navigation__bottom > .wds-dropdown .wds-dropdown__content, .fandom-community-header .wiki-tools .wds-dropdown .wds-dropdown__content { position: absolute; top: 30px; right: 0; left: unset; bottom: unset; padding: 0; background: #121212; border-radius: 0; border: 1px solid #000; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); } .global-navigation .global-navigation__bottom > .wds-dropdown .wds-dropdown__content li, .fandom-community-header .wiki-tools > .wds-dropdown .wds-dropdown__content li { margin: 0; } .global-navigation .global-navigation__bottom > .wds-dropdown .wds-dropdown__content li a, .global-navigation .global-navigation__bottom > .wds-dropdown .wds-dropdown__content li button, .fandom-community-header .wiki-tools > .wds-dropdown .wds-dropdown__content li a, .fandom-community-header .wiki-tools > .wds-dropdown .wds-dropdown__content li button { --wds-dropdown-linked-item-color: #fff; --wds-dropdown-text-color: #fff; font-size: 14px; padding-right: calc(1.5em + 5px); padding-left: calc(0.75em + 5px); border-radius: 0; transition: none; } .global-navigation .global-navigation__bottom > .wds-dropdown .wds-dropdown__content li:hover a, .global-navigation .global-navigation__bottom > .wds-dropdown .wds-dropdown__content li:hover button, .fandom-community-header .wiki-tools > .wds-dropdown .wds-dropdown__content li:hover a, .fandom-community-header .wiki-tools > .wds-dropdown .wds-dropdown__content li:hover button { background: #222; color: var(--wds-dropdown-linked-item-color); } .global-navigation .global-navigation__bottom > .wds-dropdown .wds-list:before, .global-navigation .global-navigation__bottom > .wds-dropdown .wds-list:after, .fandom-community-header .wiki-tools > .wds-dropdown:before, .fandom-community-header .wiki-tools > .wds-dropdown:after { display: none !important; }

/* Page Background */ .fandom-community-header__background { height: 100vh; opacity: 0.4; margin-bottom: 0; position: -webkit-fixed; position: fixed; } .fandom-community-header__background:before { display: none; }

/* Content Layout */ .main-container { margin: 0; padding-top: 32px; width: 100%; } .main-container .resizable-container { margin: 0; padding: 0; max-width: 100%; width: 100%; display: grid; grid-template-columns: var(--hydra-revived-sidebar-width) calc(100% - var(--hydra-revived-sidebar-width) - 1em) 1em; } @media screen and (min-width: 982px) { .main-container .resizable-container { grid-template-columns: var(--hydra-revived-sidebar-width--large) calc(100% - var(--hydra-revived-sidebar-width--large) - 1em) 1em; } } /** Sidebar Collapsing **/ body.action-edit .community-header-wrapper.wds-is-hidden, body.action-submit .community-header-wrapper.wds-is-hidden, html.ve-activated .community-header-wrapper { display: block !important; opacity: 0; } body.is-content-expanded .main-container .resizable-container, body.action-edit .main-container .resizable-container, body.action-submit .main-container .resizable-container, html.ve-activated .main-container .resizable-container { grid-template-columns: 0px calc(100% - 50px); justify-content: center; } body.is-content-expanded .main-container .resizable-container .fandom-community-header__image, body.is-content-expanded .main-container .resizable-container .fandom-community-header__local-navigation { display: none; }

/* Page Tools */ .page-side-tools__wrapper { transform: translateX(-40%); } .page-side-tools { top: 20px; } .page-side-tool { height: 27px; width: 27px; } .page-side-tool .wds-icon { height: 14px; width: 14px; min-width: unset; } body.action-edit .page-side-tool.content-size-toggle { display: none; }

/* Community Header */ .community-header-wrapper, .fandom-community-header { min-height: 100%; height: auto; } .fandom-community-header { padding: 12px 0.55em 0.5em 0.55em; display: flex; flex-direction: column; align-items: center; } /** Image **/ .fandom-community-header__image { margin: 0; margin-bottom: 0.5em; } .fandom-community-header:not(.has-no-logo) .fandom-community-header__image img { height: auto; max-height: 155px; max-width: 100%; } /** Tabs **/ .fandom-community-header__local-navigation { width: 100%; padding: 0em 0.3em 0.5em 0.5em; } .fandom-community-header__community-name, .fandom-community-header .page-counter, .fandom-community-header__local-navigation .wds-tabs { display: none; } .community-header-wrapper .fandom-community-header__local-navigation .wds-tabs { display: flex; flex-flow: column; align-items: flex-start; } .community-header-wrapper .fandom-community-header__local-navigation .extra-large-navigation { display: flex; background: none; position: unset; flex-direction: column; -webkit-box-align: start; align-items: flex-start; } .community-header-wrapper .fandom-community-header__local-navigation .extra-large-navigation > * { display: block; } /** Tab Toggles **/ .community-header-wrapper .extra-large-navigation .first-level-item { display: flex; justify-content: space-between; margin-right: 0.25em; height: 30px; } .community-header-wrapper .extra-large-navigation .first-level-item svg:not(.wds-collapsible-panel__chevron) { display: none; } .community-header-wrapper .extra-large-navigation .first-level-item span { margin: 0; } /** Tab Content **/ .community-header-wrapper .extra-large-navigation > .wds-tabs__tab { width: 100%; } .community-header-wrapper .extra-large-navigation .wds-dropdown { font-size: 12px; width: 100%; max-width: 100%; border: none; } .community-header-wrapper .extra-large-navigation .wds-dropdown:not(:first-child) { margin-top: 1em; } .community-header-wrapper .extra-large-navigation .wds-dropdown > .wds-dropdown__content { display: block; position: inherit; left: unset; right: unset; transform: none; max-width: unset; width: 100%; padding: 0; background: none; border: none; } .community-header-wrapper .extra-large-navigation .wds-dropdown.wds-is-collapsed > .wds-dropdown__content { display: none; } .community-header-wrapper .extra-large-navigation .wds-dropdown:before, .community-header-wrapper .extra-large-navigation .wds-dropdown:after { display: none !important; } .community-header-wrapper .extra-large-navigation .wds-dropdown .wds-dropdown__content > .wds-list > li { font-size: 12px; padding: 0; padding-left: 14px; } .community-header-wrapper .extra-large-navigation .wds-dropdown .wds-dropdown__content > .wds-list > li > a { color: var(--theme-community-header-color); line-height: 1.7; padding: 2px 2px 2px 6px; } .community-header-wrapper .extra-large-navigation .wds-dropdown__content > .wds-list > .wds-dropdown-level-nested > .wds-dropdown-level-nested__toggle .wds-dropdown-chevron { transition: fill 0.5s; fill: var(--theme-community-header-color); } .community-header-wrapper .extra-large-navigation .wds-dropdown__content > .wds-list > .wds-dropdown-level-nested:hover > .wds-dropdown-level-nested__toggle .wds-dropdown-chevron { fill: var(--wds-dropdown-linked-item-color); } .community-header-wrapper .extra-large-navigation .wds-dropdown__content > .wds-list > .wds-dropdown-level-nested .wds-dropdown-level-nested__content, .page__head .wds-dropdown .wds-dropdown__content { background: #222; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); padding: 4px; z-index: 1100; } .theme-fandomdesktop-light .community-header-wrapper .extra-large-navigation .wds-dropdown__content > .wds-list > .wds-dropdown-level-nested .wds-dropdown-level-nested__content, .theme-fandomdesktop-light .page__head .wds-dropdown .wds-dropdown__content { background: #ddd; } .community-header-wrapper .extra-large-navigation .wds-dropdown__content > .wds-list > .wds-dropdown-level-nested .wds-list > li, .page__head .wds-dropdown .wds-dropdown__content .wds-list > li { margin: 0; padding: 0; } .community-header-wrapper .extra-large-navigation .wds-dropdown__content > .wds-list > .wds-dropdown-level-nested .wds-list > li > a, .page__head .wds-dropdown .wds-dropdown__content .wds-list > li > a { padding: 2px 6px; }

/* Page Content */ /** Page Head **/ .resizable-container .page .page__head .page-tabs__left, .resizable-container .page .page__head .page-tabs__right { display: flex; align-items: flex-end; margin: 0; padding: 0; } .resizable-container .page .page__head { grid-column: 1 / 3; width: 100%; height: 45px; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 1em; border-radius: 4px 4px 0 0; background: var(--theme-page-background-color--secondary); } .resizable-container .page .page__head .head-tab { background: rgba(var(--theme-page-background-color--rgb), 0.7); border-radius: 3px 3px 0 0; padding: 0.5em 0.75em; margin: 0; transition: background 0.2s; line-height: 1; height: auto; width: auto; display: block; } .resizable-container .page .page__head > * > *:not(:first-child) { margin-left: 0.5em; } .resizable-container .page .page__head .head-tab:before { display: none; } .resizable-container .page .page__head .head-tab:hover, .resizable-container .page .page__head .head-tab.selected { text-decoration: none; background: var(--theme-page-background-color); } html:not(.ve-activated) .resizable-container .page { grid-template-rows: max-content max-content; } .resizable-container .page .page__head ~ .page__main { border-radius: 0 0 3px 3px; } /*** Share Dropdown ***/ display: flex; flex-direction: column; }   width: 40px; } /*** Search (derived from original Hydra CSS) ***/ position: relative; margin-left: 1em; height: 2em; }   font-size: 16px; background-color: #fff; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAQCAIAAABY/YLgAAAAJUlEQVQIHQXBsQEAAAjDoND/73UWdnerhmHVsDQZJrNWVg3Dqge6bgMe6bejNAAAAABJRU5ErkJggg==); background-position: top left; background-repeat: repeat-x; color: #000; display: block; width: 12.6em; width: 20vw; min-width: 5em; max-width: 20em; padding-right: 1.4em; height: 1.4em; line-height: 1; position: relative; min-height: 1px; border: 1px solid #a2a9b1; border-radius: 2px; -webkit-transition: border-color 250ms; -moz-transition: border-color 250ms; transition: border-color 250ms; }   width: 100%; padding: 0.2em 0 0.2em 0.2em; font-size: 0.8125em; direction: ltr; -webkit-appearance: textfield; }   background-color: transparent; color: #000; margin: 0; padding: 0; border: 0; }   background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2213%22%3E %3Cg fill=%22none%22 stroke=%22%2354595d%22 stroke-width=%222%22%3E %3Cpath d=%22M11.29 11.71l-4-4%22/%3E %3Ccircle cx=%225%22 cy=%225%22 r=%224%22/%3E %3C/g%3E %3C/svg%3E'); background-position: center center; background-repeat: no-repeat; }   position: absolute; top: 0; right: 0; width: 1.65em; height: 100%; cursor: pointer; text-indent: -99999px; direction: ltr; white-space: nowrap; overflow: hidden; }
 * 1) ca-share #socialIconImages {
 * 1) ca-share #socialIconImages a {
 * 1) searchform {
 * 1) simpleSearch {
 * 1) simpleSearch #searchInput {
 * 1) simpleSearch input {
 * 1) simpleSearch #searchButton {
 * 1) simpleSearch #searchButton,
 * 2) simpleSearch #mw-searchButton {

/** Rail (does not hide on MediaWiki JS pages) **/ body:not(.ns-8[class*="_js "]) .resizable-container .page__right-rail { display: none; } .resizable-container .page .page__head ~ .page__right-rail .right-rail-toggle { top: 78px; }

/** Header Categories **/ .page-header .page-header__categories { display: none; }

/** Footer Categories **/ .page-footer .page-footer__categories { border: none; } .page-footer .page-footer__categories .wds-collapsible-panel__header { display: none; } .page-footer .page-footer__categories .wds-collapsible-panel__content { display: block; padding: 10px; border: 1px solid var(--theme-border-color); } .page-footer .page-footer__categories .container { padding: 0; } .page-footer .page-footer__categories .container .categories { line-height: 1; } .page-footer .page-footer__categories .container .categories .last { margin: 0; }

.fandom-community-header__local-navigation .wds-tabs .wds-dropdown { width: 100%; } .fandom-community-header__local-navigation ul.wds-tabs li.wds-dropdown.wds-collapsible-panel div.wds-tabs__tab-label.wds-dropdown__toggle { display: flex; }

.fandom-community-header__local-navigation .wds-dropdown.wds-collapsible-panel .wds-dropdown__toggle.wds-collapsible-panel__header { height: unset; }

.fandom-community-header__local-navigation ul.wds-tabs .wds-collapsible-panel .wds-collapsible-panel__content ul.wds-list li { font-size: 12.5px; }

.fandom-community-header__local-navigation ul.wds-tabs .wds-collapsible-panel .wds-collapsible-panel__content ul.wds-list li > a { padding: 6px 0; }

.fandom-community-header__local-navigation ul.wds-tabs li.wds-dropdown:before, .fandom-community-header__local-navigation ul.wds-tabs li.wds-dropdown:after { border-bottom-color: transparent; }

body:not(.hydra-revived-ready) .fandom-community-header__local-navigation .wds-dropdown__toggle.first-level-item { display: flex; justify-content: space-between; }

body:not(.hydra-revived-ready) .fandom-community-header__local-navigation .wds-dropdown .wds-dropdown__content { left: 0; transform: none; }

.fandom-community-header__local-navigation .wds-collapsible-panel .wds-dropdown__toggle.first-level-item.wds-collapsible-panel__header { padding-bottom: 8px; }