moonleay/FirefoxSidebar
1
0
Fork 0
forked from CaptaiNiveau/FirefoxSidebar
Code Pull requests Activity

Major rework (#17)

Browse source 
* Update userChrome.css

* Update userChrome.css

* formatting

* make csd top configurable

* fix Z index of CSD

* fix background (and round corners in GNOME)

* remove unnecessary background color fix

* more formatting

* move sidebar switcher code to css file

* even more formatting, fix typos

* remove ugly border near sidebar switcher

* add custom presets

* Revert "remove ugly border near sidebar switcher"

This reverts commit b8fd71d97c23c860a84c68aba74fb8e4253aaa7f.

* remove empty space in fullscreen mode, remove unnecessary stuff

* heavy rework, add first theme

* rename first theme, add second

* add KDE Plastik (same spacing as Oxygen)

* somehow my system messed up..., fixed theme names
This commit is contained in:
Mr-nUUb 2022-03-16 03:16:47 +01:00 committed by GitHub
parent 270b90c76b
commit d3f8439102
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 385 additions and 241 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

@ -0,0 +1 @@
custom.css

5
changelog.md Normal file
View file

@ -0,0 +1,5 @@
# unreleased
Heavy rework, formatting, more extensions, first theme.
# 12022.02.23
Implemented an extension system, and seperated different components into their own files.

6
custom.css
View file

@ -1,6 +0,0 @@
/* OTHER CUSTOM OPTIONS */
/* Change the Avatar size for the Firefox Account to what makes sense */
[label="Firefox Account"] #fxa-avatar-image {
scale: 1.25;
}

3
extensions/avatar_size.css Normal file
View file

@ -0,0 +1,3 @@
[label="Firefox Account"] #fxa-avatar-image {
scale: 1.25;
}

3
extensions/fix_hidden_bookmarks.css Normal file
View file

@ -0,0 +1,3 @@
#sidebar-box {
--menubar-height: -42px !important;
}

11
extensions/hide_sidebar_switcher.css Normal file
View file

@ -0,0 +1,11 @@
#sidebar-header {
display: none;
}
#sidebar-box {
--menubar-height: 0px !important;
}
.browser-toolbar {
padding-left: unset !important;
}

91
extensions/sidebar.css
View file

@ -9,19 +9,22 @@
} }
#sidebar-box > #browser, #sidebar-box > #browser,
#webextpanels-window{ background: transparent !important } #webextpanels-window {
background: transparent !important;
}
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header { #sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]
#sidebar-header {
/*! display: none; */ /*! display: none; */
} }
/*Collapse in default state and add transition*/ /*Collapse in default state and add transition*/
#sidebar-box #sidebar:hover { #sidebar-box #sidebar:hover {
/*! overflow: visible !important; */ /*! overflow: visible !important; */
min-width: 40px; min-width: 40px;
max-width: 40px; max-width: 40px;
border-right: none !Important /* border-right: 1px solid var(--sidebar-border-color) !important; */ border-right: none !important; /* border-right: 1px solid var(--sidebar-border-color) !important; */
z-index: 2; z-index: 2;
} }
/*All other sidebar-boxes should be larger on hover*/ /*All other sidebar-boxes should be larger on hover*/
@ -36,58 +39,56 @@
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover, #sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover,
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:hover { #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:hover {
min-width: 260px !important; min-width: 260px !important;
max-width: 260px !important; max-width: 260px !important;
z-index: 1; z-index: 1;
margin-right: -210px !important; margin-right: -210px !important;
} }
#sidebar-header { #sidebar-header {
border: none !important; border: none !important;
border-right: 1px solid var(--sidebar-border-color); border-right: 1px solid var(--sidebar-border-color);
background: var(--custom-sidebar-bg, --sidebar-background-color) !important; background: var(--custom-sidebar-bg, --sidebar-background-color) !important;
} }
#sidebar-close, #sidebar-title, #sidebar-switcher-arrow { #sidebar-close,
display: none; #sidebar-title,
border: none; #sidebar-switcher-arrow {
} display: none;
border: none;
}
#sidebar-switcher-target { #sidebar-switcher-target {
border: none !important; border: none !important;
margin-left: 4.5px !important; margin-left: 4.5px !important;
padding-top: 4px !important; padding-top: 4px !important;
padding-bottom: 6px !important; padding-bottom: 6px !important;
} }
#sidebar-switcher-target:focus-visible:not(:hover, [open]), #sidebar-close:focus-visible:not(:hover, [open]) { #sidebar-switcher-target:focus-visible:not(:hover, [open]),
#sidebar-close:focus-visible:not(:hover, [open]) {
outline: none !important; outline: none !important;
} }
/* lock sidebar to height by doing the inverse margin of the toolbar element */
#sidebar-box { #sidebar-box {
/* lock sidebar to height by doing the inverse margin of the toolbar element */
background: var(--custom-sidebar-bg) !important; background: var(--custom-sidebar-bg) !important;
z-index: 1000 !important; z-index: 1000 !important;
position: relative !important; position: relative !important;
margin-top: var(--menubar-height) !important; margin-top: var(--menubar-height) !important;
border-right: none; border-right: none;
transition: none !important; transition: none !important;
}
/* lock sidebar to specified width */ /* lock sidebar to specified width */
#sidebar-box { min-width: var(--sidebar-width) !important;
min-width: var(--sidebar-width) !important; max-width: var(--sidebar-width) !important;
max-width: var(--sidebar-width) !important; overflow: hidden !important;
overflow: hidden !important; transition-property: width;
transition-property: width; transition-duration: 0.25s;
transition-duration: .25s; transition-delay: 0.25s;
transition-delay: .25s; transition-timing-function: ease-in;
transition-timing-function: ease-in;
} }
#sidebar-box::after { #sidebar-box::after {
background: var(--sidebar-border-color) !important; background: var(--sidebar-border-color) !important;
margin-left: 207px; margin-left: 207px;
@ -96,34 +97,38 @@
content: " "; content: " ";
width: 1px; width: 1px;
height: 100%; height: 100%;
z-index: 999999999;
top: 0; top: 0;
right: 0px; right: 0px;
} }
#sidebar-box:hover:after { #sidebar-box:hover:after {
top: 42px; top: 42px;
} }
.sidebar-splitter { .sidebar-splitter {
opacity: 0 !important; opacity: 0 !important;
width: 0px !important; width: 0px !important;
border: none !Important; border: none !important;
--avatar-image-url: none !important; --avatar-image-url: none !important;
} }
#sidebarMenu-popup .subviewbutton { #sidebarMenu-popup .subviewbutton {
min-width: 0px; min-width: 0px;
padding: 0; padding: 0;
margin: 0 !Important; margin: 0 !important;
} }
toolbarseparator { toolbarseparator {
display: none; display: none;
} }
#sidebar { border-right: none !important; 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 { #nav-bar-customization-target {
z-index: 99999; z-index: 99999;

