1/* GNOME CSD styles for headerbar on Firefox [tabsintitlebar] */ 2 3@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 4 5#main-window { 6 -moz-appearance: -moz-window-titlebar !important; 7} 8 9/* Headerbar top border corners rounded */ 10:root[tabsintitlebar]:not([inFullscreen]):not([sizemode="maximized"]) #nav-bar { 11 border-radius: 2px 2px 0 0 !important; 12} 13 14/* Window buttons box */ 15:root[tabsintitlebar] #titlebar .titlebar-buttonbox-container, 16:root[tabsintitlebar] #titlebar-buttonbox-container, 17:root[tabsintitlebar][inFullscreen] #window-controls { 18 -moz-appearance: none !important; 19 padding: 0 6px; 20 position: absolute !important; 21 right: 0; 22 top: 0; 23 display: block !important; 24} 25 26:root[tabsintitlebar] #titlebar .titlebar-buttonbox { 27 -moz-appearance: none !important; 28} 29 30/* Window buttons: at least 1 button */ 31@media (-moz-gtk-csd-minimize-button), (-moz-gtk-csd-maximize-button), (-moz-gtk-csd-close-button) { 32 :root[tabsintitlebar]:not([inFullscreen]) #nav-bar { 33 padding-right: 40px !important; 34 } 35} 36/* Window buttons: at least 2 buttons */ 37@media (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-maximize-button), 38 (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-close-button), 39 (-moz-gtk-csd-maximize-button) and (-moz-gtk-csd-close-button) { 40 :root[tabsintitlebar]:not([inFullscreen]) #nav-bar { 41 padding-right: 80px !important; 42 } 43} 44/* Window buttons: 3 buttons */ 45@media (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-maximize-button) and (-moz-gtk-csd-close-button) { 46 :root[tabsintitlebar]:not([inFullscreen]) #nav-bar { 47 padding-right: 120px !important; 48 } 49} 50 51/* Left window buttons */ 52@media (-moz-gtk-csd-reversed-placement) { 53 :root[tabsintitlebar]:not([inFullscreen]) #nav-bar { 54 padding-right: 0 !important; 55 } 56 57 /* Window buttons box */ 58 :root[tabsintitlebar] #titlebar .titlebar-buttonbox-container { 59 left: 0; 60 right: auto; 61 } 62 63 /* Window controls: at least 1 button */ 64 @media (-moz-gtk-csd-minimize-button), (-moz-gtk-csd-maximize-button), (-moz-gtk-csd-close-button) { 65 :root[tabsintitlebar]:not([inFullscreen]) #nav-bar { 66 padding-left: 50px !important; 67 } 68 } 69 /* Window controls: at least 2 buttons */ 70 @media (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-maximize-button), 71 (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-close-button), 72 (-moz-gtk-csd-maximize-button) and (-moz-gtk-csd-close-button) { 73 :root[tabsintitlebar]:not([inFullscreen]) #nav-bar { 74 padding-left: 90px !important; 75 } 76 } 77 /* Window controls: 3 buttons */ 78 @media (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-maximize-button) and (-moz-gtk-csd-close-button) { 79 :root[tabsintitlebar]:not([inFullscreen]) #nav-bar { 80 padding-left: 130px !important; 81 } 82 } 83} 84 85/* Fullscreen headerbar padding for 1 button */ 86:root[tabsintitlebar][inFullscreen] #nav-bar { 87 padding-right: 50px !important; 88} 89 90/* Remove close and minimize buttons from fullscreen buttons */ 91:root[tabsintitlebar][inFullscreen] #window-controls #close-button, 92:root[tabsintitlebar][inFullscreen] #window-controls #minimize-button, 93:root[tabsintitlebar][inFullscreen] #titlebar .titlebar-buttonbox-container { 94 display: none !important; 95} 96 97/* Remove tabsbar titlebar blank spaces */ 98:root[tabsintitlebar] #TabsToolbar .titlebar-placeholder { 99 display: none !important; 100} 101 102/* Prevent menubar from breaking */ 103:root[tabsintitlebar] #toolbar-menubar:not([inactive=true]) { 104 height: 28px !important; 105 margin-bottom: 3px; 106} 107 108/* Remove default style of titlebar */ 109:root[tabsintitlebar] #titlebar { 110 -moz-appearance: none !important; 111} 112 113/* Fix the issue when dragging tabs */ 114:root[tabsintitlebar] #navigator-toolbox[movingtab] #TabsToolbar { 115 padding-bottom: 0 !important; 116} 117 118/* Window buttons style */ 119:root[tabsintitlebar] #titlebar .titlebar-button, 120:root[tabsintitlebar][inFullscreen] #window-controls toolbarbutton { 121 -moz-appearance: none !important; 122 border: none !important; 123 border-radius: 100% !important; 124 padding: 0 0 !important; 125 transition: all .2s ease; 126} 127 128:root[tabsintitlebar] #titlebar .titlebar-button { 129 height: 22px !important; 130 width: 22px !important; 131 margin: 8px 6px !important; 132} 133 134:root[tabsintitlebar] #titlebar .titlebar-min:hover, 135:root[tabsintitlebar] #titlebar #titlebar-min:hover { 136 background: var(--gnome-titlebutton-min-hover-background) !important; 137} 138 139:root[tabsintitlebar] #titlebar .titlebar-min:active, 140:root[tabsintitlebar] #titlebar #titlebar-min:active { 141 background: var(--gnome-titlebutton-min-active-background) !important; 142} 143 144:root[tabsintitlebar] #titlebar .titlebar-restore:hover, 145:root[tabsintitlebar] #titlebar .titlebar-max:hover, 146:root[tabsintitlebar] #titlebar #titlebar-max:hover { 147 background: var(--gnome-titlebutton-max-hover-background) !important; 148} 149 150:root[tabsintitlebar] #titlebar .titlebar-restore:active, 151:root[tabsintitlebar] #titlebar .titlebar-max:active, 152:root[tabsintitlebar] #titlebar #titlebar-max:active { 153 background: var(--gnome-titlebutton-max-active-background) !important; 154} 155 156:root[tabsintitlebar] #titlebar .titlebar-close:hover, 157:root[tabsintitlebar] #titlebar #titlebar-close:hover { 158 background: var(--gnome-titlebutton-close-hover-background) !important; 159} 160 161:root[tabsintitlebar] #titlebar .titlebar-close:active, 162:root[tabsintitlebar] #titlebar #titlebar-close:active { 163 background: var(--gnome-titlebutton-close-active-background) !important; 164} 165 166:root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-button { 167 opacity: .4 !important; 168} 169 170:root[tabsintitlebar][inFullscreen] #window-controls toolbarbutton { 171 height: 28px !important; 172 width: 28px !important; 173 margin: 6px 6px !important; 174} 175