1/* Tabs bar */ 2 3@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; 4 5:root { 6 --space-above-tabbar: 0 !important; 7} 8 9#TabsToolbar { 10 --toolbarbutton-inner-padding: 0 !important; 11} 12 13#TabsToolbar:not([inFullscreen]) #tabbrowser-tabs { 14 margin-bottom: -1px !important; 15} 16 17/* Tabs bar height */ 18#tabbrowser-tabs, 19#tabbrowser-tabs arrowscrollbox { 20 height: auto !important; 21 min-height: auto !important; 22} 23/* Extra margin for the first and last tabs */ 24.tabbrowser-tab[first-tab]:not([pinned=true]) { 25 margin-left: 0 !important; 26} 27.tabbrowser-tab[last-tab]:not([pinned=true]) { 28 margin-right: 0 !important; 29} 30 31/* Remove hover effects on tab bar buttons */ 32#TabsToolbar { 33 --toolbarbutton-active-background: transparent !important; 34 --toolbarbutton-hover-background: transparent !important; 35 padding: 0 3px !important; 36} 37 38/* New hover effect */ 39#TabsToolbar toolbarbutton { 40 fill-opacity: .6 !important; 41} 42#TabsToolbar toolbarbutton:not([disabled]):hover, 43#TabsToolbar toolbarbutton[open=true] { 44 fill-opacity: 1 !important; 45} 46 47#TabsToolbar .toolbarbutton-1 { 48 margin: 3px !important; 49 padding: 0 6px !important; 50} 51 52/* Remove shadow next to tab scroll buttons */ 53.arrowscrollbox-overflow-start-indicator, 54.arrowscrollbox-overflow-end-indicator { 55 display: none; 56} 57 58/* Remove tab separators */ 59.tabbrowser-tab::after, 60.tabbrowser-tab::before { 61 border-color: transparent !important; 62 border-image: none !important; 63} 64 65/* Space between tabs */ 66.tabbrowser-tab:not([pinned=true]) { 67 margin: 0 0 !important; 68} 69 70/* Tab labels */ 71tab { 72 color: var(--gnome-tabbar-tab-color) !important; 73 font-family: Cantarell, inherit; 74 font-weight: normal; 75 font-size: 1em; 76} 77tab:hover { 78 color: var(--gnome-tabbar-tab-hover-color) !important; 79} 80tab[selected] { 81 color: var(--gnome-tabbar-tab-active-color) !important; 82 font-weight: bold; 83} 84tab:-moz-window-inactive { 85 color: var(--gnome-inactive-tabbar-tab-color) !important; 86} 87tab[selected]:-moz-window-inactive { 88 color: var(--gnome-inactive-tabbar-tab-active-color) !important; 89} 90 91/* Center all inside tab */ 92.tab-content { 93 display: flex !important; 94 justify-content: center !important; 95 align-items: center !important; 96 margin-top: -1px; 97 min-width: 100% !important; 98 padding: 0 10px !important; 99} 100 101/* Prevent tab icons size breaking */ 102.tab-icon-image, .tab-icon-sound, .tab-throbber, .tab-throbber-fallback, .tab-close-button { 103 min-width: 16px; 104} 105 106/* Adjust tab label width */ 107.tab-label-container { 108 min-width: 0 !important; 109} 110 111/* Put tab close button and icon sound to the right */ 112.tab-icon-sound[soundplaying="true"], .tab-icon-sound[muted="true"], 113.tab-icon-sound[activemedia-blocked="true"] { 114 margin-left: auto !important; 115} 116.tab-icon-sound { 117 margin-right: 6px; 118} 119 120/* Force tab favicon to the center */ 121.tab-throbber, .tab-throbber-fallback, 122.tabbrowser-tab:not([busy]) .tab-icon-image, 123.tabbrowser-tab:not([class*="identity-color-"]) .tab-icon-stack { 124 margin-left: auto !important; 125} 126 127/* separate class for multi-tab alignment*/ 128.tabbrowser-tab[class*="identity-color-"]>.tab-stack>.tab-content>.tab-icon-stack { 129 margin-left: auto !important; 130} 131 132/* If tab favicon is not present, force tab label to the center */ 133.tabbrowser-tab .tab-label-container { 134 margin-left: 0 !important; 135 margin-right: auto !important; 136} 137 138.tabbrowser-tab:not([image]):not([busy]):not([progress]) .tab-label-container { 139 margin-left: auto !important; 140} 141 142/* Fix website with no favicon centred text */ 143.tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing], [crashed]) .tab-icon-stack { 144 margin-left: 0 !important 145} 146 147.tabbrowser-tab:not([image], [busy]) .tab-icon-stack { 148 margin-left: 0 !important 149} 150 151.tabbrowser-tab[selected="true"]>.tab-stack>.tab-background { 152 margin-left: 0px !important; 153 margin-right: 0px !important; 154} 155 156/* centre text when audio is playing */ 157.tabbrowser-tab:is([soundplaying]) .tab-label-container { 158 margin-left: 0 !important; 159 margin-right: auto !important 160} 161 162/* Remove tab icons */ 163/* tab:not([pinned=true]) .tab-icon-image { 164 display: none; 165} */ 166 167/* Close tab button */ 168:root { 169 --gnome-fill-icon: red !important; 170} 171 172.close-icon { 173 height: 16px !important; 174 padding: 0 !important; 175 width: 16px !important; 176} 177 178.tab-close-button { 179 -moz-appearance: none !important; 180 border: none !important; 181 box-sizing: content-box; /* Avoid deformation on flexbox */ 182 border-radius: 100px; 183 list-style-image: url("../icons/window-close-alt-symbolic.svg") !important; 184 height: 16px !important; 185 opacity: .3; 186 padding: 2px !important; 187 margin: 0 2px !important; 188 width: 16px !important; 189} 190 191@media (prefers-color-scheme: dark) { 192 .tab-close-button { 193 list-style-image: url("../icons/window-close-alt-symbolic-light.svg") !important; 194 } 195} 196:root:-moz-window-inactive .tab-close-button:not(#hack) { 197 opacity: .18 !important; 198} 199:root:not(:-moz-window-inactive) .tab-close-button:hover { 200 background: var(--gnome-flat-button-hover-background) !important; 201 border-radius: 100px !important; 202 opacity: 1; 203} 204:root:not(:-moz-window-inactive) .tab-close-button:active { 205 border-radius: 100px !important; 206 background: var(--gnome-flat-button-active-background) !important; 207} 208 209.tab-close-button:active:not(:hover) { 210 border-radius: 100px !important; 211 background-image: none !important; 212 box-shadow: none !important; 213} 214 215/* Tab close button etc. positioning */ 216.tab-throbber, .tab-icon-image, .tab-sharing-icon-overlay, .tab-icon-sound, .tab-close-button { 217 margin-top: 0 !important; 218} 219 220/* Remove blue line above tabs */ 221.tab-line { 222 display: none; 223} 224 225/* Firefox v89 beta tab fix */ 226.tab-background { 227 margin-block: 0 !important; 228 border-radius: 0 !important; 229 padding: 0 12px !important; 230} 231 232/*Align personal bookmarks v89 */ 233#personal-bookmarks { 234 -moz-box-align: center !important; 235} 236 237/* fix misc spacing between tabs */ 238.tabbrowser-tab { 239 padding-inline: 0 !important; 240} 241 242/* Active tab */ 243.tab-background[selected=true] { 244 background-color: var(--gnome-tabbar-tab-active-background) !important; 245 background-image: none !important; 246 border: 0 !important; 247 border-image: none !important; 248 box-shadow: none !important; 249 border-bottom: 2px solid var(--gnome-tabbar-tab-active-border-bottom-color) !important; 250} 251.tab-background[selected=true]:-moz-window-inactive { 252 background-color: var(--gnome-inactive-tabbar-tab-active-background) !important; 253 border-bottom-color: var(--gnome-inactive-tabbar-tab-active-border-bottom-color) !important; 254} 255 256/* Tab hover */ 257:root:not(:-moz-window-inactive) .tabbrowser-tab:hover > .tab-stack > .tab-background[selected=true] { 258 background-color: var(--gnome-tabbar-tab-active-hover-background) !important; 259} 260.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]), 261#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]), 262#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab:hover > .tab-stack > .tab-background > .tab-line:not([selected=true]) { 263 background-color: transparent !important; 264} 265:root:not(:-moz-window-inactive) .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) { 266 background-color: var(--gnome-tabbar-tab-hover-background) !important; 267 border-image: none !important; 268 border-bottom: 2px solid var(--gnome-tabbar-tab-hover-border-bottom-color) !important; 269} 270 271/* Tabs scroll buttons hover */ 272#TabsToolbar .scrollbutton-up:not([disabled]):hover, #TabsToolbar .scrollbutton-down:not([disabled]):hover { 273 background-color: var(--gnome-tabbar-tab-active-hover-background) !important; 274} 275 276/* Full width tabs */ 277.tabbrowser-tab:not([style^="max-width"]):not([pinned]), 278.tabbrowser-tab[style^="max-width: 100px !important;"]:not([pinned]) { 279 max-width: 100% !important; 280} 281 282.tabbrowser-tab:not([style^="max-width"]):not([pinned]):not([fadein]), 283.tabbrowser-tab[style^="max-width: 100px !important;"]:not([pinned]):not([fadein]) { 284 max-width: .1px !important; 285} 286 287/* Remove blank spaces on tabs start and end */ 288#TabsToolbar .titlebar-spacer { 289 display: none !important; 290} 291 292/* Remove container bottom line indicator */ 293.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-bottom-line { 294 display: none; 295} 296 297/* Create new container tab indicator */ 298.tabbrowser-tab[class*="identity-color-"] .tab-content::before { 299 content: ""; 300 display: block; 301 background-image: var(#userContext-icons:--identity-icon); 302 background: var( --identity-tab-color); 303 -moz-context-properties: fill; 304 fill: var(--identity-icon-color); 305 background-size: contain; 306 background-repeat: no-repeat; 307 background-position: center center; 308 min-width: 10px; 309 height: 10px; 310 margin-right: 5px; 311 margin-left: auto !important; 312 border-radius: 100%; 313} 314 315.tabbrowser-tab[class*="identity-color-"][pinned] .tab-content::before, 316.tabbrowser-tab[class*="identity-color-"][image] .tab-content::before, 317.tabbrowser-tab[class*="identity-color-"][busy] .tab-content::before, 318.tabbrowser-tab[class*="identity-color-"][progress] .tab-content::before { 319 right: -10px; 320 top: -8px; 321 position: relative; 322 margin-right: -10px; 323} 324