| | |
| | | nav a:focus:visited, |
| | | nav button:focus { |
| | | background-color: rgb(var(--action-0)); |
| | | color: var(--action-contrast); |
| | | color: rgb(var(--action-contrast)); |
| | | } |
| | | |
| | | .toggle .icon-caret-down { |
| | |
| | | /*}*/ |
| | | /*nav.always > .toggle:hover {*/ |
| | | /* background-color: rgb(var(--action-0));*/ |
| | | /* color: var(--action-contrast);*/ |
| | | /* color: rgb(var(--action-contrast));*/ |
| | | /*}*/ |
| | | /*nav.always.open > .toggle {*/ |
| | | /* width: 100%;*/ |
| | |
| | | |
| | | /*nav.always.open > .toggle:hover {*/ |
| | | /* background-color: rgb(var(--action-0));*/ |
| | | /* color: var(--action-contrast);*/ |
| | | /* color: rgb(var(--action-contrast));*/ |
| | | /*}*/ |
| | | |
| | | /*nav.always button .icon-x,*/ |
| | |
| | | nav.always.fixed .toggle.main:hover, |
| | | nav.always.fixed .toggle.main:focus { |
| | | background-color: rgb(var(--action-0)); |
| | | color: var(--action-contrast); |
| | | color: rgb(var(--action-contrast)); |
| | | } |
| | | /******************************************************* |
| | | MOBILE NAV |
| | |
| | | /************************************************************ |
| | | ON THIS PAGE |
| | | ************************************************************/ |
| | | nav.on-this-page { |
| | | nav.on-this-page.on-this-page { |
| | | --justify: space-between; |
| | | position: fixed; |
| | | bottom: 0; |
| | |
| | | z-index: var(--z-5); |
| | | background-color: rgba(var(--base), var(--op-45)); |
| | | max-width: none; |
| | | margin: 0!important; |
| | | } |
| | | |
| | | body:has(nav.fixed) nav.on-this-page { |
| | |
| | | } |
| | | nav.on-this-page .active a { |
| | | background-color: rgba(var(--base),var(--op-6)); |
| | | color: var(--action-contrast); |
| | | color: rgb(var(--action-contrast)); |
| | | } |
| | | nav.on-this-page #back-to-top span { |
| | | display: none; |
| | | } |
| | | nav.on-this-page .active a { |
| | | background-color: rgb(var(--action-0)); |
| | | color: var(--action-contrast); |
| | | color: rgb(var(--action-contrast)); |
| | | } |
| | | |
| | | /**************************************************** |
| | |
| | | --padding: 0; |
| | | background-color: rgba(var(--base),var(--op-6)); |
| | | } |
| | | nav.index, |
| | | nav.index ul, |
| | | nav.index li, |
| | | nav.index button, |
| | | nav.index a { |
| | | min-height: var(--chipchip); |
| | | height: var(--chipchip); |
| | | } |
| | | nav.index ul { |
| | | width: 100%; |
| | | } |
| | |
| | | nav.index li.active, |
| | | nav.index li.adj { |
| | | transform: scaleX(1); |
| | | width: calc(100% - var(--btn_)); |
| | | width: 100%; |
| | | flex-shrink: 1; |
| | | max-width: none; |
| | | } |
| | | nav.index li:first-of-type { |
| | | flex-shrink: 1; |
| | | transform: scaleX(1); |
| | | order: 9999; |
| | | width: var(--btn); |
| | | height: var(--btn); |
| | | max-width: none; |
| | | } |
| | | /*nav.index li:first-of-type {*/ |
| | | /* flex-shrink: 1;*/ |
| | | /* transform: scaleX(1);*/ |
| | | /* order: 9999;*/ |
| | | /* width: var(--btn);*/ |
| | | /* height: var(--btn);*/ |
| | | /* max-width: none;*/ |
| | | /*}*/ |
| | | |
| | | @media (max-width: 767px) { |
| | | .index li.adj { |
| | |
| | | max-width: 0; |
| | | } |
| | | } |
| | | nav.index a { |
| | | border-bottom: 4px solid transparent; |
| | | } |
| | | nav.index .active a { |
| | | border-color: rgb(var(--action-0)); |
| | | color: rgb(var(--contrast)); |
| | | } |
| | | /*nav.index a {*/ |
| | | /* border-bottom: 4px solid transparent;*/ |
| | | /*}*/ |
| | | /*nav.index .active a {*/ |
| | | /* border-color: rgb(var(--action-0));*/ |
| | | /* color: rgb(var(--contrast));*/ |
| | | /*}*/ |
| | | |
| | | nav.index.open { |
| | | --dir: column-reverse; |
| | |
| | | backdrop-filter: blur(5px); |
| | | z-index: var(--z-10); |
| | | } |
| | | nav.index.open ul { |
| | | min-height: max-content; |
| | | --dir: column; |
| | | } |
| | | nav.index.open li { |
| | | width: 100%; |
| | | height: var(--btn); |
| | | max-width: 100%!important; |
| | | transform: scaleX(1); |
| | | overflow: visible; |
| | | } |
| | | nav.index.open a { |
| | | --justify: flex-end; |
| | | --justify: center; |
| | | padding: 0 2rem 0 0; |
| | | background-color: transparent; |
| | | /*background-color: transparent;*/ |
| | | } |
| | | |
| | | /*************************************************************** |
| | |
| | | nav.tabs button.active, |
| | | nav.tabs button.active:hover { |
| | | background-color: rgb(var(--action-0)); |
| | | color: var(--action-contrast); |
| | | color: rgb(var(--action-contrast)); |
| | | border-color: rgb(var(--base)); |
| | | } |
| | | |