OLD | NEW |
| (Empty) |
1 /* Apps */ | |
2 | |
3 #apps-content { | |
4 position: relative; | |
5 max-width: 780px; /* (124 + margin * 2) * 6 */ | |
6 } | |
7 | |
8 html.apps-promo-visible #apps-content { | |
9 max-width: 650px; /* (124 + margin * 2) * 5 */ | |
10 } | |
11 | |
12 #apps-maxiview { | |
13 overflow: hidden; | |
14 } | |
15 | |
16 /* | |
17 We don't need to do anything for html.apps-promo-visible because there is | |
18 enough extra space in the small grid layout. | |
19 */ | |
20 .small-layout #apps-content, | |
21 .small-layout html.apps-promo-visible #apps-content { | |
22 max-width: 520px; /* (124 + margin * 2) * 4 */ | |
23 } | |
24 | |
25 .app, | |
26 .app[new=installed] { | |
27 box-sizing: border-box; | |
28 -webkit-perspective: 400; | |
29 border-radius: 10px; | |
30 color: black; | |
31 margin: 5px 3px; | |
32 position: absolute; | |
33 height: 150px; | |
34 width: 124px; /* 920 / 7 - margin * 2 */ | |
35 visibility: hidden; | |
36 } | |
37 | |
38 .app a { | |
39 border-radius: 10px; | |
40 bottom: 0; | |
41 left: 0; | |
42 position: absolute; | |
43 right: 0; | |
44 top: 0; | |
45 } | |
46 | |
47 .app a { | |
48 -webkit-transition: background-color .5s; | |
49 background: rgba(255, 255, 255, 0) /* transparent white */ | |
50 no-repeat center 10px; | |
51 background-size: 96px 96px; | |
52 font-family: Helvetica, Arial, sans-serif; | |
53 font-size: 107%; | |
54 overflow: hidden; | |
55 padding: 111px 10px 10px; /* 10 + 96 + 5 */ | |
56 text-align: center; | |
57 text-decoration: none; | |
58 text-overflow: ellipsis; | |
59 white-space: nowrap; | |
60 } | |
61 | |
62 .app .app-settings { | |
63 background-color: transparent; | |
64 background-position: center center; | |
65 background-repeat: no-repeat; | |
66 border: 0; | |
67 height: 14px; | |
68 padding: 0; | |
69 position: absolute; | |
70 right: 5px; | |
71 top: 5px; | |
72 width: 14px; | |
73 } | |
74 | |
75 .app > .app-settings { | |
76 -webkit-transition: opacity .3s; | |
77 -webkit-transition-delay: 0; | |
78 background-image: url(chrome://theme/IDR_BALLOON_WRENCH); | |
79 opacity: 0; | |
80 } | |
81 | |
82 .app > .app-settings:hover { | |
83 -webkit-transition: none; | |
84 background-image: url(chrome://theme/IDR_BALLOON_WRENCH_H); | |
85 } | |
86 | |
87 .app:hover > .app-settings, | |
88 .app > .app-settings:focus { | |
89 -webkit-transition-delay: .5s; | |
90 opacity: .9; | |
91 } | |
92 | |
93 .app.dragging > .app-settings { | |
94 background-image: none; | |
95 } | |
96 | |
97 .app.dragging { | |
98 opacity: .7; | |
99 } | |
100 | |
101 .app_notification { | |
102 color: gray; | |
103 display: block; | |
104 -webkit-transition: color .15s linear; | |
105 } | |
106 .app_notification:hover { | |
107 color: Blue; | |
108 } | |
109 | |
110 #app-notification-close { | |
111 height: 14px; | |
112 position: absolute; | |
113 right: 6px; | |
114 top: 6px; | |
115 width: 14px; | |
116 } | |
117 | |
118 #apps-content[launcher-animations=true] .app { | |
119 -webkit-transition: top .2s, left .2s, right .2s, opacity .2s; | |
120 } | |
121 | |
122 #apps-content.visible .app { | |
123 visibility: visible; | |
124 } | |
125 | |
126 @-webkit-keyframes bounce { | |
127 0% { | |
128 -webkit-transform: scale(0, 0); | |
129 } | |
130 | |
131 60% { | |
132 -webkit-transform: scale(1.2, 1.2); | |
133 } | |
134 | |
135 100% { | |
136 -webkit-transform: scale(1, 1); | |
137 } | |
138 } | |
139 | |
140 html[install-animation-enabled=true] .app[new=new] { | |
141 opacity: 0; | |
142 } | |
143 | |
144 html[install-animation-enabled=true] .app[new=installed] { | |
145 -webkit-animation: bounce .5s ease-in-out; | |
146 -webkit-transition: opacity .5s; | |
147 } | |
148 | |
149 .app.web-store-entry > a { | |
150 background-image: url("chrome://theme/IDR_WEBSTORE_ICON"); | |
151 } | |
152 | |
153 menu > button.default { | |
154 font-weight: bold; | |
155 } | |
156 | |
157 #apps-promo { | |
158 display: none; | |
159 } | |
160 | |
161 html.apps-promo-visible #apps-promo { | |
162 height: 125px; | |
163 -webkit-padding-start: 125px; | |
164 display: table-cell; | |
165 vertical-align: text-bottom; | |
166 } | |
167 | |
168 #apps-promo-heading { | |
169 font-size: 115%; | |
170 font-weight: bold; | |
171 margin-bottom: 5px; | |
172 -webkit-margin-start: 3px; | |
173 } | |
174 | |
175 #apps-promo-hide { | |
176 -webkit-appearance: none; | |
177 -webkit-transition: opacity .15s; | |
178 background-color: transparent; | |
179 border: 0; | |
180 cursor: pointer; | |
181 font-family: inherit; | |
182 font-size: 90%; | |
183 text-decoration: underline; | |
184 margin-top: 2px; | |
185 } | |
186 | |
187 html[dir=rtl] #apps-promo-hide { | |
188 float: left; | |
189 } | |
190 | |
191 /* | |
192 We position the web store entry all by its lonesome in the top of the rightmost | |
193 column when there is at least one full row of apps. Note that this is similar, | |
194 but different than its position during promo (html.apps-promo-visible), so we | |
195 never set .loner while the promo is running. | |
196 */ | |
197 .app.web-store-entry.loner { | |
198 position: absolute; | |
199 left: 100%; | |
200 top: 0; | |
201 } | |
202 | |
203 html[dir=rtl] .app.web-store-entry.loner { | |
204 right: 100%; | |
205 } | |
206 | |
207 .g-button-basic { | |
208 display: inline-block; | |
209 border-width: 6px 10px 12px 6px; | |
210 -webkit-border-image: url('g-button-chocobo.png') 6 10 12 6; | |
211 font-size: 1.3em; | |
212 color: #fff !important; | |
213 text-decoration: none; | |
214 font-weight: bold; | |
215 text-align: center; | |
216 padding: 2px 10px; | |
217 white-space: nowrap; | |
218 } | |
219 | |
220 .notification-bubble { | |
221 background-color: White; | |
222 border: 1px solid #B5B5B5; | |
223 font-family: Helvetica, Arial, sans-serif; | |
224 font-size : 107%; | |
225 min-height: 100px; | |
226 opacity: 0; | |
227 padding: 10px; | |
228 position: absolute; | |
229 width: 200px; | |
230 -webkit-border-radius: 5px; | |
231 -webkit-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2); | |
232 -webkit-transition: opacity 0.2s linear; | |
233 } | |
234 .notification-bubble:focus { | |
235 outline: none; | |
236 } | |
237 | |
238 .notification-bubble-opened { | |
239 opacity: 1; | |
240 pointer-events: auto; | |
241 } | |
242 .notification-bubble-closed { | |
243 opacity: 0; | |
244 pointer-events: none; | |
245 } | |
246 | |
247 div#arrow-container { | |
248 position: absolute; | |
249 -webkit-transition: opacity 0.2s linear; | |
250 } | |
251 /* The following arrow class (div.arrow) creates a triangle when used in | |
252 conjunction with the next three div styles below it (arrow-contents, | |
253 shadow and border). The border-color property determines which direction | |
254 the arrow is facing. */ | |
255 div.arrow { | |
256 border-style: solid; | |
257 border-width: 12px; | |
258 height: 0; | |
259 width: 0; | |
260 } | |
261 div#arrow-contents { | |
262 border-color: transparent white transparent transparent; | |
263 padding-left: 3px; | |
264 position: absolute; | |
265 z-index: 2; | |
266 } | |
267 div#arrow-shadow { | |
268 border-color: transparent #B5B5B5 transparent transparent; | |
269 opacity: 0.5; | |
270 padding-left: 1px; | |
271 position: absolute; | |
272 } | |
273 div#arrow-border { | |
274 border-color: transparent #B5B5B5 transparent transparent; | |
275 padding-left: 2px; | |
276 position: absolute; | |
277 z-index: 1; | |
278 } | |
OLD | NEW |