OLD | NEW |
| (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 ' '. */ | |
573 content: '\00AB\A0'; | |
574 } | |
575 | |
576 html[dir='rtl'] #newest-button::after { | |
577 /* ' ' 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 ' '. */ | |
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 } | |
OLD | NEW |