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

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

Issue 14261017: Local NTP: Render two rows of Most Visited tiles. (Closed) Base URL: https://git.chromium.org/chromium/src.git@master
Patch Set: ...and merge! Created 7 years, 7 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
« no previous file with comments | « no previous file | chrome/browser/resources/local_ntp/local_ntp.js » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
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 margin: 0; 8 margin: 0;
9 overflow: hidden; 9 overflow-x: hidden;
10 } 10 }
11 11
12 #ntp-contents { 12 #ntp-contents {
13 text-align: -webkit-center; 13 text-align: -webkit-center;
14 } 14 }
15 15
16 body.fakebox-animate #ntp-contents { 16 body.fakebox-animate #ntp-contents {
17 -webkit-transition: opacity 100ms linear; 17 -webkit-transition: opacity 100ms linear;
18 opacity: 0.2; 18 opacity: 0.2;
19 } 19 }
(...skipping 73 matching lines...) Expand 10 before | Expand all | Expand 10 after
93 opacity: 0; 93 opacity: 0;
94 } 94 }
95 } 95 }
96 body.fakebox-focused #cursor { 96 body.fakebox-focused #cursor {
97 -webkit-animation: blink 1.3s step-end infinite; 97 -webkit-animation: blink 1.3s step-end infinite;
98 visibility: inherit; 98 visibility: inherit;
99 } 99 }
100 100
101 #most-visited { 101 #most-visited {
102 -webkit-user-select: none; 102 -webkit-user-select: none;
103 margin-top: 60px; 103 margin-top: 50px;
104 text-align: -webkit-center; 104 text-align: -webkit-center;
105 } 105 }
106 106
107 .custom-theme .mv-title, 107 .custom-theme .mv-title,
108 .custom-theme #mv-msg { 108 .custom-theme #mv-msg {
109 color: #fff; 109 color: #fff;
110 text-shadow: black 0 1px 3px; 110 text-shadow: black 0 1px 3px;
111 } 111 }
112 112
113 .custom-theme #mv-notice-links span { 113 .custom-theme #mv-notice-links span {
114 color: #fff; 114 color: #fff;
115 text-shadow: rgb(17, 85, 204) 0 1px 3px; 115 text-shadow: rgb(17, 85, 204) 0 1px 3px;
116 } 116 }
117 117
118 #mv-tiles { 118 #mv-tiles {
119 /* Use GPU compositing if available. */ 119 /* Use GPU compositing if available. */
120 -webkit-transform: translate3d(0, 0, 0); 120 -webkit-transform: translate3d(0, 0, 0);
121 height: 120px; 121 height: 260px;
122 overflow: hidden; 122 overflow: hidden;
123 white-space: nowrap; 123 white-space: nowrap;
124 width: 304px; 124 width: 304px;
125 } 125 }
126 126
127 @media only screen and (min-width:666px) { 127 @media only screen and (min-width:666px) {
128 #fakebox, 128 #fakebox,
129 #mv-tiles { 129 #mv-tiles {
130 width: 466px; 130 width: 466px;
131 } 131 }
132 } 132 }
133 133
134 @media only screen and (min-width:829px) { 134 @media only screen and (min-width:828px) {
135 #fakebox, 135 #fakebox,
136 #mv-tiles { 136 #mv-tiles {
137 width: 629px; 137 width: 628px;
138 } 138 }
139 } 139 }
140 140
141 .mv-row {
142 margin-bottom: 50px;
143 }
144
141 .mv-tile:first-child { 145 .mv-tile:first-child {
142 -webkit-margin-start: 0; 146 -webkit-margin-start: 0;
143 } 147 }
144 148
145 .mv-tile { 149 .mv-tile {
146 -webkit-margin-start: 20px; 150 -webkit-margin-start: 20px;
147 -webkit-transform: translate3d(0, 0, 0); 151 -webkit-transform: translate3d(0, 0, 0);
148 -webkit-transition-duration: 200ms; 152 -webkit-transition-duration: 200ms;
149 -webkit-transition-property: -webkit-transform, margin, opacity, width; 153 -webkit-transition-property: -webkit-transform, margin, opacity, width;
150 display: inline-block; 154 display: inline-block;
151 height: 85px; 155 height: 85px;
152 width: 140px; 156 width: 140px;
153 } 157 }
154 158
155 .mv-tile.mv-tile-hide { 159 .mv-tile.mv-tile-hide {
156 -webkit-margin-end: -10px; 160 -webkit-margin-end: -10px;
157 opacity: 0; 161 opacity: 0;
158 width: 10px; 162 width: 10px;
159 } 163 }
160 164
161 /* Class applied to tiles to trigger the blacklist animation. */ 165 /* Class applied to tiles to trigger the blacklist animation. */
162 .mv-tile.mv-blacklist { 166 .mv-tile.mv-blacklist {
163 -webkit-margin-start: 0;
164 -webkit-transform: scale(0.5); 167 -webkit-transform: scale(0.5);
165 opacity: 0; 168 opacity: 0;
166 width: 0;
167 } 169 }
168 170
169 .mv-filler { 171 .mv-filler {
170 background: -webkit-linear-gradient(#f2f2f2, #e8e8e8); 172 background: -webkit-linear-gradient(#f2f2f2, #e8e8e8);
171 border: 1px solid #e0e0e0; 173 border: 1px solid #e0e0e0;
172 border-radius: 3px; 174 border-radius: 3px;
173 box-shadow: inset 0 2px 3px rgba(0, 0, 0, .09); 175 box-shadow: inset 0 2px 3px rgba(0, 0, 0, .09);
174 } 176 }
175 177
176 .mv-page { 178 .mv-page {
(...skipping 162 matching lines...) Expand 10 before | Expand all | Expand 10 after
339 -webkit-user-select: none; 341 -webkit-user-select: none;
340 border: none; 342 border: none;
341 height: 22px; 343 height: 22px;
342 overflow: hidden; 344 overflow: hidden;
343 position: absolute; 345 position: absolute;
344 } 346 }
345 347
346 .pending-suggestions-container { 348 .pending-suggestions-container {
347 display: none; 349 display: none;
348 } 350 }
OLDNEW
« no previous file with comments | « no previous file | chrome/browser/resources/local_ntp/local_ntp.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698