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