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

reference.css (1905B)

      1 /******** reference-tables component styles ********/
      2 /* Controls */
      3 .referenceTableControls {
      4     display: flex;
      5     flex-direction: row;
      6     justify-content: center;
      7     margin: 15px 10px;
      8 }
      9 .referenceTableControls * {
     10     height: 25px;
     11 }
     12 .referenceTableControls div {
     13     margin-left: 10px;
     14 }
     15 .referenceTableControls input {
     16     margin-right: 10px;
     17     padding-left: 3px;
     18 }
     19 .referenceTableControls button {
     20     padding: 0px 10px;
     21 }
     22 @media only screen and (max-width: 500px) {
     23     .referenceTableControls {
     24         flex-direction: column;
     25         align-items: stretch;
     26     }
     27     .referenceTableControls * {
     28         height: 30px;
     29     }
     30     .referenceTableControls div {
     31         display: flex;
     32         margin-left: 0px;
     33         margin-top: 10px;
     34     }
     35     .referenceTableControls input {
     36         width: 100%;
     37     }
     38 }
     39 
     40 /* Table */
     41 .referenceTable table {
     42     width: auto;
     43     margin: auto;
     44 }
     45 .referenceTable td {
     46     cursor: pointer;
     47 }
     48 
     49 /* Cell colors */
     50 .referenceTable td.normal {
     51     color: inherit;
     52 }
     53 .referenceTable td.irregular {
     54     color: hsl(0, 100%, 45%);
     55 }
     56 .referenceTable td.nonregular {
     57     color: hsl(40, 100%, 45%);
     58 }
     59 .referenceTable td.regular {
     60     color: hsl(120, 100%, 25%);
     61 }
     62 .dark .referenceTable td.normal {
     63     color: inherit;
     64 }
     65 .dark .referenceTable td.irregular {
     66     color: hsl(0, 100%, 55%);
     67 }
     68 .dark .referenceTable td.nonregular {
     69     color: hsl(40, 100%, 55%);
     70 }
     71 .dark .referenceTable td.regular {
     72     color: hsl(120, 100%, 35%);
     73 }
     74 
     75 /* Print styles */
     76 @media print {
     77     body, body.dark {
     78         --border-color: #000000;
     79         --foreground-color: #000000;
     80         --background-color: #FFFFFF;
     81         --hover-color: #FFFFFF;
     82     }
     83     header, .referenceTableControls {
     84         display: none;
     85     }
     86     .referenceTable {
     87         overflow: visible;
     88     }
     89     table {
     90         border-collapse: collapse;
     91     }
     92     .referenceTable td {
     93         color: #000000 !important;
     94     }
     95 }