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