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