From d6444a7d10fd22acdd3c75f8b3cc73ffeaf04ff1 Mon Sep 17 00:00:00 2001 From: mgastonportillo Date: Sat, 24 Jun 2023 22:18:06 -0300 Subject: [PATCH] Add a version that works with Sidebery beta Might be unstable --- LICENSE.md | 42 ++-- README.md | 60 ++--- sidebery-beta-5.0.0b33.css | 166 +++++++++++++ sidebery.css | 320 ++++++++++++------------- userChrome-linux.css | 120 ++++++++++ userChrome.css => userChrome-win10.css | 240 +++++++++---------- 6 files changed, 617 insertions(+), 331 deletions(-) create mode 100644 sidebery-beta-5.0.0b33.css create mode 100644 userChrome-linux.css rename userChrome.css => userChrome-win10.css (92%) diff --git a/LICENSE.md b/LICENSE.md index f89d749..91eeca4 100644 --- a/LICENSE.md +++ b/LICENSE.md @@ -1,21 +1,21 @@ -MIT License - -Copyright (c) 2022 gale - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. +MIT License + +Copyright (c) 2022 gale + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md index 4c450bc..494ae03 100644 --- a/README.md +++ b/README.md @@ -1,30 +1,30 @@ -

-

gale for Firefox

-

My CSS files to use with Firefox and Sidebery

-
-

My goal with these settings was to create a minimalistic yet functional setup with Sidebery tuned to match Firefox Default Dark Theme and optimise the workspace. If you find any odd behaviour feel free to send a pull request.

-
-

-
-

How to install?

