CSS updates

Author: edwini

src/css/helios-gcx.css

@@ -10,6 +10,12 @@
     flex-direction: row!important;
 }
 
+.source-toolbox .copy-toast {
+    position: absolute!important;
+    right: 0;
+    top: 1em;
+}
+
 @font-face {
     font-family: 'Material Icons';
     font-style: normal;
@@ -1539,4 +1545,112 @@ code::before {
 .dark-mode .nav-toggle.is-active {
     background: url(../img/back-white.svg) no-repeat 50% 47.5%;
     background-size: 49%;
+}
+
+li.nav-item.is-current-path.is-active li.nav-item[data-depth="2"] {
+    padding: 0;
+}
+
+li.nav-item.is-current-path.is-active li.nav-item[data-depth="2"] a {
+    margin: 8px 32px;
+}
+
+li.nav-item.is-current-page.is-active li.nav-item[data-depth="2"] {
+    padding: 0;
+}
+
+li.nav-item.is-current-page.is-active li.nav-item[data-depth="2"] a {
+    margin: 8px 32px;
+}
+
+li.nav-item.is-current-page.is-active:has(li):has(li) {
+    background: transparent;
+}
+
+li.nav-item.is-current-page.is-active:has(li):has(li):before {
+    background: transparent;
+    border: none;
+}
+
+li.nav-item.is-current-page.is-active:has(li.toggler):hover {
+    color: #6a7086;
+}
+
+li.nav-item.toggler[data-depth="2"]:hover a {
+    color: #6a7086;
+}
+
+li.nav-item[data-depth="3"] {
+    padding: 2px 18px;
+}
+
+li.nav-item.is-current-path.is-active li.nav-item[data-depth="2"] li.nav-item[data-depth="3"] a {
+    padding: 8px 15px 8px 32px;
+}
+
+li.nav-item.is-current-path.is-active li.nav-item[data-depth="2"] a.nav-link {
+    padding: 20px 32px;
+}
+
+li.nav-item.is-current-path.is-active li.nav-item[data-depth="2"]:has(li[data-depth="3"]) a {
+    padding: 8px 32px;
+}
+
+.nav-item.is-current-page.is-active>a,
+.nav-item.is-current-page.is-active>button {
+    color: #6a7086;
+}
+
+.dark-mode .nav-item.is-current-page.is-active>a,
+.dark-mode .nav-item.is-current-page.is-active>button {
+    color: #a6b1c2;
+}
+
+li.nav-item.is-active.is-current-path[data-depth="1"] a:hover {
+    color: #6a7086;
+}
+
+.dark-mode li.nav-item.is-current-path.is-active li.nav-item[data-depth="2"] li.nav-item[data-depth="3"]:hover a {
+    color: black!important;
+}
+
+.dark-mode li.nav-item.is-current-path.is-active li.nav-item[data-depth="2"] li.nav-item[data-depth="3"] a {
+    color: white;
+}
+
+.dark-mode .nav-item[data-depth="3"]:hover a {
+    color: black;
+}
+
+.dark-mode .nav-item[data-depth="2"].toggler.is-active:hover a {
+    color: white;
+}
+
+.dark-mode li.nav-item.toggler[data-depth="2"]:hover a {
+    color: black;
+}
+
+.dark-mode li.nav-item.toggler[data-depth="2"]:has(li[data-depth="3"]) {
+    background-color: transparent;
+}
+
+.dark-mode li.nav-item.toggler[data-depth="2"]:has(li[data-depth="3"])::before {
+    background-color: transparent;
+    border: 0;
+}
+
+.dark-mode li.nav-item.toggler[data-depth="1"]:has(li[data-depth="2"]):has(li[data-depth="3"]) a {
+    color: white;
+}
+
+.dark-mode li.nav-item.toggler[data-depth="1"]:has(li[data-depth="2"]):has(li[data-depth="3"]):hover a {
+    color: black;
+}
+
+.dark-mode li.nav-item.toggler.is-active[data-depth="1"]:has(li[data-depth="2"]):has(li[data-depth="3"]):hover a {
+    color: white;
+}
+
+.dark-mode li.nav-item.is-current-path.is-active li.nav-item[data-depth="2"]:hover span a {
+    color: black;
 }