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;
137 background-origin: padding-box;
138 background-clip: padding-box;
139 background-repeat: no-repeat;
140 background-size: cover;
141 border-radius: 8px 8px 0px 0px;
143 transition: opacity 100ms ease-out;
146 .newtab-cell:not([ignorehover]) .newtab-site:hover .newtab-thumbnail.enhanced-content {
150 .newtab-site[type=affiliate] .newtab-thumbnail,
151 .newtab-site[type=enhanced] .newtab-thumbnail,
152 .newtab-site[type=organic] .newtab-thumbnail,
153 .newtab-site[type=sponsored] .newtab-thumbnail {
154 background-position: center center;
155 background-size: auto;
163 background-color: rgba(255,159,0,.8);
167 bottom: 0 !important;
172 background-color: #9C9CFF;
175 .newtab-suggested:hover {
176 background-color: #FFCF00;
177 border: 1px solid #9C9CFF;
180 .newtab-suggested[active] {
181 background-color: #FF9F00;
185 .newtab-site:hover .newtab-title {
186 background-color: #FFCF00;
189 .newtab-site[pinned] .newtab-title {
190 -moz-padding-start: 24px;
193 .newtab-site[pinned] .newtab-title::before {
194 background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 7, 278, 28, 266);
195 background-size: 10px;
206 .newtab-site[pinned] .newtab-title:-moz-dir(rtl)::before {
213 background-color: transparent;
214 background-size: 24px;
221 .newtab-site[pinned] .newtab-control-pin:hover:active {
222 background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 0, 96, 32, 64);
225 .newtab-control-pin:hover,
226 .newtab-site[pinned] .newtab-control-pin:hover {
227 background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 0, 128, 32, 96);
230 .newtab-control-pin:hover:active,
231 .newtab-site[pinned] .newtab-control-pin {
232 background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 0, 160, 32, 128);
235 .newtab-control-block {
236 background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 0, 192, 32, 160);
239 .newtab-control-block:hover {
240 background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 0, 224, 32, 192);
243 .newtab-control-block:hover:active {
244 background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 0, 256, 32, 224);
248 #newtab-search-logo:hover {
249 background-color: #FFCF00;
252 #newtab-search-logo[active] {
253 background-color: #FF9F00;
256 #newtab-search-logo {
257 background-image: url("chrome://browser/skin/magnifier.png");
259 #newtab-search-logo.magnifier[active],
260 #newtab-search-logo.magnifier:hover {
261 background-image: url("chrome://browser/skin/magnifier-hover.png");
263 /* Newer versions only */
264 #newtab-search-icon {
265 background-image: url("chrome://browser/skin/search-indicator-magnifying-glass.svg#magnifying-glass");
267 #newtab-search-logo.magnifier[active],
268 #newtab-search-logo.magnifier:hover {
269 background-image: url("chrome://browser/skin/magnifier-hover.png");
272 #newtab-search-text {
273 border: 1px solid #9C9CFF;
274 background-color: #000000;
277 #newtab-search-text::-moz-placeholder {
280 #newtab-search-text:focus {
281 border: 1px solid #008484;
282 box-shadow: 0 0 0 1px #008484 inset;
285 #newtab-search-submit {
286 background-image: none;
287 background-color: #C09070;
290 border-radius: 0 300px 300px 0;
292 -moz-margin-start: 3px;
294 #newtab-search-text:focus + #newtab-search-submit,
295 #newtab-search-text[autofocus] + #newtab-search-submit {
296 background-image: none;
297 background-color: #008484;
301 #newtab-search-text + #newtab-search-submit:hover {
302 background-image: none;
303 background-color: #FFCF00;
307 /* Newer versions only */
308 #newtab-search-submit[value=""],
309 #newtab-search-text:focus + #newtab-search-submit[value=""],
310 #newtab-search-text[autofocus] + #newtab-search-submit[value=""],
311 #newtab-search-text + #newtab-search-submit[value=""]:hover {
312 background-image: url("chrome://browser/skin/search-arrow-go.svg#search-arrow-go");
316 #newtab-customize-overlay {
320 #newtab-customize-panel,
321 #newtab-customize-panel-anchor,
322 #newtab-customize-panel-inner-wrapper,
323 .newtab-customize-panel-item,
324 .newtab-customize-complex-option {
325 background-color: #000000;
328 #newtab-customize-title {
330 background-color: #000000;
333 .newtab-customize-panel-item[selected],
334 .newtab-customize-panel-subitem[selected] {
338 .newtab-customize-panel-item:not([selected]),
339 .newtab-customize-panel-subitem:not([selected]) {
343 .newtab-customize-panel-subitem > .checkbox {
344 background-color: #000000;
345 border-color: #A09090;
348 .newtab-customize-panel-subitem[selected] > .checkbox {
349 background-color: #000000;
350 background-image: url("chrome://global/skin/menu/shared-menu-check-active.svg");
354 .newtab-customize-panel-item:not(:first-child),
355 .newtab-search-panel-engine {
356 border-top: 1px solid #A09090;
359 .newtab-customize-complex-option:hover > .selectable:not([selected]),
360 .selectable:hover:not([selected]),
361 .newtab-customize-complex-option:hover > .selectable:not([selected]) + .newtab-customize-panel-subitem,
362 .newtab-customize-panel-item:hover:not([selected]) {
363 background-color: #FFCF00;
367 .newtab-customize-complex-option:hover > .selectable:not([selected]),
368 .selectable:hover:not([selected]) {
369 background-image: url("chrome://global/skin/menu/shared-menu-check-black.svg");