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