xref: /plugin/botmon/style.less (revision cef3810678186559c94d70d74859b653db49d4f4) 
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// smaller screens:
110@media (max-width: 480px) {
111	body.botmon_captcha #botmon_captcha_box {
112		width: 100vw;
113		height: auto;
114		left: 0; top: 80px;
115		border-radius: 2px;
116	}
117}
118
119/* dark mode overrides */
120@media (prefers-color-scheme: dark) {
121	body.darkmode.botmon_captcha {
122		main {
123			h1 {
124				text-shadow: 0 0 .25em rgba(170,170,170,.75);
125			}
126			p, h2, h3, h4, h5, h6 {
127				text-shadow: 0 0 .35em rgba(170,170,170,.75);
128			}
129		}
130		#botmon_captcha_box {
131			& {
132				background-color: #FFF;
133				border-color: #9F9EA1;
134				box-shadow: .25rem .25rem .5rem rgba(0,0,0,.25);
135			}
136			& * {
137				color: #15141A;
138			}
139			label {
140				background-color: #EEE;
141				border-color: #9F9EA1;
142			}
143		}
144	}
145}