| OLD | NEW |
| (Empty) |
| 1 /* Copyright (c) 2012 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 html.loading [jsdisplay] { | |
| 6 display: none; | |
| 7 } | |
| 8 | |
| 9 [hidden] { | |
| 10 display: none !important; | |
| 11 } | |
| 12 | |
| 13 body { | |
| 14 background: url('images/stripe.png') rgb(140, 0, 0); | |
| 15 margin: 0; | |
| 16 } | |
| 17 | |
| 18 .box { | |
| 19 -webkit-border-radius: 5px; | |
| 20 -webkit-box-shadow: 3px 3px 8px rgb(140, 0, 0); | |
| 21 background-color: white; | |
| 22 color: rgb(75, 75, 77); | |
| 23 margin: 40px auto; | |
| 24 padding: 40px; | |
| 25 text-align: start; | |
| 26 width: 700px; | |
| 27 } | |
| 28 | |
| 29 .float { | |
| 30 float: right; | |
| 31 } | |
| 32 | |
| 33 html[dir='rtl'] .float { | |
| 34 float: left; | |
| 35 } | |
| 36 | |
| 37 .icon { | |
| 38 margin-top: 23px; | |
| 39 } | |
| 40 | |
| 41 .clear { | |
| 42 clear: both; | |
| 43 } | |
| 44 | |
| 45 #logo { | |
| 46 content: -webkit-image-set( | |
| 47 url('../../../app/theme/%DISTRIBUTION%/product_logo_name_48.png') 1x, | |
| 48 url('../../../app/theme/%DISTRIBUTION%/product_logo_name_96.png') 2x); | |
| 49 max-width: 100%; | |
| 50 } | |
| 51 | |
| 52 #headline { | |
| 53 -webkit-margin-end: 260px; | |
| 54 color: #333; | |
| 55 font-size: 22px; | |
| 56 font-weight: bold; | |
| 57 margin-top: 20px; | |
| 58 } | |
| 59 | |
| 60 .main { | |
| 61 -webkit-margin-end: 260px; | |
| 62 font-size: 16px; | |
| 63 line-height: 22px; | |
| 64 margin-bottom: 21px; | |
| 65 margin-top: 14px; | |
| 66 } | |
| 67 | |
| 68 .advanced { | |
| 69 -webkit-margin-start: 10px; | |
| 70 display: inline-block; | |
| 71 font-size: 13px; | |
| 72 } | |
| 73 | |
| 74 footer { | |
| 75 font-size: 13px; | |
| 76 margin-top: 50px; | |
| 77 } | |
| 78 | |
| 79 #learn-more-link { | |
| 80 display: inline-block; | |
| 81 font-size: 13px; | |
| 82 } | |
| 83 | |
| 84 #privacy-link { | |
| 85 display: inline-block; | |
| 86 } | |
| 87 | |
| 88 .submission { | |
| 89 -webkit-margin-end: 5px; | |
| 90 margin-bottom: 15px; | |
| 91 padding: 0; | |
| 92 } | |
| 93 | |
| 94 button { | |
| 95 -webkit-box-shadow: inset 0 1px 0 0 rgb(129, 169, 243), | |
| 96 0 1px 2px rgba(0, 0, 0, .2); | |
| 97 background: -webkit-linear-gradient(rgb(112, 154, 241), | |
| 98 rgb(108, 148, 240) 44%, rgb(95, 132, 238)); | |
| 99 border: 1px solid rgb(53, 116, 203); | |
| 100 border-radius: 3px; | |
| 101 color: white; | |
| 102 cursor: pointer; | |
| 103 display: inline-block; | |
| 104 font-size: 14px; | |
| 105 font-weight: bold; | |
| 106 line-height: 1; | |
| 107 padding: 11px 38px 10px 38px; | |
| 108 text-align: center; | |
| 109 text-decoration: none; | |
| 110 text-shadow: 0 -1px 0 rgb(72, 101, 228); | |
| 111 } | |
| 112 | |
| 113 button:hover, | |
| 114 button:focus { | |
| 115 -webkit-box-shadow: inset 0 1px 0 0 rgb(129, 169, 243), | |
| 116 0 1px 2px rgba(0, 0, 0, .3); | |
| 117 background: -webkit-linear-gradient(rgb(165, 188, 245), | |
| 118 rgb(108, 148, 240) 70%, rgb(95, 132, 238)); | |
| 119 border: 1px solid rgb(53, 116, 203); | |
| 120 } | |
| 121 | |
| 122 button:active { | |
| 123 -webkit-box-shadow: inset 1px 1px 1px 1px rgba(0, 0, 0, .1); | |
| 124 background: -webkit-linear-gradient(rgb(112, 154, 241), | |
| 125 rgb(108, 148, 240) 44%, rgb(95, 132, 238)); | |
| 126 border: 1px solid rgb(53, 116, 203); | |
| 127 } | |
| 128 | |
| 129 a { | |
| 130 color: rgb(17, 84, 204); | |
| 131 } | |
| 132 | |
| 133 a:link, | |
| 134 a:visited { | |
| 135 text-decoration: none; | |
| 136 } | |
| 137 | |
| 138 a:hover, | |
| 139 a:active { | |
| 140 text-decoration: underline; | |
| 141 } | |
| 142 | |
| 143 .checkbox { | |
| 144 margin-top: 11px; | |
| 145 position: relative; | |
| 146 } | |
| 147 | |
| 148 .checkbox input { | |
| 149 -webkit-margin-start: 1px; | |
| 150 margin-top: 3px; | |
| 151 position: absolute; | |
| 152 } | |
| 153 | |
| 154 .checkbox span { | |
| 155 -webkit-margin-start: 21px; | |
| 156 display: inline-block; | |
| 157 } | |
| 158 | |
| 159 /* When the window is 860px or smaller, switch to dynamically scaling the | |
| 160 * contents. The text is also allowed to flow around the icon rather than | |
| 161 * staying in a separate column. The percentage values below are derived so | |
| 162 * that at 860px everything is the same size as the static values above, and | |
| 163 * then scales down smoothly from there. */ | |
| 164 @media screen and (max-width: 860px) { | |
| 165 .box { | |
| 166 margin: 4.6%; | |
| 167 padding: 4.6%; | |
| 168 width: 81.6%; | |
| 169 } | |
| 170 .icon { | |
| 171 -webkit-margin-start: 2%; | |
| 172 margin-bottom: 2%; | |
| 173 max-width: 33%; | |
| 174 } | |
| 175 #headline, | |
| 176 .main { | |
| 177 -webkit-margin-end: 0; | |
| 178 } | |
| 179 } | |
| OLD | NEW |