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

Unified Diff: chrome/browser/resources/ntp4/new_tab.css

Issue 8786010: NTP4: Dragging app over trash should be more apparent. (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src
Patch Set: rebasing estade's one line color change Created 9 years 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 side-by-side diff with in-line comments
Download patch
« no previous file with comments | « chrome/browser/resources/ntp4/images/trash.png ('k') | chrome/browser/resources/ntp4/new_tab.html » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: chrome/browser/resources/ntp4/new_tab.css
diff --git a/chrome/browser/resources/ntp4/new_tab.css b/chrome/browser/resources/ntp4/new_tab.css
index f687775b0b87e0db84c3970d9fbd868530c3b021..aa8f23463e794b145904a8c1f3096053e237bd99 100644
--- a/chrome/browser/resources/ntp4/new_tab.css
+++ b/chrome/browser/resources/ntp4/new_tab.css
@@ -240,36 +240,90 @@ html[dir='rtl'] .login-status-icon {
/* Trash. *********************************************************************/
#trash {
+ -webkit-transition: top 200ms, opacity 0;
+ -webkit-transition-delay: 0, 200ms;
color: #7F7F7F;
height: 100%;
position: absolute;
opacity: 0;
right: 0;
top: 50px;
- -webkit-transition: top 200ms, opacity 0;
- -webkit-transition-delay: 0, 200ms;
+}
+
+html[dir='rtl'] #trash {
+ left: 0;
+ right: auto;
}
#footer.showing-trash-mode #trash {
- opacity: 1;
- top: 0;
-webkit-transition-delay: 0, 0;
+ -webkit-transition-duration: 0, 200ms;
+ opacity: 0.75;
+ top: 0;
+}
+
+#footer.showing-trash-mode #trash.drag-target {
+ opacity: 1;
}
#trash > span {
- background-image: url('images/trash.png');
- background-position: 7px;
- background-repeat: no-repeat;
+ display: inline-block;
+}
+
+#trash > span:not([class]) {
+ -webkit-padding-end: 7px;
+ -webkit-padding-start: 30px;
border: 1px dashed #7f7f7f;
border-radius: 4px;
- display: inline-block;
font-size: 84%;
padding-bottom: 9px;
padding-top: 10px;
position: relative;
top: 7px;
- -webkit-padding-end: 7px;
- -webkit-padding-start: 30px;
+}
+
+#trash > .can,
+#trash > .lid {
+ background: url('images/trash.png') 0 0 no-repeat;
+ position: absolute;
+}
+
+#trash > .lid {
+ -webkit-transition: -webkit-transform 200ms;
+ -webkit-transform-origin: -7% 100%;
+ height: 6px;
+ left: 10px;
+ top: 18px;
+ width: 14px;
+}
+
+html[dir='rtl'] #trash > .lid {
+ -webkit-transform-origin: 107% 100%;
+ left: auto;
+ /* NOTE: Intentionally different than LTR value. */
+ right: 9px;
+}
+
+#trash > .can {
+ background-position: -1px -4px;
+ border-radius: 0 0 2px 2px;
+ height: 12px;
+ left: 11px;
+ top: 22px;
+ width: 11px;
+}
+
+html[dir='rtl'] #trash > .can {
+ left: auto;
+ right: 11px;
+}
+
+#footer.showing-trash-mode #trash.drag-target .lid {
+ -webkit-transform: rotate(-45deg);
+}
+
+html[dir='rtl'] #footer.showing-trash-mode #trash.drag-target .lid {
+ -webkit-transform: rotate(45deg);
}
/* Page switcher buttons. *****************************************************/
« no previous file with comments | « chrome/browser/resources/ntp4/images/trash.png ('k') | chrome/browser/resources/ntp4/new_tab.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698