| OLD | NEW |
| (Empty) |
| 1 body | |
| 2 { | |
| 3 display: flex; | |
| 4 flex-direction: column; | |
| 5 align-items: center; | |
| 6 margin: 1.2rem 0.3rem; | |
| 7 font-family: Segoe UI, Arial, sans-serif; | |
| 8 font-size: 1.25rem; | |
| 9 color: #494949; | |
| 10 background-color: #F3F3F3; | |
| 11 } | |
| 12 | |
| 13 html:not([dir="rtl"]) header | |
| 14 { | |
| 15 text-align: right; | |
| 16 margin-right: 2rem; | |
| 17 } | |
| 18 | |
| 19 html[dir="rtl"] header | |
| 20 { | |
| 21 text-align: left; | |
| 22 margin-left: 2rem; | |
| 23 } | |
| 24 | |
| 25 header | |
| 26 { | |
| 27 display: flex; | |
| 28 flex-direction: row; | |
| 29 flex-shrink: 0; | |
| 30 align-items: flex-end; | |
| 31 margin-bottom: 2rem; | |
| 32 } | |
| 33 | |
| 34 header > .title | |
| 35 { | |
| 36 display: flex; | |
| 37 flex-direction: column; | |
| 38 } | |
| 39 | |
| 40 .title > h1 | |
| 41 { | |
| 42 margin: 0rem; | |
| 43 font-size: 1.5rem; | |
| 44 font-weight: 100; | |
| 45 } | |
| 46 | |
| 47 .title > h1 > strong | |
| 48 { | |
| 49 font-weight: 700; | |
| 50 } | |
| 51 | |
| 52 .title > p | |
| 53 { | |
| 54 margin: 0rem; | |
| 55 font-size: 2.4rem; | |
| 56 } | |
| 57 | |
| 58 main | |
| 59 { | |
| 60 flex-grow: 1; | |
| 61 display: flex; | |
| 62 flex-direction: column; | |
| 63 box-sizing: border-box; | |
| 64 width: 46.3rem; | |
| 65 padding: 1.4rem; | |
| 66 background-color: #FFFFFF; | |
| 67 border: 1px solid #CDCDCD; | |
| 68 } | |
| 69 | |
| 70 .page:not([hidden]) | |
| 71 { | |
| 72 display: flex; | |
| 73 flex-grow: 1; | |
| 74 flex-direction: column; | |
| 75 } | |
| 76 | |
| 77 main h1 | |
| 78 { | |
| 79 padding: 0; | |
| 80 margin: 1.4rem 0rem; | |
| 81 } | |
| 82 | |
| 83 #dataCollectorProgressContainer | |
| 84 { | |
| 85 display: flex; | |
| 86 flex-direction: row; | |
| 87 justify-content: center; | |
| 88 margin-top: 2rem; | |
| 89 } | |
| 90 | |
| 91 #typeSelectorGroup > p | |
| 92 { | |
| 93 margin-top: 0.5em; | |
| 94 margin-bottom: 1em; | |
| 95 font-size: 80%; | |
| 96 } | |
| 97 | |
| 98 html:not([dir="rtl"]) #typeSelectorGroup > p | |
| 99 { | |
| 100 margin-left: 30px; | |
| 101 } | |
| 102 | |
| 103 html[dir="rtl"] #typeSelectorGroup > p | |
| 104 { | |
| 105 margin-right: 30px; | |
| 106 } | |
| 107 | |
| 108 #anonymousSubmissionContainer | |
| 109 { | |
| 110 margin-top: 0.5em; | |
| 111 } | |
| 112 | |
| 113 #anonymousSubmissionWarning, | |
| 114 #commentLengthWarning, | |
| 115 #error | |
| 116 { | |
| 117 margin-top: 0.5em; | |
| 118 color: #C00000; | |
| 119 font-size: 80%; | |
| 120 } | |
| 121 | |
| 122 #comment | |
| 123 { | |
| 124 flex-grow: 1; | |
| 125 min-height: 2em; | |
| 126 } | |
| 127 | |
| 128 #sendingProgressContainer:not([hidden]) | |
| 129 { | |
| 130 display: flex; | |
| 131 flex-direction: row; | |
| 132 justify-content: center; | |
| 133 margin-top: 2rem; | |
| 134 } | |
| 135 | |
| 136 #result | |
| 137 { | |
| 138 flex-grow: 1; | |
| 139 border-width: 0px; | |
| 140 } | |
| 141 | |
| 142 footer | |
| 143 { | |
| 144 display: flex; | |
| 145 flex-direction: row; | |
| 146 box-sizing: border-box; | |
| 147 width: 46.3rem; | |
| 148 margin-top: 2rem; | |
| 149 } | |
| 150 | |
| 151 #privacyPolicy | |
| 152 { | |
| 153 flex-grow: 1; | |
| 154 align-self: center; | |
| 155 font-size: 1.125rem; | |
| 156 font-weight: 700; | |
| 157 } | |
| 158 | |
| 159 /* | |
| 160 * Generic styles | |
| 161 */ | |
| 162 | |
| 163 [data-invisible="true"] | |
| 164 { | |
| 165 visibility: hidden; | |
| 166 } | |
| 167 | |
| 168 button | |
| 169 { | |
| 170 padding: 0.8rem 1.2rem; | |
| 171 background-color: transparent; | |
| 172 font-size: 1.125rem; | |
| 173 font-weight: 700; | |
| 174 text-decoration: none; | |
| 175 text-transform: uppercase; | |
| 176 cursor: pointer; | |
| 177 } | |
| 178 | |
| 179 html:not([dir="rtl"]) button | |
| 180 { | |
| 181 margin-left: 0.5rem; | |
| 182 } | |
| 183 | |
| 184 html[dir="rtl"] button | |
| 185 { | |
| 186 margin-right: 0.5rem; | |
| 187 } | |
| 188 | |
| 189 button.primary | |
| 190 { | |
| 191 border: 0px; | |
| 192 color: #FFF; | |
| 193 background-color: #099CD0; | |
| 194 } | |
| 195 | |
| 196 button.primary:not([disabled]):hover | |
| 197 { | |
| 198 box-shadow: inset 0 0 0 3px #005D80; | |
| 199 } | |
| 200 | |
| 201 button.primary[disabled] | |
| 202 { | |
| 203 background-color: #5CBCE1; | |
| 204 } | |
| 205 | |
| 206 button.secondary | |
| 207 { | |
| 208 border: 1px solid #099CD0; | |
| 209 color: #099CD0; | |
| 210 } | |
| 211 | |
| 212 button.secondary:hover | |
| 213 { | |
| 214 box-shadow: inset 0 0 0 2px #099CD0; | |
| 215 } | |
| 216 | |
| 217 input[type="text"], | |
| 218 input[type="email"], | |
| 219 textarea | |
| 220 { | |
| 221 font-size: 1.25rem; | |
| 222 border: 2px solid #099CD0; | |
| 223 } | |
| 224 | |
| 225 input[type="email"]:invalid | |
| 226 { | |
| 227 border-color: #E00000; | |
| 228 } | |
| 229 | |
| 230 input[type="checkbox"], | |
| 231 input[type="radio"] | |
| 232 { | |
| 233 width: 18px; | |
| 234 height: 18px; | |
| 235 padding: 0px; | |
| 236 margin: 0px 3px; | |
| 237 border: 0px; | |
| 238 -webkit-appearance: none; | |
| 239 -moz-appearance: none; | |
| 240 background-color: transparent; | |
| 241 background-image: url(icons/checkbox.png); | |
| 242 display: inline-block; | |
| 243 } | |
| 244 | |
| 245 input[type="checkbox"]:checked, | |
| 246 input[type="radio"]:checked | |
| 247 { | |
| 248 background-position: 0px 18px; | |
| 249 } | |
| OLD | NEW |