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

global.css (2585B)

      1 /******** Variable styles ********/
      2 :root {
      3     --theme-color: #009bc2;
      4     --foreground-color: #000000;
      5     --background-color: #FFFFFF;
      6     --hover-color: #F0F0F0;
      7     --border-color: #808080;
      8 }
      9 
     10 
     11 
     12 /******** Default styles ********/
     13 * {
     14     /* Override default browser padding and margin styles */
     15     padding: 0px;
     16     margin: 0px;
     17     box-sizing: border-box;
     18 }
     19 
     20 
     21 
     22 /******** Body ********/
     23 body {
     24     font-family: Arial, Helvetica, sans-serif;
     25     color: var(--foreground-color);
     26     background-color: var(--background-color);
     27     margin: 0px;
     28     touch-action: manipulation;
     29 }
     30 
     31 
     32 
     33 /******** Header ********/
     34 header {
     35     text-align: center;
     36     background-color: var(--theme-color);
     37     font-size: 25px;
     38     font-weight: bold;
     39     color: #000000;
     40     text-decoration: none;
     41     margin: 0px;
     42     padding-top: 15px;
     43     padding-bottom: 15px;
     44 }
     45 header>* {
     46     cursor: pointer;
     47 }
     48 header button {
     49     position: absolute;
     50 }
     51 header button:first-child {
     52     left: 10px;
     53 }
     54 header button:last-child {
     55     right: 10px;
     56 }
     57 header button img {
     58     height: 30px;
     59     width: 30px;
     60 }
     61 
     62 
     63 
     64 /******** Noscript ********/
     65 #jsError {
     66     margin-top: 15px;
     67     margin-bottom: 10px;
     68     text-align: center;
     69 }
     70 #jsError h1 {
     71     margin-bottom: 5px;
     72     color: red;
     73 }
     74 
     75 
     76 
     77 /******** Other elements ********/
     78 h1 {
     79     font-size: 20px;
     80 }
     81 button:not(.icon), input, select {
     82     background-color: var(--background-color);
     83     border: 1px solid var(--border-color);
     84     color: var(--foreground-color);
     85     border-radius: 0px;
     86     font-size: 14px;
     87 }
     88 button:not(.icon) {
     89     font-size: 15px;
     90 }
     91 button:hover:enabled:not(.icon) {
     92     cursor: pointer;
     93     background-color: var(--hover-color);
     94 }
     95 button:disabled {
     96     background-color:  var(--hover-color);
     97     color: var(--border-color);
     98 }
     99 button.icon {
    100     border: none;
    101     background-color: #00000000;
    102     color: var(--foreground-color);
    103     cursor: pointer;
    104     vertical-align: middle;
    105 }
    106 main button.icon img {
    107     height: 24px;
    108     width: 24px;
    109 }
    110 
    111 
    112 
    113 /******** Dark mode ********/
    114 body.dark {
    115     --foreground-color: #E0E0E0;
    116     --background-color: #121416;
    117     --hover-color: #323436;
    118     --border-color: #505050;
    119 }
    120 .dark button:not(.icon), .dark input, .dark select {
    121     --background-color: #222426;
    122 }
    123 .dark main button.icon img {
    124     filter: invert(90%);
    125 }
    126 .dark a {
    127     color: #0080ff;
    128 }
    129 
    130 
    131 
    132 /******** Mobile devices ********/
    133 @media only screen and (max-width: 800px) {
    134     h1, h2 {
    135         font-size: 25px;
    136     }
    137     select, input, button:not(.icon) {
    138         font-size: 16px;
    139     }
    140     main button.icon img {
    141         height: 35px;
    142         width: 35px;
    143     }
    144 }