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 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-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 188 html[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 195 html[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 295 html[dir='rtl'] .site-results { 296 clear: both; 297 } 298 299 h2.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 316 html[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 335 html[dir='rtl'] .entry .title, 336 html[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 460 html[dir='rtl'] .entry .visit-entry, 461 html[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 482 html[dir='rtl'] .site-domain-arrow { 483 -webkit-transform: rotate(180deg); 484 } 485 486 html .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 535 button.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 546 body:not(.has-results) #results-pagination { 547 display: none; 548 } 549 550 #older-button { 551 float: right; 552 } 553 554 html[dir='rtl'] #older-button { 555 float: left; 556 } 557 558 html[dir='ltr'] #newest-button::before { 559 /* Left-pointing double angle quotation mark followed by ' '. */ 560 content: '\00AB\A0'; 561 } 562 563 html[dir='rtl'] #newest-button::after { 564 /* ' ' followed by right-pointing double angle quotation mark. */ 565 content: '\A0\00BB'; 566 } 567 568 html[dir='ltr'] #newer-button::before, 569 html[dir='rtl'] #older-button::before { 570 /* Single left-pointing angle quotation mark followed by ' '. */ 571 content: '\2039\A0'; 572 } 573 574 html[dir='ltr'] #older-button::after, 575 html[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