src/chrome/browser/resources/security_warnings/interstitial_v2.css

   1 /* Copyright 2014 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 a {
   6   color: #585858;
   7 }
   8
   9 .bad-clock .icon {
  10   background-image: -webkit-image-set(
  11       url(images/1x/clock.png) 1x,
  12       url(images/2x/clock.png) 2x);
  13 }
  14
  15 body {
  16   background-color: #f7f7f7;
  17   color: #585858;
  18   font-size: 125%;
  19 }
  20
  21 body.safe-browsing {
  22   background-color: rgb(206, 52, 38);
  23   color: white;
  24 }
  25
  26 button {
  27   background: rgb(76, 142, 250);
  28   border: 0;
  29   border-radius: 2px;
  30   box-sizing: border-box;
  31   color: #fff;
  32   cursor: pointer;
  33   float: right;
  34   font-size: .875em;
  35   height: 36px;
  36   margin: -6px 0 0;
  37   padding: 8px 24px;
  38   transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
  39 }
  40
  41 [dir='rtl'] button {
  42   float: left;
  43 }
  44
  45 button:active {
  46   background: rgb(50, 102, 213);
  47   outline: 0;
  48 }
  49
  50 button:hover {
  51   box-shadow: 0 1px 3px rgba(0, 0, 0, .50);
  52 }
  53
  54 .debugging-content {
  55   line-height: 1em;
  56   margin-bottom: 0;
  57   margin-top: 0;
  58 }
  59
  60 .debugging-title {
  61   font-weight: bold;
  62 }
  63
  64 #details {
  65   color: #696969;
  66   margin: 45px 0 50px;
  67 }
  68
  69 #details p:not(:first-of-type) {
  70   margin-top: 20px;
  71 }
  72
  73 #error-code {
  74   color: black;
  75   opacity: .35;
  76   text-transform: uppercase;
  77 }
  78
  79 #error-debugging-info {
  80   font-size: 0.8em;
  81 }
  82
  83 h1 {
  84   color: #585858;
  85   font-size: 1.6em;
  86   font-weight: normal;
  87   line-height: 1.25em;
  88   margin-bottom: 16px;
  89 }
  90
  91 h2 {
  92   font-size: 1.2em;
  93   font-weight: normal;
  94 }
  95
  96 .hidden {
  97   display: none;
  98 }
  99
 100 .icon {
 101   background-repeat: no-repeat;
 102   background-size: 100%;
 103   height: 72px;
 104   margin: 0 0 40px;
 105   width: 72px;
 106 }
 107
 108 input[type=checkbox] {
 109   visibility: hidden;
 110 }
 111
 112 .interstitial-wrapper {
 113   box-sizing: border-box;
 114   font-size: 1em;
 115   line-height: 1.6em;
 116   margin: 100px auto 0;
 117   max-width: 600px;
 118   width: 100%;
 119 }
 120
 121 #malware-opt-in {
 122   font-size: .875em;
 123   margin-top: 39px;
 124 }
 125
 126 .nav-wrapper {
 127   margin-top: 51px;
 128 }
 129
 130 .nav-wrapper::after {
 131   clear: both;
 132   content: '';
 133   display: table;
 134   width: 100%;
 135 }
 136
 137 #opt-in-label {
 138   -webkit-margin-start: 32px;
 139 }
 140
 141 .safe-browsing :-webkit-any(
 142     a, #details, #details-button, h1, h2, p, .small-link) {
 143   color: white;
 144 }
 145
 146 .safe-browsing button {
 147   background-color: rgb(206, 52, 38);
 148   border: 1px solid white;
 149 }
 150
 151 .safe-browsing button:active {
 152   background-color: rgb(206, 52, 38);
 153   border-color: rgba(255, 255, 255, .6);
 154 }
 155
 156 .safe-browsing button:hover {
 157   box-shadow: 0 2px 3px rgba(0, 0, 0, .5);
 158 }
 159
 160 .safe-browsing .icon {
 161   background-image: -webkit-image-set(
 162       url(images/1x/stop_sign.png) 1x,
 163       url(images/2x/stop_sign.png) 2x);
 164 }
 165
 166 .small-link {
 167   color: #696969;
 168   font-size: .875em;
 169 }
 170
 171 .ssl .icon {
 172   background-image: -webkit-image-set(
 173       url(images/1x/brokenssl_red.png) 1x,
 174       url(images/2x/brokenssl_red.png) 2x);
 175 }
 176
 177 .styled-checkbox {
 178   float: left;
 179   height: 16px;
 180   margin-top: .36em;
 181   position: relative;
 182   width: 16px;
 183 }
 184
 185 [dir='rtl'] .styled-checkbox {
 186   float: right;
 187 }
 188
 189 .styled-checkbox label {
 190   background: transparent;
 191   border: white solid 1px;
 192   border-radius: 2px;
 193   height: 14px;
 194   left: 0;
 195   position: absolute;
 196   right: 0;
 197   top: 0;
 198   width: 14px;
 199 }
 200
 201 .styled-checkbox label::after {
 202   background: transparent;
 203   border: 2px solid white;
 204   border-right-width: 0;
 205   border-top-width: 0;
 206   content: '';
 207   height: 4px;
 208   left: 2px;
 209   opacity: 0.3;
 210   position: absolute;
 211   top: 3px;
 212   transform: rotate(-45deg);
 213   width: 9px;
 214 }
 215
 216 .styled-checkbox input[type=checkbox]:checked + label::after {
 217   opacity: 1;
 218 }
 219
 220 @media (max-width: 700px) {
 221   .interstitial-wrapper {
 222     padding: 0 10%;
 223   }
 224 }
 225
 226 @media (max-height: 600px) {
 227   .interstitial-wrapper {
 228     margin-top: 13%;
 229   }
 230 }
 231
 232 @media (max-width: 400px) {
 233   button,
 234   [dir='rtl'] button {
 235     float: none;
 236     font-size: 1em;
 237     width: 100%;
 238   }
 239
 240   #details {
 241     margin: 20px 0 20px 0;
 242   }
 243
 244   #details p:not(:first-of-type) {
 245     margin-top: 10px;
 246   }
 247
 248   #details-button {
 249     display: block;
 250     padding-top: 14px;
 251     text-align: center;
 252     width: 100%;
 253   }
 254
 255   .interstitial-wrapper {
 256     padding: 0 5%;
 257   }
 258
 259   #malware-opt-in {
 260     margin-top: 24px;
 261   }
 262
 263   .nav-wrapper {
 264     margin-top: 30px;
 265   }
 266
 267   .small-link {
 268     font-size: 1em;
 269   }
 270 }