1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/browser/base/content/newtab/newTab.css Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,418 @@
1.4 +/* This Source Code Form is subject to the terms of the Mozilla Public
1.5 + * License, v. 2.0. If a copy of the MPL was not distributed with this
1.6 + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
1.7 +
1.8 +input {
1.9 + font: message-box !important;
1.10 + font-size: 16px !important;
1.11 +}
1.12 +
1.13 +input[type=button] {
1.14 + cursor: pointer;
1.15 +}
1.16 +
1.17 +/* SCROLLBOX */
1.18 +#newtab-scrollbox {
1.19 + display: -moz-box;
1.20 + position: relative;
1.21 + -moz-box-flex: 1;
1.22 + -moz-user-focus: normal;
1.23 + -moz-box-orient: vertical;
1.24 +}
1.25 +
1.26 +#newtab-scrollbox:not([page-disabled]) {
1.27 + overflow: auto;
1.28 +}
1.29 +
1.30 +/* UNDO */
1.31 +#newtab-undo-container {
1.32 + transition: opacity 100ms ease-out;
1.33 + display: -moz-box;
1.34 + margin-bottom: 26px; /* 32 - 6 search form top "padding" */
1.35 + -moz-box-align: center;
1.36 + -moz-box-pack: center;
1.37 +}
1.38 +
1.39 +#newtab-undo-container[undo-disabled] {
1.40 + opacity: 0;
1.41 + pointer-events: none;
1.42 +}
1.43 +
1.44 +/* TOGGLE */
1.45 +#newtab-toggle {
1.46 + position: absolute;
1.47 + top: 12px;
1.48 + right: 12px;
1.49 +}
1.50 +
1.51 +#newtab-toggle:-moz-locale-dir(rtl) {
1.52 + left: 12px;
1.53 + right: auto;
1.54 +}
1.55 +
1.56 +/* MARGINS */
1.57 +#newtab-vertical-margin {
1.58 + display: -moz-box;
1.59 + position: relative;
1.60 + -moz-box-flex: 1;
1.61 + -moz-box-orient: vertical;
1.62 +}
1.63 +
1.64 +#newtab-margin-top {
1.65 + min-height: 50px;
1.66 + max-height: 80px;
1.67 + -moz-box-flex: 1;
1.68 + -moz-box-align: center;
1.69 + -moz-box-pack: center;
1.70 +}
1.71 +
1.72 +#newtab-margin-undo-container {
1.73 + display: -moz-box;
1.74 + -moz-box-pack: center;
1.75 +}
1.76 +
1.77 +#newtab-margin-bottom {
1.78 + min-height: 40px;
1.79 + max-height: 100px;
1.80 + -moz-box-flex: 1;
1.81 +}
1.82 +
1.83 +#newtab-horizontal-margin {
1.84 + display: -moz-box;
1.85 + -moz-box-flex: 1;
1.86 +}
1.87 +
1.88 +#newtab-margin-top,
1.89 +#newtab-margin-bottom {
1.90 + display: -moz-box;
1.91 + position: relative;
1.92 +}
1.93 +
1.94 +#newtab-margin-top {
1.95 + -moz-box-flex: 1;
1.96 +}
1.97 +
1.98 +#newtab-margin-bottom {
1.99 + -moz-box-flex: 2;
1.100 +}
1.101 +
1.102 +.newtab-side-margin {
1.103 + min-width: 40px;
1.104 + max-width: 300px;
1.105 + -moz-box-flex: 1;
1.106 +}
1.107 +
1.108 +/* GRID */
1.109 +#newtab-grid {
1.110 + display: -moz-box;
1.111 + -moz-box-flex: 5;
1.112 + -moz-box-orient: vertical;
1.113 + min-width: 600px;
1.114 + min-height: 400px;
1.115 + transition: 100ms ease-out;
1.116 + transition-property: opacity;
1.117 +}
1.118 +
1.119 +#newtab-grid[page-disabled] {
1.120 + opacity: 0;
1.121 +}
1.122 +
1.123 +#newtab-grid[locked],
1.124 +#newtab-grid[page-disabled] {
1.125 + pointer-events: none;
1.126 +}
1.127 +
1.128 +/* ROWS */
1.129 +.newtab-row {
1.130 + display: -moz-box;
1.131 + -moz-box-orient: horizontal;
1.132 + -moz-box-direction: normal;
1.133 + -moz-box-flex: 1;
1.134 +}
1.135 +
1.136 +/* CELLS */
1.137 +.newtab-cell {
1.138 + display: -moz-box;
1.139 + -moz-box-flex: 1;
1.140 +}
1.141 +
1.142 +/* SITES */
1.143 +.newtab-site {
1.144 + position: relative;
1.145 + -moz-box-flex: 1;
1.146 + transition: 100ms ease-out;
1.147 + transition-property: top, left, opacity;
1.148 +}
1.149 +
1.150 +.newtab-site[frozen] {
1.151 + position: absolute;
1.152 + pointer-events: none;
1.153 +}
1.154 +
1.155 +.newtab-site[dragged] {
1.156 + transition-property: none;
1.157 + z-index: 10;
1.158 +}
1.159 +
1.160 +/* LINK + THUMBNAILS */
1.161 +.newtab-link,
1.162 +.newtab-thumbnail {
1.163 + position: absolute;
1.164 + left: 0;
1.165 + top: 0;
1.166 + right: 0;
1.167 + bottom: 0;
1.168 +}
1.169 +
1.170 +.newtab-thumbnail {
1.171 + opacity: .8;
1.172 + transition: opacity 100ms ease-out;
1.173 +}
1.174 +
1.175 +.newtab-thumbnail[dragged],
1.176 +.newtab-link:-moz-focusring > .newtab-thumbnail,
1.177 +.newtab-cell:not([ignorehover]) > .newtab-site:hover > .newtab-link > .newtab-thumbnail {
1.178 + opacity: 1;
1.179 +}
1.180 +
1.181 +/* TITLES */
1.182 +.newtab-title {
1.183 + position: absolute;
1.184 + left: 0;
1.185 + right: 0;
1.186 + bottom: 0;
1.187 + white-space: nowrap;
1.188 + overflow: hidden;
1.189 + text-overflow: ellipsis;
1.190 +}
1.191 +
1.192 +/* CONTROLS */
1.193 +.newtab-control {
1.194 + position: absolute;
1.195 + top: 4px;
1.196 + opacity: 0;
1.197 + transition: opacity 100ms ease-out;
1.198 +}
1.199 +
1.200 +.newtab-control:-moz-focusring,
1.201 +.newtab-cell:not([ignorehover]) > .newtab-site:hover > .newtab-control {
1.202 + opacity: 1;
1.203 +}
1.204 +
1.205 +.newtab-control[dragged] {
1.206 + opacity: 0 !important;
1.207 +}
1.208 +
1.209 +@media (-moz-touch-enabled) {
1.210 + .newtab-control {
1.211 + opacity: 1;
1.212 + }
1.213 +}
1.214 +
1.215 +.newtab-control-sponsored:-moz-locale-dir(rtl),
1.216 +.newtab-control-pin:-moz-locale-dir(ltr),
1.217 +.newtab-control-block:-moz-locale-dir(rtl) {
1.218 + left: 4px;
1.219 +}
1.220 +
1.221 +.newtab-control-sponsored:-moz-locale-dir(ltr),
1.222 +.newtab-control-block:-moz-locale-dir(ltr),
1.223 +.newtab-control-pin:-moz-locale-dir(rtl) {
1.224 + right: 4px;
1.225 +}
1.226 +
1.227 +.newtab-control.newtab-control-sponsored {
1.228 + bottom: -20px;
1.229 + height: 14px;
1.230 + -moz-margin-end: -5px;
1.231 + opacity: 1;
1.232 + top: auto;
1.233 + width: 14px;
1.234 +}
1.235 +
1.236 +.newtab-site:not([type=sponsored]) .newtab-control-sponsored {
1.237 + display: none;
1.238 +}
1.239 +
1.240 +/* DRAG & DROP */
1.241 +
1.242 +/*
1.243 + * This is just a temporary drag element used for dataTransfer.setDragImage()
1.244 + * so that we can use custom drag images and elements. It needs an opacity of
1.245 + * 0.01 so that the core code detects that it's in fact a visible element.
1.246 + */
1.247 +.newtab-drag {
1.248 + width: 1px;
1.249 + height: 1px;
1.250 + background-color: #fff;
1.251 + opacity: 0.01;
1.252 +}
1.253 +
1.254 +/* SPONSORED PANEL */
1.255 +#sponsored-panel {
1.256 + width: 330px;
1.257 +}
1.258 +
1.259 +#sponsored-panel description {
1.260 + margin: 0;
1.261 +}
1.262 +
1.263 +#sponsored-panel .text-link {
1.264 + margin: 12px 0 0;
1.265 +}
1.266 +
1.267 +/* SEARCH */
1.268 +#newtab-search-container {
1.269 + display: -moz-box;
1.270 + position: relative;
1.271 + -moz-box-align: center;
1.272 + -moz-box-pack: center;
1.273 +}
1.274 +
1.275 +#newtab-search-container[page-disabled] {
1.276 + opacity: 0;
1.277 + pointer-events: none;
1.278 +}
1.279 +
1.280 +#newtab-search-form {
1.281 + display: -moz-box;
1.282 + -moz-box-flex: 5;
1.283 + -moz-box-orient: horizontal;
1.284 + -moz-box-align: center;
1.285 + height: 44px; /* 32 + 6 logo top "padding" + 6 logo bottom "padding" */
1.286 + margin-bottom: 10px; /* 32 - 16 tiles top margin - 6 logo bottom "padding" */
1.287 +}
1.288 +
1.289 +#newtab-search-logo {
1.290 + display: -moz-box;
1.291 + width: 77px; /* 65 image width + 6 left "padding" + 6 right "padding" */
1.292 + height: 38px; /* 26 image height + 6 top "padding" + 6 bottom "padding" */
1.293 + border: 1px solid transparent;
1.294 + -moz-margin-end: 8px;
1.295 + background-repeat: no-repeat;
1.296 + background-position: center;
1.297 + background-size: 65px 26px;
1.298 +}
1.299 +
1.300 +#newtab-search-logo[hidden] {
1.301 + display: none;
1.302 +}
1.303 +
1.304 +#newtab-search-logo[active],
1.305 +#newtab-search-logo:hover {
1.306 + background-color: #e9e9e9;
1.307 + border: 1px solid rgb(226, 227, 229);
1.308 + border-radius: 2.5px;
1.309 +}
1.310 +
1.311 +#newtab-search-text {
1.312 + height: 32px;
1.313 + -moz-box-flex: 1;
1.314 +
1.315 + padding: 0 8px;
1.316 + background: hsla(0,0%,100%,.9) padding-box;
1.317 + border: 1px solid;
1.318 + border-color: hsla(210,54%,20%,.15) hsla(210,54%,20%,.17) hsla(210,54%,20%,.2);
1.319 + box-shadow: 0 1px 0 hsla(210,65%,9%,.02) inset,
1.320 + 0 0 2px hsla(210,65%,9%,.1) inset,
1.321 + 0 1px 0 hsla(0,0%,100%,.2);
1.322 + border-radius: 2.5px 0 0 2.5px;
1.323 + color: inherit;
1.324 +}
1.325 +
1.326 +#newtab-search-text:-moz-dir(rtl) {
1.327 + border-radius: 0 2.5px 2.5px 0;
1.328 +}
1.329 +
1.330 +#newtab-search-text:focus,
1.331 +#newtab-search-text[autofocus] {
1.332 + border-color: hsla(206,100%,60%,.6) hsla(206,76%,52%,.6) hsla(204,100%,40%,.6);
1.333 +}
1.334 +
1.335 +#newtab-search-submit {
1.336 + height: 32px;
1.337 +
1.338 + -moz-margin-start: -1px;
1.339 + background: linear-gradient(hsla(0,0%,100%,.8), hsla(0,0%,100%,.1)) padding-box;
1.340 + padding: 0 9px;
1.341 + border: 1px solid;
1.342 + border-color: hsla(210,54%,20%,.15) hsla(210,54%,20%,.17) hsla(210,54%,20%,.2);
1.343 + -moz-border-start: 1px solid transparent;
1.344 + border-radius: 0 2.5px 2.5px 0;
1.345 + box-shadow: 0 0 2px hsla(0,0%,100%,.5) inset,
1.346 + 0 1px 0 hsla(0,0%,100%,.2);
1.347 + color: inherit;
1.348 + cursor: pointer;
1.349 + transition-property: background-color, border-color, box-shadow;
1.350 + transition-duration: 150ms;
1.351 +}
1.352 +
1.353 +#newtab-search-submit:-moz-dir(rtl) {
1.354 + border-radius: 2.5px 0 0 2.5px;
1.355 +}
1.356 +
1.357 +#newtab-search-text:focus + #newtab-search-submit,
1.358 +#newtab-search-text + #newtab-search-submit:hover,
1.359 +#newtab-search-text[autofocus] + #newtab-search-submit {
1.360 + border-color: #59b5fc #45a3e7 #3294d5;
1.361 + color: white;
1.362 +}
1.363 +
1.364 +#newtab-search-text:focus + #newtab-search-submit,
1.365 +#newtab-search-text[autofocus] + #newtab-search-submit {
1.366 + background-image: linear-gradient(#4cb1ff, #1793e5);
1.367 + box-shadow: 0 1px 0 hsla(0,0%,100%,.2) inset,
1.368 + 0 0 0 1px hsla(0,0%,100%,.1) inset,
1.369 + 0 1px 0 hsla(210,54%,20%,.03);
1.370 +}
1.371 +
1.372 +#newtab-search-text + #newtab-search-submit:hover {
1.373 + background-image: linear-gradient(#66bdff, #0d9eff);
1.374 + box-shadow: 0 1px 0 hsla(0,0%,100%,.2) inset,
1.375 + 0 0 0 1px hsla(0,0%,100%,.1) inset,
1.376 + 0 1px 0 hsla(210,54%,20%,.03),
1.377 + 0 0 4px hsla(206,100%,20%,.2);
1.378 +}
1.379 +
1.380 +#newtab-search-text + #newtab-search-submit:hover:active {
1.381 + box-shadow: 0 1px 1px hsla(211,79%,6%,.1) inset,
1.382 + 0 0 1px hsla(211,79%,6%,.2) inset;
1.383 + transition-duration: 0ms;
1.384 +}
1.385 +
1.386 +#newtab-search-panel .panel-arrowcontent {
1.387 + -moz-padding-start: 0;
1.388 + -moz-padding-end: 0;
1.389 + padding-top: 0;
1.390 + padding-bottom: 0;
1.391 + background: rgb(248, 250, 251);
1.392 +}
1.393 +
1.394 +.newtab-search-panel-engine {
1.395 + -moz-box-align: center;
1.396 + padding-top: 4px;
1.397 + padding-bottom: 4px;
1.398 + -moz-padding-start: 24px;
1.399 + -moz-padding-end: 24px;
1.400 +}
1.401 +
1.402 +.newtab-search-panel-engine:not(:last-child) {
1.403 + border-bottom: 1px solid #ccc;
1.404 +}
1.405 +
1.406 +.newtab-search-panel-engine > image {
1.407 + -moz-margin-end: 8px;
1.408 + width: 16px;
1.409 + height: 16px;
1.410 + list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
1.411 +}
1.412 +
1.413 +.newtab-search-panel-engine > label {
1.414 + -moz-padding-start: 0;
1.415 + -moz-margin-start: 0;
1.416 + color: rgb(130, 132, 133);
1.417 +}
1.418 +
1.419 +.newtab-search-panel-engine[selected] {
1.420 + background: url("chrome://global/skin/menu/shared-menu-check.png") center left 4px no-repeat transparent;
1.421 +}
