Major rework (#17)

* 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

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.

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;
}

View file

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

View file

@ -1,4 +1,4 @@
/*
/*
Extension: Bookmark Arrow
Description: Adds an arrow next to the bookmark folder.
*/
@ -16,4 +16,4 @@
display: inline-block;
position: absolute;
top: 6.9px;
}
}

View file

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

View file

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

View file

@ -1,5 +1,5 @@
/*
Extension (Core): Sidebar
/*
Extension (Core): Sidebar
Description: This is the core implenration of the sidebar, used in drannex42's FirefoxSidebar.
Repository URL: https://github.com/drannex42/FirefoxSidebar
*/
@ -9,19 +9,22 @@
}
#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; */
}
/*Collapse in default state and add transition*/
#sidebar-box #sidebar:hover {
/*! overflow: visible !important; */
min-width: 40px;
max-width: 40px;
border-right: none !Important /* border-right: 1px solid var(--sidebar-border-color) !important; */
z-index: 2;
/*! overflow: visible !important; */
min-width: 40px;
max-width: 40px;
border-right: none !important; /* border-right: 1px solid var(--sidebar-border-color) !important; */
z-index: 2;
}
/*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="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:hover {
min-width: 260px !important;
max-width: 260px !important;
z-index: 1;
margin-right: -210px !important;
min-width: 260px !important;
max-width: 260px !important;
z-index: 1;
margin-right: -210px !important;
}
#sidebar-header {
border: none !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 {
display: none;
border: none;
}
#sidebar-close,
#sidebar-title,
#sidebar-switcher-arrow {
display: none;
border: none;
}
#sidebar-switcher-target {
border: none !important;
margin-left: 4.5px !important;
padding-top: 4px !important;
padding-bottom: 6px !important;
border: none !important;
margin-left: 4.5px !important;
padding-top: 4px !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;
}
/* lock sidebar to height by doing the inverse margin of the toolbar element */
#sidebar-box {
/* lock sidebar to height by doing the inverse margin of the toolbar element */
background: var(--custom-sidebar-bg) !important;
z-index: 1000 !important;
position: relative !important;
margin-top: var(--menubar-height) !important;
border-right: none;
transition: none !important;
}
/* lock sidebar to specified width */
#sidebar-box {
min-width: var(--sidebar-width) !important;
max-width: var(--sidebar-width) !important;
overflow: hidden !important;
transition-property: width;
transition-duration: .25s;
transition-delay: .25s;
transition-timing-function: ease-in;
/* lock sidebar to specified width */
min-width: var(--sidebar-width) !important;
max-width: var(--sidebar-width) !important;
overflow: hidden !important;
transition-property: width;
transition-duration: 0.25s;
transition-delay: 0.25s;
transition-timing-function: ease-in;
}
#sidebar-box::after {
background: var(--sidebar-border-color) !important;
margin-left: 207px;
@ -96,34 +97,38 @@
content: " ";
width: 1px;
height: 100%;
z-index: 999999999;
top: 0;
right: 0px;
}
#sidebar-box:hover:after {
top: 42px;
top: 42px;
}
.sidebar-splitter {
opacity: 0 !important;
width: 0px !important;
border: none !Important;
border: none !important;
--avatar-image-url: none !important;
}
#sidebarMenu-popup .subviewbutton {
min-width: 0px;
padding: 0;
margin: 0 !Important;
min-width: 0px;
padding: 0;
margin: 0 !important;
}
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 {
z-index: 99999;
@ -140,4 +145,4 @@ toolbarseparator {
padding-top: 0px !important;
margin-top: 0px !important;
padding-left: calc(var(--sidebar-width) + 6px) !important;
}
}

View file

@ -1,64 +1,73 @@
/*
Extension: Superbox Removal (and compaction)
Description: This removes the superbox and fixes some padding around the urlbar.
/*
Extension: Superbox Removal (and compaction)
Description: This removes the superbox and fixes some padding around the urlbar.
Repository URL: https://github.com/drannex42/FirefoxSidebar
*/
/* --- Prevent enlargement */
#urlbar[breakout-extend] {
top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important;
left: 0 !important;
width: 100% !important;
top: calc(
(var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2
) !important;
left: 0 !important;
width: 100% !important;
}
#urlbar[breakout-extend] #urlbar-input-container {
height: var(--urlbar-height) !important;
/*padding: 0px !important;*/
padding-block: 0px !important;
padding-inline: 0px !important;
height: var(--urlbar-height) !important;
/* padding: 0px !important; */
padding-block: 0px !important;
padding-inline: 0px !important;
}
.urlbarView-row {
padding: 0px 2px 0px 2px;
padding: 0px 2px 0px 2px;
}
/* END Prevent enlargement --- */
/*/* --- Reduce row paddings to make them more compact */
.urlbarView-row {
padding: 2px 0px !important;
line-height: 1.2em !imortant;
margin: -1px;
margin-bottom:0px;
padding: 2px 0px !important;
line-height: 1.2em !important;
margin: -1px;
margin-bottom: 0px;
}
.urlbarView-row-inner {
padding-bottom: 6px !important;
padding-bottom: 6px !important;
}
.urlbarView {
margin: 0px !important;
width: 100% !important;
margin: 0px !important;
width: 100% !important;
}
/* END Reduce row paddings to make them more compact --- */
/* Disable Urlbar Animation */
#urlbar[breakout][breakout-extend][breakout-extend-animate] > #urlbar-background {
animation-name: none !important;
animation: none !important;
#urlbar[breakout][breakout-extend][breakout-extend-animate]
> #urlbar-background {
animation-name: none !important;
animation: none !important;
}
/* END Disable Urlbar Animation */
/* --- More compact "Search with Google" rows */
.urlbarView-row[dynamicType="onboardTabToSearch"] > .urlbarView-row-inner {
min-height: auto !important;
width: auto !important;
min-height: auto !important;
width: auto !important;
}
.urlbarView-row[dynamicType="onboardTabToSearch"] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon {
margin-bottom: -1px;
.urlbarView-row[dynamicType="onboardTabToSearch"]
> .urlbarView-row-inner
> .urlbarView-no-wrap
> .urlbarView-favicon {
margin-bottom: -1px;
}
/* END More compact "Search with Google" rows --- */
/* 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 */
#urlbar-background, #searchbar {
#urlbar-background,
#searchbar {
box-shadow: none !important;
}

View file

@ -1,4 +1,4 @@
/*
/*
Extension: Window Controls / Client Side Decorations (CSD)
Description: This brings the window controls into the main bar (where the address bar exists). Please see the prefs.css folder for switching the sides from left to right.
Repository URL: https://github.com/drannex42/FirefoxSidebar
@ -13,7 +13,7 @@
/* reserve space for buttons */
#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;
}
@ -22,28 +22,22 @@
visibility: visible !important;
position: fixed !important;
display: block;
top: 5px;
z-index: 999999999;
top: var(--csd-top, inherit);
right: var(--csd-right, inherit);
left: var(--csd-left, inherit);
z-index: 10;
max-width: var(--csd-width);
}
/* fix ugly background color */
#navigator-toolbox {
background-color: transparent !important;
}
/* hide buttons in fullscreen mode (video player and F11) */
#main-window[inFullscreen="true"] .titlebar-buttonbox-container,
#main-window[inDOMFullscreen="true"] .titlebar-buttonbox-container {
/* display: none !important; */
visibility: hidden !important;
}
/* remove empty space when in fullscreen mode (F11) */
#main-window[inFullscreen="true"] #nav-bar {
margin-right: var(--csd-left) !important;
margin-left: var(--csd-right) !important;
padding-right: 0px !important;
margin-left: 0px !important;
}
/* END Client Side Decorations / Window Controls */

View file

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

View file

@ -4,34 +4,43 @@
--menubar-height: -74px;
--sidebar-padding: calc(var(--sidebar-width) + 5px);
--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 ====== */
/* === Window Control / Client Side Display Settings === */
--csd-width: 100px;
/* === Window Control / Client Side Display Settings === */
--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*/
/* Left Side:
Default: --csd-left: 50px; --csd-margin-left: 92px;
--csd-left: 50px;
--csd-margin-left: 92px;
*/
/*
If you are putting this on the left or right side uncomment the side
preferences below and comment the other
*/
/* Right Side:
Defaults: --csd-right: 0px; --csd-margin-right: 95px;
*/
--csd-right: 0px;
--csd-margin-right: 95px;
/* === END: Window Control / Client Side Display Settings === */
/*
Left Side
Default: --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 === */
}

View file

