MediaWiki:OldOasisNav.css

/*   When you want more Oasis in your life and you decide you really want the funky navigation back. Under no circumstances should this be  placed in sitewide CSS. Please use only in   personal CSS. The new CSS for the navigation is awesome though! To customise, adjust the CSS variables below. If  your wiki does not have Forums nor Discussions enabled, you will need to adjust nth-last-child and nth-last-of-type to be (1) instead of (2). @author Noreplyz

Made on April 1, 2019

html { /* Main background of the navigation */ --color-nav-background: rgb(0, 46, 84); /* Text color when not hovered */ --color-nav-textcolor: #07111f; /* Text color when hovered */ --color-nav-textcolor-hover: #FFF; /* Borders on the top next to each tab */ --color-nav-sideborder: rgb(215,215,215); }

/* header, wordmark */ .wds-community-header__sitename { display:none; } .wds-community-header__local-navigation { height:auto; padding-top:20px; } /* tally and buttons */ .wds-community-header__top-container { display:none; /* hide for now */ }

/* nav */ .wds-community-header__local-navigation { display:block; } .wds-community-header .wds-dropdown__content { background: var(--color-nav-background); border: none; } /* first level */ .wds-community-header .wds-community-header__local-navigation .wds-tabs { display:flex; position:relative; } .wds-community-header .wds-dropdown { position:static; } .wds-community-header .wds-dropdown .wds-dropdown__content { left:7px; width:calc(100% - 3px); padding:0; border-radius:0; z-index:2; }

/* position and always-on on this wiki */ .wds-community-header__local-navigation .wds-tabs li:nth-last-child(2) > .wds-dropdown .wds-dropdown__content { display:block; z-index:1; } .wds-community-header .wds-tabs__tab { position:static; border-right: 1px solid var(--color-nav-sideborder); } .wds-community-header .wds-tabs__tab { display:inline-block; cursor:pointer; margin:0 0 -2px 0; padding:2px 3px; border-radius:3px 3px 0 0; } .wds-community-header .wds-tabs__tab-label { text-transform:none; font-size:14px; font-weight:400; height:31px; }

/* 'Explore' tab */ .wds-community-header .wds-tabs__tab:nth-last-of-type(2) { order:-1; margin-left:7px; } .wds-community-header .wds-tabs:not(:hover) .wds-tabs__tab:nth-last-of-type(2) { background: var(--color-nav-background); } .wds-community-header .wds-tabs:not(:hover) .wds-tabs__tab:nth-last-of-type(2) .wds-tabs__tab-label { color: var(--color-nav-textcolor-hover); } .wds-community-header .wds-tabs__tab:nth-last-of-type(2) .wds-tabs__tab-label > span, .wds-community-header .wds-tabs__tab:nth-last-of-type(2) .wds-tabs__tab-label svg { display:none; } .wds-community-header .wds-tabs__tab:nth-last-of-type(2) .wds-tabs__tab-label::before { content: 'On This Wiki'; }

/* first level hover */ .wds-community-header .wds-dropdown::before { display:none; } .wds-community-header .wds-dropdown::after { display:none; } .wds-community-header .wds-tabs__tab:hover { background: var(--color-nav-background); color: var(--color-nav-textcolor-hover); } .wds-community-header .wds-tabs__tab:hover .wds-tabs__tab-label, .wds-community-header .wds-tabs__tab:hover .wds-tabs__tab-label span { color: var(--color-nav-textcolor-hover); cursor:pointer; } /* second level */ .wds-community-header > .wds-dropdown:hover .wds-dropdown__content { display:block; } .wds-community-header > .wds-dropdown .wds-dropdown__content { position:absolute; left:0; padding:16px 10px 8px 10px; } .wds-community-header > .wds-dropdown__content .wds-list { position:absolute; left:0; top:0; } .wds-community-header > .wds-dropdown__content .wds-list { position:relative; } .wds-community-header .wds-dropdown__content .wds-list li { display:inline-block; margin:0; } .wds-community-header .wds-dropdown.wds-is-active:not(.wds-no-chevron)::after, .wds-community-header .wds-dropdown.wds-is-active:not(.wds-no-chevron)::before, .wds-community-header .wds-dropdown:not(.wds-is-touch-device):not(.wds-is-not-hoverable):hover:not(.wds-no-chevron)::after, .wds-community-header .wds-dropdown:not(.wds-is-touch-device):not(.wds-is-not-hoverable):hover:not(.wds-no-chevron)::before, .wds-community-header .wds-dropdown__toggle-chevron { display:none; } .wds-community-header .wds-dropdown__content .wds-list.wds-is-linked .wds-dropdown-level-2 .wds-dropdown-chevron { margin:2px -4px 0 4px; height:10px; width:10px; } .wds-community-header .wds-dropdown__content > .wds-list.wds-is-linked > li > a { color:var(--color-nav-textcolor-hover); font-weight: normal; padding: 10px 16px; font-size: 13px; } .wds-community-header .wds-dropdown__content > .wds-list.wds-is-linked > li > a:hover { background: none; text-decoration: underline; color:var(--color-nav-textcolor-hover); }

/* third level */ .wds-community-header .wds-dropdown__content .wds-list.wds-is-linked .wds-dropdown-level-2 .wds-dropdown-level-2__content { top:auto; left:auto; z-index:10; min-width:150px; } .wds-dropdown__content .wds-list.wds-is-linked .wds-dropdown-level-2.wds-is-sticked-to-parent .wds-dropdown-level-2__content { top:auto; left:auto; bottom:auto; } .wds-community-header .wds-dropdown-level-2__content .wds-list li { display:block; }