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

Side by Side Diff: chrome/browser/resources/history/history_mobile.css

Issue 2830983005: Remove old webui History page on desktop and mobile (Closed)
Patch Set: merge Created 3 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
OLDNEW
(Empty)
1 /* Copyright (c) 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
5 /* This file contains styles specific to Android and iOS. */
6
7 html:not(.focus-outline-visible) :focus {
8 outline: none;
9 }
10
11 html {
12 height: 100%;
13 }
14
15 body {
16 background-color: rgba(0, 0, 0, .05);
17 color: rgb(76, 76, 76);
18 font-size: initial;
19 height: 100%;
20 margin: 0;
21 }
22
23 .page {
24 -webkit-flex-flow: column;
25 display: -webkit-flex;
26 height: 100%;
27 }
28
29 #scrolling-container {
30 -webkit-flex: auto; /* Container should take up extra vertical space. */
31 -webkit-overflow-scrolling: touch;
32 overflow-y: auto;
33 }
34
35 h1 {
36 color: rgb(34, 34, 34);
37 font-weight: bold;
38 margin-bottom: 12px;
39 }
40
41 #top-container,
42 #results-display {
43 margin: 0;
44 }
45
46 #top-container,
47 #results-display,
48 #results-pagination {
49 max-width: none;
50 }
51
52 h1,
53 h3,
54 #notification-bar,
55 #search-field,
56 .entry-box,
57 #loading-spinner {
58 padding-left: 16px;
59 padding-right: 16px;
60 }
61
62 h3 {
63 background: rgb(245, 245, 245);
64 color: rgb(138, 138, 138);
65 font-size: 14px;
66 height: 30px;
67 line-height: 30px;
68 margin-top: 0;
69 overflow: hidden;
70 text-overflow: ellipsis;
71 white-space: nowrap;
72 }
73
74 #search-field {
75 -webkit-padding-start: 64px;
76 background-image:
77 url(../../../../ui/webui/resources/images/2x/search.png);
78 background-position: 16px center;
79 background-repeat: no-repeat;
80 background-size: 32px;
81 border: 0;
82 display: block;
83 line-height: 1.5;
84 margin-top: 16px;
85 width: 100%;
86 }
87
88 html[dir='rtl'] #search-field {
89 background-position: right 16px center;
90 }
91
92 #notification-bar {
93 color: rgb(138, 138, 138);
94 font-size: 14px;
95 line-height: 1.5;
96 }
97
98 #notification-bar span {
99 /* On desktop, notification spans are displayed as separate paragraphs.
100 On mobile, join them into a single paragraph. */
101 display: inline;
102 }
103
104 #top-container.overflow #notification-bar {
105 float: none;
106 margin: 0;
107 padding-bottom: 0;
108 padding-top: 0;
109 }
110
111 #remove-selected,
112 #search-button,
113 .gap {
114 display: none;
115 }
116
117 .entry-box {
118 -webkit-padding-end: 0;
119 }
120
121 button.remove-entry {
122 background: url(../../../../ui/webui/resources/images/2x/x-thin.png)
123 no-repeat center center;
124 background-size: 13px;
125 border: 0;
126 box-sizing: border-box;
127 height: 100%;
128 min-width: 45px;
129 opacity: 0.7;
130 padding: 0 16px;
131 vertical-align: top;
132 width: 45px;
133 }
134
135 button.remove-entry:active {
136 opacity: 1.0;
137 }
138
139 .entry {
140 background-color: white;
141 }
142
143 .entry-box {
144 margin-bottom: 0;
145 margin-top: 0;
146 padding-bottom: 0;
147 }
148
149 h3,
150 .entry,
151 #search-field {
152 border-bottom: 1px solid rgb(220, 220, 220);
153 border-top: 1px solid rgb(220, 220, 220);
154 margin-bottom: -1px;
155 overflow: hidden;
156 }
157
158 .entry-box,
159 #search-field,
160 #results-pagination button {
161 height: 60px;
162 }
163
164 .entry-box-container {
165 display: block;
166 }
167
168 input {
169 border-radius: 0;
170 }
171
172 #clear-browsing-data {
173 /* Style it like a native Android button. */
174 background-color: rgb(221, 221, 221);
175 border: 0;
176 border-radius: 0;
177 border-top: 1px solid rgb(198, 198, 198);
178 box-shadow: none;
179 font-size: 75%;
180 font-weight: bold;
181 height: 46px;
182 margin: 0;
183 min-height: 46px;
184 text-shadow: none;
185 text-transform: uppercase;
186 width: 100%;
187 }
188
189 .day-results,
190 .search-results {
191 margin: 0;
192 }
193
194 /* Fade out the entry-box, rather than its parent node, so that the dividing
195 line between entries doesn't fade out. */
196 .entry.fade-out .entry-box {
197 opacity: 1;
198 transition: opacity 200ms;
199 }
200
201 .entry.fade-out {
202 opacity: 1;
203 }
204
205 .entry.fade-out .entry-box {
206 opacity: 0;
207 }
208
209 .entry input[type=checkbox] {
210 display: none;
211 }
212
213 .entry .visit-entry {
214 -webkit-flex: auto;
215 -webkit-flex-flow: column;
216 -webkit-padding-start: 16px;
217 line-height: 1.3;
218 }
219
220 .entry .visit-entry.blocked-indicator {
221 line-height: 2;
222 }
223
224 .entry .visit-entry :-webkit-any(a, .domain) {
225 display: block;
226 margin-left: 0;
227 margin-right: 0;
228 min-width: 0;
229 overflow: hidden;
230 padding-left: 0;
231 padding-right: 0;
232 text-overflow: ellipsis;
233 white-space: nowrap;
234 }
235
236 .entry .visit-entry.blocked-indicator a {
237 display: inline;
238 }
239
240 .favicon {
241 background-size: 32px;
242 height: 32px;
243 width: 32px;
244 }
245
246 .fallback-favicon {
247 border-radius: 2px;
248 color: white;
249 font: bold 20px/32px sans-serif;
250 text-align: center;
251 }
252
253 .entry .domain {
254 font-size: 14px;
255 }
256
257 #older-button {
258 -webkit-padding-end: 16px;
259 }
260
261 #newest-button {
262 -webkit-padding-start: 16px;
263 }
264
265 #loading-spinner {
266 margin-top: 16px;
267 }
268
269 <if expr="is_ios">
270 /* iOS does not support the latest flexbox syntax, only the 2009 working draft
271 syntax (http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/). */
272 .entry-box,
273 .site-domain-wrapper {
274 -wekbit-box-align: center;
275 display: -webkit-box;
276 }
277
278 .entry .visit-entry {
279 -webkit-box-flex: 1;
280 -webkit-box-orient: vertical;
281 -webkit-box-pack: center;
282 display: -webkit-box;
283 }
284
285 #scrolling-container {
286 bottom: 46px;
287 left: 0;
288 position: fixed;
289 right: 0;
290 top: 0;
291 }
292
293 #clear-browsing-data {
294 bottom: 0;
295 position: fixed;
296 }
297 </if>
298
299 .entry .bookmark-section {
300 display: none;
301 }
302
303 .entry .time {
304 line-height: 60px;
305 min-width: 90px;
306 text-align: inherit;
307 width: 90px;
308 }
309
310 @media only screen and (max-width:600px) {
311
312 /* Omit the time on very small screens. */
313 .entry .time {
314 display: none;
315 }
316
317 } /* @media only screen and (max-width:600px) */
318
319 @media only screen and (min-width:720px) {
320
321 h3,
322 .entry,
323 #search-field {
324 border: 1px solid rgb(220, 220, 220);
325 }
326
327 h3 {
328 margin-top: 30px;
329 }
330
331 #scrolling-container {
332 padding-bottom: 30px;
333 }
334
335 #scrolling-container > * {
336 margin-left: auto;
337 margin-right: auto;
338 max-width: 718px;
339 }
340
341 h1,
342 #notification-bar,
343 #loading-spinner {
344 padding-left: 0;
345 padding-right: 0;
346 }
347
348 } /* @media only screen and (max-width:720px) */
349
350 <if expr="is_ios">
351 .ios-keyboard-visible #clear-browsing-data {
352 display: none;
353 }
354
355 .ios-keyboard-visible #scrolling-container {
356 /* Should be 0, but that breaks scrolling -- see crbug.com/292715. */
357 bottom: -1px;
358 }
359
360 #results-header:empty {
361 display: none;
362 }
363 </if> /* is_ios */
OLDNEW
« no previous file with comments | « chrome/browser/resources/history/history_focus_manager.js ('k') | chrome/browser/resources/history/other_devices.css » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698