xref: /plugin/botmon/style.less (revision d49ab21345bfb6cded26d15d08eeffa4cb39f627) 
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		}
34		& * {
35			color: #EDEDF5;
36			margin: 0;
37		}
38		h2 {
39			font-size: 24px;
40			line-height: 32px;
41			padding: 0 0 12px 0;
42		}
43		p {
44			font-size: 16px;
45			line-height: 20px;
46			padding: 6px 0;
47		}
48		label {
49			& {
50				display: grid;
51				grid-template-columns: 32px auto;
52				column-gap: 8px;
53				align-items: center;
54				padding: 24px;
55				margin: 16px 0 0 0;
56				background-color: #32313A;
57				border: #7C7B82 solid 1px;
58				border-radius: 3px;
59				font-size: 16px;
60			}
61			span.busy {
62				display: inline-block;
63				width: 24px; height: 24px;
64				background: transparent url('img/busy-light.svg') center no-repeat;
65				background-size: 24px;
66			}
67			span.error, span.erricon {
68				color: #f96c6c;
69			}
70		}
71		input[type="checkbox"] {
72			width: 24px; height: 24px;
73			border: 2px solid #00CADB;
74			border-radius: 4px;
75			appearance: none;
76		}
77		input[type="checkbox"]:focus {
78			outline: none;
79			box-shadow: 0 0 6px rgba(0, 202, 219, .8);
80		}
81
82		input[type="checkbox"]:disabled {
83			display: none;
84		}
85		&.checking {
86			input[type="checkbox"], span.confirm, span.loading, span.erricon, span.error { display: none;}
87			span.busy, span.checking { display: initial; }
88			label, input[type="checkbox"] { cursor: wait; }
89		}
90		&.ready {
91			input[type="checkbox"], span.confirm { display: initial;}
92			span.busy, span.checking, span.loading, span.erricon, span.error { display: none; }
93			label, input[type="checkbox"] { cursor: pointer; }
94		}
95		&.loading {
96			span.busy, span.loading { display: initial; }
97			input[type="checkbox"], span.confirm, span.checking, span.erricon, span.error { display: none;}
98			label { cursor: wait; }
99		}
100		&.error {
101			span.erricon, span.error { display: initial; }
102			input[type="checkbox"], span.confirm, span.checking, span.busy, span.loading { display: none;}
103			label { cursor: initial; }
104		}
105	}
106}
107
108// smaller screens:
109@media (max-width: 480px) {
110	body.botmon_captcha #botmon_captcha_box {
111		width: 100vw;
112		height: auto;
113		left: 0; top: 80px;
114		border-radius: 2px;
115		z-index: 10001;
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}