59
extensions/superbox_removal.css
View file

@ -5,60 +5,69 @@
*/ */
/* --- Prevent enlargement */ /* --- Prevent enlargement */
#urlbar[breakout-extend] { #urlbar[breakout-extend] {
top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important; top: calc(
left: 0 !important; (var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2
width: 100% !important; ) !important;
left: 0 !important;
width: 100% !important;
} }
#urlbar[breakout-extend] #urlbar-input-container { #urlbar[breakout-extend] #urlbar-input-container {
height: var(--urlbar-height) !important; height: var(--urlbar-height) !important;
/*padding: 0px !important;*/ /* padding: 0px !important; */
padding-block: 0px !important; padding-block: 0px !important;
padding-inline: 0px !important; padding-inline: 0px !important;
} }
.urlbarView-row { .urlbarView-row {
padding: 0px 2px 0px 2px; padding: 0px 2px 0px 2px;
} }
/* END Prevent enlargement --- */ /* END Prevent enlargement --- */
/*/* --- Reduce row paddings to make them more compact */ /*/* --- Reduce row paddings to make them more compact */
.urlbarView-row { .urlbarView-row {
padding: 2px 0px !important; padding: 2px 0px !important;
line-height: 1.2em !imortant; line-height: 1.2em !important;
margin: -1px; margin: -1px;
margin-bottom:0px; margin-bottom: 0px;
} }
.urlbarView-row-inner { .urlbarView-row-inner {
padding-bottom: 6px !important; padding-bottom: 6px !important;
} }
.urlbarView { .urlbarView {
margin: 0px !important; margin: 0px !important;
width: 100% !important; width: 100% !important;
} }
/* END Reduce row paddings to make them more compact --- */ /* END Reduce row paddings to make them more compact --- */
/* Disable Urlbar Animation */ /* Disable Urlbar Animation */
#urlbar[breakout][breakout-extend][breakout-extend-animate] > #urlbar-background { #urlbar[breakout][breakout-extend][breakout-extend-animate]
animation-name: none !important; > #urlbar-background {
animation: none !important; animation-name: none !important;
animation: none !important;
} }
/* END Disable Urlbar Animation */
/* --- More compact "Search with Google" rows */ /* --- More compact "Search with Google" rows */
.urlbarView-row[dynamicType="onboardTabToSearch"] > .urlbarView-row-inner { .urlbarView-row[dynamicType="onboardTabToSearch"] > .urlbarView-row-inner {
min-height: auto !important; min-height: auto !important;
width: auto !important; width: auto !important;
} }
.urlbarView-row[dynamicType="onboardTabToSearch"] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon { .urlbarView-row[dynamicType="onboardTabToSearch"]
margin-bottom: -1px; > .urlbarView-row-inner
> .urlbarView-no-wrap
> .urlbarView-favicon {
margin-bottom: -1px;
} }
/* END More compact "Search with Google" rows --- */ /* END More compact "Search with Google" rows --- */
/* Remove active border on the addressbar when in focus */ /* Remove active border on the addressbar when in focus */
#nav-bar{ --toolbar-field-focus-border-color: #ccc } #nav-bar {
--toolbar-field-focus-border-color: #ccc;
}
/* Remove box shadow on address bar */ /* Remove box shadow on address bar */
#urlbar-background, #searchbar { #urlbar-background,
#searchbar {
box-shadow: none !important; box-shadow: none !important;
} }

16
extensions/window_controls.css
View file

@ -13,7 +13,7 @@
/* reserve space for buttons */ /* reserve space for buttons */
#nav-bar { #nav-bar {
padding-right: var(--csd-margin-right, 10px) !important; /* The addition of the "10px" is so that there will be an area where you can grab and move the window */ padding-right: var(--csd-margin-right) !important;
margin-left: var(--csd-margin-left) !important; margin-left: var(--csd-margin-left) !important;
} }
@ -22,28 +22,22 @@
visibility: visible !important; visibility: visible !important;
position: fixed !important; position: fixed !important;
display: block; display: block;
top: 5px; z-index: 999999999;
top: var(--csd-top, inherit);
right: var(--csd-right, inherit); right: var(--csd-right, inherit);
left: var(--csd-left, inherit); left: var(--csd-left, inherit);
z-index: 10;
max-width: var(--csd-width); max-width: var(--csd-width);
} }
/* fix ugly background color */
#navigator-toolbox {
background-color: transparent !important;
}
/* hide buttons in fullscreen mode (video player and F11) */ /* hide buttons in fullscreen mode (video player and F11) */
#main-window[inFullscreen="true"] .titlebar-buttonbox-container, #main-window[inFullscreen="true"] .titlebar-buttonbox-container,
#main-window[inDOMFullscreen="true"] .titlebar-buttonbox-container { #main-window[inDOMFullscreen="true"] .titlebar-buttonbox-container {
/* display: none !important; */
visibility: hidden !important; visibility: hidden !important;
} }
/* remove empty space when in fullscreen mode (F11) */ /* remove empty space when in fullscreen mode (F11) */
#main-window[inFullscreen="true"] #nav-bar { #main-window[inFullscreen="true"] #nav-bar {
margin-right: var(--csd-left) !important; padding-right: 0px !important;
margin-left: var(--csd-right) !important; margin-left: 0px !important;
} }
/* END Client Side Decorations / Window Controls */ /* END Client Side Decorations / Window Controls */

169
firefox/treestyletabs-legacy/treestyletabs.css
View file

@ -1,4 +1,3 @@
/* /*
Title: Drannex42's Personal userChrome.css for Firefox 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. 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.
@ -17,26 +16,28 @@
--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 */ --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 */
} }
#main-window[tabsintitlebar="true"]:not([extradragspace="true"])
#main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar > .toolbar-items { #TabsToolbar
> .toolbar-items {
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
} }
#main-window:not([tabsintitlebar="true"]) #TabsToolbar { #main-window:not([tabsintitlebar="true"]) #TabsToolbar {
visibility: collapse !important; visibility: collapse !important;
} }
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header { #sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]
#sidebar-header {
/*! display: none; */ /*! display: none; */
} }
/*Collapse in default state and add transition*/ /*Collapse in default state and add transition*/
#sidebar-box #sidebar:hover { #sidebar-box #sidebar:hover {
/*! overflow: visible !important; */ /*! overflow: visible !important; */
min-width: 40px; min-width: 40px;
max-width: 40px; max-width: 40px;
border-right: 1px solid var(--panel-separator-color); border-right: 1px solid var(--panel-separator-color);
z-index: 2; z-index: 2;
} }
/*All other sidebar-boxes should be larger on hover*/ /*All other sidebar-boxes should be larger on hover*/
@ -51,35 +52,36 @@
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover, #sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover,
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:hover { #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:hover {
min-width: 260px !important; min-width: 260px !important;
max-width: 260px !important; max-width: 260px !important;
z-index: 1; z-index: 1;
margin-right: -210px !important; margin-right: -210px !important;
} }
#sidebar-header { #sidebar-header {
border: none !important; border: none !important;
background: var(--sidebar-bg-color) !important; background: var(--sidebar-bg-color) !important;
} }
#sidebar-close, #sidebar-title, #sidebar-switcher-arrow { #sidebar-close,
display: none; #sidebar-title,
border: none; #sidebar-switcher-arrow {
} display: none;
border: none;
}
#sidebar-switcher-target { #sidebar-switcher-target {
border: none !important; border: none !important;
margin-left: 4.5px !important; margin-left: 4.5px !important;
padding-top: 4px !important; padding-top: 4px !important;
padding-bottom: 3px !important; padding-bottom: 3px !important;
} }
#sidebar-switcher-target:focus-visible:not(:hover, [open]), #sidebar-close:focus-visible:not(:hover, [open]) { #sidebar-switcher-target:focus-visible:not(:hover, [open]),
#sidebar-close:focus-visible:not(:hover, [open]) {
outline: none !important; outline: none !important;
} }
#main-window #PersonalToolbar { #main-window #PersonalToolbar {
margin-left: var(--sidebar-width); margin-left: var(--sidebar-width);
padding: 2px 5px !important; padding: 2px 5px !important;
@ -87,7 +89,6 @@
margin-top: -3px !important; margin-top: -3px !important;
} }
/* lock sidebar to height by doing the inverse margin of the toolbar element */ /* lock sidebar to height by doing the inverse margin of the toolbar element */
#sidebar-box { #sidebar-box {
z-index: 1000 !important; z-index: 1000 !important;
@ -104,13 +105,13 @@
/* lock sidebar to specified width */ /* lock sidebar to specified width */
#sidebar-box { #sidebar-box {
min-width: var(--sidebar-width) !important; min-width: var(--sidebar-width) !important;
max-width: var(--sidebar-width) !important; max-width: var(--sidebar-width) !important;
overflow: hidden !important; overflow: hidden !important;
transition-property: width; transition-property: width;
transition-duration: .25s; transition-duration: 0.25s;
transition-delay: .25s; transition-delay: 0.25s;
transition-timing-function: ease-in; transition-timing-function: ease-in;
} }
.browser-toolbar { .browser-toolbar {
@ -120,36 +121,45 @@
.sidebar-splitter { .sidebar-splitter {
opacity: 0 !important; opacity: 0 !important;
width: 0px !important; width: 0px !important;
border: none !Important; border: none !important;
--avatar-image-url: none !important; --avatar-image-url: none !important;
} }
/* hide sidebar header for tree style tabs sidebar */ /* hide sidebar header for tree style tabs sidebar */
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header { #sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]
#sidebar-header {
/*! display: none; */ /*! display: none; */
} }
#sidebarMenu-popup .subviewbutton { #sidebarMenu-popup .subviewbutton {
min-width: 0px; min-width: 0px;
padding: 0; padding: 0;
margin: 0 !Important; margin: 0 !important;
} }
toolbarseparator { toolbarseparator {
display: none; display: none;
} }
#sidebar { border-right: 0px solid #ccc; overflow: hidden;width: 50px !important;min-width: 50px !important;width: 100% !important;} #sidebar {
border-right: 0px solid #ccc;
overflow: hidden;
width: 50px !important;
min-width: 50px !important;
width: 100% !important;
}
/* OTHER CUSTOM OPTIONS */ /* OTHER CUSTOM OPTIONS */
/* Hide the title bar */ /* Hide the title bar */
#titlebar{ visibility: collapse; } #titlebar {
visibility: collapse;
}
/* hide normal horizontal tab bar */ /* hide normal horizontal tab bar */
#TabsToolbar { visibility: collapse; } #TabsToolbar {
visibility: collapse;
}
:root:not([uidensity="compact"]) #back-button > .toolbarbutton-icon { :root:not([uidensity="compact"]) #back-button > .toolbarbutton-icon {
border: none !important; border: none !important;
@ -158,69 +168,77 @@ toolbarseparator {
/* --- Prevent enlargement */ /* --- Prevent enlargement */
#urlbar[breakout-extend] { #urlbar[breakout-extend] {
top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important; top: calc(
left: 0 !important; (var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2
width: 100% !important; ) !important;
left: 0 !important;
width: 100% !important;
} }
#urlbar[breakout-extend] #urlbar-input-container { #urlbar[breakout-extend] #urlbar-input-container {
height: var(--urlbar-height) !important; height: var(--urlbar-height) !important;
/*padding: 0px !important;*/ /*padding: 0px !important;*/
padding-block: 0px !important; padding-block: 0px !important;
padding-inline: 0px !important; padding-inline: 0px !important;
} }
.urlbarView-row { .urlbarView-row {
padding: 0px 2px 0px 2px; padding: 0px 2px 0px 2px;
} }
/* END Prevent enlargement --- */ /* END Prevent enlargement --- */
/*/* --- Reduce row paddings to make them more compact */ /*/* --- Reduce row paddings to make them more compact */
.urlbarView-row { .urlbarView-row {
padding: 2px 0px !important; padding: 2px 0px !important;
line-height: 1.2em !imortant; line-height: 1.2em !important;
margin: -1px; margin: -1px;
margin-bottom:0px; margin-bottom: 0px;
} }
.urlbarView-row-inner { .urlbarView-row-inner {
padding-bottom: 6px !important; padding-bottom: 6px !important;
} }
.urlbarView { .urlbarView {
margin: 0px !important; margin: 0px !important;
width: 100% !important; width: 100% !important;
} }
/* END Reduce row paddings to make them more compact --- */ /* END Reduce row paddings to make them more compact --- */
/* Disable Urlbar Animation */ /* Disable Urlbar Animation */
#urlbar[breakout][breakout-extend][breakout-extend-animate] > #urlbar-background { #urlbar[breakout][breakout-extend][breakout-extend-animate]
animation-name: none !important; > #urlbar-background {
animation: none !important; animation-name: none !important;
animation: none !important;
} }
/* --- More compact "Search with Google" rows */ /* --- More compact "Search with Google" rows */
.urlbarView-row[dynamicType="onboardTabToSearch"] > .urlbarView-row-inner { .urlbarView-row[dynamicType="onboardTabToSearch"] > .urlbarView-row-inner {
min-height: auto !important; min-height: auto !important;
width: auto !important; width: auto !important;
} }
.urlbarView-row[dynamicType="onboardTabToSearch"] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon { .urlbarView-row[dynamicType="onboardTabToSearch"]
margin-bottom: -1px; > .urlbarView-row-inner
> .urlbarView-no-wrap
> .urlbarView-favicon {
margin-bottom: -1px;
} }
/* END More compact "Search with Google" rows --- */ /* END More compact "Search with Google" rows --- */
/* Remove active border on the addressbar when in focus */ /* Remove active border on the addressbar when in focus */
#nav-bar{ --toolbar-field-focus-border-color: #ccc } #nav-bar {
--toolbar-field-focus-border-color: #ccc;
}
/* Remove box shadow on address bar */ /* Remove box shadow on address bar */
#urlbar-background, #searchbar { #urlbar-background,
#searchbar {
box-shadow: none !important; box-shadow: none !important;
} }
/* Change Bookmark Folder Icon to the one Vivialdi uses */ /* Change Bookmark Folder Icon to the one Vivialdi uses */
.bookmark-item[container] { .bookmark-item[container] {
list-style-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYgMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMi4zNTcxNyAzLjM2MDc1QzIuMTMzMjMgMy41ODY5MyAyLjAwNTE1IDMuODkyMjEgMiA0LjIxMjAzVjExLjc4NzJDMS45OTQ0MSAxMS45NDc5IDIuMDIxNjMgMTIuMTA4MSAyLjA3OTk2IDEyLjI1NzdDMi4xMzgyOCAxMi40MDczIDIuMjI2NDggMTIuNTQzMSAyLjMzOTA0IDEyLjY1NjhDMi40NTE2IDEyLjc3MDUgMi41ODYxMyAxMi44NTk2IDIuNzM0MjUgMTIuOTE4NUMyLjg4MjM3IDEyLjk3NzQgMy4wNDA5MSAxMy4wMDQ5IDMuMiAxMi45OTkzSDEyLjhDMTMuMTE2NyAxMi45OTQxIDEzLjQxODkgMTIuODY0NyAxMy42NDI4IDEyLjYzODVDMTMuODY2OCAxMi40MTIzIDEzLjk5NDggMTIuMTA3MSAxNCAxMS43ODcyTDE0IDZDMTQgNS41IDEzLjUgNSAxMyA1SDhMNi44IDNIMy4yQzIuODgzMzQgMy4wMDUyIDIuNTgxMSAzLjEzNDU3IDIuMzU3MTcgMy4zNjA3NVpNMi45OTkzOSAxMS44MjJMMyAxMS44MDQ2VjQuMjIzMThDMy4wMDIyMyA0LjE2MTcxIDMuMDI3NDEgNC4xMDUxMSAzLjA2Nzc5IDQuMDY0MzJDMy4xMDc3MyA0LjAyMzk4IDMuMTU5MjkgNC4wMDIwOCAzLjIxMTYxIDRINi4yNDU4OUw3LjUgNkgxMi44QzEyLjkxMDUgNiAxMyA2LjA4Nzk2IDEzIDYuMTk4NDJDMTMgNy4xMzEwNyAxMyAxMS4wNjM2IDEzIDExLjc3NjFDMTIuOTk3OCAxMS44Mzc2IDEyLjk3MjYgMTEuODk0MiAxMi45MzIyIDExLjkzNUMxMi44OTIzIDExLjk3NTMgMTIuODQwNyAxMS45OTcyIDEyLjc4ODQgMTEuOTk5M0gzLjE4MjI3TDMuMTY0NTUgMTEuOTk5OUMzLjE0NDA2IDEyLjAwMDYgMy4xMjM0MyAxMS45OTcxIDMuMTAzODMgMTEuOTg5M0MzLjA4NDIxIDExLjk4MTUgMy4wNjU2NyAxMS45Njk0IDMuMDQ5NjYgMTEuOTUzM0MzLjAzMzY0IDExLjkzNzEgMy4wMjA1MSAxMS45MTcxIDMuMDExNjUgMTEuODk0NEMzLjAwMjc4IDExLjg3MTcgMi45OTg1MyAxMS44NDcgMi45OTkzOSAxMS44MjJaIj48L3BhdGg+CiAgPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMi45OTkzOSAxMS44MjJMMyAxMS44MDQ2VjQuMjIzMThDMy4wMDIyMyA0LjE2MTcxIDMuMDI3NDEgNC4xMDUxMSAzLjA2Nzc5IDQuMDY0MzJDMy4xMDc3MyA0LjAyMzk4IDMuMTU5MjkgNC4wMDIwOCAzLjIxMTYxIDRINi4yNDU4OUw3LjUgNkgxMi44QzEyLjkxMDUgNiAxMyA2LjA4Nzk2IDEzIDYuMTk4NDJDMTMgNy4xMzEwNyAxMyAxMS4wNjM2IDEzIDExLjc3NjFDMTIuOTk3OCAxMS44Mzc2IDEyLjk3MjYgMTEuODk0MiAxMi45MzIyIDExLjkzNUMxMi44OTIzIDExLjk3NTMgMTIuODQwNyAxMS45OTcyIDEyLjc4ODQgMTEuOTk5M0gzLjE4MjI3TDMuMTY0NTUgMTEuOTk5OUMzLjE0NDA2IDEyLjAwMDYgMy4xMjM0MyAxMS45OTcxIDMuMTAzODMgMTEuOTg5M0MzLjA4NDIxIDExLjk4MTUgMy4wNjU2NyAxMS45Njk0IDMuMDQ5NjcgMTEuOTUzM0MzLjAzMzY0IDExLjkzNzEgMy4wMjA1MSAxMS45MTcxIDMuMDExNjUgMTEuODk0NEMzLjAwMjc4IDExLjg3MTcgMi45OTg1MyAxMS44NDcgMi45OTkzOSAxMS44MjJaIiBmaWxsLW9wYWNpdHk9IjAuMSI+PC9wYXRoPgo8L3N2Zz4=") !important; list-style-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYgMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMi4zNTcxNyAzLjM2MDc1QzIuMTMzMjMgMy41ODY5MyAyLjAwNTE1IDMuODkyMjEgMiA0LjIxMjAzVjExLjc4NzJDMS45OTQ0MSAxMS45NDc5IDIuMDIxNjMgMTIuMTA4MSAyLjA3OTk2IDEyLjI1NzdDMi4xMzgyOCAxMi40MDczIDIuMjI2NDggMTIuNTQzMSAyLjMzOTA0IDEyLjY1NjhDMi40NTE2IDEyLjc3MDUgMi41ODYxMyAxMi44NTk2IDIuNzM0MjUgMTIuOTE4NUMyLjg4MjM3IDEyLjk3NzQgMy4wNDA5MSAxMy4wMDQ5IDMuMiAxMi45OTkzSDEyLjhDMTMuMTE2NyAxMi45OTQxIDEzLjQxODkgMTIuODY0NyAxMy42NDI4IDEyLjYzODVDMTMuODY2OCAxMi40MTIzIDEzLjk5NDggMTIuMTA3MSAxNCAxMS43ODcyTDE0IDZDMTQgNS41IDEzLjUgNSAxMyA1SDhMNi44IDNIMy4yQzIuODgzMzQgMy4wMDUyIDIuNTgxMSAzLjEzNDU3IDIuMzU3MTcgMy4zNjA3NVpNMi45OTkzOSAxMS44MjJMMyAxMS44MDQ2VjQuMjIzMThDMy4wMDIyMyA0LjE2MTcxIDMuMDI3NDEgNC4xMDUxMSAzLjA2Nzc5IDQuMDY0MzJDMy4xMDc3MyA0LjAyMzk4IDMuMTU5MjkgNC4wMDIwOCAzLjIxMTYxIDRINi4yNDU4OUw3LjUgNkgxMi44QzEyLjkxMDUgNiAxMyA2LjA4Nzk2IDEzIDYuMTk4NDJDMTMgNy4xMzEwNyAxMyAxMS4wNjM2IDEzIDExLjc3NjFDMTIuOTk3OCAxMS44Mzc2IDEyLjk3MjYgMTEuODk0MiAxMi45MzIyIDExLjkzNUMxMi44OTIzIDExLjk3NTMgMTIuODQwNyAxMS45OTcyIDEyLjc4ODQgMTEuOTk5M0gzLjE4MjI3TDMuMTY0NTUgMTEuOTk5OUMzLjE0NDA2IDEyLjAwMDYgMy4xMjM0MyAxMS45OTcxIDMuMTAzODMgMTEuOTg5M0MzLjA4NDIxIDExLjk4MTUgMy4wNjU2NyAxMS45Njk0IDMuMDQ5NjYgMTEuOTUzM0MzLjAzMzY0IDExLjkzNzEgMy4wMjA1MSAxMS45MTcxIDMuMDExNjUgMTEuODk0NEMzLjAwMjc4IDExLjg3MTcgMi45OTg1MyAxMS44NDcgMi45OTkzOSAxMS44MjJaIj48L3BhdGg+CiAgPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMi45OTkzOSAxMS44MjJMMyAxMS44MDQ2VjQuMjIzMThDMy4wMDIyMyA0LjE2MTcxIDMuMDI3NDEgNC4xMDUxMSAzLjA2Nzc5IDQuMDY0MzJDMy4xMDc3MyA0LjAyMzk4IDMuMTU5MjkgNC4wMDIwOCAzLjIxMTYxIDRINi4yNDU4OUw3LjUgNkgxMi44QzEyLjkxMDUgNiAxMyA2LjA4Nzk2IDEzIDYuMTk4NDJDMTMgNy4xMzEwNyAxMyAxMS4wNjM2IDEzIDExLjc3NjFDMTIuOTk3OCAxMS44Mzc2IDEyLjk3MjYgMTEuODk0MiAxMi45MzIyIDExLjkzNUMxMi44OTIzIDExLjk3NTMgMTIuODQwNyAxMS45OTcyIDEyLjc4ODQgMTEuOTk5M0gzLjE4MjI3TDMuMTY0NTUgMTEuOTk5OUMzLjE0NDA2IDEyLjAwMDYgMy4xMjM0MyAxMS45OTcxIDMuMTAzODMgMTEuOTg5M0MzLjA4NDIxIDExLjk4MTUgMy4wNjU2NyAxMS45Njk0IDMuMDQ5NjcgMTEuOTUzM0MzLjAzMzY0IDExLjkzNzEgMy4wMjA1MSAxMS45MTcxIDMuMDExNjUgMTEuODk0NEMzLjAwMjc4IDExLjg3MTcgMi45OTg1MyAxMS44NDcgMi45OTkzOSAxMS44MjJaIiBmaWxsLW9wYWNpdHk9IjAuMSI+PC9wYXRoPgo8L3N2Zz4=") !important;
padding-right: 15px !important; padding-right: 15px !important;
margin-right: -1px !important; margin-right: -1px !important;
} }
/* Add down arrow to folders on the bookmark bar */ /* Add down arrow to folders on the bookmark bar */
.bookmark-item[container]::after { .bookmark-item[container]::after {
@ -235,6 +253,5 @@ toolbarseparator {
/* Change the Avatar size for the Firefox Account to what makes sense */ /* Change the Avatar size for the Firefox Account to what makes sense */
[label="Firefox Account"] #fxa-avatar-image { [label="Firefox Account"] #fxa-avatar-image {
scale: 1.175; scale: 1.175;
} }

49
prefs.css
View file

@ -4,34 +4,43 @@
--menubar-height: -74px; --menubar-height: -74px;
--sidebar-padding: calc(var(--sidebar-width) + 5px); --sidebar-padding: calc(var(--sidebar-width) + 5px);
--toolbar-start-end-padding: 5px !important; --toolbar-start-end-padding: 5px !important;
--toolbar-start-end-padding: 5px !important;
/* 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; */
/*
Uncomment this if you want a custom sidebar header color,
this shouldn't be needed anymore but might be!
*/
/* --custom-sidebar-bg: #000 !important; */
/* ====== Extension Settings ====== */ /* ====== Extension Settings ====== */
/* === Window Control / Client Side Display Settings === */ /* === Window Control / Client Side Display Settings === */
--csd-width: 100px; --csd-width: 100px;
--csd-top: 6px;
/* If you are putting this on the left or right side uncomment the side preferences below and comment the other*/ /*
If you are putting this on the left or right side uncomment the side
preferences below and comment the other
*/
/* Left Side: /*
Default: --csd-left: 50px; --csd-margin-left: 92px; Left Side
Default: --csd-left: 50px; --csd-margin-left: 92px;
--csd-left: 50px; */
--csd-margin-left: 92px; /*
*/ --csd-left: 50px;
--csd-margin-left: 92px;
/* Right Side: */
Defaults: --csd-right: 0px; --csd-margin-right: 95px; /* ====== */
*/
--csd-right: 0px;
--csd-margin-right: 95px;
/* === END: Window Control / Client Side Display Settings === */
/*
Right Side
Defaults: --csd-right: 0px; --csd-margin-right: 95px;
*/
--csd-right: 0px;
--csd-margin-right: 95px;
/* ====== */
/* === END: Window Control / Client Side Display Settings === */
} }

