OLD | NEW |
---|---|
1 /* Apps */ | 1 /* Apps */ |
2 | 2 |
3 #apps-content { | 3 #apps-content { |
4 position: relative; | 4 position: relative; |
5 max-width: 780px; /* (124 + margin * 2) * 6 */ | 5 max-width: 780px; /* (124 + margin * 2) * 6 */ |
6 } | 6 } |
7 | 7 |
8 html.apps-promo-visible #apps-content { | 8 html.apps-promo-visible #apps-content { |
9 max-width: 650px; /* (124 + margin * 2) * 5 */ | 9 max-width: 650px; /* (124 + margin * 2) * 5 */ |
10 } | 10 } |
(...skipping 89 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
100 | 100 |
101 .app_notification { | 101 .app_notification { |
102 color: gray; | 102 color: gray; |
103 display: block; | 103 display: block; |
104 -webkit-transition: color .15s linear; | 104 -webkit-transition: color .15s linear; |
105 } | 105 } |
106 .app_notification:hover { | 106 .app_notification:hover { |
107 color: Blue; | 107 color: Blue; |
108 } | 108 } |
109 | 109 |
110 .app-notification-close { | 110 #app-notification-close { |
111 height: 14px; | 111 height: 14px; |
112 position: absolute; | 112 position: absolute; |
113 right: 6px; | 113 right: 6px; |
114 top: 6px; | 114 top: 6px; |
115 width: 14px; | 115 width: 14px; |
116 } | 116 } |
117 | 117 |
118 #apps-content[launcher-animations=true] .app { | 118 #apps-content[launcher-animations=true] .app { |
119 -webkit-transition: top .2s, left .2s, right .2s, opacity .2s; | 119 -webkit-transition: top .2s, left .2s, right .2s, opacity .2s; |
120 } | 120 } |
(...skipping 95 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
216 padding: 2px 10px; | 216 padding: 2px 10px; |
217 white-space: nowrap; | 217 white-space: nowrap; |
218 } | 218 } |
219 | 219 |
220 .notification-bubble { | 220 .notification-bubble { |
221 background-color: White; | 221 background-color: White; |
222 border: 1px solid #B5B5B5; | 222 border: 1px solid #B5B5B5; |
223 font-family: Helvetica, Arial, sans-serif; | 223 font-family: Helvetica, Arial, sans-serif; |
224 font-size : 107%; | 224 font-size : 107%; |
225 min-height: 100px; | 225 min-height: 100px; |
226 min-width: 200px; | |
227 opacity: 0; | 226 opacity: 0; |
228 padding: 10px; | 227 padding: 10px; |
229 position: absolute; | 228 position: absolute; |
230 width: 200px; | 229 width: 200px; |
231 -webkit-border-radius: 5px; | 230 -webkit-border-radius: 5px; |
232 -webkit-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2); | 231 -webkit-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2); |
233 -webkit-transition: opacity 0.2s linear; | 232 -webkit-transition: opacity 0.2s linear; |
234 } | 233 } |
235 .notification-bubble:focus { | 234 .notification-bubble:focus { |
236 outline: none; | 235 outline: none; |
237 } | 236 } |
238 | 237 |
239 .notification-bubble-opened { | 238 .notification-bubble-opened { |
240 opacity: 1; | 239 opacity: 1; |
241 pointer-events: auto; | 240 pointer-events: auto; |
242 } | 241 } |
243 .notification-bubble-closed { | 242 .notification-bubble-closed { |
244 opacity: 0; | 243 opacity: 0; |
245 pointer-events: none; | 244 pointer-events: none; |
246 } | 245 } |
247 | 246 |
248 /* A content-less div with this setting, will create an arrow when coupled | 247 div#arrow-container { |
249 with the arrow_* styles below it. */ | 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. */ | |
250 div.arrow { | 255 div.arrow { |
251 border-style: solid; | 256 border-style: solid; |
252 border-width: 12px; | 257 border-width: 12px; |
253 height: 0px; | 258 height: 0px; |
Evan Stade
2011/08/11 17:08:30
0 (no px)
| |
254 width: 0px; | 259 width: 0px; |
260 } | |
261 div#arrow-contents { | |
262 border-color: transparent white transparent transparent; | |
263 z-index: 2; | |
Evan Stade
2011/08/11 17:08:30
alphabetical
| |
264 padding-left: 3px; | |
255 position: absolute; | 265 position: absolute; |
256 } | 266 } |
257 div.arrow-contents { | 267 div#arrow-shadow { |
258 border-color: transparent white transparent transparent; | 268 border-color: transparent #B5B5B5 transparent transparent; |
259 z-index: 2; | 269 opacity: 0.5; |
260 -webkit-transition: opacity 0.2s linear; | 270 padding-left: 1px; |
271 position: absolute; | |
261 } | 272 } |
262 div.arrow-shadow { | 273 div#arrow-border { |
263 border-color: transparent gray transparent transparent; | |
264 -webkit-transition: opacity 0.2s linear; | |
265 } | |
266 div.arrow-border { | |
267 border-color: transparent #B5B5B5 transparent transparent; | 274 border-color: transparent #B5B5B5 transparent transparent; |
268 z-index: 1; | 275 z-index: 1; |
269 -webkit-transition: opacity 0.2s linear; | 276 padding-left: 2px; |
277 position: absolute; | |
270 } | 278 } |
OLD | NEW |