number-master

web application to practice korean numbers
git clone git://brookjeynes.dev/bjeynes/number-master.git
Log | Files | Refs | README | LICENSE

style.css (1135B)

      1 .hint {
      2 	margin-top: 5px;
      3 	display: flex;
      4 	flex-direction: column;
      5 	gap: 4px;
      6 }
      7 
      8 .hint-list {
      9 	list-style: none;
     10 	padding: 0;
     11 	margin: 0;
     12 	font-size: 14px;
     13 	color: var(--secondary);
     14 }
     15 
     16 .answer-input {
     17 	&.-correct {
     18 		border-bottom-color: var(--green);
     19 	}
     20 
     21 	&.-incorrect {
     22 		border-bottom-color: var(--red);
     23 	}
     24 
     25 	&.-wrong-flash {
     26 		border-bottom-color: var(--red);
     27 		animation: input-shake 0.35s ease-out;
     28 	}
     29 }
     30 
     31 .question {
     32 	text-decoration: underline;
     33 	text-underline-offset: 3px;
     34 	text-decoration-thickness: 1px;
     35 }
     36 
     37 .answer-reveal .answer-value {
     38 	font-style: italic;
     39 }
     40 
     41 .answer-reveal.-correct .answer-value {
     42 	color: var(--green);
     43 }
     44 
     45 .answer-reveal.-incorrect .answer-value {
     46 	color: var(--red);
     47 }
     48 
     49 .form-actions {
     50 	margin-top: 16px;
     51 
     52 	>button+button {
     53 		margin-left: 16px;
     54 	}
     55 }
     56 
     57 fieldset label+label {
     58 	margin-left: 16px;
     59 }
     60 
     61 .answer-reveal {
     62 	margin-top: 24px;
     63 }
     64 
     65 @keyframes input-shake {
     66 
     67 	0%,
     68 	100% {
     69 		transform: translateX(0);
     70 	}
     71 
     72 	25% {
     73 		transform: translateX(-6px);
     74 	}
     75 
     76 	75% {
     77 		transform: translateX(6px);
     78 	}
     79 }
     80 
     81 .save-action {
     82 	display: flex;
     83 	align-items: baseline;
     84 	gap: 16px;
     85 }
     86 
     87 [x-cloak] {
     88 	display: none !important;
     89 }