Replace Sidebery settings icon with Fluent settings icon, finalize th…

…e Arc-like aesthetic #3
KiKaraage · Feb 29, 2024 · 048fe41 · 048fe41
1 parent a1a56d5
commit 048fe41
Showing 1 changed file with 52 additions and 43 deletions.
diff --git a/sidebery-css-style b/sidebery-css-style
@@ -24,16 +24,53 @@
 #root.root {--tabs-close-btn-margin: 5px;}
 #root.root {--tabs-inner-gap: 10px;}
 #root.root {--general-border-radius: 6px;}
-#root.root {--tabs-font: 0.9375rem Segoe UI Variable Small, Segoe UI;} /* Don't forget to install the font! */
 #root .popup-container {background-color: transparent;}
 #root .hidden-panels-popup-layer:before {background-color: transparent;}
 
+/* Smoothen masking for overflowed tab title. */
 .Tab .title {
 	background: linear-gradient(90deg, var(--tabs-normal-fg) 80%, #f1f1f100 99%);
 	background-clip: text;
 	color: transparent;
 }
 
+/* Uncomment this to apply Segoe UI Variable font - Make sure to install the font first */
+/* #root.root {--tabs-font: 0.9375rem Segoe UI Variable Small, Segoe UI;} */ 
+
+/* NEW TAB BUTTON*/
+
+.TabsPanel .new-tab-btns{
+  position: relative;
+  padding-top: 5px;
+}
+
+.TabsPanel .new-tab-btn {
+  justify-content: left;
+  padding-left: calc(var(--tabs-inner-gap));
+  margin-left: calc(var(--tabs-margin)*0.5);
+  margin-right: calc(var(--tabs-margin)*0.5);
+  --ntb-btn-height: 37px;
+}
+
+.TabsPanel .new-tab-btn > svg, .TabsPanel .new-tab-btn > img {
+  fill: transparent;
+  background-color: var(--nav-btn-fg);
+  opacity: 40%;
+  width: 17px;
+  height: 17px;
+  scale: 0.9;
+  mask: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgZmlsbD0ibm9uZSIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEwIDIuNUMxMCAyLjIyMzg2IDkuNzc2MTQgMiA5LjUgMkM5LjIyMzg2IDIgOSAyLjIyMzg2IDkgMi41VjlIMi41QzIuMjIzODYgOSAyIDkuMjIzODYgMiA5LjVDMiA5Ljc3NjE0IDIuMjIzODYgMTAgMi41IDEwSDlWMTYuNUM5IDE2Ljc3NjEgOS4yMjM4NiAxNyA5LjUgMTdDOS43NzYxNCAxNyAxMCAxNi43NzYxIDEwIDE2LjVWMTBIMTYuNUMxNi43NzYxIDEwIDE3IDkuNzc2MTQgMTcgOS41QzE3IDkuMjIzODYgMTYuNzc2MSA5IDE2LjUgOUgxMFYyLjVaIiBmaWxsPSIjMjEyMTIxIi8+PC9zdmc+");
+}
+
+.TabsPanel .new-tab-btn:after {
+  justify-content: left;
+  content: "New Tab";
+  font: var(--tabs-font);
+  padding-left: calc(var(--tabs-inner-gap) + var(--tabs-margin) + 12px);
+  color: var(--nav-btn-fg);  
+  opacity: 40%;
+}
+
 /* NAVBAR */
 
 #root.root {--nav-btn-width: 25px;}
@@ -48,7 +85,7 @@
   order: 1; 
   margin-left: 5px;
   margin-right: 5px;
-  margin-top: 6px;
+  margin-top: 3px;
 }
 
 /* Remove background color, border and shadow for active tab panel. */
@@ -79,7 +116,13 @@
   transform: scaleY(-1);
 }
 
-/* Replacing 'add tabs panels' button with a plus icon to mimic Arc's 'new space' button. */
+/* Adjust 'add tabs panel' size & position. */
+#root .PanelConfigPopup .popup {
+  width: 80vw;
+  margin-top: 25vh;
+}
+
+/* Replacing 'add tabs panel' button with Fluent plus icon to mimic Arc's 'new space' button. */
 .NavigationBar #add_tp.nav-item .icon {
   fill: transparent;
   background-color: var(--nav-btn-fg);
