From a3a5927b096af465cb6faa6a823217ef928136a7 Mon Sep 17 00:00:00 2001 From: Drannex42 Date: Mon, 21 Nov 2022 10:47:32 -0600 Subject: [PATCH] v12022.11.21 :: Fixed sidebar flickering --- .gitignore | 3 +- custom.css | 60 ++++++++++++++++++++++++++ extensions/sidebar.css | 95 +++++++++++++++++++----------------------- prefs.css | 8 ++-- userChrome.css | 7 +++- 5 files changed, 114 insertions(+), 59 deletions(-) diff --git a/.gitignore b/.gitignore index a15e610..a5befd1 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ -custom.css +./custom.css +./prefs.css \ No newline at end of file diff --git a/custom.css b/custom.css index 8d63f81..6cc2c3e 100644 --- a/custom.css +++ b/custom.css @@ -1 +1,61 @@ /* Custom Styles */ + +#titlebar { +appearance: none !important; +} + +#sidebar-header { + padding: 5px 8px !important; + padding-top: 11px !important; +} + +#nav-bar { + padding-top: 2px !important; +} + +/* #main-window { + background-color: rgba(0,0,0,0.45) !important; + background: linear-gradient(8deg, rgba(0,0,0,0.4) 96%, #000) !important; /* gradient to hide the required windows control buttons in bg + -moz-appearance: -moz-win-glass !important; +} */ +/* #navigator-toolbox { + background: transparent !important; +} +#TabsToolbar { + background-image: none !important; /* Windows 7 */ +} +/* +/* referenced from what FF does when using some persona themes */ +/* :root { + --toolbar-bgcolor: rgba(255,255,255,.4) !important; + --toolbar-field-background-color: rgba(255,255,255,.8) !important; + --urlbar-box-bgcolor: var(--button-bgcolor) !important; + --button-hover-bgcolor: color-mix(in srgb, currentColor 17%, transparent) !important; + --button-active-bgcolor: color-mix(in srgb, currentColor 30%, transparent) !important; +} +#urlbar-background, #searchbar { + background-color: rgba(255,255,255,0.4) !important; +} +#urlbar[open="true"] > #urlbar-background { + background-color: rgb(255,255,255) !important; +} +@media (prefers-color-scheme: dark) { + :root { + --toolbar-bgcolor: rgba(0,0,0,.2) !important; + --toolbar-field-background-color: rgba(0,0,0,.8) !important; + } + #urlbar-background, #searchbar { + background-color: rgba(0,0,0,0.2) !important; + } + #urlbar[open="true"] > #urlbar-background { + background-color: rgb(0,0,0) !important; + } +} +#nav-bar { + box-shadow: 0 calc(-1 * var(--tabs-navbar-shadow-size)) 0 var(--lwt-tabs-border-color, rgba(0,0,0,.3)) !important; + color: var(--toolbar-color) !important; +} +.tab-background[selected="true"] { + background-color: transparent !important; + background-image: linear-gradient(transparent, transparent), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important; +} */ diff --git a/extensions/sidebar.css b/extensions/sidebar.css index a99eb71..609a621 100644 --- a/extensions/sidebar.css +++ b/extensions/sidebar.css @@ -1,8 +1,8 @@ /* Extension (Core): Sidebar - Description: This is the core implenration of the sidebar, used in drannex42's FirefoxSidebar. - Repository URL: https://github.com/drannex42/ - Version: v12022.04.17 + Description: This is the core implementation of the sidebar used in drannex42's FirefoxSidebar. + Repository URL: https://github.com/drannex42/FirefoxSidebar + Version: v12022.11.22 (YYYYY.MM.DD) */ #main-window #TabsToolbar { @@ -23,29 +23,62 @@ } /*Collapse in default state and add transition*/ -#sidebar-box #sidebar:hover { +#sidebar-box { /*! 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; + border-right: none !important; + width: 100% !important; + background: var(--custom-sidebar-bg, --sidebar-background); + + /* lock sidebar to height by doing the inverse margin of the toolbar element */ + z-index: 1000 !important; + position: relative !important; + margin-top: var(--menubar-height) !important; + border-right: none; + 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; + margin-left: 207px; + z-index: 9999999; + position: absolute; + content: " "; + width: 1px; + height: 100%; + top: 0; + right: 0px; +} + +#sidebar-box:hover:after { + top: 42px; } /*All other sidebar-boxes should be larger on hover*/ -#sidebar-box:hover { +#sidebar-box:hover, #sidebar-box #sidebar:hover { min-width: 350px !important; max-width: 350px !important; - z-index: 1; + z-index: 999; 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 { +#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:hover, +#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] #sidebar:hover { min-width: 260px !important; max-width: 260px !important; - z-index: 1; margin-right: -210px !important; } @@ -74,40 +107,7 @@ outline: none !important; } -#sidebar-box { - /* lock sidebar to height by doing the inverse margin of the toolbar element */ - z-index: 1000 !important; - position: relative !important; - margin-top: var(--menubar-height) !important; - border-right: none; - transition: none !important; - background: transparent !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; - margin-left: 207px; - z-index: 9999999; - position: absolute; - content: " "; - width: 1px; - height: 100%; - top: 0; - right: 0px; -} - -#sidebar-box:hover:after { - top: 42px; -} .sidebar-splitter { opacity: 0 !important; @@ -126,15 +126,6 @@ toolbarseparator { display: none; } -#sidebar { - border-right: none !important; - overflow: hidden; - width: 50px !important; - min-width: 50px !important; - width: 100% !important; - background: var(--custom-sidebar-bg, --sidebar-background); -} - #nav-bar-customization-target { z-index: 99999; position: relative; diff --git a/prefs.css b/prefs.css index 3e15d22..4298b2b 100644 --- a/prefs.css +++ b/prefs.css @@ -15,7 +15,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 */ /* --custom-sidebar-bg: Field; /* Default: Field (Disabled) */ - /* --custom-sidebar-header-bg: Field; /* Default: Field (Disabled) */ + --custom-sidebar-header-bg: #000; /* Default: Field (Disabled) */ /* ====== Extension Settings ====== */ @@ -25,7 +25,7 @@ ========================================================================= */ --csd-width: 100px; - --csd-top: 6px; + --csd-top: 8px; /* CSD - Left Side === @@ -42,8 +42,8 @@ Defaults: --csd-right: 0px; --csd-margin-right: 95px; */ - --csd-right: 0px; - --csd-margin-right: 95px; + --csd-right: 36px; + --csd-margin-right: 130px; /* === END: Window Control / Client Side Display Settings === */ diff --git a/userChrome.css b/userChrome.css index bc77488..7149c87 100644 --- a/userChrome.css +++ b/userChrome.css @@ -29,13 +29,13 @@ @import url("./extensions/window_controls.css"); /* Bookmark Arrows :: add a little arrow next to folders in bookmarks toolbar */ - @import url("./extensions/bookmark_arrow.css"); + /* @import url("./extensions/bookmark_arrow.css"); */ /* Superbox Removal :: heavily customize superbox (flat look, colors, smaller entries,...) */ @import url("./extensions/superbox_removal.css"); /* Avatar Size :: change the avatar size for the Firefox Account to what makes sense */ - @import url("./extensions/avatar_size.css"); + /* @import url("./extensions/avatar_size.css"); */ /* fix sidebar switcher if bookmarks toolbar is hidden */ /* @import url("./extensions/fix_hidden_bookmarks.css"); */ @@ -69,3 +69,6 @@ @import url("./custom.css"); /* ========================================================================= */ + + +