@ -1,87 +1,81 @@
# Firefox Sidebar / Edge-like Vertical Tabs (but better!)
**Note:** This repo was originally a subdirectory of [drannex42/linux-utils](https://github.com/drannex42//linux-utils/), but has now become a standalone repo for my Firefox Sidebar CSS and Utilities. The original linux-utils files can be found [here](https://github.com/drannex42/utils).
**Note:** This repo was originally a subdirectory of [drannex42/linux-utils](https://github.com/drannex42//linux-utils/), but has now become a standalone repo for my Firefox Sidebar CSS and Utilities. The original linux-utils files can be found [here](https://github.com/drannex42/utils).
## Example
Video of the extension in action: [https://i.imgur.com/HaLvkFc.mp4](https://i.imgur.com/HaLvkFc.mp4)
## Features:
- Edge-like vertical tab design
- Tree style tab layout support (works with Sideberry & TST (legacy) version)
## Features:
- Edge-like vertical tab design
- Tree style tab layout support (works with Sideberry & TST (legacy) version)
- Dynamic Indentation
- Automatic theme configuration for light and dark themes
- Custom theme configuration using Sideberry
- Support for tab groups
- Automatic theme configuration for light and dark themes
- Custom theme configuration using Sideberry
- Support for tab groups
- Support for Tab Containers with visual identification
- Pinned tabs (right click to close)
- Pinned tabs (right click to close)
- Built in CSS Extension Management
## Updates
Release notes have migrated to [here](https://github.com/drannex42/FirefoxSidebar/releases). You can find prior release notes before v12021.12.22 [here](https://github.com/drannex42/FirefoxSidebar/releases/tag/v12021.12.22).
Release notes have migrated to [here](https://github.com/drannex42/FirefoxSidebar/releases). You can find prior release notes before v12021.12.22 [here](https://github.com/drannex42/FirefoxSidebar/releases/tag/v12021.12.22).
# How to use
To use FirefoxSidebar you will need to clone this repo into your firefox profile as the `chrome` folder and then follow the Sideberry section below. Both are outlined below in how to do so.
To use FirefoxSidebar you will need to clone this repo into your firefox profile as the `chrome` folder and then follow the Sideberry section below. Both are outlined below in how to do so.
## 1. userChrome.css
## 1. userChrome.css
Follow the instructions for adding this repository to your Firefox Profile.
1. Navigate to `about:profiles` in your address bar
2. Click on the 'open root folder` button for your current profile
2. Click on the 'open root folder` button for your current profile
3. Open this folder in your terminal
4. Clone this repo with the following command: `git clone https://github.com/drannex42/FirefoxSidebar.git "chrome"`
5. In Firefox navigate to `about:config` in your address bar
6. change the characteristic `toolkit.legacyUserProfileCustomizations.stylesheets` to `true`
6. change the characteristic `toolkit.legacyUserProfileCustomizations.stylesheets` to `true`
7. Restart Firefox
You could skip the clone step entirely if you manually add the FirefoxSidebar files to the "chrome" folder in your Firefox Profile (you will need to make a `chrome` folder if it doesn't exist!).
You could skip the clone step entirely if you manually add the FirefoxSidebar files to the "chrome" folder in your Firefox Profile (you will need to make a `chrome` folder if it doesn't exist!).
Visit [userchrome.org](https://www.userchrome.org/how-create-userchrome-css.html) if you are confused or have any questions.
Visit [userchrome.org](https://www.userchrome.org/how-create-userchrome-css.html) if you are confused or have any questions.
## 2. Sideberry
Load the `sideberry-data.json` file into your Sideberry addon by using the 'import' section under 'Help'.
Load the `sideberry-data.json` file into your Sideberry addon by using the 'import' section under 'Help'.
If you dislike any of the theme presets for dark or light themes, or you have a particular color scheme in mind then navigate to Sideberry Settings > Style Editor (found at the end of the settings sidebar). The preference is to replace the values in the right panel, not in the theme editor to the left - this way you can easily update to newer versions in the future.
If you dislike any of the theme presets for dark or light themes, or you have a particular color scheme in mind then navigate to Sideberry Settings > Style Editor (found at the end of the settings sidebar). The preference is to replace the values in the right panel, not in the theme editor to the left - this way you can easily update to newer versions in the future.
### Extensions
All extensions can be found in `/extensions`.
All extensions can be found in `/extensions`.
In version 2022.02.23 we broke up the components into extensions using css imports. This makes adding and removing features incredibly easy.
In version 2022.02.23 we broke up the components into extensions using css imports. This makes adding and removing features incredibly easy.
**The following extensions are added:**
- [Window Controls / Client Side Decorations (CSD)](/extensions/window_controls.css)
- [Window Controls / Client Side Decorations (CSD)](/extensions/window_controls.css)
- This adds the window controls to be inline with your address bar.
- [Superbox Removal](/extensions/superbox_removal.css)
- [Superbox Removal](/extensions/superbox_removal.css)
- This removes the superbox and fixes the address bar padding.
- [Bookmark Arrows](/extensions/bookmark_arrow.css)
- [Bookmark Arrows](/extensions/bookmark_arrow.css)
- This adds a nice little arrow next to your bookmark folders.
## 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
There are a number of preferences you can enable or disable in the `prefs.css` file. There are examples and descriptions of the different preferences within that file.
### Custom Tweaks
### Custom Tweaks
For ease of use I suggest using the `custom.css` file to for your personal tweaks.
For ease of use I suggest using the `custom.css` file to for your personal tweaks.
### If you use FF without the bookmarks bar
Then the sidebar switcher will be missing, you need to add this to your custom.css
```
#sidebar-box {
--menubar-height: -42px !important;
}
```
Then the sidebar switcher will be missing, edit `custom.css` and uncomment the relevant section.
## 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;
}

View file

@ -1,27 +1,71 @@
/*
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
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
*/
@import url('./prefs.css');
/* 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
/*
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
*/
@import url('./extensions/window_controls.css');
@import url('./extensions/bookmark_arrow.css');
@import url('./extensions/superbox_removal.css');
@import url("./prefs.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");
/* ========================================================================= */