style.css (4101B)
1 body { 2 font-family: 'Georgia', serif; 3 font-size: 16px; 4 padding: 0.5rem; 5 width: 900px; 6 margin-left: auto; 7 margin-right: auto; 8 } 9 10 h1 { 11 font-size: 32px; 12 font-weight: normal; 13 line-height: 40px; 14 margin-top: 40px; 15 } 16 17 h2 { 18 font-size: 16px; 19 font-weight: bold; 20 margin-top: 24px; 21 } 22 23 ul { 24 margin: 0; 25 list-style: none; 26 padding: 0; 27 } 28 29 p { 30 width: 420px; 31 } 32 33 footer { 34 margin: 2rem 0; 35 font-size: 75%; 36 color: #808080; 37 38 a, 39 a:visited { 40 color: inherit; 41 } 42 } 43 44 button { 45 font: inherit; 46 cursor: pointer; 47 background: none; 48 border: none; 49 padding: 0; 50 color: inherit; 51 } 52 53 button:disabled { 54 opacity: 0.35; 55 cursor: default; 56 } 57 58 .start-btn, 59 .submit-btn { 60 font-weight: bold; 61 } 62 63 .skip-btn, 64 .quit-btn { 65 color: #808080; 66 } 67 68 .config-divider { 69 border: none; 70 border-top: 1px solid #c0c0c0; 71 margin: 32px 0; 72 } 73 74 .home-actions { 75 margin-top: 24px; 76 77 >button+button { 78 margin-left: 16px; 79 } 80 } 81 82 .error-msg { 83 width: auto; 84 margin-top: 12px; 85 font-size: 14px; 86 color: #a05050; 87 } 88 89 .question-form { 90 margin-top: 8px; 91 } 92 93 .word-prompt { 94 display: block; 95 } 96 97 .text-input { 98 font: inherit; 99 border: none; 100 border-bottom: 1px solid #c0c0c0; 101 outline: none; 102 background: none; 103 width: 200px; 104 padding: 2px 0; 105 106 &:focus { 107 border-bottom-color: #4070a0; 108 } 109 } 110 111 .answer-input { 112 margin-top: 8px; 113 114 &.-correct { 115 border-bottom-color: #5a9060; 116 } 117 118 &.-incorrect { 119 border-bottom-color: #a05050; 120 } 121 122 &.-wrong-flash { 123 border-bottom-color: #a05050; 124 animation: input-shake 0.35s ease-out; 125 } 126 } 127 128 .question-count { 129 display: flex; 130 align-items: baseline; 131 gap: 12px; 132 margin-top: 16px; 133 } 134 135 .form-actions { 136 margin-top: 16px; 137 138 >button+button { 139 margin-left: 16px; 140 } 141 } 142 143 @keyframes input-shake { 144 145 0%, 146 100% { 147 transform: translateX(0); 148 } 149 150 25% { 151 transform: translateX(-6px); 152 } 153 154 75% { 155 transform: translateX(6px); 156 } 157 } 158 159 .config-panels { 160 display: flex; 161 flex-direction: column; 162 gap: 32px; 163 align-items: flex-start; 164 } 165 166 .tense-group { 167 margin-top: 24px; 168 } 169 170 .tense-grid { 171 border-collapse: collapse; 172 margin-top: 8px; 173 } 174 175 .tense-grid th { 176 font-weight: normal; 177 color: #808080; 178 font-size: 14px; 179 text-align: left; 180 padding: 0 24px 8px 0; 181 } 182 183 .tense-grid td { 184 padding: 3px 24px 3px 0; 185 } 186 187 .tense-grid td:first-child { 188 color: #808080; 189 font-size: 14px; 190 padding-right: 32px; 191 } 192 193 .tense-specials { 194 display: flex; 195 gap: 24px; 196 margin-top: 8px; 197 } 198 199 .tense-cell { 200 display: flex; 201 align-items: center; 202 gap: 6px; 203 cursor: pointer; 204 } 205 206 .tense-example { 207 color: #303030; 208 font-size: 14px; 209 } 210 211 .save-action { 212 margin-top: 24px; 213 display: flex; 214 align-items: baseline; 215 gap: 16px; 216 } 217 218 .save-msg { 219 font-size: 14px; 220 color: #5a9060; 221 } 222 223 .deck-item { 224 display: flex; 225 align-items: center; 226 gap: 8px; 227 margin-top: 8px; 228 } 229 230 .deck-remove { 231 font-size: 12px; 232 color: #a05050; 233 } 234 235 .deck-upload { 236 margin-top: 16px; 237 display: flex; 238 align-items: baseline; 239 gap: 12px; 240 } 241 242 .deck-upload-label { 243 font-size: 14px; 244 color: #808080; 245 } 246 247 .word-level { 248 text-decoration: underline; 249 text-underline-offset: 3px; 250 text-decoration-thickness: 2px; 251 } 252 253 .word-level.-unknown { 254 text-decoration-color: #a05050; 255 } 256 257 .word-level.-seen { 258 text-decoration-color: #a08030; 259 } 260 261 .word-level.-known { 262 text-decoration-color: #5a9060; 263 } 264 265 .answer-reveal { 266 margin-top: 24px; 267 } 268 269 .answer-reveal>p { 270 width: auto; 271 } 272 273 .answer-reveal .answer-value { 274 font-style: italic; 275 } 276 277 .answer-reveal>ul { 278 margin-top: 8px; 279 } 280 281 .answer-reveal>ul>li+li { 282 margin-top: 4px; 283 } 284 285 .answer-reveal.-correct .answer-value { 286 color: #5a9060; 287 } 288 289 .answer-reveal.-incorrect .answer-value { 290 color: #a05050; 291 } 292 293 .result-score { 294 width: auto; 295 font-size: 21px; 296 font-weight: normal; 297 margin-top: 8px; 298 } 299 300 .result-table { 301 border-collapse: collapse; 302 margin-top: 24px; 303 } 304 305 .result-table td { 306 padding: 4px 24px 4px 0; 307 vertical-align: top; 308 } 309 310 .result-table .outcome.-correct { 311 color: #5a9060; 312 } 313 314 .result-table .outcome.-incorrect { 315 color: #a05050; 316 } 317 318 .result-table .tense-label { 319 color: #808080; 320 font-size: 14px; 321 } 322 323 .result-actions { 324 margin-top: 32px; 325 326 >button+button { 327 margin-left: 16px; 328 } 329 } 330 331 .again-btn { 332 font-weight: bold; 333 } 334 335 .home-btn { 336 color: #808080; 337 } 338 339 [x-cloak] { 340 display: none !important; 341 }