From 7566ef297ab8386ab03989ec3b3237e42a8071f8 Mon Sep 17 00:00:00 2001 From: Rafael Mardojai CM Date: Tue, 12 Dec 2017 17:17:46 -0500 Subject: [PATCH] Better CSD support --- ui/fedora-csd.css | 30 ++++++++++++++++++++++++++---- ui/theme-dark.css | 31 ++++++++++++++++++------------- ui/theme.css | 5 +++-- userChrome.css | 15 ++++++++++++++- 4 files changed, 61 insertions(+), 20 deletions(-) diff --git a/ui/fedora-csd.css b/ui/fedora-csd.css index 2f51d55..e6f023d 100644 --- a/ui/fedora-csd.css +++ b/ui/fedora-csd.css @@ -1,5 +1,18 @@ @namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); +#nav-bar { + margin-top: -4px !important; + padding-right: 3px !important; + position: relative; +} +#nav-bar::after { + content: ""; + position: absolute; + right: 2px; + top: 6px; + height: 32px; + border-right: 1px solid rgba(0, 0, 0, .1); +} /* Move window buttons next to the header bar */ #titlebar-buttonbox { background-image: var(--gnome-headerbar-bgimage) !important; @@ -7,13 +20,15 @@ border-bottom: var(--gnome-headerbar-border-bottom) !important; box-shadow: var(--gnome-headerbar-box-shadow); margin-right: -4px; + margin-top: -4px !important; + padding-right: 4px; } #navigator-toolbox { margin-top: -5px; } -#nav-bar { +/*#nav-bar { margin-right: 40px; -} +}*/ /*#main-window[tabsintitlebar][sizemode="normal"] #navigator-toolbox {}*/ /*#main-window[tabsintitlebar][sizemode="maximized"] #navigator-toolbox {}*/ @@ -23,11 +38,14 @@ border-color: transparent !important; border-radius: 3px !important; height: 34px; - margin: 6px 6px !important; + margin: 6px 3px !important; padding: 0 2px !important; + position: relative; width: 34px; - -moz-appearance: none !important; + -moz-appearance: none !important; + transition: all 0.3s ease-out; } + #titlebar toolbarbutton image { filter: invert(85%); margin-left: 6px; @@ -46,3 +64,7 @@ box-shadow: var(--gnome-headerbar-button-disabled-box-shadow); border: var(--gnome-headerbar-button-border) !important; } + +.titlebar-placeholder[type="pre-tabs"] { + border-inline-end: 0px solid !important; +} diff --git a/ui/theme-dark.css b/ui/theme-dark.css index 6263ee7..64c1e22 100644 --- a/ui/theme-dark.css +++ b/ui/theme-dark.css @@ -12,27 +12,32 @@ --gnome-browser-before-load-bgcolor: #2e3436; /* Extra toolbars like the bookmark bar */ - --toolbar-bgcolor: #2f3434 !important; + --toolbar-bgcolor: linear-gradient(to top, #25292b, #2a2e30 2px, #2c3133 3px) !important; --toolbar-bgimage: none !important; /* Header bar */ - --gnome-headerbar-bgimage: linear-gradient(rgb(67, 74, 74), rgb(57, 63, 63)); + --gnome-headerbar-bgimage: linear-gradient(to top, #25292b, #2a2e30 2px, #2c3133 3px); --gnome-headerbar-border-bottom: 1px solid rgb(28, 31, 31); - --gnome-headerbar-box-shadow: 0 -1px rgb(45, 50, 50) inset, 0 1px rgba(238, 238, 236, .1) inset; - --gnome-headerbar-button-bgimage: linear-gradient(rgb(69, 76, 76), rgb(57, 63, 63) 40%, rgb(45, 50, 50)); - --gnome-headerbar-button-border: 1px solid rgba(28, 31, 31); - --gnome-headerbar-button-box-shadow: 0 1px rgba(255, 255, 255, .1) inset, 0 1px rgba(238, 238, 236, .1); - --gnome-headerbar-button-hover-bgimage: linear-gradient(rgb(91, 100, 100), rgb(67, 73, 73) 40%, rgb(55, 60, 60)); + --gnome-headerbar-box-shadow:inset 0 1px rgba(238, 238, 236, 0.07); + + --gnome-headerbar-button-bgimage: linear-gradient(to bottom, #2e3436, #2a2e30 60%, #25292b); + --gnome-headerbar-button-border: 1px solid #1b1f20; + --gnome-headerbar-button-bottom-border-color: #0b0c0c; + --gnome-headerbar-button-box-shadow: inset 0 1px rgba(255, 255, 255, 0.05); + + --gnome-headerbar-button-hover-bgimage: linear-gradient(to bottom, #353c3e, #2e3436 60%, #2a2e30); + --gnome-headerbar-button-active-bgimage: linear-gradient(rgb(35, 39, 39), rgb(41, 45, 45) 40%, rgb(45, 50, 50)); --gnome-headerbar-button-active-box-shadow: 0 1px rgba(0, 0, 0, .07) inset, 0 2px 1px -2px rgba(0, 0, 0, .6) inset, 0 1px rgba(238, 238, 236, .1); - --gnome-headerbar-button-disabled-bgcolor: #323636; - --gnome-headerbar-button-disabled-box-shadow: 0 1px rgba(255, 255, 255, 0) inset, 0 1px rgba(238, 238, 236, .1); + + --gnome-headerbar-button-disabled-bgcolor: transparent; + --gnome-headerbar-button-disabled-box-shadow: inset 0 0 0 1px rgba(33, 93, 156, 0); /* URL bar */ - --gnome-urlbar-bgimage: linear-gradient(rgb(28, 31, 31), rgb(35, 37, 37) 3px, rgb(41, 41, 41) 90%); - --gnome-urlbar-border: 1px solid #1e2222; - --gnome-urlbar-box-shadow: 0 0 0 1px rgba(33, 93, 156, 0) inset, 0 1px rgba(238, 238, 236, .1); - --gnome-urlbar-height: 32px; + --gnome-urlbar-bgimage: #232729; + --gnome-urlbar-border: 1px solid #1b1f20; + --gnome-urlbar-box-shadow: inset 0 0 0 1px rgba(33, 93, 156, 0); + --gnome-urlbar-height: 34px; /* Tab bar */ --gnome-tabbar-bgcolor: #2f3434; diff --git a/ui/theme.css b/ui/theme.css index 5b3a036..5f51966 100644 --- a/ui/theme.css +++ b/ui/theme.css @@ -109,6 +109,7 @@ tabbrowser tabpanels { #nav-bar #stop-button, #PanelUI-menu-button { border: var(--gnome-headerbar-button-border) !important; + border-bottom-color: var(--gnome-headerbar-button-bottom-border-color) !important; border-radius: 3px !important; height: 34px; margin: 4px 3px !important; @@ -406,7 +407,7 @@ tab[selected] { border-bottom: var(--gnome-tabbar-tab-hover-border-bottom) !important; } -/* Full width tabs */ +/* Full width tabs .tabbrowser-tab:not([style^="max-width"]):not([pinned]), .tabbrowser-tab[style^="max-width: 100px !important;"]:not([pinned]) { max-width: 100% !important; @@ -415,4 +416,4 @@ tab[selected] { .tabbrowser-tab:not([style^="max-width"]):not([pinned]):not([fadein]), .tabbrowser-tab[style^="max-width: 100px !important;"]:not([pinned]):not([fadein]) { max-width: 0.1px !important; -} +}*/ diff --git a/userChrome.css b/userChrome.css index 6095dbd..bcc8e29 100644 --- a/userChrome.css +++ b/userChrome.css @@ -13,4 +13,17 @@ * WARNING: This setting is experimental and doesn't work exactly as it should. * Don't forget to enable widget.allow-client-side-decoration in about:config * if you're using it. */ -/*@import "ui/fedora-csd.css"; /**/ +/* @import "ui/fedora-csd.css"; */ + +/* Client-side decorations window buttons options (Fedora only)*/ +#nav-bar { + /* Close window button only + margin-right: 44px; + */ + /* Two window buttons + margin-right: 84px; + */ + /* Three window buttons + margin-right: 124px; + */ +}