The Tor Browser / file comparison
comparison: browser/themes/shared/tabs.inc.css
browser/themes/shared/tabs.inc.css
- changeset 0
- 6474c204b198
equal
deleted
inserted
replaced
| -1:000000000000 | 0:6496bc1048d6 |
|---|---|
| 1 %if 0 | |
| 2 /* This Source Code Form is subject to the terms of the Mozilla Public | |
| 3 * License, v. 2.0. If a copy of the MPL was not distributed with this | |
| 4 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ | |
| 5 %endif | |
| 6 | |
| 7 %define tabCurveWidth 30px | |
| 8 %define tabCurveHalfWidth 15px | |
| 9 | |
| 10 /* image preloading hack */ | |
| 11 #tabbrowser-tabs::before { | |
| 12 /* Because of bug 853415, we need to ordinal this to the first position: */ | |
| 13 -moz-box-ordinal-group: 0; | |
| 14 content: ''; | |
| 15 display: block; | |
| 16 background-image: | |
| 17 url(chrome://browser/skin/tabbrowser/tab-background-end.png), | |
| 18 url(chrome://browser/skin/tabbrowser/tab-background-middle.png), | |
| 19 url(chrome://browser/skin/tabbrowser/tab-background-start.png); | |
| 20 } | |
| 21 | |
| 22 #tabbrowser-tabs { | |
| 23 min-height: @tabMinHeight@; | |
| 24 } | |
| 25 | |
| 26 .tabbrowser-tab, | |
| 27 .tabs-newtab-button { | |
| 28 -moz-appearance: none; | |
| 29 background-color: transparent; | |
| 30 border-radius: 0; | |
| 31 border-width: 0; | |
| 32 margin: 0; | |
| 33 padding: 0; | |
| 34 } | |
| 35 | |
| 36 .tabbrowser-tab { | |
| 37 -moz-box-align: stretch; | |
| 38 } | |
| 39 | |
| 40 .tabbrowser-tab[remote] { | |
| 41 text-decoration: underline; | |
| 42 } | |
| 43 | |
| 44 /* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */ | |
| 45 .tabbrowser-tab[selected=true] { | |
| 46 position: relative; | |
| 47 z-index: 2; | |
| 48 } | |
| 49 | |
| 50 .tab-background-middle { | |
| 51 -moz-box-flex: 1; | |
| 52 background-clip: padding-box; | |
| 53 border-left: @tabCurveHalfWidth@ solid transparent; | |
| 54 border-right: @tabCurveHalfWidth@ solid transparent; | |
| 55 margin: 0 -@tabCurveHalfWidth@; | |
| 56 } | |
| 57 | |
| 58 .tab-content { | |
| 59 -moz-padding-end: 9px; | |
| 60 -moz-padding-start: 9px; | |
| 61 } | |
| 62 | |
| 63 .tab-throbber, | |
| 64 .tab-icon-image, | |
| 65 .tab-close-button { | |
| 66 margin-top: 1px; | |
| 67 } | |
| 68 | |
| 69 .tab-throbber, | |
| 70 .tab-icon-image { | |
| 71 height: 16px; | |
| 72 width: 16px; | |
| 73 } | |
| 74 | |
| 75 .tab-icon-image { | |
| 76 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png"); | |
| 77 } | |
| 78 | |
| 79 .tab-throbber { | |
| 80 list-style-image: url("chrome://browser/skin/tabbrowser/connecting.png"); | |
| 81 } | |
| 82 | |
| 83 .tab-throbber[progress] { | |
| 84 list-style-image: url("chrome://browser/skin/tabbrowser/loading.png"); | |
| 85 } | |
| 86 | |
| 87 .tab-throbber:not([pinned]), | |
| 88 .tab-icon-image:not([pinned]) { | |
| 89 -moz-margin-end: 6px; | |
| 90 } | |
| 91 | |
| 92 .tab-label { | |
| 93 -moz-margin-end: 0; | |
| 94 -moz-margin-start: 0; | |
| 95 } | |
| 96 | |
| 97 .tab-close-button { | |
| 98 -moz-margin-start: 4px; | |
| 99 -moz-margin-end: -2px; | |
| 100 padding: 0; | |
| 101 } | |
| 102 | |
| 103 .tab-background, | |
| 104 .tabs-newtab-button { | |
| 105 /* overlap the tab curves */ | |
| 106 -moz-margin-end: -@tabCurveHalfWidth@; | |
| 107 -moz-margin-start: -@tabCurveHalfWidth@; | |
| 108 } | |
| 109 | |
| 110 .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox { | |
| 111 -moz-padding-end: @tabCurveHalfWidth@; | |
| 112 -moz-padding-start: @tabCurveHalfWidth@; | |
| 113 } | |
| 114 | |
| 115 .tab-background-start[selected=true]::after, | |
| 116 .tab-background-start[selected=true]::before, | |
| 117 .tab-background-start, | |
| 118 .tab-background-end, | |
| 119 .tab-background-end[selected=true]::after, | |
| 120 .tab-background-end[selected=true]::before { | |
| 121 min-height: @tabMinHeight@; | |
| 122 width: @tabCurveWidth@; | |
| 123 } | |
| 124 | |
| 125 .tabbrowser-tab:not([selected=true]), | |
| 126 .tabbrowser-tab:-moz-lwtheme { | |
| 127 color: inherit; | |
| 128 } | |
| 129 | |
| 130 /* Selected tab */ | |
| 131 | |
| 132 /* | |
| 133 Tab background pseudo-elements which are positioned above .tab-background-start/end: | |
| 134 - ::before - provides the fill of the tab curve and is clipped to the tab shape. This is where | |
| 135 pointer events go for the curve. | |
| 136 - ::after - provides the border/stroke of the tab curve and is overlayed above ::before. Pointer | |
| 137 events go through to ::before to get the proper shape. | |
| 138 */ | |
| 139 | |
| 140 | |
| 141 .tab-background-start[selected=true]::after, | |
| 142 .tab-background-end[selected=true]::after { | |
| 143 /* position ::after on top of its parent */ | |
| 144 -moz-margin-start: -@tabCurveWidth@; | |
| 145 background-size: 100% 100%; | |
| 146 content: ""; | |
| 147 display: -moz-box; | |
| 148 position: relative; | |
| 149 } | |
| 150 | |
| 151 .tab-background-start[selected=true]::before, | |
| 152 .tab-background-end[selected=true]::before { | |
| 153 /* all ::before pseudo elements */ | |
| 154 content: ""; | |
| 155 display: -moz-box; | |
| 156 } | |
| 157 | |
| 158 .tab-background-start[selected=true]:-moz-locale-dir(ltr):not(:-moz-lwtheme)::before, | |
| 159 .tab-background-end[selected=true]:-moz-locale-dir(rtl):not(:-moz-lwtheme)::before { | |
| 160 background-image: url(chrome://browser/skin/tabbrowser/tab-selected-start.svg); | |
| 161 background-size: 100% 100%; | |
| 162 } | |
| 163 | |
| 164 .tab-background-end[selected=true]:-moz-locale-dir(ltr):not(:-moz-lwtheme)::before, | |
| 165 .tab-background-start[selected=true]:-moz-locale-dir(rtl):not(:-moz-lwtheme)::before { | |
| 166 background-image: url(chrome://browser/skin/tabbrowser/tab-selected-end.svg); | |
| 167 background-size: 100% 100%; | |
| 168 } | |
| 169 | |
| 170 /* For lightweight themes, clip the header image on start, middle, and end. */ | |
| 171 .tab-background-start[selected=true]:-moz-locale-dir(ltr):-moz-lwtheme::before, | |
| 172 .tab-background-end[selected=true]:-moz-locale-dir(rtl):-moz-lwtheme::before { | |
| 173 clip-path: url(chrome://browser/content/browser.xul#tab-curve-clip-path-start); | |
| 174 } | |
| 175 | |
| 176 .tab-background-end[selected=true]:-moz-locale-dir(ltr):-moz-lwtheme::before, | |
| 177 .tab-background-start[selected=true]:-moz-locale-dir(rtl):-moz-lwtheme::before { | |
| 178 clip-path: url(chrome://browser/content/browser.xul#tab-curve-clip-path-end); | |
| 179 } | |
| 180 | |
| 181 .tab-background-start[selected=true]:-moz-locale-dir(ltr)::after, | |
| 182 .tab-background-end[selected=true]:-moz-locale-dir(rtl)::after { | |
| 183 background-image: url(chrome://browser/skin/tabbrowser/tab-stroke-start.png); | |
| 184 } | |
| 185 | |
| 186 .tab-background-end[selected=true]:-moz-locale-dir(ltr)::after, | |
| 187 .tab-background-start[selected=true]:-moz-locale-dir(rtl)::after { | |
| 188 background-image: url(chrome://browser/skin/tabbrowser/tab-stroke-end.png); | |
| 189 } | |
| 190 | |
| 191 .tab-background-middle[selected=true] { | |
| 192 background-clip: padding-box, padding-box, content-box; | |
| 193 background-color: @fgTabBackgroundColor@; | |
| 194 background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle.png), | |
| 195 @fgTabTexture@, | |
| 196 none; | |
| 197 background-repeat: repeat-x; | |
| 198 background-size: auto 100%; | |
| 199 /* The padding-top combined with background-clip: content-box (the bottom-most) ensure the | |
| 200 background-color doesn't extend above the top border. */ | |
| 201 padding-top: 2px; | |
| 202 } | |
| 203 | |
| 204 /* Selected tab lightweight theme styles. | |
| 205 See browser-lightweightTheme.css for information about run-time changes to LWT styles. */ | |
| 206 .tab-background-middle[selected=true]:-moz-lwtheme { | |
| 207 background-color: transparent; | |
| 208 background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle.png), | |
| 209 @fgTabTextureLWT@;/*, | |
| 210 lwtHeader;*/ | |
| 211 /* Don't stretch the LWT header images */ | |
| 212 background-size: auto 100%, auto 100%, auto auto; | |
| 213 } | |
| 214 | |
| 215 /* These LWT styles are normally overridden by browser-lightweightTheme.css */ | |
| 216 .tab-background-start[selected=true]:-moz-lwtheme::before, | |
| 217 .tab-background-end[selected=true]:-moz-lwtheme::before { | |
| 218 background-image: @fgTabTextureLWT@; | |
| 219 } | |
| 220 | |
| 221 .tab-background-start[selected=true]:-moz-lwtheme::before, | |
| 222 .tab-background-end[selected=true]:-moz-lwtheme::before, | |
| 223 .tab-background-middle[selected=true]:-moz-lwtheme { | |
| 224 background-color: transparent; | |
| 225 } | |
| 226 | |
| 227 /* End selected tab */ | |
| 228 | |
| 229 /* new tab button border and gradient on hover */ | |
| 230 .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]), | |
| 231 .tabs-newtab-button:hover { | |
| 232 background-image: url(chrome://browser/skin/tabbrowser/tab-background-start.png), | |
| 233 url(chrome://browser/skin/tabbrowser/tab-background-middle.png), | |
| 234 url(chrome://browser/skin/tabbrowser/tab-background-end.png); | |
| 235 background-position: left bottom, @tabCurveWidth@ bottom, right bottom; | |
| 236 background-repeat: no-repeat; | |
| 237 background-size: @tabCurveWidth@ 100%, calc(100% - (2 * @tabCurveWidth@)) 100%, @tabCurveWidth@ 100%; | |
| 238 } | |
| 239 | |
| 240 /* Tab pointer-events */ | |
| 241 .tabbrowser-tab { | |
| 242 pointer-events: none; | |
| 243 } | |
| 244 | |
| 245 .tab-background-middle, | |
| 246 .tabs-newtab-button, | |
| 247 .tab-close-button { | |
| 248 pointer-events: auto; | |
| 249 } | |
| 250 | |
| 251 /* Pinned tabs */ | |
| 252 | |
| 253 /* Pinned tab separators need position: absolute when positioned (during overflow). */ | |
| 254 #tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned]::before { | |
| 255 height: 100%; | |
| 256 position: absolute; | |
| 257 } | |
| 258 | |
| 259 .tabbrowser-tab[pinned][titlechanged]:not([selected="true"]) > .tab-stack > .tab-content { | |
| 260 background-image: radial-gradient(farthest-corner at center bottom, rgb(255,255,255) 3%, rgba(186,221,251,0.75) 20%, rgba(127,179,255,0.25) 40%, rgba(127,179,255,0) 70%); | |
| 261 background-position: center bottom @tabToolbarNavbarOverlap@; | |
| 262 background-repeat: no-repeat; | |
| 263 background-size: 85% 100%; | |
| 264 } | |
| 265 | |
| 266 /* Background tab separators (3px wide). | |
| 267 Also show separators beside the selected tab when dragging it. */ | |
| 268 #tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after, | |
| 269 .tabbrowser-tab:not([selected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before, | |
| 270 #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([selected]):not([beforehovered]):not(:hover)::after { | |
| 271 -moz-margin-start: -1.5px; | |
| 272 -moz-margin-end: -1.5px; | |
| 273 background-image: url(chrome://browser/skin/tabbrowser/tab-separator.png); | |
| 274 background-position: left bottom @tabToolbarNavbarOverlap@; | |
| 275 background-repeat: no-repeat; | |
| 276 background-size: 3px 100%; | |
| 277 content: ""; | |
| 278 display: -moz-box; | |
| 279 width: 3px; | |
| 280 } | |
| 281 | |
| 282 /* New tab button */ | |
| 283 | |
| 284 .tabs-newtab-button { | |
| 285 width: 66px; | |
| 286 } |
