forked from CaptaiNiveau/FirefoxSidebar
Added a new notice to the readme about prefs, and added a 'scrubber' area for moving the window around with CSD on the left side
This commit is contained in:
Macleod Sawyer
parent
c0d23fc79e
commit
bfae38f9ca
12 changed files with 376 additions and 269 deletions
0
.gitignore
vendored
Normal file
0
.gitignore
vendored
Normal file
7
custom.css
Normal file
7
custom.css
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
/* OTHER CUSTOM OPTIONS */
|
||||||
|
|
||||||
|
/* hide normal horizontal tab bar */
|
||||||
|
/* Change the Avatar size for the Firefox Account to what makes sense */
|
||||||
|
[label="Firefox Account"] #fxa-avatar-image {
|
||||||
|
scale: 1.25;
|
||||||
|
}
|
||||||
BIN
example.mp4
BIN
example.mp4
Binary file not shown.
19
extensions/bookmark_arrow.css
Normal file
19
extensions/bookmark_arrow.css
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
/*
|
||||||
|
Extension: Bookmark Arrow
|
||||||
|
Description: Adds an arrow next to the bookmark folder.
|
||||||
|
*/
|
||||||
|
|
||||||
|
.bookmark-item[container] {
|
||||||
|
margin-right: 10px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Add down arrow to folders on the bookmark bar */
|
||||||
|
.bookmark-item[container]::after {
|
||||||
|
content: "ˇ";
|
||||||
|
opacity: 0.55;
|
||||||
|
padding-left: 3.5px;
|
||||||
|
font-size: 23px;
|
||||||
|
display: inline-block;
|
||||||
|
position: absolute;
|
||||||
|
top: 6.9px;
|
||||||
|
}
|
||||||
143
extensions/sidebar.css
Normal file
143
extensions/sidebar.css
Normal file
|
|
@ -0,0 +1,143 @@
|
||||||
|
/*
|
||||||
|
Extension (Core): Sidebar
|
||||||
|
Description: This is the core implenration of the sidebar, used in drannex42's FirefoxSidebar.
|
||||||
|
Repository URL: https://github.com/drannex42/FirefoxSidebar
|
||||||
|
*/
|
||||||
|
|
||||||
|
#main-window #TabsToolbar {
|
||||||
|
visibility: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar-box > #browser,
|
||||||
|
#webextpanels-window{ background: transparent !important }
|
||||||
|
|
||||||
|
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
|
||||||
|
/*! display: none; */
|
||||||
|
}
|
||||||
|
|
||||||
|
/*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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*All other sidebar-boxes should be larger on hover*/
|
||||||
|
#sidebar-box:hover {
|
||||||
|
min-width: 350px !important;
|
||||||
|
max-width: 350px !important;
|
||||||
|
z-index: 1;
|
||||||
|
margin-right: -300px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*Tree Style Tabs && Sideberry specific sidebar width and size*/
|
||||||
|
|
||||||
|
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover,
|
||||||
|
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:hover {
|
||||||
|
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-switcher-target {
|
||||||
|
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]) {
|
||||||
|
outline: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* lock sidebar to height by doing the inverse margin of the toolbar element */
|
||||||
|
#sidebar-box {
|
||||||
|
background: var(--custom-sidebar-bg) !important;
|
||||||
|
z-index: 1000 !important;
|
||||||
|
position: relative !important;
|
||||||
|
margin-top: var(--menubar-height) !important;
|
||||||
|
border-right: 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#sidebar-box::after {
|
||||||
|
background: var(--sidebar-border-color) !important;
|
||||||
|
margin-left: 207px;
|
||||||
|
z-index: 9999999;
|
||||||
|
position: absolute;
|
||||||
|
content: " ";
|
||||||
|
width: 1px;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 999999999;
|
||||||
|
top: 0;
|
||||||
|
right: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar-box:hover:after {
|
||||||
|
top: 42px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.sidebar-splitter {
|
||||||
|
opacity: 0 !important;
|
||||||
|
width: 0px !important;
|
||||||
|
border: none !Important;
|
||||||
|
--avatar-image-url: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebarMenu-popup .subviewbutton {
|
||||||
|
min-width: 0px;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0 !Important;
|
||||||
|
}
|
||||||
|
|
||||||
|
toolbarseparator {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar { border-right: none !important; overflow: hidden;width: 50px !important;min-width: 50px !important;width: 100% !important;}
|
||||||
|
|
||||||
|
#nav-bar-customization-target {
|
||||||
|
z-index: 99999;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.browser-toolbar {
|
||||||
|
padding-left: var(--sidebar-width) !important;
|
||||||
|
position: relative !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#PersonalToolbar {
|
||||||
|
padding: 2px 5px !important;
|
||||||
|
padding-top: 0px !important;
|
||||||
|
margin-top: 0px !important;
|
||||||
|
padding-left: calc(var(--sidebar-width) + 6px) !important;
|
||||||
|
}
|
||||||
64
extensions/superbox_removal.css
Normal file
64
extensions/superbox_removal.css
Normal file
|
|
@ -0,0 +1,64 @@
|
||||||
|
/*
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
#urlbar[breakout-extend] #urlbar-input-container {
|
||||||
|
height: var(--urlbar-height) !important;
|
||||||
|
/*padding: 0px !important;*/
|
||||||
|
padding-block: 0px !important;
|
||||||
|
padding-inline: 0px !important;
|
||||||
|
}
|
||||||
|
.urlbarView-row {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
.urlbarView-row-inner {
|
||||||
|
padding-bottom: 6px !important;
|
||||||
|
}
|
||||||
|
.urlbarView {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- More compact "Search with Google" rows */
|
||||||
|
.urlbarView-row[dynamicType="onboardTabToSearch"] > .urlbarView-row-inner {
|
||||||
|
min-height: auto !important;
|
||||||
|
width: auto !important;
|
||||||
|
}
|
||||||
|
.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 }
|
||||||
|
|
||||||
|
/* Remove box shadow on address bar */
|
||||||
|
#urlbar-background, #searchbar {
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
49
extensions/window_controls.css
Normal file
49
extensions/window_controls.css
Normal file
|
|
@ -0,0 +1,49 @@
|
||||||
|
/*
|
||||||
|
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
|
||||||
|
Contributors: Mr-nUUb, Xanaxus, Drannex42
|
||||||
|
Issue URL: https://github.com/drannex42/FirefoxSidebar/issues/14
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* allow the buttons to appear */
|
||||||
|
.browser-toolbar {
|
||||||
|
position: unset !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 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 */
|
||||||
|
margin-left: var(--csd-margin-left) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* move buttons next to menu button */
|
||||||
|
.titlebar-buttonbox-container {
|
||||||
|
visibility: visible !important;
|
||||||
|
position: fixed !important;
|
||||||
|
display: block;
|
||||||
|
top: 5px;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
/* END Client Side Decorations / Window Controls */
|
||||||
37
prefs.css
Normal file
37
prefs.css
Normal file
|
|
@ -0,0 +1,37 @@
|
||||||
|
:root {
|
||||||
|
--sidebar-width: 50px;
|
||||||
|
--toolbar-height: -50px;
|
||||||
|
--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; */
|
||||||
|
|
||||||
|
|
||||||
|
/* ====== Entension Settings ====== */
|
||||||
|
|
||||||
|
/* === Window Control / Client Side Display Settings === */
|
||||||
|
--csd-width: 100px;
|
||||||
|
|
||||||
|
/* 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;
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* Right Side:
|
||||||
|
Defaults: --csd-right: 0px; --csd-margin-right: 95px;
|
||||||
|
*/
|
||||||
|
--csd-right: 0px;
|
||||||
|
--csd-margin-right: 95px;
|
||||||
|
|
||||||
|
/* === END: Window Control / Client Side Display Settings === */
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
64
readme.md
64
readme.md
|
|
@ -14,6 +14,7 @@ Video of the extension in action: [https://i.imgur.com/HaLvkFc.mp4](https://i.im
|
||||||
- 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
|
||||||
|
|
||||||
## Updates
|
## Updates
|
||||||
|
|
||||||
|
|
@ -21,45 +22,56 @@ Release notes have migrated to [here](https://github.com/drannex42/FirefoxSideba
|
||||||
|
|
||||||
# How to use
|
# How to use
|
||||||
|
|
||||||
To use my custom styles you will need to copy the userChrome.css to your firefox profile 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. Sideberry
|
## 1. userChrome.css
|
||||||
|
|
||||||
Add the sideberry-data-*.json file to your Sideberry addon by using the 'import' section under 'Help'.
|
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
|
||||||
|
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. InFfirefox navigate to `about:config` in your address bar
|
||||||
|
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!).
|
||||||
|
|
||||||
|
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'.
|
||||||
|
|
||||||
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.
|
||||||
|
|
||||||
To change the color:
|
### Extensions
|
||||||
|
|
||||||
**--tabs-font** :: Changes the default font (uses system font by default) to change the font size.
|
All extensions can be found in `/extensions`.
|
||||||
- I recommend changing it via Sideberry Settings > Appearance > Font Size
|
|
||||||
- default: 1rem -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
|
||||||
|
|
||||||
**--tabs-fg** :: Changes the tabs text color
|
In version 2022.02.23 we broke up the components into extensions using css imports. This makes adding and removing features incredibly easy.
|
||||||
- default: #000
|
|
||||||
|
|
||||||
**--tabs-bg-hover** :: Changes the hover background color for tabs
|
**The following extensions are added:**
|
||||||
- default: #dedddaff
|
|
||||||
|
|
||||||
**--tabs-activated-bg** :: This is the active tab background color
|
- [Window Controls / Client Side Decorations (CSD)](/extensions/window_controls.css)
|
||||||
- default: #fff
|
- This adds the window controls to be inline with your address bar.
|
||||||
|
- [Superbox Removal](/extensions/superbox_removal.css)
|
||||||
|
- This removes the superbox and fixes the address bar padding.
|
||||||
|
- [Bookmark Arrows](/extensions/bookmark_arrow.css)
|
||||||
|
- This adds a nice little arrow next to your bookmark folders.
|
||||||
|
|
||||||
**--tabs-activated-shadow** :: Changes the active tabs shadow color
|
## User Settings
|
||||||
- default: rgba(0,0,0,0.15);
|
|
||||||
|
|
||||||
## 2. userChrome.css
|
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.
|
||||||
|
|
||||||
Follow the instructions for adding a userChrome.css file to your Firefox Profile.
|
### Preferences
|
||||||
|
|
||||||
- Navigate to `[about:profiles]` in your address bar
|
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.
|
||||||
- Click on the 'open root folder` button for your current profile
|
|
||||||
- Create a 'chrome' folder (all lowercase)
|
|
||||||
- Add the userChrome.css file to that folder
|
|
||||||
- In firefox navigate to `[about:config]` in your address bar
|
|
||||||
- change the characteristic `toolkit.legacyUserProfileCustomizations.stylesheets` to `true`
|
|
||||||
- Restart Firefox
|
|
||||||
- Visit [userchrome.org](https://www.userchrome.org/how-create-userchrome-css.html) if you are confused or have any questions.
|
|
||||||
|
|
||||||
|
### Custom Extensions
|
||||||
|
|
||||||
|
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
|
||||||
|
|
||||||
|
|
@ -67,7 +79,7 @@ Then the sidebar switcher will be missing, you need to add this to your userChro
|
||||||
|
|
||||||
```
|
```
|
||||||
#sidebar-box {
|
#sidebar-box {
|
||||||
--menubar-height: -40px !important;
|
--menubar-height: -42px !important;
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
|
||||||
262
userChrome.css
262
userChrome.css
|
|
@ -1,251 +1,27 @@
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Title: Drannex42's Personal userChrome.css for Firefox
|
Title: Drannex42's FirefoxSidebar / Vertical Tabs
|
||||||
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: Vertical tab design for Firefox with dynamic indentation:: Sideberry and TreeStyleTabs (Legacy) themes available!
|
||||||
Features: Streamlines interface, folder icon replacement, works best with my custom Tree Style Tabs interface (check it out! treestyletabs.css in the /firefox/ directory), removes tab bar.
|
Repository URL: https://github.com/drannex42/FirefoxSidebar
|
||||||
Version: 12022.01.11 :: Fixed sidebar header, improved borders, improved variables, increased padding for alignment. This pares with the same version sideberry update.
|
Version: 12022.02.23 :: Implemented an extension system, and seperated different components into their own files.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
:root {
|
/* Preferences / Settings ::
|
||||||
--sidebar-width: 50px;
|
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
|
||||||
--toolbar-height: -50px;
|
*/
|
||||||
--menubar-height: -74px;
|
@import url('./prefs.css');
|
||||||
--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! */
|
/* Sidebar::
|
||||||
/* --custom-sidebar-bg: #000 !important; */
|
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
|
||||||
|
*/
|
||||||
|
|
||||||
#main-window #TabsToolbar {
|
@import url('./extensions/window_controls.css');
|
||||||
visibility: collapse;
|
@import url('./extensions/bookmark_arrow.css');
|
||||||
}
|
@import url('./extensions/superbox_removal.css');
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
#sidebar-box > #browser,
|
|
||||||
#webextpanels-window{ background: transparent !important }
|
|
||||||
|
|
||||||
#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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*All other sidebar-boxes should be larger on hover*/
|
|
||||||
#sidebar-box:hover {
|
|
||||||
min-width: 350px !important;
|
|
||||||
max-width: 350px !important;
|
|
||||||
z-index: 1;
|
|
||||||
margin-right: -300px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*Tree Style Tabs && Sideberry specific sidebar width and size*/
|
|
||||||
|
|
||||||
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover,
|
|
||||||
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:hover {
|
|
||||||
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-switcher-target {
|
|
||||||
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]) {
|
|
||||||
outline: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* lock sidebar to height by doing the inverse margin of the toolbar element */
|
|
||||||
#sidebar-box {
|
|
||||||
background: var(--custom-sidebar-bg) !important;
|
|
||||||
z-index: 1000 !important;
|
|
||||||
position: relative !important;
|
|
||||||
margin-top: var(--menubar-height) !important;
|
|
||||||
border-right: 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
#sidebar-box::after {
|
|
||||||
background: var(--sidebar-border-color) !important;
|
|
||||||
margin-left: 207px;
|
|
||||||
z-index: 9999999;
|
|
||||||
position: absolute;
|
|
||||||
content: " ";
|
|
||||||
width: 1px;
|
|
||||||
height: 100%;
|
|
||||||
z-index: 999999999;
|
|
||||||
top: 0;
|
|
||||||
right: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sidebar-box:hover:after {
|
|
||||||
top: 42px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.sidebar-splitter {
|
|
||||||
opacity: 0 !important;
|
|
||||||
width: 0px !important;
|
|
||||||
border: none !Important;
|
|
||||||
--avatar-image-url: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sidebarMenu-popup .subviewbutton {
|
|
||||||
min-width: 0px;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0 !Important;
|
|
||||||
}
|
|
||||||
|
|
||||||
toolbarseparator {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sidebar { border-right: none !important; overflow: hidden;width: 50px !important;min-width: 50px !important;width: 100% !important;}
|
|
||||||
|
|
||||||
#nav-bar-customization-target {
|
|
||||||
z-index: 99999;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.browser-toolbar {
|
|
||||||
padding-left: var(--sidebar-width) !important;
|
|
||||||
position: relative !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#PersonalToolbar {
|
|
||||||
padding: 2px 5px !important;
|
|
||||||
padding-top: 0px !important;
|
|
||||||
margin-top: 0px !important;
|
|
||||||
padding-left: calc(var(--sidebar-width) + 6px) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* OTHER CUSTOM OPTIONS */
|
|
||||||
|
|
||||||
|
|
||||||
/* hide normal horizontal tab bar */
|
|
||||||
|
|
||||||
/* --- Prevent enlargement */
|
|
||||||
#urlbar[breakout-extend] {
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
.urlbarView-row {
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
.urlbarView-row-inner {
|
|
||||||
padding-bottom: 6px !important;
|
|
||||||
}
|
|
||||||
.urlbarView {
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- More compact "Search with Google" rows */
|
|
||||||
.urlbarView-row[dynamicType="onboardTabToSearch"] > .urlbarView-row-inner {
|
|
||||||
min-height: auto !important;
|
|
||||||
width: auto !important;
|
|
||||||
}
|
|
||||||
.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 }
|
|
||||||
|
|
||||||
/* Remove box shadow on address bar */
|
|
||||||
#urlbar-background, #searchbar {
|
|
||||||
box-shadow: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Add down arrow to folders on the bookmark bar */
|
|
||||||
.bookmark-item[container]::after {
|
|
||||||
content: "ˇ";
|
|
||||||
opacity: 0.55;
|
|
||||||
padding-left: 3.5px;
|
|
||||||
font-size: 23px;
|
|
||||||
display: inline-block;
|
|
||||||
position: absolute;
|
|
||||||
top: 6.9px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Change the Avatar size for the Firefox Account to what makes sense */
|
|
||||||
[label="Firefox Account"] #fxa-avatar-image {
|
|
||||||
scale: 1.175;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
@import url('./custom.css');
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue