From f739a8e5a50b8b75566f5e7fae1694d514ed478e Mon Sep 17 00:00:00 2001
From: binsky <timo@binsky.org>
Date: Tue, 17 Aug 2021 13:47:33 +0200
Subject: unify menu button hover design

Signed-off-by: binsky <timo@binsky.org>
---
 css/app.css | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

(limited to 'css/app.css')

diff --git a/css/app.css b/css/app.css
index f1fa87fa..d53b8fa8 100644
--- a/css/app.css
+++ b/css/app.css
@@ -1064,7 +1064,6 @@
   width: inherit !important;
   border-right: 1px solid #eee; }
   .nav-trashbin a {
-    background-color: #fff !important;
     opacity: 1 !important;
     z-index: 140; }
     .nav-trashbin a.active {
@@ -1072,8 +1071,21 @@
     .nav-trashbin a .fa {
       margin-right: 15px; }
 
-#app-navigation .collapsible:hover .app-navigation-entry-bullet {
-  background: var(--color-primary) !important; }
+#app-navigation {
+  /* Custom bullet icon */ }
+  #app-navigation .collapsible:hover .app-navigation-entry-bullet {
+    background: var(--color-primary) !important; }
+  #app-navigation .app-navigation-entry-bullet-with-hover {
+    position: absolute;
+    display: block;
+    margin: 16px;
+    width: 12px;
+    height: 12px;
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+    transition: background 100ms ease-in-out;
+    z-index: 101; }
 
 #app-navigation a .selected {
   opacity: 1 !important;
-- 
cgit v1.2.3


From cb0ae9374f51572a0e4b560b61c258be97dea205 Mon Sep 17 00:00:00 2001
From: binsky <timo@binsky.org>
Date: Tue, 17 Aug 2021 15:47:27 +0200
Subject: redesign tab header

Signed-off-by: binsky <timo@binsky.org>
---
 css/app.css | 68 ++++++++++++++++++++++++++++++++-----------------------------
 1 file changed, 36 insertions(+), 32 deletions(-)

(limited to 'css/app.css')

diff --git a/css/app.css b/css/app.css
index d53b8fa8..f93b56d0 100644
--- a/css/app.css
+++ b/css/app.css
@@ -140,38 +140,42 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  *
  */
-.tab_header {
-  width: calc(100vw - 300px);
-  margin: 0 0 0;
-  list-style: none;
-  padding: 0; }
-  .tab_header li.tab:first-child {
-    margin-left: 0; }
-  .tab_header li.tab {
-    /*@include border-top-radius(2px);*/
-    float: left;
-    border-bottom-width: 0;
-    margin: 0;
-    padding: 10px 10px 10px 10px;
-    cursor: pointer;
-    border-right: 1px solid #eee;
-    -webkit-transition: background-color 250ms linear;
-    -moz-transition: background-color 250ms linear;
-    -o-transition: background-color 250ms linear;
-    -ms-transition: background-color 250ms linear;
-    transition: background-color 250ms linear; }
-    .tab_header li.tab .indicator {
-      display: none; }
-  .tab_header li.inactive {
-    background-color: #fff !important;
-    color: unset !important; }
-  .tab_header li.active .indicator {
-    display: inline-block;
-    position: absolute;
-    height: 7px;
-    left: 0;
-    right: 0;
-    bottom: -1px; }
+.app-sidebar-tabs {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  flex: 1 1 100%; }
+
+.app-sidebar-tabs__nav ul {
+  display: flex;
+  justify-content: stretch; }
+
+.app-sidebar-tabs__tab.active {
+  color: var(--color-text-light);
+  border-bottom-color: var(--color-primary-element);
+  box-shadow: inset 0 -1px 0 var(--color-primary-element);
+  font-weight: bold; }
+
+.app-sidebar-tabs__tab:not(.active):hover, .app-sidebar-tabs__tab:not(.active):focus {
+  border-bottom-color: var(--color-background-darker);
+  box-shadow: inset 0 -1px 0 var(--color-background-darker); }
+
+.app-sidebar-tabs__tab:hover, .app-sidebar-tabs__tab:focus, .app-sidebar-tabs__tab:active, .app-sidebar-tabs__tab.active {
+  opacity: 1;
+  cursor: pointer; }
+
+.app-sidebar-tabs__tab {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  padding: 10px 10px 10px 10px;
+  transition: color var(--animation-quick), opacity var(--animation-quick), border-color var(--animation-quick);
+  text-align: center;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  opacity: .7;
+  color: var(--color-main-text);
+  border-bottom: 1px solid var(--color-border); }
 
 .tab_container {
   border: 1px solid #eee;
-- 
cgit v1.2.3