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/. */
8 background-color: transparent;
13 background-color: #000000
17 #newtab-undo-container {
20 border-color: #9C9CFF;
21 background-color: #000000;
36 background: transparent;
37 text-decoration: none;
41 .newtab-undo-button:hover {
42 text-decoration: underline;
45 .newtab-undo-button:-moz-focusring {
49 .newtab-undo-button > .button-box {
53 #newtab-undo-close-button {
56 list-style-image: url("chrome://global/skin/icons/close.png");
57 -moz-image-region: rect(0, 16px, 16px, 0);
60 #newtab-undo-close-button:hover {
61 -moz-image-region: rect(0, 32px, 16px, 16px);
64 #newtab-undo-close-button {
65 -moz-appearance: none;
72 background-image: -moz-image-rect(url("chrome://global/skin/icons/close.png"), 0, 16, 16, 0);
73 background-color: transparent;
76 #newtab-undo-close-button:hover,
77 #newtab-undo-close-button:active {
78 background-image: -moz-image-rect(url("chrome://global/skin/icons/close.png"), 0, 32, 16, 16);
82 #newtab-customize-button,
84 background-color: transparent;
85 background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 0, 32, 32, 0);
86 background-size: 28px;
93 #newtab-customize-button:-moz-any(:hover, :active, [active]) {
94 background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 0, 64, 32, 32);
95 background-color: #FFCF00;
100 background-color: rgba(255,159,0,.2);
102 border-color: #9C9CFF;
107 outline: 2px dashed #A09090;
108 -moz-outline-radius: 2px;
113 border-radius: inherit;
114 text-decoration: none;
115 transition-property: top, left, opacity, box-shadow, background-color;
118 .newtab-cell:not([ignorehover]) .newtab-control:hover ~ .newtab-link,
119 .newtab-cell:not([ignorehover]) .newtab-link:hover,
120 .newtab-site[dragged] {
121 box-shadow: 0 0 10px rgba(0,132,132,.3);
124 .newtab-site[dragged] {
125 transition-property: box-shadow, background-color;
126 background-color: #002121;
136 * If you change the sizes here, change them in newTab.css
137 * and the preference values:
138 * toolkit.pageThumbs.minWidth
139 * toolkit.pageThumbs.minHeight
143 background-origin: padding-box;
144 background-clip: padding-box;
145 background-repeat: no-repeat;
146 background-size: cover;
147 border-radius: 8px 8px 0px 0px;
149 transition: opacity 100ms ease-out;
152 .newtab-cell:not([ignorehover]) .newtab-site:hover .newtab-thumbnail.enhanced-content {
156 .newtab-site[type=affiliate] .newtab-thumbnail,
157 .newtab-site[type=enhanced] .newtab-thumbnail,
158 .newtab-site[type=organic] .newtab-thumbnail,
159 .newtab-site[type=sponsored] .newtab-thumbnail {
160 background-position: center center;
161 background-size: auto;
169 background-color: rgba(255,159,0,.8);
173 bottom: 0 !important;
178 background-color: #9C9CFF;
181 .newtab-suggested:hover {
182 background-color: #FFCF00;
183 border: 1px solid #9C9CFF;
186 .newtab-suggested[active] {
187 background-color: #FF9F00;
191 .newtab-site:hover .newtab-title {
192 background-color: #FFCF00;
195 .newtab-site[pinned] .newtab-title {
196 -moz-padding-start: 24px;
199 .newtab-site[pinned] .newtab-title::before {
200 background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 7, 278, 28, 266);
201 background-size: 10px;
212 .newtab-site[pinned] .newtab-title:-moz-dir(rtl)::before {
219 background-color: transparent;
220 background-size: 24px;
227 .newtab-site[pinned] .newtab-control-pin:hover:active {
228 background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 0, 96, 32, 64);
231 .newtab-control-pin:hover,
232 .newtab-site[pinned] .newtab-control-pin:hover {
233 background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 0, 128, 32, 96);
236 .newtab-control-pin:hover:active,
237 .newtab-site[pinned] .newtab-control-pin {
238 background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 0, 160, 32, 128);
241 .newtab-control-block {
242 background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 0, 192, 32, 160);
245 .newtab-control-block:hover {
246 background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 0, 224, 32, 192);
249 .newtab-control-block:hover:active {
250 background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 0, 256, 32, 224);
254 #newtab-search-logo:hover {
255 background-color: #FFCF00;
258 #newtab-search-logo[active] {
259 background-color: #FF9F00;
262 #newtab-search-logo {
263 background-image: url("chrome://browser/skin/magnifier.png");
265 #newtab-search-logo.magnifier[active],
266 #newtab-search-logo.magnifier:hover {
267 background-image: url("chrome://browser/skin/magnifier-hover.png");
269 /* Newer versions only */
270 #newtab-search-icon {
271 background-image: url("chrome://browser/skin/search-indicator-magnifying-glass.svg#magnifying-glass");
273 #newtab-search-logo.magnifier[active],
274 #newtab-search-logo.magnifier:hover {
275 background-image: url("chrome://browser/skin/magnifier-hover.png");
278 #newtab-search-text {
279 border: 1px solid #9C9CFF;
280 background-color: #000000;
283 #newtab-search-text::-moz-placeholder {
286 #newtab-search-text:focus {
287 border: 1px solid #008484;
288 box-shadow: 0 0 0 1px #008484 inset;
291 #newtab-search-submit {
292 background-image: none;
293 background-color: #C09070;
296 border-radius: 0 300px 300px 0;
298 -moz-margin-start: 3px;
300 #newtab-search-text:focus + #newtab-search-submit,
301 #newtab-search-text[autofocus] + #newtab-search-submit {
302 background-image: none;
303 background-color: #008484;
307 #newtab-search-text + #newtab-search-submit:hover {
308 background-image: none;
309 background-color: #FFCF00;
313 /* Newer versions only */
314 #newtab-search-submit[value=""],
315 #newtab-search-text:focus + #newtab-search-submit[value=""],
316 #newtab-search-text[autofocus] + #newtab-search-submit[value=""],
317 #newtab-search-text + #newtab-search-submit[value=""]:hover {
318 background-image: url("chrome://browser/skin/search-arrow-go.svg#search-arrow-go");
322 #newtab-customize-overlay {
326 #newtab-customize-panel,
327 #newtab-customize-panel-anchor,
328 #newtab-customize-panel-inner-wrapper,
329 .newtab-customize-panel-item,
330 .newtab-customize-complex-option {
331 background-color: #000000;
334 #newtab-customize-title {
336 background-color: #000000;
339 .newtab-customize-panel-item[selected],
340 .newtab-customize-panel-subitem[selected] {
344 .newtab-customize-panel-item:not([selected]),
345 .newtab-customize-panel-subitem:not([selected]) {
349 .newtab-customize-panel-subitem > .checkbox {
350 background-color: #000000;
351 border-color: #A09090;
354 .newtab-customize-panel-subitem[selected] > .checkbox {
355 background-color: #000000;
356 background-image: url("chrome://global/skin/menu/shared-menu-check-active.svg");
360 .newtab-customize-panel-item:not(:first-child),
361 .newtab-search-panel-engine {
362 border-top: 1px solid #A09090;
365 .newtab-customize-complex-option:hover > .selectable:not([selected]),
366 .selectable:hover:not([selected]),
367 .newtab-customize-complex-option:hover > .selectable:not([selected]) + .newtab-customize-panel-subitem,
368 .newtab-customize-panel-item:hover:not([selected]) {
369 background-color: #FFCF00;
373 .newtab-customize-complex-option:hover > .selectable:not([selected]),
374 .selectable:hover:not([selected]) {
375 background-image: url("chrome://global/skin/menu/shared-menu-check-black.svg");