Experimenting with gradients

Author: GuiMar10

src/components/sidebar/sidebar.js

@@ -7,6 +7,7 @@ const searchInput = document.getElementById("search-input");
 const tabList = document.getElementById("tab-list");
 const newTabButton = document.getElementById("new-tab-button");
 const spaceName = document.querySelector('input#space-name');
+const favoriteDiv = document.querySelector('#favorites')
 
 // Add event listeners
 newTabButton.addEventListener("click", () =>
@@ -370,9 +371,9 @@ function favoriteDrop() {
   })
 }
 
-document.querySelector('#favorites').addEventListener('dragenter', favoriteDragOver);
-document.querySelector('#favorites').addEventListener('dragover', favoriteDragOver);
-document.querySelector('#favorites').addEventListener('drop', favoriteDrop);
+favoriteDiv.addEventListener('dragenter', favoriteDragOver);
+favoriteDiv.addEventListener('dragover', favoriteDragOver);
+favoriteDiv.addEventListener('drop', favoriteDrop);
 
 function loadFavorites() {
   // Render
@@ -399,25 +400,21 @@ function loadFavorites() {
         updateSearchBar();
       }
       element.onauxclick = async (event) => {
-        if (event.button === 1 && openedFavorites[favorite.id]) {
+        if (event.button == 1 && openedFavorites[favorite.id]) {
           // Unload favorite
           browser.tabs.remove(openedFavorites[favorite.id])
           openedFavorites[favorite.id] = undefined
           element.ariaLabel = ""
-        } else if (event.button === 2) {
+        } else if (event.button == 2) {
           // Remove favorite
+          initTabSidebarControl();
           if (openedFavorites[favorite.id]) {
-            if (element.ariaLabel === "favopen") {
-              initTabSidebarControl();
-            } else {
-              browser.tabs.remove(openedFavorites[favorite.id]);
-            }
             delete openedFavorites[favorite.id];
           }
           browser.storage.local.get('favorites', function (result) {
             var favoritesg = result.favorites;
             delete favoritesg[favorite.id]
-            document.querySelector('#favorites').innerHTML = "";
+            favoriteDiv.innerHTML = "";
             favorites = favoritesg
             loadFavorites();
             browser.storage.local.set({
@@ -432,7 +429,7 @@ function loadFavorites() {
       favIcon.src = favorite.favicon;
       element.appendChild(favIcon)
 
-      document.querySelector('#favorites').appendChild(element);
+      favoriteDiv.appendChild(element);
     }
   });
 }
@@ -444,7 +441,7 @@ browser.storage.onChanged.addListener(() => {
     if (JSON.stringify(favoritesg) !== JSON.stringify(favorites)) {
       favoritesg.forEach(fav => {
         if (fav?.url !== favorites[fav.id]?.url) {
-          document.querySelector('#favorites').innerHTML = "";
+          favoriteDiv.innerHTML = "";
           favorites = favoritesg
           loadFavorites();
         }

src/components/sidebar/style.css

@@ -6,8 +6,10 @@
 }
 
 :root {
-  --outlineColor: #aac2d32f;
-  --sidebarBackground: #3b3f52;
+  --outlineColor: #d0d0d02f;
+  --sidebarBackground: linear-gradient(#3d5952, #4c4a3e);
+  --sidebarFooterBackground: linear-gradient(#513d59, 0%, #4c4a3e);
+  --themeColorLight: #d7fff2df;
 }
 
 @font-face {
@@ -30,7 +32,7 @@ body {
   position: fixed;
   top: 0;
   bottom: 0;
-  background-color: var(--sidebarBackground);
+  background: var(--sidebarBackground);
   box-shadow: 2px 0 4px rgba(0, 0, 0, 0.3);
   padding-left: 2px;
   padding-bottom: 48px;
@@ -61,6 +63,9 @@ body {
 #sidebar-header button i {
   font-size: 15px;
   color: #aac2d3;
+  color: var(--themeColorLight);
+  filter: grayscale(0.2);
+  opacity: 0.8;
 }
 
 #sidebar-header button i:hover {
@@ -90,7 +95,7 @@ body {
   padding: 15px;
   width: 100%;
   border-radius: 15px;
-  background: #323446;
+  background: #00000038;
   margin-right: -3px;
   transition: scale 0.1s;
 }
@@ -167,11 +172,11 @@ body {
 }
 
 #sidebar-content ul li:hover {
-  background: #323446;
+  background: #00000024;
 }
 
 #sidebar-content ul li.active {
-  background-color: #5e5f71c1;
+  background-color: #ffffff1f;
 }
 
 #sidebar-content ul li[data-pinned="true"] {
@@ -183,7 +188,7 @@ body {
 }
 
 #sidebar-content ul li.active:hover {
-  background-color: #5e5f71;
+  background-color: #ffffff2c;
 }
 
 #sidebar-content button#new-tab-button {
@@ -195,14 +200,20 @@ body {
   background-color: transparent;
   margin-top: 10px;
   width: 100%;
-  color: #aac2d3;
+  color: var(--themeColorLight);
+  filter: grayscale(0.5);
+  transition: scale 0.2s;
 }
 
 #sidebar-content button#new-tab-button:hover {
-  background-color: #5e5f71;
+  background-color: #ffffff21;
   color: white;
 }
 
+#sidebar-content button#new-tab-button:active {
+  scale: 0.97;
+}
+
 #sidebar-content button#new-tab-button span {
   opacity: 0;
   position: relative;
@@ -244,7 +255,9 @@ div#space-info input {
   margin-left: 4px;
   font-size: 14px;
   font-weight: 600;
-  color: #9aaec0;
+  color: var(--themeColorLight);
+  filter: grayscale(0.5);
+  opacity: 0.8;
 }
 
 .footer {
@@ -256,7 +269,7 @@ div#space-info input {
   bottom: 0;
   left: 0;
   right: 0;
-  background-color: var(--sidebarBackground);
+  background: var(--sidebarFooterBackground);
   padding: 18px;
   z-index: 1;
 }
@@ -268,7 +281,7 @@ div#space-info input {
   left: 50%;
   width: 90%;
   height: 1px;
-  background-color: var(--outlineColor);
+  background: var(--outlineColor);
   transform: translateX(-50%);
 }
 
@@ -291,7 +304,8 @@ div#space-info input {
   z-index: 2; /* set to a higher value than the footer */
   width: 90%;
   padding: 10px;
-  background-color: #323446;
+  background-color: #0000003c;
+  backdrop-filter: blur(16px);
   border: none;
   border-radius: 10px;
   color: white;
@@ -355,7 +369,7 @@ div#favorites:empty:-moz-drag-over::after {
   content: "Quickly access your most viewed websites by dragging them here";
 }
 button.favorite {
-  background: #aac2d320 !important;
+  background: #d1d1d120 !important;
   border-radius: 10px !important;
   height: 45px;
   width: 100%;
@@ -368,15 +382,15 @@ button.favorite {
 }
 
 button.favorite:hover {
-  background: #aac2d32d !important;
+  background: #c0c0c02d !important;
 }
 
 button.favorite:active {
   scale: 0.97;
 }
 
 button.favorite[aria-label="favopen"] {
-  background: #aac2d343 !important;
+  background: #c7c7c743 !important;
 }
 
 button.favorite img {
@@ -387,7 +401,7 @@ button.favorite img {
 }
 
 a {
-  color: #c9cae6 !important;
+  color: var(--themeColorLight) !important;
 }
 
 @keyframes divspawn {