1 /* -*- mode: web; -*- */ 2 3 4 :root { 5 --primary-color: #003B5C; 6 --secondary-color: #C3D7EE; 7 --home: #c8c8c8; 8 --yes: #80FF80; 9 --no: #FF8080; 10 font-size: 18; 11 --fast-speed: 0.2s; 12 --med-speed: 0.4s; 13 --slow-speed: 1s; 14 } 15 16 body { 17 font-family: "Public Sans", sans-serif; 18 line-height: 1.2; 19 margin: 0; 20 padding: 0; 21 } 22 23 24 @font-face { 25 font-family: "Public Sans"; 26 src: url("/static/fonts/PublicSans-Regular.otf"); 27 } 28 29 @font-face { 30 font-family: "Inconsolata"; 31 src: url("/static/fonts/Inconsolata.otf"); 32 } 33 34 35 h1 { 36 margin: 0; 37 padding: 0.5em 0; 38 vertical-align: baseline; 39 display: inline; 40 } 41 42 nav { 43 background: darkgrey; 44 color: white; 45 padding: 0 0.25em; 46 } 47 48 nav#user { 49 display: flex; 50 justify-content: space-between; 51 position: sticky; 52 top: 0; 53 } 54 55 nav#user ul { 56 justify-content: center; 57 display: flex; 58 flex-wrap: wrap; 59 margin: 0; 60 padding: 0.25em 0; 61 list-style: none; 62 } 63 64 nav ul li { 65 margin: 0.25em; 66 } 67 68 69 70 71 .button { 72 display: inline-block; 73 padding: 0.5em; 74 background: dimgray; 75 color: white; 76 border-radius: 12px; 77 text-decoration: none; 78 border: 1px dimgray solid; 79 } 80 81 .button-light { 82 background: white; 83 color: dimgray; 84 } 85 86 .button:hover { 87 background: white; 88 color: black; 89 border: 1px dimgray solid; 90 } 91 92 #content { 93 max-width: 60vw; 94 margin: 0 auto; 95 } 96 97 table { 98 font-family: "Inconsolata"; 99 line-height: 1.5; 100 /* border-collapse: collapse; */ 101 /* margin: 2em auto; */ 102 width: 100%; 103 } 104 105 table thead { 106 background: dimgray; 107 color: white; 108 } 109 110 table tr:nth-child(even) { 111 background: lightgray; 112 } 113 114 #flash { 115 position: fixed; 116 max-width: 16em; 117 bottom: 0; 118 right: 0; 119 padding: 0 0.5em; 120 } 121 122 #flash ul { 123 margin: 0; 124 padding: 0.25em 0; 125 list-style-type: none; 126 } 127 128 #flash ul li { 129 margin: 0.25em; 130 } 131 132 @keyframes fadeIn { 133 0% { 134 opacity: 0; 135 transform: translateY(100%); 136 } 137 100% { 138 opacity: 0.8; 139 transform: translateY(0); 140 } 141 } 142 143 .alert { 144 padding: 1em; 145 margin: 0.5em; 146 border-radius: 8px; 147 /* border: 1px dimgray solid; */ 148 opacity: 0.8; 149 animation: 0.5s ease-out 0s 1 fadeIn; 150 } 151 152 /* The default alert category */ 153 .alert-message { 154 background: cornflowerblue; 155 color: black; 156 } 157 158 .alert-info { 159 background: darkblue; 160 color: white; 161 } 162 163 .alert-error { 164 background: maroon; 165 color: white; 166 } 167 #downloads { 168 display: flex; 169 flex-wrap: wrap; 170 justify-content: space-between; 171 gap: 1em; 172 } 173 fieldset { 174 margin: 0 auto; 175 max-width: 16em; 176 display: flex; 177 flex-direction: column; 178 } 179