style.css (3229B)
1 body { 2 padding: 0.5rem; 3 } 4 5 ul { 6 margin: 0; 7 list-style: none; 8 padding: 0; 9 } 10 11 ol { 12 margin: 0; 13 } 14 15 p { 16 width: 420px; 17 } 18 19 .visually-hidden { 20 position: absolute; 21 width: 1px; 22 height: 1px; 23 padding: 0; 24 margin: -1px; 25 overflow: hidden; 26 clip: rect(0, 0, 0, 0); 27 white-space: nowrap; 28 border: 0; 29 } 30 31 .home-actions + .alert-box { 32 margin-top: 12px; 33 } 34 35 .config-divider { 36 margin: 32px 0; 37 } 38 39 .home-actions { 40 margin-top: 24px; 41 42 >button+button { 43 margin-left: 16px; 44 } 45 } 46 47 .question-form { 48 margin-top: 8px; 49 } 50 51 .word-prompt { 52 display: block; 53 } 54 55 .answer-input { 56 margin-top: 8px; 57 58 &.-correct { 59 border-bottom-color: var(--green); 60 } 61 62 &.-incorrect { 63 border-bottom-color: var(--red); 64 } 65 66 &.-wrong-flash { 67 border-bottom-color: var(--red); 68 animation: input-shake 0.35s ease-out; 69 } 70 } 71 72 .question-count { 73 display: flex; 74 align-items: baseline; 75 gap: 12px; 76 margin-top: 16px; 77 } 78 79 .form-actions { 80 margin-top: 16px; 81 82 >button+button { 83 margin-left: 16px; 84 } 85 } 86 87 @keyframes input-shake { 88 89 0%, 90 100% { 91 transform: translateX(0); 92 } 93 94 25% { 95 transform: translateX(-6px); 96 } 97 98 75% { 99 transform: translateX(6px); 100 } 101 } 102 103 .config-panels { 104 display: flex; 105 flex-direction: column; 106 gap: 32px; 107 align-items: flex-start; 108 } 109 110 .tense-group { 111 margin-top: 24px; 112 113 legend { 114 font-size: 16px; 115 } 116 } 117 118 .tense-grid { 119 border-collapse: collapse; 120 margin-top: 8px; 121 122 th[scope="col"], 123 th[scope="row"] { 124 font-weight: normal; 125 color: var(--secondary); 126 font-size: 14px; 127 text-align: left; 128 } 129 130 th[scope="col"] { 131 padding: 0 24px 8px 0; 132 } 133 134 td { 135 padding: 3px 24px 3px 0; 136 } 137 138 th[scope="row"] { 139 padding: 3px 32px 3px 0; 140 } 141 } 142 143 .tense-specials { 144 display: flex; 145 gap: 24px; 146 margin-top: 8px; 147 } 148 149 .tense-cell { 150 display: flex; 151 align-items: center; 152 gap: 6px; 153 cursor: pointer; 154 } 155 156 .tense-example { 157 color: #303030; 158 font-size: 14px; 159 } 160 161 .save-action { 162 margin-top: 24px; 163 display: flex; 164 align-items: baseline; 165 gap: 16px; 166 } 167 168 .deck-item { 169 display: flex; 170 align-items: center; 171 gap: 8px; 172 margin-top: 8px; 173 } 174 175 .deck-remove { 176 font-size: 12px; 177 color: var(--red); 178 } 179 180 .deck-upload { 181 margin-top: 16px; 182 display: flex; 183 align-items: baseline; 184 gap: 12px; 185 } 186 187 .deck-upload-label { 188 font-size: 14px; 189 color: var(--secondary); 190 } 191 192 .word-level { 193 text-decoration: underline; 194 text-underline-offset: 3px; 195 text-decoration-thickness: 2px; 196 197 &.-unknown { text-decoration-color: var(--red); } 198 &.-seen { text-decoration-color: #a08030; } 199 &.-known { text-decoration-color: var(--green); } 200 } 201 202 .answer-reveal { 203 margin-top: 24px; 204 205 >p { 206 width: auto; 207 } 208 209 >ol { 210 margin-top: 8px; 211 212 >li+li { 213 margin-top: 4px; 214 } 215 } 216 217 .answer-value { 218 font-style: italic; 219 } 220 221 &.-correct .answer-value { color: var(--green); } 222 &.-incorrect .answer-value { color: var(--red); } 223 } 224 225 output.result-score { 226 display: block; 227 font-size: 21px; 228 margin-top: 8px; 229 } 230 231 .result-table { 232 border-collapse: collapse; 233 margin-top: 24px; 234 235 td { 236 padding: 4px 24px 4px 0; 237 vertical-align: top; 238 } 239 240 .outcome { 241 &.-correct { color: var(--green); } 242 &.-incorrect { color: var(--red); } 243 } 244 245 .tense-label { 246 color: var(--secondary); 247 font-size: 14px; 248 } 249 } 250 251 .result-actions { 252 margin-top: 32px; 253 254 >button+button { 255 margin-left: 16px; 256 } 257 } 258 259 [x-cloak] { 260 display: none !important; 261 }