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: 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 37 html[dir='rtl'] #notification-bar { 38 float: left; 39 } 40 41 #notification-bar.alone { 42 float: left; 43 margin-top: 12px; 44 } 45 46 html[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 68 html[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 103 html[dir='rtl'] #range-today, 104 html[dir='rtl'] #range-previous, 105 html[dir='rtl'] #range-next { 106 float: right; 107 } 108 109 html[dir='rtl'] #range-next, 110 #range-previous { 111 -webkit-transform: scalex(-1); 112 } 113 114 html[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 143 html[dir='rtl'] #display-filter-controls { 144 float: left; 145 } 146 147 .display-filter-button { 148 float: left; 149 } 150 151 html[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 189 html[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 196 html[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 .month-results { 281 -webkit-padding-start: 0; 282 } 283 284 html[dir='rtl'] .site-results { 285 clear: both; 286 } 287 288 h2.timeframe { 289 font-size: 1.5em; 290 } 291 292 .snippet { 293 -webkit-box-orient: vertical; 294 -webkit-line-clamp: 2; 295 -webkit-margin-start: 136px; 296 clear: both; 297 color: rgb(34, 34, 34); 298 display: -webkit-box; 299 line-height: 1.6em; 300 margin-bottom: 1em; 301 overflow: hidden; 302 text-overflow: ellipsis; 303 } 304 305 .entry .domain { 306 color: rgb(151, 156, 160); 307 min-width: -webkit-min-content; 308 overflow: hidden; 309 padding-left: 6px; 310 padding-right: 6px; 311 white-space: nowrap; 312 } 313 314 .site-results .domain { 315 display: none; 316 } 317 318 html[dir='rtl'] .number-visits { 319 /* This element contains parentheses, which without the unicode-bidi: embed 320 * directive would show up incorrectly (e.g. '(www.google.com (5'). Using 321 * 'embed' makes the engine set the text in the parentheses as LTR even 322 * when the layout is set to RTL, which makes using -webkit-*-start 323 * impossible. So use margins and dir='rtl'. 324 */ 325 direction: rtl; 326 unicode-bidi: embed; 327 } 328 329 .number-visits { 330 color: rgb(151, 156, 160); 331 } 332 333 .drop-down { 334 -webkit-margin-end: 5px; 335 margin-top: 1px; 336 } 337 338 html[dir='rtl'] .entry .title, 339 html[dir='rtl'] .site-domain { 340 /* Put the favicon on the right. */ 341 background-position-x: right; 342 } 343 344 .no-checkboxes .entry .time { 345 min-width: 73px; 346 } 347 348 .entry .time { 349 color: rgb(151, 156, 160); 350 min-width: 60px; 351 overflow: hidden; 352 text-align: right; 353 text-overflow: ellipsis; 354 white-space: nowrap; 355 width: 60px; 356 } 357 358 html[dir='rtl'] .entry .time { 359 text-align: left; 360 } 361 362 .search-results .time, 363 .month-results .time { 364 min-width: 85px; 365 } 366 367 .no-checkboxes.search-results .time, 368 .no-checkboxes.month-results .time { 369 min-width: 90px; 370 } 371 372 .entry input[type='checkbox'] { 373 -webkit-margin-end: 6px; 374 -webkit-margin-start: 4px; 375 line-height: 1em; 376 margin-top: 2px; 377 min-width: 13px; 378 } 379 380 <if expr="not is_android"> 381 /* Checkboxes are shown when checked or focused, or when the entry is hovered. 382 * Fade in on focus, but not on hover, because it makes the UI feel laggy. */ 383 .site-domain-wrapper input[type=checkbox]:not(:checked), 384 .entry input[type='checkbox']:not(:checked) { 385 opacity: 0; 386 } 387 388 .site-domain-wrapper:hover input[type='checkbox'], 389 .site-domain-wrapper input[type='checkbox']:focus, 390 .entry-box:hover input[type='checkbox'], 391 .entry-box input[type='checkbox']:focus { 392 opacity: 1; 393 } 394 395 .site-domain-wrapper input[type='checkbox']:focus, 396 .entry-box input[type='checkbox']:focus { 397 -webkit-transition: opacity 150ms; 398 } 399 400 .filter-status { 401 -webkit-margin-start: 10px; 402 } 403 404 .filter-status > div { 405 -webkit-flex: 0 0 auto; 406 -webkit-transition: background-color 500ms ease-in-out; 407 border-radius: 3px; 408 display: none; 409 font-size: 11px; 410 height: 14px; 411 line-height: 12px; 412 white-space: nowrap; 413 } 414 415 .filter-status > div.filter-allowed, 416 .filter-status > div.filter-blocked, 417 .filter-status > div.in-content-pack-active, 418 .filter-status > div.in-content-pack-passive, 419 .filter-status > div.blocked-visit-active { 420 display: block; 421 margin: 3px 3px 3px 0; 422 padding: 0 4px; 423 } 424 425 .filter-allowed, 426 .in-content-pack-active { 427 background-color: rgb(141, 240, 127); 428 border: 1px solid rgb(33, 190, 33); 429 color: rgb(54, 54, 54); 430 } 431 432 .filter-blocked { 433 border: 1px solid rgb(207, 207, 207); 434 background-color: rgb(231, 231, 231); 435 color: rgb(54, 54, 54); 436 } 437 438 .in-content-pack-passive { 439 border: 1px solid rgb(155, 224, 163); 440 background-color: rgb(225, 255, 205); 441 color: rgb(148, 148, 148); 442 } 443 444 /* TODO(sergiu): If this is the final icon replace it with a separate resource. 445 */ 446 .blocked-indicator { 447 background: url(../ssl/roadblock_icon.png) no-repeat; 448 background-size: 30%; 449 } 450 451 .blocked-indicator .title { 452 color: rgb(151, 156, 160); 453 } 454 </if> 455 456 .entry-box { 457 background-color: none; 458 } 459 460 .entry-box:hover, 461 .entry-box.contains-focus { 462 background-color: rgb(252, 252, 252); 463 border-radius: 2px; 464 } 465 466 .entry-box-container { 467 display: -webkit-flex; 468 } 469 470 .entry .visit-entry { 471 display: -webkit-flex; 472 min-width: 0; 473 } 474 475 .entry .title { 476 min-width: 0; 477 overflow: hidden; 478 text-overflow: ellipsis; 479 white-space: nowrap; 480 } 481 482 .entry .visit-entry, 483 .site-domain { 484 /* Make room for the favicon. */ 485 -webkit-padding-start: 20px; 486 487 /* Control the favicon appearance. */ 488 background-position-y: center; 489 background-repeat: no-repeat; 490 background-size: 16px; 491 } 492 493 html[dir='rtl'] .entry .visit-entry, 494 html[dir='rtl'] .site-domain { 495 background-position-x: right; 496 } 497 498 .site-domain button { 499 color: rgb(48, 57, 66); 500 } 501 502 .site-domain button:hover { 503 text-decoration: none; 504 } 505 506 .site-domain-arrow { 507 -webkit-transition: -webkit-transform 300ms linear; 508 background: url(../disclosure_triangle_small.png) no-repeat; 509 background-position: 5px 5px; 510 color: rgb(143, 143, 143); 511 height: 21px; 512 margin-right: 2px; 513 opacity: 0.58; 514 text-align: center; 515 width: 21px; 516 } 517 518 .site-domain-arrow.collapse { 519 -webkit-transform: rotate(0); 520 } 521 522 .site-domain-arrow.expand { 523 -webkit-transform: rotate(90deg); 524 } 525 526 html[dir='rtl'] .site-domain-arrow.collapse { 527 -webkit-transform: rotate(90deg); 528 } 529 530 html[dir='rtl'] .site-domain-arrow.expand { 531 -webkit-transform: rotate(180deg); 532 } 533 534 .entry .bookmark-section { 535 -webkit-margin-end: 3px; 536 -webkit-margin-start: 8px; 537 display: inline-block; 538 height: 11px; 539 min-width: 15px; 540 } 541 542 .entry .starred { 543 background: 544 url(../../../../ui/webui/resources/images/star_small.png) no-repeat; 545 } 546 547 .entry .title > a { 548 color: rgb(48, 57, 66); 549 text-decoration: none; 550 } 551 552 .entry .title > a.to-be-removed { 553 text-decoration: line-through; 554 } 555 556 .entry .title > a:hover { 557 text-decoration: underline; 558 } 559 560 .fade-out { 561 -webkit-transition: opacity 200ms; 562 opacity: 0; 563 } 564 565 button.menu-button.drop-down { 566 min-width: 12px; 567 top: 0; 568 } 569 570 #action-menu > [role=menuitem] { 571 line-height: 29px; 572 outline: none; 573 } 574 575 body:not(.has-results) #results-pagination { 576 display: none; 577 } 578 579 #older-button { 580 float: right; 581 } 582 583 html[dir='rtl'] #older-button { 584 float: left; 585 } 586 587 html[dir='ltr'] #newest-button::before { 588 /* Left-pointing double angle quotation mark followed by ' '. */ 589 content: '\00AB\A0'; 590 } 591 592 html[dir='rtl'] #newest-button::after { 593 /* ' ' followed by right-pointing double angle quotation mark. */ 594 content: '\A0\00BB'; 595 } 596 597 html[dir='ltr'] #newer-button::before, 598 html[dir='rtl'] #older-button::before { 599 /* Single left-pointing angle quotation mark followed by ' '. */ 600 content: '\2039\A0'; 601 } 602 603 html[dir='ltr'] #older-button::after, 604 html[dir='rtl'] #newer-button::after { 605 /* 'nbsp;' followed by single right-pointing angle quotation mark. */ 606 content: '\A0\203A'; 607 } 608 609 /* Clear the float to ensure that #results-pagination encloses its children. */ 610 #results-pagination::after { 611 clear: both; 612 content: ''; 613 display: block; 614 height: 0; 615 visibility: hidden; 616 } 617 618 /* Styles for the action menu of visits that come from other devices, triggered 619 by setting the "data-devicename" attribute of the menu. */ 620 621 #action-menu[data-devicename]:not([data-devicename='']) { 622 padding-top: 0; 623 } 624 625 #action-menu[data-devicename]::before { 626 background-color: rgb(245, 245, 245); 627 background-repeat: no-repeat; 628 background-size: 24px; 629 border-bottom: 1px solid rgb(232, 232, 232); 630 color: rgb(151, 156, 160); 631 content: attr(data-devicename); 632 display: block; 633 font-size: 11px; 634 line-height: 29px; 635 margin-bottom: 8px; 636 padding: 0 19px 0 51px; 637 } 638 639 #action-menu[data-devicename='']::before { 640 display: none; 641 } 642 643 #action-menu[data-devicetype='laptop']::before { 644 background-image: url(../../../../ui/webui/resources/images/laptop_small.png); 645 background-position: 18px center; 646 } 647 648 #action-menu[data-devicetype='phone']::before { 649 background-image: url(../../../../ui/webui/resources/images/phone_small.png); 650 background-position: 14px center; 651 padding-left: 43px; 652 } 653 654 #action-menu[data-devicetype='tablet']::before { 655 background-image: url(../../../../ui/webui/resources/images/tablet_small.png); 656 background-position: 17px center; 657 padding-left: 49px; 658 } 659