From cf06954acb222101a92bc42dc9aeaec405cb4277 Mon Sep 17 00:00:00 2001 From: Rafael Mardojai CM Date: Mon, 4 Jul 2022 11:11:11 -0500 Subject: [PATCH] Refine colors Signed-off-by: Rafael Mardojai CM --- theme/colors/dark.css | 14 ++++---------- theme/colors/light.css | 10 ++-------- theme/parts/entries.css | 1 - theme/parts/sidebar.css | 8 +++++--- theme/parts/tabsbar.css | 27 +++++++++++---------------- 5 files changed, 22 insertions(+), 38 deletions(-) diff --git a/theme/colors/dark.css b/theme/colors/dark.css index 68d626a..14cd360 100644 --- a/theme/colors/dark.css +++ b/theme/colors/dark.css @@ -10,13 +10,13 @@ --gnome-browser-before-load-background: #242424; /* Accent */ - --gnome-accent-bg: #3584e4; + --gnome-accent-bg: #3584e4; --gnome-accent: #78aeed; /* Toolbars */ --gnome-toolbar-background: #242424; --gnome-toolbar-color: #ffffff; - --gnome-toolbar-border-color: #4E4E4E; + --gnome-toolbar-border-color: rgba(255, 255, 255, .15); --gnome-toolbar-icon-fill: #eeeeec; --gnome-inactive-toolbar-color: #919190; --gnome-inactive-toolbar-background: var(--gnome-toolbar-background); @@ -54,9 +54,8 @@ --gnome-button-active-close-background: var(--gnome-button-active-background); /* Entries */ - --gnome-entry-background: rgba(255, 255, 255, .1); + --gnome-entry-background: rgba(255, 255, 255, .1); --gnome-entry-color: #ffffff; - --gnome-inactive-entry-background: #2E2E2E; --gnome-inactive-entry-color: #d6d6d6; --gnome-focused-urlbar-border-color: rgba(120, 174, 237, .5); /* Same as --gnome-accent but with opacity*/ @@ -67,19 +66,14 @@ --gnome-switch-active-slider-background: #ffffff; /* Tabs */ - --gnome-tabbar-tab-color: rgb(141, 144, 145); --gnome-tabbar-tab-background: #262626; - --gnome-tabbar-tab-border-color: #454545; + --gnome-tabbar-tab-border-color: var(--gnome-toolbar-border-color); --gnome-tabbar-tab-hover-background: #2D2D2D; - --gnome-tabbar-tab-hover-color: rgb(200, 200, 200); --gnome-tabbar-tab-active-background: #303030; --gnome-tabbar-tab-active-background-contrast: #4F4F4F; - --gnome-tabbar-tab-active-color: #ffffff; --gnome-tabbar-tab-active-hover-background: #363636; - --gnome-inactive-tabbar-tab-color: rgb(141, 144, 145); --gnome-inactive-tabbar-tab-background: #1C1C1C; --gnome-inactive-tabbar-tab-active-background: #242424; - --gnome-inactive-tabbar-tab-active-color: rgb(141, 144, 145); --gnome-tab-button-background: rgba(0, 0, 0, .5); --gnome-tab-button-hover-background: rgba(0, 0, 0, .6); --gnome-tabbar-tab-identity-base-opacity: 0; diff --git a/theme/colors/light.css b/theme/colors/light.css index 820b5a6..d15d538 100644 --- a/theme/colors/light.css +++ b/theme/colors/light.css @@ -16,7 +16,7 @@ /* Toolbars */ --gnome-toolbar-background: #fafafa; --gnome-toolbar-color: rgb(46, 52, 54); - --gnome-toolbar-border-color: #CECECE; + --gnome-toolbar-border-color: rgba(0, 0, 0, .15); --gnome-toolbar-icon-fill: #2e3436; --gnome-inactive-toolbar-background: var(--gnome-toolbar-background); --gnome-inactive-toolbar-color: #d5d0cc; @@ -56,7 +56,6 @@ /* Entries */ --gnome-entry-background: rgba(0, 0, 0, .08); --gnome-entry-color: #303030; - --gnome-inactive-entry-background: #F0F0F0; --gnome-inactive-entry-color: #303030; --gnome-focused-urlbar-border-color: rgba(28, 113, 216, .5); @@ -67,19 +66,14 @@ --gnome-switch-active-slider-background: #ffffff; /* Tabs */ - --gnome-tabbar-tab-color: #303030; --gnome-tabbar-tab-background: #E1E1E1; - --gnome-tabbar-tab-border-color: #CECECE; + --gnome-tabbar-tab-border-color: var(--gnome-toolbar-border-color); --gnome-tabbar-tab-hover-background: #DCDCDC; - --gnome-tabbar-tab-hover-color: #303030; --gnome-tabbar-tab-active-background: #EBEBEB; --gnome-tabbar-tab-active-background-contrast: #FAFAFA; - --gnome-tabbar-tab-active-color: #303030; --gnome-tabbar-tab-active-hover-background: #E5E5E5; - --gnome-inactive-tabbar-tab-color: #303030; --gnome-inactive-tabbar-tab-background: #EFEFEF; --gnome-inactive-tabbar-tab-active-background: #FAFAFA; - --gnome-inactive-tabbar-tab-active-color: var(--gnome-inactive-tabbar-tab-color); --gnome-tab-button-background: rgba(255, 255, 255, .5); --gnome-tab-button-hover-background: rgba(255, 255, 255, .6); --gnome-tabbar-tab-identity-base-opacity: .1; diff --git a/theme/parts/entries.css b/theme/parts/entries.css index 975367e..7cea0a7 100644 --- a/theme/parts/entries.css +++ b/theme/parts/entries.css @@ -50,7 +50,6 @@ #loginTextbox:-moz-window-inactive, #password1Textbox:-moz-window-inactive, .tabsFilter:-moz-window-inactive { - background: var(--gnome-inactive-entry-background) !important; color: var(--gnome-inactive-entry-color) !important; } diff --git a/theme/parts/sidebar.css b/theme/parts/sidebar.css index 8ac1126..7b462ab 100644 --- a/theme/parts/sidebar.css +++ b/theme/parts/sidebar.css @@ -14,12 +14,14 @@ opacity: 0.7 !important; } #sidebar-splitter { - background: var(--gnome-toolbar-border-color) !important; + background: var(--gnome-toolbar-background) !important; border: 0 !important; - width: 1px !important; + border-right: 1px solid var(--gnome-toolbar-border-color) !important; + width: 0 !important; } #sidebar-splitter:-moz-window-inactive { - background: var(--gnome-inactive-toolbar-border-color) !important; + background: var(--gnome-inactive-toolbar-background) !important; + border-color: var(--gnome-inactive-toolbar-border-color) !important; } #sidebar-header { diff --git a/theme/parts/tabsbar.css b/theme/parts/tabsbar.css index c55b5b1..b85cde9 100644 --- a/theme/parts/tabsbar.css +++ b/theme/parts/tabsbar.css @@ -64,16 +64,23 @@ tab > stack { } /* Fake tabsbar border */ -#tabbrowser-arrowscrollbox:after { +#tabbrowser-arrowscrollbox::after { content: ""; display: block; width: 100%; + background: var(--gnome-toolbar-background); border-bottom: 1px solid var(--gnome-tabbar-tab-border-color); - height: 1px; - min-height: 1px; + height: 0; + min-height: 0; position: absolute; bottom: 0; left: 0; + z-index: 100; +} + +#tabbrowser-tabs[movingtab=true] #tabbrowser-arrowscrollbox::after { + bottom: unset; + top: 38px; } /* Remove tab separators */ @@ -113,23 +120,11 @@ tab > stack { /* Tab labels */ tab { - color: var(--gnome-tabbar-tab-color) !important; + color: var(--gnome-toolbar-color) !important; font-family: Cantarell, inherit; font-weight: normal; font-size: 1em; } -tab:hover { - color: var(--gnome-tabbar-tab-hover-color) !important; -} -tab[selected] { - color: var(--gnome-tabbar-tab-active-color) !important; -} -tab:-moz-window-inactive { - color: var(--gnome-inactive-tabbar-tab-color) !important; -} -tab[selected]:-moz-window-inactive { - color: var(--gnome-inactive-tabbar-tab-active-color) !important; -} /* Reset tab background */ .tab-background {