1body.botmon_captcha { 2 main { 3 h1 { 4 color: transparent !important; 5 text-shadow: 0 0 .25em rgba(0,.0,0,.8); 6 } 7 p, dt, dd, h2, h3, h4, h5, h6, a:link, a:visited { 8 color: transparent !important; 9 text-shadow: 0 0 .35em rgba(0,0,0,.5); 10 user-select: none; 11 } 12 svg { 13 width: auto; height: auto; 14 -webkit-filter: blur(8px); /* For Safari */ 15 filter: blur(8px); 16 } 17 18 } 19 #botmon_captcha_box { 20 & { 21 position: fixed; 22 width: 400px; 23 height: 220px; 24 top: ~"calc(50vh - 110px)"; 25 left: ~"calc(50vw - 200px)"; 26 background: #1C1B22 none; 27 border: #7C7B82 solid 1pt; 28 border-radius: 12px; 29 margin: 0; padding: 18px; 30 font-family: system-ui, sans-serif; 31 box-shadow: .25rem .25rem .5rem rgba(0,0,0,.5); 32 box-sizing: border-box; 33 z-index: 10001; 34 } 35 & * { 36 color: #EDEDF5; 37 margin: 0; 38 } 39 h2 { 40 font-size: 24px; 41 line-height: 32px; 42 padding: 0 0 12px 0; 43 } 44 p { 45 font-size: 16px; 46 line-height: 20px; 47 padding: 6px 0; 48 } 49 label { 50 & { 51 display: grid; 52 grid-template-columns: 32px auto; 53 column-gap: 8px; 54 align-items: center; 55 padding: 24px; 56 margin: 16px 0 0 0; 57 background-color: #32313A; 58 border: #7C7B82 solid 1px; 59 border-radius: 3px; 60 font-size: 16px; 61 } 62 span.busy { 63 display: inline-block; 64 width: 24px; height: 24px; 65 background: transparent url('img/busy-light.svg') center no-repeat; 66 background-size: 24px; 67 } 68 span.error, span.erricon { 69 color: #f96c6c; 70 } 71 } 72 input[type="checkbox"] { 73 width: 24px; height: 24px; 74 border: 2px solid #00CADB; 75 border-radius: 4px; 76 appearance: none; 77 } 78 input[type="checkbox"]:focus { 79 outline: none; 80 box-shadow: 0 0 6px rgba(0, 202, 219, .8); 81 } 82 83 input[type="checkbox"]:disabled { 84 display: none; 85 } 86 &.checking { 87 input[type="checkbox"], span.confirm, span.loading, span.erricon, span.error { display: none;} 88 span.busy, span.checking { display: initial; } 89 label, input[type="checkbox"] { cursor: wait; } 90 } 91 &.ready { 92 input[type="checkbox"], span.confirm { display: initial;} 93 span.busy, span.checking, span.loading, span.erricon, span.error { display: none; } 94 label, input[type="checkbox"] { cursor: pointer; } 95 } 96 &.loading { 97 span.busy, span.loading { display: initial; } 98 input[type="checkbox"], span.confirm, span.checking, span.erricon, span.error { display: none;} 99 label { cursor: wait; } 100 } 101 &.error { 102 span.erricon, span.error { display: initial; } 103 input[type="checkbox"], span.confirm, span.checking, span.busy, span.loading { display: none;} 104 label { cursor: initial; } 105 } 106 } 107} 108 109@keyframes delayed-fade-in { 110 0% { opacity: 0; } 111 50% { opacity: 0; } 112 100% { opacity: 1; } 113} 114 115// no js warning 116#BM__NoJSWarning { 117 position: fixed; 118 bottom: calc(50vh - 2.5rem); 119 width: 100%; max-width: fit-content; 120 margin: 0 auto; 121 padding: .25rem 1rem; 122 border-radius: .5rem; 123 border: red solid 2pt; 124 box-shadow: rgba(128, 0, 0, 0.5) .25rem .25rem .5rem; 125 animation: delayed-fade-in 4s forwards; 126} 127 128// captcha on smaller screens: 129@media (max-width: 480px) { 130 body.botmon_captcha #botmon_captcha_box { 131 width: 100vw; 132 height: auto; 133 left: 0; top: 80px; 134 border-radius: 2px; 135 } 136} 137 138/* dark mode overrides */ 139@media (prefers-color-scheme: dark) { 140 body.darkmode.botmon_captcha { 141 main { 142 h1 { 143 text-shadow: 0 0 .25em rgba(170,170,170,.75); 144 } 145 p, h2, h3, h4, h5, h6 { 146 text-shadow: 0 0 .35em rgba(170,170,170,.75); 147 } 148 } 149 #botmon_captcha_box { 150 & { 151 background-color: #FFF; 152 border-color: #9F9EA1; 153 box-shadow: .25rem .25rem .5rem rgba(0,0,0,.25); 154 } 155 & * { 156 color: #15141A; 157 } 158 label { 159 background-color: #EEE; 160 border-color: #9F9EA1; 161 } 162 } 163 } 164}
