From df34cfd613a8a5d068244866384a95636c892908 Mon Sep 17 00:00:00 2001 From: Rafael Mardojai CM Date: Sun, 2 Jun 2019 13:15:51 -0500 Subject: [PATCH] New CSD code --- chrome/parts/csd-fullscreen.css | 71 ----------- chrome/parts/csd-left-controls.css | 73 ------------ chrome/parts/csd.css | 182 ++++++++++++++++++----------- chrome/parts/toolbox.css | 29 +++-- chrome/theme.css | 4 + 5 files changed, 135 insertions(+), 224 deletions(-) delete mode 100644 chrome/parts/csd-fullscreen.css delete mode 100644 chrome/parts/csd-left-controls.css diff --git a/chrome/parts/csd-fullscreen.css b/chrome/parts/csd-fullscreen.css deleted file mode 100644 index 401850b..0000000 --- a/chrome/parts/csd-fullscreen.css +++ /dev/null @@ -1,71 +0,0 @@ -/* GNOME CSD styles for headerbar on Firefox [tabsintitlebar]+[inFullscreen] */ - -@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); - -:root[tabsintitlebar][inFullscreen] #nav-bar { - margin-right: 123px !important; -} - -/* Move window buttons next to the header bar */ -:root[tabsintitlebar][inFullscreen] #window-controls { - -moz-appearance: none !important; - background-image: var(--gnome-headerbar-bgimage) !important; - border-bottom: var(--gnome-headerbar-border-bottom) !important; - box-shadow: var(--gnome-headerbar-box-shadow); - height: unset !important; - padding-right: 3px; - position: absolute !important; - right: 0; - top: 0; -} -:root[tabsintitlebar][inFullscreen] #window-controls:-moz-window-inactive { - background-image: var(--gnome-inactive-headerbar-bgimage) !important; - border-bottom: var(--gnome-inactive-headerbar-border-bottom) !important; - box-shadow: var(--gnome-inactive-headerbar-box-shadow) !important; -} - -/* Window buttons */ -:root[tabsintitlebar][inFullscreen] #window-controls toolbarbutton { - -moz-appearance: none !important; - border: var(--gnome-headerbar-button-border) !important; - border-color: transparent !important; - border-radius: 3px !important; - height: 34px; - margin: 6px 3px !important; - padding: 0 2px !important; - width: 34px; -} -:root[tabsintitlebar][inFullscreen] #window-controls toolbarbutton .toolbarbutton-icon { - filter: invert(85%); - width: 16px; -} -:root[tabsintitlebar][inFullscreen] #window-controls:-moz-window-inactive toolbarbutton .toolbarbutton-icon { - opacity: .7 !important; -} -:root[tabsintitlebar][inFullscreen] #window-controls:not(:-moz-window-inactive) toolbarbutton:not([disabled]):hover { - background-image: var(--gnome-headerbar-button-hover-bgimage); - border: var(--gnome-headerbar-button-border) !important; -} -:root[tabsintitlebar][inFullscreen] #window-controls:not(:-moz-window-inactive) toolbarbutton:not([disabled]):active { - background-image: var(--gnome-headerbar-button-active-bgimage); - box-shadow: var(--gnome-headerbar-button-active-box-shadow); - border: var(--gnome-headerbar-button-border) !important; -} -:root[tabsintitlebar][inFullscreen] #window-controls:not(:-moz-window-inactive) toolbarbutton[disabled] { - background-color: var(--gnome-headerbar-button-disabled-bgcolor); - box-shadow: var(--gnome-headerbar-button-disabled-box-shadow); - border: var(--gnome-headerbar-button-border) !important; -} - -:root[tabsintitlebar][inFullscreen] #window-controls #close-button .toolbarbutton-icon { - filter: var(--gnome-icons-hack-filter); - list-style-image: url("moz-icon://stock/window-close-symbolic?size=dialog") !important; -} -:root[tabsintitlebar][inFullscreen] #window-controls #restore-button .toolbarbutton-icon { - filter: var(--gnome-icons-hack-filter); - list-style-image: url("moz-icon://stock/view-restore-symbolic?size=dialog") !important; -} -:root[tabsintitlebar][inFullscreen] #window-controls #minimize-button .toolbarbutton-icon { - filter: var(--gnome-icons-hack-filter); - list-style-image: url("moz-icon://stock/window-minimize-symbolic?size=dialog") !important; -} \ No newline at end of file diff --git a/chrome/parts/csd-left-controls.css b/chrome/parts/csd-left-controls.css deleted file mode 100644 index 8730795..0000000 --- a/chrome/parts/csd-left-controls.css +++ /dev/null @@ -1,73 +0,0 @@ -@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); - -@media (-moz-gtk-csd-reversed-placement) { - /* Navbar */ - :root[tabsintitlebar] #nav-bar { - padding-left: 7px !important; - padding-right: 3px !important; - position: relative; - } - - /* Window controls separator */ - :root[tabsintitlebar] #nav-bar::after { - left: 3px; - right: auto !important; - } - - /* Window buttons position */ - :root[tabsintitlebar] #titlebar .titlebar-buttonbox-container { - left: 0; - right: auto !important; - } - - :root[tabsintitlebar] #titlebar .titlebar-buttonbox { - padding-left: 3px; - padding-right: 0 !important;; - } - - /* Window controls: at least 1 button */ - @media (-moz-gtk-csd-minimize-button), (-moz-gtk-csd-maximize-button), (-moz-gtk-csd-close-button) { - :root[tabsintitlebar] #nav-bar { - margin-left: 43px; - margin-right: 0 !important; - } - } - /* Window controls: at least 2 buttons */ - @media (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-maximize-button), - (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-close-button), - (-moz-gtk-csd-maximize-button) and (-moz-gtk-csd-close-button) { - :root[tabsintitlebar] #nav-bar { - margin-left: 83px; - margin-right: 0 !important; - } - } - /* Window controls: 3 buttons */ - @media (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-maximize-button) and (-moz-gtk-csd-close-button) { - :root[tabsintitlebar] #nav-bar { - margin-left: 123px; - margin-right: 0 !important; - } - } - - /* CSD rounded corners */ - :root[tabsintitlebar]:not([sizemode="maximized"]):not([inFullscreen]) #nav-bar { - border-top-left-radius: 0 !important; - border-top-right-radius: 8px !important; - } - :root[tabsintitlebar]:not([sizemode="maximized"]):not([inFullscreen]) .titlebar-buttonbox { - border-top-left-radius: 8px !important; - border-top-right-radius: 0 !important; - } - - /* Fullscreen */ - :root[tabsintitlebar][inFullscreen] #nav-bar { - margin-left: 123px !important; - margin-right: 0 !important; - } - :root[tabsintitlebar][inFullscreen] #window-controls { - padding-left: 3px; - padding-right: 0 !important; - left: 0; - right: auto !important;; - } -} diff --git a/chrome/parts/csd.css b/chrome/parts/csd.css index a6a534d..71839ec 100644 --- a/chrome/parts/csd.css +++ b/chrome/parts/csd.css @@ -1,55 +1,65 @@ /* GNOME CSD styles for headerbar on Firefox [tabsintitlebar] */ -@import "csd-fullscreen.css"; -@import "csd-left-controls.css"; @namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); -/* Navbar position */ +/* Navbar */ :root[tabsintitlebar] #nav-bar { - padding-right: 7px !important; + border-radius: 6px 6px 0 0; position: relative; } -:root[tabsintitlebar] #toolbar-menubar:not([inactive=true]) { - height: 30px !important; - margin-bottom: 8px; + +/* Window controls: at least 1 button */ +@media (-moz-gtk-csd-minimize-button), (-moz-gtk-csd-maximize-button), (-moz-gtk-csd-close-button) { + :root[tabsintitlebar]:not([inFullscreen]) #nav-bar { + padding-right: 50px !important; + } } -:root[tabsintitlebar] #titlebar { - -moz-appearance: none !important; +/* Window controls: at least 2 buttons */ +@media (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-maximize-button), + (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-close-button), + (-moz-gtk-csd-maximize-button) and (-moz-gtk-csd-close-button) { + :root[tabsintitlebar]:not([inFullscreen]) #nav-bar { + padding-right: 90px !important; + } +} +/* Window controls: 3 buttons */ +@media (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-maximize-button) and (-moz-gtk-csd-close-button) { + :root[tabsintitlebar]:not([inFullscreen]) #nav-bar { + padding-right: 130px !important; + } } -/* Add window controls separator */ -:root[tabsintitlebar] #nav-bar::after { - content: ""; - position: absolute; - right: 3px; - top: 6px; - height: 34px; - border-right: 1px solid rgba(0, 0, 0, .1); +/* Fullscreen */ +:root[tabsintitlebar][inFullscreen] #nav-bar { + padding-right: 50px !important; } -/* Move window buttons next to the header bar */ -:root[tabsintitlebar] #titlebar .titlebar-buttonbox-container { +/* Window buttons box */ +:root[tabsintitlebar] #titlebar .titlebar-buttonbox-container, +:root[tabsintitlebar][inFullscreen] #window-controls { + padding: 0 3px 0 4px; position: absolute !important; right: 0; top: 0; -moz-appearance: none !important; } -:root[tabsintitlebar] #titlebar .titlebar-buttonbox { - background-image: var(--gnome-headerbar-bgimage) !important; - border-bottom: var(--gnome-headerbar-border-bottom) !important; - box-shadow: var(--gnome-headerbar-box-shadow); - height: unset !important; - padding-right: 3px; +:root[tabsintitlebar] #titlebar .titlebar-buttonbox { -moz-appearance: none !important; } -:root[tabsintitlebar] #titlebar .titlebar-buttonbox:-moz-window-inactive { - background-image: var(--gnome-inactive-headerbar-bgimage) !important; - border-bottom: var(--gnome-inactive-headerbar-border-bottom) !important; - box-shadow: var(--gnome-inactive-headerbar-box-shadow) !important; -} + +/* Window buttons separator */ +:root[tabsintitlebar] #titlebar .titlebar-buttonbox-container::after { + content: ""; + position: absolute; + left: 0; + top: 6px; + height: 34px; + border-right: 1px solid rgba(0, 0, 0, .1); +} /* Window buttons */ -:root[tabsintitlebar] #titlebar .titlebar-button { +:root[tabsintitlebar] #titlebar .titlebar-button, +:root[tabsintitlebar][inFullscreen] #window-controls toolbarbutton { -moz-appearance: none !important; border: var(--gnome-headerbar-button-border) !important; border-color: transparent !important; @@ -60,23 +70,28 @@ transition: all .3s ease-out; width: 34px; } -:root[tabsintitlebar] #titlebar .titlebar-button .toolbarbutton-icon { +:root[tabsintitlebar] #titlebar .titlebar-button .toolbarbutton-icon, +:root[tabsintitlebar][inFullscreen] #window-controls toolbarbutton .toolbarbutton-icon { filter: invert(85%); width: 16px; } -:root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-button .toolbarbutton-icon { - opacity: .7 !important; +:root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-button .toolbarbutton-icon, +:root[tabsintitlebar][inFullscreen] #window-controls:-moz-window-inactive toolbarbutton .toolbarbutton-icon { + opacity: .5 !important; } -:root[tabsintitlebar] #titlebar:not(:-moz-window-inactive) .titlebar-button:not([disabled]):hover { +:root[tabsintitlebar] #titlebar:not(:-moz-window-inactive) .titlebar-button:not([disabled]):hover, +:root[tabsintitlebar][inFullscreen] #window-controls:not(:-moz-window-inactive) toolbarbutton:not([disabled]):hover { background-image: var(--gnome-headerbar-button-hover-bgimage); border: var(--gnome-headerbar-button-border) !important; } -:root[tabsintitlebar] #titlebar:not(:-moz-window-inactive) .titlebar-button:not([disabled]):active { +:root[tabsintitlebar] #titlebar:not(:-moz-window-inactive) .titlebar-button:not([disabled]):active, +:root[tabsintitlebar][inFullscreen] #window-controls:not(:-moz-window-inactive) toolbarbutton:not([disabled]):active { background-image: var(--gnome-headerbar-button-active-bgimage); box-shadow: var(--gnome-headerbar-button-active-box-shadow); border: var(--gnome-headerbar-button-border) !important; } -:root[tabsintitlebar] #titlebar:not(:-moz-window-inactive) .titlebar-button[disabled] { +:root[tabsintitlebar] #titlebar:not(:-moz-window-inactive) .titlebar-button[disabled], +:root[tabsintitlebar][inFullscreen] #window-controls:not(:-moz-window-inactive) toolbarbutton[disabled] { background-color: var(--gnome-headerbar-button-disabled-bgcolor); box-shadow: var(--gnome-headerbar-button-disabled-box-shadow); border: var(--gnome-headerbar-button-border) !important; @@ -94,42 +109,67 @@ filter: var(--gnome-icons-hack-filter); list-style-image: url("moz-icon://stock/window-minimize-symbolic?size=dialog") !important; } +:root[tabsintitlebar][inFullscreen] #window-controls #restore-button .toolbarbutton-icon { + filter: var(--gnome-icons-hack-filter); + list-style-image: url("moz-icon://stock/view-restore-symbolic?size=dialog") !important; +} + +:root[tabsintitlebar][inFullscreen] #window-controls #close-button, +:root[tabsintitlebar][inFullscreen] #window-controls #minimize-button { + display: none; +} + +/* Left window buttons */ +@media (-moz-gtk-csd-reversed-placement) { + :root[tabsintitlebar]:not([inFullscreen]) #nav-bar { + padding-right: 3px !important; + } + + /* Window buttons box */ + :root[tabsintitlebar] #titlebar .titlebar-buttonbox-container { + padding: 0 3px 0 4px; + left: 0; + right: auto; + } + + /* Window buttons separator */ + :root[tabsintitlebar] #titlebar .titlebar-buttonbox-container::after { + left: auto; + right: 0; + } + + /* Window controls: at least 1 button */ + @media (-moz-gtk-csd-minimize-button), (-moz-gtk-csd-maximize-button), (-moz-gtk-csd-close-button) { + :root[tabsintitlebar]:not([inFullscreen]) #nav-bar { + padding-left: 50px !important; + } + } + /* Window controls: at least 2 buttons */ + @media (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-maximize-button), + (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-close-button), + (-moz-gtk-csd-maximize-button) and (-moz-gtk-csd-close-button) { + :root[tabsintitlebar]:not([inFullscreen]) #nav-bar { + padding-left: 90px !important; + } + } + /* Window controls: 3 buttons */ + @media (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-maximize-button) and (-moz-gtk-csd-close-button) { + :root[tabsintitlebar]:not([inFullscreen]) #nav-bar { + padding-left: 130px !important; + } + } +} + +/* */ +:root[tabsintitlebar] #toolbar-menubar:not([inactive=true]) { + height: 30px !important; + margin-bottom: 8px; +} +:root[tabsintitlebar] #titlebar { + -moz-appearance: none !important; +} /* Fix the issue when dragging tabs */ :root[tabsintitlebar] #navigator-toolbox[movingtab] #TabsToolbar { padding-bottom: 0 !important; } - -/* Window controls: at least 1 button */ -@media (-moz-gtk-csd-minimize-button), (-moz-gtk-csd-maximize-button), (-moz-gtk-csd-close-button) { - :root[tabsintitlebar] #nav-bar { - margin-right: 43px; - } -} -/* Window controls: at least 2 buttons */ -@media (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-maximize-button), - (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-close-button), - (-moz-gtk-csd-maximize-button) and (-moz-gtk-csd-close-button) { - :root[tabsintitlebar] #nav-bar { - margin-right: 83px; - } -} -/* Window controls: 3 buttons */ -@media (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-maximize-button) and (-moz-gtk-csd-close-button) { - :root[tabsintitlebar] #nav-bar { - margin-right: 123px; - } -} - -/* CSD rounded corners */ -:root[tabsintitlebar]:not([sizemode="maximized"]):not([inFullscreen]) #navigator-toolbox { - border: 1px solid var(--gnome-window-border-color) !important; - border-radius: 8px 8px 0 0 !important; - margin: -1px -1px 0 -1px !important; -} -:root[tabsintitlebar]:not([sizemode="maximized"]):not([inFullscreen]) #nav-bar { - border-top-left-radius: 8px; -} -:root[tabsintitlebar]:not([sizemode="maximized"]):not([inFullscreen]) .titlebar-buttonbox { - border-top-right-radius: 8px; -} \ No newline at end of file diff --git a/chrome/parts/toolbox.css b/chrome/parts/toolbox.css index 27ffaaf..5e27b05 100644 --- a/chrome/parts/toolbox.css +++ b/chrome/parts/toolbox.css @@ -8,22 +8,33 @@ @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; /* Toolbox colors */ -#navigator-toolbox { - background-color: var(--gnome-tabbar-bgcolor) !important; - border-bottom: var(--gnome-tabbar-border-bottom); +#PersonalToolbar, #toolbar-menubar, #TabsToolbar { + background-color: var(--gnome-toolbar-bgcolor) !important; + border-bottom: var(--gnome-toolbar-border-bottom) !important; } -#navigator-toolbox:-moz-window-inactive { - background-color: var(--gnome-inactive-tabbar-bgcolor) !important; - border-bottom: var(--gnome-inactive-tabbar-border-bottom); +#PersonalToolbar:-moz-window-inactive, #toolbar-menubar:-moz-window-inactive, #TabsToolbar:-moz-window-inactive { + background-color: var(--gnome-inactive-toolbar-bgcolor) !important; + border-bottom: var(--gnome-inactive-toolbar-border-bottom) !important; } -/* Menu bar */ +#navigator-toolbox:-moz-window-inactive label, #navigator-toolbox:-moz-window-inactive image { + opacity: 0.5; +} + +#toolbar-menubar:not([inactive=true]) { + margin-bottom: 0 !important; +} +#PersonalToolbar { + height: 38px; +} + +/* Menu bar #toolbar-menubar:not([inactive=true]) { border-bottom: var(--gnome-bookmarkbar-border-bottom) !important; margin-bottom: 0 !important; } -/* Bookmark bar */ +/* Bookmark bar #PersonalToolbar { border-bottom: var(--gnome-bookmarkbar-border-bottom) !important; height: var(--gnome-bookmarkbar-height); @@ -31,7 +42,7 @@ #PersonalToolbar:-moz-window-inactive { background-color: var(--gnome-inactive-tabbar-bgcolor) !important; border-top: var(--gnome-inactive-bookmarkbar-border-bottom) !important; -} +} */ /* Overrides: Remove border below the menu bar / above the header bar */ #TabsToolbar:not([collapsed="true"]) + #nav-bar { diff --git a/chrome/theme.css b/chrome/theme.css index c9f390f..ccfb6b1 100644 --- a/chrome/theme.css +++ b/chrome/theme.css @@ -10,6 +10,10 @@ :root { --space-above-tabbar: 0 !important; } +#main-window { + -moz-appearance: -moz-window-titlebar !important; + background: none !important; +} /* Sidebar */ #search-box {