From bb32f24288dad0a5712d06d4853d8b4d64bd553b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nil=C3=A9ane?= <nileanedorffer@gmail.com>
Date: Thu, 20 Jul 2023 13:46:48 +0200
Subject: [PATCH] Revamped list picker in the navigation panel

---
 TangerineUI-purple.css | 56 +++++++++++++++++++++++-------------------
 TangerineUI.css        | 56 +++++++++++++++++++++++-------------------
 2 files changed, 62 insertions(+), 50 deletions(-)

diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css
index f918f0a..b55616c 100644
--- a/TangerineUI-purple.css
+++ b/TangerineUI-purple.css
@@ -1304,31 +1304,6 @@ body.layout-single-column  {
 .layout-single-column .compose-panel hr, .navigation-panel hr {
     display: none;
 }
-.layout-single-column .list-panel {
-    padding: 8px 9px 8px 7px;
-    margin: 5px 0 5px;
-    border-radius: 9px;
-    background-color: var(--color-secondary-bg);
-}
-.layout-single-column .list-panel .column-link {
-    width: auto;
-    position: relative;
-    padding: 12px 13px;
-    overflow: visible;
-}
-.layout-single-column .list-panel .column-link:not(:last-child,:hover,.active)::after {
-    display: block;
-    content: " ";
-    height: 2px;
-    bottom: -2px;
-    right: 15px;
-    background-color: var(--color-secondary-separator);
-    left: 15px;
-    position: absolute;
-}
-.layout-single-column .list-panel i.fa {
-    display: none;
-}
 .layout-single-column .column-link__icon {
     transform: scale(.8);
     vertical-align: middle;
@@ -1341,6 +1316,37 @@ body.layout-single-column  {
     position: relative;
     top: 1px;
 }
+.layout-single-column .list-panel {
+    padding: 5px 9px 8px 27px;
+    margin: 0 0 5px;
+    display: none;
+}
+.layout-single-column .list-panel i.fa {
+    display: none;
+}
+.layout-single-column .list-panel .column-link {
+    width: auto;
+}
+.layout-single-column .column-link[href="/lists"].active:has(+ .list-panel .column-link.active) {
+    background-color: var(--color-accent-bg);
+    color: var(--color-content-fg);
+}
+.layout-single-column .column-link[href="/lists"]:hover + .list-panel,
+.layout-single-column .column-link[href="/lists"].active + .list-panel,
+.layout-single-column .list-panel:hover {
+    display: block;
+    animation: fadein .5s 1;
+}
+@keyframes fadein {
+    from {
+        opacity: 0;
+        transform: translateY(-10%); 
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0); 
+    }
+}
 @media screen and (max-width:1174px) {
     .layout-single-column .columns-area__panels__pane--navigational .columns-area__panels__pane__inner {
         width: 100vw;
diff --git a/TangerineUI.css b/TangerineUI.css
index 2b25b97..8469d3e 100644
--- a/TangerineUI.css
+++ b/TangerineUI.css
@@ -1304,31 +1304,6 @@ body.layout-single-column  {
 .layout-single-column .compose-panel hr, .navigation-panel hr {
     display: none;
 }
-.layout-single-column .list-panel {
-    padding: 8px 9px 8px 7px;
-    margin: 5px 0 5px;
-    border-radius: 9px;
-    background-color: var(--color-secondary-bg);
-}
-.layout-single-column .list-panel .column-link {
-    width: auto;
-    position: relative;
-    padding: 12px 13px;
-    overflow: visible;
-}
-.layout-single-column .list-panel .column-link:not(:last-child,:hover,.active)::after {
-    display: block;
-    content: " ";
-    height: 2px;
-    bottom: -2px;
-    right: 15px;
-    background-color: var(--color-secondary-separator);
-    left: 15px;
-    position: absolute;
-}
-.layout-single-column .list-panel i.fa {
-    display: none;
-}
 .layout-single-column .column-link__icon {
     transform: scale(.8);
     vertical-align: middle;
@@ -1341,6 +1316,37 @@ body.layout-single-column  {
     position: relative;
     top: 1px;
 }
+.layout-single-column .list-panel {
+    padding: 5px 9px 8px 27px;
+    margin: 0 0 5px;
+    display: none;
+}
+.layout-single-column .list-panel i.fa {
+    display: none;
+}
+.layout-single-column .list-panel .column-link {
+    width: auto;
+}
+.layout-single-column .column-link[href="/lists"].active:has(+ .list-panel .column-link.active) {
+    background-color: var(--color-accent-bg);
+    color: var(--color-content-fg);
+}
+.layout-single-column .column-link[href="/lists"]:hover + .list-panel,
+.layout-single-column .column-link[href="/lists"].active + .list-panel,
+.layout-single-column .list-panel:hover {
+    display: block;
+    animation: fadein .5s 1;
+}
+@keyframes fadein {
+    from {
+        opacity: 0;
+        transform: translateY(-10%); 
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0); 
+    }
+}
 @media screen and (max-width:1174px) {
     .layout-single-column .columns-area__panels__pane--navigational .columns-area__panels__pane__inner {
         width: 100vw;