Mercurial Hosting > linkmystyle
diff 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 |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/admin.css Fri Jul 11 20:57:49 2025 -0600 @@ -0,0 +1,302 @@ +a { + color: #472C7D; +} + +a[button] { + display: inline-block; + text-decoration: none; +} + +button, +[onclick], +[clickable], +input[type="radio"], +input[type="submit"] { + cursor: pointer; +} + +[pulldown] { + position: relative; +} +[pulldown_menu] { + display: none; + z-index: 20; + position: absolute; + top: 50px; + border: 1px solid #DDDDDD; + text-align: left; + background-color: #ffffff; + border-radius: 12px; +} +[pulldown_menu] a { + display: block; + color: black; + padding-left: 32px; + padding-right: 32px; + white-space: nowrap; + text-decoration: none; +} +[pulldown_menu] a:hover { + text-decoration: underline; +} +[pulldown_menu] a { + font-size: 15px; + margin-top: 12px; + margin-bottom: 12px; +} + +input[clipboard] { + position: absolute; + top: -1000px; +} + +[pulldown_menu] span[copy] { + display: inline-block; + text-align: right; + min-width: 5em; +} + +[pulldown_menu] span[copy=copied] { + color: lime; +} + +div[header] { + display: flex; + padding: 20px 40px; + justify-content: space-between; + align-items: center; + background-color: #DBD5FF; +} +div[header] > a[left] { + font-size: 28px; + text-decoration: none; + color: black; +} +img[logo] { + height: 50px; + display: block; +} +@media (min-width: 757px) { + img[logo="small"] { + display: none; + } +} +@media (max-width: 756px) { + img[logo="big"] { + display: none; + } +} +div[header] [pulldown_menu] { + right: 0; +} +div[header] > span[right] img { + width: 50px; + height: 50px; + object-fit: cover; + border-radius: 50%; +} +div[header] > span[right][login] { + display: flex; + gap: 10px; +} +div[header] > span[right][login] a[button] { + padding: 18px 26px 20px 26px; +} +div[header] > span[right][login] a[login] { + color: black; + background-color: #EAEAEA; +} +div[header] > span[right][login] a[login]:hover { + background-color: #D1D1D1; +} +div[header] > span[right][login] a[register] { + color: white; + background-color: #4E4293; +} +div[header] > span[right][login] a[register]:hover { + background-color: #272A3B; +} + +[page] { + padding-left: 40px; + padding-right: 40px; +} +[page] > * { + max-width: 600px; + margin-left: auto; + margin-right: auto; +} +[page] a[header] { + display: block; + color: black; + text-decoration: none; + padding-top: 20px; + margin-bottom: 100px; + font-size: 28px; +} +[page] h1 { + color: #4E4293; +} +[page] h1 + p { + color: #9E9E9E; +} +input[type="url"], +input[type="password"], +input[type="email"], +input[type="text"] { + display: block; + width: 100%; + border: none; + background-color: #E0E0E0; + padding: 12px; + font-size: 16px; +} +textarea { + display: block; + width: 100%; + background-color: #E0E0E0; + padding: 12px; + font-size: 16px; + font-family: inherit; +} +[page] input[type="url"]:not(:first-of-type), +[page] input[type="password"]:not(:first-of-type), +[page] div[password], +[page] input[type="email"]:not(:first-of-type), +[page] input[type="text"]:not(:first-of-type) { + margin-top: 32px; +} + +[page], +[full] { + min-height: 100vh; + padding-bottom: 77px; + position: relative; +} +div[footer] { + padding: 20px 40px; + background-color: #DBD5FF; + color: #4E4293; + position: absolute; + bottom: 0; + width: 100%; + display: flex; + justify-content: space-between; +} + +div[footer] img { + height: 40px; + display: inline-block; +} +div[footer] img[ios] { + padding-top: 4px; + padding-bottom: 4px; +} +[page] > div[footer] { + padding: 20px 0; + background-color: white; + position: initial; +} + +div[error] { + color: firebrick; +} +div[error][flash] { + color: red; +} +div[error="success"] { + color: green; +} +div[error="success"][flash] { + color: lime; +} + +div[password] { + position: relative; +} +div[password] input { + padding-right: 40px; +} +div[password] img { + position: absolute; + top: 11px; + right: 10px; + height: 22px; + opacity: .6; + cursor: pointer; +} +div[password] img[show] { + display: block; +} +div[password] img[hide] { + display: none; +} + +button[big], +a[button][big] { + display: block; + width: 100%; + border-radius: 12px / 50%; + color: white; + background-color: #9181EE; + text-align: center; + padding: 12px; + border: none; + font: inherit; +} +[page] button[big], +[page] a[button][big] { + margin-top: 64px; +} +button[big]:hover, +a[button][big]:hover { + background-color: #4E4293; +} +@media (min-width: 800px) { + body:has([right_of_page]) [page] { + width: 60%; + } + body:has([right_of_page]) [right_of_page] { + display: block; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 60%; + background-size: cover; + background-repeat: no-repeat; + background-position: center; + } +} + +button[small] { + border-radius: 12px / 50%; + color: white; + background-color: #151721; + text-align: center; + padding-left: 12px; + padding-right: 12px; + padding-top: 6px; + padding-bottom: 6px; + border: none; + font: inherit; +} +button[small]:hover { + background-color: #272A3B; +} + +input[type="file"] { + display: none; +} + +p[top] { + max-width: 600px; + margin-left: auto; + margin-right: auto; + color: #808080; +} +@media (max-width: 700px) { + p[top] { + max-width: 90%; + } +}