Instantly share code, notes, and snippets.
unavailable.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html dir="ltr" lang="en"><head> | |
<meta charset="utf-8"> | |
<meta name="color-scheme" content="light dark"> | |
<meta name="theme-color" content="#fff"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0, | |
maximum-scale=1.0, user-scalable=no"> | |
<title>www.contractbook.co</title> | |
<style>/* Copyright 2017 The Chromium Authors. All rights reserved. | |
* Use of this source code is governed by a BSD-style license that can be | |
* found in the LICENSE file. */ | |
a { | |
color: var(--link-color); | |
} | |
body { | |
--background-color: #fff; | |
--error-code-color: var(--google-gray-700); | |
--google-blue-100: rgb(210, 227, 252); | |
--google-blue-300: rgb(138, 180, 248); | |
--google-blue-600: rgb(26, 115, 232); | |
--google-blue-700: rgb(25, 103, 210); | |
--google-gray-100: rgb(241, 243, 244); | |
--google-gray-300: rgb(218, 220, 224); | |
--google-gray-500: rgb(154, 160, 166); | |
--google-gray-50: rgb(248, 249, 250); | |
--google-gray-600: rgb(128, 134, 139); | |
--google-gray-700: rgb(95, 99, 104); | |
--google-gray-800: rgb(60, 64, 67); | |
--google-gray-900: rgb(32, 33, 36); | |
--heading-color: var(--google-gray-900); | |
--link-color: rgb(88, 88, 88); | |
--popup-container-background-color: rgba(0,0,0,.65); | |
--primary-button-fill-color-active: var(--google-blue-700); | |
--primary-button-fill-color: var(--google-blue-600); | |
--primary-button-text-color: #fff; | |
--quiet-background-color: rgb(247, 247, 247); | |
--secondary-button-border-color: var(--google-gray-500); | |
--secondary-button-fill-color: #fff; | |
--secondary-button-hover-border-color: var(--google-gray-600); | |
--secondary-button-hover-fill-color: var(--google-gray-50); | |
--secondary-button-text-color: var(--google-gray-700); | |
--small-link-color: var(--google-gray-700); | |
--text-color: var(--google-gray-700); | |
background: var(--background-color); | |
color: var(--text-color); | |
word-wrap: break-word; | |
} | |
.nav-wrapper .secondary-button { | |
background: var(--secondary-button-fill-color); | |
border: 1px solid var(--secondary-button-border-color); | |
color: var(--secondary-button-text-color); | |
float: none; | |
margin: 0; | |
padding: 8px 16px; | |
} | |
.hidden { | |
display: none; | |
} | |
html { | |
-webkit-text-size-adjust: 100%; | |
font-size: 125%; | |
} | |
.icon { | |
background-repeat: no-repeat; | |
background-size: 100%; | |
} | |
@media (prefers-color-scheme: dark) { | |
body { | |
--background-color: var(--google-gray-900); | |
--error-code-color: var(--google-gray-500); | |
--heading-color: var(--google-gray-500); | |
--link-color: var(--google-blue-300); | |
--primary-button-fill-color-active: rgb(129, 162, 208); | |
--primary-button-fill-color: var(--google-blue-300); | |
--primary-button-text-color: var(--google-gray-900); | |
--quiet-background-color: var(--background-color); | |
--secondary-button-border-color: var(--google-gray-700); | |
--secondary-button-fill-color: var(--google-gray-900); | |
--secondary-button-hover-fill-color: rgb(48, 51, 57); | |
--secondary-button-text-color: var(--google-blue-300); | |
--small-link-color: var(--google-blue-300); | |
--text-color: var(--google-gray-500); | |
} | |
} | |
</style> | |
<style>/* Copyright 2014 The Chromium Authors. All rights reserved. | |
Use of this source code is governed by a BSD-style license that can be | |
found in the LICENSE file. */ | |
button { | |
border: 0; | |
border-radius: 4px; | |
box-sizing: border-box; | |
color: var(--primary-button-text-color); | |
cursor: pointer; | |
float: right; | |
font-size: .875em; | |
margin: 0; | |
padding: 8px 16px; | |
transition: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1); | |
user-select: none; | |
} | |
[dir='rtl'] button { | |
float: left; | |
} | |
.bad-clock button, | |
.captive-portal button, | |
.insecure-form button, | |
.lookalike-url button, | |
.main-frame-blocked button, | |
.neterror button, | |
.offline button, | |
.pdf button, | |
.ssl button, | |
.safe-browsing-billing button { | |
background: var(--primary-button-fill-color); | |
} | |
button:active { | |
background: var(--primary-button-fill-color-active); | |
outline: 0; | |
} | |
#debugging { | |
display: inline; | |
overflow: auto; | |
} | |
.debugging-content { | |
line-height: 1em; | |
margin-bottom: 0; | |
margin-top: 1em; | |
} | |
.debugging-content-fixed-width { | |
display: block; | |
font-family: monospace; | |
font-size: 1.2em; | |
margin-top: 0.5em; | |
} | |
.debugging-title { | |
font-weight: bold; | |
} | |
#details { | |
margin: 0 0 50px; | |
} | |
#details p:not(:first-of-type) { | |
margin-top: 20px; | |
} | |
.secondary-button:active { | |
border-color: white; | |
box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), | |
0 2px 6px 2px rgba(60, 64, 67, .15); | |
} | |
.secondary-button:hover { | |
background: var(--secondary-button-hover-fill-color); | |
border-color: var(--secondary-button-hover-border-color); | |
text-decoration: none; | |
} | |
.error-code { | |
color: var(--error-code-color); | |
font-size: .86667em; | |
text-transform: uppercase; | |
margin-top: 12px; | |
} | |
#error-debugging-info { | |
font-size: 0.8em; | |
} | |
h1 { | |
color: var(--heading-color); | |
font-size: 1.6em; | |
font-weight: normal; | |
line-height: 1.25em; | |
margin-bottom: 16px; | |
} | |
h2 { | |
font-size: 1.2em; | |
font-weight: normal; | |
} | |
.icon { | |
height: 72px; | |
margin: 0 0 40px; | |
width: 72px; | |
} | |
input[type=checkbox] { | |
opacity: 0; | |
} | |
input[type=checkbox]:focus ~ .checkbox:after { | |
outline: -webkit-focus-ring-color auto 5px; | |
} | |
.interstitial-wrapper { | |
box-sizing: border-box; | |
font-size: 1em; | |
line-height: 1.6em; | |
margin: 14vh auto 0; | |
max-width: 600px; | |
width: 100%; | |
} | |
#main-message > p { | |
display: inline; | |
} | |
#extended-reporting-opt-in { | |
font-size: .875em; | |
margin-top: 32px; | |
} | |
#extended-reporting-opt-in label { | |
display: grid; | |
grid-template-columns: 1.8em 1fr; | |
position: relative; | |
} | |
#enhanced-protection-message { | |
border-radius: 4px; | |
font-size: 1em; | |
margin-top: 32px; | |
padding: 10px 5px; | |
} | |
#enhanced-protection-message label { | |
display: grid; | |
grid-template-columns: 2.5em 1fr; | |
position: relative; | |
} | |
#enhanced-protection-message div { | |
margin: 0.5em; | |
} | |
#enhanced-protection-message .icon { | |
height: 1.5em; | |
vertical-align: middle; | |
width: 1.5em; | |
} | |
.nav-wrapper { | |
margin-top: 51px; | |
} | |
.nav-wrapper::after { | |
clear: both; | |
content: ''; | |
display: table; | |
width: 100%; | |
} | |
.small-link { | |
color: var(--small-link-color); | |
font-size: .875em; | |
} | |
.checkboxes { | |
flex: 0 0 24px; | |
} | |
.checkbox { | |
--padding: .9em; | |
background: transparent; | |
display: block; | |
height: 1em; | |
left: -1em; | |
padding-inline-start: var(--padding); | |
position: absolute; | |
right: 0; | |
top: -.5em; | |
width: 1em; | |
} | |
.checkbox::after { | |
border: 1px solid white; | |
border-radius: 2px; | |
content: ''; | |
height: 1em; | |
position: absolute; | |
top: var(--padding); | |
left: var(--padding); | |
width: 1em; | |
} | |
.checkbox::before { | |
background: transparent; | |
border: 2px solid white; | |
border-right-width: 0; | |
border-top-width: 0; | |
content: ''; | |
height: .2em; | |
left: calc(.3em + var(--padding)); | |
opacity: 0; | |
position: absolute; | |
top: calc(.3em + var(--padding)); | |
transform: rotate(-45deg); | |
width: .5em; | |
} | |
input[type=checkbox]:checked ~ .checkbox::before { | |
opacity: 1; | |
} | |
#recurrent-error-message { | |
background: #ededed; | |
border-radius: 4px; | |
padding: 12px 16px; | |
margin-top: 12px; | |
margin-bottom: 16px; | |
} | |
.showing-recurrent-error-message #extended-reporting-opt-in { | |
margin-top: 16px; | |
} | |
.showing-recurrent-error-message #enhanced-protection-message { | |
margin-top: 16px; | |
} | |
@media (max-width: 700px) { | |
.interstitial-wrapper { | |
padding: 0 10%; | |
} | |
#error-debugging-info { | |
overflow: auto; | |
} | |
} | |
@media (max-width: 420px) { | |
button, | |
[dir='rtl'] button, | |
.small-link { | |
float: none; | |
font-size: .825em; | |
font-weight: 500; | |
margin: 0; | |
width: 100%; | |
} | |
button { | |
padding: 16px 24px; | |
} | |
#details { | |
margin: 20px 0 20px 0; | |
} | |
#details p:not(:first-of-type) { | |
margin-top: 10px; | |
} | |
.secondary-button:not(.hidden) { | |
display: block; | |
margin-top: 20px; | |
text-align: center; | |
width: 100%; | |
} | |
.interstitial-wrapper { | |
padding: 0 5%; | |
} | |
#extended-reporting-opt-in { | |
margin-top: 24px; | |
} | |
#enhanced-protection-message { | |
margin-top: 24px; | |
} | |
.nav-wrapper { | |
margin-top: 30px; | |
} | |
} | |
/** | |
* Mobile specific styling. | |
* Navigation buttons are anchored to the bottom of the screen. | |
* Details message replaces the top content in its own scrollable area. | |
*/ | |
@media (max-width: 420px) { | |
.nav-wrapper .secondary-button { | |
border: 0; | |
margin: 16px 0 0; | |
margin-inline-end: 0; | |
padding-bottom: 16px; | |
padding-top: 16px; | |
} | |
} | |
/* Fixed nav. */ | |
@media (min-width: 240px) and (max-width: 420px) and | |
(min-height: 401px), | |
(min-width: 421px) and (min-height: 240px) and | |
(max-height: 560px) { | |
body .nav-wrapper { | |
background: var(--background-color); | |
bottom: 0; | |
box-shadow: 0 -12px 24px var(--background-color); | |
left: 0; | |
margin: 0 auto; | |
max-width: 736px; | |
padding-left: 24px; | |
padding-right: 24px; | |
position: fixed; | |
right: 0; | |
width: 100%; | |
z-index: 2; | |
} | |
.interstitial-wrapper { | |
max-width: 736px; | |
} | |
#details, | |
#main-content { | |
padding-bottom: 40px; | |
} | |
#details { | |
padding-top: 5.5vh; | |
} | |
button.small-link { | |
color: var(--google-blue-600); | |
} | |
} | |
@media (max-width: 420px) and (orientation: portrait), | |
(max-height: 560px) { | |
body { | |
margin: 0 auto; | |
} | |
button, | |
[dir='rtl'] button, | |
button.small-link, | |
.nav-wrapper .secondary-button { | |
font-family: Roboto-Regular,Helvetica; | |
font-size: .933em; | |
margin: 6px 0; | |
transform: translatez(0); | |
} | |
.nav-wrapper { | |
box-sizing: border-box; | |
padding-bottom: 8px; | |
width: 100%; | |
} | |
#details { | |
box-sizing: border-box; | |
height: auto; | |
margin: 0; | |
opacity: 1; | |
transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1); | |
} | |
#details.hidden, | |
#main-content.hidden { | |
display: block; | |
height: 0; | |
opacity: 0; | |
overflow: hidden; | |
padding-bottom: 0; | |
transition: none; | |
} | |
h1 { | |
font-size: 1.5em; | |
margin-bottom: 8px; | |
} | |
.icon { | |
margin-bottom: 5.69vh; | |
} | |
.interstitial-wrapper { | |
box-sizing: border-box; | |
margin: 7vh auto 12px; | |
padding: 0 24px; | |
position: relative; | |
} | |
.interstitial-wrapper p { | |
font-size: .95em; | |
line-height: 1.61em; | |
margin-top: 8px; | |
} | |
#main-content { | |
margin: 0; | |
transition: opacity 100ms cubic-bezier(0.4, 0, 0.2, 1); | |
} | |
.small-link { | |
border: 0; | |
} | |
.suggested-left > #control-buttons, | |
.suggested-right > #control-buttons { | |
float: none; | |
margin: 0; | |
} | |
} | |
@media (min-width: 421px) and (min-height: 500px) and (max-height: 560px) { | |
.interstitial-wrapper { | |
margin-top: 10vh; | |
} | |
} | |
@media (min-height: 400px) and (orientation:portrait) { | |
.interstitial-wrapper { | |
margin-bottom: 145px; | |
} | |
} | |
@media (min-height: 299px) { | |
.nav-wrapper { | |
padding-bottom: 16px; | |
} | |
} | |
@media (max-height: 560px) and (min-height: 240px) and (orientation:landscape) { | |
.extended-reporting-has-checkbox #details { | |
padding-bottom: 80px; | |
} | |
} | |
@media (min-height: 500px) and (max-height: 650px) and (max-width: 414px) and | |
(orientation: portrait) { | |
.interstitial-wrapper { | |
margin-top: 7vh; | |
} | |
} | |
@media (min-height: 650px) and (max-width: 414px) and (orientation: portrait) { | |
.interstitial-wrapper { | |
margin-top: 10vh; | |
} | |
} | |
/* Small mobile screens. No fixed nav. */ | |
@media (max-height: 400px) and (orientation: portrait), | |
(max-height: 239px) and (orientation: landscape), | |
(max-width: 419px) and (max-height: 399px) { | |
.interstitial-wrapper { | |
display: flex; | |
flex-direction: column; | |
margin-bottom: 0; | |
} | |
#details { | |
flex: 1 1 auto; | |
order: 0; | |
} | |
#main-content { | |
flex: 1 1 auto; | |
order: 0; | |
} | |
.nav-wrapper { | |
flex: 0 1 auto; | |
margin-top: 8px; | |
order: 1; | |
padding-left: 0; | |
padding-right: 0; | |
position: relative; | |
width: 100%; | |
} | |
button, | |
.nav-wrapper .secondary-button { | |
padding: 16px 24px; | |
} | |
button.small-link { | |
color: var(--google-blue-600); | |
} | |
} | |
@media (max-width: 239px) and (orientation: portrait) { | |
.nav-wrapper { | |
padding-left: 0; | |
padding-right: 0; | |
} | |
} | |
</style> | |
<style>/* Copyright 2013 The Chromium Authors. All rights reserved. | |
* Use of this source code is governed by a BSD-style license that can be | |
* found in the LICENSE file. */ | |
/* Don't use the main frame div when the error is in a subframe. */ | |
html[subframe] #main-frame-error { | |
display: none; | |
} | |
/* Don't use the subframe error div when the error is in a main frame. */ | |
html:not([subframe]) #sub-frame-error { | |
display: none; | |
} | |
#diagnose-button { | |
float: none; | |
margin-bottom: 10px; | |
margin-inline-start: 0; | |
margin-top: 20px; | |
} | |
h1 { | |
margin-top: 0; | |
word-wrap: break-word; | |
} | |
h1 span { | |
font-weight: 500; | |
} | |
h2 { | |
color: var(--heading-color); | |
font-size: 1.2em; | |
font-weight: normal; | |
margin: 10px 0; | |
} | |
a { | |
text-decoration: none; | |
} | |
.icon { | |
-webkit-user-select: none; | |
display: inline-block; | |
} | |
.icon-generic { | |
/** | |
* Can't access chrome://theme/IDR_ERROR_NETWORK_GENERIC from an untrusted | |
* renderer process, so embed the resource manually. | |
*/ | |
content: -webkit-image-set( | |
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABIAQMAAABvIyEEAAAABlBMVEUAAABTU1OoaSf/AAAAAXRSTlMAQObYZgAAAENJREFUeF7tzbEJACEQRNGBLeAasBCza2lLEGx0CxFGG9hBMDDxRy/72O9FMnIFapGylsu1fgoBdkXfUHLrQgdfrlJN1BdYBjQQm3UAAAAASUVORK5CYII=) 1x, | |
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQAQMAAADdiHD7AAAABlBMVEUAAABTU1OoaSf/AAAAAXRSTlMAQObYZgAAAFJJREFUeF7t0cENgDAMQ9FwYgxG6WjpaIzCCAxQxVggFuDiCvlLOeRdHR9yzjncHVoq3npu+wQUrUuJHylSTmBaespJyJQoObUeyxDQb3bEm5Au81c0pSCD8HYAAAAASUVORK5CYII=) 2x); | |
} | |
.icon-offline { | |
content: -webkit-image-set( | |
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABIAQMAAABvIyEEAAAABlBMVEUAAABTU1OoaSf/AAAAAXRSTlMAQObYZgAAAGxJREFUeF7tyMEJwkAQRuFf5ipMKxYQiJ3Z2nSwrWwBA0+DQZcdxEOueaePp9+dQZFB7GpUcURSVU66yVNFj6LFICatThZB6r/ko/pbRpUgilY0Cbw5sNmb9txGXUKyuH7eV25x39DtJXUNPQGJtWFV+BT/QAAAAABJRU5ErkJggg==) 1x, | |
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQBAMAAAAVaP+LAAAAGFBMVEUAAABTU1NNTU1TU1NPT09SUlJSUlJTU1O8B7DEAAAAB3RSTlMAoArVKvVgBuEdKgAAAJ1JREFUeF7t1TEOwyAMQNG0Q6/UE+RMXD9d/tC6womIFSL9P+MnAYOXeTIzMzMzMzMzaz8J9Ri6HoITmuHXhISE8nEh9yxDh55aCEUoTGbbQwjqHwIkRAEiIaG0+0AA9VBMaE89Rogeoww936MQrWdBr4GN/z0IAdQ6nQ/FIpRXDwHcA+JIJcQowQAlFUA0MfQpXLlVQfkzR4igS6ENjknm/wiaGhsAAAAASUVORK5CYII=) 2x); | |
position: relative; | |
} | |
.icon-disabled { | |
content: -webkit-image-set( | |
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHAAAABICAMAAAAZF4G5AAAABlBMVEVMaXFTU1OXUj8tAAAAAXRSTlMAQObYZgAAASZJREFUeAHd11Fq7jAMRGGf/W/6PoWB67YMqv5DybwG/CFjRuR8JBw3+ByiRjgV9W/TJ31P0tBfC6+cj1haUFXKHmVJo5wP98WwQ0ZCbfUc6LQ6VuUBz31ikADkLMkDrfUC4rR6QGW+gF6rx7NaHWCj1Y/W6lf4L7utvgBSt3rBFSS/XBMPUILcJINHCBWYUfpWn4NBi1ZfudIc3rf6/NGEvEA+AsYTJozmXemjXeLZAov+mnkN2HfzXpMSVQDnGw++57qNJ4D1xitA2sJ+VAWMygSEaYf2mYPTjZfk2K8wmP7HLIH5Mg4/pP+PEcDzUvDMvYbs/2NWwPO5vBdMZE4EE5UTQLiBFDaUlTDPBRoJ9HdAYIkIo06og3BNXtCzy7zA1aXk5x+tJARq63eAygAAAABJRU5ErkJggg==) 1x, | |
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOAAAACQAQMAAAArwfVjAAAABlBMVEVMaXFTU1OXUj8tAAAAAXRSTlMAQObYZgAAAYdJREFUeF7F1EFqwzAUBNARAmVj0FZe5QoBH6BX+dn4GlY2PYNzGx/A0CvkCIJuvIraKJKbgBvzf2g62weDGD7CYggpfFReis4J0ey9EGFIiEQQojFSlA9kSIiqd0KkFjKsewgRbStEN19mxUPTtmW9HQ/h6tyqNQ8NlSMZdzyE6qkoE0trVYGFm0n1WYeBhduzwbwBC7voS+vIxfeMjeaiLxsMMtQNwMPtuew+DjzcTHk8YMfDknEcIUOtf2lVfgVH3K4Xv5PRYAXRVMtItIJ3rfaCIVn9DsTH2NxisAVRex2Hh3hX+/mRUR08bAwPEYsI51ZxWH4Q0SpicQRXeyEaIug48FEdegARfMz/tADVsRciwTAxW308ehmC2gLraC+YCbV3QoTZexa+zegAEW5PhhgYfmbvJgcRqngGByOSXdFJcLk2JeDPEN0kxe1JhIt5FiFA+w+ItMELsUyPF2IaJ4aILqb4FbxPwhImwj6JauKgDUCYaxmYIsd4KXdMjIC9ItB5Bn4BNRwsG0XM2nwAAAAASUVORK5CYII=) 2x); | |
width: 112px; | |
} | |
.error-code { | |
display: block; | |
font-size: .8em; | |
} | |
#content-top { | |
margin: 20px; | |
} | |
#help-box-inner { | |
background-color: #f9f9f9; | |
border-top: 1px solid #EEE; | |
color: #444; | |
padding: 20px; | |
text-align: start; | |
} | |
.hidden { | |
display: none; | |
} | |
#suggestion { | |
margin-top: 15px; | |
} | |
#suggestions-list a { | |
color: var(--google-blue-600); | |
} | |
#suggestions-list p { | |
margin-block-end: 0; | |
} | |
#suggestions-list ul { | |
margin-top: 0; | |
} | |
.single-suggestion { | |
list-style-type: none; | |
padding-left: 0; | |
} | |
#short-suggestion { | |
margin-top: 5px; | |
} | |
#error-information-button { | |
content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZD0iTTExIDE4aDJ2LTJoLTJ2MnptMS0xNkM2LjQ4IDIgMiA2LjQ4IDIgMTJzNC40OCAxMCAxMCAxMCAxMC00LjQ4IDEwLTEwUzE3LjUyIDIgMTIgMnptMCAxOGMtNC40MSAwLTgtMy41OS04LThzMy41OS04IDgtOCA4IDMuNTkgOCA4LTMuNTkgOC04IDh6bTAtMTRjLTIuMjEgMC00IDEuNzktNCA0aDJjMC0xLjEuOS0yIDItMnMyIC45IDIgMmMwIDItMyAxLjc1LTMgNWgyYzAtMi4yNSAzLTIuNSAzLTUgMC0yLjIxLTEuNzktNC00LTR6Ii8+PC9zdmc+); | |
height: 24px; | |
vertical-align: -.15em; | |
width: 24px; | |
} | |
.use-popup-container#error-information-popup-container | |
#error-information-popup { | |
align-items: center; | |
background-color: var(--popup-container-background-color); | |
display: flex; | |
height: 100%; | |
left: 0; | |
position: fixed; | |
top: 0; | |
width: 100%; | |
z-index: 100; | |
} | |
.use-popup-container#error-information-popup-container | |
#error-information-popup-content > p { | |
margin-bottom: 11px; | |
margin-inline-start: 20px; | |
} | |
.use-popup-container#error-information-popup-container #suggestions-list ul { | |
margin-inline-start: 15px; | |
} | |
.use-popup-container#error-information-popup-container | |
#error-information-popup-box { | |
background-color: var(--background-color); | |
left: 5%; | |
padding-bottom: 15px; | |
padding-top: 15px; | |
position: fixed; | |
width: 90%; | |
z-index: 101; | |
} | |
.use-popup-container#error-information-popup-container div.error-code { | |
margin-inline-start: 20px; | |
} | |
.use-popup-container#error-information-popup-container #suggestions-list p { | |
margin-inline-start: 20px; | |
} | |
:not(.use-popup-container)#error-information-popup-container | |
#error-information-popup-close { | |
display: none; | |
} | |
#error-information-popup-close { | |
margin-bottom: 0px; | |
margin-inline-end: 35px; | |
margin-top: 15px; | |
text-align: end; | |
} | |
.link-button { | |
color: rgb(66, 133, 244); | |
display: inline-block; | |
font-weight: bold; | |
text-transform: uppercase; | |
} | |
#sub-frame-error-details { | |
color: #8F8F8F; | |
/* Not done on mobile for performance reasons. */ | |
text-shadow: 0 1px 0 rgba(255,255,255,0.3); | |
} | |
[jscontent=hostName], | |
[jscontent=failedUrl] { | |
overflow-wrap: break-word; | |
} | |
#search-container { | |
/* Prevents a space between controls. */ | |
display: flex; | |
margin-top: 20px; | |
} | |
#search-box { | |
border: 1px solid #cdcdcd; | |
flex-grow: 1; | |
font-size: 1em; | |
height: 26px; | |
margin-right: 0; | |
padding: 1px 9px; | |
} | |
#search-box:focus { | |
border: 1px solid rgb(93, 154, 255); | |
outline: none; | |
} | |
#search-button { | |
border: none; | |
border-bottom-left-radius: 0; | |
border-top-left-radius: 0; | |
box-shadow: none; | |
display: flex; | |
height: 30px; | |
margin: 0; | |
padding: 0; | |
width: 60px; | |
} | |
#search-image { | |
content: | |
-webkit-image-set( | |
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAPCAQAAAB+HTb/AAAArElEQVR4Xn3NsUoCUBzG0XvB3U0chR4geo5qihpt6gkCx0bXFsMERWj2KWqIanAvmlUUoQapwU6g4l8H5bd9Z/iSPS0hu/RqZqrncBuzLl7U3Rn4cSpQFTeroejJl1Lgs7f4ceDPdeBMXYp86gaONYJkY83AnqHiGk9wHnjk16PKgo5N9BUCkzPf5j6M0PfuVg5MymoetFwoaKAlB26WdXAvJ7u5mezitqtkT//7Sv/u96CaLQAAAABJRU5ErkJggg==) 1x, | |
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAeCAQAAACVzLYUAAABYElEQVR4Xr3VMUuVURzH8XO98jgkGikENkRD0KRGDUVDQy0h2SiC4IuIiktL4AvQt1CDBJUJwo1KXXS6cWdHw7tcjWwoC5Hrx+UZgnNO5CXiO/75jD/+QZf9MzjskVU7DrU1zRv9G9ir5hsA4Nii83+GA9ZI1nI1D6tWAE1TRlQMuuuFDthzMQefgo4nKr+f3dIGDdUUHPYD1ISoMQdgJgUfgqaKEOcxWE/BVTArJBvwC0cGY7gNLgiZNsD1GP4EPVn4EtyLYRuczcJ34HYMP4E7GdajDS7FcB48z8AJ8FmI4TjouBkzZ2yBuRQMlsButIZ+dfDVUBqOaIHvavpLVHXfFmAqv45r9gEHNr3y3hcAfLSgSMPgiiZR+6Z9AMuKNAwqpjUcA2h55pxgAfBWkYRlQ254YMJloaxPHbCkiGCymL5RlLA7GnRDXyuC7uhicLoKdRyaDE5Pl00K//93nABqPgBDK8sfWgAAAABJRU5ErkJggg==) 2x); | |
margin: auto; | |
} | |
.secondary-button { | |
background: #d9d9d9; | |
color: #696969; | |
margin-inline-end: 16px; | |
} | |
.snackbar { | |
background: #323232; | |
border-radius: 2px; | |
bottom: 24px; | |
box-sizing: border-box; | |
color: #fff; | |
font-size: .87em; | |
left: 24px; | |
max-width: 568px; | |
min-width: 288px; | |
opacity: 0; | |
padding: 16px 24px 12px; | |
position: fixed; | |
transform: translateY(90px); | |
will-change: opacity, transform; | |
z-index: 999; | |
} | |
.snackbar-show { | |
-webkit-animation: | |
show-snackbar .25s cubic-bezier(0.0, 0.0, 0.2, 1) forwards, | |
hide-snackbar .25s cubic-bezier(0.4, 0.0, 1, 1) forwards 5s; | |
} | |
@-webkit-keyframes show-snackbar { | |
100% { | |
opacity: 1; | |
transform: translateY(0); | |
} | |
} | |
@-webkit-keyframes hide-snackbar { | |
0% { | |
opacity: 1; | |
transform: translateY(0); | |
} | |
100% { | |
opacity: 0; | |
transform: translateY(90px); | |
} | |
} | |
.suggestions { | |
margin-top: 18px; | |
} | |
.suggestion-header { | |
font-weight: bold; | |
margin-bottom: 4px; | |
} | |
.suggestion-body { | |
color: #777; | |
} | |
/* Increase line height at higher resolutions. */ | |
@media (min-width: 641px) and (min-height: 641px) { | |
#help-box-inner { | |
line-height: 18px; | |
} | |
} | |
/* Decrease padding at low sizes. */ | |
@media (max-width: 640px), (max-height: 640px) { | |
h1 { | |
margin: 0 0 15px; | |
} | |
#content-top { | |
margin: 15px; | |
} | |
#help-box-inner { | |
padding: 20px; | |
} | |
.suggestions { | |
margin-top: 10px; | |
} | |
.suggestion-header { | |
margin-bottom: 0; | |
} | |
} | |
#download-link, #download-link-clicked { | |
margin-bottom: 30px; | |
margin-top: 30px; | |
} | |
#download-link-clicked { | |
color: #BBB; | |
} | |
#download-link:before, #download-link-clicked:before { | |
content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxLjJlbSIgaGVpZ2h0PSIxLjJlbSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNNSAyMGgxNHYtMkg1bTE0LTloLTRWM0g5djZINWw3IDcgNy03eiIgZmlsbD0iIzQyODVGNCIvPjwvc3ZnPg==); | |
display: inline-block; | |
margin-inline-end: 4px; | |
vertical-align: -webkit-baseline-middle; | |
} | |
#download-link-clicked:before { | |
width: 0px; | |
opacity: 0; | |
} | |
#offline-content-list-visibility-card { | |
border: 1px solid white; | |
border-radius: 8px; | |
display: flex; | |
font-size: .8em; | |
justify-content: space-between; | |
line-height: 1; | |
} | |
#offline-content-list.list-hidden #offline-content-list-visibility-card { | |
border-color: rgb(218, 220, 224); | |
} | |
#offline-content-list-visibility-card > div { | |
padding: 1em; | |
} | |
#offline-content-list-title { | |
color: var(--google-gray-700); | |
} | |
#offline-content-list-show-text, #offline-content-list-hide-text { | |
color: rgb(66, 133, 244); | |
} | |
/* Hides the "hide" text div when the offline content list is collapsed/hidden | |
* and, alternatively, hides the "show" text div when the offline content list | |
* is expanded/shown. | |
*/ | |
#offline-content-list.list-hidden #offline-content-list-hide-text, | |
#offline-content-list:not(.list-hidden) #offline-content-list-show-text { | |
display: none; | |
} | |
/* Controls the animation of the offline content list when it is expanded/shown. | |
*/ | |
#offline-content-suggestions { | |
/* Max-height has to be set for the height animation to work. The chosen value | |
* is a little greater than the maximum height the list will have, when all | |
* suggestions have images, so that it is never clamped. This makes so that | |
* when the actual height is smaller then the animation is not as smooth. | |
*/ | |
max-height: 27em; | |
transition: max-height 0.2s ease-in, visibility 0s 0.2s, | |
opacity 0.2s 0.2s linear; | |
} | |
/* Controls the animation of the offline content list when it is | |
* collapsed/hidden. | |
*/ | |
#offline-content-list.list-hidden #offline-content-suggestions { | |
max-height: 0; | |
visibility: hidden; | |
opacity: 0; | |
transition: opacity 0.2s linear, visibility 0s 0.2s, | |
max-height 0.2s 0.2s ease-out; | |
} | |
#offline-content-list { | |
margin-inline-start: -5%; | |
width: 110%; | |
} | |
/* The selectors below adjust the "overflow" of the suggestion cards contents | |
* based on the same screen size based strategy used for the main frame, which | |
* is applied by the `interstitial-wrapper` class. */ | |
@media (max-width: 420px) { | |
#offline-content-list { | |
margin-inline-start: -2.5%; | |
width: 105%; | |
} | |
} | |
@media (max-width: 420px) and (orientation: portrait), | |
(max-height: 560px) { | |
#offline-content-list { | |
margin-inline-start: -12px; | |
width: calc(100% + 24px); | |
} | |
} | |
.suggestion-with-image .offline-content-suggestion-thumbnail { | |
flex-basis: 8.2em; | |
flex-shrink: 0; | |
} | |
.suggestion-with-image .offline-content-suggestion-thumbnail > img { | |
height: 100%; | |
width: 100%; | |
} | |
.suggestion-with-image #offline-content-list:not(.is-rtl) | |
.offline-content-suggestion-thumbnail > img { | |
border-bottom-right-radius: 7px; | |
border-top-right-radius: 7px; | |
} | |
.suggestion-with-image #offline-content-list.is-rtl | |
.offline-content-suggestion-thumbnail > img { | |
border-bottom-left-radius: 7px; | |
border-top-left-radius: 7px; | |
} | |
.suggestion-with-icon .offline-content-suggestion-thumbnail { | |
align-items: center; | |
display: flex; | |
justify-content: center; | |
min-height: 4.2em; | |
min-width: 4.2em; | |
} | |
.suggestion-with-icon .offline-content-suggestion-thumbnail > div { | |
align-items: center; | |
background-color: rgb(241, 243, 244); | |
border-radius: 50%; | |
display: flex; | |
height: 2.3em; | |
justify-content: center; | |
width: 2.3em; | |
} | |
.suggestion-with-icon .offline-content-suggestion-thumbnail > div > img { | |
height: 1.45em; | |
width: 1.45em; | |
} | |
.offline-content-suggestion-favicon { | |
height: 1em; | |
margin-inline-end: 0.4em; | |
width: 1.4em; | |
} | |
.offline-content-suggestion-favicon > img { | |
height: 1.4em; | |
width: 1.4em; | |
} | |
.no-favicon .offline-content-suggestion-favicon { | |
display: none; | |
} | |
.image-video { | |
content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTcgMTAuNVY3YTEgMSAwIDAgMC0xLTFINGExIDEgMCAwIDAtMSAxdjEwYTEgMSAwIDAgMCAxIDFoMTJhMSAxIDAgMCAwIDEtMXYtMy41bDQgNHYtMTFsLTQgNHoiIGZpbGw9IiMzQzQwNDMiLz48L3N2Zz4=); | |
} | |
.image-music-note { | |
content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTIgM3Y5LjI2Yy0uNS0uMTctMS0uMjYtMS41LS4yNkM4IDEyIDYgMTQgNiAxNi41UzggMjEgMTAuNSAyMXM0LjUtMiA0LjUtNC41VjZoNFYzaC03eiIgZmlsbD0iIzNDNDA0MyIvPjwvc3ZnPg==); | |
} | |
.image-earth { | |
content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTIgMmM1LjUyIDAgMTAgNC40OCAxMCAxMHMtNC40OCAxMC0xMCAxMFMyIDE3LjUyIDIgMTIgNi40OCAyIDEyIDJ6TTQgMTJoNC40YzMuNDA3LjAyMiA0LjkyMiAxLjczIDQuNTQzIDUuMTI3SDkuNDg4djIuNDdhOC4wMDQgOC4wMDQgMCAwIDAgMTAuNDk4LTguMDgzQzE5LjMyNyAxMi41MDQgMTguMzMyIDEzIDE3IDEzYy0yLjEzNyAwLTMuMjA2LS45MTYtMy4yMDYtMi43NWgtMy43NDhjLS4yNzQtMi43MjguNjgzLTQuMDkyIDIuODctNC4wOTIgMC0uOTc1LjMyNy0xLjU5Ny44MTEtMS45N0E4LjAwNCA4LjAwNCAwIDAgMCA0IDEyeiIgZmlsbD0iIzNDNDA0MyIvPjwvc3ZnPg==); | |
} | |
.image-file { | |
content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTMgOVYzLjVMMTguNSA5TTYgMmMtMS4xMSAwLTIgLjg5LTIgMnYxNmEyIDIgMCAwIDAgMiAyaDEyYTIgMiAwIDAgMCAyLTJWOGwtNi02SDZ6IiBmaWxsPSIjM0M0MDQzIi8+PC9zdmc+); | |
} | |
.offline-content-suggestion-texts { | |
display: flex; | |
flex-direction: column; | |
justify-content: space-between; | |
line-height: 1.3; | |
padding: .9em; | |
width: 100%; | |
} | |
.offline-content-suggestion-title { | |
-webkit-box-orient: vertical; | |
-webkit-line-clamp: 3; | |
color: rgb(32, 33, 36); | |
display: -webkit-box; | |
font-size: 1.1em; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
} | |
div.offline-content-suggestion { | |
align-items: stretch; | |
border: 1px solid rgb(218, 220, 224); | |
border-radius: 8px; | |
display: flex; | |
justify-content: space-between; | |
margin-bottom: .8em; | |
} | |
.suggestion-with-image { | |
flex-direction: row; | |
height: 8.2em; | |
max-height: 8.2em; | |
} | |
.suggestion-with-icon { | |
flex-direction: row-reverse; | |
height: 4.2em; | |
max-height: 4.2em; | |
} | |
.suggestion-with-icon .offline-content-suggestion-title { | |
-webkit-line-clamp: 1; | |
word-break: break-all; | |
} | |
.suggestion-with-icon .offline-content-suggestion-texts { | |
padding-inline-start: 0px; | |
} | |
.offline-content-suggestion-attribution-freshness { | |
color: rgb(95, 99, 104); | |
display: flex; | |
font-size: .8em; | |
line-height: 1.7em; | |
} | |
.offline-content-suggestion-attribution { | |
-webkit-box-orient: vertical; | |
-webkit-line-clamp: 1; | |
display: -webkit-box; | |
flex-shrink: 1; | |
margin-inline-end: 0.3em; | |
overflow-wrap: break-word; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
word-break: break-all; | |
} | |
.no-attribution .offline-content-suggestion-attribution { | |
display: none; | |
} | |
.offline-content-suggestion-freshness:before { | |
content: '-'; | |
display: inline-block; | |
flex-shrink: 0; | |
margin-inline-end: .1em; | |
margin-inline-start: .1em; | |
} | |
.no-attribution .offline-content-suggestion-freshness:before { | |
display: none; | |
} | |
.offline-content-suggestion-freshness { | |
flex-shrink: 0; | |
} | |
.suggestion-with-image .offline-content-suggestion-pin-spacer { | |
flex-shrink: 1; | |
flex-grow: 100; | |
} | |
.suggestion-with-image .offline-content-suggestion-pin { | |
content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PGRlZnM+PHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjR2MjRIMFYweiIvPjwvZGVmcz48Y2xpcFBhdGggaWQ9ImIiPjx1c2UgeGxpbms6aHJlZj0iI2EiIG92ZXJmbG93PSJ2aXNpYmxlIi8+PC9jbGlwUGF0aD48cGF0aCBjbGlwLXBhdGg9InVybCgjYikiIGQ9Ik0xMiAyQzYuNSAyIDIgNi41IDIgMTJzNC41IDEwIDEwIDEwIDEwLTQuNSAxMC0xMFMxNy41IDIgMTIgMnptNSAxNkg3di0yaDEwdjJ6bS02LjctNEw3IDEwLjdsMS40LTEuNCAxLjkgMS45IDUuMy01LjNMMTcgNy4zIDEwLjMgMTR6IiBmaWxsPSIjOUFBMEE2Ii8+PC9zdmc+); | |
flex-shrink: 0; | |
height: 1.4em; | |
margin-inline-start: .4em; | |
width: 1.4em; | |
} | |
/* Controls the animation (and a bit more) of the launch-downloads-home action | |
* button when the offline content list is expanded/shown. | |
*/ | |
#offline-content-list-action { | |
text-align: center; | |
transition: visibility 0s 0.2s, opacity 0.2s 0.2s linear; | |
} | |
/* Controls the animation of the launch-downloads-home action button when the | |
* offline content list is collapsed/hidden. | |
*/ | |
#offline-content-list.list-hidden #offline-content-list-action { | |
visibility: hidden; | |
opacity: 0; | |
transition: opacity 0.2s linear, visibility 0s 0.2s; | |
} | |
#cancel-save-page-button { | |
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ij48Y2xpcFBhdGggaWQ9Im1hc2siPjxwYXRoIGQ9Ik0xMiAyQzYuNSAyIDIgNi41IDIgMTJzNC41IDEwIDEwIDEwIDEwLTQuNSAxMC0xMFMxNy41IDIgMTIgMnptNSAxNkg3di0yaDEwdjJ6bS02LjctNEw3IDEwLjdsMS40LTEuNCAxLjkgMS45IDUuMy01LjNMMTcgNy4zIDEwLjMgMTR6IiBmaWxsPSIjOUFBMEE2Ii8+PC9jbGlwUGF0aD48cGF0aCBjbGlwLXBhdGg9InVybCgjbWFzaykiIGZpbGw9IiM5QUEwQTYiIGQ9Ik0wIDBoMjR2MjRIMHoiLz48cGF0aCBjbGlwLXBhdGg9InVybCgjbWFzaykiIGZpbGw9IiMxQTczRTgiIHN0eWxlPSJhbmltYXRpb246b2ZmbGluZUFuaW1hdGlvbiA0cyBpbmZpbml0ZSIgZD0iTTAgMGgyNHYyNEgweiIvPjxzdHlsZT5Aa2V5ZnJhbWVzIG9mZmxpbmVBbmltYXRpb257MCUsMzUle2hlaWdodDowfTYwJXtoZWlnaHQ6MTAwJX05MCV7ZmlsbC1vcGFjaXR5OjF9dG97ZmlsbC1vcGFjaXR5OjB9fTwvc3R5bGU+PC9zdmc+); | |
background-position: right 27px center; | |
background-repeat: no-repeat; | |
border: 1px solid var(--google-gray-300); | |
border-radius: 5px; | |
color: var(--google-gray-700); | |
margin-bottom: 26px; | |
padding-bottom: 16px; | |
padding-inline-end: 88px; | |
padding-inline-start: 16px; | |
padding-top: 16px; | |
text-align: start; | |
} | |
html[dir="rtl"] #cancel-save-page-button { | |
background-position: left 27px center; | |
} | |
#save-page-for-later-button { | |
display: flex; | |
justify-content: start; | |
} | |
#save-page-for-later-button a:before { | |
content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxLjJlbSIgaGVpZ2h0PSIxLjJlbSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNNSAyMGgxNHYtMkg1bTE0LTloLTRWM0g5djZINWw3IDcgNy03eiIgZmlsbD0iIzQyODVGNCIvPjwvc3ZnPg==); | |
display: inline-block; | |
margin-inline-end: 4px; | |
vertical-align: -webkit-baseline-middle; | |
} | |
.hidden#save-page-for-later-button { | |
display: none; | |
} | |
/* Don't allow overflow when in a subframe. */ | |
html[subframe] body { | |
overflow: hidden; | |
} | |
#sub-frame-error { | |
-webkit-align-items: center; | |
background-color: #DDD; | |
display: -webkit-flex; | |
-webkit-flex-flow: column; | |
height: 100%; | |
-webkit-justify-content: center; | |
left: 0; | |
position: absolute; | |
text-align: center; | |
top: 0; | |
transition: background-color .2s ease-in-out; | |
width: 100%; | |
} | |
#sub-frame-error:hover { | |
background-color: #EEE; | |
} | |
#sub-frame-error .icon-generic { | |
margin: 0 0 16px; | |
} | |
#sub-frame-error-details { | |
margin: 0 10px; | |
text-align: center; | |
visibility: hidden; | |
} | |
/* Show details only when hovering. */ | |
#sub-frame-error:hover #sub-frame-error-details { | |
visibility: visible; | |
} | |
/* If the iframe is too small, always hide the error code. */ | |
/* TODO(mmenke): See if overflow: no-display works better, once supported. */ | |
@media (max-width: 200px), (max-height: 95px) { | |
#sub-frame-error-details { | |
display: none; | |
} | |
} | |
/* Adjust icon for small embedded frames in apps. */ | |
@media (max-height: 100px) { | |
#sub-frame-error .icon-generic { | |
height: auto; | |
margin: 0; | |
padding-top: 0; | |
width: 25px; | |
} | |
} | |
/* details-button is special; it's a <button> element that looks like a link. */ | |
#details-button { | |
box-shadow: none; | |
min-width: 0; | |
} | |
/* Styles for platform dependent separation of controls and details button. */ | |
.suggested-left > #control-buttons, | |
.suggested-right > #details-button { | |
float: left; | |
} | |
.suggested-right > #control-buttons, | |
.suggested-left > #details-button { | |
float: right; | |
} | |
.suggested-left .secondary-button { | |
margin-inline-end: 0px; | |
margin-inline-start: 16px; | |
} | |
#details-button.singular { | |
float: none; | |
} | |
/* download-button shows both icon and text. */ | |
#download-button { | |
padding-bottom: 4px; | |
padding-top: 4px; | |
position: relative; | |
} | |
#download-button:before { | |
background: -webkit-image-set( | |
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAQAAABKfvVzAAAAO0lEQVQ4y2NgGArgPxIY1YChsOE/LtBAmpYG0mxpIOSDBpKUo2lpIDZxNJCkHKqlYZAla3RAHQ1DFgAARRroHyLNTwwAAAAASUVORK5CYII=) 1x, | |
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAQAAAD9CzEMAAAAZElEQVRYw+3Ruw3AMAwDUY3OzZUmRRD4E9iim9wNwAdbEURHyk4AAAAATiCVK8lLyPsKeT9K3lsownnunfkPxO78hKiYHxBV8x2icr5BVM+/CMf8g3DN34Rzns6ViwHUAUQ/6wIAd5Km7l6c8AAAAABJRU5ErkJggg==) 2x) | |
no-repeat; | |
content: ''; | |
display: inline-block; | |
width: 24px; | |
height: 24px; | |
margin-inline-end: 4px; | |
margin-inline-start: -4px; | |
vertical-align: middle; | |
} | |
#download-button:disabled { | |
background: rgb(180, 206, 249); | |
color: rgb(255, 255, 255); | |
} | |
/* | |
TODO(https://crbug.com/852872): UI for offline suggested content is incomplete. | |
*/ | |
.suggested-thumbnail { | |
width: 25vw; | |
height: 25vw; | |
} | |
/* Alternate dino page button styles */ | |
#control-buttons .reload-button-alternate:disabled { | |
background: #ccc; | |
color: #fff; | |
font-size: 14px; | |
height: 48px; | |
} | |
#buttons::after { | |
clear: both; | |
content: ''; | |
display: block; | |
width: 100%; | |
} | |
/* Offline page */ | |
.offline { | |
transition: filter 1.5s cubic-bezier(0.65, 0.05, 0.36, 1), | |
background-color 1.5s cubic-bezier(0.65, 0.05, 0.36, 1); | |
will-change: filter, background-color; | |
} | |
.offline body { | |
transition: background-color 1.5s cubic-bezier(0.65, 0.05, 0.36, 1); | |
} | |
.offline #main-message > p { | |
display: none; | |
} | |
/* iOS WKWebView inverts the background color set at the HTML level | |
whereas Blink does not. */ | |
.offline.inverted { | |
filter: invert(1); | |
background-color: #000; | |
} | |
.offline.inverted body { | |
background-color: #fff; | |
} | |
.offline .interstitial-wrapper { | |
color: var(--text-color); | |
font-size: 1em; | |
line-height: 1.55; | |
margin: 0 auto; | |
max-width: 600px; | |
padding-top: 100px; | |
width: 100%; | |
} | |
.offline .runner-container { | |
direction: ltr; | |
height: 150px; | |
max-width: 600px; | |
overflow: hidden; | |
position: absolute; | |
top: 35px; | |
width: 44px; | |
} | |
.offline .runner-canvas { | |
height: 150px; | |
max-width: 600px; | |
opacity: 1; | |
overflow: hidden; | |
position: absolute; | |
top: 0; | |
z-index: 10; | |
} | |
.offline .controller { | |
background: rgba(247,247,247, .1); | |
height: 100vh; | |
left: 0; | |
position: absolute; | |
top: 0; | |
width: 100vw; | |
z-index: 9; | |
} | |
#offline-resources { | |
display: none; | |
} | |
#offline-instruction { | |
image-rendering: pixelated; | |
left: 0; | |
margin: auto; | |
position: absolute; | |
right: 0; | |
top: 60px; | |
width: fit-content; | |
} | |
@media (max-width: 420px) { | |
#download-button { | |
padding-bottom: 12px; | |
padding-top: 12px; | |
} | |
.suggested-left > #control-buttons, | |
.suggested-right > #control-buttons { | |
float: none; | |
} | |
.snackbar { | |
left: 0; | |
bottom: 0; | |
width: 100%; | |
border-radius: 0; | |
} | |
} | |
@media (max-height: 350px) { | |
h1 { | |
margin: 0 0 15px; | |
} | |
.icon-offline { | |
margin: 0 0 10px; | |
} | |
.interstitial-wrapper { | |
margin-top: 5%; | |
} | |
.nav-wrapper { | |
margin-top: 30px; | |
} | |
} | |
@media (min-width: 420px) and (max-width: 736px) and | |
(min-height: 240px) and (max-height: 420px) and | |
(orientation:landscape) { | |
.interstitial-wrapper { | |
margin-bottom: 100px; | |
} | |
} | |
@media (max-width: 360px) and (max-height: 480px) { | |
.offline .interstitial-wrapper { | |
padding-top: 60px; | |
} | |
.offline .runner-container { | |
top: 8px; | |
} | |
} | |
@media (min-height: 240px) and (orientation: landscape) { | |
.offline .interstitial-wrapper { | |
margin-bottom: 90px; | |
} | |
.icon-offline { | |
margin-bottom: 20px; | |
} | |
} | |
@media (max-height: 320px) and (orientation: landscape) { | |
.icon-offline { | |
margin-bottom: 0; | |
} | |
.offline .runner-container { | |
top: 10px; | |
} | |
} | |
@media (max-width: 240px) { | |
button { | |
padding-left: 12px; | |
padding-right: 12px; | |
} | |
.interstitial-wrapper { | |
overflow: inherit; | |
padding: 0 8px; | |
} | |
} | |
@media (max-width: 120px) { | |
button { | |
width: auto; | |
} | |
} | |
.arcade-mode, | |
.arcade-mode .runner-container, | |
.arcade-mode .runner-canvas { | |
image-rendering: pixelated; | |
max-width: 100%; | |
overflow: hidden; | |
} | |
.arcade-mode #buttons, | |
.arcade-mode #main-content { | |
opacity: 0; | |
overflow: hidden; | |
} | |
.arcade-mode .interstitial-wrapper { | |
height: 100vh; | |
max-width: 100%; | |
overflow: hidden; | |
} | |
.arcade-mode .runner-container { | |
left: 0; | |
margin: auto; | |
right: 0; | |
transform-origin: top center; | |
transition: transform 250ms cubic-bezier(0.4, 0.0, 1, 1) .4s; | |
z-index: 2; | |
} | |
@media (prefers-color-scheme: dark) { | |
.icon { | |
filter: invert(1); | |
} | |
.offline .runner-canvas { | |
filter: invert(1); | |
} | |
.offline.inverted { | |
filter: invert(0); | |
background-color: var(--background-color); | |
} | |
.offline.inverted body { | |
background-color: #fff; | |
} | |
#suggestions-list a { | |
color: var(--link-color); | |
} | |
#error-information-button { | |
filter: invert(0.6); | |
} | |
} | |
</style> | |
</head> | |
<body id="t" style="font-family: 'Segoe UI', Tahoma, sans-serif; font-size: 75%" jstcache="0" class="neterror"> | |
<div id="main-frame-error" class="interstitial-wrapper" jstcache="0"> | |
<div id="main-content" jstcache="0"> | |
<div class="icon icon-generic" jseval="updateIconClass(this.classList, iconClass)" alt="" jstcache="1"></div> | |
<div id="main-message" jstcache="0"> | |
<h1 jstcache="0"> | |
<span jsselect="heading" jsvalues=".innerHTML:msg" jstcache="10">This site can’t be reached</span> | |
<a id="error-information-button" class="hidden" onclick="toggleErrorInformationPopup();" jstcache="0"></a> | |
</h1> | |
<p jsselect="summary" jsvalues=".innerHTML:msg" jstcache="2">Check if there is a typo in <span jscontent="hostName" jstcache="23">www.contractbook.co</span>.</p> | |
<div id="error-information-popup-container" jstcache="0"> | |
<div id="error-information-popup" jstcache="0"> | |
<div id="error-information-popup-box" jstcache="0"> | |
<div id="error-information-popup-content" jstcache="0"> | |
<div id="suggestions-list" style="" jsdisplay="(suggestionsSummaryList && suggestionsSummaryList.length)" jstcache="17"> | |
<p jsvalues=".innerHTML:suggestionsSummaryListHeader" jstcache="19"></p> | |
<ul jsvalues=".className:suggestionsSummaryList.length == 1 ? 'single-suggestion' : ''" jstcache="20" class="single-suggestion"> | |
<li jsselect="suggestionsSummaryList" jsvalues=".innerHTML:summary" jstcache="22" jsinstance="*0">If spelling is correct, <a href="javascript:diagnoseErrors()" id="diagnose-link" jstcache="0">try running Windows Network Diagnostics</a>.</li> | |
</ul> | |
</div> | |
<div class="error-code" jscontent="errorCode" jstcache="18">DNS_PROBE_FINISHED_NXDOMAIN</div> | |
<p id="error-information-popup-close" jstcache="0"> | |
<a class="link-button" jscontent="closeDescriptionPopup" onclick="toggleErrorInformationPopup();" jstcache="21">null</a> | |
</p> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div id="buttons" class="nav-wrapper suggested-left" jstcache="0"> | |
<div id="control-buttons" jstcache="0"> | |
<button id="reload-button" class="blue-button text-button" onclick="reloadButtonClick(this.url);" jsselect="reloadButton" jsvalues=".url:reloadUrl" jscontent="msg" jstcache="6">Reload</button> | |
<button id="download-button" class="blue-button text-button" onclick="downloadButtonClick()" jsselect="downloadButton" jscontent="msg" jsvalues=".disabledText:disabledMsg" jstcache="7" style="display: none;"> | |
</button> | |
</div> | |
<button id="details-button" class="secondary-button text-button small-link" onclick="detailsButtonClick(); toggleHelpBox()" jscontent="details" jsdisplay="(suggestionsDetails && suggestionsDetails.length > 0) || diagnose" jsvalues=".detailsText:details; .hideDetailsText:hideDetails;" jstcache="3" style="display: none;"></button> | |
</div> | |
</div> | |
</body></html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment