Fix sidebar in firefox
This commit is contained in:
parent
8d291e2488
commit
d1fc8d1b86
|
|
@ -37,22 +37,10 @@
|
||||||
Version: 12022.04.17
|
Version: 12022.04.17
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/*
|
|
||||||
Preferences / Settings ::
|
|
||||||
Use this file to set your preferences this will save them in one place for easier future updating
|
|
||||||
=========================================================================
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*
|
|
||||||
Preferences / Settings
|
|
||||||
Use this file to set your preferences this will save them in one place for easier future updating
|
|
||||||
=========================================================================
|
|
||||||
*/
|
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--sidebar-width: 50px;
|
--sidebar-width: 50px;
|
||||||
--toolbar-height: -12px;
|
--toolbar-height: 10px;
|
||||||
--menubar-height: -42px;
|
--menubar-height: 100px;
|
||||||
--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;
|
||||||
|
|
||||||
|
|
@ -60,7 +48,7 @@
|
||||||
This sets the background for the other sidebar options (bookmarks, history, in case it is transparent from a theme that is not set up properly
|
This sets the background for the other sidebar options (bookmarks, history, in case it is transparent from a theme that is not set up properly
|
||||||
*/
|
*/
|
||||||
/* --custom-sidebar-bg: Field; /* Default: Field (Disabled) */
|
/* --custom-sidebar-bg: Field; /* Default: Field (Disabled) */
|
||||||
--custom-sidebar-header-bg: #000; /* Default: Field (Disabled) */
|
/* --custom-sidebar-header-bg: #000; */
|
||||||
|
|
||||||
/* ====== Extension Settings ====== */
|
/* ====== Extension Settings ====== */
|
||||||
|
|
||||||
|
|
@ -99,139 +87,139 @@
|
||||||
|
|
||||||
/* ========================================================================= */
|
/* ========================================================================= */
|
||||||
|
|
||||||
/* Sidebar (Core) :: This file is for the sidebar implementation */
|
|
||||||
/*
|
/*
|
||||||
Extension (Core): Sidebar
|
Extension (Core): Sidebar
|
||||||
Description: This is the core implementation of the sidebar used in drannex42's FirefoxSidebar.
|
Description: This is the core implementation of the sidebar used in drannex42's FirefoxSidebar.
|
||||||
Repository URL: https://github.com/drannex42/FirefoxSidebar
|
Repository URL: https://github.com/drannex42/FirefoxSidebar
|
||||||
Version: v12022.11.22 (YYYYY.MM.DD)
|
Version: v12024.05.15 (YYYYY.MM.DD)
|
||||||
*/
|
*/
|
||||||
|
|
||||||
#main-window #TabsToolbar {
|
#main-window #TabsToolbar {
|
||||||
visibility: collapse;
|
visibility: collapse;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* As of v12024.05.15 we updated to using this one by MrOtherGuy, with modifications */
|
||||||
|
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_sidebar.css made available under Mozilla Public License v. 2.0 */
|
||||||
|
|
||||||
|
/* Show sidebar only when the cursor is over it */
|
||||||
|
/* The border controlling sidebar width will be removed so you'll need to modify these values to change width */
|
||||||
|
|
||||||
#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-box {
|
||||||
/*! overflow: visible !important; */
|
--uc-sidebar-width: 50px;
|
||||||
border-right: none !important; /* border-right: 1px solid var(--sidebar-border-color) !important; */
|
--uc-sidebar-hover-width: 260px;
|
||||||
z-index: 2;
|
--uc-autohide-sidebar-delay: 10ms;
|
||||||
border-right: none !important;
|
/* Wait 0.6s before hiding sidebar */
|
||||||
width: 100% !important;
|
--uc-autohide-transition-duration: 115ms;
|
||||||
background: var(--custom-sidebar-bg, --sidebar-background);
|
--uc-autohide-transition-type: linear;
|
||||||
|
position: relative;
|
||||||
/* lock sidebar to height by doing the inverse margin of the toolbar element */
|
min-width: var(--uc-sidebar-width) !important;
|
||||||
z-index: 1000 !important;
|
width: var(--uc-sidebar-width) !important;
|
||||||
position: relative !important;
|
max-width: var(--uc-sidebar-width) !important;
|
||||||
margin-top: var(--menubar-height) !important;
|
z-index: 1;
|
||||||
border-right: none;
|
margin-top: -40px;
|
||||||
transition: none !important;
|
|
||||||
|
|
||||||
/* 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;
|
#sidebar-box[positionend] {
|
||||||
margin-left: 207px;
|
direction: rtl
|
||||||
z-index: 9999999;
|
|
||||||
position: absolute;
|
|
||||||
content: " ";
|
|
||||||
width: 1px;
|
|
||||||
height: 100%;
|
|
||||||
top: 0;
|
|
||||||
right: 0px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#sidebar-box:hover:after {
|
#sidebar-box[positionend]>* {
|
||||||
top: 42px;
|
direction: ltr
|
||||||
}
|
}
|
||||||
|
|
||||||
/*All other sidebar-boxes should be larger on hover*/
|
#sidebar-box[positionend]:-moz-locale-dir(rtl) {
|
||||||
#sidebar-box:hover, #sidebar-box #sidebar:hover {
|
direction: ltr
|
||||||
min-width: 350px !important;
|
|
||||||
max-width: 350px !important;
|
|
||||||
z-index: 999;
|
|
||||||
margin-right: -300px !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/*Tree Style Tabs && Sideberry specific sidebar width and size*/
|
#sidebar-box[positionend]:-moz-locale-dir(rtl)>* {
|
||||||
|
direction: rtl
|
||||||
|
}
|
||||||
|
|
||||||
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover,
|
#main-window[sizemode="fullscreen"] #sidebar-box {
|
||||||
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:hover,
|
--uc-sidebar-width: 1px;
|
||||||
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] #sidebar:hover {
|
}
|
||||||
min-width: 260px !important;
|
|
||||||
max-width: 260px !important;
|
#sidebar-splitter {
|
||||||
margin-right: -210px !important;
|
display: none
|
||||||
}
|
}
|
||||||
|
|
||||||
#sidebar-header {
|
#sidebar-header {
|
||||||
border: none !important;
|
overflow: hidden;
|
||||||
|
color: var(--chrome-color, inherit) !important;
|
||||||
|
padding-inline: 0 !important;
|
||||||
|
background: var(--custom-sidebar-header-bg, inherit) !important;
|
||||||
|
padding: 8px 12px !important;
|
||||||
|
padding-top: 9px !important;
|
||||||
|
border-bottom: none !Important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar-header::before,
|
||||||
|
#sidebar-header::after {
|
||||||
|
content: "";
|
||||||
|
display: flex;
|
||||||
|
padding-left: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar-header,
|
||||||
|
#sidebar {
|
||||||
|
transition: min-width var(--uc-autohide-transition-duration) var(--uc-autohide-transition-type) var(--uc-autohide-sidebar-delay) !important;
|
||||||
|
min-width: var(--uc-sidebar-width) !important;
|
||||||
|
will-change: min-width;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar-box:hover>#sidebar-header,
|
||||||
|
#sidebar-box:hover>#sidebar {
|
||||||
|
min-width: var(--uc-sidebar-hover-width) !important;
|
||||||
|
width: var(--uc-sidebar-hover-width) !important;
|
||||||
|
transition-delay: 0ms !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar-box>#sidebar-header #sidebar-title {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar-box:hover>#sidebar-header #sidebar-title {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-panel {
|
||||||
|
background-color: transparent !important;
|
||||||
|
color: var(--newtab-text-primary-color) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-panel #search-box {
|
||||||
|
-moz-appearance: none !important;
|
||||||
|
background-color: rgba(249, 249, 250, 0.1) !important;
|
||||||
|
color: inherit !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Add sidebar divider and give it background */
|
||||||
|
|
||||||
|
#sidebar,
|
||||||
|
#sidebar-header {
|
||||||
|
background-color: inherit !important;
|
||||||
border-right: 1px solid var(--sidebar-border-color);
|
border-right: 1px solid var(--sidebar-border-color);
|
||||||
background: var(--custom-sidebar-header-bg, transparent) !important;
|
border-inline-width: 0px 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#sidebar-close,
|
#sidebar-box:not([positionend])> :-moz-locale-dir(rtl),
|
||||||
#sidebar-title,
|
#sidebar-box[positionend]>* {
|
||||||
#sidebar-switcher-arrow {
|
border-inline-width: 1px 0px;
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Move statuspanel to the other side when sidebar is hovered so it doesn't get covered by sidebar */
|
||||||
|
|
||||||
.sidebar-splitter {
|
#sidebar-box:not([positionend]):hover~#appcontent #statuspanel {
|
||||||
opacity: 0 !important;
|
inset-inline: auto 0px !important;
|
||||||
width: 0px !important;
|
|
||||||
border: none !important;
|
|
||||||
--avatar-image-url: none !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#sidebarMenu-popup .subviewbutton {
|
#sidebar-box:not([positionend]):hover~#appcontent #statuspanel-label {
|
||||||
min-width: 0px;
|
margin-inline: 0px !important;
|
||||||
padding: 0;
|
border-left-style: solid !important;
|
||||||
margin: 0 !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
toolbarseparator {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#nav-bar-customization-target {
|
|
||||||
z-index: 99999;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.browser-toolbar {
|
.browser-toolbar {
|
||||||
padding-left: var(--sidebar-width) !important;
|
padding-left: var(--sidebar-width) !important;
|
||||||
|
|
@ -252,7 +240,6 @@
|
||||||
=========================================================================
|
=========================================================================
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/* CSD / Window Controls */
|
|
||||||
/*
|
/*
|
||||||
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.
|
||||||
|
|
@ -295,15 +282,24 @@
|
||||||
padding-right: 0px !important;
|
padding-right: 0px !important;
|
||||||
margin-left: 0px !important;
|
margin-left: 0px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* END Client Side Decorations / Window Controls */
|
/* END Client Side Decorations / Window Controls */
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
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 */
|
/* --- Prevent enlargement */
|
||||||
#urlbar[breakout-extend] {
|
#urlbar[breakout-extend] {
|
||||||
top: calc(
|
/* top: calc( */
|
||||||
(var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2
|
/* (var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2 */
|
||||||
) !important;
|
/* ) !important; */
|
||||||
|
/* Fix due to deprecation https://www.reddit.com/r/firefox/comments/1cs3g49/address_bar_suggestions_going_up_instead_of_down/ */
|
||||||
|
top: calc((var(--urlbar-container-height, --urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important;
|
||||||
left: 0 !important;
|
left: 0 !important;
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
}
|
}
|
||||||
|
|
@ -314,9 +310,11 @@
|
||||||
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 */
|
||||||
|
|
@ -326,34 +324,36 @@
|
||||||
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[breakout][breakout-extend][breakout-extend-animate]>#urlbar-background {
|
||||||
> #urlbar-background {
|
|
||||||
animation-name: none !important;
|
animation-name: none !important;
|
||||||
animation: none !important;
|
animation: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* END Disable Urlbar Animation */
|
/* 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-row[dynamicType="onboardTabToSearch"]>.urlbarView-row-inner>.urlbarView-no-wrap>.urlbarView-favicon {
|
||||||
> .urlbarView-no-wrap
|
|
||||||
> .urlbarView-favicon {
|
|
||||||
margin-bottom: -1px;
|
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 */
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue