User:HM100/navbar-customization.less

/* */

// Global Nav and Footer Customization by HM100. Comes in Dark and Light themes. It aims to remove the CSS transition from most things.

// Variables @fandom-heart-color:#00d6d6; @primary-text:#39424d; // Light theme uses primary-color @secondary-text:#656e78; // Light Theme uses secondary-color @primary-color:#c5ced9; // Light Theme uses primary-text @secondary-color:#ffffff; // Light Theme uses secondary-text @chevron-color:#c5ced9; @light-chevron-color:#002a32;

// Main Styling. We exclude Wikis with 2018 A Suite to avoid Global Nav Glitches

body:not(.wiki-elkanal):not(.wiki-elpkmn):not(.wiki-elalphatechnologies):not(.wiki-elalphafoundation):not(.wiki-elkorakorebision):not(.wiki-elwbwiki2):not(.wiki-elscratchmodswiki2):not(.wiki-hmfelitses) { // Global Nav .wds-global-navigation { background-color:transparent; border-bottom:1px solid @secondary-text; font-family:inherit; // Supress Rubik Font &:after { width:100%; height:100%; position:absolute; content:""; display:block; background-color:@primary-color; top:0; left:0; opacity:0.65; z-index:-1; -webkit-backdrop-filter: saturate(200%) brightness(80%) sepia(35%) grayscale(30%) hue-rotate(5deg) drop-shadow(0 0 5px @fandom-heart-color); backdrop-filter: saturate(200%) brightness(80%) sepia(35%) grayscale(30%) hue-rotate(5deg) drop-shadow(0 0 5px @fandom-heart-color);

}    &__links { font-size:17px; }   &__user-menu { .wds-avatar__image { border-radius:50% 100%; color:@primary-text; fill:currentcolor; border-color:currentcolor; border-style:double; border-width:3px; transition:none; background-color:transparent; }     &:hover { .wds-avatar__image { color:@secondary-text; fill:currentcolor; border-color:currentcolor; border-style:double; border-radius:100% 50%; }     }    }    &__link, &__notifications-dropdown,  &__user-menu { text-transform:none; font-weight:500; color:@primary-text!important; transition:none!important; text-shadow:none!important; // Fix for wikis with careless styling &:hover { color:@secondary-text!important; }     .wds-dropdown__toggle-chevron { fill:@light-chevron-color; }   }    &__start-a-wiki { .wds-button.wds-is-secondary:not(:disabled) { transition:none; border-color: @primary-text; color: @primary-text; border-radius:0; padding-left:15px; padding-right:15px; font-size:11px; &:hover { border-color: @primary-text; color: @secondary-text; }   }    }   .wds-dropdown { &:before, &:after { border-bottom-color:@secondary-color!important; }   &__content { background-color:@secondary-color; color:@primary-text; border:0; box-shadow:0 8px 12px 0 rgba(0,0,0,0.3); border-radius:0; .wds-list { background-image:none; &:before, &:after { display:none; }         > li { color:@primary-text; .wds-button { transition:none; border-color: @primary-text; color: @primary-text; border-radius:0; padding-left:15px; padding-right:15px; font-size:11px; &:hover { border-color: @primary-text; color: @secondary-text; background-color:transparent; }             }             > a:not(.wds-button), .wds-sign-out__button { transition:none; color:inherit; }           &:hover { > a:not(.wds-button), .wds-sign-out__button { background-color:transparent; color:@secondary-text; transition:none; }             }            }          }       }    }

} svg#wds-company-logo-fandom-white path{ &:first-child { fill:@fandom-heart-color; }   &:last-child { fill: @primary-text; } }

// Global Footer .wds-global-footer { background-color:transparent; border-top:1px solid @secondary-text; color:@primary-text; font-family:inherit; // Supress Rubik Font &:after { width:100%; height:100%; position:absolute; content:""; display:block; background-color:@primary-color; top:0; left:0; opacity:0.65; z-index:-1; -webkit-backdrop-filter: saturate(200%) brightness(80%) sepia(35%) grayscale(30%) hue-rotate(5deg) drop-shadow(0 0 5px @fandom-heart-color); backdrop-filter: saturate(200%) brightness(80%) sepia(35%) grayscale(30%) hue-rotate(5deg) drop-shadow(0 0 5px @fandom-heart-color);

}	 * {     transition:none!important; }    .wds-global-footer__header-logo g path { &:first-child { fill:@fandom-heart-color; }       &:last-child { fill:@primary-text; }     } }

}

// Dark Theme Era .oasis-dark-theme:not(.wiki-elkanal):not(.wiki-elpkmn):not(.wiki-elalphatechnologies):not(.wiki-elalphafoundation):not(.wiki-elkorakorebision):not(.wiki-elwbwiki2):not(.wiki-elscratchmodswiki2):not(.wiki-hmfelitses) { // Global Nav .wds-global-navigation { border-bottom-color:@secondary-color; &:after { background-color:@primary-text; }   &__user-menu { .wds-avatar__image { color:@primary-color; }     &:hover { .wds-avatar__image { color:@secondary-color; }     }    }    &__link, &__notifications-dropdown, &__user-menu { color:@primary-color!important; &:hover { color:@secondary-color!important; }     .wds-dropdown__toggle-chevron { fill:@chevron-color; }   }    &__start-a-wiki { .wds-button.wds-is-secondary:not(:disabled) { border-color: @primary-color; color: @primary-color; &:hover { border-color: @primary-color; color: @secondary-color; }   }    }   .wds-dropdown { &:before, &:after { border-bottom-color:@secondary-text!important; }   &__content { background-color:@secondary-text; color:@primary-color; box-shadow:0 8px 12px 0 rgba(255,255,255,0.3); .wds-list { > li { color:@primary-color; .wds-button { border-color: @primary-color; color: @primary-color; &:hover { border-color: @primary-color; color: @secondary-color; }             }            &:hover { > a:not(.wds-button), .wds-sign-out__button { color:@secondary-color; }             }            }          }       }    } }

svg#wds-company-logo-fandom-white path{ &:last-child { fill: @primary-color; } }

// Global Footer .wds-global-footer { border-top-color:@secondary-color; color:@primary-color; &:after { background-color:@primary-text; }	 .wds-global-footer__header-logo g path { &:last-child { fill:@primary-color; }     } } } /* */