10
readme.md
View file

@ -63,7 +63,7 @@ In version 2022.02.23 we broke up the components into extensions using css impor
## User Settings ## User Settings
Please backup the `prefs.css` and the `custom.css` files before updating to a new versionof FirefoxSidebar. There may be new additions to these files, so you will need to re-add your preferencess to the file accordingly. These files should be updated *far less* than the other files, but just to make sure please save them. Please backup the `prefs.css` and the `custom.css` files before updating to a new versionof FirefoxSidebar. There may be new additions to these files, so you will need to re-add your preferencess to the file accordingly. These files should be updated *far less* than the other files, but just to make sure please save them.
### Preferences ### Preferences
@ -75,13 +75,7 @@ For ease of use I suggest using the `custom.css` file to for your personal tweak
### If you use FF without the bookmarks bar ### If you use FF without the bookmarks bar
Then the sidebar switcher will be missing, you need to add this to your custom.css Then the sidebar switcher will be missing, edit `custom.css` and uncomment the relevant section.
```
#sidebar-box {
--menubar-height: -42px !important;
}
```
## TreeStyleTabs (Legacy) ## TreeStyleTabs (Legacy)

25
themes/gtk_adwaita.css Normal file
View file

@ -0,0 +1,25 @@
@import url("../extensions/window_controls.css");
@import url("../extensions/hide_sidebar_switcher.css");
.browser-toolbar {
padding-left: 2px !important;
position: unset !important;
background-color: unset !important;
background-image: unset !important;
}
#nav-bar {
padding-right: 127px !important;
}
.titlebar-buttonbox-container {
right: 20px;
}
toolbarbutton {
margin: 3px !important;
}
toolbar[id="nav-bar"] {
min-height: 46px !important;
}

