The Tor Browser / file comparison
comparison: browser/base/content/newtab/newTab.css
browser/base/content/newtab/newTab.css
- branch
- TOR_BUG_3246
- changeset 6
- 8bccb770b82d
equal
deleted
inserted
replaced
| -1:000000000000 | 0:451c5ed4e14e |
|---|---|
| 1 /* This Source Code Form is subject to the terms of the Mozilla Public | |
| 2 * License, v. 2.0. If a copy of the MPL was not distributed with this | |
| 3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ | |
| 4 | |
| 5 input { | |
| 6 font: message-box !important; | |
| 7 font-size: 16px !important; | |
| 8 } | |
| 9 | |
| 10 input[type=button] { | |
| 11 cursor: pointer; | |
| 12 } | |
| 13 | |
| 14 /* SCROLLBOX */ | |
| 15 #newtab-scrollbox { | |
| 16 display: -moz-box; | |
| 17 position: relative; | |
| 18 -moz-box-flex: 1; | |
| 19 -moz-user-focus: normal; | |
| 20 -moz-box-orient: vertical; | |
| 21 } | |
| 22 | |
| 23 #newtab-scrollbox:not([page-disabled]) { | |
| 24 overflow: auto; | |
| 25 } | |
| 26 | |
| 27 /* UNDO */ | |
| 28 #newtab-undo-container { | |
| 29 transition: opacity 100ms ease-out; | |
| 30 display: -moz-box; | |
| 31 margin-bottom: 26px; /* 32 - 6 search form top "padding" */ | |
| 32 -moz-box-align: center; | |
| 33 -moz-box-pack: center; | |
| 34 } | |
| 35 | |
| 36 #newtab-undo-container[undo-disabled] { | |
| 37 opacity: 0; | |
| 38 pointer-events: none; | |
| 39 } | |
| 40 | |
| 41 /* TOGGLE */ | |
| 42 #newtab-toggle { | |
| 43 position: absolute; | |
| 44 top: 12px; | |
| 45 right: 12px; | |
| 46 } | |
| 47 | |
| 48 #newtab-toggle:-moz-locale-dir(rtl) { | |
| 49 left: 12px; | |
| 50 right: auto; | |
| 51 } | |
| 52 | |
| 53 /* MARGINS */ | |
| 54 #newtab-vertical-margin { | |
| 55 display: -moz-box; | |
| 56 position: relative; | |
| 57 -moz-box-flex: 1; | |
| 58 -moz-box-orient: vertical; | |
| 59 } | |
| 60 | |
| 61 #newtab-margin-top { | |
| 62 min-height: 50px; | |
| 63 max-height: 80px; | |
| 64 -moz-box-flex: 1; | |
| 65 -moz-box-align: center; | |
| 66 -moz-box-pack: center; | |
| 67 } | |
| 68 | |
| 69 #newtab-margin-undo-container { | |
| 70 display: -moz-box; | |
| 71 -moz-box-pack: center; | |
| 72 } | |
| 73 | |
| 74 #newtab-margin-bottom { | |
| 75 min-height: 40px; | |
| 76 max-height: 100px; | |
| 77 -moz-box-flex: 1; | |
| 78 } | |
| 79 | |
| 80 #newtab-horizontal-margin { | |
| 81 display: -moz-box; | |
| 82 -moz-box-flex: 1; | |
| 83 } | |
| 84 | |
| 85 #newtab-margin-top, | |
| 86 #newtab-margin-bottom { | |
| 87 display: -moz-box; | |
| 88 position: relative; | |
| 89 } | |
| 90 | |
| 91 #newtab-margin-top { | |
| 92 -moz-box-flex: 1; | |
| 93 } | |
| 94 | |
| 95 #newtab-margin-bottom { | |
| 96 -moz-box-flex: 2; | |
| 97 } | |
| 98 | |
| 99 .newtab-side-margin { | |
| 100 min-width: 40px; | |
| 101 max-width: 300px; | |
| 102 -moz-box-flex: 1; | |
| 103 } | |
| 104 | |
| 105 /* GRID */ | |
| 106 #newtab-grid { | |
| 107 display: -moz-box; | |
| 108 -moz-box-flex: 5; | |
| 109 -moz-box-orient: vertical; | |
| 110 min-width: 600px; | |
| 111 min-height: 400px; | |
| 112 transition: 100ms ease-out; | |
| 113 transition-property: opacity; | |
| 114 } | |
| 115 | |
| 116 #newtab-grid[page-disabled] { | |
| 117 opacity: 0; | |
| 118 } | |
| 119 | |
| 120 #newtab-grid[locked], | |
| 121 #newtab-grid[page-disabled] { | |
| 122 pointer-events: none; | |
| 123 } | |
| 124 | |
| 125 /* ROWS */ | |
| 126 .newtab-row { | |
| 127 display: -moz-box; | |
| 128 -moz-box-orient: horizontal; | |
| 129 -moz-box-direction: normal; | |
| 130 -moz-box-flex: 1; | |
| 131 } | |
| 132 | |
| 133 /* CELLS */ | |
| 134 .newtab-cell { | |
| 135 display: -moz-box; | |
| 136 -moz-box-flex: 1; | |
| 137 } | |
| 138 | |
| 139 /* SITES */ | |
| 140 .newtab-site { | |
| 141 position: relative; | |
| 142 -moz-box-flex: 1; | |
| 143 transition: 100ms ease-out; | |
| 144 transition-property: top, left, opacity; | |
| 145 } | |
| 146 | |
| 147 .newtab-site[frozen] { | |
| 148 position: absolute; | |
| 149 pointer-events: none; | |
| 150 } | |
| 151 | |
| 152 .newtab-site[dragged] { | |
| 153 transition-property: none; | |
| 154 z-index: 10; | |
| 155 } | |
| 156 | |
| 157 /* LINK + THUMBNAILS */ | |
| 158 .newtab-link, | |
| 159 .newtab-thumbnail { | |
| 160 position: absolute; | |
| 161 left: 0; | |
| 162 top: 0; | |
| 163 right: 0; | |
| 164 bottom: 0; | |
| 165 } | |
| 166 | |
| 167 .newtab-thumbnail { | |
| 168 opacity: .8; | |
| 169 transition: opacity 100ms ease-out; | |
| 170 } | |
| 171 | |
| 172 .newtab-thumbnail[dragged], | |
| 173 .newtab-link:-moz-focusring > .newtab-thumbnail, | |
| 174 .newtab-cell:not([ignorehover]) > .newtab-site:hover > .newtab-link > .newtab-thumbnail { | |
| 175 opacity: 1; | |
| 176 } | |
| 177 | |
| 178 /* TITLES */ | |
| 179 .newtab-title { | |
| 180 position: absolute; | |
| 181 left: 0; | |
| 182 right: 0; | |
| 183 bottom: 0; | |
| 184 white-space: nowrap; | |
| 185 overflow: hidden; | |
| 186 text-overflow: ellipsis; | |
| 187 } | |
| 188 | |
| 189 /* CONTROLS */ | |
| 190 .newtab-control { | |
| 191 position: absolute; | |
| 192 top: 4px; | |
| 193 opacity: 0; | |
| 194 transition: opacity 100ms ease-out; | |
| 195 } | |
| 196 | |
| 197 .newtab-control:-moz-focusring, | |
| 198 .newtab-cell:not([ignorehover]) > .newtab-site:hover > .newtab-control { | |
| 199 opacity: 1; | |
| 200 } | |
| 201 | |
| 202 .newtab-control[dragged] { | |
| 203 opacity: 0 !important; | |
| 204 } | |
| 205 | |
| 206 @media (-moz-touch-enabled) { | |
| 207 .newtab-control { | |
| 208 opacity: 1; | |
| 209 } | |
| 210 } | |
| 211 | |
| 212 .newtab-control-sponsored:-moz-locale-dir(rtl), | |
| 213 .newtab-control-pin:-moz-locale-dir(ltr), | |
| 214 .newtab-control-block:-moz-locale-dir(rtl) { | |
| 215 left: 4px; | |
| 216 } | |
| 217 | |
| 218 .newtab-control-sponsored:-moz-locale-dir(ltr), | |
| 219 .newtab-control-block:-moz-locale-dir(ltr), | |
| 220 .newtab-control-pin:-moz-locale-dir(rtl) { | |
| 221 right: 4px; | |
| 222 } | |
| 223 | |
| 224 .newtab-control.newtab-control-sponsored { | |
| 225 bottom: -20px; | |
| 226 height: 14px; | |
| 227 -moz-margin-end: -5px; | |
| 228 opacity: 1; | |
| 229 top: auto; | |
| 230 width: 14px; | |
| 231 } | |
| 232 | |
| 233 .newtab-site:not([type=sponsored]) .newtab-control-sponsored { | |
| 234 display: none; | |
| 235 } | |
| 236 | |
| 237 /* DRAG & DROP */ | |
| 238 | |
| 239 /* | |
| 240 * This is just a temporary drag element used for dataTransfer.setDragImage() | |
| 241 * so that we can use custom drag images and elements. It needs an opacity of | |
| 242 * 0.01 so that the core code detects that it's in fact a visible element. | |
| 243 */ | |
| 244 .newtab-drag { | |
| 245 width: 1px; | |
| 246 height: 1px; | |
| 247 background-color: #fff; | |
| 248 opacity: 0.01; | |
| 249 } | |
| 250 | |
| 251 /* SPONSORED PANEL */ | |
| 252 #sponsored-panel { | |
| 253 width: 330px; | |
| 254 } | |
| 255 | |
| 256 #sponsored-panel description { | |
| 257 margin: 0; | |
| 258 } | |
| 259 | |
| 260 #sponsored-panel .text-link { | |
| 261 margin: 12px 0 0; | |
| 262 } | |
| 263 | |
| 264 /* SEARCH */ | |
| 265 #newtab-search-container { | |
| 266 display: -moz-box; | |
| 267 position: relative; | |
| 268 -moz-box-align: center; | |
| 269 -moz-box-pack: center; | |
| 270 } | |
| 271 | |
| 272 #newtab-search-container[page-disabled] { | |
| 273 opacity: 0; | |
| 274 pointer-events: none; | |
| 275 } | |
| 276 | |
| 277 #newtab-search-form { | |
| 278 display: -moz-box; | |
| 279 -moz-box-flex: 5; | |
| 280 -moz-box-orient: horizontal; | |
| 281 -moz-box-align: center; | |
| 282 height: 44px; /* 32 + 6 logo top "padding" + 6 logo bottom "padding" */ | |
| 283 margin-bottom: 10px; /* 32 - 16 tiles top margin - 6 logo bottom "padding" */ | |
| 284 } | |
| 285 | |
| 286 #newtab-search-logo { | |
| 287 display: -moz-box; | |
| 288 width: 77px; /* 65 image width + 6 left "padding" + 6 right "padding" */ | |
| 289 height: 38px; /* 26 image height + 6 top "padding" + 6 bottom "padding" */ | |
| 290 border: 1px solid transparent; | |
| 291 -moz-margin-end: 8px; | |
| 292 background-repeat: no-repeat; | |
| 293 background-position: center; | |
| 294 background-size: 65px 26px; | |
| 295 } | |
| 296 | |
| 297 #newtab-search-logo[hidden] { | |
| 298 display: none; | |
| 299 } | |
| 300 | |
| 301 #newtab-search-logo[active], | |
| 302 #newtab-search-logo:hover { | |
| 303 background-color: #e9e9e9; | |
| 304 border: 1px solid rgb(226, 227, 229); | |
| 305 border-radius: 2.5px; | |
| 306 } | |
| 307 | |
| 308 #newtab-search-text { | |
| 309 height: 32px; | |
| 310 -moz-box-flex: 1; | |
| 311 | |
| 312 padding: 0 8px; | |
| 313 background: hsla(0,0%,100%,.9) padding-box; | |
| 314 border: 1px solid; | |
| 315 border-color: hsla(210,54%,20%,.15) hsla(210,54%,20%,.17) hsla(210,54%,20%,.2); | |
| 316 box-shadow: 0 1px 0 hsla(210,65%,9%,.02) inset, | |
| 317 0 0 2px hsla(210,65%,9%,.1) inset, | |
| 318 0 1px 0 hsla(0,0%,100%,.2); | |
| 319 border-radius: 2.5px 0 0 2.5px; | |
| 320 color: inherit; | |
| 321 } | |
| 322 | |
| 323 #newtab-search-text:-moz-dir(rtl) { | |
| 324 border-radius: 0 2.5px 2.5px 0; | |
| 325 } | |
| 326 | |
| 327 #newtab-search-text:focus, | |
| 328 #newtab-search-text[autofocus] { | |
| 329 border-color: hsla(206,100%,60%,.6) hsla(206,76%,52%,.6) hsla(204,100%,40%,.6); | |
| 330 } | |
| 331 | |
| 332 #newtab-search-submit { | |
| 333 height: 32px; | |
| 334 | |
| 335 -moz-margin-start: -1px; | |
| 336 background: linear-gradient(hsla(0,0%,100%,.8), hsla(0,0%,100%,.1)) padding-box; | |
| 337 padding: 0 9px; | |
| 338 border: 1px solid; | |
| 339 border-color: hsla(210,54%,20%,.15) hsla(210,54%,20%,.17) hsla(210,54%,20%,.2); | |
| 340 -moz-border-start: 1px solid transparent; | |
| 341 border-radius: 0 2.5px 2.5px 0; | |
| 342 box-shadow: 0 0 2px hsla(0,0%,100%,.5) inset, | |
| 343 0 1px 0 hsla(0,0%,100%,.2); | |
| 344 color: inherit; | |
| 345 cursor: pointer; | |
| 346 transition-property: background-color, border-color, box-shadow; | |
| 347 transition-duration: 150ms; | |
| 348 } | |
| 349 | |
| 350 #newtab-search-submit:-moz-dir(rtl) { | |
| 351 border-radius: 2.5px 0 0 2.5px; | |
| 352 } | |
| 353 | |
| 354 #newtab-search-text:focus + #newtab-search-submit, | |
| 355 #newtab-search-text + #newtab-search-submit:hover, | |
| 356 #newtab-search-text[autofocus] + #newtab-search-submit { | |
| 357 border-color: #59b5fc #45a3e7 #3294d5; | |
| 358 color: white; | |
| 359 } | |
| 360 | |
| 361 #newtab-search-text:focus + #newtab-search-submit, | |
| 362 #newtab-search-text[autofocus] + #newtab-search-submit { | |
| 363 background-image: linear-gradient(#4cb1ff, #1793e5); | |
| 364 box-shadow: 0 1px 0 hsla(0,0%,100%,.2) inset, | |
| 365 0 0 0 1px hsla(0,0%,100%,.1) inset, | |
| 366 0 1px 0 hsla(210,54%,20%,.03); | |
| 367 } | |
| 368 | |
| 369 #newtab-search-text + #newtab-search-submit:hover { | |
| 370 background-image: linear-gradient(#66bdff, #0d9eff); | |
| 371 box-shadow: 0 1px 0 hsla(0,0%,100%,.2) inset, | |
| 372 0 0 0 1px hsla(0,0%,100%,.1) inset, | |
| 373 0 1px 0 hsla(210,54%,20%,.03), | |
| 374 0 0 4px hsla(206,100%,20%,.2); | |
| 375 } | |
| 376 | |
| 377 #newtab-search-text + #newtab-search-submit:hover:active { | |
| 378 box-shadow: 0 1px 1px hsla(211,79%,6%,.1) inset, | |
| 379 0 0 1px hsla(211,79%,6%,.2) inset; | |
| 380 transition-duration: 0ms; | |
| 381 } | |
| 382 | |
| 383 #newtab-search-panel .panel-arrowcontent { | |
| 384 -moz-padding-start: 0; | |
| 385 -moz-padding-end: 0; | |
| 386 padding-top: 0; | |
| 387 padding-bottom: 0; | |
| 388 background: rgb(248, 250, 251); | |
| 389 } | |
| 390 | |
| 391 .newtab-search-panel-engine { | |
| 392 -moz-box-align: center; | |
| 393 padding-top: 4px; | |
| 394 padding-bottom: 4px; | |
| 395 -moz-padding-start: 24px; | |
| 396 -moz-padding-end: 24px; | |
| 397 } | |
| 398 | |
| 399 .newtab-search-panel-engine:not(:last-child) { | |
| 400 border-bottom: 1px solid #ccc; | |
| 401 } | |
| 402 | |
| 403 .newtab-search-panel-engine > image { | |
| 404 -moz-margin-end: 8px; | |
| 405 width: 16px; | |
| 406 height: 16px; | |
| 407 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png"); | |
| 408 } | |
| 409 | |
| 410 .newtab-search-panel-engine > label { | |
| 411 -moz-padding-start: 0; | |
| 412 -moz-margin-start: 0; | |
| 413 color: rgb(130, 132, 133); | |
| 414 } | |
| 415 | |
| 416 .newtab-search-panel-engine[selected] { | |
| 417 background: url("chrome://global/skin/menu/shared-menu-check.png") center left 4px no-repeat transparent; | |
| 418 } |
