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