Index: chrome/browser/resources/new_new_tab.css |
=================================================================== |
--- chrome/browser/resources/new_new_tab.css (revision 20623) |
+++ chrome/browser/resources/new_new_tab.css (working copy) |
@@ -12,7 +12,7 @@ |
position: relative; |
margin: 0 auto; |
width: 940px; |
- -webkit-transition: width .5s; |
+ -webkit-transition: width .15s; |
} |
html[dir='rtl'] #main { |
@@ -34,66 +34,32 @@ |
margin-bottom: 34px; |
height: 372px; |
-webkit-user-select: none; |
- -webkit-transition: height .5s, opacity .5s; |
+ -webkit-transition: height .15s, opacity .15s; |
} |
-@-webkit-keyframes 'thumbnail-enter' { |
- /* 2.5s */ |
- 0%, 20% { |
- -webkit-box-shadow: 0px 2px 2px hsla(0, 0%, 0%, .5); |
- -webkit-border-radius: 4px; |
- } |
- |
- 100% { |
- -webkit-border-top-left-radius: 0; |
- -webkit-border-top-right-radius: 0; |
- -webkit-box-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0); |
- } |
-} |
- |
-@-webkit-keyframes 'edit-mode-border-enter' { |
- /* 2.5s */ |
- 0%, 20% { |
- background-color: hsla(213, 66%, 57%, 0); |
- -webkit-box-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0); |
- } |
- |
- 100% { |
- background-color: hsla(213, 66%, 57%, 1); |
- -webkit-box-shadow: 0px 2px 2px hsla(0, 0%, 0%, .5); |
- } |
-} |
- |
-@-webkit-keyframes 'edit-bar-enter' { |
- /* 2.5s */ |
- 0%, 20% { |
- opacity: 0; |
- pointer-events: none; |
- } |
- |
- 100% { |
- opacity: 1; |
- pointer-events: inherit; |
- } |
-} |
- |
.thumbnail-container { |
position: absolute; |
- -webkit-transition: top .5s, left .5s; |
+ -webkit-transition: top .15s, left .15s; |
color: black; |
text-decoration: none; |
- -webkit-transition: left .5s, top .5s; |
+ -webkit-transition: left .15s, top .15s; |
} |
.list > .thumbnail-container { |
- -webkit-transition: left .5s, top .5s, width .5s; |
+ -webkit-transition: left .15s, top .15s, width .15s; |
+ overflow: hidden; |
} |
+/* hide outline in thumbnail view */ |
+:not(.list) > .thumbnail-container:focus { |
+ outline: none; |
+} |
+ |
.thumbnail, |
.thumbnail-container > .title { |
width: 212px; /* natural size is 196 */ |
height: 132px; /* 136 */ |
- -webkit-transition: width .5s, height .5s; |
+ -webkit-transition: width .15s, height .15s; |
} |
.thumbnail-wrapper { |
@@ -102,7 +68,8 @@ |
background: no-repeat 4px 4px; |
background-color: white; |
-webkit-border-radius: 5px; |
- -webkit-transition: -webkit-background-size .5s; |
+ -webkit-transition: -webkit-background-size .15s; |
+ position: relative; |
} |
.filler * { |
@@ -128,23 +95,22 @@ |
} |
.edit-bar { |
- opacity: 0; |
- pointer-events: none; |
display: -webkit-box; |
-webkit-box-orient: horizontal; |
-webkit-box-align: stretch; |
padding: 3px; |
padding-bottom: 0; |
height: 17px; /* 23 - 2 * 3 */ |
- -webkit-transition: opacity .5s; |
cursor: move; |
font-size: 100%; |
line-height: 17px; |
- background-image: -webkit-gradient(linear, left top, left bottom, |
- from(hsl(213, 87%, 67%)), |
- to(hsl(213, 66%, 57%))); |
+ background: hsl(213, 54%, 95%); |
-webkit-border-top-left-radius: 4px; |
-webkit-border-top-right-radius: 4px; |
+ position: relative; |
+ margin-top: 21px; |
+ margin-bottom: -21px; |
+ -webkit-transition: margin .15s, background .15s; |
} |
.edit-bar > * { |
@@ -152,10 +118,17 @@ |
position: relative; |
} |
+.thumbnail-container:focus .edit-bar, |
.thumbnail-container:hover .edit-bar { |
- -webkit-animation: 'edit-bar-enter' 2.5s; |
- opacity: 1; |
- pointer-events: inherit; |
+ margin-top: 0; |
+ margin-bottom: 0; |
+ -webkit-transition-delay: .5s, 0s; |
+ |
+ /* We need background-color as well to get the fade out animation correct */ |
+ background-color: hsl(213, 66%, 57%); |
+ background-image: -webkit-gradient(linear, left top, left bottom, |
+ from(hsl(213, 87%, 67%)), |
+ to(hsl(213, 66%, 57%))); |
} |
.edit-bar > .spacer { |
@@ -214,16 +187,20 @@ |
color: hsl(213, 90%, 24%); |
} |
+.thumbnail-container { |
+ text-decoration: none; |
+} |
+ |
.thumbnail-container > .title { |
line-height: 16px; |
height: 16px; |
margin: 0; |
margin-top: 4px; |
font-size: 100%; |
- font-weight:normal; |
+ font-weight: normal; |
padding: 0 3px; |
opacity: 1; |
- -webkit-transition: opacity .5s, width .5s; |
+ -webkit-transition: opacity .15s, width .15s; |
color: black; |
} |
@@ -248,13 +225,13 @@ |
} |
.thumbnail { |
- border: 3px solid hsla(213, 63%, 93%, 1); |
+ border: 3px solid hsl(213, 63%, 93%); |
padding: 1px; |
-webkit-border-radius: 5px; |
display: block; |
-webkit-box-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0); |
- -webkit-transition: width .5s, height .5s, border-color .5s, |
- -webkit-border-radius .5s, -webkit-box-shadow .5s; |
+ -webkit-transition: width .15s, height .15s, border-color .15s, |
+ -webkit-border-radius .15s, -webkit-box-shadow .15s; |
} |
.edit-mode-border { |
@@ -262,9 +239,9 @@ |
background-color: hsla(213, 54%, 95%, 0); |
} |
+.thumbnail-container:focus .thumbnail, |
.thumbnail-container:hover .thumbnail { |
- -webkit-animation: 'thumbnail-enter' 2.5s; |
- border-color: hsla(213, 66%, 57%, 1); |
+ border-color: hsl(213, 66%, 57%); |
-webkit-box-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0); |
-webkit-border-top-left-radius: 0; |
-webkit-border-top-right-radius: 0; |
@@ -274,11 +251,14 @@ |
color-stop(0.85, hsla(0, 0%, 47%, 0)), |
to(hsla(0, 0%, 47%, 0.2)) |
); |
+ |
+ /* delay border radius transition as much as the edit bar slide delay */ |
+ -webkit-transition-delay: 0, 0, 0, .5s, 0; |
} |
+.thumbnail-container:focus > .edit-mode-border, |
.thumbnail-container:hover > .edit-mode-border { |
- -webkit-animation: 'edit-mode-border-enter' 2.5s; |
- background-color: hsla(213, 66%, 57%, 1); |
+ background-color: hsl(213, 66%, 57%); |
-webkit-box-shadow: 0px 2px 2px hsla(0, 0%, 0%, .5); |
} |
@@ -310,7 +290,7 @@ |
} |
.fade-in { |
- -webkit-animation: 'fade-in' 2.5s; |
+ -webkit-animation: 'fade-in' .15s; |
} |
/* Notification */ |
@@ -359,11 +339,10 @@ |
} |
.list > .thumbnail-container > .title { |
- font-size: 140%; |
+ font-size: 160%; |
line-height: 40px; |
height: 40px; |
color: hsl(213, 27%, 68%); |
- text-decoration: underline; |
width: 100%; |
} |
@@ -448,7 +427,7 @@ |
width: 157px; |
left: 0; |
white-space: nowrap; |
- z-index: 1; |
+ z-index: 2; |
padding: 1px; |
cursor: default; |
} |
@@ -488,7 +467,7 @@ |
} |
#recent-activities { |
- -webkit-transition: width .5s, opacity .5s; |
+ -webkit-transition: width .15s, opacity .15s; |
} |
.section { |
@@ -518,17 +497,19 @@ |
padding: 0; |
vertical-align: top; |
-webkit-margin-start: 5px; |
+ /* Do not show focus outline */ |
+ outline: none; |
} |
#lower-sections { |
position: relative; |
overflow: hidden; |
- -webkit-transition: height .5s, width .5s, opacity .5s; |
+ -webkit-transition: height .15s, width .15s, opacity .15s; |
white-space: nowrap; |
} |
#lower-sections > .section { |
- -webkit-transition: width .5s, opacity .5s, left .5s; |
+ -webkit-transition: width .15s, opacity .15s, left .15s; |
-webkit-box-sizing: border-box; |
width: 460px; /* Set default size so we don't have to do a js layout at |
load */ |
@@ -536,7 +517,7 @@ |
#lower-sections .spacer { |
width: 20px; |
- -webkit-transition: width .5s; |
+ -webkit-transition: width .15s; |
display: inline-block; |
} |
@@ -625,7 +606,7 @@ |
} |
#option-menu > [selected] { |
- background-color: hsla(213, 66%, 57%, 1); |
+ background-color: hsl(213, 66%, 57%); |
color: white; |
} |