@@ -88,7 +131,7 @@
   mask: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgZmlsbD0ibm9uZSIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEwIDIuNUMxMCAyLjIyMzg2IDkuNzc2MTQgMiA5LjUgMkM5LjIyMzg2IDIgOSAyLjIyMzg2IDkgMi41VjlIMi41QzIuMjIzODYgOSAyIDkuMjIzODYgMiA5LjVDMiA5Ljc3NjE0IDIuMjIzODYgMTAgMi41IDEwSDlWMTYuNUM5IDE2Ljc3NjEgOS4yMjM4NiAxNyA5LjUgMTdDOS43NzYxNCAxNyAxMCAxNi43NzYxIDEwIDE2LjVWMTBIMTYuNUMxNi43NzYxIDEwIDE3IDkuNzc2MTQgMTcgOS41QzE3IDkuMjIzODYgMTYuNzc2MSA5IDE2LjUgOUgxMFYyLjVaIiBmaWxsPSIjMjEyMTIxIi8+PC9zdmc+");
 }
 
-/* Replacing 'history' panel with an archive icon to mimic Arc's 'recently closed' button. */
+/* Replacing 'history' panel with Fluent archive icon to mimic Arc's 'recently closed' button. */
 .NavigationBar #navhistory.nav-item .icon {
   fill: transparent;
   background-color: var(--nav-btn-fg);
@@ -99,45 +142,11 @@
   mask: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgZmlsbD0ibm9uZSIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE2LjUgMkMxNy4zMjg0IDIgMTggMi42NzE1NyAxOCAzLjVWNS41QzE4IDYuMTUyODUgMTcuNTgyOSA2LjcwODI4IDE3LjAwMDcgNi45MTQ0TDE3IDE0LjVDMTcgMTYuNDMzIDE1LjQzMyAxOCAxMy41IDE4SDYuNUM0LjU2NyAxOCAzIDE2LjQzMyAzIDE0LjVMMy4wMDAyOSA2LjkxNDc1QzIuNDE3NTQgNi43MDg5MSAyIDYuMTUzMjIgMiA1LjVWMy41QzIgMi42NzE1NyAyLjY3MTU3IDIgMy41IDJIMTYuNVpNMTYgN0g0VjE0LjVDNCAxNS44ODA3IDUuMTE5MjkgMTcgNi41IDE3SDEzLjVDMTQuODgwNyAxNyAxNiAxNS44ODA3IDE2IDE0LjVWN1pNOC41IDlIMTEuNUMxMS43NzYxIDkgMTIgOS4yMjM4NiAxMiA5LjVDMTIgOS43NDU0NiAxMS44MjMxIDkuOTQ5NjEgMTEuNTg5OSA5Ljk5MTk0TDExLjUgMTBIOC41QzguMjIzODYgMTAgOCA5Ljc3NjE0IDggOS41QzggOS4yNTQ1NCA4LjE3Njg4IDkuMDUwMzkgOC40MTAxMiA5LjAwODA2TDguNSA5SDExLjVIOC41Wk0xNi41IDNIMy41QzMuMjIzODYgMyAzIDMuMjIzODYgMyAzLjVWNS41QzMgNS43NzYxNCAzLjIyMzg2IDYgMy41IDZIMTYuNUMxNi43NzYxIDYgMTcgNS43NzYxNCAxNyA1LjVWMy41QzE3IDMuMjIzODYgMTYuNzc2MSAzIDE2LjUgM1oiIGZpbGw9IiMyMTIxMjEiLz48L3N2Zz4=");
 }
 
