Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/*
* 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.
*
* Uses [[File:Hydra_Official_Wiki_Badge.svg]]
*
* @author Joritochip
*
* @maintainer TreeIsLife
*/
: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,
#top_boxad {
display: none !important;
}
#mixed-content-footer,
.fandom-sticky-header {
display: none;
}
/* 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: 30px;
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(https://static.wikia.nocookie.net/central/images/b/bc/Wiki.png/revision/latest/scale-to-width-down/30);
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
background-origin: content-box;
width: 30px;
height: 100%;
}
@media (min-width:720px) {
.global-navigation .global-navigation__logo {
width: 96px;
}
.global-navigation .global-navigation__logo:after {
background: url(https://static.wikia.nocookie.net/6a181c72-e8bf-419b-b4db-18fd56a0eb60);
width: 96px;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
background-origin: content-box;
}
}
.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 .wds-dropdown__toggle:not(.notifications__toggle) .global-navigation__icon {
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 .wds-dropdown__toggle:not(.notifications__toggle) .global-navigation__icon:after {
content: attr(title);
font-size: 0.9em;
display: block;
margin-left: 7px;
}
.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: -32px;
left: 77px;
padding: 0;
margin: 0;
height: 30px;
z-index: 800;
}
@media (min-width: 720px) {
.fandom-community-header__top-container {
left: 143px;
}
}
.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 .wds-tabs .wds-dropdown__toggle > a > .wds-icon {
-webkit-transform: rotate(0);
transform: rotate(0);
}
.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 ***/
#ca-share #socialIconImages {
display: flex;
flex-direction: column;
}
#ca-share #socialIconImages a {
width: 40px;
}
/*** Search (derived from original Hydra CSS) ***/
#searchform {
position: relative;
margin-left: 1em;
height: 2em;
}
#simpleSearch {
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;
}
#simpleSearch #searchInput {
width: 100%;
padding: 0.2em 0 0.2em 0.2em;
font-size: 0.8125em;
direction: ltr;
-webkit-appearance: textfield;
}
#simpleSearch input {
background-color: transparent;
color: #000;
margin: 0;
padding: 0;
border: 0;
}
#simpleSearch #searchButton {
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;
}
#simpleSearch #searchButton,
#simpleSearch #mw-searchButton {
position: absolute;
top: 0;
right: 0;
width: 1.65em;
height: 100%;
cursor: pointer;
text-indent: -99999px;
direction: ltr;
white-space: nowrap;
overflow: hidden;
}
/** 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;
}
/* Use old Gamepedia Official Wiki badge */
svg.official-wiki-badge {
background-image: url(https://static.wikia.nocookie.net/dev/images/e/e9/Hydra_Official_Wiki_Badge.svg/revision/latest?cb=20230318073718&format=original)
}
svg.official-wiki-badge > * {
display: none;
}
/* Fix for new sidebar experiment */
.global-navigation {
display: flex !important;
}
#global-explore-navigation {
display: none !important;
}