Mercurial Hosting > linkmystyle
comparison src/admin.css @ 0:8f4df159f06b
start public repo
| author | Franklin Schmidt <fschmidt@gmail.com> |
|---|---|
| date | Fri, 11 Jul 2025 20:57:49 -0600 |
| parents | |
| children |
comparison
equal
deleted
inserted
replaced
| -1:000000000000 | 0:8f4df159f06b |
|---|---|
| 1 a { | |
| 2 color: #472C7D; | |
| 3 } | |
| 4 | |
| 5 a[button] { | |
| 6 display: inline-block; | |
| 7 text-decoration: none; | |
| 8 } | |
| 9 | |
| 10 button, | |
| 11 [onclick], | |
| 12 [clickable], | |
| 13 input[type="radio"], | |
| 14 input[type="submit"] { | |
| 15 cursor: pointer; | |
| 16 } | |
| 17 | |
| 18 [pulldown] { | |
| 19 position: relative; | |
| 20 } | |
| 21 [pulldown_menu] { | |
| 22 display: none; | |
| 23 z-index: 20; | |
| 24 position: absolute; | |
| 25 top: 50px; | |
| 26 border: 1px solid #DDDDDD; | |
| 27 text-align: left; | |
| 28 background-color: #ffffff; | |
| 29 border-radius: 12px; | |
| 30 } | |
| 31 [pulldown_menu] a { | |
| 32 display: block; | |
| 33 color: black; | |
| 34 padding-left: 32px; | |
| 35 padding-right: 32px; | |
| 36 white-space: nowrap; | |
| 37 text-decoration: none; | |
| 38 } | |
| 39 [pulldown_menu] a:hover { | |
| 40 text-decoration: underline; | |
| 41 } | |
| 42 [pulldown_menu] a { | |
| 43 font-size: 15px; | |
| 44 margin-top: 12px; | |
| 45 margin-bottom: 12px; | |
| 46 } | |
| 47 | |
| 48 input[clipboard] { | |
| 49 position: absolute; | |
| 50 top: -1000px; | |
| 51 } | |
| 52 | |
| 53 [pulldown_menu] span[copy] { | |
| 54 display: inline-block; | |
| 55 text-align: right; | |
| 56 min-width: 5em; | |
| 57 } | |
| 58 | |
| 59 [pulldown_menu] span[copy=copied] { | |
| 60 color: lime; | |
| 61 } | |
| 62 | |
| 63 div[header] { | |
| 64 display: flex; | |
| 65 padding: 20px 40px; | |
| 66 justify-content: space-between; | |
| 67 align-items: center; | |
| 68 background-color: #DBD5FF; | |
| 69 } | |
| 70 div[header] > a[left] { | |
| 71 font-size: 28px; | |
| 72 text-decoration: none; | |
| 73 color: black; | |
| 74 } | |
| 75 img[logo] { | |
| 76 height: 50px; | |
| 77 display: block; | |
| 78 } | |
| 79 @media (min-width: 757px) { | |
| 80 img[logo="small"] { | |
| 81 display: none; | |
| 82 } | |
| 83 } | |
| 84 @media (max-width: 756px) { | |
| 85 img[logo="big"] { | |
| 86 display: none; | |
| 87 } | |
| 88 } | |
| 89 div[header] [pulldown_menu] { | |
| 90 right: 0; | |
| 91 } | |
| 92 div[header] > span[right] img { | |
| 93 width: 50px; | |
| 94 height: 50px; | |
| 95 object-fit: cover; | |
| 96 border-radius: 50%; | |
| 97 } | |
| 98 div[header] > span[right][login] { | |
| 99 display: flex; | |
| 100 gap: 10px; | |
| 101 } | |
| 102 div[header] > span[right][login] a[button] { | |
| 103 padding: 18px 26px 20px 26px; | |
| 104 } | |
| 105 div[header] > span[right][login] a[login] { | |
| 106 color: black; | |
| 107 background-color: #EAEAEA; | |
| 108 } | |
| 109 div[header] > span[right][login] a[login]:hover { | |
| 110 background-color: #D1D1D1; | |
| 111 } | |
| 112 div[header] > span[right][login] a[register] { | |
| 113 color: white; | |
| 114 background-color: #4E4293; | |
| 115 } | |
| 116 div[header] > span[right][login] a[register]:hover { | |
| 117 background-color: #272A3B; | |
| 118 } | |
| 119 | |
| 120 [page] { | |
| 121 padding-left: 40px; | |
| 122 padding-right: 40px; | |
| 123 } | |
| 124 [page] > * { | |
| 125 max-width: 600px; | |
| 126 margin-left: auto; | |
| 127 margin-right: auto; | |
| 128 } | |
| 129 [page] a[header] { | |
| 130 display: block; | |
| 131 color: black; | |
| 132 text-decoration: none; | |
| 133 padding-top: 20px; | |
| 134 margin-bottom: 100px; | |
| 135 font-size: 28px; | |
| 136 } | |
| 137 [page] h1 { | |
| 138 color: #4E4293; | |
| 139 } | |
| 140 [page] h1 + p { | |
| 141 color: #9E9E9E; | |
| 142 } | |
| 143 input[type="url"], | |
| 144 input[type="password"], | |
| 145 input[type="email"], | |
| 146 input[type="text"] { | |
| 147 display: block; | |
| 148 width: 100%; | |
| 149 border: none; | |
| 150 background-color: #E0E0E0; | |
| 151 padding: 12px; | |
| 152 font-size: 16px; | |
| 153 } | |
| 154 textarea { | |
| 155 display: block; | |
| 156 width: 100%; | |
| 157 background-color: #E0E0E0; | |
| 158 padding: 12px; | |
| 159 font-size: 16px; | |
| 160 font-family: inherit; | |
| 161 } | |
| 162 [page] input[type="url"]:not(:first-of-type), | |
| 163 [page] input[type="password"]:not(:first-of-type), | |
| 164 [page] div[password], | |
| 165 [page] input[type="email"]:not(:first-of-type), | |
| 166 [page] input[type="text"]:not(:first-of-type) { | |
| 167 margin-top: 32px; | |
| 168 } | |
| 169 | |
| 170 [page], | |
| 171 [full] { | |
| 172 min-height: 100vh; | |
| 173 padding-bottom: 77px; | |
| 174 position: relative; | |
| 175 } | |
| 176 div[footer] { | |
| 177 padding: 20px 40px; | |
| 178 background-color: #DBD5FF; | |
| 179 color: #4E4293; | |
| 180 position: absolute; | |
| 181 bottom: 0; | |
| 182 width: 100%; | |
| 183 display: flex; | |
| 184 justify-content: space-between; | |
| 185 } | |
| 186 | |
| 187 div[footer] img { | |
| 188 height: 40px; | |
| 189 display: inline-block; | |
| 190 } | |
| 191 div[footer] img[ios] { | |
| 192 padding-top: 4px; | |
| 193 padding-bottom: 4px; | |
| 194 } | |
| 195 [page] > div[footer] { | |
| 196 padding: 20px 0; | |
| 197 background-color: white; | |
| 198 position: initial; | |
| 199 } | |
| 200 | |
| 201 div[error] { | |
| 202 color: firebrick; | |
| 203 } | |
| 204 div[error][flash] { | |
| 205 color: red; | |
| 206 } | |
| 207 div[error="success"] { | |
| 208 color: green; | |
| 209 } | |
| 210 div[error="success"][flash] { | |
| 211 color: lime; | |
| 212 } | |
| 213 | |
| 214 div[password] { | |
| 215 position: relative; | |
| 216 } | |
| 217 div[password] input { | |
| 218 padding-right: 40px; | |
| 219 } | |
| 220 div[password] img { | |
| 221 position: absolute; | |
| 222 top: 11px; | |
| 223 right: 10px; | |
| 224 height: 22px; | |
| 225 opacity: .6; | |
| 226 cursor: pointer; | |
| 227 } | |
| 228 div[password] img[show] { | |
| 229 display: block; | |
| 230 } | |
| 231 div[password] img[hide] { | |
| 232 display: none; | |
| 233 } | |
| 234 | |
| 235 button[big], | |
| 236 a[button][big] { | |
| 237 display: block; | |
| 238 width: 100%; | |
| 239 border-radius: 12px / 50%; | |
| 240 color: white; | |
| 241 background-color: #9181EE; | |
| 242 text-align: center; | |
| 243 padding: 12px; | |
| 244 border: none; | |
| 245 font: inherit; | |
| 246 } | |
| 247 [page] button[big], | |
| 248 [page] a[button][big] { | |
| 249 margin-top: 64px; | |
| 250 } | |
| 251 button[big]:hover, | |
| 252 a[button][big]:hover { | |
| 253 background-color: #4E4293; | |
| 254 } | |
| 255 @media (min-width: 800px) { | |
| 256 body:has([right_of_page]) [page] { | |
| 257 width: 60%; | |
| 258 } | |
| 259 body:has([right_of_page]) [right_of_page] { | |
| 260 display: block; | |
| 261 position: fixed; | |
| 262 top: 0; | |
| 263 right: 0; | |
| 264 bottom: 0; | |
| 265 left: 60%; | |
| 266 background-size: cover; | |
| 267 background-repeat: no-repeat; | |
| 268 background-position: center; | |
| 269 } | |
| 270 } | |
| 271 | |
| 272 button[small] { | |
| 273 border-radius: 12px / 50%; | |
| 274 color: white; | |
| 275 background-color: #151721; | |
| 276 text-align: center; | |
| 277 padding-left: 12px; | |
| 278 padding-right: 12px; | |
| 279 padding-top: 6px; | |
| 280 padding-bottom: 6px; | |
| 281 border: none; | |
| 282 font: inherit; | |
| 283 } | |
| 284 button[small]:hover { | |
| 285 background-color: #272A3B; | |
| 286 } | |
| 287 | |
| 288 input[type="file"] { | |
| 289 display: none; | |
| 290 } | |
| 291 | |
| 292 p[top] { | |
| 293 max-width: 600px; | |
| 294 margin-left: auto; | |
| 295 margin-right: auto; | |
| 296 color: #808080; | |
| 297 } | |
| 298 @media (max-width: 700px) { | |
| 299 p[top] { | |
| 300 max-width: 90%; | |
| 301 } | |
| 302 } |
