From 78b66cd5580c602bd1e0439ff41317b5647ed0fc Mon Sep 17 00:00:00 2001 From: Croydon Date: Mon, 1 May 2017 19:38:50 +0200 Subject: [PATCH] WebExt: Prevent text selection of tabs + reorder CSS (#13) --- webextension/data/template/basic/index.css | 12 ---- webextension/data/template/basic/tab.css | 55 +++++++++++++++++ .../data/template/basic/tabbrowser.css | 61 +++---------------- webextension/data/theme/base.css | 18 +++--- 4 files changed, 74 insertions(+), 72 deletions(-) diff --git a/webextension/data/template/basic/index.css b/webextension/data/template/basic/index.css index f162d90..85c800b 100644 --- a/webextension/data/template/basic/index.css +++ b/webextension/data/template/basic/index.css @@ -1,14 +1,2 @@ @import "tab.css"; @import "tabbrowser.css"; - -/* Tab toolbar styling */ -#TabsToolbar:not(:-moz-lwtheme) { - height: var(--vtr-tabbar-height); - border-bottom-left-radius: 0px !important; - box-shadow: none !important; - appearance: none !important; - border-top: 1px solid rgb(160,160,160) !important; - -moz-border-right-colors: #fcfcfc rgb(154,154,154) !important; - background-color: var(--vtr-tabbar-background-color) !important; - background-image: none !important; -} diff --git a/webextension/data/template/basic/tab.css b/webextension/data/template/basic/tab.css index 2400c36..5745882 100644 --- a/webextension/data/template/basic/tab.css +++ b/webextension/data/template/basic/tab.css @@ -1,3 +1,58 @@ +.tabbrowser-tab { + -moz-box-pack: start; + -moz-box-flex: 0; + appearance: none !important; + background: var(--vtr-tab-background) !important; + margin: 0 !important; + padding: 1px 0 !important; + height: var(--vtr-tab-height) !important; + min-height: var(--vtr-tab-min-height) !important; + max-height: var(--vtr-tab-max-height) !important; + color: var(--vtr-tab-text-color) !important; + border: var(--vtr-tab-border) !important; + border-radius: var(--vtr-tab-border-radius) !important; + border-left: var(--vtr-tab-border-left) !important; + border-bottom: var(--vtr-tab-border-bottom) !important; +} + +.tabbrowser-tab[pinned] { + margin: 0 !important; + padding: 1px 0 !important; + color: var(--vtr-tab-pinned-text-color) !important; + background: var(--vtr-tab-pinned-background) !important; + font-weight: var(--vtr-tab-pinned-font-weight); + text-shadow: var(--vtr-tab-pinned-text-shadow); + border-left: var(--vtr-tab-pinned-border-left) !important; + border-radius: var(--vtr-tab-pinned-border-radius) !important; +} + +.tabbrowser-tab[selected="true"] { + margin: 0 !important; + padding: 1px 0 !important; + color: var(--vtr-tab-selected-text-color) !important; + background: var(--vtr-tab-selected-background) !important; + font-weight: var(--vtr-tab-selected-font-weight); + text-shadow: var(--vtr-tab-selected-text-shadow); + border-left: var(--vtr-tab-selected-border-left) !important; + border-radius: var(--vtr-tab-selected-border-radius) !important; +} + +.tabbrowser-tab[selected="true"]:-moz-window-inactive { + background-color: InactiveCaption !important; + color: InactiveCaptionText !important; +/* gnome/gtk/cleartype doesn't seem to have inactive states for selected items, lets try this */ +} + +.tabbrowser-tab:not([selected="true"]):hover { + margin: 0 !important; + padding: 1px 0 !important; + background: var(--vtr-tab-hover-background) !important; +} + +.tabbrowser-tab:not(:hover):not([selected="true"]) .tab-close-button { + visibility: collapse !important; +} + /* Keep the close button at a safe distance from the tab label. */ .tab-close-button { position: absolute; diff --git a/webextension/data/template/basic/tabbrowser.css b/webextension/data/template/basic/tabbrowser.css index de97959..5629a86 100644 --- a/webextension/data/template/basic/tabbrowser.css +++ b/webextension/data/template/basic/tabbrowser.css @@ -5,59 +5,16 @@ body { background-color: var(--vtr-tabbrowser-background-color) !important; } -.tabbrowser-tab { - -moz-box-pack: start; - -moz-box-flex: 0; +/* Tab toolbar styling */ +#TabsToolbar:not(:-moz-lwtheme) { + height: var(--vtr-tabbar-height); + border-bottom-left-radius: 0px !important; + box-shadow: none !important; appearance: none !important; - background: var(--vtr-tab-background) !important; - margin: 0 !important; - padding: 1px 0 !important; - height: var(--vtr-tab-height) !important; - min-height: var(--vtr-tab-min-height) !important; - max-height: var(--vtr-tab-max-height) !important; - color: var(--vtr-tab-text-color) !important; - border: var(--vtr-tab-border) !important; - border-radius: var(--vtr-tab-border-radius) !important; - border-left: var(--vtr-tab-border-left) !important; - border-bottom: var(--vtr-tab-border-bottom) !important; -} - -.tabbrowser-tab[pinned] { - margin: 0 !important; - padding: 1px 0 !important; - color: var(--vtr-tab-pinned-text-color) !important; - background: var(--vtr-tab-pinned-background) !important; - font-weight: var(--vtr-tab-pinned-font-weight); - text-shadow: var(--vtr-tab-pinned-text-shadow); - border-left: var(--vtr-tab-pinned-border-left) !important; - border-radius: var(--vtr-tab-pinned-border-radius) !important; -} - -.tabbrowser-tab[selected="true"] { - margin: 0 !important; - padding: 1px 0 !important; - color: var(--vtr-tab-selected-text-color) !important; - background: var(--vtr-tab-selected-background) !important; - font-weight: var(--vtr-tab-selected-font-weight); - text-shadow: var(--vtr-tab-selected-text-shadow); - border-left: var(--vtr-tab-selected-border-left) !important; - border-radius: var(--vtr-tab-selected-border-radius) !important; -} - -.tabbrowser-tab[selected="true"]:-moz-window-inactive { - background-color: InactiveCaption !important; - color: InactiveCaptionText !important; -/* gnome/gtk/cleartype doesn't seem to have inactive states for selected items, lets try this */ -} - -.tabbrowser-tab:not([selected="true"]):hover { - margin: 0 !important; - padding: 1px 0 !important; - background: var(--vtr-tab-hover-background) !important; -} - -.tabbrowser-tab:not(:hover):not([selected="true"]) .tab-close-button { - visibility: collapse !important; + border-top: 1px solid rgb(160,160,160) !important; + -moz-border-right-colors: #fcfcfc rgb(154,154,154) !important; + background-color: var(--vtr-tabbar-background-color) !important; + background-image: none !important; } /* Seperator between tabbar and website */ diff --git a/webextension/data/theme/base.css b/webextension/data/theme/base.css index 690aca8..d1d8941 100644 --- a/webextension/data/theme/base.css +++ b/webextension/data/theme/base.css @@ -5,6 +5,7 @@ body display: flex; flex-flow: column; overflow-y: hidden; + -moz-user-select: none; } #tabbrowser-tabs { @@ -16,19 +17,25 @@ body flex: 0 1 auto; } -/* FIXME: likely to be removed; Style the scrollbox for vertical arrangements. */ +/* FIXME: likely to be removed; Style the scrollbox for vertical arrangements. .tabbrowser-arrowscrollbox > scrollbox { overflow-x: hidden !important; overflow-y: auto !important; } -/* FIXME: likely to be removed; Since we get an actual scrollbar in this vertical arrangement, we - don't need these extra scroll buttons. */ +FIXME: likely to be removed; Since we get an actual scrollbar in this vertical arrangement, we + don't need these extra scroll buttons. .tabbrowser-arrowscrollbox > .scrollbutton-up, .tabbrowser-arrowscrollbox > .scrollbutton-down { visibility: collapse !important; } + FIXME: likely to be removed +.tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox { + -moz-padding-end: 0px ! important; + -moz-padding-start: 0px ! important; +} */ + /* Ensure the tab favicon doesn't stretch. */ .tab-icon-image { max-width: 16px; @@ -103,11 +110,6 @@ body text-overflow: ellipsis } -/* FIXME: likely to be removed */ -.tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox { - -moz-padding-end: 0px ! important; - -moz-padding-start: 0px ! important; -} /* FIXME: likely to be removed; get rid of the tab separator from horizontal tabs */ .tabbrowser-tab:after,