Styling option to match native sidebars

00madz commented 5 years ago

Firstly, thank you for all your wonderful work on Sidebery. Not sure if it's possible for extensions, but I'd like the ability to have the styling and background simply match the native sidebars - the background seems to change based on OS colours (on OSX) and has some sort of transparency/gradient type effect but looks different depending on whether the window is maximised or not. I don't know whether sidebery can have a "transparent background" option which will result in it looking like a normal sidebar or if the extensions just eg start with a white surface? It'd also be nice if the font and font size could match standard sidebars by default.

mbnuqw commented 5 years ago

Unfortunately, transparent background of sidebar is not possible and styling of scrollbars in Firefox is pretty limited. Though, there are some tricks with userChrome.css that allows you to change sidebar width depending on window state. E.g. this code will shrink sidebar in 32px bar in full-screen mode and restore it on mouse hover:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
#sidebar-header {
  display: none;
}
#main-window[inFullscreen] #sidebar-box {
  position: fixed;
  display: block;
  min-width: 0px !important;
  max-width: none !important;
  width: 32px !important;
  height: 100%;
  overflow: hidden;
  box-shadow: 0 0 8px 0 #00000064, 1px 0 0 0 #212121;
  transition: all 0.12s;
}
#main-window[inFullscreen] #sidebar {
  position: absolute;
  min-width: 0px !important;
  max-width: none !important;
  left: 0;
  top: 0;
  right: auto;
  bottom: auto;
  width: 32px;
  height: 100%;
}
#main-window[inFullscreen] #sidebar:before {
  content: '';
  position: absolute;
  background-color: #323232;
  display: block;
  top: 0;
  left: 0;
  width: 32px;
  height: 100%;
  z-index: 1;
  transition: transform 0.12s;
}
#main-window[inFullscreen] #sidebar-box:hover {
  width: 250px !important;
}
#main-window[inFullscreen] #sidebar-box:hover #sidebar:before {
  transform: translateX(-100%);
}
#main-window[inFullscreen] #sidebar-box:hover #sidebar {
  width: 250px !important;
}

About the fonts - in next version you will be able to customize styles (including fonts) of any Sidebery part (sidebar itself, group page, etc...).

00madz commented 5 years ago

Thanks for the reply - that sounds like a nice auto-hide trick I will try that out. Thank you.

Just to clarify for this enhancement request though, I don't mean I want sidebery to be able to be styled to have a transparent background - I just want it to have no (custom) style at all so it gets the default gradient style (I probably used the wrong word with transparent) background (and font) as the default sidebars - in other words in my opinion, by default, Sidebery should look exactly the same as the built in sidebars and then people can have the options to style sidebery from there if they want something special. For me I don't want to have to mess around with the styles/fonts - i just want it to look exactly like the other browser sidebars (eg synced tabs) so it feels like a built in part of firefox, if that makes sense? Currently bookmarks, history, sync'd tabs all look one way, but sideberry looks different and there's nothing I can do to make it look the same as the default background etc varies depending on OS and window state.

mbnuqw commented 7 months ago

Sidebery now can use colors of Firefox theme, but there is no way (without userChrome) to make it transparent, like standard sidebars (if supported by OS).

shanto commented 1 month ago

Actually it's quite possible.

Screenshot 2024-09-29 220231

With...

about:config

browser.tabs.allow_transparent_browser=true

Patch for Sidebery:

diff --git a/src/sidebar/sidebar.html b/src/sidebar/sidebar.html
index 6edabbe..1894544 100644
--- a/src/sidebar/sidebar.html
+++ b/src/sidebar/sidebar.html
@@ -3,10 +3,31 @@

 <head>
   <meta charset="utf-8" />
+  <link rel="stylesheet" type="text/css" href="../themes/proton/sidebar.css" id="theme_link">
   <style>
-    :root { color-scheme: light dark; background-color: light-dark(#eee, #333); }
+    /* :root { color-scheme: light dark; background-color: light-dark(#eee, #333); } */
+    :root {
+      --zen-border-radius: 5px;
+      --zen-dialog-background: #171717;
+      --zen-colors-primary-foreground: color-mix(in srgb, #bbb 80%, white 20%);
+      --sidebery-default-color: #333;
+    }
+
+    #root.root {--frame-fg: var(--zen-colors-primary-foreground);}
+    #root.root {--frame-bg: rgba(0,0,0,0);}
+    #root.root {--frame-el-shadow: none !important;}
+    
+    #root.root {--ctx-menu-bg: var(--zen-dialog-background);}
+    
+    #root.root {--toolbar-el-overlay-active-bg: color-mix(in srgb, var(--zen-dialog-background) 20%, transparent);}
+    #root.root {--toolbar-bg: color-mix(in srgb, var(--zen-dialog-background) 0%, transparent);}
+    #root.root {--toolbar-el-overlay-hover-bg: color-mix(in srgb, var(--zen-dialog-background) 40%, transparent);}
+    #root.root {--nav-btn-border-radius: var(var(--zen-border-radius));}
+    #root.root {--tabs-progress-bg: color-mix(in srgb, var(--zen-dialog-background) 20%, transparent);}
+    #root.root {--tabs-normal-bg: color-mix(in srgb, var(--zen-dialog-background) 40%, transparent);}
+    #root.root {--tabs-activated-bg: color-mix(in srgb, var(--zen-dialog-background) 50%, transparent);}
+    #root.root {--tabs-border-radius: var(--zen-border-radius);}
   </style>
-  <link rel="stylesheet" type="text/css" href="../themes/proton/sidebar.css" id="theme_link">
 </head>

 <body tabindex="-1">

userChrome.css

@-moz-document url-prefix("chrome://browser/content/webext-panels.xhtml") {
    #webextpanels-window {
        background: transparent !important;
        background-color: transparent !important;
    }
}
@-moz-document url-prefix("chrome:") {
    #sidebar-box {
        --local-separation: calc(var(--zen-element-separation) / 2);
        margin: 0 0 0 var(--local-separation) !important;
        border: none !important;
        box-shadow: none !important;
        #sidebar-header {
            order: 1;
            border: none !important;
            border-top:  1px solid var(--sidebar-border-color) !important;;
            font-size: 1em !important;
            #sidebar-switcher-arrow {
                list-style-image: url('chrome://global/skin/icons/arrow-up-12.svg') !important;;
            }
        }
        background: transparent !important;
    }
}

mbnuqw / sidebery