Improve red class, make not fullwidth and left aligned text

This commit is contained in:
Thomas Lynch
2024-08-15 23:06:22 +10:00
parent 51e5f82d68
commit f1d827f3b3

View File

@ -8,7 +8,7 @@ _M.body = [[
<meta name='viewport' content='width=device-width initial-scale=1'>
<title>%s</title>
<style>
:root{--text-color:#c5c8c6;--bg-color:#1d1f21}@media (prefers-color-scheme:light){:root{--text-color:#333;--bg-color:#fff}}.g-recaptcha,.h-captcha{min-height:85px;display:block}.red{color:#ff0000d0;background:#ff000020;border:1px solid #ff000050;font-weight:bold;padding:12px;border-radius:6px}.left{text-align:left}.powstatus{color:#6b93f7;font-size:small}a,a:visited{color:var(--text-color)}body,html{height:100%%;text-align:center}body{display:flex;flex-direction:column;background-color:var(--bg-color);color:var(--text-color);font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;max-width:60em;margin:0 auto;padding:0 20px}details{max-width:1200px;text-align:left;border-left:2px solid #ff0000d0;padding:10px}code{background-color:#dfdfdf30;border-radius:4px;padding:0 3px;color:#ff6590}h3,img{margin:0 0 16px}li{margin-bottom:1em}footer{font-size:x-small;margin-top:auto;padding:10px;text-align:center;border-top:1px solid #80808040;padding:10px;max-width:300px;margin:auto auto 0}img{display:inline}input,textarea{background:var(--bg-color);color:var(--text-color);border:1px solid var(--text-color);width:100%%;box-sizing:border-box;resize:none;padding:5px;margin:5px;font-family:inherit;border-radius:6px}input[type="submit"]{padding:8px}.pt{padding-top:25vh;word-wrap:break-word;display:flex;flex-direction:column}.pt img{margin:0 auto 10px}.b{display:inline-block;border-radius:50%%;margin:20px 12px;height:16px;width:16px;transform:scale(1);box-shadow:0 0 0 0 #6b93f720;background:#6b93f7;--shadow1:#6b93f790;--shadow2:#6b93f700;--shadow3:#6b93f700}.b.green{background:#31cc31;box-shadow:0 0 0 0 #31cc3120;--shadow1:#31cc3190;--shadow2:#31cc3100;--shadow3:#31cc3100}.b:nth-of-type(1){animation:p 3s infinite}.b:nth-of-type(2){animation:p 3s 0.5s infinite}.b:nth-of-type(3){animation:p 3s 1s infinite}details:not([open]),summary{cursor:pointer}@keyframes p{0%%{transform:scale(.95);box-shadow:0 0 0 0 var(--shadow1)}70%%{transform:scale(1);box-shadow:0 0 0 8px var(--shadow2)}100%%{transform:scale(.95);box-shadow:0 0 0 0 var(--shadow3)}}details summary::-webkit-details-marker,details summary::marker{display:none}details summary{list-style-type:none}details[open] > summary:before{transform:rotate(90deg)}summary{padding-left:20px}summary:before{content:'';border-width:8px;border-style:solid;border-color:transparent transparent transparent var(--text-color);position:absolute;transform:rotate(0);transform-origin:4px 50%%;transition:0.25s transform ease;margin:3px 0 0 -15px} </style>
:root{--text-color:#c5c8c6;--bg-color:#1d1f21}@media (prefers-color-scheme:light){:root{--text-color:#333;--bg-color:#fff}}.g-recaptcha,.h-captcha{min-height:85px;display:block}.red{display:inline-block;color:#ff0000d0;background:#ff000020;border:1px solid #ff000050;font-weight:bold;padding:12px;border-radius:6px}.left{text-align:left}.powstatus{color:#6b93f7;font-size:small}a,a:visited{color:var(--text-color)}body,html{height:100%%;text-align:center}body{display:flex;flex-direction:column;background-color:var(--bg-color);color:var(--text-color);font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;max-width:60em;margin:0 auto;padding:0 20px}details{max-width:1200px;text-align:left;border-left:2px solid #ff0000d0;padding:10px}code{background-color:#dfdfdf30;border-radius:4px;padding:0 3px;color:#ff6590}h3,img{margin:0 0 16px}li{margin-bottom:1em}footer{font-size:x-small;margin-top:auto;padding:10px;text-align:center;border-top:1px solid #80808040;padding:10px;max-width:300px;margin:auto auto 0}img{display:inline}input,textarea{background:var(--bg-color);color:var(--text-color);border:1px solid var(--text-color);width:100%%;box-sizing:border-box;resize:none;padding:5px;margin:5px;font-family:inherit;border-radius:6px}input[type="submit"]{padding:8px}.pt{padding-top:25vh;word-wrap:break-word;display:flex;flex-direction:column}.pt img{margin:0 auto 10px}.b{display:inline-block;border-radius:50%%;margin:20px 12px;height:16px;width:16px;transform:scale(1);box-shadow:0 0 0 0 #6b93f720;background:#6b93f7;--shadow1:#6b93f790;--shadow2:#6b93f700;--shadow3:#6b93f700}.b.green{background:#31cc31;box-shadow:0 0 0 0 #31cc3120;--shadow1:#31cc3190;--shadow2:#31cc3100;--shadow3:#31cc3100}.b:nth-of-type(1){animation:p 3s infinite}.b:nth-of-type(2){animation:p 3s 0.5s infinite}.b:nth-of-type(3){animation:p 3s 1s infinite}details:not([open]),summary{cursor:pointer}@keyframes p{0%%{transform:scale(.95);box-shadow:0 0 0 0 var(--shadow1)}70%%{transform:scale(1);box-shadow:0 0 0 8px var(--shadow2)}100%%{transform:scale(.95);box-shadow:0 0 0 0 var(--shadow3)}}details summary::-webkit-details-marker,details summary::marker{display:none}details summary{list-style-type:none}details[open] > summary:before{transform:rotate(90deg)}summary{padding-left:20px}summary:before{content:'';border-width:8px;border-style:solid;border-color:transparent transparent transparent var(--text-color);position:absolute;transform:rotate(0);transform-origin:4px 50%%;transition:0.25s transform ease;margin:3px 0 0 -15px} </style>
<noscript>
<style>.jsonly{display:none}</style>
</noscript>
@ -21,7 +21,7 @@ _M.body = [[
%s
<noscript>
<br>
<p class="red left">%s</p>
<div class="red">%s</div>
%s
</noscript>
<div class="powstatus"></div>