[FB] Verticaltab | Fix CSSs

sorokinvld · Apr 7, 2023 · 96d5776 · 96d5776
1 parent 785032b
commit 96d5776
Showing 1 changed file with 185 additions and 105 deletions.
diff --git a/floorp/browser/base/content/browser-verticaltabs.css b/floorp/browser/base/content/browser-verticaltabs.css
@@ -2,130 +2,210 @@
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-@import url("chrome://browser/skin/tabbar/verticaltab.css");
+   @import url("chrome://browser/skin/tabbar/verticaltab.css");
 
-  .tabbrowser-tab {
-    display: block !important;
+   .tabbrowser-tab {
+     display: block !important;
+     --tab-overflow-pinned-tabs-width: 0px !important;
+   }
+
+  #TabsToolbar-customization-target {
+   width: -moz-available !important;
+   min-width: -moz-available !important;;
+   max-width: -moz-available !important;
+   height: 100% !important;
+   background: transparent ;
   }
-
- #TabsToolbar-customization-target {
-  width: -moz-available !important;
-  min-width: -moz-available !important;;
-  max-width: -moz-available !important;
-  height: 100% !important;
-  background: var(--lwt-accent-color);
+
+  #toolbar-items-verticaltabs {
+   -moz-box-ordinal-group: 0 !important;
+   width: -moz-available;
+   display: block; 
+   overflow-y: scroll;
+   overflow-x: hidden;
+   scrollbar-width: none;
+   min-height: 0px;
+  }
+
+  /* Hide tabtoolber custom elem */
+  #main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar > .toolbar-items {
+   display: none !important;
+  }
+
+  #sidebar-box {
+   max-width: 50em !important;
+   min-width: 3em !important;
+  }
+
+  #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] {
+   margin-inline-start: 0 !important
  }
 
- #toolbar-items-verticaltabs {
-  -moz-box-ordinal-group: 0 !important;
-  display: block; 
-  width:15em;
-  overflow-y: scroll;
-  overflow-x: hidden;
-  scrollbar-width: none;
-  min-height: 0px;
+ #tabbrowser-tabs[overflow] .tabbrowser-tab[last-visible-tab]:not([pinned], [style*="max-width"])[fadein] {
+   margin-inline-end: 0 !important
  }
-
- /* Hide tabtoolber custom elem */
- #main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar > .toolbar-items {
-  display: none !important;
+
+ #tabbrowser-tabs {
+   max-width: -moz-available !important;
+   min-width: -moz-available !important;
+   width: auto;
  }
-
- #sidebar-box {
-  max-width: 50em !important;
-  min-width: 3em !important;
+
+ #TabsToolbar-customization-target > .toolbarbutton-1 {
+   display: none !important;
  }
-
- #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] {
-  margin-inline-start: 0 !important
-}
-
-#tabbrowser-tabs[overflow] .tabbrowser-tab[last-visible-tab]:not([pinned], [style*="max-width"])[fadein] {
-  margin-inline-end: 0 !important
-}
-
-.tab-icon-image:not([pinned]) {
-  padding-inline-end: 1px;
-}
-
- .tabbrowser-tab.tabbrowser-tab:not([pinned]){
-  width: -moz-available !important;
-  min-width: -moz-available !important;
-  max-width: -moz-available !important;
-  padding-inline-start: 5px !important;
-  padding-inline-end: 5px !important;
-}
-
- #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] {
-  position: unset !important;
+
+ .tab-icon-image:not([pinned]) {
+   padding-inline-end: 1px;
  }
-
- :root:not([uidensity="touch"]) #tabbrowser-arrowscrollbox {
-  --scrollbtn-inner-padding: 0px;
-  --scrollbtn-outer-padding: 0px;
-}
-
- #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox::part(scrollbox) {
-  padding-inline: 0 !important;
-}
-
- #tabs-newtab-button {
-  display: block !important;
-  width: -moz-available;
+ .tabbrowser-tab:not([pinned]):not([fadein]) {
+   display: none !important;
+   max-width: 0 !important;
+   min-width: 0 !important;
+   width: 0 !important;
+   max-height: 0 !important;
+   min-height: 0 !important;
+   height: 0 !important;
  }
-
- #alltabs-button, #new-tab-button {
-  display: none !important;
+
+  .tabbrowser-tab.tabbrowser-tab:not([pinned]){
+   width: -moz-available !important;
+   min-width: -moz-available !important;
+   max-width: -moz-available !important;
+   padding-inline-start: 5px !important;
+   padding-inline-end: 5px !important;
  }
