From 1b26128731e65f019b71d3641261d22b734577c6 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Wed, 27 Nov 2024 22:40:55 +0200
Subject: [PATCH] Improve the appearance of the new tab button, extract
 variables

---
 src/public/stylesheets/theme-next.css | 28 ++++++++++++++++++++++-----
 1 file changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/public/stylesheets/theme-next.css b/src/public/stylesheets/theme-next.css
index ed5849fa2..6d96d92f5 100644
--- a/src/public/stylesheets/theme-next.css
+++ b/src/public/stylesheets/theme-next.css
@@ -45,6 +45,7 @@
     --tab-bar-height: 50px;
     --tab-height: 36px;
     --tab-first-item-horiz-offset: 0;
+    --new-tab-button-size: 24px;
 }
 
 /*
@@ -131,6 +132,12 @@
    --inactive-tab-hover-background-color: var(--left-pane-item-hover-background);
    --inactive-tab-text-color: #666;
 
+   --new-tab-button-background: #d8d8d8;
+   --new-tab-button-color: #3a3a3a;
+   --new-tab-button-shadow: 2px 2px 4px rgba(0, 0, 0, .2);
+   --new-tab-button-hover-background: white;
+   --new-tab-button-hover-color: black;
+
    --scrollbar-border-color: #ddd;
    --scrollbar-background-color: #ddd;
    --tooltip-background-color: #f8f8f8;
@@ -186,6 +193,12 @@
         --active-item-text-color: black;
         --active-item-background-color: #777;
         --active-item-border-color: transparent;
+
+        --new-tab-button-background: #d8d8d8;
+        --new-tab-button-color: #3a3a3a;
+        --new-tab-button-shadow: 2px 2px 4px rgba(0, 0, 0, .2);
+        --new-tab-button-hover-background: white;
+        --new-tab-button-hover-color: black;
     
         --menu-text-color: white;
         --menu-background-color: #222222d9;
@@ -470,9 +483,8 @@
 }
 
 .tab-row-widget .note-new-tab {
-    --new-tab-button-size: 24px;
     position: relative;
-    margin-left: 5px;
+    margin-left: 3px;
 }
 
 .tab-row-widget .note-new-tab::before {
@@ -483,13 +495,13 @@
     left: calc((var(--tab-height) - var(--new-tab-button-size)) / 2);
     width: var(--new-tab-button-size);
     height: var(--new-tab-button-size);
-    background: var(--left-pane-item-action-button-background);
+    background: var(--new-tab-button-background);
     border-radius: 50%;
 }
 
 .tab-row-widget .note-new-tab:hover::before {
-    background: var(--left-pane-item-action-button-hover-background);
-    box-shadow: var(--left-pane-item-action-button-hover-shadow);
+    background: var(--new-tab-button-hover-background);
+    box-shadow: var(--new-tab-button-shadow);
 }
 
 .tab-row-widget .note-new-tab::after {
@@ -505,8 +517,14 @@
     justify-content: center;
     font-family: boxicons;
     font-size: calc(var(--new-tab-button-size) * .75);
+    color: var(--new-tab-button-color);
 }
 
+.tab-row-widget .note-new-tab:hover::after {
+    color: var(--new-tab-button-hover-color);
+}
+
+
 /*
  * Center pane
  */