compensate for missed tag
[themes.git] / LCARStrek / browser / newtab / newTab.css
CommitLineData
fff8097b
RK
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/. */
4
8d7ef0d9
RK
5:root {
6 -moz-appearance: none;
56ab361a 7 font-size: 75%;
8d7ef0d9 8 background-color: transparent;
0d686391 9 padding: 0;
0d686391
RK
10}
11
78cd4073
RK
12body {
13 background-color: #000000
14}
15
56ab361a
RK
16/* UNDO */
17#newtab-undo-container {
18 padding: 4px 3px;
19 border: 1px solid;
20 border-color: #9C9CFF;
21 background-color: #000000;
22 color: #8050B0;
23}
24
25#newtab-undo-label {
26 margin-top: 0;
27 margin-bottom: 0;
28}
29
30.newtab-undo-button {
31 color: #3333FF;
32 cursor: pointer;
33 padding: 0;
34 margin: 0 4px;
35 border: 0;
36 background: transparent;
37 text-decoration: none;
38 min-width: 0;
39}
40
41.newtab-undo-button:hover {
42 text-decoration: underline;
43}
44
45.newtab-undo-button:-moz-focusring {
46 outline: 1px dotted;
47}
48
49.newtab-undo-button > .button-box {
50 padding: 0;
51}
52
53#newtab-undo-close-button {
54 padding: 0;
55 border: none;
56 list-style-image: url("chrome://global/skin/icons/close.png");
57 -moz-image-region: rect(0, 16px, 16px, 0);
56ab361a
RK
58}
59
60#newtab-undo-close-button:hover {
61 -moz-image-region: rect(0, 32px, 16px, 16px);
62}
63
b1dfcf32
RK
64#newtab-undo-close-button {
65 -moz-appearance: none;
66 padding: 0;
67 border: none;
68 height: 16px;
69 width: 16px;
70 float: right;
71 right: 0;
72 background-image: -moz-image-rect(url("chrome://global/skin/icons/close.png"), 0, 16, 16, 0);
73 background-color: transparent;
74}
75
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);
56ab361a
RK
79}
80
2b5a5147
RK
81/* CUSTOMIZE */
82#newtab-customize-button,
83.newtab-customize {
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;
87 border: none;
88 border-radius: 3px;
89 height: 28px;
90 width: 28px;
91}
92
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;
96}
97
8d7ef0d9 98/* CELLS */
c9b0a396 99.newtab-cell {
8d7ef0d9
RK
100 background-color: rgba(255,159,0,.2);
101 border: 1px solid;
102 border-color: #9C9CFF;
78cd4073 103 border-radius: 10px;
0d686391
RK
104}
105
8d7ef0d9 106.newtab-cell:empty {
2b5a5147
RK
107 outline: 2px dashed #A09090;
108 -moz-outline-radius: 2px;
0d686391
RK
109}
110
8d7ef0d9
RK
111/* SITES */
112.newtab-site {
d4d77dc0 113 border-radius: inherit;
8d7ef0d9 114 text-decoration: none;
71a617ff 115 transition-property: top, left, opacity, box-shadow, background-color;
0d686391
RK
116}
117
d74db938
RK
118.newtab-cell:not([ignorehover]) .newtab-control:hover ~ .newtab-link,
119.newtab-cell:not([ignorehover]) .newtab-link:hover,
c9b0a396 120.newtab-site[dragged] {
8d7ef0d9 121 box-shadow: 0 0 10px rgba(0,132,132,.3);
0d686391
RK
122}
123
8d7ef0d9 124.newtab-site[dragged] {
71a617ff 125 transition-property: box-shadow, background-color;
8d7ef0d9 126 background-color: #002121;
0d686391
RK
127}
128
2b5a5147
RK
129/* LINKS */
130.newtab-link {
d74db938
RK
131 border-radius: 10px;
132 overflow: hidden;
2b5a5147
RK
133}
134
d7b7f7e1
RK
135/***
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
140 */
8d7ef0d9
RK
141/* THUMBNAILS */
142.newtab-thumbnail {
143 background-origin: padding-box;
144 background-clip: padding-box;
145 background-repeat: no-repeat;
146 background-size: cover;
d74db938
RK
147 border-radius: 8px 8px 0px 0px;
148 height: 180px;
2b5a5147
RK
149 transition: opacity 100ms ease-out;
150}
151
0ef54c72 152.newtab-cell:not([ignorehover]) .newtab-site:hover .newtab-thumbnail.enhanced-content {
2b5a5147 153 opacity: 0;
0d686391
RK
154}
155
fff8097b 156.newtab-site[type=affiliate] .newtab-thumbnail,
2b5a5147 157.newtab-site[type=enhanced] .newtab-thumbnail,
fff8097b
RK
158.newtab-site[type=organic] .newtab-thumbnail,
159.newtab-site[type=sponsored] .newtab-thumbnail {
160 background-position: center center;
161 background-size: auto;
162}
163
8d7ef0d9 164/* TITLES */
2b5a5147 165.newtab-sponsored,
0ef54c72
RK
166.newtab-title,
167.newtab-suggested {
8d7ef0d9
RK
168 padding: 0 8px;
169 background-color: rgba(255,159,0,.8);
170 color: #000000;
78cd4073 171 border: none;
8d7ef0d9 172 line-height: 24px;
fff8097b
RK
173 bottom: 0 !important;
174}
175
d74db938 176/*
0ef54c72
RK
177.newtab-suggested {
178 background-color: #9C9CFF;
179}
180
181.newtab-suggested:hover {
182 background-color: #FFCF00;
183 border: 1px solid #9C9CFF;
184}
185
186.newtab-suggested[active] {
187 background-color: #FF9F00;
188 border: 0;
189}
d74db938 190*/
2b5a5147
RK
191.newtab-site:hover .newtab-title {
192 background-color: #FFCF00;
0d686391
RK
193}
194
2b5a5147 195.newtab-site[pinned] .newtab-title {
d74db938 196 -moz-padding-start: 24px;
0d686391
RK
197}
198
2b5a5147
RK
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;
202 content: "";
203 height: 17px;
482e8162
RK
204 left: 5px;
205 top: 5px;
2b5a5147
RK
206 position: absolute;
207 width: 10px;
d74db938 208 margin-left: 8px;
78cd4073 209 margin-top: 0;
0d686391
RK
210}
211
b1dfcf32 212.newtab-site[pinned] .newtab-title:-moz-dir(rtl)::before {
2b5a5147
RK
213 left: auto;
214 right: 0;
0d686391
RK
215}
216
2b5a5147
RK
217/* CONTROLS */
218.newtab-control {
219 background-color: transparent;
220 background-size: 24px;
221 border: none;
222 height: 24px;
223 width: 24px;
0d686391
RK
224}
225
2b5a5147
RK
226.newtab-control-pin,
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);
0d686391
RK
229}
230
2b5a5147
RK
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);
0d686391
RK
234}
235
2b5a5147
RK
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);
0d686391 239}
fff8097b 240
2b5a5147
RK
241.newtab-control-block {
242 background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 0, 192, 32, 160);
fff8097b
RK
243}
244
2b5a5147
RK
245.newtab-control-block:hover {
246 background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 0, 224, 32, 192);
fff8097b
RK
247}
248
2b5a5147
RK
249.newtab-control-block:hover:active {
250 background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 0, 256, 32, 224);
fff8097b 251}
78cd4073
RK
252
253/* SEARCH */
1f756abf
RK
254#newtab-search-logo:hover {
255 background-color: #FFCF00;
256 border: none;
257}
258#newtab-search-logo[active] {
259 background-color: #FF9F00;
260 border: none;
261}
262#newtab-search-logo {
263 background-image: url("chrome://browser/skin/magnifier.png");
264}
265#newtab-search-logo.magnifier[active],
266#newtab-search-logo.magnifier:hover {
267 background-image: url("chrome://browser/skin/magnifier-hover.png");
268}
269/* Newer versions only */
270#newtab-search-icon {
271 background-image: url("chrome://browser/skin/search-indicator-magnifying-glass.svg#magnifying-glass");
272}
273#newtab-search-logo.magnifier[active],
274#newtab-search-logo.magnifier:hover {
275 background-image: url("chrome://browser/skin/magnifier-hover.png");
276}
277
78cd4073
RK
278#newtab-search-text {
279 border: 1px solid #9C9CFF;
280 background-color: #000000;
281 color: #E7ADE7;
282}
283#newtab-search-text::-moz-placeholder {
284 color: #8050B0;
285}
286#newtab-search-text:focus {
287 border: 1px solid #008484;
288 box-shadow: 0 0 0 1px #008484 inset;
289}
290
291#newtab-search-submit {
1f756abf 292 background-image: none;
78cd4073 293 background-color: #C09070;
1f756abf
RK
294 color: #000000;
295 box-shadow: none;
78cd4073
RK
296 border-radius: 0 300px 300px 0;
297 border: none;
298 -moz-margin-start: 3px;
299}
300#newtab-search-text:focus + #newtab-search-submit,
301#newtab-search-text[autofocus] + #newtab-search-submit {
1f756abf 302 background-image: none;
78cd4073 303 background-color: #008484;
1f756abf 304 color: #000000;
78cd4073
RK
305 box-shadow: none;
306}
307#newtab-search-text + #newtab-search-submit:hover {
1f756abf 308 background-image: none;
78cd4073 309 background-color: #FFCF00;
1f756abf 310 color: #000000;
78cd4073
RK
311 box-shadow: none;
312}
1f756abf
RK
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");
319}
320
321/* CUSTOMIZE */
322#newtab-customize-overlay {
323 background: #A09090;
324}
325
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;
332}
333
334#newtab-customize-title {
335 color: #9C9CFF;
336 background-color: #000000;
337}
338
339.newtab-customize-panel-item[selected],
340.newtab-customize-panel-subitem[selected] {
341 color: #FF9F00;
342}
343
344.newtab-customize-panel-item:not([selected]),
345.newtab-customize-panel-subitem:not([selected]) {
346 color: #A09090;
347}
348
349.newtab-customize-panel-subitem > .checkbox {
350 background-color: #000000;
351 border-color: #A09090;
352}
353
354.newtab-customize-panel-subitem[selected] > .checkbox {
355 background-color: #000000;
356 background-image: url("chrome://global/skin/menu/shared-menu-check-active.svg");
357 color: #FF9F00;
358}
359
360.newtab-customize-panel-item:not(:first-child),
361.newtab-search-panel-engine {
362 border-top: 1px solid #A09090;
363}
364
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;
370 color: #000000;
371}
372
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");
376}