-
- #tabs-newtab-button > .toolbarbutton-text {
-  display: none ;
+
+  #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] {
+   position: unset !important;
+  }
+
+  :root:not([uidensity="touch"]) #tabbrowser-arrowscrollbox {
+   --scrollbtn-inner-padding: 0px;
+   --scrollbtn-outer-padding: 0px;
  }
 
- .tabbrowser-tab {
-  width: -moz-available !important;
-  min-width: -moz-available !important;
-  max-width: -moz-available !important;
+  #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox::part(scrollbox) {
+   padding-inline: 0 !important;
  }
+
+  #tabs-newtab-button {
+   display: block !important;
+   width: -moz-available;
+  }
+
+ #tabs-newtab-button:hover {
+  appearance: inherit !important;
+  background: var(--toolbarbutton-hover-background);
+}
 
- .tabbrowser-tab[pinned] {
-  position: unset !important;
-  max-width: 3em !important;
-  width: 3em !important;
-  min-width: 3em !important;
- }
+ #tabs-newtab-button {
+  border-radius: 5px;
+}
 
- .tab-label-container[pinned] {
+#tabs-newtab-button {
+  width: -moz-available;
+  position: unset;
+  appearance: auto;
+  margin-left: 5px;
+  margin-right: 5px;
+}
+
+  #alltabs-button, #new-tab-button {
    display: none !important;
- }
-
- #tabbrowser-arrowscrollbox {
-  display: block;
- }
+  }
 
-  /* disable Firefox's sidebar features */
-
-  #sidebar-header {
-    display: none !important;
+  #tabs-newtab-button > .toolbarbutton-text {
+   display: none ;
   }
-
-  #sidebar {
-    display: none !important;
+
+  .tabbrowser-tab {
+   width: -moz-available !important;
+   min-width: -moz-available !important;
+   max-width: -moz-available !important;
   }
-
-  #sidebar-button {
-    display: none !important;
+
+  .tabbrowser-tab[pinned] {
+   position: unset !important;
+   max-width: 3em !important;
+   width: 3em !important;
+   min-width: 3em !important;
   }
-
-  /* UI size */
-  :root[uidensity=touch]  .tabbrowser-tab[pinned] {
-    max-width: 3.2em !important;
-    width: 3.2em !important;
-    min-width: 3.2em !important;
+
+  .tab-label-container[pinned] {
+    display: none !important;
   }
-
-  :root[uidensity=compact]  .tabbrowser-tab[pinned] {
-    max-width: 2.5em !important;
-    width: 2.5em !important;
-    min-width: 2.5em !important;
+
+  #tabbrowser-arrowscrollbox {
+   display: block;
   }
+
+   /* disable Firefox's sidebar features */
+
+   #sidebar-header {
+     display: none !important;
+   }
+
+   #sidebar {
+     display: none !important;
+   }
+
+   #sidebar-button {
+     display: none !important;
+   }
+
+   /* UI size */
+   :root[uidensity=touch]  .tabbrowser-tab[pinned] {
+     max-width: 3.2em !important;
+     width: 3.2em !important;
+     min-width: 3.2em !important;
+   }
+
+   :root[uidensity=compact]  .tabbrowser-tab[pinned] {
+     max-width: 2.5em !important;
+     width: 2.5em !important;
+     min-width: 2.5em !important;
+   }
+
+   :root[privatebrowsingmode] #PanelUI-menu-button::after {
+     content: url("chrome://global/skin/icons/indicator-private-browsing.svg") "  " "Private" !important;
+     vertical-align: middle;
+     white-space: pre-wrap;
+     display: flex !important;
+     white-space: pre;
+     padding-left: 5px;
+   }
+
+   :root[privatebrowsingmode] #PanelUI-menu-button:hover {
+     background-color: var(--toolbarbutton-hover-background) !important;
+   }
+
+   #PanelUI-menu-button {
+     display: revert !important;
+     border-radius: 4px;
+     margin: 3px;
+   }
+
+   #private-browsing-indicator-with-label {
+     display: none !important;
+   }
+
+   tab > stack, .tabbrowser-tab {
+     height: unset !important;
+     width: -moz-available !important;
+     min-width: -moz-available !important;
+   }
+
+   .tabbrowser-tab[context]:not([pinned]) .tab-icon-stack, tab-label-container {
+     margin-left: 0 !important;
+   }
+
+   :root[tabsintitlebar] #titlebar .titlebar-buttonbox-container:not(#hack) {
+     display: block !important;
+     position: fixed !important;
+     height: unset !important;
+   }
+
+   .tab-stack::before, .tab-stack::after {
+     display: none !important;
+   }