spanish-quizzer

An app to quiz you on Spanish vocabulary and verb conjugations
git clone https://git.ashermorgan.net/spanish-quizzer/
Log | Files | Refs | README

quizzer.css (2611B)

      1 /******** quizzer component ********/
      2 .quizzer {
      3     padding: 10px;
      4     width: 400px;
      5     background-color: var(--background-color);
      6     border: 1px solid var(--border-color);
      7     box-shadow: 0 0 15px var(--border-color);
      8 }
      9 
     10 /* Progress */
     11 .quizzerProgress {
     12     text-align: center;
     13     font-size: 18px;
     14     font-weight: bold;
     15     margin-bottom: 5px;
     16 }
     17 
     18 /* Prompt */
     19 .quizzerPrompt {
     20     margin-bottom: 15px;
     21 }
     22 .quizzerPrompt label, .quizzerInputLabel {
     23     font-weight: bold;
     24 }
     25 .quizzerPrompt span {
     26     cursor: pointer;
     27 }
     28 
     29 /* Responce*/
     30 .quizzerInput {
     31     margin-top: 5px;
     32     margin-bottom: 15px;
     33     height: 30px;
     34 }
     35 .quizzerInput input {
     36     height: 100%;
     37     width: 100%;
     38     padding: 5px;
     39 }
     40 .quizzerInput div {
     41     padding: 5px;
     42     width: 100%;
     43     height: 100%;
     44     line-height: 18px;  /* height - padding - border */
     45     font-size: 14px;
     46     border: 1px solid #ff0000;
     47     background-color: var(--background-color);
     48 }
     49 .dark .quizzerInput div {
     50     background-color: #222426;
     51 }
     52 
     53 /* Audio buttons */
     54 .quizzerPrompt button.icon img, .quizzerFeedback button.icon img {
     55     margin-left: 5px;
     56 }
     57 
     58 /* Buttons */
     59 .quizzerButtons {
     60     display: flex;
     61     flex-direction: row;
     62     justify-content: center;
     63 }
     64 .quizzerButtons button {
     65     width: 85px;
     66     height: 30px;
     67 }
     68 .quizzerButtons button:first-child {
     69     margin-right: 10px;
     70 }
     71 
     72 /* Feedback */
     73 .quizzerFeedback {
     74     margin-top: 15px;
     75     text-align: center;
     76 }
     77 .quizzerFeedbackTerm {
     78     text-decoration-line: underline;
     79     cursor: pointer;
     80 }
     81 del {
     82     color: red;
     83     text-decoration: none;
     84 }
     85 ins {
     86     color: green;
     87     text-decoration: none;
     88 }
     89 
     90 /* Congrats message */
     91 .congrats {
     92     text-align: center;
     93 }
     94 .congrats p {
     95     margin: 20px;
     96 }
     97 .congrats button {
     98     width: 100px;
     99     height: 35px;
    100 }
    101 
    102 /* Mobile styles */
    103 @media only screen and (max-width: 800px) {
    104     .quizzerInput {
    105         height: 35px;
    106     }
    107     .quizzerInput div {
    108         font-size: 16px;
    109         line-height: 23px;  /* height - padding - border */
    110     }
    111 }
    112 @media only screen and (max-width: 500px) {
    113     .quizzer {
    114         border: none;
    115         box-shadow: none;
    116         width: 100%;
    117         padding: 0px;
    118     }
    119     .quizzerProgress {
    120         font-size: 20px;
    121     }
    122     .quizzerInput {
    123         height: 35px;
    124     }
    125     .quizzerButtons button {
    126         height: 50px;
    127         width: 100%;
    128     }
    129 }
    130 
    131 
    132 
    133 /******** quizzer-page component ********/
    134 .quizzer-page main {
    135     display: flex;
    136     flex-direction: column;
    137     align-items: center;
    138     padding: 10px;
    139 }
    140 
    141 /* Mobile styles */
    142 @media only screen and (max-width: 500px) {
    143     .quizzer-page main {
    144         align-items: stretch;
    145     }
    146 }