diff -r 000000000000 -r 6474c204b198 browser/base/content/newtab/newTab.css --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/browser/base/content/newtab/newTab.css Wed Dec 31 06:09:35 2014 +0100 @@ -0,0 +1,418 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +input { + font: message-box !important; + font-size: 16px !important; +} + +input[type=button] { + cursor: pointer; +} + +/* SCROLLBOX */ +#newtab-scrollbox { + display: -moz-box; + position: relative; + -moz-box-flex: 1; + -moz-user-focus: normal; + -moz-box-orient: vertical; +} + +#newtab-scrollbox:not([page-disabled]) { + overflow: auto; +} + +/* UNDO */ +#newtab-undo-container { + transition: opacity 100ms ease-out; + display: -moz-box; + margin-bottom: 26px; /* 32 - 6 search form top "padding" */ + -moz-box-align: center; + -moz-box-pack: center; +} + +#newtab-undo-container[undo-disabled] { + opacity: 0; + pointer-events: none; +} + +/* TOGGLE */ +#newtab-toggle { + position: absolute; + top: 12px; + right: 12px; +} + +#newtab-toggle:-moz-locale-dir(rtl) { + left: 12px; + right: auto; +} + +/* MARGINS */ +#newtab-vertical-margin { + display: -moz-box; + position: relative; + -moz-box-flex: 1; + -moz-box-orient: vertical; +} + +#newtab-margin-top { + min-height: 50px; + max-height: 80px; + -moz-box-flex: 1; + -moz-box-align: center; + -moz-box-pack: center; +} + +#newtab-margin-undo-container { + display: -moz-box; + -moz-box-pack: center; +} + +#newtab-margin-bottom { + min-height: 40px; + max-height: 100px; + -moz-box-flex: 1; +} + +#newtab-horizontal-margin { + display: -moz-box; + -moz-box-flex: 1; +} + +#newtab-margin-top, +#newtab-margin-bottom { + display: -moz-box; + position: relative; +} + +#newtab-margin-top { + -moz-box-flex: 1; +} + +#newtab-margin-bottom { + -moz-box-flex: 2; +} + +.newtab-side-margin { + min-width: 40px; + max-width: 300px; + -moz-box-flex: 1; +} + +/* GRID */ +#newtab-grid { + display: -moz-box; + -moz-box-flex: 5; + -moz-box-orient: vertical; + min-width: 600px; + min-height: 400px; + transition: 100ms ease-out; + transition-property: opacity; +} + +#newtab-grid[page-disabled] { + opacity: 0; +} + +#newtab-grid[locked], +#newtab-grid[page-disabled] { + pointer-events: none; +} + +/* ROWS */ +.newtab-row { + display: -moz-box; + -moz-box-orient: horizontal; + -moz-box-direction: normal; + -moz-box-flex: 1; +} + +/* CELLS */ +.newtab-cell { + display: -moz-box; + -moz-box-flex: 1; +} + +/* SITES */ +.newtab-site { + position: relative; + -moz-box-flex: 1; + transition: 100ms ease-out; + transition-property: top, left, opacity; +} + +.newtab-site[frozen] { + position: absolute; + pointer-events: none; +} + +.newtab-site[dragged] { + transition-property: none; + z-index: 10; +} + +/* LINK + THUMBNAILS */ +.newtab-link, +.newtab-thumbnail { + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; +} + +.newtab-thumbnail { + opacity: .8; + transition: opacity 100ms ease-out; +} + +.newtab-thumbnail[dragged], +.newtab-link:-moz-focusring > .newtab-thumbnail, +.newtab-cell:not([ignorehover]) > .newtab-site:hover > .newtab-link > .newtab-thumbnail { + opacity: 1; +} + +/* TITLES */ +.newtab-title { + position: absolute; + left: 0; + right: 0; + bottom: 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +/* CONTROLS */ +.newtab-control { + position: absolute; + top: 4px; + opacity: 0; + transition: opacity 100ms ease-out; +} + +.newtab-control:-moz-focusring, +.newtab-cell:not([ignorehover]) > .newtab-site:hover > .newtab-control { + opacity: 1; +} + +.newtab-control[dragged] { + opacity: 0 !important; +} + +@media (-moz-touch-enabled) { + .newtab-control { + opacity: 1; + } +} + +.newtab-control-sponsored:-moz-locale-dir(rtl), +.newtab-control-pin:-moz-locale-dir(ltr), +.newtab-control-block:-moz-locale-dir(rtl) { + left: 4px; +} + +.newtab-control-sponsored:-moz-locale-dir(ltr), +.newtab-control-block:-moz-locale-dir(ltr), +.newtab-control-pin:-moz-locale-dir(rtl) { + right: 4px; +} + +.newtab-control.newtab-control-sponsored { + bottom: -20px; + height: 14px; + -moz-margin-end: -5px; + opacity: 1; + top: auto; + width: 14px; +} + +.newtab-site:not([type=sponsored]) .newtab-control-sponsored { + display: none; +} + +/* DRAG & DROP */ + +/* + * This is just a temporary drag element used for dataTransfer.setDragImage() + * so that we can use custom drag images and elements. It needs an opacity of + * 0.01 so that the core code detects that it's in fact a visible element. + */ +.newtab-drag { + width: 1px; + height: 1px; + background-color: #fff; + opacity: 0.01; +} + +/* SPONSORED PANEL */ +#sponsored-panel { + width: 330px; +} + +#sponsored-panel description { + margin: 0; +} + +#sponsored-panel .text-link { + margin: 12px 0 0; +} + +/* SEARCH */ +#newtab-search-container { + display: -moz-box; + position: relative; + -moz-box-align: center; + -moz-box-pack: center; +} + +#newtab-search-container[page-disabled] { + opacity: 0; + pointer-events: none; +} + +#newtab-search-form { + display: -moz-box; + -moz-box-flex: 5; + -moz-box-orient: horizontal; + -moz-box-align: center; + height: 44px; /* 32 + 6 logo top "padding" + 6 logo bottom "padding" */ + margin-bottom: 10px; /* 32 - 16 tiles top margin - 6 logo bottom "padding" */ +} + +#newtab-search-logo { + display: -moz-box; + width: 77px; /* 65 image width + 6 left "padding" + 6 right "padding" */ + height: 38px; /* 26 image height + 6 top "padding" + 6 bottom "padding" */ + border: 1px solid transparent; + -moz-margin-end: 8px; + background-repeat: no-repeat; + background-position: center; + background-size: 65px 26px; +} + +#newtab-search-logo[hidden] { + display: none; +} + +#newtab-search-logo[active], +#newtab-search-logo:hover { + background-color: #e9e9e9; + border: 1px solid rgb(226, 227, 229); + border-radius: 2.5px; +} + +#newtab-search-text { + height: 32px; + -moz-box-flex: 1; + + padding: 0 8px; + background: hsla(0,0%,100%,.9) padding-box; + border: 1px solid; + border-color: hsla(210,54%,20%,.15) hsla(210,54%,20%,.17) hsla(210,54%,20%,.2); + box-shadow: 0 1px 0 hsla(210,65%,9%,.02) inset, + 0 0 2px hsla(210,65%,9%,.1) inset, + 0 1px 0 hsla(0,0%,100%,.2); + border-radius: 2.5px 0 0 2.5px; + color: inherit; +} + +#newtab-search-text:-moz-dir(rtl) { + border-radius: 0 2.5px 2.5px 0; +} + +#newtab-search-text:focus, +#newtab-search-text[autofocus] { + border-color: hsla(206,100%,60%,.6) hsla(206,76%,52%,.6) hsla(204,100%,40%,.6); +} + +#newtab-search-submit { + height: 32px; + + -moz-margin-start: -1px; + background: linear-gradient(hsla(0,0%,100%,.8), hsla(0,0%,100%,.1)) padding-box; + padding: 0 9px; + border: 1px solid; + border-color: hsla(210,54%,20%,.15) hsla(210,54%,20%,.17) hsla(210,54%,20%,.2); + -moz-border-start: 1px solid transparent; + border-radius: 0 2.5px 2.5px 0; + box-shadow: 0 0 2px hsla(0,0%,100%,.5) inset, + 0 1px 0 hsla(0,0%,100%,.2); + color: inherit; + cursor: pointer; + transition-property: background-color, border-color, box-shadow; + transition-duration: 150ms; +} + +#newtab-search-submit:-moz-dir(rtl) { + border-radius: 2.5px 0 0 2.5px; +} + +#newtab-search-text:focus + #newtab-search-submit, +#newtab-search-text + #newtab-search-submit:hover, +#newtab-search-text[autofocus] + #newtab-search-submit { + border-color: #59b5fc #45a3e7 #3294d5; + color: white; +} + +#newtab-search-text:focus + #newtab-search-submit, +#newtab-search-text[autofocus] + #newtab-search-submit { + background-image: linear-gradient(#4cb1ff, #1793e5); + box-shadow: 0 1px 0 hsla(0,0%,100%,.2) inset, + 0 0 0 1px hsla(0,0%,100%,.1) inset, + 0 1px 0 hsla(210,54%,20%,.03); +} + +#newtab-search-text + #newtab-search-submit:hover { + background-image: linear-gradient(#66bdff, #0d9eff); + box-shadow: 0 1px 0 hsla(0,0%,100%,.2) inset, + 0 0 0 1px hsla(0,0%,100%,.1) inset, + 0 1px 0 hsla(210,54%,20%,.03), + 0 0 4px hsla(206,100%,20%,.2); +} + +#newtab-search-text + #newtab-search-submit:hover:active { + box-shadow: 0 1px 1px hsla(211,79%,6%,.1) inset, + 0 0 1px hsla(211,79%,6%,.2) inset; + transition-duration: 0ms; +} + +#newtab-search-panel .panel-arrowcontent { + -moz-padding-start: 0; + -moz-padding-end: 0; + padding-top: 0; + padding-bottom: 0; + background: rgb(248, 250, 251); +} + +.newtab-search-panel-engine { + -moz-box-align: center; + padding-top: 4px; + padding-bottom: 4px; + -moz-padding-start: 24px; + -moz-padding-end: 24px; +} + +.newtab-search-panel-engine:not(:last-child) { + border-bottom: 1px solid #ccc; +} + +.newtab-search-panel-engine > image { + -moz-margin-end: 8px; + width: 16px; + height: 16px; + list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png"); +} + +.newtab-search-panel-engine > label { + -moz-padding-start: 0; + -moz-margin-start: 0; + color: rgb(130, 132, 133); +} + +.newtab-search-panel-engine[selected] { + background: url("chrome://global/skin/menu/shared-menu-check.png") center left 4px no-repeat transparent; +}