OLD | NEW |
| (Empty) |
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 | |
167 html[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 | |
272 html[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 } | |
OLD | NEW |