-#root .PanelConfigPopup .popup {
-  width: 80vw;
-  margin-top: 25vh;
-}
-
-.NavigationBar .nav-item[data-color="orange"] > #root.root{
-  --frame-bg: #ff9f00;
-}
-
-/* NEW TAB */
-
-.TabsPanel .new-tab-btns{
-  position: relative;
-  padding-top: 5px;
-}
-
-.TabsPanel .new-tab-btn {
-  justify-content: left;
-  padding-left: calc(var(--tabs-inner-gap));
-  margin-left: calc(var(--tabs-margin)*0.5);
-  margin-right: calc(var(--tabs-margin)*0.5);
-  --ntb-btn-height: 37px;
-}
-
-.TabsPanel .new-tab-btn > svg, .TabsPanel .new-tab-btn > img {
+/* Replacing Sidebery 'settings' with Fluent settings icon to blend with Arc (Windows) aesthetic. */
+.NavigationBar #settings.nav-item .icon {
   fill: transparent;
   background-color: var(--nav-btn-fg);
-  opacity: 40%;
-  width: 17px;
-  height: 17px;
-  scale: 0.9;
-  mask: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgZmlsbD0ibm9uZSIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEwIDIuNUMxMCAyLjIyMzg2IDkuNzc2MTQgMiA5LjUgMkM5LjIyMzg2IDIgOSAyLjIyMzg2IDkgMi41VjlIMi41QzIuMjIzODYgOSAyIDkuMjIzODYgMiA5LjVDMiA5Ljc3NjE0IDIuMjIzODYgMTAgMi41IDEwSDlWMTYuNUM5IDE2Ljc3NjEgOS4yMjM4NiAxNyA5LjUgMTdDOS43NzYxNCAxNyAxMCAxNi43NzYxIDEwIDE2LjVWMTBIMTYuNUMxNi43NzYxIDEwIDE3IDkuNzc2MTQgMTcgOS41QzE3IDkuMjIzODYgMTYuNzc2MSA5IDE2LjUgOUgxMFYyLjVaIiBmaWxsPSIjMjEyMTIxIi8+PC9zdmc+");
-}
-
-.TabsPanel .new-tab-btn:after {
-  justify-content: left;
-  content: "New Tab";
-  font: var(--tabs-font);
-  padding-left: calc(var(--tabs-inner-gap) + var(--tabs-margin) + 12px);
-  color: var(--nav-btn-fg);  
-  opacity: 40%;
+  width: 75%;
+  height: 75%;
+  mask: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgZmlsbD0ibm9uZSIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEuOTEwNzUgNy4zODI2NkMyLjI4MDA0IDYuMjQwNTMgMi44ODgzOSA1LjE5MjEzIDMuNjkxMDkgNC4zMDM2NEMzLjgyNjgzIDQuMTUzMzkgNC4wMzk3OCA0LjA5OTg0IDQuMjMwNDQgNC4xNjgwMkw2LjE0ODczIDQuODUzOTJDNi42Njg4IDUuMDM5NzcgNy4yNDEwNyA0Ljc2ODgzIDcuNDI2OTIgNC4yNDg3NUM3LjQ0NTIgNC4xOTc2MiA3LjQ1OTI3IDQuMTQ1MDcgNy40NjkgNC4wOTE3M0w3LjgzNDQ2IDIuMDg1NzNDNy44NzA4IDEuODg2MjcgOC4wMjM5OCAxLjcyODUgOC4yMjIyNyAxLjY4NjNDOC44MDI0NiAxLjU2MjggOS4zOTczNCAxLjUgMTAgMS41QzEwLjYwMjMgMS41IDExLjE5NjggMS41NjI3MyAxMS43NzY3IDEuNjg2MDdDMTEuOTc0OSAxLjcyODI0IDEyLjEyODEgMS44ODU5MSAxMi4xNjQ1IDIuMDg1MjlMMTIuNTMxIDQuMDkxNjVDMTIuNjMwMSA0LjYzNDk3IDEzLjE1MDkgNC45OTUxIDEzLjY5NDIgNC44OTYwMUMxMy43NDc2IDQuODg2MjcgMTMuODAwMiA0Ljg3MjE5IDEzLjg1MTIgNC44NTM5NUwxNS43Njk2IDQuMTY4MDJDMTUuOTYwMiA0LjA5OTg0IDE2LjE3MzIgNC4xNTMzOSAxNi4zMDg5IDQuMzAzNjRDMTcuMTExNiA1LjE5MjEzIDE3LjcyIDYuMjQwNTMgMTguMDg5MyA3LjM4MjY2QzE4LjE1MTYgNy41NzUzNCAxOC4wOTE1IDcuNzg2NTggMTcuOTM3MSA3LjkxNzY0TDE2LjM4MjMgOS4yMzc3M0MxNS45NjEzIDkuNTk1MiAxNS45MDk4IDEwLjIyNjMgMTYuMjY3MyAxMC42NDczQzE2LjMwMjQgMTAuNjg4NyAxNi4zNDA5IDEwLjcyNzEgMTYuMzgyMyAxMC43NjIzTDE3LjkzNzEgMTIuMDgyNEMxOC4wOTE1IDEyLjIxMzQgMTguMTUxNiAxMi40MjQ3IDE4LjA4OTMgMTIuNjE3M0MxNy43MiAxMy43NTk1IDE3LjExMTYgMTQuODA3OSAxNi4zMDg5IDE1LjY5NjRDMTYuMTczMiAxNS44NDY2IDE1Ljk2MDIgMTUuOTAwMiAxNS43Njk2IDE1LjgzMkwxMy44NTEzIDE1LjE0NjFDMTMuMzMxMiAxNC45NjAyIDEyLjc1OSAxNS4yMzEyIDEyLjU3MzEgMTUuNzUxMkMxMi41NTQ4IDE1LjgwMjQgMTIuNTQwOCAxNS44NTQ5IDEyLjUzMSAxNS45MDg1TDEyLjE2NDUgMTcuOTE0N0MxMi4xMjgxIDE4LjExNDEgMTEuOTc0OSAxOC4yNzE4IDExLjc3NjcgMTguMzEzOUMxMS4xOTY4IDE4LjQzNzMgMTAuNjAyMyAxOC41IDEwIDE4LjVDOS4zOTczNCAxOC41IDguODAyNDYgMTguNDM3MiA4LjIyMjI3IDE4LjMxMzdDOC4wMjM5OCAxOC4yNzE1IDcuODcwOCAxOC4xMTM3IDcuODM0NDYgMTcuOTE0M0w3LjQ2OTAyIDE1LjkwODRDNy4zNjk5MyAxNS4zNjUgNi44NDkxNiAxNS4wMDQ5IDYuMzA1ODMgMTUuMTA0QzYuMjUyNDEgMTUuMTEzNyA2LjE5OTg3IDE1LjEyNzggNi4xNDg4MSAxNS4xNDYxTDQuMjMwNDQgMTUuODMyQzQuMDM5NzggMTUuOTAwMiAzLjgyNjgzIDE1Ljg0NjYgMy42OTEwOSAxNS42OTY0QzIuODg4MzkgMTQuODA3OSAyLjI4MDA0IDEzLjc1OTUgMS45MTA3NSAxMi42MTczQzEuODQ4NDUgMTIuNDI0NyAxLjkwODUyIDEyLjIxMzQgMi4wNjI4OSAxMi4wODI0TDMuNjE3NzMgMTAuNzYyM0M0LjAzODcyIDEwLjQwNDggNC4wOTAyMSA5Ljc3MzczIDMuNzMyNzQgOS4zNTI3NEMzLjY5NzU5IDkuMzExMzUgMy42NTkxMyA5LjI3Mjg4IDMuNjE3NzUgOS4yMzc3NUwyLjA2Mjg5IDcuOTE3NjRDMS45MDg1MiA3Ljc4NjU4IDEuODQ4NDUgNy41NzUzNCAxLjkxMDc1IDcuMzgyNjZaTTIuOTcxMyA3LjM3NzA5TDQuMjY0OTkgOC40NzU0NkM0LjM0Nzc4IDguNTQ1NzYgNC40MjQ3MSA4LjYyMjY5IDQuNDk1MDEgOC43MDU0OEM1LjIwOTk1IDkuNTQ3NDYgNS4xMDY5NyAxMC44MDk2IDQuMjY0OTcgMTEuNTI0NkwyLjk3MTMgMTIuNjIyOUMzLjI2MzM1IDEzLjQwNTEgMy42ODQ4IDE0LjEzMjIgNC4yMTYyMyAxNC43NzUxTDUuODEyMjEgMTQuMjA0NEM1LjkxNDQ5IDE0LjE2NzkgNi4wMTk1OCAxNC4xMzk3IDYuMTI2NDMgMTQuMTIwMkM3LjIxMzA3IDEzLjkyMiA4LjI1NDYyIDE0LjY0MjMgOC40NTI4MSAxNS43MjlMOC43NTY3OCAxNy4zOTc1QzkuMTY0NjUgMTcuNDY1NSA5LjU4IDE3LjUgMTAgMTcuNUMxMC40MTk3IDE3LjUgMTAuODM0OCAxNy40NjU2IDExLjI0MjQgMTcuMzk3NkwxMS41NDcyIDE1LjcyODlDMTEuNTY2NyAxNS42MjIxIDExLjU5NDkgMTUuNTE3IDExLjYzMTQgMTUuNDE0N0MxMi4wMDMxIDE0LjM3NDYgMTMuMTQ3NyAxMy44MzI3IDE0LjE4NzkgMTQuMjA0NEwxNS43ODM4IDE0Ljc3NTFDMTYuMzE1MiAxNC4xMzIyIDE2LjczNjcgMTMuNDA1MSAxNy4wMjg3IDEyLjYyMjlMMTUuNzM1IDExLjUyNDVDMTUuNjUyMiAxMS40NTQyIDE1LjU3NTMgMTEuMzc3MyAxNS41MDUgMTEuMjk0NUMxNC43OTAxIDEwLjQ1MjUgMTQuODkzMSA5LjE5MDQgMTUuNzM1MSA4LjQ3NTQ0TDE3LjAyODcgNy4zNzcwOUMxNi43MzY3IDYuNTk0ODYgMTYuMzE1MiA1Ljg2NzgzIDE1Ljc4MzggNS4yMjQ5NEwxNC4xODc4IDUuNzk1NTlDMTQuMDg1NSA1LjgzMjE0IDEzLjk4MDQgNS44NjAzIDEzLjg3MzYgNS44Nzk3OUMxMi43ODcgNi4wNzc5NiAxMS43NDU0IDUuMzU3NyAxMS41NDczIDQuMjcxMTlMMTEuMjQyNCAyLjYwMjM1QzEwLjgzNDggMi41MzQ0MyAxMC40MTk3IDIuNSAxMCAyLjVDOS41OCAyLjUgOS4xNjQ2NSAyLjUzNDQ4IDguNzU2NzggMi42MDI0OUw4LjQ1Mjc5IDQuMjcxMDVDOC40MzMzMSA0LjM3NzkxIDguNDA1MTUgNC40ODI5OSA4LjM2ODYgNC41ODUyN0M3Ljk5Njg5IDUuNjI1NDIgNi44NTIzNiA2LjE2NzMgNS44MTIxMyA1Ljc5NTU2TDQuMjE2MjMgNS4yMjQ5NEMzLjY4NDggNS44Njc4MyAzLjI2MzM1IDYuNTk0ODYgMi45NzEzIDcuMzc3MDlaTTcuNTAwMDEgMTBDNy41MDAwMSA4LjYxOTI5IDguNjE5MyA3LjUgMTAgNy41QzExLjM4MDcgNy41IDEyLjUgOC42MTkyOSAxMi41IDEwQzEyLjUgMTEuMzgwNyAxMS4zODA3IDEyLjUgMTAgMTIuNUM4LjYxOTMgMTIuNSA3LjUwMDAxIDExLjM4MDcgNy41MDAwMSAxMFpNOC41MDAwMSAxMEM4LjUwMDAxIDEwLjgyODQgOS4xNzE1OSAxMS41IDEwIDExLjVDMTAuODI4NCAxMS41IDExLjUgMTAuODI4NCAxMS41IDEwQzExLjUgOS4xNzE1NyAxMC44Mjg0IDguNSAxMCA4LjVDOS4xNzE1OSA4LjUgOC41MDAwMSA5LjE3MTU3IDguNTAwMDEgMTBaIiBmaWxsPSIjMjEyMTIxIi8+PC9zdmc+")
 }