diff --git a/userChrome.css b/userChrome.css index ddb698f..b5d2acf 100644 --- a/userChrome.css +++ b/userChrome.css @@ -3,29 +3,31 @@ Title: Drannex42's Personal userChrome.css for Firefox Description: This is my personal userChrome for Firefox, I specifically clean up the interface, change the folder icon to Vivaldi's (much better) and reduce padding in some areas, and add some in others. This overall creates a much more streamlined interface. Features: Streamlines interface, folder icon replacement, works best with my custom Tree Style Tabs interface (check it out! treestyletabs.css in the /firefox/ directory), removes tab bar. - Version: 12021.12.14 :: Fixed sidebar header position and background color. + Version: 12022.01.11 :: Fixed sidebar header, improved borders, improved variables, increased padding for alignment. This pares with the same version sideberry update. */ :root { --sidebar-width: 50px; --toolbar-height: -50px; - --menubar-height: -71px; - --toolmenubar-height: -80px; + --menubar-height: -74px; --sidebar-padding: calc(var(--sidebar-width) + 5px); --toolbar-start-end-padding: 5px !important; --toolbar-start-end-padding: 5px !important; - --sidebar-bg-color: #fafafa; /* Change this if you have a different theme than the default light one to match the rest of your sideberry theme colors */ + + /* Enable this (remove the comment surrounding) if you want a custom sidebar header color, this shouldn't be needed anymore but might be! */ + /* --custom-sidebar-bg: #000 !important; */ } -#main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar > .toolbar-items { - opacity: 0; - pointer-events: none; -} -#main-window:not([tabsintitlebar="true"]) #TabsToolbar { - visibility: collapse !important; + #main-window #TabsToolbar { + visibility: collapse; } + + +#sidebar-box > #browser, +#webextpanels-window{ background: transparent !important } + #sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header { /*! display: none; */ } @@ -35,7 +37,7 @@ /*! overflow: visible !important; */ min-width: 40px; max-width: 40px; - border-right: 1px solid var(--panel-separator-color); + border-right: none !Important /* border-right: 1px solid var(--sidebar-border-color) !important; */ z-index: 2; } @@ -47,7 +49,7 @@ margin-right: -300px !important; } -/*Tree Style Tabb && Sideberry specific sidebar width and size*/ +/*Tree Style Tabs && Sideberry specific sidebar width and size*/ #sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover, #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:hover { @@ -57,10 +59,11 @@ margin-right: -210px !important; } - #sidebar-header { border: none !important; - background: var(--sidebar-bg-color) !important; + border-right: 1px solid var(--sidebar-border-color); + background: var(--custom-sidebar-bg, --sidebar-background-color) !important; + } #sidebar-close, #sidebar-title, #sidebar-switcher-arrow { @@ -72,7 +75,7 @@ border: none !important; margin-left: 4.5px !important; padding-top: 4px !important; - padding-bottom: 3px !important; + padding-bottom: 6px !important; } #sidebar-switcher-target:focus-visible:not(:hover, [open]), #sidebar-close:focus-visible:not(:hover, [open]) { @@ -80,28 +83,16 @@ } -#main-window #PersonalToolbar { - margin-left: var(--sidebar-width); - padding: 2px 5px !important; - padding-top: 0px !important; - margin-top: -3px !important; -} - - /* lock sidebar to height by doing the inverse margin of the toolbar element */ #sidebar-box { + background: var(--custom-sidebar-bg) !important; z-index: 1000 !important; position: relative !important; margin-top: var(--menubar-height) !important; - border-right: 1px solid #ccc; - background: #f6f7f8 !important; + border-right: none; transition: none !important; } -#main-window[title^="Firefox Developer Edition"] #sidebar-box { - margin-top: var(--toolmenubar-height) !important; -} - /* lock sidebar to specified width */ #sidebar-box { min-width: var(--sidebar-width) !important; @@ -113,10 +104,25 @@ transition-timing-function: ease-in; } -.browser-toolbar { - margin-left: var(--sidebar-width); + +#sidebar-box::after { + background: var(--sidebar-border-color) !important; + margin-left: 207px; + z-index: 9999999; + position: absolute; + content: " "; + width: 1px; + height: 100%; + z-index: 999999999; + top: 0; + right: 0px; } +#sidebar-box:hover:after { + top: 42px; +} + + .sidebar-splitter { opacity: 0 !important; width: 0px !important; @@ -124,11 +130,6 @@ --avatar-image-url: none !important; } -/* hide sidebar header for tree style tabs sidebar */ -#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header { - /*! display: none; */ -} - #sidebarMenu-popup .subviewbutton { min-width: 0px; padding: 0; @@ -139,22 +140,32 @@ toolbarseparator { display: none; } -#sidebar { border-right: 0px solid #ccc; overflow: hidden;width: 50px !important;min-width: 50px !important;width: 100% !important;} +#sidebar { border-right: none !important; overflow: hidden;width: 50px !important;min-width: 50px !important;width: 100% !important;} + +#nav-bar-customization-target { + z-index: 99999; + position: relative; +} + +.browser-toolbar { + padding-left: var(--sidebar-width) !important; + position: relative !important; +} + +#PersonalToolbar { + padding: 2px 5px !important; + padding-top: 0px !important; + margin-top: 0px !important; + padding-left: calc(var(--sidebar-width) + 6px) !important; +} + + /* OTHER CUSTOM OPTIONS */ -/* Hide the title bar */ -#titlebar{ visibility: collapse; } /* hide normal horizontal tab bar */ -#TabsToolbar { visibility: collapse; } - - -:root:not([uidensity="compact"]) #back-button > .toolbarbutton-icon { - border: none !important; - background: none !important; -} /* --- Prevent enlargement */ #urlbar[breakout-extend] {