browser/themes/osx/newtab/newTab.css

changeset 0
6474c204b198
equal deleted inserted replaced
-1:000000000000 0:83cbd2a9d26f
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 }
10
11 /* SCROLLBOX */
12 #newtab-scrollbox:not([page-disabled]),
13 #newtab-scrollbox:not([page-disabled]) #newtab-margin-bottom {
14 color: rgb(0,0,0);
15 background-color: hsl(0,0%,95%);
16 }
17
18 /* UNDO */
19 #newtab-undo-container {
20 padding: 4px 3px;
21 border: 1px solid;
22 border-color: rgba(8,22,37,.12) rgba(8,22,37,.14) rgba(8,22,37,.16);
23 background-color: rgba(255,255,255,.4);
24 color: #525e69;
25 }
26
27 #newtab-undo-label {
28 margin-top: 0;
29 margin-bottom: 0;
30 }
31
32 .newtab-undo-button {
33 -moz-appearance: none;
34 color: rgb(20,79,174);
35 cursor: pointer;
36 padding: 0;
37 margin: 0 4px;
38 border: 0;
39 background: transparent;
40 text-decoration: none;
41 min-width: 0;
42 }
43
44 .newtab-undo-button:hover {
45 text-decoration: underline;
46 }
47
48 .newtab-undo-button:-moz-focusring {
49 outline: 1px dotted;
50 }
51
52 #newtab-undo-close-button {
53 padding: 0;
54 border: none;
55 }
56
57 #newtab-undo-close-button > .toolbarbutton-text {
58 display: none;
59 }
60
61 #newtab-undo-close-button:-moz-focusring {
62 outline: 1px dotted;
63 }
64
65 /* TOGGLE */
66 #newtab-toggle {
67 width: 16px;
68 height: 16px;
69 padding: 0;
70 border: none;
71 background: -216px 0 transparent url(chrome://browser/skin/newtab/controls.png);
72 }
73
74 #newtab-toggle[page-disabled] {
75 background-position: -232px 0;
76 }
77
78 @media (min-resolution: 2dppx) {
79 #newtab-toggle {
80 background-image: url(chrome://browser/skin/newtab/controls@2x.png);
81 background-size: 296px;
82 }
83 }
84
85 /* ROWS */
86 .newtab-row {
87 margin-bottom: 20px;
88 }
89
90 .newtab-row:last-child {
91 margin-bottom: 0;
92 }
93
94 /* CELLS */
95 .newtab-cell {
96 -moz-margin-end: 20px;
97 background-color: rgba(255,255,255,.2);
98 border: 1px solid;
99 border-color: rgba(8,22,37,.12) rgba(8,22,37,.14) rgba(8,22,37,.16);
100 border-radius: 1px;
101 transition: border-color 100ms ease-out;
102 }
103
104 .newtab-cell:empty {
105 border: 1px dashed;
106 border-color: rgba(8,22,37,.15) rgba(8,22,37,.17) rgba(8,22,37,.19);
107 }
108
109 .newtab-cell:last-child {
110 -moz-margin-end: 0;
111 }
112
113 .newtab-cell:hover:not(:empty):not([dragged]):not([ignorehover]) {
114 border-color: rgba(8,22,37,.25) rgba(8,22,37,.27) rgba(8,22,37,.3);
115 }
116
117 /* SITES */
118 .newtab-site {
119 text-decoration: none;
120 transition-property: top, left, opacity, box-shadow, background-color;
121 }
122
123 .newtab-cell:not([ignorehover]) > .newtab-site:hover,
124 .newtab-site[dragged] {
125 box-shadow: 0 0 10px rgba(8,22,37,.3);
126 }
127
128 .newtab-site[dragged] {
129 transition-property: box-shadow, background-color;
130 background-color: rgb(242,242,242);
131 }
132
133 /* THUMBNAILS */
134 .newtab-thumbnail {
135 background-origin: padding-box;
136 background-clip: padding-box;
137 background-repeat: no-repeat;
138 background-size: cover;
139 }
140
141 .newtab-site[type=affiliate] .newtab-thumbnail,
142 .newtab-site[type=organic] .newtab-thumbnail,
143 .newtab-site[type=sponsored] .newtab-thumbnail {
144 background-position: top center;
145 background-size: auto;
146 }
147
148 /* TITLES */
149 .newtab-title {
150 padding: 0 8px;
151 background-color: rgba(248,249,251,.95);
152 color: #1f364c;
153 line-height: 24px;
154 }
155
156 .newtab-site[type=sponsored] .newtab-title {
157 -moz-padding-end: 24px;
158 }
159
160 /* CONTROLS */
161 .newtab-control {
162 width: 24px;
163 height: 24px;
164 padding: 1px 2px 3px;
165 border: none;
166 background: transparent url(chrome://browser/skin/newtab/controls.png);
167 }
168
169 @media (min-resolution: 2dppx) {
170 .newtab-control {
171 background-image: url(chrome://browser/skin/newtab/controls@2x.png);
172 background-size: 296px;
173 }
174 }
175
176 .newtab-control-pin:hover {
177 background-position: -24px 0;
178 }
179
180 .newtab-control-pin:active {
181 background-position: -48px 0;
182 }
183
184 .newtab-control-pin[pinned] {
185 background-position: -72px 0;
186 }
187
188 .newtab-control-pin[pinned]:hover {
189 background-position: -96px 0;
190 }
191
192 .newtab-control-pin[pinned]:active {
193 background-position: -120px 0;
194 }
195
196 .newtab-control-block {
197 background-position: -144px 0;
198 }
199
200 .newtab-control-block:hover {
201 background-position: -168px 0;
202 }
203
204 .newtab-control-block:active {
205 background-position: -192px 0;
206 }
207
208 .newtab-control-sponsored {
209 background-position: -249px -1px;
210 }
211
212 .newtab-control-sponsored:hover {
213 background-position: -265px -1px;
214 }
215
216 .newtab-control-sponsored[panelShown] {
217 background-position: -281px -1px;
218 }

mercurial