forked from CaptaiNiveau/FirefoxSidebar
Version: 12022.01.11 :: Fixed sidebar header, improved borders, improved variables, increased padding for alignment. This pares with the same version sideberry update.
This commit is contained in:
Macleod Sawyer
GitHub
parent
a8e5f1e3e0
commit
f5a0f77923
1 changed files with 57 additions and 46 deletions
103
userChrome.css
103
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] {
|
||||
|
|
|
|||
Loading…
Reference in a new issue