Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(103)

Side by Side Diff: chrome/browser/resources/local_ntp/local_ntp.css

Issue 412073002: Local NTP: prevent tiles from reloading on resize by moving them into single <div>. (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src
Patch Set: Switching back to userInitiatedMostVisitedChange; hiding tiles using visibility. Created 6 years, 5 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
OLDNEW
1 /* Copyright 2013 The Chromium Authors. All rights reserved. 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 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 body { 4 body {
5 background-attachment: fixed !important; 5 background-attachment: fixed !important;
6 background-color: white; 6 background-color: white;
7 cursor: default; 7 cursor: default;
8 font-family: arial, sans-serif; 8 font-family: arial, sans-serif;
9 font-size: small; 9 font-size: small;
10 margin: 0; 10 margin: 0;
(...skipping 119 matching lines...) Expand 10 before | Expand all | Expand 10 after
130 visibility: inherit; 130 visibility: inherit;
131 } 131 }
132 132
133 #most-visited { 133 #most-visited {
134 -webkit-user-select: none; 134 -webkit-user-select: none;
135 margin-top: 51px; 135 margin-top: 51px;
136 text-align: -webkit-center; 136 text-align: -webkit-center;
137 } 137 }
138 138
139 #mv-tiles { 139 #mv-tiles {
140 /* Use GPU compositing if available. */ 140 height: calc(2 * 138px);
141 -webkit-transform: translate3d(0, 0, 0); 141 line-height: 138px;
142 height: 260px; 142 margin: 0;
143 overflow: hidden; 143 position: relative;
144 padding: 0 1em;
145 white-space: nowrap;
146 width: 304px;
147 }
148
149 @media only screen and (min-width:660px) {
150 #fakebox {
151 width: 458px;
152 }
153 #mv-tiles {
154 width: 460px;
155 }
156 }
157
158 @media only screen and (min-width:820px) {
159 #fakebox {
160 width: 618px;
161 }
162 #mv-tiles {
163 width: 620px;
164 }
165 }
166
167 .mv-row {
168 margin-bottom: 50px;
169 }
170
171 .mv-row:last-child {
172 margin-bottom: 0;
173 }
174
175 .mv-tile:first-child {
176 -webkit-margin-start: -1px;
177 } 144 }
178 145
179 .mv-tile { 146 .mv-tile {
180 -webkit-margin-start: 20px;
181 -webkit-transform: translate3d(0, 0, 0);
182 -webkit-transition-duration: 200ms; 147 -webkit-transition-duration: 200ms;
183 -webkit-transition-property: -webkit-transform, margin, opacity, width; 148 -webkit-transition-property: -webkit-transform, margin, opacity, width;
184 background: -webkit-linear-gradient(#f2f2f2, #e8e8e8); 149 background: -webkit-linear-gradient(#f2f2f2, #e8e8e8);
185 border: 1px solid transparent; 150 border: 1px solid transparent;
186 border-radius: 3px; 151 border-radius: 3px;
187 box-shadow: inset 0 2px 3px rgba(0, 0, 0, .09); 152 box-shadow: inset 0 2px 3px rgba(0, 0, 0, .09);
188 display: inline-block; 153 display: inline-block;
189 height: 83px; 154 height: 83px;
155 margin-left: 10px;
156 margin-right: 10px; /* Total horizontal margins add to TILE_MARGIN. */
157 position: relative;
158 vertical-align: top;
190 width: 138px; 159 width: 138px;
191 } 160 }
192 161
193 /* Class applied to tiles to trigger the blacklist animation. */ 162 /* Class applied to tiles to trigger the blacklist animation. */
194 .mv-tile.mv-blacklist { 163 .mv-tile.mv-blacklist {
195 -webkit-transform: scale(0.5); 164 -webkit-transform: scale(0.5);
196 opacity: 0; 165 opacity: 0;
197 } 166 }
198 167
199 .mv-page-ready { 168 .mv-page-ready {
(...skipping 165 matching lines...) Expand 10 before | Expand all | Expand 10 after
365 opacity: 0.9; 334 opacity: 0.9;
366 padding: 3px; 335 padding: 3px;
367 position: fixed; 336 position: fixed;
368 right: 8px; 337 right: 8px;
369 } 338 }
370 339
371 body.rtl #attribution,body.rtl #recent-tabs { 340 body.rtl #attribution,body.rtl #recent-tabs {
372 left: 8px; 341 left: 8px;
373 right: auto; 342 right: auto;
374 } 343 }
OLDNEW
« no previous file with comments | « no previous file | chrome/browser/resources/local_ntp/local_ntp.js » ('j') | chrome/browser/resources/local_ntp/local_ntp.js » ('J')

Powered by Google App Engine
This is Rietveld 408576698