| OLD | NEW |
| 1 /* Copyright 2015 The Chromium Authors. All rights reserved. | 1 /* Copyright 2015 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 | 4 |
| 5 body { | 5 body { |
| 6 -webkit-user-select: none; | 6 -webkit-user-select: none; |
| 7 background: none transparent; | 7 background: none transparent; |
| 8 color: #323232; | 8 color: #323232; |
| 9 margin: 0; | 9 margin: 0; |
| 10 overflow: hidden; | 10 overflow: hidden; |
| (...skipping 52 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 63 white-space: nowrap; | 63 white-space: nowrap; |
| 64 width: calc(156px - 2px); | 64 width: calc(156px - 2px); |
| 65 } | 65 } |
| 66 | 66 |
| 67 .mv-tile.hidden, | 67 .mv-tile.hidden, |
| 68 .mv-empty-tile.hidden { | 68 .mv-empty-tile.hidden { |
| 69 display: none; | 69 display: none; |
| 70 } | 70 } |
| 71 | 71 |
| 72 .mv-tile { | 72 .mv-tile { |
| 73 -webkit-transition-duration: 200ms; | |
| 74 -webkit-transition-property: transform, border, | |
| 75 box-shadow, margin, opacity, width; | |
| 76 cursor: pointer; | 73 cursor: pointer; |
| 74 transition-duration: 200ms; |
| 75 transition-property: transform, border, box-shadow, margin, opacity, width; |
| 77 } | 76 } |
| 78 | 77 |
| 79 .mv-tile:focus:not(:hover) { | 78 .mv-tile:focus:not(:hover) { |
| 80 -webkit-filter: brightness(75%); | 79 -webkit-filter: brightness(75%); |
| 81 box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 4px 8px 0 rgba(0,0,0,0.2); | 80 box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 4px 8px 0 rgba(0,0,0,0.2); |
| 82 } | 81 } |
| 83 | 82 |
| 84 .mv-tile.blacklisted { | 83 .mv-tile.blacklisted { |
| 85 border: none !important; | 84 border: none !important; |
| 86 margin: 0; | 85 margin: 0; |
| (...skipping 85 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 172 border: 8px solid #f2f2f2; | 171 border: 8px solid #f2f2f2; |
| 173 border-radius: 50%; | 172 border-radius: 50%; |
| 174 content: ''; | 173 content: ''; |
| 175 display: block; | 174 display: block; |
| 176 height: 0; | 175 height: 0; |
| 177 margin: 39px 66px; | 176 margin: 39px 66px; |
| 178 width: 0; | 177 width: 0; |
| 179 } | 178 } |
| 180 | 179 |
| 181 .mv-x { | 180 .mv-x { |
| 182 -webkit-transition: opacity 150ms; | |
| 183 background: linear-gradient(to left, rgb(242,242,242) 60%, transparent); | 181 background: linear-gradient(to left, rgb(242,242,242) 60%, transparent); |
| 184 border: none; | 182 border: none; |
| 185 cursor: pointer; | 183 cursor: pointer; |
| 186 height: 30px; | 184 height: 30px; |
| 187 opacity: 0; | 185 opacity: 0; |
| 188 position: absolute; | 186 position: absolute; |
| 189 right: 0; | 187 right: 0; |
| 188 transition: opacity 150ms; |
| 190 width: 40px; | 189 width: 40px; |
| 191 } | 190 } |
| 192 | 191 |
| 193 /* We use ::after without content to provide the masked X element. The "bottom" | 192 /* We use ::after without content to provide the masked X element. The "bottom" |
| 194 * div is actually just the gradient. */ | 193 * div is actually just the gradient. */ |
| 195 .mv-x::after { | 194 .mv-x::after { |
| 196 -webkit-mask-image: -webkit-image-set( | 195 -webkit-mask-image: -webkit-image-set( |
| 197 url(chrome-search://local-ntp/images/close_3_mask.png) 1x, | 196 url(chrome-search://local-ntp/images/close_3_mask.png) 1x, |
| 198 url(chrome-search://local-ntp/images/close_3_mask.png@2x) 2x); | 197 url(chrome-search://local-ntp/images/close_3_mask.png@2x) 2x); |
| 199 -webkit-mask-position: 12px 10px; | 198 -webkit-mask-position: 12px 10px; |
| (...skipping 21 matching lines...) Expand all Loading... |
| 221 | 220 |
| 222 .mv-x:hover::after { | 221 .mv-x:hover::after { |
| 223 background-color: rgb(90,90,90); | 222 background-color: rgb(90,90,90); |
| 224 } | 223 } |
| 225 | 224 |
| 226 .mv-x:active::after { | 225 .mv-x:active::after { |
| 227 background-color: rgb(66,133,244); | 226 background-color: rgb(66,133,244); |
| 228 } | 227 } |
| 229 | 228 |
| 230 .mv-tile:hover .mv-x { | 229 .mv-tile:hover .mv-x { |
| 231 -webkit-transition-delay: 500ms; | |
| 232 opacity: 1; | 230 opacity: 1; |
| 231 transition-delay: 500ms; |
| 233 } | 232 } |
| 234 | 233 |
| 235 .mv-x:hover { | 234 .mv-x:hover { |
| 236 -webkit-transition: none; | 235 transition: none; |
| 237 } | 236 } |
| 238 | 237 |
| 239 .mv-favicon { | 238 .mv-favicon { |
| 240 background-size: 16px; | 239 background-size: 16px; |
| 241 height: 16px; | 240 height: 16px; |
| 242 left: 7px; | 241 left: 7px; |
| 243 margin: 0; | 242 margin: 0; |
| 244 pointer-events: none; | 243 pointer-events: none; |
| 245 position: absolute; | 244 position: absolute; |
| 246 top: 7px; | 245 top: 7px; |
| (...skipping 14 matching lines...) Expand all Loading... |
| 261 } | 260 } |
| 262 | 261 |
| 263 .mv-favicon img { | 262 .mv-favicon img { |
| 264 height: 100%; | 263 height: 100%; |
| 265 width: 100%; | 264 width: 100%; |
| 266 } | 265 } |
| 267 | 266 |
| 268 .mv-favicon.failed-favicon img { | 267 .mv-favicon.failed-favicon img { |
| 269 display: none; | 268 display: none; |
| 270 } | 269 } |
| OLD | NEW |