User:HM100/navbar-customization.less

/* */

// Global Nav 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:#404a57; // Light theme uses primary-color @secondary-text:#2f3439; // 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) { .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.7; z-index:-1; -webkit-backdrop-filter:saturate(150%) brightness(90%) sepia(25%) grayscale(25%) hue-rotate(5deg); backdrop-filter:saturate(150%) brightness(90%) sepia(25%) grayscale(25%) hue-rotate(5deg); }    &__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; &:hover { color:@secondary-text; fill:currentcolor; border-color:currentcolor; border-style:double; }   }    }    &__link, &__notifications-dropdown { text-transform:none; text-align:justify; color:@primary-text; transition:none; &:hover { color:@secondary-text; }     .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:none; 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; }             }            }          }       }    }   &__search { color:@primary-text; } } svg#wds-company-logo-fandom-white 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) { .wds-global-navigation { border-bottom-color:@secondary-color; &:after { background-color:@primary-text; }   &__user-menu { .wds-avatar__image { color:@primary-color; &:hover { color:@secondary-color; }   }    }    &__link, &__notifications-dropdown { color:@primary-color; &:hover { color:@secondary-color; }     .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; .wds-list { > li { color:@primary-text; .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; }             }            }          }       }    } }   &__search { color:@primary-color; } svg#wds-company-logo-fandom-white path{ &:last-child { fill: @primary-color; } } } /* */