neterror.css revision 8bcbed890bc3ce4d7a057a8f32cab53fa534672e
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)body { 63551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) background-color: #E6E6E6; 73551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) font-family: Helvetica, Arial, sans-serif; 83551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) font-size: 10pt; 93551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) margin: 50px 40px 20px 40px; 103551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)} 113551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) 123551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)#main-frame-error { 133551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) margin: auto; 143551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) max-width: 540px; 153551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) min-width: 200px; 163551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)} 173551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) 183551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)/* Don't use the main frame div when the error is in a subframe. */ 193551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)html[subframe] #main-frame-error { 203551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) display: none; 213551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)} 223551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) 233551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)/* Don't use the subframe error div when the error is in a main frame. */ 243551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)html:not([subframe]) #sub-frame-error { 253551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) display: none; 263551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)} 273551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) 283551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)#box { 293551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) background-color: #fbfbfb; 303551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) border: 1px solid #AAA; 313551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) border-bottom: 1px solid #888; 323551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) border-radius: 3px; 333551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) color: black; 343551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)<if expr="not is_android and not is_ios"> 353551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) /* Not done on mobile for performance reasons. */ 363551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) box-shadow: 0px 2px 2px #AAA; 373551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)</if> 383551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)} 393551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) 403551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)#diagnose-button { 413551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) margin-top: 20px; 423551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) margin-bottom: 10px; 433551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) -webkit-margin-start: 0px; 443551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)} 453551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) 468bcbed890bc3ce4d7a057a8f32cab53fa534672eTorne (Richard Coles)#content-top #buttons, 478bcbed890bc3ce4d7a057a8f32cab53fa534672eTorne (Richard Coles)#content-top h1 { 483551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) color: #666; 493551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) margin: 10px 0px 25px 0px; 503551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) font-weight: normal; 513551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) font-size: 1.5em; 528bcbed890bc3ce4d7a057a8f32cab53fa534672eTorne (Richard Coles) text-align: center; 538bcbed890bc3ce4d7a057a8f32cab53fa534672eTorne (Richard Coles)} 548bcbed890bc3ce4d7a057a8f32cab53fa534672eTorne (Richard Coles) 558bcbed890bc3ce4d7a057a8f32cab53fa534672eTorne (Richard Coles)h2 { 568bcbed890bc3ce4d7a057a8f32cab53fa534672eTorne (Richard Coles) color: #666; 578bcbed890bc3ce4d7a057a8f32cab53fa534672eTorne (Richard Coles) font-size: 1.2em; 588bcbed890bc3ce4d7a057a8f32cab53fa534672eTorne (Richard Coles) font-weight: normal; 598bcbed890bc3ce4d7a057a8f32cab53fa534672eTorne (Richard Coles) margin: 10px 0; 603551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)} 613551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) 623551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)a { 633551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) color: #15c; 643551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) text-decoration: none; 653551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)} 663551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) 673551c9c881056c480085172ff9840cab31610854Torne (Richard Coles).icon { 683551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) -webkit-user-select: none; 693551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)} 703551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) 713551c9c881056c480085172ff9840cab31610854Torne (Richard Coles).icon-generic { 723551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) /** 733551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) * Can't access chrome://theme/IDR_ERROR_NETWORK_GENERIC from an untrusted 743551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) * renderer process, so embed the resource manually. 753551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) */ 763551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) content: -webkit-image-set( 773551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) url('../../app/theme/default_100_percent/common/error_network_generic.png') 1x, 783551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) url('../../app/theme/default_200_percent/common/error_network_generic.png') 2x); 793551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)} 803551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) 813551c9c881056c480085172ff9840cab31610854Torne (Richard Coles).icon-offline { 823551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) content: -webkit-image-set( 833551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) url('../../app/theme/default_100_percent/common/error_network_offline.png') 1x, 843551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) url('../../app/theme/default_200_percent/common/error_network_offline.png') 2x); 853551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)} 863551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) 873551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)#content-top { 883551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) margin: 20px 20px 20px 25px; 893551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)} 903551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) 913551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)#help-box-outer { 923551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) overflow: hidden; 933551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) -webkit-transition: height ease-in 218ms; 943551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)} 953551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) 963551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)#help-box-inner { 973551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) background-color: #f9f9f9; 983551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) border-top: 1px solid #EEE; 993551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) color: #444; 1003551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) padding: 25px 20px; 1013551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) text-align: start; 1023551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)} 1033551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) 1043551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)#suggestions { 1053551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) margin-top: 15px; 1063551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)} 1073551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) 1083551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)#sub-frame-error-details { 1093551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) color: #8F8F8F; 1103551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)<if expr="not is_android and not is_ios"> 1113551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) /* Not done on mobile for performance reasons. */ 1123551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) text-shadow: 0 1px 0 rgba(255,255,255,0.3); 1133551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)</if> 1143551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)} 1153551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) 1163551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)[jscontent=failedUrl] { 1173551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) overflow-wrap: break-word; 1183551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)} 1193551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) 1203551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)button { 1213551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) border: 1px solid rgba(0, 0, 0, 0.25); 1223551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) border-radius: 2px; 1233551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) color: #444; 1243551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) margin: 0px 5px; 1253551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) min-height: 29px; 1263551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) min-width: 65px; 1273551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) -webkit-user-select: none; 1283551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) padding: 8px 13px; 1293551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)<if expr="not is_android"> 1303551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) /* iOS does not support linear-gradient without a prefix. */ 1313551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) background-image: -webkit-linear-gradient(#ededed, #ededed 38%, #dedede); 1323551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) text-shadow: 0 1px 0 rgb(240, 240, 240); 1333551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)</if> 1343551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)<if expr="is_android"> 1353551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) /* Android uses flat background colors. */ 1363551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) background-color: #ededed; 1373551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) font-weight: bold; 1383551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)</if> 1393551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)<if expr="not is_android and not is_ios"> 1403551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) /* Not done on mobile for performance reasons. */ 1413551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.75); 1423551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)</if> 1433551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)} 1443551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) 1453551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)button:hover { 1463551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) border: 1px solid rgba(0, 0, 0, 0.3); 1473551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) color: #000; 1483551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)<if expr="not is_android"> 1493551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) background-image: -webkit-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0); 1503551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)</if> 1513551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)<if expr="is_android"> 1523551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) background-color: #f0f0f0; 1533551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)</if> 1543551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)<if expr="not is_android and not is_ios"> 1553551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12), inset 0 1px 2px rgba(255, 255, 255, 0.95); 1563551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)</if> 1573551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)} 1583551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) 1593551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)button:active { 1603551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) border: 1px solid rgba(0, 0, 0, 0.3); 1613551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) color: #444; 1623551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)<if expr="not is_android"> 1633551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) background-image: -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7); 1643551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)</if> 1653551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)<if expr="is_android"> 1663551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) background-color: #e7e7e7; 1673551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)</if> 1683551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)<if expr="not is_android and not is_ios"> 1693551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) box-shadow: none; 1703551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)</if> 1713551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)} 1723551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) 1733551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)#reload-button { 1743551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) color: #fff; 1753551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)<if expr="not is_android"> 1763551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) background-image: -webkit-linear-gradient(#5d9aff, #5d9aff 38%, #5891f0); 1773551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) border: 1px solid rgba(45, 102, 195, 1); 1783551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) text-shadow: 0 1px 0 rgba(0,0,0,0.5); 1793551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)</if> 1803551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)<if expr="is_android"> 1813551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) background-color: rgb(39, 180, 231); 1823551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) border: 1px solid rgb(0, 152, 206); 1833551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)</if> 1843551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)<if expr="not is_android and not is_ios"> 1853551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15), inset 0 1px 2px rgba(255, 255, 255, 0.2); 1863551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)</if> 1873551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)} 1883551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) 1893551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)#reload-button:hover { 1903551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)<if expr="not is_android"> 1913551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) background-image: -webkit-linear-gradient(#659efd, #659efd 38%, #6097f1); 1923551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) border: 1px solid rgba(45, 102, 195, 1); 1933551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)</if> 1943551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)<if expr="not is_android and not is_ios"> 1953551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25), inset 0 1px 2px rgba(255, 255, 255, 0.2); 1963551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)</if> 1973551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)} 1983551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) 1993551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)#reload-button:active { 2003551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)<if expr="not is_android"> 2013551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) background-image: -webkit-linear-gradient(#6095ed, #6095ed 38%, #6095ed); 2023551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) border: 1px solid rgb(38, 84, 160); 2033551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)</if> 2043551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)<if expr="is_android"> 2053551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) background-color: rgb(0, 152, 206); 2063551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)</if> 2073551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)<if expr="not is_android and not is_ios"> 2083551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); 2093551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)</if> 2103551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)} 2113551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) 2123551c9c881056c480085172ff9840cab31610854Torne (Richard Coles).hidden { 2133551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) display: none; 2143551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)} 2153551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) 2163551c9c881056c480085172ff9840cab31610854Torne (Richard Coles).suggestions { 2173551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) margin-top: 18px; 2183551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)} 2193551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) 2203551c9c881056c480085172ff9840cab31610854Torne (Richard Coles).suggestion-header { 2213551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) font-weight: bold; 2223551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) margin-bottom: 4px; 2233551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)} 2243551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) 2253551c9c881056c480085172ff9840cab31610854Torne (Richard Coles).suggestion-body { 2263551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) color: #777; 2273551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)} 2283551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) 2293551c9c881056c480085172ff9840cab31610854Torne (Richard Coles).error-code { 2303551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) color: #A0A0A0; 2313551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) margin-top: 15px; 2323551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)} 2333551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) 2343551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)/* Increase line height at higher resolutions. */ 2353551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)@media (min-width: 641px) and (min-height: 641px) { 2363551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) #help-box-inner { 2373551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) line-height: 18px; 2383551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) } 2393551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)} 2403551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) 2413551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)/* Decrease padding at low sizes. */ 2423551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)@media (max-width: 640px), (max-height: 640px) { 2433551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) body { 2443551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) margin: 15px; 2453551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) } 2463551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) h1 { 2473551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) margin: 10px 0px 15px 0px; 2483551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) } 2493551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) #content-top { 2503551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) margin: 15px; 2513551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) } 2523551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) #help-box-inner { 2533551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) padding: 20px; 2543551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) } 2553551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) .suggestions { 2563551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) margin-top: 10px; 2573551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) } 2583551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) .suggestion-header { 2593551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) margin-bottom: 0px; 2603551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) } 2613551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) .error-code { 2623551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) margin-top: 10px; 2633551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) } 2643551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)} 2653551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) 2663551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)/* Don't allow overflow when in a subframe. */ 2673551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)html[subframe] body { 2683551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) overflow: hidden; 2693551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)} 2703551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) 2713551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)#sub-frame-error { 2723551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) -webkit-align-items: center; 2733551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) background-color: #DDD; 2743551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) display: -webkit-flex; 2753551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) -webkit-flex-flow: column; 2763551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) height: 100%; 2773551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) -webkit-justify-content: center; 2783551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) left: 0px; 2793551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) position: absolute; 2803551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) top: 0px; 2813551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) width: 100%; 2823551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)} 2833551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) 2843551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)#sub-frame-error:hover { 2853551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) background-color: #EEE; 2863551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)} 2873551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) 2883551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)#sub-frame-error-details { 2893551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) margin: 0 10px; 2903551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) visibility: hidden; 2913551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)} 2923551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) 2933551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)/* Show details only when hovering. */ 2943551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)#sub-frame-error:hover #sub-frame-error-details { 2953551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) visibility: visible; 2963551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)} 2973551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) 2983551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)/* If the iframe is too small, always hide the error code. */ 2993551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)/* TODO(mmenke): See if overflow: no-display works better, once supported. */ 3003551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)@media (max-width: 200px), (max-height: 95px) { 3013551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) #sub-frame-error-details { 3023551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) display: none; 3033551c9c881056c480085172ff9840cab31610854Torne (Richard Coles) } 3043551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)} 305