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

filtersPage.css (1958B)

      1 /******** filter-input component ********/
      2 .filtersInput>div {
      3     display: flex;
      4     flex-direction: column;
      5     align-items: center;
      6 }
      7 
      8 /* Filter */
      9 .filter {
     10     width: max-content;
     11     background-color: var(--background-color);
     12     border: 1px solid var(--border-color);
     13     box-shadow: 0 0 15px var(--border-color);
     14     margin: 5px auto;
     15     padding: 5px;
     16     border-radius: 5px;
     17 }
     18 .filter select {
     19     vertical-align: middle;
     20 }
     21 
     22 /* Conjugation settings on mobile devices */
     23 @media only screen and (max-width: 700px) {
     24     .verbSettings .filter {
     25         width: 100%;
     26         margin: 10px auto;
     27     }
     28     .verbSettings .filter select, .verbSettings .filter button {
     29         width: 100%;
     30         height: 35px;
     31         margin: 3px 0px;
     32     }
     33 }
     34 
     35 /* Vocab settings on mobile devices */
     36 @media only screen and (max-width: 450px) {
     37     .vocabSettings .filter {
     38         width: 100%;
     39         margin: 10px auto;
     40     }
     41     .vocabSettings .filter select, .vocabSettings .filter button {
     42         width: 100%;
     43         height: 35px;
     44         margin: 3px 0px;
     45     }
     46 }
     47 
     48 
     49 
     50 /******** filters-page component ********/
     51 .filtersPage main {
     52     display: flex;
     53     flex-direction: column;
     54     align-items: center;
     55     padding: 10px;
     56 }
     57 .filtersPage main>div {
     58     margin-bottom: 20px;
     59 }
     60 
     61 /* Hide non-quizzer settings & labels */
     62 .filtersPage main .settingsInput>*:not(.quizzerPromptsSettings, .quizzerGradingSettings) {
     63     display: none;
     64 }
     65 
     66 /* Start button */
     67 .settingsStart {
     68     margin-bottom: 10px;
     69     width: 100px;
     70     height: 40px;
     71 }
     72 
     73 /* Mobile devices */
     74 @media only screen and (max-width: 510px) {
     75     /* Expand settings component*/
     76     .settingsInput {
     77         width: 100%;
     78     }
     79 
     80     /* Expand start button */
     81     .settingsStart {
     82         width: 100%;
     83         font-size: 18px;
     84         height: 50px;
     85     }
     86 }
     87 @media only screen and (max-width: 800px) {
     88     /* Hide settings */
     89     .filtersPage main .settingsInput, .filtersPage main>h1 {
     90         display: none;
     91     }
     92 }