chrome/browser/resources/chromeos/neterror.css

   1 /* Copyright 2013 The Chromium Authors. All rights reserved.
   2  * Use of this source code is governed by a BSD-style license that can be
   3  * found in the LICENSE file. */
   4
   5 /* Don't use the main frame div when the error is in a subframe. */
   6 html[subframe] #main-frame-error {
   7   display: none;
   8 }
   9
  10 /* Don't use the subframe error div when the error is in a main frame. */
  11 html:not([subframe]) #sub-frame-error {
  12   display: none;
  13 }
  14
  15 #diagnose-button {
  16   -webkit-margin-start: 0;
  17   margin-bottom: 10px;
  18   margin-top: 20px;
  19 }
  20
  21 h1 {
  22   color: #666;
  23   font-size: 1.5em;
  24   font-weight: normal;
  25   margin: 10px 0 25px 0;
  26 }
  27
  28 a {
  29   color: rgb(17, 85, 204);
  30   text-decoration: none;
  31 }
  32
  33 .icon {
  34   -webkit-user-select: none;
  35 }
  36
  37 .icon-generic {
  38   /**
  39    * Can't access chrome://theme/IDR_ERROR_NETWORK_GENERIC from an untrusted
  40    * renderer process, so embed the resource manually.
  41    */
  42   content: -webkit-image-set(
  43       url(../../../renderer/resources/default_100_percent/common/error_network_generic.png) 1x,
  44       url(../../../renderer/resources/default_200_percent/common/error_network_generic.png) 2x);
  45 }
  46
  47 .icon-offline {
  48   content: -webkit-image-set(
  49       url(../../../renderer/resources/default_100_percent/offline/100-error-offline.png) 1x,
  50       url(../../../renderer/resources/default_200_percent/offline/200-error-offline.png) 2x);
  51 }
  52
  53 #help-box-outer {
  54   -webkit-transition: height ease-in 218ms;
  55   overflow: hidden;
  56 }
  57
  58 #help-box-inner {
  59   background-color: #f9f9f9;
  60   border-top: 1px solid #EEE;
  61   color: #444;
  62   padding: 25px 20px;
  63   text-align: start;
  64 }
  65
  66 #suggestions {
  67   margin-top: 15px;
  68 }
  69
  70 #sub-frame-error-details {
  71   color: #8F8F8F;
  72   text-shadow: 0 1px 0 rgba(255,255,255,0.3);
  73 }
  74
  75 [jscontent=failedUrl] {
  76   overflow-wrap: break-word;
  77 }
  78
  79 .hidden {
  80   display: none;
  81 }
  82
  83 .suggestions {
  84   margin-top: 18px;
  85 }
  86
  87 .suggestion-header {
  88   font-weight: bold;
  89   margin-bottom: 4px;
  90 }
  91
  92 .suggestion-body {
  93   color: #777;
  94 }
  95
  96 .error-code {
  97   color: #A0A0A0;
  98   margin-top: 15px;
  99 }
 100
 101 /* Increase line height at higher resolutions. */
 102 @media (min-width: 641px) and (min-height: 641px) {
 103   #help-box-inner {
 104     line-height: 18px;
 105   }
 106 }
 107
 108 /* Decrease padding at low sizes. */
 109 @media (max-width: 640px),
 110        (max-height: 640px) {
 111   body {
 112     margin: 15px;
 113   }
 114   h1 {
 115     margin: 10px 0 15px 0;
 116   }
 117   #help-box-inner {
 118     padding: 20px;
 119   }
 120   .suggestions {
 121     margin-top: 10px;
 122   }
 123   .suggestion-header {
 124     margin-bottom: 0;
 125   }
 126   .error-code {
 127     margin-top: 10px;
 128   }
 129 }
 130
 131 /* Don't allow overflow when in a subframe. */
 132 html[subframe] body {
 133   overflow: hidden;
 134 }
 135
 136 #sub-frame-error {
 137   -webkit-align-items: center;
 138   -webkit-flex-flow: column;
 139   -webkit-justify-content: center;
 140   background-color: #DDD;
 141   display: -webkit-flex;
 142   height: 100%;
 143   left: 0;
 144   position: absolute;
 145   top: 0;
 146   width: 100%;
 147 }
 148
 149 #sub-frame-error:hover {
 150   background-color: #EEE;
 151 }
 152
 153 #sub-frame-error-details {
 154   margin: 0 10px;
 155   visibility: hidden;
 156 }
 157
 158 /* Show details only when hovering. */
 159 #sub-frame-error:hover #sub-frame-error-details {
 160   visibility: visible;
 161 }
 162
 163 /* If the iframe is too small, always hide the error code. */
 164 /* TODO(mmenke): See if overflow: no-display works better, once supported. */
 165 @media (max-width: 200px),
 166        (max-height: 95px) {
 167   #sub-frame-error-details {
 168     display: none;
 169   }
 170 }
 171
 172 /* Offline page */
 173 .offline .interstitial-wrapper {
 174   color: #2b2b2b;
 175   font-size: 1em;
 176   line-height: 1.55;
 177   margin: 100px auto 0;
 178   max-width: 600px;
 179   width: 100%;
 180 }
 181
 182 .offline .runner-container {
 183   height: 150px;
 184   max-width: 600px;
 185   overflow: hidden;
 186   position: absolute;
 187   top: 10px;
 188   width: 44px;
 189   z-index: 2;
 190 }
 191
 192 .offline .runner-canvas {
 193   height: 150px;
 194   max-width: 600px;
 195   opacity: 1;
 196   overflow: hidden;
 197   position: absolute;
 198   top: 0;
 199 }
 200
 201 .offline .controller {
 202   background: rgba(247,247,247, .1);
 203   height: 100vh;
 204   left: 0;
 205   position: absolute;
 206   top: 0;
 207   width: 100vw;
 208   z-index: 1;
 209 }
 210
 211 #offline-resources {
 212   display: none;
 213 }