Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(16)

Side by Side Diff: chrome/browser/resources/ntp/apps.css

Issue 7623010: Polish the new tab notification code a bit, as per request in last review (style changes). (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src/
Patch Set: Created 9 years, 4 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
« no previous file with comments | « chrome/browser/resources/new_tab.html ('k') | chrome/browser/resources/ntp/apps.js » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
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
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
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 }
OLDNEW
« no previous file with comments | « chrome/browser/resources/new_tab.html ('k') | chrome/browser/resources/ntp/apps.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698