• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/* Most Visited */
2
3#most-visited-maxiview {
4  position: relative;
5  height: 366px;
6  -webkit-user-select: none;
7}
8
9.thumbnail-container {
10  position: absolute;
11  color: hsl(213, 90%, 24%);
12  text-decoration: none;
13  -webkit-transition: left .15s, right .15s, top .15s;
14  text-decoration: none;
15}
16
17.thumbnail-container:focus {
18  outline: none;
19}
20
21.thumbnail,
22.thumbnail-container > .title {
23  width: 207px; /* natural size is 196 */
24  height: 129px; /* 136 */
25  -webkit-transition: width .15s, height .15s;
26}
27
28.thumbnail-container > .title {
29  line-height: 16px;
30  height: 16px;
31  margin: 0;
32  margin-top: 4px;
33  font-size: 100%;
34  font-weight: normal;
35  padding: 0 3px;
36  opacity: 1;
37  -webkit-transition: opacity .15s, width .15s;
38  color: black;
39}
40
41.thumbnail-wrapper {
42  display: block;
43  background-size: 212px 132px;
44  background: no-repeat 4px 4px;
45  background-color: white;
46  border-radius: 5px;
47  -webkit-transition: background-size .15s;
48  position: relative;
49}
50
51.filler * {
52  visibility: hidden;
53}
54
55.filler {
56  pointer-events: none;
57}
58
59.filler .thumbnail-wrapper {
60  visibility: visible;
61  border: 3px solid hsl(213, 60%, 92%);
62}
63
64.filler .thumbnail {
65  visibility: inherit;
66  border: 1px solid white;
67  padding: 0;
68  background-color: hsl(213, 60%, 92%);
69}
70
71.edit-bar {
72  display: -webkit-box;
73  -webkit-box-orient: horizontal;
74  -webkit-box-align: stretch;
75  padding: 3px;
76  padding-bottom: 0;
77  height: 17px; /* 23 - 2 * 3 */
78  cursor: move;
79  font-size: 100%;
80  line-height: 17px;
81  background: hsl(213, 54%, 95%);
82  border-top-left-radius: 4px;
83  border-top-right-radius: 4px;
84  position: relative;
85  margin-top: 21px;
86  margin-bottom: -21px;
87  -webkit-transition: margin .15s, background .15s;
88}
89
90.edit-bar > * {
91  display: block;
92  position: relative;
93}
94
95.thumbnail-container:focus .edit-bar,
96.thumbnail-container:hover .edit-bar {
97  margin-top: 0;
98  margin-bottom: 0;
99  -webkit-transition-delay: .5s, 0s;
100
101  /* We need background-color as well to get the fade out animation correct */
102  background-color: hsl(213, 66%, 57%);
103  background-image: -webkit-linear-gradient(hsl(213, 87%, 67%),
104                                            hsl(213, 66%, 57%));
105}
106
107.edit-bar > .spacer {
108  -webkit-box-flex: 1;
109}
110
111.edit-bar > .pin,
112.edit-bar > .remove {
113  width: 16px;
114  height: 16px;
115  cursor: pointer;
116  background-image: no-repeat 50% 50%;
117}
118
119.edit-bar > .pin {
120  background-image: url('ntp_pin_off.png');
121}
122
123.edit-bar > .pin:hover {
124  background-image: url('ntp_pin_off_h.png');
125}
126
127.edit-bar > .pin:active {
128  background-image: url('ntp_pin_off_p.png');
129}
130
131.pinned .edit-bar > .pin {
132  background-image: url('ntp_pin_on.png');
133}
134
135.pinned .edit-bar > .pin:hover {
136  background-image: url(ntp_pin_on_h.png');
137}
138
139.pinned .edit-bar > .pin:active {
140  background-image: url(ntp_pin_on_p.png');
141}
142
143.edit-bar > .remove {
144  background-image: url('ntp_close.png');
145}
146
147.edit-bar > .remove:hover {
148  background-image: url('ntp_close_h.png');
149}
150
151.edit-bar > .remove:active {
152  background-image: url('ntp_close_p.png');
153}
154
155.thumbnail-container > .title > div {
156  white-space: nowrap;
157  overflow: hidden;
158  text-overflow: ellipsis;
159  background: no-repeat 0 50%;
160  background-size: 16px;
161  padding-left: 20px; /* we cannot use padding start here because even if we set
162                         the direction we always want the icon on the same side
163                      */
164  padding-right: 0;
165}
166
167html[dir=rtl] .thumbnail-container > .title > div {
168  background-position-x: 100%;
169  padding-left: 0;
170  padding-right: 20px;
171  text-align: right;
172}
173
174.thumbnail {
175  border: 3px solid hsl(213, 63%, 93%);
176  padding: 1px;
177  border-radius: 5px;
178  display: block;
179  -webkit-box-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0);
180  -webkit-transition: width .15s, height .15s, border-color .15s,
181      border-top-left-radius .15s, border-top-right-radius .15s,
182      -webkit-box-shadow .15s;
183}
184
185.edit-mode-border {
186  border-radius: 4px;
187
188  /* when dragged over we move this */
189  position: relative;
190  -webkit-transition: top .15s, left .15s;
191}
192
193.thumbnail-container:focus .thumbnail,
194.thumbnail-container:hover .thumbnail {
195  border-color: hsl(213, 66%, 57%);
196  -webkit-box-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0);
197  border-top-left-radius: 0;
198  border-top-right-radius: 0;
199
200  background-image: -webkit-linear-gradient(hsla(0, 0%, 0%, 0),
201                                            hsla(0, 0%, 47%, 0) 85%,
202                                            hsla(0, 0%, 47%, 0.2));
203
204  /* delay border radius transition as much as the edit bar slide delay */
205  -webkit-transition-delay: 0, 0, 0, .5s, .5s, 0;
206}
207
208.thumbnail-container:focus > .edit-mode-border,
209.thumbnail-container:hover > .edit-mode-border {
210  background-color: hsl(213, 66%, 57%);
211  -webkit-box-shadow: 0px 2px 2px hsla(0, 0%, 0%, .5);
212}
213
214.dragging,
215.dragging * {
216  -webkit-transition: none !important;
217}
218
219.dragging > .title {
220  opacity: 0;
221}
222
223@-webkit-keyframes 'fade-in' {
224  0% {
225    opacity: 0;
226  }
227
228  100% {
229    opacity: 1;
230  }
231}
232
233.fade-in {
234  -webkit-animation: 'fade-in' .15s;
235}
236
237@media (max-width: 940px) {
238  #most-visited-maxiview {
239    height: 294px;
240  }
241
242  .thumbnail,
243  .thumbnail-container > .title {
244    width: 150px;
245    height: 93px;
246  }
247
248  .thumbnail-container > .title {
249    height: auto;
250  }
251
252  .thumbnail-wrapper {
253    background-size: 150px 93px;
254  }
255}
256
257#most-visited-settings {
258  position: absolute;
259  top: 1px;
260  right: 0;
261  border: 0;
262  cursor: pointer;
263  font-size: 70%;
264  margin: 0;
265  padding: 0;
266  text-decoration: underline;
267  visibility: hidden;
268  -webkit-padding-start: 3px;
269  z-index: 3;
270}
271
272html[dir=rtl] #most-visited-settings {
273  left: 0;
274  right: auto;
275}
276
277#most-visited:not(.collapsed) #most-visited-settings.has-blacklist {
278  visibility: visible;
279}
280