forked from CaptaiNiveau/FirefoxSidebar
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
GitHub
parent
270b90c76b
commit
d3f8439102
16 changed files with 385 additions and 241 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -0,0 +1 @@
|
||||||
|
custom.css
|
||||||
5
changelog.md
Normal file
5
changelog.md
Normal 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.
|
||||||
|
|
@ -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
3
extensions/avatar_size.css
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
[label="Firefox Account"] #fxa-avatar-image {
|
||||||
|
scale: 1.25;
|
||||||
|
}
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
/*
|
/*
|
||||||
Extension: Bookmark Arrow
|
Extension: Bookmark Arrow
|
||||||
Description: Adds an arrow next to the bookmark folder.
|
Description: Adds an arrow next to the bookmark folder.
|
||||||
*/
|
*/
|
||||||
|
|
@ -16,4 +16,4 @@
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 6.9px;
|
top: 6.9px;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
3
extensions/fix_hidden_bookmarks.css
Normal file
3
extensions/fix_hidden_bookmarks.css
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
#sidebar-box {
|
||||||
|
--menubar-height: -42px !important;
|
||||||
|
}
|
||||||
11
extensions/hide_sidebar_switcher.css
Normal file
11
extensions/hide_sidebar_switcher.css
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
#sidebar-header {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar-box {
|
||||||
|
--menubar-height: 0px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.browser-toolbar {
|
||||||
|
padding-left: unset !important;
|
||||||
|
}
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
/*
|
/*
|
||||||
Extension (Core): Sidebar
|
Extension (Core): Sidebar
|
||||||
Description: This is the core implenration of the sidebar, used in drannex42's FirefoxSidebar.
|
Description: This is the core implenration of the sidebar, used in drannex42's FirefoxSidebar.
|
||||||
Repository URL: https://github.com/drannex42/FirefoxSidebar
|
Repository URL: https://github.com/drannex42/FirefoxSidebar
|
||||||
*/
|
*/
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -140,4 +145,4 @@ toolbarseparator {
|
||||||
padding-top: 0px !important;
|
padding-top: 0px !important;
|
||||||
margin-top: 0px !important;
|
margin-top: 0px !important;
|
||||||
padding-left: calc(var(--sidebar-width) + 6px) !important;
|
padding-left: calc(var(--sidebar-width) + 6px) !important;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,64 +1,73 @@
|
||||||
/*
|
/*
|
||||||
Extension: Superbox Removal (and compaction)
|
Extension: Superbox Removal (and compaction)
|
||||||
Description: This removes the superbox and fixes some padding around the urlbar.
|
Description: This removes the superbox and fixes some padding around the urlbar.
|
||||||
Repository URL: https://github.com/drannex42/FirefoxSidebar
|
Repository URL: https://github.com/drannex42/FirefoxSidebar
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/* --- 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;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
/*
|
/*
|
||||||
Extension: Window Controls / Client Side Decorations (CSD)
|
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.
|
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
|
Repository URL: https://github.com/drannex42/FirefoxSidebar
|
||||||
|
|
@ -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 */
|
||||||
|
|
|
||||||
|
|
@ -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
49
prefs.css
|
|
@ -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
|
||||||
/* Left Side:
|
preferences below and comment the other
|
||||||
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;
|
Left Side
|
||||||
*/
|
Default: --csd-left: 50px; --csd-margin-left: 92px;
|
||||||
--csd-right: 0px;
|
*/
|
||||||
--csd-margin-right: 95px;
|
/*
|
||||||
|
--csd-left: 50px;
|
||||||
/* === END: Window Control / Client Side Display Settings === */
|
--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 === */
|
||||||
}
|
}
|
||||||
|
|
|
||||||
58
readme.md
58
readme.md
|
|
@ -1,87 +1,81 @@
|
||||||
# Firefox Sidebar / Edge-like Vertical Tabs (but better!)
|
# 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
|
## Example
|
||||||
Video of the extension in action: [https://i.imgur.com/HaLvkFc.mp4](https://i.imgur.com/HaLvkFc.mp4)
|
Video of the extension in action: [https://i.imgur.com/HaLvkFc.mp4](https://i.imgur.com/HaLvkFc.mp4)
|
||||||
|
|
||||||
## Features:
|
## Features:
|
||||||
- Edge-like vertical tab design
|
- Edge-like vertical tab design
|
||||||
- Tree style tab layout support (works with Sideberry & TST (legacy) version)
|
- Tree style tab layout support (works with Sideberry & TST (legacy) version)
|
||||||
- Dynamic Indentation
|
- Dynamic Indentation
|
||||||
- Automatic theme configuration for light and dark themes
|
- Automatic theme configuration for light and dark themes
|
||||||
- Custom theme configuration using Sideberry
|
- Custom theme configuration using Sideberry
|
||||||
- Support for tab groups
|
- Support for tab groups
|
||||||
- Support for Tab Containers with visual identification
|
- Support for Tab Containers with visual identification
|
||||||
- Pinned tabs (right click to close)
|
- Pinned tabs (right click to close)
|
||||||
- Built in CSS Extension Management
|
- Built in CSS Extension Management
|
||||||
|
|
||||||
## Updates
|
## 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
|
# 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.
|
Follow the instructions for adding this repository to your Firefox Profile.
|
||||||
|
|
||||||
1. Navigate to `about:profiles` in your address bar
|
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
|
3. Open this folder in your terminal
|
||||||
4. Clone this repo with the following command: `git clone https://github.com/drannex42/FirefoxSidebar.git "chrome"`
|
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
|
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
|
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
|
## 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
|
### 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:**
|
**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.
|
- 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.
|
- 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.
|
- This adds a nice little arrow next to your bookmark folders.
|
||||||
|
|
||||||
## 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
|
||||||
|
|
||||||
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.
|
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
|
### 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
25
themes/gtk_adwaita.css
Normal 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
30
themes/gtk_breeze.css
Normal 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;
|
||||||
|
}
|
||||||
|
|
@ -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");
|
||||||
|
|
||||||
|
/* ========================================================================= */
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue