Add an :active state to the lists

SLightly change the drawer animation

themes/material/css/drawer.css

@@ -7,7 +7,7 @@
     width: 100%;
     height: calc(100% - 7rem);
     box-shadow: 0 2.5rem 5rem rgba(0,0,0,0.30), 0 2rem 1.5rem rgba(0,0,0,0.22);
-    transition: transform .3s cubic-bezier(.4,0,.2,1) .2s;
+    transition: transform .3s ease-in;
 }
 
 .drawer .flex.quarter .block:not(.subheader):not(.large) {
@@ -27,6 +27,7 @@
 }
 
 .drawer.empty {
+    transition-timing-function: ease-out;
     transform: translateY(100%);
     pointer-events: none;
 }

themes/material/css/listn.css

@@ -30,15 +30,27 @@ ul.list li > *:not(p, .hide, form) {
     top: 0;
 }
 
-/* Active list */
+/* Active list items */
 
-ul.list.active > li:hover:not(.subheader),
-ul.list.active.all > li:hover,
-ul.list.active > li.active:not(.subheader) {
+ul.list.active li:hover:not(.subheader),
+ul.list.active.all li:hover,
+ul.list.active li.active:not(.subheader),
+ul.tabs > li:hover,
+ul.list li > span.active:hover {
     background-color: rgba(var(--movim-font), 0.04);
     cursor: pointer;
 }
 
+/* Clicked list items */
+
+ul.list.active li:active:not(.subheader),
+ul.list.active.all li:active,
+ul.tabs > li:active,
+ul.list li > span.active:active {
+    background-color: rgba(var(--movim-font), 0.08);
+    transition: background-color 0.15s ease;
+}
+
 /* Main elements */
 
 ul.list li .control,
@@ -99,15 +111,6 @@ ul.list li > p.line {
     white-space: nowrap;
 }
 
-ul.list li > span.active {
-    transition: background-color 0.25s ease;
-}
-
-ul.list li > span.active:hover {
-    cursor: pointer;
-    background-color: rgba(var(--movim-font), 0.05);
-}
-
 ul.list li > p > span.second {
     color: gray;
     margin-left: 0.5rem;
@@ -324,12 +327,6 @@ ul.tabs.narrow > li > * {
     padding: 0 1rem;
 }
 
-
-ul.tabs > li:hover {
-    cursor: pointer;
-    background-color: rgba(var(--movim-font), 0.05);
-}
-
 ul.tabs > li.active {
     opacity: 1;
     border-bottom-width: 2px;

themes/material/css/menu.css

@@ -25,11 +25,6 @@ body > nav > ul.list li > p:nth-last-of-type(2) + p {
     color: gray;
 }
 
-body > nav > ul.list.active li:hover:not(.subheader),
-body > nav > ul.list.active li.active:not(.subheader) {
-    background-color: rgba(255, 255, 255, 0.035);
-}
-
 ul.oppose {
     position: absolute;
     bottom: 0;
@@ -82,4 +77,3 @@ ul.navigation li > p {
     list-style-type: none;
     font-size: 1.5rem;
 }
-