| 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 76 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 87 .icon-ntp .mv-tile, | 87 .icon-ntp .mv-tile, |
| 88 .icon-ntp .mv-empty-tile { | 88 .icon-ntp .mv-empty-tile { |
| 89 border: none; | 89 border: none; |
| 90 border-radius: 2px; | 90 border-radius: 2px; |
| 91 height: calc(102px + 18px - 12px); | 91 height: calc(102px + 18px - 12px); |
| 92 margin: 0 12px 4px 12px; | 92 margin: 0 12px 4px 12px; |
| 93 width: calc(48px + 2 * 18px); | 93 width: calc(48px + 2 * 18px); |
| 94 } | 94 } |
| 95 | 95 |
| 96 .mv-tile { | 96 .mv-tile { |
| 97 -webkit-transition-duration: 200ms; | |
| 98 -webkit-transition-property: -webkit-transform, border, | |
| 99 box-shadow, margin, opacity, width; | |
| 100 cursor: pointer; | 97 cursor: pointer; |
| 98 transition-duration: 200ms; |
| 99 transition-property: transform, border, box-shadow, margin, opacity, width; |
| 101 } | 100 } |
| 102 | 101 |
| 103 .thumb-ntp .mv-tile:focus:not(:hover) { | 102 .thumb-ntp .mv-tile:focus:not(:hover) { |
| 104 -webkit-filter: brightness(75%); | 103 -webkit-filter: brightness(75%); |
| 105 box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 4px 8px 0 rgba(0,0,0,0.2); | 104 box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 4px 8px 0 rgba(0,0,0,0.2); |
| 106 } | 105 } |
| 107 | 106 |
| 108 .icon-ntp .mv-tile:focus { | 107 .icon-ntp .mv-tile:focus { |
| 109 background: rgba(0,0,0,0.2); | 108 background: rgba(0,0,0,0.2); |
| 110 } | 109 } |
| 111 | 110 |
| 112 .icon-ntp.dark .mv-tile:focus { | 111 .icon-ntp.dark .mv-tile:focus { |
| 113 background: rgba(255,255,255,0.2); | 112 background: rgba(255,255,255,0.2); |
| 114 } | 113 } |
| 115 | 114 |
| 116 .mv-tile.blacklisted { | 115 .mv-tile.blacklisted { |
| 117 -webkit-transform: scale(0, 0); | |
| 118 border: none !important; | 116 border: none !important; |
| 119 margin: 0; | 117 margin: 0; |
| 118 transform: scale(0, 0); |
| 120 width: 0; | 119 width: 0; |
| 121 } | 120 } |
| 122 | 121 |
| 123 .thumb-ntp .mv-tile:hover { | 122 .thumb-ntp .mv-tile:hover { |
| 124 box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 4px 8px 0 rgba(0,0,0,0.2); | 123 box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 4px 8px 0 rgba(0,0,0,0.2); |
| 125 } | 124 } |
| 126 | 125 |
| 127 .mv-tile.mv-blacklist { | 126 .mv-tile.mv-blacklist { |
| 128 opacity: 0; | 127 opacity: 0; |
| 129 } | 128 } |
| 130 | 129 |
| 131 .mv-tile.mv-blacklist { | 130 .mv-tile.mv-blacklist { |
| 132 -webkit-transform: scale(0, 0); | |
| 133 -webkit-transform-origin: 0 41px; | |
| 134 margin-left: 0; | 131 margin-left: 0; |
| 135 margin-right: 0; | 132 margin-right: 0; |
| 133 transform: scale(0, 0); |
| 134 transform-origin: 0 41px; |
| 136 width: 0; | 135 width: 0; |
| 137 } | 136 } |
| 138 | 137 |
| 139 .mv-title { | 138 .mv-title { |
| 140 border: none; | 139 border: none; |
| 141 overflow: hidden; | 140 overflow: hidden; |
| 142 position: absolute; | 141 position: absolute; |
| 143 text-overflow: clip; | 142 text-overflow: clip; |
| 144 } | 143 } |
| 145 | 144 |
| (...skipping 100 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 246 border: 8px solid #f2f2f2; | 245 border: 8px solid #f2f2f2; |
| 247 border-radius: 50%; | 246 border-radius: 50%; |
| 248 content: ''; | 247 content: ''; |
| 249 display: block; | 248 display: block; |
| 250 height: 0; | 249 height: 0; |
| 251 margin: 39px 66px; | 250 margin: 39px 66px; |
| 252 width: 0; | 251 width: 0; |
| 253 } | 252 } |
| 254 | 253 |
| 255 .mv-x { | 254 .mv-x { |
| 256 -webkit-transition: opacity 150ms; | |
| 257 border: none; | 255 border: none; |
| 258 cursor: pointer; | 256 cursor: pointer; |
| 259 opacity: 0; | 257 opacity: 0; |
| 260 position: absolute; | 258 position: absolute; |
| 259 transition: opacity 150ms; |
| 261 } | 260 } |
| 262 | 261 |
| 263 .thumb-ntp .mv-x { | 262 .thumb-ntp .mv-x { |
| 264 background: linear-gradient(to left, rgb(242,242,242) 60%, transparent); | 263 background: linear-gradient(to left, rgb(242,242,242) 60%, transparent); |
| 265 height: 30px; | 264 height: 30px; |
| 266 right: 0; | 265 right: 0; |
| 267 width: 40px; | 266 width: 40px; |
| 268 } | 267 } |
| 269 | 268 |
| 270 .icon-ntp .mv-x { | 269 .icon-ntp .mv-x { |
| (...skipping 55 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 326 .thumb-ntp .mv-x:active::after { | 325 .thumb-ntp .mv-x:active::after { |
| 327 background-color: rgb(66,133,244); | 326 background-color: rgb(66,133,244); |
| 328 } | 327 } |
| 329 | 328 |
| 330 .icon-ntp .mv-x:hover::after, | 329 .icon-ntp .mv-x:hover::after, |
| 331 .icon-ntp .mv-x:active::after { | 330 .icon-ntp .mv-x:active::after { |
| 332 background-color: inherit; | 331 background-color: inherit; |
| 333 } | 332 } |
| 334 | 333 |
| 335 .mv-tile:hover .mv-x { | 334 .mv-tile:hover .mv-x { |
| 336 -webkit-transition-delay: 500ms; | |
| 337 opacity: 1; | 335 opacity: 1; |
| 336 transition-delay: 500ms; |
| 338 } | 337 } |
| 339 | 338 |
| 340 .icon-ntp .mv-tile:hover .mv-x { | 339 .icon-ntp .mv-tile:hover .mv-x { |
| 341 -webkit-transition-delay: 800ms; | 340 transition-delay: 800ms; |
| 342 } | 341 } |
| 343 | 342 |
| 344 .mv-x:hover { | 343 .mv-x:hover { |
| 345 -webkit-transition: none; | 344 transition: none; |
| 346 } | 345 } |
| 347 | 346 |
| 348 .mv-favicon { | 347 .mv-favicon { |
| 349 background-size: 16px; | 348 background-size: 16px; |
| 350 height: 16px; | 349 height: 16px; |
| 351 left: 7px; | 350 left: 7px; |
| 352 margin: 0; | 351 margin: 0; |
| 353 pointer-events: none; | 352 pointer-events: none; |
| 354 position: absolute; | 353 position: absolute; |
| 355 top: 7px; | 354 top: 7px; |
| (...skipping 14 matching lines...) Expand all Loading... |
| 370 } | 369 } |
| 371 | 370 |
| 372 .mv-favicon img { | 371 .mv-favicon img { |
| 373 height: 100%; | 372 height: 100%; |
| 374 width: 100%; | 373 width: 100%; |
| 375 } | 374 } |
| 376 | 375 |
| 377 .mv-favicon.failed-favicon img { | 376 .mv-favicon.failed-favicon img { |
| 378 display: none; | 377 display: none; |
| 379 } | 378 } |
| OLD | NEW |