main.css (2973B)
1 :root { 2 --bar-height: 2.5em; 3 } 4 5 body { 6 margin: 2em; 7 margin-top: 4em; 8 font-size: large; 9 } 10 11 #bar { 12 position: absolute; 13 box-sizing: border-box; 14 top: 0; 15 left: 0; 16 width: 100vw; 17 max-width: 100%; 18 height: var(--bar-height); 19 display: flex; 20 align-items: center; 21 padding: .8em; 22 23 background-color: white; 24 border-bottom: thin solid lightgrey; 25 } 26 27 #bar > ul.left { 28 list-style: none; 29 display: inline-block; 30 margin: 0; 31 padding: 0; 32 } 33 34 #bar > ul.right { 35 list-style: none; 36 margin-left: auto; 37 } 38 39 #bar > ul > * > a:not(.button):hover { 40 color: rgba(0, 0, 0, .6); 41 } 42 43 #bar > ul > * > a:not(.button) { 44 text-decoration: none; 45 color: black; 46 padding: .4em .4em; 47 } 48 49 #bar > ul > li { 50 display: inline-block; 51 padding: 0 .2em; 52 } 53 54 #bar > ul > li > a > img.icon { 55 padding: 0.1em; 56 width: calc(var(--bar-height) - .8em); 57 border-radius: .2em; 58 } 59 60 aside { 61 float: right; 62 margin: .2em; 63 } 64 65 .credentials > aside { 66 float: none; 67 font-size: smaller; 68 margin-bottom: 2em; 69 } 70 71 .icon { 72 border: thin solid rgba(0, 0, 0, .2); 73 width: 1.5em; 74 } 75 76 input[type="image"].icon { 77 margin: .15rem; 78 padding: .15rem; 79 border-radius: .4em; 80 } 81 82 input[type="image"].icon:hover { 83 border-color: rgba(0, 0, 0, .4); 84 } 85 86 span.warning { 87 display: flex; 88 width: fit-content; 89 } 90 91 span.warning > .icon { 92 border: none; 93 margin-right: .5em; 94 } 95 96 span.warning > p { 97 text-decoration: solid orange underline; 98 text-decoration-thickness: .15em; 99 } 100 101 .error { 102 background-color: red; 103 border: thin solid darkred; 104 border-radius: .25rem; 105 width: fit-content; 106 margin: .5rem 0 ; 107 padding: .2rem; 108 } 109 110 .error > p { 111 margin: 0; 112 display: inline; 113 vertical-align: middle; 114 } 115 116 .error > input[class="icon"] { 117 width: 1rem; 118 vertical-align: middle; 119 } 120 121 input:not([type]), input[type="password"], input[type="email"] { 122 background-color: #FAFAFA; 123 border: thin solid lightgrey; 124 border-radius: .2em; 125 padding: .2em; 126 } 127 128 button, input[type="submit"] { 129 font-size: large; 130 } 131 132 form.credentials { 133 width: fit-content; 134 max-width: 60ch; 135 padding: 4em; 136 border-radius: .2em; 137 } 138 139 form.credentials > label, form.credentials > input { 140 display: block; 141 } 142 143 form.credentials > input { 144 margin-bottom: 2em; 145 } 146 147 .break { 148 display: block !important; 149 } 150 151 .hidden { 152 display: none !important; 153 } 154 155 .small { 156 font-size: smaller; 157 } 158 159 a.button:hover { 160 background-color: rgba(0, 0, 0, .03); 161 } 162 163 a.button { 164 padding: .3em .8em; 165 border-radius: .25em; 166 text-decoration: none; 167 border: thin solid lightgrey; 168 color: black; 169 display: inline-block; 170 width: fit-content; 171 background-color: rgba(0, 0, 0, .015); 172 } 173 174 a.pop:hover { 175 background-color: #6363FF; 176 border-color: lightgrey; 177 } 178 179 a.pop { 180 border: medium solid #0000FF; 181 font-weight: bold; 182 background-color: blue; 183 color: white; 184 border: thin solid darkblue; 185 } 186 187 dd, p { 188 max-width: 65ch; 189 } 190 191 #wait { 192 position: fixed; 193 bottom: 0; 194 left: 0; 195 width: 100vw; 196 height: 2em; 197 198 display: flex; 199 justify-content: center; 200 align-items: center; 201 202 background-color: rgba(0, 0, 0, .8); 203 backdrop-filter: blur(1px); 204 color: white; 205 }