src/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 body {
   6   background-color: #E6E6E6;
   7   font-family: Helvetica, Arial, sans-serif;
   8   font-size: 10pt;
   9   margin: 50px 40px 20px 40px;
  10   text-align: center;
  11 }
  12
  13 #main-frame-error {
  14   margin: auto;
  15   max-width: 540px;
  16   min-width: 200px;
  17 }
  18
  19 /* Don't use the main frame div when the error is in a subframe. */
  20 html[subframe] #main-frame-error {
  21   display: none;
  22 }
  23
  24 /* Don't use the subframe error div when the error is in a main frame. */
  25 html:not([subframe]) #sub-frame-error {
  26   display: none;
  27 }
  28
  29 #box {
  30   background-color: #fbfbfb;
  31   border: 1px solid #AAA;
  32   border-bottom: 1px solid #888;
  33   border-radius: 3px;
  34   box-shadow: 0 2px 2px #AAA;
  35   color: black;
  36 }
  37
  38 #diagnose-button {
  39   -webkit-margin-start: 0;
  40   margin-bottom: 10px;
  41   margin-top: 20px;
  42 }
  43
  44 h1 {
  45   color: #666;
  46   font-size: 1.5em;
  47   font-weight: normal;
  48   margin: 10px 0 25px 0;
  49 }
  50
  51 a {
  52   color: rgb(17, 85, 204);
  53   text-decoration: none;
  54 }
  55
  56 .icon {
  57   -webkit-user-select: none;
  58 }
  59
  60 .icon-generic {
  61   /**
  62    * Can't access chrome://theme/IDR_ERROR_NETWORK_GENERIC from an untrusted
  63    * renderer process, so embed the resource manually.
  64    */
  65   content: -webkit-image-set(
  66       url('../../../app/theme/default_100_percent/common/error_network_generic.png') 1x,
  67       url('../../../app/theme/default_200_percent/common/error_network_generic.png') 2x);
  68 }
  69
  70 .icon-offline {
  71   content: -webkit-image-set(
  72       url('../../../app/theme/default_100_percent/common/error_network_offline.png') 1x,
  73       url('../../../app/theme/default_200_percent/common/error_network_offline.png') 2x);
  74 }
  75
  76 #content-top {
  77   margin: 20px 20px 20px 25px;
  78 }
  79
  80 #help-box-outer {
  81   -webkit-transition: height ease-in 218ms;
  82   overflow: hidden;
  83 }
  84
  85 #help-box-inner {
  86   background-color: #f9f9f9;
  87   border-top: 1px solid #EEE;
  88   color: #444;
  89   padding: 25px 20px;
  90   text-align: start;
  91 }
  92
  93 #suggestions {
  94   margin-top: 15px;
  95 }
  96
  97 #sub-frame-error-details {
  98   color: #8F8F8F;
  99   text-shadow: 0 1px 0 rgba(255,255,255,0.3);
 100 }
 101
 102 [jscontent=failedUrl] {
 103   overflow-wrap: break-word;
 104 }
 105
 106 button {
 107   -webkit-user-select: none;
 108   background-image: -webkit-linear-gradient(#ededed, #ededed 38%, #dedede);
 109   border: 1px solid rgba(0, 0, 0, 0.25);
 110   border-radius: 2px;
 111   box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08),
 112               inset 0 1px 2px rgba(255, 255, 255, 0.75);
 113   color: #444;
 114   margin: 0 5px;
 115   min-height: 29px;
 116   min-width: 65px;
 117   padding: 8px 13px;
 118   text-shadow: 0 1px 0 rgb(240, 240, 240);
 119 }
 120
 121 button:hover {
 122   background-image: -webkit-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0);
 123   border: 1px solid rgba(0, 0, 0, 0.3);
 124   box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12),
 125               inset 0 1px 2px rgba(255, 255, 255, 0.95);
 126   color: #000;
 127 }
 128
 129 button:active {
 130   background-image: -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7);
 131   border: 1px solid rgba(0, 0, 0, 0.3);
 132   box-shadow: none;
 133   color: #444;
 134 }
 135
 136 #reload-button {
 137   background-image: -webkit-linear-gradient(rgb(93, 154, 255),
 138                                             rgb(93, 154, 255),
 139                                             rgb(88, 145, 240));
 140   border: 1px solid rgba(45, 102, 195, 1);
 141   box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15),
 142               inset 0 1px 2px rgba(255, 255, 255, 0.2);
 143   color: #fff;
 144   text-shadow: 0 1px 0 rgba(0,0,0,0.5);
 145 }
 146
 147 #reload-button:hover {
 148   background-image: -webkit-linear-gradient(rgb(101, 158, 253),
 149                                             rgb(101, 158, 253),
 150                                             rgb(96, 151, 241));
 151   border: 1px solid rgba(45, 102, 195, 1);
 152   box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25),
 153               inset 0 1px 2px rgba(255, 255, 255, 0.2);
 154 }
 155
 156 #reload-button:active {
 157   background-image: -webkit-linear-gradient(rgb(96, 149, 237),
 158                                             rgb(96, 149, 237),
 159                                             rgb(96, 149, 237));
 160   border: 1px solid rgb(38, 84, 160);
 161   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
 162 }
 163
 164 .hidden {
 165   display: none;
 166 }
 167
 168 .suggestions {
 169   margin-top: 18px;
 170 }
 171
 172 .suggestion-header {
 173   font-weight: bold;
 174   margin-bottom: 4px;
 175 }
 176
 177 .suggestion-body {
 178   color: #777;
 179 }
 180
 181 .error-code {
 182   color: #A0A0A0;
 183   margin-top: 15px;
 184 }
 185
 186 /* Increase line height at higher resolutions. */
 187 @media (min-width: 641px) and (min-height: 641px) {
 188   #help-box-inner {
 189     line-height: 18px;
 190   }
 191 }
 192
 193 /* Decrease padding at low sizes. */
 194 @media (max-width: 640px),
 195        (max-height: 640px) {
 196   body {
 197     margin: 15px;
 198   }
 199   h1 {
 200     margin: 10px 0 15px 0;
 201   }
 202   #content-top {
 203     margin: 15px;
 204   }
 205   #help-box-inner {
 206     padding: 20px;
 207   }
 208   .suggestions {
 209     margin-top: 10px;
 210   }
 211   .suggestion-header {
 212     margin-bottom: 0;
 213   }
 214   .error-code {
 215     margin-top: 10px;
 216   }
 217 }
 218
 219 /* Don't allow overflow when in a subframe. */
 220 html[subframe] body {
 221   overflow: hidden;
 222 }
 223
 224 #sub-frame-error {
 225   -webkit-align-items: center;
 226   -webkit-flex-flow: column;
 227   -webkit-justify-content: center;
 228   background-color: #DDD;
 229   display: -webkit-flex;
 230   height: 100%;
 231   left: 0;
 232   position: absolute;
 233   top: 0;
 234   width: 100%;
 235 }
 236
 237 #sub-frame-error:hover {
 238   background-color: #EEE;
 239 }
 240
 241 #sub-frame-error-details {
 242   margin: 0 10px;
 243   visibility: hidden;
 244 }
 245
 246 /* Show details only when hovering. */
 247 #sub-frame-error:hover #sub-frame-error-details {
 248   visibility: visible;
 249 }
 250
 251 /* If the iframe is too small, always hide the error code. */
 252 /* TODO(mmenke): See if overflow: no-display works better, once supported. */
 253 @media (max-width: 200px),
 254        (max-height: 95px) {
 255   #sub-frame-error-details {
 256     display: none;
 257   }
 258 }