-
    -
  1. In Firefox, go to about:config and set toolkit.legacyUserProfileCustomizations.stylesheets to True
    2. -
  2. Make sure you have userChrome.css file and folder path created properly
    3. -
  3. Get Sidebery if you don't have it already installed
    4. -
  4. Copy the content in my userChrome.css to your file (I don't support this method) or replace/copy it in the corresponding folder path
    5. -
  5. Go to Sidebery settings and paste the content of my sidebery.css file into Styles editor > Sidebar
    6. -
  6. Enjoy your new setup!
    7. -
-
-

Known bugs

- -
-

Credits

- +

+

gale for Firefox

+

My CSS files to use with Firefox and Sidebery

+
+

My goal with these settings was to create a minimalistic yet functional setup with Sidebery tuned to match Firefox Default Dark Theme and optimise the workspace. If you find any odd behaviour feel free to send a pull request.

+
+

+
+

How to install?

+
    +
  1. In Firefox, go to about:config and set toolkit.legacyUserProfileCustomizations.stylesheets to True
    2. +
  2. Make sure you have userChrome.css file and folder path created properly
    3. +
  3. Get Sidebery if you don't have it already installed
    4. +
  4. Copy the content in my userChrome.css to your file (I don't support this method) or replace/copy it in the corresponding folder path
    5. +
  5. Go to Sidebery settings and paste the content of my sidebery.css file into Styles editor > Sidebar
    6. +
  6. Enjoy your new setup!
    7. +
+
+

Known bugs

+ +
+

Credits

+ diff --git a/sidebery-beta-5.0.0b33.css b/sidebery-beta-5.0.0b33.css new file mode 100644 index 0000000..6deb8f0 --- /dev/null +++ b/sidebery-beta-5.0.0b33.css @@ -0,0 +1,166 @@ +/* + MAIN +*/ + +#root { + --tabs-height: 35px; + --tabs-width: 35px; + --tabs-pinned-height: var(--tabs-height); + --tabs-pinned-width: var(--tabs-width); + --bg: #1c1b22; + --tabs-fg: #d4d4d4; + --tabs-bg-hover: #3b3948; + --tabs-activated-bg: #5b5b66; + --nav-btn-activated-bg: #1f222f; +} + +#root .Tab { + --tabs-indent: 7px; +} + +/* + TABS +*/ + +.Tab .lvl-wrapper:after { + display: none; +} + +.Tab { + margin-bottom: 2px; + border-radius: 3px; +} + +.Tab .close:hover { + background: none; +} + +.Tab[data-active="true"] .close:hover { + background: #42414d; +} + +.Tab .close > svg:hover { + /* Styling the tab close button */ + border-radius: 3px; + background: rgba(255, 0, 0, 0.17); + opacity: 100%; +} + +.Tab .title { + overflow: hidden; +} + + +/* + PINNED TABS +*/ + +.PinnedTabsBar { + background-color: var(--bg); +} + + +/* + NAVIGATION BAR +*/ + +.NavigationBar { + margin: 0 2px; + height: var(--tabs-height); +} + +.NavigationBar .static-btns { + margin-right: 5px; +} + +.NavigationBar .audio { + display: none; +} + +/* + COLLAPSED TWEAKS +*/ + +@media (max-width: 50px) { + #root { + --tabs-pinned-height: var(--tabs-height); + --tabs-pinned-width: var(--tabs-width); + } + + #root:not(:hover) .Tab { + --tabs-indent: 0px; + } + + .NavigationBar .main-items .nav-item[data-index="-1"][data-active="true"] { + background: none; + z-index: 1; + opacity: inherit; + transform: scale(1,1); + } + + .NavigationBar .static-btns { + display: none; + } + + .Tab { + width: var(--tabs-width); + height: var(--tabs-height); + } + + .t-box, .close { + display: none; + } + + .ScrollBox .Tab .fav { + margin: auto; + z-index: 1; + } + + .ScrollBox .Tab .audio { + z-index: 1; + margin: -7px; + } + + .Tab .title { + display: none; + } + + .PinnedTabsBar { + margin-left: 2px; + } + + .NavigationBar .settings-btn { + display: none; + } +} + +/* + CUSTOM TWEAKS +*/ + +/* Better notifications on pinned tabs */ +.PinnedTabsBar[data-audible] .fav > img, +.PinnedTabsBar[data-muted] .fav > img, +.PinnedTabsBar[data-loading] .fav > img { + mask: none; +} + +.PinnedTabsBar .fav-icon { + mask: none; +} + +.PinnedTabsBar[data-updated="true"] .fav > img { + mask: radial-gradient(circle at calc(100% - 2px) calc(100% - 2px),rgba(0,0,0,0.141),rgba(0,0,0,0.141) 4px,#000 5px,#000); +} + +.audio { + color: red; +} + +.PinnedTabsBar .update-badge { + opacity: 0; +} + +.PinnedTabsBar[data-updated="true"] .update-badge { + opacity: 100; +} diff --git a/sidebery.css b/sidebery.css index 9424438..9e2a0d7 100644 --- a/sidebery.css +++ b/sidebery.css @@ -1,160 +1,160 @@ -/* ROOT */ - -#root { - /* Tab and PinnedTab height adjustment */ - --tabs-height: 33px; - --tabs-pinned-height: var(--tabs-height); - /* Dark Theme base settings */ - --bg: #1c1b22 !important; - --tabs-fg: #d4d4d4 !important; - --tabs-bg-hover: #3b3948 !important; - --tabs-activated-bg: #5b5b66 !important; - --nav-btn-activated-bg: #1f222f !important; -} - -#root .Tab { - --tabs-indent: 7px; -} - -/* TABS */ - -.Tab .lvl-wrapper:after { - display: none; -} - -.Tab { - margin: auto; - width: 94%; - border-radius: 3px; -} - -.Tab .close > svg:hover { - /* Styling the tab close button */ - border-radius: 3px; - background: #492121 !important; - opacity: 100%; -} - -.Tab .title { - overflow: hidden !important; -} - -/* PINNED TABS */ - -.PinnedDock { - background-color: var(--bg) !important; -} - -.PinnedTab { - margin: 5px 0px 4px 6px; - border-radius: 3px; -} - -/* NAV BAR */ - -.NavigationBar { - height: 41px !important; - padding: 4.5px 0px 0px 4.5px !important; - background-color: #2b2a33 !important; - margin-bottom: 5px; -} - -.NavigationBar .panel-btn:hover { - border-radius: 3px !important; - background-color: var(--tabs-bg-hover) !important; -} - -.NavigationBar .panel-btn[data-active="true"] { - border-radius: 3px !important; - background-color: var(--bg) !important; -} - -.NavigationBar .panel-btn[data-active="true"]:hover { - border-radius: 3px !important; - background-color: var(--tabs-bg-hover) !important; -} - -.NavigationBar .panel-btn > svg, -.NavigationBar .panel-btn > img { - fill: #f2f2f2 !important; -} - -/* SIDEBAR HACK PATCHES */ - -@media (max-width: 50px) { - /* Fix to tab tree identation when minimised */ - #root:not(:hover) .Tab { - --tabs-indent: 0px; - } - - .Tab[data-lvl] > div.lvl-wrapper { - right: -2px; - } - - .Tab { - max-width: 34px; - } - - .Tab .fav { - z-index: 1; - } - - .Tab .audio { - z-index: 1; - margin-left: -12px; - height: 26px; - } - - .Tab .title { - display: none; - } - - .PinnedTab { - margin-left: 5px; - } - - .NavigationBar .settings-btn { - display: none; - } -} - -/* OPTIONAL */ - -/* Disable these two snippets below to make pinned tabs wrap when minimised */ -.PinnedDock { - flex-wrap: nowrap !important; -} - -.PinnedTab { - overflow: hidden !important; - min-width: var(--tabs-pinned-width) !important; -} - -/* Optional patch for better tab notifications on pinned tabs */ -/* -.PinnedTab[data-audible] .fav > img, -.PinnedTab[data-muted] .fav > img, -.PinnedTab[data-loading] .fav > img { - mask: none; -} - -.PinnedTab .fav > img { - mask: none; -} - -.PinnedTab[data-updated="true"] .fav > img { - mask: radial-gradient(circle at calc(100% - 2px) calc(100% - 2px),rgba(0,0,0,0.141),rgba(0,0,0,0.141) 4px,#000 5px,#000); -} - -.PinnedTab .audio-badge { - top: 5px; -} - -.PinnedTab .update-badge { - opacity: 0; -} - -.PinnedTab[data-updated="true"] .update-badge { - opacity: 100; -} -*/ +/* ROOT */ + +#root { + /* Tab and PinnedTab height adjustment */ + --tabs-height: 33px; + --tabs-pinned-height: var(--tabs-height); + /* Dark Theme base settings */ + --bg: #1c1b22 !important; + --tabs-fg: #d4d4d4 !important; + --tabs-bg-hover: #3b3948 !important; + --tabs-activated-bg: #5b5b66 !important; + --nav-btn-activated-bg: #1f222f !important; +} + +#root .Tab { + --tabs-indent: 7px; +} + +/* TABS */ + +.Tab .lvl-wrapper:after { + display: none; +} + +.Tab { + margin: auto; + width: 94%; + border-radius: 3px; +} + +.Tab .close > svg:hover { + /* Styling the tab close button */ + border-radius: 3px; + background: #492121 !important; + opacity: 100%; +} + +.Tab .title { + overflow: hidden !important; +} + +/* PINNED TABS */ + +.PinnedDock { + background-color: var(--bg) !important; +} + +.PinnedTab { + margin: 5px 0px 4px 6px; + border-radius: 3px; +} + +/* NAV BAR */ + +.NavigationBar { + height: 41px !important; + padding: 4.5px 0px 0px 4.5px !important; + background-color: #2b2a33 !important; + margin-bottom: 5px; +} + +.NavigationBar .panel-btn:hover { + border-radius: 3px !important; + background-color: var(--tabs-bg-hover) !important; +} + +.NavigationBar .panel-btn[data-active="true"] { + border-radius: 3px !important; + background-color: var(--bg) !important; +} + +.NavigationBar .panel-btn[data-active="true"]:hover { + border-radius: 3px !important; + background-color: var(--tabs-bg-hover) !important; +} + +.NavigationBar .panel-btn > svg, +.NavigationBar .panel-btn > img { + fill: #f2f2f2 !important; +} + +/* SIDEBAR HACK PATCHES */ + +@media (max-width: 50px) { + /* Fix to tab tree identation when minimised */ + #root:not(:hover) .Tab { + --tabs-indent: 0px; + } + + .Tab[data-lvl] > div.lvl-wrapper { + right: -2px; + } + + .Tab { + max-width: 34px; + } + + .Tab .fav { + z-index: 1; + } + + .Tab .audio { + z-index: 1; + margin-left: -12px; + height: 26px; + } + + .Tab .title { + display: none; + } + + .PinnedTab { + margin-left: 5px; + } + + .NavigationBar .settings-btn { + display: none; + } +} + +/* OPTIONAL */ + +/* Disable these two snippets below to make pinned tabs wrap when minimised */ +.PinnedDock { + flex-wrap: nowrap !important; +} + +.PinnedTab { + overflow: hidden !important; + min-width: var(--tabs-pinned-width) !important; +} + +/* Optional patch for better tab notifications on pinned tabs */ +/* +.PinnedTab[data-audible] .fav > img, +.PinnedTab[data-muted] .fav > img, +.PinnedTab[data-loading] .fav > img { + mask: none; +} + +.PinnedTab .fav > img { + mask: none; +} + +.PinnedTab[data-updated="true"] .fav > img { + mask: radial-gradient(circle at calc(100% - 2px) calc(100% - 2px),rgba(0,0,0,0.141),rgba(0,0,0,0.141) 4px,#000 5px,#000); +} + +.PinnedTab .audio-badge { + top: 5px; +} + +.PinnedTab .update-badge { + opacity: 0; +} + +.PinnedTab[data-updated="true"] .update-badge { + opacity: 100; +} +*/ diff --git a/userChrome-linux.css b/userChrome-linux.css new file mode 100644 index 0000000..d38be07 --- /dev/null +++ b/userChrome-linux.css @@ -0,0 +1,120 @@ +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +/* leaves space for the window buttons */ +#nav-bar { + margin-top: -38px !important; + margin-right: 106px !important; + margin-bottom: -4px !important; +} + +/* hides the sidebar header */ +#sidebar-header { + display: none !important; +} + +.tab[selected="true"] { + visibility: collapse; + height: 0px; +} + +.tabbrowser-tab { + visibility: collapse; + height: 0px; +} + +.tabbrowser-tab[visuallyselected="true"] { + visibility: collapse; + height: 0px; +} + +/* Credits to https://github.com/MrOtherGuy for the following snippet*/ + +/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_sidebar.css made available under Mozilla Public License v. 2.0 +See the above repository for updates as well as full license text. */ + +/* 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 { + --uc-sidebar-width: 40px; + --uc-sidebar-hover-width: 210px; + --uc-autohide-sidebar-delay: 600ms; /* Wait 0.6s before hiding sidebar */ + position: relative; + min-width: var(--uc-sidebar-width) !important; + width: var(--uc-sidebar-width) !important; + max-width: var(--uc-sidebar-width) !important; + z-index: 1; +} + +#sidebar-box[positionend] { + direction: rtl; +} +#sidebar-box[positionend] > * { + direction: ltr; +} + +#sidebar-box[positionend]:-moz-locale-dir(rtl) { + direction: ltr; +} +#sidebar-box[positionend]:-moz-locale-dir(rtl) > * { + direction: rtl; +} + +#main-window[sizemode="fullscreen"] #sidebar-box { + --uc-sidebar-width: 1px; +} + +#sidebar-splitter { + display: none; +} + +#sidebar-header { + overflow: hidden; + color: var(--chrome-color, inherit) !important; +} + +#sidebar { + transition: min-width 115ms linear var(--uc-autohide-sidebar-delay) !important; + min-width: var(--uc-sidebar-width) !important; + will-change: min-width; +} + +#sidebar-box:hover > #sidebar { + min-width: var(--uc-sidebar-hover-width) !important; + transition-delay: 0ms !important; +} + +.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-inline: 1px solid rgb(80, 80, 80); + border-inline-width: 0px 1px; +} + +#sidebar-box:not([positionend]) > :-moz-locale-dir(rtl), +#sidebar-box[positionend] > * { + border-inline-width: 1px 0px; +} + +/* Move statuspanel to the other side when sidebar is hovered so it doesn't get covered by sidebar */ + +#sidebar-box:not([positionend]):hover ~ #appcontent #statuspanel { + inset-inline: auto 0px !important; +} +#sidebar-box:not([positionend]):hover ~ #appcontent #statuspanel-label { + margin-inline: 0px !important; + border-left-style: solid !important; +} diff --git a/userChrome.css b/userChrome-win10.css similarity index 92% rename from userChrome.css rename to userChrome-win10.css index 9348a2f..33ac377 100644 --- a/userChrome.css +++ b/userChrome-win10.css @@ -1,120 +1,120 @@ -@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); - -/* leaves space for the window buttons */ -#nav-bar { - margin-top: -38px !important; - margin-right: 138px !important; - margin-bottom: -4px !important; -} - -/* hides the sidebar header */ -#sidebar-header { - display: none !important; -} - -.tab[selected="true"] { - visibility: collapse; - height: 0px; -} - -.tabbrowser-tab { - visibility: collapse; - height: 0px; -} - -.tabbrowser-tab[visuallyselected="true"] { - visibility: collapse; - height: 0px; -} - -/* Credits to https://github.com/MrOtherGuy for hthe following snippet*/ - -/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_sidebar.css made available under Mozilla Public License v. 2.0 -See the above repository for updates as well as full license text. */ - -/* 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 { - --uc-sidebar-width: 44px; /* Only thing I (gale) changed */ - --uc-sidebar-hover-width: 210px; - --uc-autohide-sidebar-delay: 600ms; /* Wait 0.6s before hiding sidebar */ - position: relative; - min-width: var(--uc-sidebar-width) !important; - width: var(--uc-sidebar-width) !important; - max-width: var(--uc-sidebar-width) !important; - z-index: 1; -} - -#sidebar-box[positionend] { - direction: rtl; -} -#sidebar-box[positionend] > * { - direction: ltr; -} - -#sidebar-box[positionend]:-moz-locale-dir(rtl) { - direction: ltr; -} -#sidebar-box[positionend]:-moz-locale-dir(rtl) > * { - direction: rtl; -} - -#main-window[sizemode="fullscreen"] #sidebar-box { - --uc-sidebar-width: 1px; -} - -#sidebar-splitter { - display: none; -} - -#sidebar-header { - overflow: hidden; - color: var(--chrome-color, inherit) !important; -} - -#sidebar { - transition: min-width 115ms linear var(--uc-autohide-sidebar-delay) !important; - min-width: var(--uc-sidebar-width) !important; - will-change: min-width; -} - -#sidebar-box:hover > #sidebar { - min-width: var(--uc-sidebar-hover-width) !important; - transition-delay: 0ms !important; -} - -.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-inline: 1px solid rgb(80, 80, 80); - border-inline-width: 0px 1px; -} - -#sidebar-box:not([positionend]) > :-moz-locale-dir(rtl), -#sidebar-box[positionend] > * { - border-inline-width: 1px 0px; -} - -/* Move statuspanel to the other side when sidebar is hovered so it doesn't get covered by sidebar */ - -#sidebar-box:not([positionend]):hover ~ #appcontent #statuspanel { - inset-inline: auto 0px !important; -} -#sidebar-box:not([positionend]):hover ~ #appcontent #statuspanel-label { - margin-inline: 0px !important; - border-left-style: solid !important; -} +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +/* leaves space for the window buttons */ +#nav-bar { + margin-top: -38px !important; + margin-right: 138px !important; + margin-bottom: -4px !important; +} + +/* hides the sidebar header */ +#sidebar-header { + display: none !important; +} + +.tab[selected="true"] { + visibility: collapse; + height: 0px; +} + +.tabbrowser-tab { + visibility: collapse; + height: 0px; +} + +.tabbrowser-tab[visuallyselected="true"] { + visibility: collapse; + height: 0px; +} + +/* Credits to https://github.com/MrOtherGuy for the following snippet*/ + +/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_sidebar.css made available under Mozilla Public License v. 2.0 +See the above repository for updates as well as full license text. */ + +/* 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 { + --uc-sidebar-width: 40px; + --uc-sidebar-hover-width: 210px; + --uc-autohide-sidebar-delay: 600ms; /* Wait 0.6s before hiding sidebar */ + position: relative; + min-width: var(--uc-sidebar-width) !important; + width: var(--uc-sidebar-width) !important; + max-width: var(--uc-sidebar-width) !important; + z-index: 1; +} + +#sidebar-box[positionend] { + direction: rtl; +} +#sidebar-box[positionend] > * { + direction: ltr; +} + +#sidebar-box[positionend]:-moz-locale-dir(rtl) { + direction: ltr; +} +#sidebar-box[positionend]:-moz-locale-dir(rtl) > * { + direction: rtl; +} + +#main-window[sizemode="fullscreen"] #sidebar-box { + --uc-sidebar-width: 1px; +} + +#sidebar-splitter { + display: none; +} + +#sidebar-header { + overflow: hidden; + color: var(--chrome-color, inherit) !important; +} + +#sidebar { + transition: min-width 115ms linear var(--uc-autohide-sidebar-delay) !important; + min-width: var(--uc-sidebar-width) !important; + will-change: min-width; +} + +#sidebar-box:hover > #sidebar { + min-width: var(--uc-sidebar-hover-width) !important; + transition-delay: 0ms !important; +} + +.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-inline: 1px solid rgb(80, 80, 80); + border-inline-width: 0px 1px; +} + +#sidebar-box:not([positionend]) > :-moz-locale-dir(rtl), +#sidebar-box[positionend] > * { + border-inline-width: 1px 0px; +} + +/* Move statuspanel to the other side when sidebar is hovered so it doesn't get covered by sidebar */ + +#sidebar-box:not([positionend]):hover ~ #appcontent #statuspanel { + inset-inline: auto 0px !important; +} +#sidebar-box:not([positionend]):hover ~ #appcontent #statuspanel-label { + margin-inline: 0px !important; + border-left-style: solid !important; +}