OLD | NEW |
---|---|
(Empty) | |
1 /* Copyright 2013 The Chromium Authors. All rights reserved. | |
2 * Use of this source code is governed by a BSD-style license that can be | |
3 * found in the LICENSE file. */ | |
4 body { | |
5 background-attachment: fixed !important | |
6 } | |
7 | |
8 #most-visited { | |
9 -webkit-user-select: none; | |
10 margin-top: 60px; | |
11 text-align: -webkit-center; | |
12 } | |
13 | |
14 .custom-theme .mv-title, | |
15 .custom-theme #mv-msg { | |
16 color: #fff; | |
17 text-shadow: black 0 1px 3px; | |
18 } | |
19 | |
20 .custom-theme #mv-notice-links span { | |
21 color: #fff; | |
22 text-shadow: rgb(17, 85, 204) 0 1px 3px; | |
23 } | |
24 | |
25 #mv-tiles { | |
26 -webkit-transform: translate3d(0, 0, 0); | |
Dan Beam
2013/03/22 19:32:50
+ /* Use GPU compositing if available. */
jeremycho
2013/03/22 21:33:30
Done.
| |
27 -webkit-transition: width 200ms; | |
28 height: 120px; | |
29 overflow: hidden; | |
30 white-space: nowrap; | |
31 width: 304px; | |
32 } | |
33 | |
34 @media only screen and (min-width:666px) { | |
35 #mv-tiles { | |
36 width: 466px; | |
37 } | |
38 } | |
39 | |
40 @media only screen and (min-width:829px) { | |
41 #mv-tiles { | |
42 width: 629px; | |
43 } | |
44 } | |
45 | |
46 .mv-tile:first-child { | |
47 -webkit-margin-start: 0; | |
48 } | |
49 | |
50 .mv-tile { | |
51 -webkit-margin-start: 20px; | |
52 -webkit-transform: translate3d(0, 0, 0); | |
53 -webkit-transition-duration: 200ms; | |
54 -webkit-transition-property: -webkit-transform, margin, opacity, width; | |
55 display: inline-block; | |
56 height: 85px; | |
57 width: 140px; | |
58 } | |
59 | |
60 .mv-tile.mv-tile-hide { | |
61 -webkit-margin-end: -10px; | |
62 opacity: 0; | |
63 width: 10px; | |
64 } | |
65 | |
66 /* Class applied to tiles to trigger the blacklist animation. */ | |
67 .mv-tile.mv-blacklist { | |
68 -webkit-margin-start: 0; | |
69 -webkit-transform: scale(0.5); | |
70 opacity: 0; | |
71 width: 0; | |
72 } | |
73 | |
74 .mv-filler { | |
75 background: -webkit-linear-gradient(#f2f2f2, #e8e8e8); | |
76 border: 1px solid #e0e0e0; | |
77 border-radius: 3px; | |
78 box-shadow: inset 0 2px 3px rgba(0, 0, 0, .09); | |
Dan Beam
2013/03/22 19:32:50
^ indent is off
jeremycho
2013/03/22 21:33:30
Done.
| |
79 } | |
80 | |
81 .mv-page { | |
82 background: #fff; | |
83 border: 1px solid #c0c0c0; | |
84 border-radius: 2px; | |
85 box-shadow: 0 1px 0 rgba(255, 255, 255, .7); | |
86 cursor: pointer; | |
87 } | |
88 | |
89 .mv-page:hover { | |
90 border-color: #7f7f7f | |
91 } | |
92 | |
93 .mv-thumb { | |
94 background-size: 140px 85px; | |
95 height: 100%; | |
96 width: 100%; | |
97 } | |
98 | |
99 .mv-title { | |
100 bottom: -28px; | |
101 color: #777; | |
102 position: absolute; | |
103 width: 100%; | |
104 } | |
105 | |
106 .mv-x-hide .mv-x { | |
107 display: none; | |
108 } | |
109 | |
110 /* An X button to blacklist a tile or hide the notification. */ | |
111 .mv-x { | |
112 background: transparent url('images/close_bar.png'); | |
113 border: none; | |
114 cursor: default; | |
115 height: 16px; | |
116 width: 16px; | |
117 } | |
118 | |
119 .mv-x:hover { | |
120 background: transparent url('images/close_bar_hover.png'); | |
121 } | |
122 | |
123 .mv-x:active { | |
124 background: transparent url('images/close_bar_active.png'); | |
125 } | |
126 | |
127 .mv-page .mv-x { | |
128 -webkit-transition: opacity 500ms ease-in-out; | |
129 opacity: 0; | |
130 position: absolute; | |
131 right: 2px; | |
132 top: 2px; | |
133 } | |
134 | |
135 .mv-page:hover .mv-x { | |
136 -webkit-transition-delay: 500ms; | |
137 opacity: 1; | |
138 } | |
139 | |
140 .mv-domain { | |
141 bottom: 24px; | |
142 color: #777; | |
143 margin: 0 7px; | |
144 position: absolute; | |
145 } | |
146 | |
147 .mv-favicon { | |
148 bottom: -8px; | |
149 height: 16px; | |
150 left: 61px; | |
151 position: absolute; | |
152 width: 16px; | |
153 } | |
154 | |
155 /* The notification shown when a tile is blacklisted. */ | |
156 #mv-notice { | |
157 font-family: Arial; | |
Dan Beam
2013/03/22 19:32:50
^ why is this necessary? isn't the whole thing Ari
jeremycho
2013/03/22 21:33:30
No, it inherits another font. We may want to use
| |
158 font-size: 12px; | |
Dan Beam
2013/03/22 19:32:50
^ why isn't this a %?
jeremycho
2013/03/22 21:33:30
Done.
| |
159 font-weight: bold; | |
160 padding: 10px 0; | |
161 } | |
162 | |
163 #mv-notice span { | |
164 cursor: default; | |
165 } | |
166 | |
167 /* Links in the notification. */ | |
168 #mv-notice-links span { | |
169 -webkit-margin-start: 6px; | |
170 color: rgb(17, 85, 204); | |
171 cursor: pointer; | |
172 padding: 0 4px; | |
173 } | |
174 | |
175 #mv-notice-links span:hover { | |
176 text-decoration: underline; | |
177 } | |
178 | |
179 #mv-notice-links .mv-x { | |
180 -webkit-margin-start: 8px; | |
181 vertical-align: top; | |
182 } | |
183 | |
184 #mv-notice.mv-notice-hide { | |
185 visibility: hidden; | |
186 } | |
OLD | NEW |