michael@0: /* This Source Code Form is subject to the terms of the Mozilla Public
michael@0:  * License, v. 2.0. If a copy of the MPL was not distributed with this
michael@0:  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
michael@0: 
michael@0: :root {
michael@0:   -moz-appearance: none;
michael@0:   font-size: 75%;
michael@0:   background-color: transparent;
michael@0: }
michael@0: 
michael@0: /* SCROLLBOX */
michael@0: #newtab-scrollbox:not([page-disabled]),
michael@0: #newtab-scrollbox:not([page-disabled]) #newtab-margin-bottom {
michael@0:   color: rgb(0,0,0);
michael@0:   background-color: hsl(0,0%,95%);
michael@0: }
michael@0: 
michael@0: /* UNDO */
michael@0: #newtab-undo-container {
michael@0:   padding: 4px 3px;
michael@0:   border: 1px solid;
michael@0:   border-color: rgba(8,22,37,.12) rgba(8,22,37,.14) rgba(8,22,37,.16);
michael@0:   background-color: rgba(255,255,255,.4);
michael@0:   color: #525e69;
michael@0: }
michael@0: 
michael@0: #newtab-undo-label {
michael@0:   margin-top: 0;
michael@0:   margin-bottom: 0;
michael@0: }
michael@0: 
michael@0: .newtab-undo-button {
michael@0:   -moz-appearance: none;
michael@0:   color: rgb(20,79,174);
michael@0:   cursor: pointer;
michael@0:   padding: 0;
michael@0:   margin: 0 4px;
michael@0:   border: 0;
michael@0:   background: transparent;
michael@0:   text-decoration: none;
michael@0:   min-width: 0;
michael@0: }
michael@0: 
michael@0: .newtab-undo-button:hover {
michael@0:   text-decoration: underline;
michael@0: }
michael@0: 
michael@0: .newtab-undo-button:-moz-focusring {
michael@0:   outline: 1px dotted;
michael@0: }
michael@0: 
michael@0: #newtab-undo-close-button {
michael@0:   padding: 0;
michael@0:   border: none;
michael@0: }
michael@0: 
michael@0: #newtab-undo-close-button > .toolbarbutton-text {
michael@0:   display: none;
michael@0: }
michael@0: 
michael@0: #newtab-undo-close-button:-moz-focusring {
michael@0:   outline: 1px dotted;
michael@0: }
michael@0: 
michael@0: /* TOGGLE */
michael@0: #newtab-toggle {
michael@0:   width: 16px;
michael@0:   height: 16px;
michael@0:   padding: 0;
michael@0:   border: none;
michael@0:   background: -216px 0 transparent url(chrome://browser/skin/newtab/controls.png);
michael@0: }
michael@0: 
michael@0: #newtab-toggle[page-disabled] {
michael@0:   background-position: -232px 0;
michael@0: }
michael@0: 
michael@0: @media (min-resolution: 2dppx) {
michael@0:   #newtab-toggle {
michael@0:     background-image: url(chrome://browser/skin/newtab/controls@2x.png);
michael@0:     background-size: 296px;
michael@0:   }
michael@0: }
michael@0: 
michael@0: /* ROWS */
michael@0: .newtab-row {
michael@0:   margin-bottom: 20px;
michael@0: }
michael@0: 
michael@0: .newtab-row:last-child {
michael@0:   margin-bottom: 0;
michael@0: }
michael@0: 
michael@0: /* CELLS */
michael@0: .newtab-cell {
michael@0:   -moz-margin-end: 20px;
michael@0:   background-color: rgba(255,255,255,.2);
michael@0:   border: 1px solid;
michael@0:   border-color: rgba(8,22,37,.12) rgba(8,22,37,.14) rgba(8,22,37,.16);
michael@0:   border-radius: 1px;
michael@0:   transition: border-color 100ms ease-out;
michael@0: }
michael@0: 
michael@0: .newtab-cell:empty {
michael@0:   border: 1px dashed;
michael@0:   border-color: rgba(8,22,37,.15) rgba(8,22,37,.17) rgba(8,22,37,.19);
michael@0: }
michael@0: 
michael@0: .newtab-cell:last-child {
michael@0:   -moz-margin-end: 0;
michael@0: }
michael@0: 
michael@0: .newtab-cell:hover:not(:empty):not([dragged]):not([ignorehover]) {
michael@0:   border-color: rgba(8,22,37,.25) rgba(8,22,37,.27) rgba(8,22,37,.3);
michael@0: }
michael@0: 
michael@0: /* SITES */
michael@0: .newtab-site {
michael@0:   text-decoration: none;
michael@0:   transition-property: top, left, opacity, box-shadow, background-color;
michael@0: }
michael@0: 
michael@0: .newtab-cell:not([ignorehover]) > .newtab-site:hover,
michael@0: .newtab-site[dragged] {
michael@0:   box-shadow: 0 0 10px rgba(8,22,37,.3);
michael@0: }
michael@0: 
michael@0: .newtab-site[dragged] {
michael@0:   transition-property: box-shadow, background-color;
michael@0:   background-color: rgb(242,242,242);
michael@0: }
michael@0: 
michael@0: /* THUMBNAILS */
michael@0: .newtab-thumbnail {
michael@0:   background-origin: padding-box;
michael@0:   background-clip: padding-box;
michael@0:   background-repeat: no-repeat;
michael@0:   background-size: cover;
michael@0: }
michael@0: 
michael@0: .newtab-site[type=affiliate] .newtab-thumbnail,
michael@0: .newtab-site[type=organic] .newtab-thumbnail,
michael@0: .newtab-site[type=sponsored] .newtab-thumbnail {
michael@0:   background-position: top center;
michael@0:   background-size: auto;
michael@0: }
michael@0: 
michael@0: /* TITLES */
michael@0: .newtab-title {
michael@0:   padding: 0 8px;
michael@0:   background-color: rgba(248,249,251,.95);
michael@0:   color: #1f364c;
michael@0:   line-height: 24px;
michael@0: }
michael@0: 
michael@0: .newtab-site[type=sponsored] .newtab-title {
michael@0:   -moz-padding-end: 24px;
michael@0: }
michael@0: 
michael@0: /* CONTROLS */
michael@0: .newtab-control {
michael@0:   width: 24px;
michael@0:   height: 24px;
michael@0:   padding: 1px 2px 3px;
michael@0:   border: none;
michael@0:   background: transparent url(chrome://browser/skin/newtab/controls.png);
michael@0: }
michael@0: 
michael@0: @media (min-resolution: 2dppx) {
michael@0:   .newtab-control {
michael@0:     background-image: url(chrome://browser/skin/newtab/controls@2x.png);
michael@0:     background-size: 296px;
michael@0:   }
michael@0: }
michael@0: 
michael@0: .newtab-control-pin:hover {
michael@0:   background-position: -24px 0;
michael@0: }
michael@0: 
michael@0: .newtab-control-pin:active {
michael@0:   background-position: -48px 0;
michael@0: }
michael@0: 
michael@0: .newtab-control-pin[pinned] {
michael@0:   background-position: -72px 0;
michael@0: }
michael@0: 
michael@0: .newtab-control-pin[pinned]:hover {
michael@0:   background-position: -96px 0;
michael@0: }
michael@0: 
michael@0: .newtab-control-pin[pinned]:active {
michael@0:   background-position: -120px 0;
michael@0: }
michael@0: 
michael@0: .newtab-control-block {
michael@0:   background-position: -144px 0;
michael@0: }
michael@0: 
michael@0: .newtab-control-block:hover {
michael@0:   background-position: -168px 0;
michael@0: }
michael@0: 
michael@0: .newtab-control-block:active {
michael@0:   background-position: -192px 0;
michael@0: }
michael@0: 
michael@0: .newtab-control-sponsored {
michael@0:   background-position: -249px -1px;
michael@0: }
michael@0: 
michael@0: .newtab-control-sponsored:hover {
michael@0:   background-position: -265px -1px;
michael@0: }
michael@0: 
michael@0: .newtab-control-sponsored[panelShown] {
michael@0:   background-position: -281px -1px;
michael@0: }