Chromium Code Reviews| OLD | NEW |
|---|---|
| (Empty) | |
| 1 /* Copyright 2013 The Chromium Authors. All rights reserved. | |
| 2 * Use of this source code is governed by a BSD-style license that can be | |
| 3 * found in the LICENSE file. */ | |
| 4 body { | |
| 5 background-attachment: fixed !important | |
| 6 } | |
| 7 | |
| 8 #most-visited { | |
| 9 -webkit-user-select: none; | |
| 10 margin-top: 60px; | |
| 11 text-align: -webkit-center; | |
| 12 } | |
| 13 | |
| 14 .custom-theme .mv-title, | |
| 15 .custom-theme #mv-msg { | |
| 16 color: #fff; | |
| 17 text-shadow: black 0 1px 3px; | |
| 18 } | |
| 19 | |
| 20 .custom-theme #mv-notice-links span { | |
| 21 color: #fff; | |
| 22 text-shadow: rgb(17, 85, 204) 0 1px 3px; | |
| 23 } | |
| 24 | |
| 25 #mv-tiles { | |
| 26 -webkit-transform: translate3d(0, 0, 0); | |
|
Dan Beam
2013/03/22 19:32:50
+ /* Use GPU compositing if available. */
jeremycho
2013/03/22 21:33:30
Done.
| |
| 27 -webkit-transition: width 200ms; | |
| 28 height: 120px; | |
| 29 overflow: hidden; | |
| 30 white-space: nowrap; | |
| 31 width: 304px; | |
| 32 } | |
| 33 | |
| 34 @media only screen and (min-width:666px) { | |
| 35 #mv-tiles { | |
| 36 width: 466px; | |
| 37 } | |
| 38 } | |
| 39 | |
| 40 @media only screen and (min-width:829px) { | |
| 41 #mv-tiles { | |
| 42 width: 629px; | |
| 43 } | |
| 44 } | |
| 45 | |
| 46 .mv-tile:first-child { | |
| 47 -webkit-margin-start: 0; | |
| 48 } | |
| 49 | |
| 50 .mv-tile { | |
| 51 -webkit-margin-start: 20px; | |
| 52 -webkit-transform: translate3d(0, 0, 0); | |
| 53 -webkit-transition-duration: 200ms; | |
| 54 -webkit-transition-property: -webkit-transform, margin, opacity, width; | |
| 55 display: inline-block; | |
| 56 height: 85px; | |
| 57 width: 140px; | |
| 58 } | |
| 59 | |
| 60 .mv-tile.mv-tile-hide { | |
| 61 -webkit-margin-end: -10px; | |
| 62 opacity: 0; | |
| 63 width: 10px; | |
| 64 } | |
| 65 | |
| 66 /* Class applied to tiles to trigger the blacklist animation. */ | |
| 67 .mv-tile.mv-blacklist { | |
| 68 -webkit-margin-start: 0; | |
| 69 -webkit-transform: scale(0.5); | |
| 70 opacity: 0; | |
| 71 width: 0; | |
| 72 } | |
| 73 | |
| 74 .mv-filler { | |
| 75 background: -webkit-linear-gradient(#f2f2f2, #e8e8e8); | |
| 76 border: 1px solid #e0e0e0; | |
| 77 border-radius: 3px; | |
| 78 box-shadow: inset 0 2px 3px rgba(0, 0, 0, .09); | |
|
Dan Beam
2013/03/22 19:32:50
^ indent is off
jeremycho
2013/03/22 21:33:30
Done.
| |
| 79 } | |
| 80 | |
| 81 .mv-page { | |
| 82 background: #fff; | |
| 83 border: 1px solid #c0c0c0; | |
| 84 border-radius: 2px; | |
| 85 box-shadow: 0 1px 0 rgba(255, 255, 255, .7); | |
| 86 cursor: pointer; | |
| 87 } | |
| 88 | |
| 89 .mv-page:hover { | |
| 90 border-color: #7f7f7f | |
| 91 } | |
| 92 | |
| 93 .mv-thumb { | |
| 94 background-size: 140px 85px; | |
| 95 height: 100%; | |
| 96 width: 100%; | |
| 97 } | |
| 98 | |
| 99 .mv-title { | |
| 100 bottom: -28px; | |
| 101 color: #777; | |
| 102 position: absolute; | |
| 103 width: 100%; | |
| 104 } | |
| 105 | |
| 106 .mv-x-hide .mv-x { | |
| 107 display: none; | |
| 108 } | |
| 109 | |
| 110 /* An X button to blacklist a tile or hide the notification. */ | |
| 111 .mv-x { | |
| 112 background: transparent url('images/close_bar.png'); | |
| 113 border: none; | |
| 114 cursor: default; | |
| 115 height: 16px; | |
| 116 width: 16px; | |
| 117 } | |
| 118 | |
| 119 .mv-x:hover { | |
| 120 background: transparent url('images/close_bar_hover.png'); | |
| 121 } | |
| 122 | |
| 123 .mv-x:active { | |
| 124 background: transparent url('images/close_bar_active.png'); | |
| 125 } | |
| 126 | |
| 127 .mv-page .mv-x { | |
| 128 -webkit-transition: opacity 500ms ease-in-out; | |
| 129 opacity: 0; | |
| 130 position: absolute; | |
| 131 right: 2px; | |
| 132 top: 2px; | |
| 133 } | |
| 134 | |
| 135 .mv-page:hover .mv-x { | |
| 136 -webkit-transition-delay: 500ms; | |
| 137 opacity: 1; | |
| 138 } | |
| 139 | |
| 140 .mv-domain { | |
| 141 bottom: 24px; | |
| 142 color: #777; | |
| 143 margin: 0 7px; | |
| 144 position: absolute; | |
| 145 } | |
| 146 | |
| 147 .mv-favicon { | |
| 148 bottom: -8px; | |
| 149 height: 16px; | |
| 150 left: 61px; | |
| 151 position: absolute; | |
| 152 width: 16px; | |
| 153 } | |
| 154 | |
| 155 /* The notification shown when a tile is blacklisted. */ | |
| 156 #mv-notice { | |
| 157 font-family: Arial; | |
|
Dan Beam
2013/03/22 19:32:50
^ why is this necessary? isn't the whole thing Ari
jeremycho
2013/03/22 21:33:30
No, it inherits another font. We may want to use
| |
| 158 font-size: 12px; | |
|
Dan Beam
2013/03/22 19:32:50
^ why isn't this a %?
jeremycho
2013/03/22 21:33:30
Done.
| |
| 159 font-weight: bold; | |
| 160 padding: 10px 0; | |
| 161 } | |
| 162 | |
| 163 #mv-notice span { | |
| 164 cursor: default; | |
| 165 } | |
| 166 | |
| 167 /* Links in the notification. */ | |
| 168 #mv-notice-links span { | |
| 169 -webkit-margin-start: 6px; | |
| 170 color: rgb(17, 85, 204); | |
| 171 cursor: pointer; | |
| 172 padding: 0 4px; | |
| 173 } | |
| 174 | |
| 175 #mv-notice-links span:hover { | |
| 176 text-decoration: underline; | |
| 177 } | |
| 178 | |
| 179 #mv-notice-links .mv-x { | |
| 180 -webkit-margin-start: 8px; | |
| 181 vertical-align: top; | |
| 182 } | |
| 183 | |
| 184 #mv-notice.mv-notice-hide { | |
| 185 visibility: hidden; | |
| 186 } | |
| OLD | NEW |