From d3f8439102144382ca6c7423646a891fce677342 Mon Sep 17 00:00:00 2001 From: Mr-nUUb <36689675+Mr-nUUb@users.noreply.github.com> Date: Wed, 16 Mar 2022 03:16:47 +0100 Subject: [PATCH] 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 --- .gitignore | 1 + changelog.md | 5 + custom.css | 6 - extensions/avatar_size.css | 3 + extensions/bookmark_arrow.css | 4 +- extensions/fix_hidden_bookmarks.css | 3 + extensions/hide_sidebar_switcher.css | 11 ++ extensions/sidebar.css | 97 +++++----- extensions/superbox_removal.css | 65 ++++--- extensions/window_controls.css | 18 +- .../treestyletabs-legacy/treestyletabs.css | 169 ++++++++++-------- prefs.css | 49 ++--- readme.md | 58 +++--- themes/gtk_adwaita.css | 25 +++ themes/gtk_breeze.css | 30 ++++ userChrome.css | 82 +++++++-- 16 files changed, 385 insertions(+), 241 deletions(-) create mode 100644 changelog.md delete mode 100644 custom.css create mode 100644 extensions/avatar_size.css create mode 100644 extensions/fix_hidden_bookmarks.css create mode 100644 extensions/hide_sidebar_switcher.css create mode 100644 themes/gtk_adwaita.css create mode 100644 themes/gtk_breeze.css diff --git a/.gitignore b/.gitignore index e69de29..a15e610 100644 --- a/.gitignore +++ b/.gitignore @@ -0,0 +1 @@ +custom.css diff --git a/changelog.md b/changelog.md new file mode 100644 index 0000000..f8c4dfd --- /dev/null +++ b/changelog.md @@ -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. diff --git a/custom.css b/custom.css deleted file mode 100644 index c09fb3f..0000000 --- a/custom.css +++ /dev/null @@ -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; -} diff --git a/extensions/avatar_size.css b/extensions/avatar_size.css new file mode 100644 index 0000000..3192735 --- /dev/null +++ b/extensions/avatar_size.css @@ -0,0 +1,3 @@ +[label="Firefox Account"] #fxa-avatar-image { + scale: 1.25; +} diff --git a/extensions/bookmark_arrow.css b/extensions/bookmark_arrow.css index b3919c8..3dea2ed 100644 --- a/extensions/bookmark_arrow.css +++ b/extensions/bookmark_arrow.css @@ -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; -} \ No newline at end of file +} diff --git a/extensions/fix_hidden_bookmarks.css b/extensions/fix_hidden_bookmarks.css new file mode 100644 index 0000000..a8d763e --- /dev/null +++ b/extensions/fix_hidden_bookmarks.css @@ -0,0 +1,3 @@ +#sidebar-box { + --menubar-height: -42px !important; +} diff --git a/extensions/hide_sidebar_switcher.css b/extensions/hide_sidebar_switcher.css new file mode 100644 index 0000000..ff86111 --- /dev/null +++ b/extensions/hide_sidebar_switcher.css @@ -0,0 +1,11 @@ +#sidebar-header { + display: none; +} + +#sidebar-box { + --menubar-height: 0px !important; +} + +.browser-toolbar { + padding-left: unset !important; +} diff --git a/extensions/sidebar.css b/extensions/sidebar.css index 9238dd0..ff05164 100644 --- a/extensions/sidebar.css +++ b/extensions/sidebar.css @@ -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; -} \ No newline at end of file +} diff --git a/extensions/superbox_removal.css b/extensions/superbox_removal.css index 5cda77d..08be2c9 100644 --- a/extensions/superbox_removal.css +++ b/extensions/superbox_removal.css @@ -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; } diff --git a/extensions/window_controls.css b/extensions/window_controls.css index a480e8e..3eb5cc2 100644 --- a/extensions/window_controls.css +++ b/extensions/window_controls.css @@ -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 */ diff --git a/firefox/treestyletabs-legacy/treestyletabs.css b/firefox/treestyletabs-legacy/treestyletabs.css index ddb698f..8879565 100644 --- a/firefox/treestyletabs-legacy/treestyletabs.css +++ b/firefox/treestyletabs-legacy/treestyletabs.css @@ -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; } - diff --git a/prefs.css b/prefs.css index 0720f49..013874c 100644 --- a/prefs.css +++ b/prefs.css @@ -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 === */ } diff --git a/readme.md b/readme.md index 6b15bc4..c032986 100644 --- a/readme.md +++ b/readme.md @@ -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) diff --git a/themes/gtk_adwaita.css b/themes/gtk_adwaita.css new file mode 100644 index 0000000..fbfe2ae --- /dev/null +++ b/themes/gtk_adwaita.css @@ -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; +} diff --git a/themes/gtk_breeze.css b/themes/gtk_breeze.css new file mode 100644 index 0000000..ac191af --- /dev/null +++ b/themes/gtk_breeze.css @@ -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; +} diff --git a/userChrome.css b/userChrome.css index 121c292..0c020c0 100644 --- a/userChrome.css +++ b/userChrome.css @@ -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"); + +/* ========================================================================= */