| 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 60 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 71 background: rgb(242,242,242); | 71 background: rgb(242,242,242); |
| 72 border: 1px solid transparent; | 72 border: 1px solid transparent; |
| 73 border-radius: 2px; | 73 border-radius: 2px; |
| 74 height: calc(130px - 2px); | 74 height: calc(130px - 2px); |
| 75 line-height: 100%; | 75 line-height: 100%; |
| 76 margin: 0 8px; | 76 margin: 0 8px; |
| 77 width: calc(156px - 2px); | 77 width: calc(156px - 2px); |
| 78 } | 78 } |
| 79 | 79 |
| 80 .mv-tile { | 80 .mv-tile { |
| 81 -webkit-transition-duration: 200ms; | |
| 82 -webkit-transition-property: -webkit-transform, border, | |
| 83 box-shadow, margin, opacity, width; | |
| 84 cursor: pointer; | 81 cursor: pointer; |
| 82 transition-duration: 200ms; |
| 83 transition-property: transform, border, box-shadow, margin, opacity, width; |
| 85 } | 84 } |
| 86 | 85 |
| 87 .thumb-ntp .mv-tile:focus:not(:hover) { | 86 .thumb-ntp .mv-tile:focus:not(:hover) { |
| 88 -webkit-filter: brightness(75%); | 87 -webkit-filter: brightness(75%); |
| 89 box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 4px 8px 0 rgba(0,0,0,0.2); | 88 box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 4px 8px 0 rgba(0,0,0,0.2); |
| 90 } | 89 } |
| 91 | 90 |
| 92 .mv-tile.blacklisted { | 91 .mv-tile.blacklisted { |
| 93 -webkit-transform: scale(0, 0); | |
| 94 border: none !important; | 92 border: none !important; |
| 95 margin: 0; | 93 margin: 0; |
| 94 transform: scale(0, 0); |
| 96 width: 0; | 95 width: 0; |
| 97 } | 96 } |
| 98 | 97 |
| 99 .thumb-ntp .mv-tile:hover { | 98 .thumb-ntp .mv-tile:hover { |
| 100 box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 4px 8px 0 rgba(0,0,0,0.2); | 99 box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 4px 8px 0 rgba(0,0,0,0.2); |
| 101 } | 100 } |
| 102 | 101 |
| 103 .mv-tile.mv-blacklist { | 102 .mv-tile.mv-blacklist { |
| 104 opacity: 0; | 103 opacity: 0; |
| 105 } | 104 } |
| 106 | 105 |
| 107 .mv-tile.mv-blacklist { | 106 .mv-tile.mv-blacklist { |
| 108 -webkit-transform: scale(0, 0); | |
| 109 -webkit-transform-origin: 0 41px; | |
| 110 margin-left: 0; | 107 margin-left: 0; |
| 111 margin-right: 0; | 108 margin-right: 0; |
| 109 transform: scale(0, 0); |
| 110 transform-origin: 0 41px; |
| 112 width: 0; | 111 width: 0; |
| 113 } | 112 } |
| 114 | 113 |
| 115 .mv-title { | 114 .mv-title { |
| 116 border: none; | 115 border: none; |
| 117 overflow: hidden; | 116 overflow: hidden; |
| 118 position: absolute; | 117 position: absolute; |
| 119 text-overflow: clip; | 118 text-overflow: clip; |
| 120 } | 119 } |
| 121 | 120 |
| (...skipping 79 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 201 border: 8px solid #f2f2f2; | 200 border: 8px solid #f2f2f2; |
| 202 border-radius: 50%; | 201 border-radius: 50%; |
| 203 content: ''; | 202 content: ''; |
| 204 display: block; | 203 display: block; |
| 205 height: 0; | 204 height: 0; |
| 206 margin: 39px 66px; | 205 margin: 39px 66px; |
| 207 width: 0; | 206 width: 0; |
| 208 } | 207 } |
| 209 | 208 |
| 210 .mv-x { | 209 .mv-x { |
| 211 -webkit-transition: opacity 150ms; | |
| 212 border: none; | 210 border: none; |
| 213 cursor: pointer; | 211 cursor: pointer; |
| 214 opacity: 0; | 212 opacity: 0; |
| 215 position: absolute; | 213 position: absolute; |
| 214 transition: opacity 150ms; |
| 216 } | 215 } |
| 217 | 216 |
| 218 .thumb-ntp .mv-x { | 217 .thumb-ntp .mv-x { |
| 219 background: linear-gradient(to left, rgb(242,242,242) 60%, transparent); | 218 background: linear-gradient(to left, rgb(242,242,242) 60%, transparent); |
| 220 height: 30px; | 219 height: 30px; |
| 221 right: 0; | 220 right: 0; |
| 222 width: 40px; | 221 width: 40px; |
| 223 } | 222 } |
| 224 | 223 |
| 225 /* We use ::after without content to provide the masked X element. The "bottom" | 224 /* We use ::after without content to provide the masked X element. The "bottom" |
| (...skipping 27 matching lines...) Expand all Loading... |
| 253 | 252 |
| 254 .thumb-ntp .mv-x:hover::after { | 253 .thumb-ntp .mv-x:hover::after { |
| 255 background-color: rgb(90,90,90); | 254 background-color: rgb(90,90,90); |
| 256 } | 255 } |
| 257 | 256 |
| 258 .thumb-ntp .mv-x:active::after { | 257 .thumb-ntp .mv-x:active::after { |
| 259 background-color: rgb(66,133,244); | 258 background-color: rgb(66,133,244); |
| 260 } | 259 } |
| 261 | 260 |
| 262 .mv-tile:hover .mv-x { | 261 .mv-tile:hover .mv-x { |
| 263 -webkit-transition-delay: 500ms; | |
| 264 opacity: 1; | 262 opacity: 1; |
| 263 transition-delay: 500ms; |
| 265 } | 264 } |
| 266 | 265 |
| 267 .mv-x:hover { | 266 .mv-x:hover { |
| 268 -webkit-transition: none; | 267 transition: none; |
| 269 } | 268 } |
| 270 | 269 |
| 271 .mv-favicon { | 270 .mv-favicon { |
| 272 background-size: 16px; | 271 background-size: 16px; |
| 273 height: 16px; | 272 height: 16px; |
| 274 left: 7px; | 273 left: 7px; |
| 275 margin: 0; | 274 margin: 0; |
| 276 pointer-events: none; | 275 pointer-events: none; |
| 277 position: absolute; | 276 position: absolute; |
| 278 top: 7px; | 277 top: 7px; |
| (...skipping 14 matching lines...) Expand all Loading... |
| 293 } | 292 } |
| 294 | 293 |
| 295 .mv-favicon img { | 294 .mv-favicon img { |
| 296 height: 100%; | 295 height: 100%; |
| 297 width: 100%; | 296 width: 100%; |
| 298 } | 297 } |
| 299 | 298 |
| 300 .mv-favicon.failed-favicon img { | 299 .mv-favicon.failed-favicon img { |
| 301 display: none; | 300 display: none; |
| 302 } | 301 } |
| OLD | NEW |