| 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 |