reactor:

rainbowflesh · Jan 28, 2024 · e04f146 · e04f146
1 parent 16cc6db
commit e04f146
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 90 deletions.
diff --git a/chrome/SideBarFox/sidebar.css b/chrome/SideBarFox/sidebar.css
@@ -50,100 +50,10 @@
   appearance: unset !important;
 }
 
-#sidebar-box[sidebarcommand*="tabcenter"] {
-  z-index: 1;
-}
-
-#sidebar-box[sidebarcommand*="tabcenter"] #sidebar-header {
-  visibility: collapse;
-  display: none;
-}
-
-[sidebarcommand*="tabcenter"] #sidebar,
-#sidebar-box[sidebarcommand*="tabcenter"] {
-  min-width: 5rem !important;
-  max-width: 5rem !important;
-  width: 5rem;
-}
-
-#sidebar-box[sidebarcommand*="tabcenter"]:not([hidden]) {
-  display: block;
-  position: var(--positionX2);
-  min-width: 5rem;
-  max-width: 5rem;
-  overflow: hidden;
-  border-right: 1px solid var(--sidebar-border-color);
-  z-index: 1;
-  top: 0;
-  bottom: 0;
-}
-
-/* use :where() selector to lower specificity */
-:where(#main-window[inFullscreen]) #sidebar-box[sidebarcommand*="tabcenter"]:not([hidden]) {
-  min-width: var(--fullscreen-sidebar-width) !important;
-  max-width: var(--fullscreen-sidebar-width) !important;
-}
-
-#sidebar-box[sidebarcommand*="tabcenter"]:hover #sidebar,
-#sidebar-box[sidebarcommand*="tabcenter"]:hover {
-  min-width: 10vw !important;
-  width: 30vw !important;
-  max-width: 200px !important;
-  z-index: 1 !important;
-  transition: all var(--transition-time) ease var(--delay);
-}
-
-/* used for delay function */
-#sidebar-box[sidebarcommand*="tabcenter"]:not(:hover) #sidebar,
-#sidebar-box[sidebarcommand*="tabcenter"]:not(:hover) {
-  transition: all var(--transition-time) ease 0s;
-}
-
-@media (width >= 1200px) {
-  #sidebar-box[sidebarcommand*="tabcenter"]:hover #sidebar,
-  #sidebar-box[sidebarcommand*="tabcenter"]:hover {
-    max-width: 250px !important;
-  }
-}
-
-[sidebarcommand*="tabcenter"] ~ #sidebar-splitter {
-  display: none;
-}
-
-[sidebarcommand*="tabcenter"] #sidebar {
-  max-height: 100%;
-  height: 100%;
-}
-
-#main-window:not([inFullscreen]) #sidebar-box[sidebarcommand*="tabcenter"]:not([hidden]) ~ #appcontent {
-  margin-left: var(--positionX1);
-}
-
-#main-window[inFullscreen]:not([inDOMFullscreen])
-  #sidebar-box[sidebarcommand*="tabcenter"]:not([hidden])
-  ~ #appcontent {
-  margin-left: var(--fullscreen-sidebar-width);
-}
-
 #main-window[inFullscreen] #sidebar {
   height: 100vh;
 }
 
-[sidebarcommand*="tabcenter"] #sidebar-header {
-  background: #0c0c0d;
-  border-bottom: none !important;
-}
-
-[sidebarcommand*="tabcenter"] ~ #sidebar-splitter {
-  border-right-color: #0c0c0d !important;
-  border-left-color: #0c0c0d !important;
-}
-
-[sidebarcommand*="tabcenter"] #sidebar-switcher-target,
-[sidebarcommand*="tabcenter"] #sidebar-close {
-  filter: invert(100%);
-}
-
 @media (max-width: 630px) {
   #urlbar-container {
     min-width: 100% !important;

diff --git a/chrome/SideBarFox/tabcenter.css b/chrome/SideBarFox/tabcenter.css
@@ -0,0 +1,89 @@
+#sidebar-box[sidebarcommand*="tabcenter"] {
+  z-index: 1;
+}
+
+#sidebar-box[sidebarcommand*="tabcenter"] #sidebar-header {
+  visibility: collapse;
+  display: none;
+}
+
+[sidebarcommand*="tabcenter"] #sidebar,
+#sidebar-box[sidebarcommand*="tabcenter"] {
+  min-width: 5rem !important;
+  max-width: 5rem !important;
+  width: 5rem;
+}
+
+#sidebar-box[sidebarcommand*="tabcenter"]:not([hidden]) {
+  display: block;
+  position: var(--positionX2);
+  min-width: 5rem;
+  max-width: 5rem;
+  overflow: hidden;
+  border-right: 1px solid var(--sidebar-border-color);
+  z-index: 1;
+  top: 0;
+  bottom: 0;
+}
+
+/* use :where() selector to lower specificity */
+:where(#main-window[inFullscreen]) #sidebar-box[sidebarcommand*="tabcenter"]:not([hidden]) {
+  min-width: var(--fullscreen-sidebar-width) !important;
+  max-width: var(--fullscreen-sidebar-width) !important;
+}
+
+#sidebar-box[sidebarcommand*="tabcenter"]:hover #sidebar,
+#sidebar-box[sidebarcommand*="tabcenter"]:hover {
+  min-width: 10vw !important;
+  width: 30vw !important;
+  max-width: 200px !important;
+  z-index: 1 !important;
+  transition: all var(--transition-time) ease var(--delay);
+}
+
+/* used for delay function */
+#sidebar-box[sidebarcommand*="tabcenter"]:not(:hover) #sidebar,
+#sidebar-box[sidebarcommand*="tabcenter"]:not(:hover) {
+  transition: all var(--transition-time) ease 0s;
+}
+
+@media (width >= 1200px) {
+  #sidebar-box[sidebarcommand*="tabcenter"]:hover #sidebar,
+  #sidebar-box[sidebarcommand*="tabcenter"]:hover {
+    max-width: 250px !important;
+  }
+}
+
+[sidebarcommand*="tabcenter"] ~ #sidebar-splitter {
+  display: none;
+}
+
+[sidebarcommand*="tabcenter"] #sidebar {
+  max-height: 100%;
+  height: 100%;
+}
+
+#main-window:not([inFullscreen]) #sidebar-box[sidebarcommand*="tabcenter"]:not([hidden]) ~ #appcontent {
+  margin-left: var(--positionX1);
+}
+
+#main-window[inFullscreen]:not([inDOMFullscreen])
+  #sidebar-box[sidebarcommand*="tabcenter"]:not([hidden])
+  ~ #appcontent {
+  margin-left: var(--fullscreen-sidebar-width);
+}
+
+[sidebarcommand*="tabcenter"] #sidebar-header {
+  background: #0c0c0d;
+  border-bottom: none !important;
+}
+
+[sidebarcommand*="tabcenter"] ~ #sidebar-splitter {
+  border-right-color: #0c0c0d !important;
+  border-left-color: #0c0c0d !important;
+}
+
+[sidebarcommand*="tabcenter"] #sidebar-switcher-target,
+[sidebarcommand*="tabcenter"] #sidebar-close {
+  filter: invert(100%);
+}
diff --git a/chrome/userChrome.css b/chrome/userChrome.css
@@ -7,3 +7,6 @@
 @import url("./SideBarFox/blur_sidebar.css");
 @import url("./SideBarFox/dynamic_hide_native_tabs.css") (-moz-bool-pref: "uc.tweak.hide-tabs-bar");
 /* @import url("./SideBarFox/autohide_sidebar.css"); */
+
+/* tabcenter optional  */
+@import url("./SideBarFox/tabcenter.css");