1/* Copyright 2013 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/* Don't use the main frame div when the error is in a subframe. */ 6html[subframe] #main-frame-error { 7 display: none; 8} 9 10/* Don't use the subframe error div when the error is in a main frame. */ 11html:not([subframe]) #sub-frame-error { 12 display: none; 13} 14 15#diagnose-button { 16 float: none; 17 margin-bottom: 10px; 18 margin-inline-start: 0; 19 margin-top: 20px; 20} 21 22h1 { 23 margin-top: 0; 24 word-wrap: break-word; 25} 26 27h1 span { 28 font-weight: 500; 29} 30 31h2 { 32 color: var(--heading-color); 33 font-size: 1.2em; 34 font-weight: normal; 35 margin: 10px 0; 36} 37 38a { 39 text-decoration: none; 40} 41 42.icon { 43 -webkit-user-select: none; 44 display: inline-block; 45} 46 47.icon-generic { 48 /** 49 * Can't access chrome://theme/IDR_ERROR_NETWORK_GENERIC from an untrusted 50 * renderer process, so embed the resource manually. 51 */ 52 content: -webkit-image-set( 53 url(../../resources/default_100_percent/neterror/error_network_generic.png) 1x, 54 url(../../resources/default_200_percent/neterror/error_network_generic.png) 2x); 55} 56 57.icon-offline { 58 content: -webkit-image-set( 59 url(images/default_100_percent/offline/100-error-offline.png) 1x, 60 url(images/default_200_percent/offline/200-error-offline.png) 2x); 61 position: relative; 62} 63 64.icon-disabled { 65 content: -webkit-image-set( 66 url(images/default_100_percent/offline/100-disabled.png) 1x, 67 url(images/default_200_percent/offline/200-disabled.png) 2x); 68 width: 112px; 69} 70 71.error-code { 72 display: block; 73 font-size: .8em; 74} 75 76#content-top { 77 margin: 20px; 78} 79 80#help-box-inner { 81 background-color: #f9f9f9; 82 border-top: 1px solid #EEE; 83 color: #444; 84 padding: 20px; 85 text-align: start; 86} 87 88.hidden { 89 display: none; 90} 91 92#suggestion { 93 margin-top: 15px; 94} 95 96#suggestions-list a { 97 color: var(--google-blue-600); 98} 99 100#suggestions-list p { 101 margin-block-end: 0; 102} 103 104#suggestions-list ul { 105 margin-top: 0; 106} 107 108.single-suggestion { 109 list-style-type: none; 110 padding-left: 0; 111} 112 113#short-suggestion { 114 margin-top: 5px; 115} 116 117#error-information-button { 118 content: url(images/help_outline.svg); 119 height: 24px; 120 vertical-align: -.15em; 121 width: 24px; 122} 123 124.use-popup-container#error-information-popup-container 125 #error-information-popup { 126 align-items: center; 127 background-color: var(--popup-container-background-color); 128 display: flex; 129 height: 100%; 130 left: 0; 131 position: fixed; 132 top: 0; 133 width: 100%; 134 z-index: 100; 135} 136 137.use-popup-container#error-information-popup-container 138 #error-information-popup-content > p { 139 margin-bottom: 11px; 140 margin-inline-start: 20px; 141} 142 143.use-popup-container#error-information-popup-container #suggestions-list ul { 144 margin-inline-start: 15px; 145} 146 147.use-popup-container#error-information-popup-container 148 #error-information-popup-box { 149 background-color: var(--background-color); 150 left: 5%; 151 padding-bottom: 15px; 152 padding-top: 15px; 153 position: fixed; 154 width: 90%; 155 z-index: 101; 156} 157 158.use-popup-container#error-information-popup-container div.error-code { 159 margin-inline-start: 20px; 160} 161 162.use-popup-container#error-information-popup-container #suggestions-list p { 163 margin-inline-start: 20px; 164} 165 166:not(.use-popup-container)#error-information-popup-container 167 #error-information-popup-close { 168 display: none; 169} 170 171#error-information-popup-close { 172 margin-bottom: 0px; 173 margin-inline-end: 35px; 174 margin-top: 15px; 175 text-align: end; 176} 177 178.link-button { 179 color: rgb(66, 133, 244); 180 display: inline-block; 181 font-weight: bold; 182 text-transform: uppercase; 183} 184 185#sub-frame-error-details { 186<if expr="is_ios"> 187 font-size: 8pt; 188</if> 189 color: #8F8F8F; 190<if expr="not is_android and not is_ios"> 191 /* Not done on mobile for performance reasons. */ 192 text-shadow: 0 1px 0 rgba(255,255,255,0.3); 193</if> 194} 195 196[jscontent=hostName], 197[jscontent=failedUrl] { 198 overflow-wrap: break-word; 199} 200 201#search-container { 202 /* Prevents a space between controls. */ 203 display: flex; 204 margin-top: 20px; 205} 206 207#search-box { 208 border: 1px solid #cdcdcd; 209 flex-grow: 1; 210 font-size: 1em; 211 height: 26px; 212 margin-right: 0; 213 padding: 1px 9px; 214} 215 216#search-box:focus { 217 border: 1px solid rgb(93, 154, 255); 218 outline: none; 219} 220 221#search-button { 222 border: none; 223 border-bottom-left-radius: 0; 224 border-top-left-radius: 0; 225 box-shadow: none; 226 display: flex; 227 height: 30px; 228 margin: 0; 229 padding: 0; 230 width: 60px; 231} 232 233#search-image { 234 content: 235 -webkit-image-set( 236 url(../../resources/default_100_percent/neterror/search_glass.png) 1x, 237 url(../../resources/default_200_percent/neterror/search_glass.png) 2x); 238 margin: auto; 239} 240 241.secondary-button { 242 background: #d9d9d9; 243 color: #696969; 244 margin-inline-end: 16px; 245} 246 247.snackbar { 248 background: #323232; 249 border-radius: 2px; 250 bottom: 24px; 251 box-sizing: border-box; 252 color: #fff; 253 font-size: .87em; 254 left: 24px; 255 max-width: 568px; 256 min-width: 288px; 257 opacity: 0; 258 padding: 16px 24px 12px; 259 position: fixed; 260 transform: translateY(90px); 261 will-change: opacity, transform; 262 z-index: 999; 263} 264 265.snackbar-show { 266 -webkit-animation: 267 show-snackbar .25s cubic-bezier(0.0, 0.0, 0.2, 1) forwards, 268 hide-snackbar .25s cubic-bezier(0.4, 0.0, 1, 1) forwards 5s; 269} 270 271@-webkit-keyframes show-snackbar { 272 100% { 273 opacity: 1; 274 transform: translateY(0); 275 } 276} 277 278@-webkit-keyframes hide-snackbar { 279 0% { 280 opacity: 1; 281 transform: translateY(0); 282 } 283 100% { 284 opacity: 0; 285 transform: translateY(90px); 286 } 287} 288 289.suggestions { 290 margin-top: 18px; 291} 292 293.suggestion-header { 294 font-weight: bold; 295 margin-bottom: 4px; 296} 297 298.suggestion-body { 299 color: #777; 300} 301 302/* Increase line height at higher resolutions. */ 303@media (min-width: 641px) and (min-height: 641px) { 304 #help-box-inner { 305 line-height: 18px; 306 } 307} 308 309/* Decrease padding at low sizes. */ 310@media (max-width: 640px), (max-height: 640px) { 311 h1 { 312 margin: 0 0 15px; 313 } 314 #content-top { 315 margin: 15px; 316 } 317 #help-box-inner { 318 padding: 20px; 319 } 320 .suggestions { 321 margin-top: 10px; 322 } 323 .suggestion-header { 324 margin-bottom: 0; 325 } 326} 327 328#download-link, #download-link-clicked { 329 margin-bottom: 30px; 330 margin-top: 30px; 331} 332 333#download-link-clicked { 334 color: #BBB; 335} 336 337#download-link:before, #download-link-clicked:before { 338 content: url(images/download-blue.svg); 339 display: inline-block; 340 margin-inline-end: 4px; 341 vertical-align: -webkit-baseline-middle; 342} 343 344#download-link-clicked:before { 345 width: 0px; 346 opacity: 0; 347} 348 349#offline-content-list-visibility-card { 350 border: 1px solid white; 351 border-radius: 8px; 352 display: flex; 353 font-size: .8em; 354 justify-content: space-between; 355 line-height: 1; 356} 357 358#offline-content-list.list-hidden #offline-content-list-visibility-card { 359 border-color: rgb(218, 220, 224); 360} 361 362#offline-content-list-visibility-card > div { 363 padding: 1em; 364} 365 366#offline-content-list-title { 367 color: var(--google-gray-700); 368} 369 370#offline-content-list-show-text, #offline-content-list-hide-text { 371 color: rgb(66, 133, 244); 372} 373 374/* Hides the "hide" text div when the offline content list is collapsed/hidden 375 * and, alternatively, hides the "show" text div when the offline content list 376 * is expanded/shown. 377 */ 378#offline-content-list.list-hidden #offline-content-list-hide-text, 379#offline-content-list:not(.list-hidden) #offline-content-list-show-text { 380 display: none; 381} 382 383/* Controls the animation of the offline content list when it is expanded/shown. 384 */ 385#offline-content-suggestions { 386 /* Max-height has to be set for the height animation to work. The chosen value 387 * is a little greater than the maximum height the list will have, when all 388 * suggestions have images, so that it is never clamped. This makes so that 389 * when the actual height is smaller then the animation is not as smooth. 390 */ 391 max-height: 27em; 392 transition: max-height 0.2s ease-in, visibility 0s 0.2s, 393 opacity 0.2s 0.2s linear; 394} 395 396/* Controls the animation of the offline content list when it is 397 * collapsed/hidden. 398 */ 399#offline-content-list.list-hidden #offline-content-suggestions { 400 max-height: 0; 401 visibility: hidden; 402 opacity: 0; 403 transition: opacity 0.2s linear, visibility 0s 0.2s, 404 max-height 0.2s 0.2s ease-out; 405} 406 407#offline-content-list { 408 margin-inline-start: -5%; 409 width: 110%; 410} 411 412/* The selectors below adjust the "overflow" of the suggestion cards contents 413 * based on the same screen size based strategy used for the main frame, which 414 * is applied by the `interstitial-wrapper` class. */ 415@media (max-width: 420px) { 416 #offline-content-list { 417 margin-inline-start: -2.5%; 418 width: 105%; 419 } 420} 421@media (max-width: 420px) and (orientation: portrait), 422 (max-height: 560px) { 423 #offline-content-list { 424 margin-inline-start: -12px; 425 width: calc(100% + 24px); 426 } 427} 428 429.suggestion-with-image .offline-content-suggestion-thumbnail { 430 flex-basis: 8.2em; 431 flex-shrink: 0; 432} 433 434.suggestion-with-image .offline-content-suggestion-thumbnail > img { 435 height: 100%; 436 width: 100%; 437} 438 439.suggestion-with-image #offline-content-list:not(.is-rtl) 440.offline-content-suggestion-thumbnail > img { 441 border-bottom-right-radius: 7px; 442 border-top-right-radius: 7px; 443} 444 445.suggestion-with-image #offline-content-list.is-rtl 446.offline-content-suggestion-thumbnail > img { 447 border-bottom-left-radius: 7px; 448 border-top-left-radius: 7px; 449} 450 451.suggestion-with-icon .offline-content-suggestion-thumbnail { 452 align-items: center; 453 display: flex; 454 justify-content: center; 455 min-height: 4.2em; 456 min-width: 4.2em; 457} 458 459.suggestion-with-icon .offline-content-suggestion-thumbnail > div { 460 align-items: center; 461 background-color: rgb(241, 243, 244); 462 border-radius: 50%; 463 display: flex; 464 height: 2.3em; 465 justify-content: center; 466 width: 2.3em; 467} 468 469.suggestion-with-icon .offline-content-suggestion-thumbnail > div > img { 470 height: 1.45em; 471 width: 1.45em; 472} 473 474.offline-content-suggestion-favicon { 475 height: 1em; 476 margin-inline-end: 0.4em; 477 width: 1.4em; 478} 479 480.offline-content-suggestion-favicon > img { 481 height: 1.4em; 482 width: 1.4em; 483} 484 485.no-favicon .offline-content-suggestion-favicon { 486 display: none; 487} 488 489.image-video { 490 content: url(images/video.svg); 491} 492 493.image-music-note { 494 content: url(images/music-note.svg); 495} 496 497.image-earth { 498 content: url(images/generic-globe.svg); 499} 500 501.image-file { 502 content: url(images/file.svg); 503} 504 505.offline-content-suggestion-texts { 506 display: flex; 507 flex-direction: column; 508 justify-content: space-between; 509 line-height: 1.3; 510 padding: .9em; 511 width: 100%; 512} 513 514.offline-content-suggestion-title { 515 -webkit-box-orient: vertical; 516 -webkit-line-clamp: 3; 517 color: rgb(32, 33, 36); 518 display: -webkit-box; 519 font-size: 1.1em; 520 overflow: hidden; 521 text-overflow: ellipsis; 522} 523 524div.offline-content-suggestion { 525 align-items: stretch; 526 border: 1px solid rgb(218, 220, 224); 527 border-radius: 8px; 528 display: flex; 529 justify-content: space-between; 530 margin-bottom: .8em; 531} 532 533.suggestion-with-image { 534 flex-direction: row; 535 height: 8.2em; 536 max-height: 8.2em; 537} 538 539.suggestion-with-icon { 540 flex-direction: row-reverse; 541 height: 4.2em; 542 max-height: 4.2em; 543} 544 545.suggestion-with-icon .offline-content-suggestion-title { 546 -webkit-line-clamp: 1; 547 word-break: break-all; 548} 549 550.suggestion-with-icon .offline-content-suggestion-texts { 551 padding-inline-start: 0px; 552} 553 554.offline-content-suggestion-attribution-freshness { 555 color: rgb(95, 99, 104); 556 display: flex; 557 font-size: .8em; 558 line-height: 1.7em; 559} 560 561.offline-content-suggestion-attribution { 562 -webkit-box-orient: vertical; 563 -webkit-line-clamp: 1; 564 display: -webkit-box; 565 flex-shrink: 1; 566 margin-inline-end: 0.3em; 567 overflow-wrap: break-word; 568 overflow: hidden; 569 text-overflow: ellipsis; 570 word-break: break-all; 571} 572 573.no-attribution .offline-content-suggestion-attribution { 574 display: none; 575} 576 577.offline-content-suggestion-freshness:before { 578 content: '-'; 579 display: inline-block; 580 flex-shrink: 0; 581 margin-inline-end: .1em; 582 margin-inline-start: .1em; 583} 584 585.no-attribution .offline-content-suggestion-freshness:before { 586 display: none; 587} 588 589.offline-content-suggestion-freshness { 590 flex-shrink: 0; 591} 592 593.suggestion-with-image .offline-content-suggestion-pin-spacer { 594 flex-shrink: 1; 595 flex-grow: 100; 596} 597 598.suggestion-with-image .offline-content-suggestion-pin { 599 content: url(images/offline_pin.svg); 600 flex-shrink: 0; 601 height: 1.4em; 602 margin-inline-start: .4em; 603 width: 1.4em; 604} 605 606/* Controls the animation (and a bit more) of the launch-downloads-home action 607 * button when the offline content list is expanded/shown. 608 */ 609#offline-content-list-action { 610 text-align: center; 611 transition: visibility 0s 0.2s, opacity 0.2s 0.2s linear; 612} 613 614/* Controls the animation of the launch-downloads-home action button when the 615 * offline content list is collapsed/hidden. 616 */ 617#offline-content-list.list-hidden #offline-content-list-action { 618 visibility: hidden; 619 opacity: 0; 620 transition: opacity 0.2s linear, visibility 0s 0.2s; 621} 622 623#cancel-save-page-button { 624 background-image: url(images/animated_offline_pin.svg); 625 background-position: right 27px center; 626 background-repeat: no-repeat; 627 border: 1px solid var(--google-gray-300); 628 border-radius: 5px; 629 color: var(--google-gray-700); 630 margin-bottom: 26px; 631 padding-bottom: 16px; 632 padding-inline-end: 88px; 633 padding-inline-start: 16px; 634 padding-top: 16px; 635 text-align: start; 636} 637 638html[dir="rtl"] #cancel-save-page-button { 639 background-position: left 27px center; 640} 641 642#save-page-for-later-button { 643 display: flex; 644 justify-content: start; 645} 646 647#save-page-for-later-button a:before { 648 content: url(images/download-blue.svg); 649 display: inline-block; 650 margin-inline-end: 4px; 651 vertical-align: -webkit-baseline-middle; 652} 653 654.hidden#save-page-for-later-button { 655 display: none; 656} 657 658/* Don't allow overflow when in a subframe. */ 659html[subframe] body { 660 overflow: hidden; 661} 662 663#sub-frame-error { 664 -webkit-align-items: center; 665 background-color: #DDD; 666 display: -webkit-flex; 667 -webkit-flex-flow: column; 668 height: 100%; 669 -webkit-justify-content: center; 670 left: 0; 671 position: absolute; 672 text-align: center; 673 top: 0; 674 transition: background-color .2s ease-in-out; 675 width: 100%; 676} 677 678#sub-frame-error:hover { 679 background-color: #EEE; 680} 681 682#sub-frame-error .icon-generic { 683 margin: 0 0 16px; 684} 685 686#sub-frame-error-details { 687 margin: 0 10px; 688 text-align: center; 689 visibility: hidden; 690} 691 692/* Show details only when hovering. */ 693#sub-frame-error:hover #sub-frame-error-details { 694 visibility: visible; 695} 696 697/* If the iframe is too small, always hide the error code. */ 698/* TODO(mmenke): See if overflow: no-display works better, once supported. */ 699@media (max-width: 200px), (max-height: 95px) { 700 #sub-frame-error-details { 701 display: none; 702 } 703} 704 705/* Adjust icon for small embedded frames in apps. */ 706@media (max-height: 100px) { 707 #sub-frame-error .icon-generic { 708 height: auto; 709 margin: 0; 710 padding-top: 0; 711 width: 25px; 712 } 713} 714 715/* details-button is special; it's a <button> element that looks like a link. */ 716#details-button { 717 box-shadow: none; 718 min-width: 0; 719} 720 721/* Styles for platform dependent separation of controls and details button. */ 722.suggested-left > #control-buttons, 723.suggested-right > #details-button { 724 float: left; 725} 726 727.suggested-right > #control-buttons, 728.suggested-left > #details-button { 729 float: right; 730} 731 732.suggested-left .secondary-button { 733 margin-inline-end: 0px; 734 margin-inline-start: 16px; 735} 736 737#details-button.singular { 738 float: none; 739} 740 741/* download-button shows both icon and text. */ 742#download-button { 743 padding-bottom: 4px; 744 padding-top: 4px; 745 position: relative; 746} 747 748#download-button:before { 749 background: -webkit-image-set( 750 url(../../resources/default_100_percent/neterror/download.png) 1x, 751 url(../../resources/default_200_percent/neterror/download.png) 2x) 752 no-repeat; 753 content: ''; 754 display: inline-block; 755 width: 24px; 756 height: 24px; 757 margin-inline-end: 4px; 758 margin-inline-start: -4px; 759 vertical-align: middle; 760} 761 762#download-button:disabled { 763 background: rgb(180, 206, 249); 764 color: rgb(255, 255, 255); 765} 766 767/* 768TODO(https://crbug.com/852872): UI for offline suggested content is incomplete. 769*/ 770.suggested-thumbnail { 771 width: 25vw; 772 height: 25vw; 773} 774 775/* Alternate dino page button styles */ 776#control-buttons .reload-button-alternate:disabled { 777 background: #ccc; 778 color: #fff; 779 font-size: 14px; 780 height: 48px; 781} 782 783#buttons::after { 784 clear: both; 785 content: ''; 786 display: block; 787 width: 100%; 788} 789 790/* Offline page */ 791.offline { 792 transition: filter 1.5s cubic-bezier(0.65, 0.05, 0.36, 1), 793 background-color 1.5s cubic-bezier(0.65, 0.05, 0.36, 1); 794<if expr="not is_ios"> 795 will-change: filter, background-color; 796</if> 797} 798 799.offline body { 800 transition: background-color 1.5s cubic-bezier(0.65, 0.05, 0.36, 1); 801} 802 803.offline #main-message > p { 804 display: none; 805} 806 807/* iOS WKWebView inverts the background color set at the HTML level 808whereas Blink does not. */ 809.offline.inverted { 810 filter: invert(1); 811<if expr="not is_ios"> 812 background-color: #000; 813</if> 814<if expr="is_ios"> 815 background-color: #fff; 816</if> 817} 818 819.offline.inverted body { 820 background-color: #fff; 821} 822 823.offline .interstitial-wrapper { 824 color: var(--text-color); 825 font-size: 1em; 826 line-height: 1.55; 827 margin: 0 auto; 828 max-width: 600px; 829 padding-top: 100px; 830 width: 100%; 831} 832 833.offline .runner-container { 834 direction: ltr; 835 height: 150px; 836 max-width: 600px; 837 overflow: hidden; 838 position: absolute; 839 top: 35px; 840 width: 44px; 841} 842 843.offline .runner-canvas { 844 height: 150px; 845 max-width: 600px; 846 opacity: 1; 847 overflow: hidden; 848 position: absolute; 849 top: 0; 850 z-index: 10; 851} 852 853.offline .controller { 854 background: rgba(247,247,247, .1); 855 height: 100vh; 856 left: 0; 857 position: absolute; 858 top: 0; 859 width: 100vw; 860 z-index: 9; 861} 862 863#offline-resources { 864 display: none; 865} 866 867#offline-instruction { 868 image-rendering: pixelated; 869 left: 0; 870 margin: auto; 871 position: absolute; 872 right: 0; 873 top: 60px; 874 width: fit-content; 875} 876 877@media (max-width: 420px) { 878 #download-button { 879 padding-bottom: 12px; 880 padding-top: 12px; 881 } 882 883 .suggested-left > #control-buttons, 884 .suggested-right > #control-buttons { 885 float: none; 886 } 887 888 .snackbar { 889 left: 0; 890 bottom: 0; 891 width: 100%; 892 border-radius: 0; 893 } 894} 895 896@media (max-height: 350px) { 897 h1 { 898 margin: 0 0 15px; 899 } 900 901 .icon-offline { 902 margin: 0 0 10px; 903 } 904 905 .interstitial-wrapper { 906 margin-top: 5%; 907 } 908 909 .nav-wrapper { 910 margin-top: 30px; 911 } 912} 913 914@media (min-width: 420px) and (max-width: 736px) and 915 (min-height: 240px) and (max-height: 420px) and 916 (orientation:landscape) { 917 .interstitial-wrapper { 918 margin-bottom: 100px; 919 } 920} 921 922@media (max-width: 360px) and (max-height: 480px) { 923 .offline .interstitial-wrapper { 924 padding-top: 60px; 925 } 926 927 .offline .runner-container { 928 top: 8px; 929 } 930} 931 932@media (min-height: 240px) and (orientation: landscape) { 933 .offline .interstitial-wrapper { 934 margin-bottom: 90px; 935 } 936 937 .icon-offline { 938 margin-bottom: 20px; 939 } 940} 941 942@media (max-height: 320px) and (orientation: landscape) { 943 .icon-offline { 944 margin-bottom: 0; 945 } 946 947 .offline .runner-container { 948 top: 10px; 949 } 950} 951 952@media (max-width: 240px) { 953 button { 954 padding-left: 12px; 955 padding-right: 12px; 956 } 957 958 .interstitial-wrapper { 959 overflow: inherit; 960 padding: 0 8px; 961 } 962} 963 964@media (max-width: 120px) { 965 button { 966 width: auto; 967 } 968} 969 970.arcade-mode, 971.arcade-mode .runner-container, 972.arcade-mode .runner-canvas { 973 image-rendering: pixelated; 974 max-width: 100%; 975 overflow: hidden; 976} 977 978.arcade-mode #buttons, 979.arcade-mode #main-content { 980 opacity: 0; 981 overflow: hidden; 982} 983 984.arcade-mode .interstitial-wrapper { 985 height: 100vh; 986 max-width: 100%; 987 overflow: hidden; 988} 989 990.arcade-mode .runner-container { 991 left: 0; 992 margin: auto; 993 right: 0; 994 transform-origin: top center; 995 transition: transform 250ms cubic-bezier(0.4, 0.0, 1, 1) .4s; 996 z-index: 2; 997} 998 999@media (prefers-color-scheme: dark) { 1000 .icon { 1001 filter: invert(1); 1002 } 1003 1004 .offline .runner-canvas { 1005 filter: invert(1); 1006 } 1007 1008 .offline.inverted { 1009 filter: invert(0); 1010 <if expr="not is_ios"> 1011 background-color: var(--background-color); 1012 </if> 1013 <if expr="is_ios"> 1014 background-color: #fff; 1015 </if> 1016 } 1017 1018 .offline.inverted body { 1019 background-color: #fff; 1020 } 1021 1022 #suggestions-list a { 1023 color: var(--link-color); 1024 } 1025 1026 #error-information-button { 1027 filter: invert(0.6); 1028 } 1029} 1030