13551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)/* Copyright 2013 The Chromium Authors. All rights reserved. 23551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) * Use of this source code is governed by a BSD-style license that can be 33551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) * found in the LICENSE file. */ 43551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) 53551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)/* Don't use the main frame div when the error is in a subframe. */ 63551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)html[subframe] #main-frame-error { 73551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) display: none; 83551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)} 93551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) 103551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)/* Don't use the subframe error div when the error is in a main frame. */ 113551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)html:not([subframe]) #sub-frame-error { 123551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) display: none; 133551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)} 143551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) 153551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)#diagnose-button { 165f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) -webkit-margin-start: 0; 171320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci float: none; 183551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) margin-bottom: 10px; 195f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) margin-top: 20px; 203551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)} 213551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) 221320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tuccih1 { 231320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci -webkit-margin-before: 0; 248bcbed890bc3ce4d7a057a8f32cab53fa534672eTorne (Richard Coles)} 258bcbed890bc3ce4d7a057a8f32cab53fa534672eTorne (Richard Coles) 268bcbed890bc3ce4d7a057a8f32cab53fa534672eTorne (Richard Coles)h2 { 278bcbed890bc3ce4d7a057a8f32cab53fa534672eTorne (Richard Coles) color: #666; 288bcbed890bc3ce4d7a057a8f32cab53fa534672eTorne (Richard Coles) font-size: 1.2em; 298bcbed890bc3ce4d7a057a8f32cab53fa534672eTorne (Richard Coles) font-weight: normal; 308bcbed890bc3ce4d7a057a8f32cab53fa534672eTorne (Richard Coles) margin: 10px 0; 313551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)} 323551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) 333551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)a { 345f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) color: rgb(17, 85, 204); 353551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) text-decoration: none; 363551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)} 373551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) 383551c9c881056c480085172ff9840cab31610854Torne (Richard Coles).icon { 393551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) -webkit-user-select: none; 403551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)} 413551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) 423551c9c881056c480085172ff9840cab31610854Torne (Richard Coles).icon-generic { 433551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) /** 443551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) * Can't access chrome://theme/IDR_ERROR_NETWORK_GENERIC from an untrusted 453551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) * renderer process, so embed the resource manually. 463551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) */ 473551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) content: -webkit-image-set( 481320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci url('default_100_percent/common/error_network_generic.png') 1x, 491320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci url('default_200_percent/common/error_network_generic.png') 2x); 501320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci height: 50px; 511320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci padding-top: 20px; 521320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci width: 41px; 533551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)} 543551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) 553551c9c881056c480085172ff9840cab31610854Torne (Richard Coles).icon-offline { 563551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) content: -webkit-image-set( 571320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci url('default_100_percent/offline/100-error-offline.png') 1x, 581320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci url('default_200_percent/offline/200-error-offline.png') 2x); 591320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci height: 47px; 601320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci margin: 0 0 40px; 611320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci position: relative; 621320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci width: 44px; 633551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)} 643551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) 653551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)#content-top { 66a02191e04bc25c4935f804f2c080ae28663d096dBen Murdoch margin: 20px; 673551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)} 683551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) 693551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)#help-box-outer { 703551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) -webkit-transition: height ease-in 218ms; 715f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) overflow: hidden; 723551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)} 733551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) 743551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)#help-box-inner { 753551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) background-color: #f9f9f9; 763551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) border-top: 1px solid #EEE; 773551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) color: #444; 78a02191e04bc25c4935f804f2c080ae28663d096dBen Murdoch padding: 20px; 793551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) text-align: start; 803551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)} 813551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) 82a02191e04bc25c4935f804f2c080ae28663d096dBen Murdoch#suggestion { 833551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) margin-top: 15px; 843551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)} 853551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) 86a02191e04bc25c4935f804f2c080ae28663d096dBen Murdoch#short-suggestion { 87a02191e04bc25c4935f804f2c080ae28663d096dBen Murdoch margin-top: 5px; 88a02191e04bc25c4935f804f2c080ae28663d096dBen Murdoch} 89a02191e04bc25c4935f804f2c080ae28663d096dBen Murdoch 903551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)#sub-frame-error-details { 913551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) color: #8F8F8F; 923551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)<if expr="not is_android and not is_ios"> 933551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) /* Not done on mobile for performance reasons. */ 943551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) text-shadow: 0 1px 0 rgba(255,255,255,0.3); 953551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)</if> 963551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)} 973551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) 983551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)[jscontent=failedUrl] { 993551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) overflow-wrap: break-word; 1003551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)} 1013551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) 102a02191e04bc25c4935f804f2c080ae28663d096dBen Murdoch#search-container { 103a02191e04bc25c4935f804f2c080ae28663d096dBen Murdoch /* Prevents a space between controls. */ 104a02191e04bc25c4935f804f2c080ae28663d096dBen Murdoch display: flex; 105a02191e04bc25c4935f804f2c080ae28663d096dBen Murdoch margin-top: 20px; 106a02191e04bc25c4935f804f2c080ae28663d096dBen Murdoch} 107a02191e04bc25c4935f804f2c080ae28663d096dBen Murdoch 108a02191e04bc25c4935f804f2c080ae28663d096dBen Murdoch#search-box { 109a02191e04bc25c4935f804f2c080ae28663d096dBen Murdoch border: 1px solid #cdcdcd; 110a02191e04bc25c4935f804f2c080ae28663d096dBen Murdoch flex-grow: 1; 111a02191e04bc25c4935f804f2c080ae28663d096dBen Murdoch font-size: 16px; 112a02191e04bc25c4935f804f2c080ae28663d096dBen Murdoch height: 26px; 113a02191e04bc25c4935f804f2c080ae28663d096dBen Murdoch margin-right: 0; 114a02191e04bc25c4935f804f2c080ae28663d096dBen Murdoch padding: 1px 9px; 115a02191e04bc25c4935f804f2c080ae28663d096dBen Murdoch} 116a02191e04bc25c4935f804f2c080ae28663d096dBen Murdoch 117a02191e04bc25c4935f804f2c080ae28663d096dBen Murdoch#search-box:focus { 1185f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) border: 1px solid rgb(93, 154, 255); 119a02191e04bc25c4935f804f2c080ae28663d096dBen Murdoch outline: none; 120a02191e04bc25c4935f804f2c080ae28663d096dBen Murdoch} 121a02191e04bc25c4935f804f2c080ae28663d096dBen Murdoch 122a02191e04bc25c4935f804f2c080ae28663d096dBen Murdoch#search-button { 123a02191e04bc25c4935f804f2c080ae28663d096dBen Murdoch border: none; 124a02191e04bc25c4935f804f2c080ae28663d096dBen Murdoch border-bottom-left-radius: 0; 1255f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) border-top-left-radius: 0; 126a02191e04bc25c4935f804f2c080ae28663d096dBen Murdoch box-shadow: none; 127a02191e04bc25c4935f804f2c080ae28663d096dBen Murdoch display: flex; 128a02191e04bc25c4935f804f2c080ae28663d096dBen Murdoch height: 30px; 129a02191e04bc25c4935f804f2c080ae28663d096dBen Murdoch margin: 0; 130a02191e04bc25c4935f804f2c080ae28663d096dBen Murdoch padding: 0; 1315f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) width: 60px; 132a02191e04bc25c4935f804f2c080ae28663d096dBen Murdoch} 133a02191e04bc25c4935f804f2c080ae28663d096dBen Murdoch 134a02191e04bc25c4935f804f2c080ae28663d096dBen Murdoch#search-image { 135a02191e04bc25c4935f804f2c080ae28663d096dBen Murdoch content: 136a02191e04bc25c4935f804f2c080ae28663d096dBen Murdoch -webkit-image-set( 137a02191e04bc25c4935f804f2c080ae28663d096dBen Murdoch url('../../app/theme/default_100_percent/common/omnibox_search_button_loupe.png') 1x, 138a02191e04bc25c4935f804f2c080ae28663d096dBen Murdoch url('../../app/theme/default_200_percent/common/omnibox_search_button_loupe.png') 2x); 139a02191e04bc25c4935f804f2c080ae28663d096dBen Murdoch margin: auto; 140a02191e04bc25c4935f804f2c080ae28663d096dBen Murdoch} 141a02191e04bc25c4935f804f2c080ae28663d096dBen Murdoch 1423551c9c881056c480085172ff9840cab31610854Torne (Richard Coles).hidden { 1433551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) display: none; 1443551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)} 1453551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) 1463551c9c881056c480085172ff9840cab31610854Torne (Richard Coles).suggestions { 1473551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) margin-top: 18px; 1483551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)} 1493551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) 1503551c9c881056c480085172ff9840cab31610854Torne (Richard Coles).suggestion-header { 1513551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) font-weight: bold; 1523551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) margin-bottom: 4px; 1533551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)} 1543551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) 1553551c9c881056c480085172ff9840cab31610854Torne (Richard Coles).suggestion-body { 1563551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) color: #777; 1573551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)} 1583551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) 1593551c9c881056c480085172ff9840cab31610854Torne (Richard Coles).error-code { 1603551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) color: #A0A0A0; 1613551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) margin-top: 15px; 1623551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)} 1633551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) 1643551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)/* Increase line height at higher resolutions. */ 1653551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)@media (min-width: 641px) and (min-height: 641px) { 1663551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) #help-box-inner { 1673551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) line-height: 18px; 1683551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) } 1693551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)} 1703551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) 1713551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)/* Decrease padding at low sizes. */ 1723551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)@media (max-width: 640px), (max-height: 640px) { 1733551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) body { 1743551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) margin: 15px; 1753551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) } 1763551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) h1 { 1775f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) margin: 10px 0 15px; 1783551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) } 1793551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) #content-top { 1803551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) margin: 15px; 1813551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) } 1823551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) #help-box-inner { 1833551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) padding: 20px; 1843551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) } 1853551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) .suggestions { 1863551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) margin-top: 10px; 1873551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) } 1883551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) .suggestion-header { 1895f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) margin-bottom: 0; 1903551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) } 1913551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) .error-code { 1923551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) margin-top: 10px; 1933551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) } 1943551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)} 1953551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) 1963551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)/* Don't allow overflow when in a subframe. */ 1973551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)html[subframe] body { 1983551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) overflow: hidden; 1993551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)} 2003551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) 2013551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)#sub-frame-error { 2023551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) -webkit-align-items: center; 2033551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) background-color: #DDD; 2043551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) display: -webkit-flex; 2053551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) -webkit-flex-flow: column; 2063551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) height: 100%; 2073551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) -webkit-justify-content: center; 2085f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) left: 0; 2093551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) position: absolute; 2105f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) top: 0; 2113551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) width: 100%; 2123551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)} 2133551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) 2143551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)#sub-frame-error:hover { 2153551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) background-color: #EEE; 2163551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)} 2173551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) 2183551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)#sub-frame-error-details { 2193551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) margin: 0 10px; 2203551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) visibility: hidden; 2213551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)} 2223551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) 2233551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)/* Show details only when hovering. */ 2243551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)#sub-frame-error:hover #sub-frame-error-details { 2253551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) visibility: visible; 2263551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)} 2273551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) 2283551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)/* If the iframe is too small, always hide the error code. */ 2293551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)/* TODO(mmenke): See if overflow: no-display works better, once supported. */ 2303551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)@media (max-width: 200px), (max-height: 95px) { 2313551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) #sub-frame-error-details { 2323551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) display: none; 2333551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) } 2343551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)} 2355f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) 2365f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles)/* details-button is special; it's a <button> element that looks like a link. */ 2375f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles)#details-button { 2385f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) background-color: inherit; 2395f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) background-image: none; 2405f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) border: none; 2415f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) box-shadow: none; 2425f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) min-width: 0; 2435f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) padding: 0; 2445f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) text-decoration: underline; 2455f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles)} 2465f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) 2475f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles)/* Styles for platform dependent separation of controls and details button. */ 2485f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles).suggested-left > #control-buttons, 2495f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles).suggested-right > #details-button { 2505f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) float: left; 2515f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles)} 2525f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) 2535f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles).suggested-right > #control-buttons, 2545f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles).suggested-left > #details-button { 2555f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) float: right; 2565f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles)} 2575f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) 2585f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles)#details-button.singular { 2595f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) float: none; 2605f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles)} 2615f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) 2625f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles)#buttons::after { 2635f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) clear: both; 2645f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) content: ''; 2655f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) display: block; 2665f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) width: 100%; 2675f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles)} 2681320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci 2691320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci/* Offline page */ 2701320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci.offline .interstitial-wrapper { 2711320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci color: #2b2b2b; 2721320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci font-size: 1em; 2731320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci line-height: 1.55; 2741320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci margin: 100px auto 0; 2751320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci max-width: 600px; 2761320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci width: 100%; 2771320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci} 2781320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci 2791320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci.offline .runner-container { 2801320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci height: 150px; 2811320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci max-width: 600px; 2821320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci overflow: hidden; 2831320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci position: absolute; 2841320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci top: 10px; 2851320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci width: 44px; 2861320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci z-index: 2; 2871320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci} 2881320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci 2891320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci.offline .runner-canvas { 2901320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci height: 150px; 2911320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci max-width: 600px; 2921320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci opacity: 1; 2931320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci overflow: hidden; 2941320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci position: absolute; 2951320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci top: 0; 2961320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci} 2971320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci 2981320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci.offline .controller { 2991320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci background: rgba(247,247,247, .1); 3001320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci height: 100vh; 3011320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci left: 0; 3021320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci position: absolute; 3031320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci top: 0; 3041320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci width: 100vw; 3051320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci z-index: 1; 3061320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci} 3071320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci 3081320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci#offline-resources { 3091320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci display: none; 3101320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci} 3111320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci 3121675a649fd7a8b3cb80ffddae2dc181f122353c5Ben Murdoch@media (max-width: 400px) { 3131675a649fd7a8b3cb80ffddae2dc181f122353c5Ben Murdoch .suggested-left > #control-buttons, 3141675a649fd7a8b3cb80ffddae2dc181f122353c5Ben Murdoch .suggested-right > #control-buttons { 3151675a649fd7a8b3cb80ffddae2dc181f122353c5Ben Murdoch float: none; 3161675a649fd7a8b3cb80ffddae2dc181f122353c5Ben Murdoch margin: 50px 0 20px; 3171675a649fd7a8b3cb80ffddae2dc181f122353c5Ben Murdoch } 3181675a649fd7a8b3cb80ffddae2dc181f122353c5Ben Murdoch} 3191675a649fd7a8b3cb80ffddae2dc181f122353c5Ben Murdoch 3201675a649fd7a8b3cb80ffddae2dc181f122353c5Ben Murdoch@media (max-height: 350px) { 3211675a649fd7a8b3cb80ffddae2dc181f122353c5Ben Murdoch h1 { 3221675a649fd7a8b3cb80ffddae2dc181f122353c5Ben Murdoch margin: 0 0 15px; 3231675a649fd7a8b3cb80ffddae2dc181f122353c5Ben Murdoch } 3241675a649fd7a8b3cb80ffddae2dc181f122353c5Ben Murdoch 3251675a649fd7a8b3cb80ffddae2dc181f122353c5Ben Murdoch .icon-offline { 3261675a649fd7a8b3cb80ffddae2dc181f122353c5Ben Murdoch margin: 0 0 10px; 3271675a649fd7a8b3cb80ffddae2dc181f122353c5Ben Murdoch } 3281675a649fd7a8b3cb80ffddae2dc181f122353c5Ben Murdoch 3291675a649fd7a8b3cb80ffddae2dc181f122353c5Ben Murdoch .interstitial-wrapper { 3301675a649fd7a8b3cb80ffddae2dc181f122353c5Ben Murdoch margin-top: 5%; 3311675a649fd7a8b3cb80ffddae2dc181f122353c5Ben Murdoch } 3321675a649fd7a8b3cb80ffddae2dc181f122353c5Ben Murdoch 3331675a649fd7a8b3cb80ffddae2dc181f122353c5Ben Murdoch .nav-wrapper { 3341675a649fd7a8b3cb80ffddae2dc181f122353c5Ben Murdoch margin-top: 30px; 3351675a649fd7a8b3cb80ffddae2dc181f122353c5Ben Murdoch } 3361675a649fd7a8b3cb80ffddae2dc181f122353c5Ben Murdoch} 337