From bc3493db26b717ace583b3df2f96244ab57deb76 Mon Sep 17 00:00:00 2001 From: Piro / YUKI Hiroshi Date: Sat, 13 Feb 2016 03:11:41 +0900 Subject: [PATCH] Hide scrollbar shown with negative margin --- skin/classic/treestyletab/metal/base.css | 68 ++++++++++++++++--- skin/classic/treestyletab/sidebar/sidebar.css | 48 ++++++++++++- 2 files changed, 104 insertions(+), 12 deletions(-) diff --git a/skin/classic/treestyletab/metal/base.css b/skin/classic/treestyletab/metal/base.css index d38fe580..5977ab51 100644 --- a/skin/classic/treestyletab/metal/base.css +++ b/skin/classic/treestyletab/metal/base.css @@ -40,6 +40,23 @@ border-width: 1px 0 0 !important; padding: 0 !important; } +/* these styles are required to cover narrow scrollbars. */ +.tabbrowser-tabs[treestyletab-mode="vertical"] + .scrollbox-innerbox { + background: linear-gradient(to left, + rgba(121,121,121,1) 0%, + rgba(121,121,121,1) 10%, + rgba(121,121,121,0) 11%, + rgba(121,121,121,0) 100%) !important; +} +.tabbrowser-tabs[treestyletab-tabbar-position="left"][treestyletab-invert-scrollbar="true"] + .scrollbox-innerbox { + background: linear-gradient(to right, + rgba(121,121,121,1) 0%, + rgba(121,121,121,1) 10%, + rgba(121,121,121,0) 11%, + rgba(121,121,121,0) 100%) !important; +} .tabbrowser-tabs[treestyletab-mode="vertical"] { appearance: none !important; @@ -51,14 +68,20 @@ .tabbrowser-tabs[treestyletab-mode="vertical"]:not([overflow="true"]) .tabbrowser-arrowscrollbox, .tabbrowser-tabs[treestyletab-mode="vertical"][overflow="true"] - .tabbrowser-arrowscrollbox .scrollbox-innerbox { - background: url("shadow-active-l.png") repeat-y top right !important; + .tabbrowser-arrowscrollbox + scrollbox { + background-image: url("shadow-active-l.png") !important; + background-repeat: repeat-y !important; + background-position: top right !important; } .tabbrowser-tabs[treestyletab-mode="vertical"][treestyletab-tab-inverted="true"]:not([overflow="true"]) .tabbrowser-arrowscrollbox, .tabbrowser-tabs[treestyletab-mode="vertical"][treestyletab-tab-inverted="true"][overflow="true"] - .tabbrowser-arrowscrollbox .scrollbox-innerbox { - background: url("shadow-active-r.png") repeat-y top left !important; + .tabbrowser-arrowscrollbox + scrollbox { + background-image: url("shadow-active-r.png") !important; + background-repeat: repeat-y !important; + background-position: top left !important; } .tabbrowser-tabs[treestyletab-mode="vertical"] @@ -100,8 +123,30 @@ tabbrowser[treestyletab-tabbar-position="right"] background: #acacac !important; border-color: #797979 !important; } +/* these styles are required to cover narrow scrollbars. */ :root:-moz-window-inactive - .tabbrowser-strip[treestyletab-mode="vertical"][treestyletab-style~="aero"] { + .tabbrowser-tabs[treestyletab-mode="vertical"] + .scrollbox-innerbox { + background: linear-gradient(to left, + rgba(172,172,172,1) 0%, + rgba(172,172,172,1) 10%, + rgba(172,172,172,0) 11%, + rgba(172,172,172,0) 100%) !important; +} +:root:-moz-window-inactive + .tabbrowser-tabs[treestyletab-tabbar-position="left"][treestyletab-invert-scrollbar="true"] + .scrollbox-innerbox { + background: linear-gradient(to right, + rgba(172,172,172,1) 0%, + rgba(172,172,172,1) 10%, + rgba(172,172,172,0) 11%, + rgba(172,172,172,0) 100%) !important; +} +:root:-moz-window-inactive + .tabbrowser-strip[treestyletab-mode="vertical"][treestyletab-style~="aero"], +:root:-moz-window-inactive + .tabbrowser-tabs[treestyletab-mode="vertical"][treestyletab-style~="aero"] + .scrollbox-innerbox { background: transparent !important; } @@ -110,8 +155,11 @@ tabbrowser[treestyletab-tabbar-position="right"] .tabbrowser-arrowscrollbox, :root:-moz-window-inactive .tabbrowser-tabs[treestyletab-mode="vertical"][overflow="true"] - .tabbrowser-arrowscrollbox .scrollbox-innerbox { - background: url("shadow-inactive-l.png") repeat-y top right !important; + .tabbrowser-arrowscrollbox + scrollbox { + background-image: url("shadow-inactive-l.png") !important; + background-repeat: repeat-y !important; + background-position: top right !important; } :root:-moz-window-inactive .tabbrowser-tabs[treestyletab-mode="vertical"][treestyletab-tab-inverted="true"]:not([overflow="true"]) @@ -119,8 +167,10 @@ tabbrowser[treestyletab-tabbar-position="right"] :root:-moz-window-inactive .tabbrowser-tabs[treestyletab-mode="vertical"][treestyletab-tab-inverted="true"][overflow="true"] .tabbrowser-arrowscrollbox - .scrollbox-innerbox { - background: url("shadow-inactive-r.png") repeat-y top left !important; + scrollbox { + background-image: url("shadow-inactive-r.png") !important; + background-repeat: repeat-y !important; + background-position: top left !important; } :root:-moz-window-inactive diff --git a/skin/classic/treestyletab/sidebar/sidebar.css b/skin/classic/treestyletab/sidebar/sidebar.css index 16189a89..4ef8ba64 100644 --- a/skin/classic/treestyletab/sidebar/sidebar.css +++ b/skin/classic/treestyletab/sidebar/sidebar.css @@ -18,12 +18,54 @@ /* Background colour for the tree sidebar (light blue when window is active, grey otherwise) */ .tabbrowser-strip[treestyletab-mode="vertical"] { - background: transparent !important; - background-color: #d4dde5 !important; + background: #d4dde5 !important; } +/* these styles are required to cover narrow scrollbars. */ +.tabbrowser-tabs[treestyletab-mode="vertical"] + .scrollbox-innerbox { + background: linear-gradient(to left, + rgba(212,221,229,1) 0%, + rgba(212,221,229,1) 10%, + rgba(212,221,229,0) 11%, + rgba(212,221,229,0) 100%) !important; +} +.tabbrowser-tabs[treestyletab-tabbar-position="left"][treestyletab-invert-scrollbar="true"] + .scrollbox-innerbox { + background: linear-gradient(to right, + rgba(212,221,229,1) 0%, + rgba(212,221,229,1) 10%, + rgba(212,221,229,0) 11%, + rgba(212,221,229,0) 100%) !important; +} +.tabbrowser-tabs[treestyletab-mode="vertical"] + .scrollbox-innerbox { + background: linear-gradient(to left, + rgba(212,221,229,1) 0%, + rgba(212,221,229,1) 10%, + rgba(212,221,229,0) 11%, + rgba(212,221,229,0) 100%) !important; +} +.tabbrowser-tabs[treestyletab-tabbar-position="left"][treestyletab-invert-scrollbar="true"] + .scrollbox-innerbox { + background: linear-gradient(to right, + rgba(212,221,229,1) 0%, + rgba(212,221,229,1) 10%, + rgba(212,221,229,0) 11%, + rgba(212,221,229,0) 100%) !important; +} + #main-window:-moz-window-inactive .tabbrowser-strip:not([treestyletab-style~="aero"])[treestyletab-mode="vertical"] { - background-color: #e8e8e8 !important; + background: #e8e8e8 !important; +} +#main-window:-moz-window-inactive + .tabbrowser-tabs:not([treestyletab-style~="aero"])[treestyletab-mode="vertical"] + .scrollbox-innerbox { + background: linear-gradient(to right, + rgba(232,232,232,1) 0%, + rgba(232,232,232,1) 10%, + rgba(232,232,232,0) 11%, + rgba(232,232,232,0) 100%) !important; } /* autohide */ .treestyletab-tabbar-toolbar[treestyletab-tabbar-autohide][treestyletab-mode="vertical"]