| OLD | NEW |
| 1 /* Copyright (c) 2011 The Chromium Authors. All rights reserved. | 1 /* Copyright (c) 2012 The Chromium Authors. All rights reserved. |
| 2 * Use of this source code is governed by a BSD-style license that can be | 2 * Use of this source code is governed by a BSD-style license that can be |
| 3 * found in the LICENSE file. | 3 * found in the LICENSE file. */ |
| 4 */ | |
| 5 | 4 |
| 6 .tile-page { | 5 .tile-page { |
| 6 -webkit-box-orient: vertical; |
| 7 display: -webkit-box; | 7 display: -webkit-box; |
| 8 height: 100%; | 8 height: 100%; |
| 9 position: relative; | 9 position: relative; |
| 10 width: 100%; | 10 width: 100%; |
| 11 -webkit-box-orient: vertical; | |
| 12 } | 11 } |
| 13 | 12 |
| 14 .tile-page-scrollbar { | 13 .tile-page-scrollbar { |
| 14 -webkit-box-sizing: border-box; |
| 15 margin: 0 4px; | 15 margin: 0 4px; |
| 16 pointer-events: none; | 16 pointer-events: none; |
| 17 position: absolute; | 17 position: absolute; |
| 18 right: 0; | 18 right: 0; |
| 19 width: 5px; | 19 width: 5px; |
| 20 z-index: 5; | 20 z-index: 5; |
| 21 -webkit-box-sizing: border-box; | |
| 22 } | 21 } |
| 23 | 22 |
| 24 .tile-page-content { | 23 .tile-page-content { |
| 25 overflow-y: scroll; | 24 -webkit-box-flex: 1; |
| 26 /* This value is mirrored in TilePage.updateTopMargin_ */ | 25 /* Don't apply clip mask to padding. */ |
| 27 padding-top: 60px; | 26 -webkit-mask-clip: content-box; |
| 28 position: relative; | |
| 29 text-align: center; | |
| 30 width: 100%; | |
| 31 /* TODO(estade): this mask is disabled for technical reasons. It negatively | 27 /* TODO(estade): this mask is disabled for technical reasons. It negatively |
| 32 * impacts performance of page switching, also it causes problems with Mac | 28 * impacts performance of page switching, also it causes problems with Mac |
| 33 * text: http://crbug.com/86955 | 29 * text: http://crbug.com/86955 |
| 34 -webkit-mask-image: -webkit-linear-gradient(bottom, transparent, black 30px); | 30 -webkit-mask-image: -webkit-linear-gradient(bottom, transparent, black 30px); |
| 35 */ | 31 */ |
| 36 /* The following four properties are necessary so that the mask won't clip | 32 /* The following four properties are necessary so that the mask won't clip |
| 37 * the scrollbar. */ | 33 * the scrollbar. */ |
| 38 box-sizing: border-box; | 34 box-sizing: border-box; |
| 35 overflow-y: scroll; |
| 39 /* Scrollbar width(13px) + balance right padding. */ | 36 /* Scrollbar width(13px) + balance right padding. */ |
| 40 padding-left: 93px; | 37 padding-left: 93px; |
| 41 padding-right: 80px; | 38 padding-right: 80px; |
| 42 -webkit-box-flex: 1; | 39 /* This value is mirrored in TilePage.updateTopMargin_ */ |
| 43 /* Don't apply clip mask to padding. */ | 40 padding-top: 60px; |
| 44 -webkit-mask-clip: content-box; | 41 position: relative; |
| 42 text-align: center; |
| 43 width: 100%; |
| 45 } | 44 } |
| 46 | 45 |
| 47 .tile-grid { | 46 .tile-grid { |
| 48 position: relative; | 47 position: relative; |
| 49 width: 100%; | 48 width: 100%; |
| 50 } | 49 } |
| 51 | 50 |
| 52 .tile { | 51 .tile { |
| 53 display: inline-block; | |
| 54 position: absolute; | |
| 55 -webkit-print-color-adjust: exact; | 52 -webkit-print-color-adjust: exact; |
| 56 /* Don't offer the context menu on long-press. */ | 53 /* Don't offer the context menu on long-press. */ |
| 57 -webkit-touch-callout: none; | 54 -webkit-touch-callout: none; |
| 58 -webkit-user-drag: element; | 55 -webkit-user-drag: element; |
| 56 display: inline-block; |
| 57 position: absolute; |
| 59 } | 58 } |
| 60 | 59 |
| 61 /* I don't know why this is necessary. -webkit-user-drag: element on .tile | 60 /* I don't know why this is necessary. -webkit-user-drag: element on .tile |
| 62 * should be enough. If we don't do this, we get 2 drag representations for | 61 * should be enough. If we don't do this, we get 2 drag representations for |
| 63 * the image. */ | 62 * the image. */ |
| 64 .tile img { | 63 .tile img { |
| 65 -webkit-user-drag: none; | 64 -webkit-user-drag: none; |
| 66 } | 65 } |
| 67 | 66 |
| 68 .doppleganger { | 67 .doppleganger { |
| 69 left: 0 !important; | 68 left: 0 !important; |
| 70 right: 0 !important; | 69 right: 0 !important; |
| 71 top: 0 !important; | 70 top: 0 !important; |
| 72 } | 71 } |
| 73 | 72 |
| 74 .tile.dragging { | 73 .tile.dragging { |
| 75 opacity: 0; | 74 opacity: 0; |
| 76 } | 75 } |
| 77 | 76 |
| 78 .tile.drag-representation { | 77 .tile.drag-representation { |
| 78 -webkit-transition: opacity 200ms; |
| 79 pointer-events: none; | 79 pointer-events: none; |
| 80 position: fixed; | 80 position: fixed; |
| 81 z-index: 3; | 81 z-index: 3; |
| 82 -webkit-transition: opacity 200ms; | |
| 83 } | 82 } |
| 84 | 83 |
| 85 .tile.drag-representation.placing > * { | 84 .tile.drag-representation.placing > * { |
| 86 -webkit-transition: -webkit-transform 200ms; | 85 -webkit-transition: -webkit-transform 200ms; |
| 87 } | 86 } |
| 88 | 87 |
| 89 /* When a drag finishes while we're not showing the page where the tile | 88 /* When a drag finishes while we're not showing the page where the tile |
| 90 * belongs, the tile shrinks to a dot. */ | 89 * belongs, the tile shrinks to a dot. */ |
| 91 .tile.drag-representation.dropped-on-other-page > * { | 90 .tile.drag-representation.dropped-on-other-page > * { |
| 92 -webkit-transform: scale(0) rotate(0); | 91 -webkit-transform: scale(0) rotate(0); |
| (...skipping 34 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 127 .tile > .new-tile-contents { | 126 .tile > .new-tile-contents { |
| 128 -webkit-animation: bounce 500ms ease-in-out; | 127 -webkit-animation: bounce 500ms ease-in-out; |
| 129 } | 128 } |
| 130 | 129 |
| 131 @-webkit-keyframes blipout { | 130 @-webkit-keyframes blipout { |
| 132 0% { | 131 0% { |
| 133 -webkit-transform: scale(1, 1); | 132 -webkit-transform: scale(1, 1); |
| 134 } | 133 } |
| 135 | 134 |
| 136 60% { | 135 60% { |
| 137 opacity: 1; | |
| 138 -webkit-animation-timing-function: ease-in; | 136 -webkit-animation-timing-function: ease-in; |
| 139 -webkit-transform: scale(1.3, 0.02); | 137 -webkit-transform: scale(1.3, 0.02); |
| 138 opacity: 1; |
| 140 } | 139 } |
| 141 | 140 |
| 142 90% { | 141 90% { |
| 143 opacity: 0.7; | |
| 144 -webkit-animation-timing-function: default; | 142 -webkit-animation-timing-function: default; |
| 145 -webkit-transform: scale(0.3, 0.02); | 143 -webkit-transform: scale(0.3, 0.02); |
| 144 opacity: 0.7; |
| 146 } | 145 } |
| 147 | 146 |
| 148 100% { | 147 100% { |
| 149 opacity: 0; | |
| 150 -webkit-animation-timing-function: linear; | 148 -webkit-animation-timing-function: linear; |
| 151 -webkit-transform: scale(0.3, 0.02); | 149 -webkit-transform: scale(0.3, 0.02); |
| 150 opacity: 0; |
| 152 } | 151 } |
| 153 } | 152 } |
| 154 | 153 |
| 155 .tile > .removing-tile-contents { | 154 .tile > .removing-tile-contents { |
| 155 -webkit-animation: blipout 300ms; |
| 156 pointer-events: none; | 156 pointer-events: none; |
| 157 -webkit-animation: blipout 300ms; | |
| 158 } | 157 } |
| 159 | 158 |
| 160 .tile-page:not(.selected-card) * { | 159 .tile-page:not(.selected-card) * { |
| 161 -webkit-transition: none !important; | 160 -webkit-transition: none !important; |
| 162 } | 161 } |
| 163 | 162 |
| 164 /** Scrollbars ****************************************************************/ | 163 /** Scrollbars ****************************************************************/ |
| 165 | 164 |
| 166 .tile-page-content::-webkit-scrollbar { | 165 .tile-page-content::-webkit-scrollbar { |
| 167 width: 13px; | 166 width: 13px; |
| 168 } | 167 } |
| 169 | 168 |
| 170 .tile-page-content::-webkit-scrollbar-button { | 169 .tile-page-content::-webkit-scrollbar-button { |
| 171 display: none; | 170 display: none; |
| 172 } | 171 } |
| OLD | NEW |