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

Side by Side Diff: chrome/browser/resources/history/history.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) 2012 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 html[dir='rtl'] body.uber-frame > .page {
6 -webkit-margin-end: 0;
7 }
8
9 body.uber-frame > .page.big-topbar-page {
10 padding-top: 78px;
11 }
12
13 #top-container {
14 margin-top: 16px;
15 overflow: hidden;
16 }
17
18 #editing-controls,
19 #loading-spinner {
20 white-space: nowrap;
21 }
22
23 #search-button {
24 margin: 0;
25 }
26
27 #spinner {
28 -webkit-margin-end: 5px;
29 vertical-align: bottom;
30 }
31
32 #notification-bar {
33 float: right;
34 padding-top: 5px;
35 }
36
37 html[dir='rtl'] #notification-bar {
38 float: left;
39 }
40
41 #top-container.overflow #notification-bar {
42 float: left;
43 margin-top: 12px;
44 }
45
46 html[dir='rtl'] #top-container.overflow #notification-bar {
47 float: right;
48 }
49
50 #notification-bar span {
51 display: block;
52 }
53
54 #notification-bar span + span {
55 margin: 1em 0;
56 }
57
58 #filter-controls,
59 #top-container,
60 #results-display,
61 #results-pagination {
62 max-width: 718px;
63 }
64
65 #filter-controls {
66 display: flex;
67 margin-bottom: 4px;
68 margin-top: 4px;
69 }
70
71 #filter-controls > * {
72 flex: 1;
73 }
74
75 #editing-controls {
76 -webkit-margin-end: 12px;
77 float: left;
78 }
79
80 html[dir='rtl'] #editing-controls {
81 float: right;
82 }
83
84 #top-container.overflow #editing-controls {
85 float: none;
86 }
87
88 #editing-controls button:first-of-type {
89 -webkit-margin-start: 0;
90 }
91
92 #range-next,
93 #range-previous {
94 background-image: url(../disclosure_triangle_small.png),
95 -webkit-linear-gradient(rgb(241, 241, 241),
96 rgb(241, 241, 241) 38%,
97 rgb(230, 230, 230));
98 background-position: center;
99 background-repeat: no-repeat;
100 border-radius: 0 2px 2px 0;
101 }
102
103 #range-next:disabled,
104 #range-previous:disabled {
105 /* Change the gradient manually in order to make it look like the other
106 * disabled buttons since you can't set opacity on background images only. */
107 background-image: url(../disclosure_triangle_small.png),
108 -webkit-linear-gradient(rgb(231, 231, 231),
109 rgb(231, 231, 231) 38%,
110 rgb(220, 220, 220));
111 border-color: rgba(67, 67, 67, 0.5);
112 opacity: 0.5;
113 }
114
115 html[dir='rtl'] #range-today,
116 html[dir='rtl'] #range-previous,
117 html[dir='rtl'] #range-next {
118 float: right;
119 }
120
121 html[dir='rtl'] #range-next,
122 #range-previous {
123 transform: scalex(-1);
124 }
125
126 html[dir='rtl'] #range-previous {
127 transform: scaleX(1);
128 }
129
130 #range-today {
131 -webkit-margin-end: 10px;
132 }
133
134 #range-today,
135 #range-previous,
136 #range-next {
137 float: left;
138 height: 26px;
139 padding-bottom: 4px;
140 padding-top: 4px;
141 }
142
143 #range-next {
144 -webkit-margin-start: -1px;
145 }
146
147 #range-previous {
148 -webkit-margin-end: 0;
149 }
150
151 #timeframe-controls {
152 display: flex;
153 justify-content: flex-end;
154 }
155
156 #timeframe-controls input[type='radio'] {
157 background-color: buttonface;
158 background-image: -webkit-linear-gradient(rgb(237, 237, 237),
159 rgb(237, 237, 237) 38%,
160 rgb(222, 222, 222));
161 border: 1px solid rgba(0, 0, 0, 0.25);
162 border-radius: 0;
163 bottom: auto;
164 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08),
165 inset 0 1px 2px rgba(255, 255, 255, 0.75);
166 box-sizing: border-box;
167 color: rgb(68, 68, 68);
168 display: inline-block;
169 height: 100%;
170 letter-spacing: normal;
171 line-height: 2em;
172 margin: 0;
173 min-height: 2em;
174 min-width: 4em;
175 text-align: center;
176 text-indent: 0;
177 text-shadow: 0 1px 0 rgb(240, 240, 240);
178 text-transform: none;
179 vertical-align: middle;
180 width: auto;
181 word-spacing: normal;
182 }
183
184 #timeframe-controls input[type='radio']:not(:first-of-type) {
185 -webkit-border-start-width: 0;
186 }
187
188 #timeframe-controls input[type='radio']:not(:first-of-type):focus {
189 -webkit-border-start-width: 1px;
190 -webkit-margin-start: -1px;
191 }
192
193 html[dir='ltr'] #timeframe-controls input[type='radio']:first-of-type,
194 html[dir='rtl'] #timeframe-controls input[type='radio']:last-of-type {
195 border-bottom-left-radius: 2px;
196 border-top-left-radius: 2px;
197 }
198
199 html[dir='ltr'] #timeframe-controls input[type='radio']:last-of-type,
200 html[dir='rtl'] #timeframe-controls input[type='radio']:first-of-type {
201 border-bottom-right-radius: 2px;
202 border-top-right-radius: 2px;
203 }
204
205 #timeframe-controls input[type='radio']:checked {
206 background-image: -webkit-linear-gradient(rgb(185, 185, 185),
207 rgb(216, 216, 216) 38%,
208 rgb(167, 167, 167));
209 }
210
211 #timeframe-controls input[type='radio']:focus {
212 border-color: rgb(77, 144, 254);
213 }
214
215 #timeframe-controls input[type='radio']::before {
216 display: none; /* Hide the ( )/(O). */
217 }
218
219 #timeframe-controls input[type='radio']::after {
220 content: attr(aria-label);
221 padding: 0 1em;
222 }
223
224 #results-display {
225 margin: 16px 0 0 0;
226 }
227
228 .edit-button {
229 -webkit-appearance: none;
230 background: none;
231 border: 0;
232 color: blue; /* -webkit-link makes it purple :'( */
233 cursor: pointer;
234 display: inline-block;
235 font: inherit;
236 padding: 0 9px;
237 text-decoration: underline;
238 }
239
240 .entry,
241 .gap,
242 .no-entries,
243 .site-entry {
244 list-style: none;
245 margin: 0;
246 padding: 0;
247 }
248
249 .gap {
250 -webkit-border-end: 1px solid rgb(192, 195, 198);
251 height: 14px;
252 margin: 1px 0;
253 width: 45px;
254 }
255
256 .no-checkboxes .gap {
257 width: 25px;
258 }
259
260 .entry-box,
261 .site-domain-row {
262 align-items: center;
263 display: flex;
264 margin-bottom: 6px;
265 /* The box should be no bigger than its parent. */
266 max-width: 100%;
267 min-height: 2em;
268 overflow: hidden;
269 padding-bottom: 1px;
270 }
271
272 .entry-box {
273 /* Ensures a consistent baseline on all platforms. */
274 line-height: 1.75em;
275 }
276
277 .site-domain-wrapper {
278 cursor: pointer;
279 display: flex;
280 width: 100%;
281 }
282
283 .search-results,
284 .day-results {
285 margin: 0 0 24px 0;
286 padding: 0;
287 }
288
289 .site-results {
290 clear: left;
291 margin: 0;
292 overflow: hidden;
293 padding: 0;
294 transition: height 350ms ease-in-out;
295 }
296
297 .site-results.grouped {
298 -webkit-padding-start: 18px;
299 }
300
301 .no-checkboxes .site-results.grouped {
302 -webkit-padding-start: 21px;
303 }
304
305 .month-results {
306 -webkit-padding-start: 0;
307 }
308
309 html[dir='rtl'] .site-results {
310 clear: both;
311 }
312
313 h2.timeframe {
314 font-size: 1.5em;
315 }
316
317 .entry .domain {
318 -webkit-padding-end: 6px;
319 -webkit-padding-start: 2px;
320 color: rgb(151, 156, 160);
321 min-width: -webkit-min-content;
322 overflow: hidden;
323 white-space: nowrap;
324 }
325
326 .site-results .domain {
327 display: none;
328 }
329
330 html[dir='rtl'] .number-visits {
331 /* This element contains parentheses, which without the unicode-bidi: embed
332 * directive would show up incorrectly (e.g. '(www.google.com (5'). Using
333 * 'embed' makes the engine set the text in the parentheses as LTR even
334 * when the layout is set to RTL, which makes using -webkit-*-start
335 * impossible. So use margins and dir='rtl'. */
336 direction: rtl;
337 unicode-bidi: embed;
338 }
339
340 .number-visits {
341 color: rgb(151, 156, 160);
342 }
343
344 .drop-down {
345 margin-top: 1px;
346 }
347
348 .entry .time {
349 color: rgb(151, 156, 160);
350 max-width: 90px;
351 min-width: -webkit-min-content;
352 overflow: hidden;
353 text-overflow: ellipsis;
354 white-space: nowrap;
355 }
356
357 .entry input[type='checkbox'],
358 .site-domain-row input[type='checkbox'] {
359 -webkit-margin-end: 6px;
360 line-height: 1em;
361 min-width: 13px;
362 top: 0;
363 }
364
365 <if expr="not is_android">
366 .site-domain-wrapper:hover input[type='checkbox']:not(:focus),
367 .site-domain-wrapper input[type='checkbox']:not(:focus):checked,
368 .entry-box:hover input[type='checkbox']:not(:focus),
369 .entry-box input[type='checkbox']:not(:focus):checked {
370 border-color: rgba(0, 0, 0, .5);
371 }
372
373 .site-domain-wrapper:hover .site-domain-row,
374 .entry-box:hover {
375 background-color: rgba(0, 0, 0, .025);
376 }
377
378 .filter-status {
379 -webkit-margin-start: 10px;
380 }
381
382 .filter-status > div {
383 border-radius: 3px;
384 display: none;
385 flex: 0 0 auto;
386 font-size: 11px;
387 height: 14px;
388 line-height: 12px;
389 transition: background-color 150ms;
390 white-space: nowrap;
391 }
392
393 .filter-status > div.filter-allowed,
394 .filter-status > div.filter-blocked,
395 .filter-status > div.in-content-pack-active,
396 .filter-status > div.in-content-pack-passive,
397 .filter-status > div.blocked-visit-active {
398 display: block;
399 margin: 3px 3px 3px 0;
400 padding: 0 4px;
401 }
402
403 .filter-allowed,
404 .in-content-pack-active {
405 background-color: rgb(141, 240, 127);
406 border: 1px solid rgb(33, 190, 33);
407 color: rgb(54, 54, 54);
408 }
409
410 .filter-blocked {
411 border: 1px solid rgb(207, 207, 207);
412 background-color: rgb(231, 231, 231);
413 color: rgb(54, 54, 54);
414 }
415
416 .in-content-pack-passive {
417 border: 1px solid rgb(155, 224, 163);
418 background-color: rgb(225, 255, 205);
419 color: rgb(148, 148, 148);
420 }
421 </if>
422
423 .entry-box,
424 .site-domain-row {
425 -webkit-padding-end: 6px;
426 -webkit-padding-start: 6px;
427 border-radius: 2px;
428 }
429
430 .entry-box > div,
431 .site-domain-row > div {
432 min-width: 0;
433 }
434
435 .focus-row-active :-webkit-any(.entry-box, .site-domain-row) {
436 background-color: rgba(0, 0, 0, .05);
437 }
438
439 .entry-box-container {
440 display: flex;
441 }
442
443 .entry .visit-entry {
444 display: flex;
445 min-width: 0;
446 }
447
448 .entry .title {
449 min-width: 0;
450 overflow: hidden;
451 text-overflow: ellipsis;
452 white-space: nowrap;
453 }
454
455 /* TODO(sergiu): If this is the final icon replace it with a separate resource.
456 */
457 .entry .blocked-indicator {
458 -webkit-padding-start: 4px; /* For <a> padding. */
459 }
460
461 .blocked-indicator .title {
462 color: rgb(151, 156, 160);
463 }
464
465 .blocked-icon {
466 background-image: url(../ssl/images/roadblock.png)
467 }
468
469 .favicon {
470 background-position-y: center;
471 background-repeat: no-repeat;
472 background-size: 16px;
473 flex-shrink: 0;
474 height: 16px;
475 width: 16px;
476 }
477
478 .site-domain button:hover {
479 text-decoration: none;
480 }
481
482 .site-domain-arrow {
483 background: url(../disclosure_triangle_small.png) no-repeat;
484 background-position: 5px 5px;
485 color: rgb(143, 143, 143);
486 height: 21px;
487 margin-right: 2px;
488 opacity: 0.58;
489 text-align: center;
490 transform: rotate(0);
491 transition: transform 300ms linear;
492 width: 21px;
493 }
494
495 html[dir='rtl'] .site-domain-arrow {
496 transform: rotate(180deg);
497 }
498
499 html .expand .site-domain-arrow {
500 transform: rotate(90deg);
501 }
502
503 .entry .bookmark-section {
504 -webkit-margin-end: 3px;
505 -webkit-margin-start: 8px;
506 background: no-repeat center
507 url(../../../../ui/webui/resources/images/star_small.png);
508 border: none;
509 display: inline-block;
510 height: 15px;
511 min-width: 15px;
512 visibility: hidden;
513 }
514
515 .entry .starred {
516 visibility: visible;
517 }
518
519 .entry .title > a,
520 .site-domain [is='action-link'] {
521 color: rgb(48, 57, 66);
522 margin: 2px;
523 padding: 2px;
524 /* Focus outlines are rendered differently for each platform. */
525 <if expr="is_macosx">
526 margin: 4px;
527 padding: 0;
528 </if>
529 <if expr="is_win">
530 padding: 0 2px;
531 </if>
532 text-decoration: none;
533 }
534
535 .entry .title > a.to-be-removed {
536 text-decoration: line-through;
537 }
538
539 .entry .title > a:hover {
540 text-decoration: underline;
541 }
542
543 .fade-out {
544 opacity: 0;
545 transition: opacity 200ms;
546 }
547
548 button.menu-button.drop-down {
549 -webkit-margin-end: 0;
550 min-width: 12px;
551 top: 0;
552 }
553
554 #action-menu > [role=menuitem] {
555 line-height: 29px;
556 outline: none;
557 }
558
559 body:not(.has-results) #results-pagination {
560 display: none;
561 }
562
563 #older-button {
564 float: right;
565 }
566
567 html[dir='rtl'] #older-button {
568 float: left;
569 }
570
571 html[dir='ltr'] #newest-button::before {
572 /* Left-pointing double angle quotation mark followed by '&nbsp;'. */
573 content: '\00AB\A0';
574 }
575
576 html[dir='rtl'] #newest-button::after {
577 /* '&nbsp;' followed by right-pointing double angle quotation mark. */
578 content: '\A0\00BB';
579 }
580
581 html[dir='ltr'] #newer-button::before,
582 html[dir='rtl'] #older-button::before {
583 /* Single left-pointing angle quotation mark followed by '&nbsp;'. */
584 content: '\2039\A0';
585 }
586
587 html[dir='ltr'] #older-button::after,
588 html[dir='rtl'] #newer-button::after {
589 /* 'nbsp;' followed by single right-pointing angle quotation mark. */
590 content: '\A0\203A';
591 }
592
593 /* Clear the float to ensure that #results-pagination encloses its children. */
594 #results-pagination::after {
595 clear: both;
596 content: '';
597 display: block;
598 height: 0;
599 visibility: hidden;
600 }
601
602 /* Styles for the action menu of visits that come from other devices, triggered
603 by setting the "data-devicename" attribute of the menu. */
604
605 #action-menu[data-devicename]:not([data-devicename='']) {
606 padding-top: 0;
607 }
608
609 #action-menu[data-devicename]::before {
610 background-color: rgb(245, 245, 245);
611 background-position: 18px center;
612 background-repeat: no-repeat;
613 background-size: 24px;
614 border-bottom: 1px solid rgb(232, 232, 232);
615 color: rgb(151, 156, 160);
616 content: attr(data-devicename);
617 display: block;
618 font-size: 11px;
619 line-height: 29px;
620 margin-bottom: 8px;
621 padding: 0 19px 0 51px;
622 }
623
624 #action-menu[data-devicename='']::before {
625 display: none;
626 }
627
628 #action-menu[data-devicetype='laptop']::before {
629 background-image: url(../../../../ui/webui/resources/images/laptop.svg);
630 }
631
632 #action-menu[data-devicetype='phone']::before {
633 background-image: url(../../../../ui/webui/resources/images/smartphone.svg);
634 background-position: 14px center;
635 padding-left: 43px;
636 }
637
638 #action-menu[data-devicetype='tablet']::before {
639 background-image: url(../../../../ui/webui/resources/images/tablet.svg);
640 }
OLDNEW
« no previous file with comments | « chrome/browser/resources/history/externs.js ('k') | chrome/browser/resources/history/history.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698