some corrections and finishing touches to that LCARStrek works well for Firefox 55...
[themes.git] / newtab / newTab.css
... / ...
CommitLineData
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
5:root {
6 -moz-appearance: none;
7 font-size: 75%;
8 background-color: transparent;
9 padding: 0;
10}
11
12/* SCROLLBOX */
13#newtab-scrollbox:not([page-disabled]) {
14 color: #FF9F00;
15 background-color: #000000;
16}
17
18#newtab-scrollbox:not([page-disabled]) #newtab-margin-bottom {
19 background: inherit;
20}
21
22/* UNDO */
23#newtab-undo-container {
24 padding: 4px 3px;
25 border: 1px solid;
26 border-color: #9C9CFF;
27 background-color: #000000;
28 color: #8050B0;
29}
30
31#newtab-undo-label {
32 margin-top: 0;
33 margin-bottom: 0;
34}
35
36.newtab-undo-button {
37 color: #3333FF;
38 cursor: pointer;
39 padding: 0;
40 margin: 0 4px;
41 border: 0;
42 background: transparent;
43 text-decoration: none;
44 min-width: 0;
45}
46
47.newtab-undo-button:hover {
48 text-decoration: underline;
49}
50
51.newtab-undo-button:-moz-focusring {
52 outline: 1px dotted;
53}
54
55.newtab-undo-button > .button-box {
56 padding: 0;
57}
58
59#newtab-undo-close-button {
60 padding: 0;
61 border: none;
62 list-style-image: url("chrome://global/skin/icons/close.png");
63 -moz-image-region: rect(0, 16px, 16px, 0);
64}
65
66#newtab-undo-close-button:hover {
67 -moz-image-region: rect(0, 32px, 16px, 16px);
68}
69
70#newtab-undo-close-button:-moz-focusring {
71 outline: 1px dotted;
72}
73
74/* TOGGLE */
75#newtab-toggle {
76 width: 16px;
77 height: 16px;
78 padding: 0;
79 border: none;
80 background: -216px 0 transparent url("chrome://browser/skin/newtab/controls.png");
81}
82
83#newtab-toggle[page-disabled] {
84 background-position: -232px 0;
85}
86
87/* CUSTOMIZE */
88#newtab-customize-button,
89.newtab-customize {
90 background-color: transparent;
91 background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 0, 32, 32, 0);
92 background-size: 28px;
93 border: none;
94 border-radius: 3px;
95 height: 28px;
96 width: 28px;
97}
98
99#newtab-customize-button:-moz-any(:hover, :active, [active]) {
100 background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 0, 64, 32, 32);
101 background-color: #FFCF00;
102}
103
104/* ROWS */
105.newtab-row {
106 margin-bottom: 20px;
107}
108
109.newtab-row:last-child {
110 margin-bottom: 0;
111}
112
113.newtab-row > .newtab-cell {
114 /* this only applies before Directory Tiles work, row is gone afterwards. */
115 -moz-margin-end: 20px;
116}
117
118/* CELLS */
119.newtab-cell {
120 background-color: rgba(255,159,0,.2);
121 border: 1px solid;
122 border-color: #9C9CFF;
123 border-radius: 1px;
124 transition: border-color 100ms ease-out;
125}
126
127.newtab-cell:empty {
128 outline: 2px dashed #A09090;
129 -moz-outline-radius: 2px;
130}
131
132.newtab-row > .newtab-cell:last-child {
133 -moz-margin-end: 0;
134}
135
136.newtab-cell:hover:not(:empty):not([dragged]):not([ignorehover]) {
137 border-color: #FFCF00;
138}
139
140/* SITES */
141.newtab-site {
142 text-decoration: none;
143 transition-property: top, left, opacity, box-shadow, background-color;
144}
145
146.newtab-cell:not([ignorehover]) > .newtab-site:hover,
147.newtab-site[dragged] {
148 box-shadow: 0 0 10px rgba(0,132,132,.3);
149}
150
151.newtab-site[dragged] {
152 transition-property: box-shadow, background-color;
153 background-color: #002121;
154}
155
156/* LINKS */
157.newtab-link {
158 border-radius: 3px;
159}
160
161/* THUMBNAILS */
162.newtab-thumbnail {
163 background-origin: padding-box;
164 background-clip: padding-box;
165 background-repeat: no-repeat;
166 background-size: cover;
167 transition: opacity 100ms ease-out;
168}
169
170.newtab-site:hover .newtab-thumbnail.enhanced-content {
171 opacity: 0;
172}
173
174.newtab-site[type=affiliate] .newtab-thumbnail,
175.newtab-site[type=enhanced] .newtab-thumbnail,
176.newtab-site[type=organic] .newtab-thumbnail,
177.newtab-site[type=sponsored] .newtab-thumbnail {
178 background-position: center center;
179 background-size: auto;
180}
181
182/* TITLES */
183.newtab-sponsored,
184.newtab-title {
185 padding: 0 8px;
186 background-color: rgba(255,159,0,.8);
187 color: #000000;
188 line-height: 24px;
189 bottom: 0 !important;
190}
191
192.newtab-site[type=sponsored] .newtab-title {
193 -moz-padding-end: 24px;
194}
195
196.newtab-site:hover .newtab-title {
197 background-color: #FFCF00;
198}
199
200.newtab-site[pinned] .newtab-title {
201 padding: 0 15px;
202}
203
204.newtab-site[pinned] .newtab-title::before {
205 background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 7, 278, 28, 266);
206 background-size: 10px;
207 content: "";
208 height: 17px;
209 left: 0;
210 position: absolute;
211 width: 10px;
212}
213
214.newtab-site[pinned] .newtab-title:-moz-locale-dir(rtl)::before {
215 left: auto;
216 right: 0;
217}
218
219/* CONTROLS */
220.newtab-control {
221 background-color: transparent;
222 background-size: 24px;
223 border: none;
224 height: 24px;
225 width: 24px;
226}
227
228.newtab-control-pin,
229.newtab-site[pinned] .newtab-control-pin:hover:active {
230 background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 0, 96, 32, 64);
231}
232
233.newtab-control-pin:hover,
234.newtab-site[pinned] .newtab-control-pin:hover {
235 background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 0, 128, 32, 96);
236}
237
238.newtab-control-pin:hover:active,
239.newtab-site[pinned] .newtab-control-pin {
240 background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 0, 160, 32, 128);
241}
242
243.newtab-control-block {
244 background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 0, 192, 32, 160);
245}
246
247.newtab-control-block:hover {
248 background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 0, 224, 32, 192);
249}
250
251.newtab-control-block:hover:active {
252 background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 0, 256, 32, 224);
253}