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 /* h1 { */ 24 /* margin-left: 2rem; */ 25 /* margin-right: 1rem; */ 26 /* } */ 27 28 /* h2 { */ 29 /* margin-left: 1rem; */ 30 /* margin-right: 1rem; */ 31 /* } */ 32 33 /* p { */ 34 /* margin-left: 1rem; */ 35 /* margin-right: 1rem; */ 36 /* } */ 37 38 39 @font-face { 40 font-family: "Public Sans"; 41 src: url("/static/fonts/PublicSans-Regular.otf"); 42 } 43 44 @font-face { 45 font-family: "Inconsolata"; 46 src: url("/static/fonts/Inconsolata.otf"); 47 } 48 49 50 h1 { 51 margin: 0.25em; 52 } 53 54 nav { 55 /* display: flex; */ 56 background: darkgrey; 57 color: white; 58 /* margin: 0.5em; */ 59 padding: 0 0.5em; 60 /* justify-content: space-between; */ 61 } 62 63 nav#user { 64 /* background: red; */ 65 display: flex; 66 justify-content: space-between; 67 } 68 69 nav#user ul { 70 justify-content: end; 71 } 72 73 nav#modules { 74 /* left: 0; */ 75 } 76 77 nav#actions { 78 top: 0; 79 position: sticky; 80 } 81 82 83 nav ul { 84 display: flex; 85 flex-wrap: wrap; 86 margin: 0; 87 padding: 0.25em 0; 88 list-style: none; 89 } 90 91 nav ul li { 92 margin: 0.25em; 93 /* margin: 0 0 0.5em 0; */ 94 /* padding: 0.5em 0; */ 95 } 96 97 98 99 100 .button { 101 display: inline-block; 102 padding: 0.5em; 103 background: dimgray; 104 color: white; 105 border-radius: 12px; 106 text-decoration: none; 107 border: 1px dimgray solid; 108 } 109 110 .button-light { 111 background: white; 112 color: dimgray; 113 } 114 115 .button:hover { 116 background: white; 117 color: black; 118 border: 1px dimgray solid; 119 } 120 121 table { 122 font-family: "Inconsolata"; 123 line-height: 1.5; 124 /* border-collapse: collapse; */ 125 width: 80vw; 126 margin: 2em auto; 127 } 128 129 table thead { 130 background: dimgray; 131 color: white; 132 } 133 134 table tr:nth-child(even) { 135 background: lightgray; 136 } 137 138 #flash { 139 position: fixed; 140 max-width: 16em; 141 bottom: 0; 142 right: 0; 143 padding: 0 0.5em; 144 } 145 146 #flash ul { 147 margin: 0; 148 padding: 0.25em 0; 149 list-style-type: none; 150 } 151 152 #flash ul li { 153 margin: 0.25em; 154 } 155 156 @keyframes fadeIn { 157 0% { 158 opacity: 0; 159 transform: translateY(100%); 160 } 161 100% { 162 opacity: 0.8; 163 transform: translateY(0); 164 } 165 } 166 167 .alert { 168 padding: 1em; 169 margin: 0.5em; 170 border-radius: 8px; 171 /* border: 1px dimgray solid; */ 172 opacity: 0.8; 173 animation: 0.5s ease-out 0s 1 fadeIn; 174 } 175 176 /* The default alert category */ 177 .alert-message { 178 background: cornflowerblue; 179 color: black; 180 } 181 182 .alert-info { 183 background: darkblue; 184 color: white; 185 } 186 187 .alert-error { 188 background: maroon; 189 color: white; 190 } 191 192 fieldset { 193 margin: 0 auto; 194 width: 12em; 195 } 196 197 .latest-target { 198 background: gold; 199 } 200