diff --git a/src/css/helios-gcx.css b/src/css/helios-gcx.css index e3d9a68..6ffe39a 100644 --- a/src/css/helios-gcx.css +++ b/src/css/helios-gcx.css @@ -1106,24 +1106,6 @@ label.switch_label:after { color: var(--white); } -.dark-mode .nav-item.toggler>button:hover{ - z-index: -1; -} - -.dark-mode .nav-item.toggler>button:hover::before{ - content: ""; - z-index: -1; -} - -.nav-item.toggler>button:hover{ - z-index: -1; -} - -.nav-item.toggler>button:hover::before{ - content: ""; - z-index: -1; -} - .dark-mode .nav-item.is-current-page>a:before{ content: ""; border: 2px solid var(--color-interface-night-300); @@ -1454,9 +1436,10 @@ label.switch_label:after { /* LIGHT MODE LISTS */ -.nav-item[data-depth="1"].toggler.is-active:hover button { +/* .nav-item[data-depth="1"].toggler.is-active:hover button { color: #6a7086; -} + background: #f6f8fa; +} */ .nav-item[data-depth="1"].toggler:hover, .nav-item[data-depth="2"].toggler:hover, diff --git a/src/js/08-gcx-helios.js b/src/js/08-gcx-helios.js index 9892c17..3e86abb 100644 --- a/src/js/08-gcx-helios.js +++ b/src/js/08-gcx-helios.js @@ -81,3 +81,22 @@ document.querySelector('#collapse').addEventListener('click', function (event) { } } }) + +document.querySelectorAll(`li.nav-item.toggler[data-depth="1"]>.nav-item-toggle, +li.nav-item.toggler[data-depth="2"]>.nav-item-toggle, +li.nav-item.toggler[data-depth="3"]>.nav-item-toggle, +li.nav-item.toggler[data-depth="4"]>.nav-item-toggle`).forEach(function (btn) { + btn.addEventListener('mouseover', (event) => { + var theme = document.querySelector('html').classList.contains('dark-mode') + if (theme) { + btn.previousElementSibling.style.backgroundColor = '#2e394e' + } else { + btn.previousElementSibling.style.backgroundColor = '#f6f8fa' + btn.previousElementSibling.style.color = '#21293a' + } + }) + btn.addEventListener('mouseout', (event) => { + btn.previousElementSibling.style.backgroundColor = '' + btn.previousElementSibling.style.color = '' + }) +})