30
themes/gtk_breeze.css Normal file
View file

@ -0,0 +1,30 @@
@import url("../extensions/window_controls.css");
@import url("../extensions/hide_sidebar_switcher.css");
.browser-toolbar {
padding-left: 2px !important;
position: unset !important;
background-color: unset !important;
background-image: unset !important;
}
#nav-bar {
padding-right: 84px !important;
}
.titlebar-buttonbox-container {
top: 12px !important;
right: 0px !important;
}
toolbarbutton {
margin: 1px !important;
}
.titlebar-buttonbox-container > .titlebar-buttonbox > toolbarbutton {
margin-right: -2px !important;
}
toolbar[id="nav-bar"] {
min-height: 46px !important;
}

82
userChrome.css
View file

@ -1,27 +1,71 @@
/* /*
Title: Drannex42's FirefoxSidebar / Vertical Tabs Title: Drannex42's FirefoxSidebar / Vertical Tabs
Description: Vertical tab design for Firefox with dynamic indentation:: Sideberry and TreeStyleTabs (Legacy) themes available! Description: Vertical tab design for Firefox with dynamic indentation::
Sideberry and TreeStyleTabs (Legacy) themes available!
Repository URL: https://github.com/drannex42/FirefoxSidebar Repository URL: https://github.com/drannex42/FirefoxSidebar
Version: 12022.02.23 :: Implemented an extension system, and seperated different components into their own files. Version: 12022.02.23
*/ */
/* Preferences / Settings :: /*
Use this file to set your preferences (left or right window controls, colors, margins, this will save them in one place for easier future updating Preferences / Settings
*/ Use this file to set your preferences (left or right window controls,
@import url('./prefs.css'); colors, margins, this will save them in one place for easier future updating
/* Sidebar ::
This file is for the sidebar implementation
*/
@import url('./extensions/sidebar.css');
/* Extensions ::
To enable or disable specific extensions just comment/uncomment the line below
*/ */
@import url('./extensions/window_controls.css'); @import url("./prefs.css");
@import url('./extensions/bookmark_arrow.css');
@import url('./extensions/superbox_removal.css');
@import url('./custom.css'); /* ========================================================================= */
/*
Sidebar
This file is for the sidebar implementation
*/
@import url("./extensions/sidebar.css");
/*
Extensions
To enable/disable specific extensions just comment/uncomment the line below.
*/
/* add CSD / window controls */
@import url("./extensions/window_controls.css");
/* add a little arrow next to folders in bookmarks toolbar */
@import url("./extensions/bookmark_arrow.css");
/* heavily customize superbox (flat look, colors, smaller entries,...) */
@import url("./extensions/superbox_removal.css");
/* change the avatar size for the Firefox Account to what makes sense */
@import url("./extensions/avatar_size.css");
/* fix sidebar switcher if bookmarks toolbar is hidden */
/* @import url("./extensions/fix_hidden_bookmarks.css"); */
/* hide sidebar switcher */
/* @import url("./extensions/hide_sidebar_switcher.css"); */
/* ========================================================================= */
/*
Themes
To enable/disable specific theme just comment/uncomment the line below.
Please enable only one theme at a time!
*/
/* GTK Adwaita */
/* @import url("./themes/gtk_adwaita.css"); */
/* GTK Breeze */
/* @import url("./themes/gtk_breeze.css"); */
/* ========================================================================= */
/*
Custom tweaks
Create a file called `custom.css` and place your tweaks there.
*/
@import url("./custom.css");
/* ========================================================================= */