164 lines
3.6 KiB
Plaintext
164 lines
3.6 KiB
Plaintext
body.botmon_captcha {
|
|
main {
|
|
h1 {
|
|
color: transparent !important;
|
|
text-shadow: 0 0 .25em rgba(0,.0,0,.8);
|
|
}
|
|
p, dt, dd, h2, h3, h4, h5, h6, a:link, a:visited {
|
|
color: transparent !important;
|
|
text-shadow: 0 0 .35em rgba(0,0,0,.5);
|
|
user-select: none;
|
|
}
|
|
svg {
|
|
width: auto; height: auto;
|
|
-webkit-filter: blur(8px); /* For Safari */
|
|
filter: blur(8px);
|
|
}
|
|
|
|
}
|
|
#botmon_captcha_box {
|
|
& {
|
|
position: fixed;
|
|
width: 400px;
|
|
height: 220px;
|
|
top: ~"calc(50vh - 110px)";
|
|
left: ~"calc(50vw - 200px)";
|
|
background: #1C1B22 none;
|
|
border: #7C7B82 solid 1pt;
|
|
border-radius: 12px;
|
|
margin: 0; padding: 18px;
|
|
font-family: system-ui, sans-serif;
|
|
box-shadow: .25rem .25rem .5rem rgba(0,0,0,.5);
|
|
box-sizing: border-box;
|
|
z-index: 10001;
|
|
}
|
|
& * {
|
|
color: #EDEDF5;
|
|
margin: 0;
|
|
}
|
|
h2 {
|
|
font-size: 24px;
|
|
line-height: 32px;
|
|
padding: 0 0 12px 0;
|
|
}
|
|
p {
|
|
font-size: 16px;
|
|
line-height: 20px;
|
|
padding: 6px 0;
|
|
}
|
|
label {
|
|
& {
|
|
display: grid;
|
|
grid-template-columns: 32px auto;
|
|
column-gap: 8px;
|
|
align-items: center;
|
|
padding: 24px;
|
|
margin: 16px 0 0 0;
|
|
background-color: #32313A;
|
|
border: #7C7B82 solid 1px;
|
|
border-radius: 3px;
|
|
font-size: 16px;
|
|
}
|
|
span.busy {
|
|
display: inline-block;
|
|
width: 24px; height: 24px;
|
|
background: transparent url('img/busy-light.svg') center no-repeat;
|
|
background-size: 24px;
|
|
}
|
|
span.error, span.erricon {
|
|
color: #f96c6c;
|
|
}
|
|
}
|
|
input[type="checkbox"] {
|
|
width: 24px; height: 24px;
|
|
border: 2px solid #00CADB;
|
|
border-radius: 4px;
|
|
appearance: none;
|
|
}
|
|
input[type="checkbox"]:focus {
|
|
outline: none;
|
|
box-shadow: 0 0 6px rgba(0, 202, 219, .8);
|
|
}
|
|
|
|
input[type="checkbox"]:disabled {
|
|
display: none;
|
|
}
|
|
&.checking {
|
|
input[type="checkbox"], span.confirm, span.loading, span.erricon, span.error { display: none;}
|
|
span.busy, span.checking { display: initial; }
|
|
label, input[type="checkbox"] { cursor: wait; }
|
|
}
|
|
&.ready {
|
|
input[type="checkbox"], span.confirm { display: initial;}
|
|
span.busy, span.checking, span.loading, span.erricon, span.error { display: none; }
|
|
label, input[type="checkbox"] { cursor: pointer; }
|
|
}
|
|
&.loading {
|
|
span.busy, span.loading { display: initial; }
|
|
input[type="checkbox"], span.confirm, span.checking, span.erricon, span.error { display: none;}
|
|
label { cursor: wait; }
|
|
}
|
|
&.error {
|
|
span.erricon, span.error { display: initial; }
|
|
input[type="checkbox"], span.confirm, span.checking, span.busy, span.loading { display: none;}
|
|
label { cursor: initial; }
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes delayed-fade-in {
|
|
0% { opacity: 0; }
|
|
50% { opacity: 0; }
|
|
100% { opacity: 1; }
|
|
}
|
|
|
|
// no js warning
|
|
#BM__NoJSWarning {
|
|
position: fixed;
|
|
bottom: calc(50vh - 2.5rem);
|
|
width: 100%; max-width: fit-content;
|
|
margin: 0 auto;
|
|
padding: .25rem 1rem;
|
|
border-radius: .5rem;
|
|
border: red solid 2pt;
|
|
box-shadow: rgba(128, 0, 0, 0.5) .25rem .25rem .5rem;
|
|
animation: delayed-fade-in 4s forwards;
|
|
}
|
|
|
|
// captcha on smaller screens:
|
|
@media (max-width: 480px) {
|
|
body.botmon_captcha #botmon_captcha_box {
|
|
width: 100vw;
|
|
height: auto;
|
|
left: 0; top: 80px;
|
|
border-radius: 2px;
|
|
}
|
|
}
|
|
|
|
/* dark mode overrides */
|
|
@media (prefers-color-scheme: dark) {
|
|
body.darkmode.botmon_captcha {
|
|
main {
|
|
h1 {
|
|
text-shadow: 0 0 .25em rgba(170,170,170,.75);
|
|
}
|
|
p, h2, h3, h4, h5, h6 {
|
|
text-shadow: 0 0 .35em rgba(170,170,170,.75);
|
|
}
|
|
}
|
|
#botmon_captcha_box {
|
|
& {
|
|
background-color: #FFF;
|
|
border-color: #9F9EA1;
|
|
box-shadow: .25rem .25rem .5rem rgba(0,0,0,.25);
|
|
}
|
|
& * {
|
|
color: #15141A;
|
|
}
|
|
label {
|
|
background-color: #EEE;
|
|
border-color: #9F9EA1;
|
|
}
|
|
}
|
|
}
|
|
} |