xref: /plugin/botmon/style.less (revision cdc02cd4c39f99df88e41b6048475b40280560ad) 
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, h2, h3, h4, h5, h6 {
8			color: transparent !important;
9			text-shadow: 0 0 .35em rgba(0,0,0,.5);
10			user-select: none;
11		}
12	}
13	#botmon_captcha_box {
14		& {
15			position: fixed;
16			width: 400px;
17			height: 220px;
18			top: ~"calc(50vh - 110px)";
19			left: ~"calc(50vw - 200px)";
20			background: #1C1B22 none;
21			border: #7C7B82 solid 1pt;
22			border-radius: 12px;
23			margin: 0; padding: 18px;
24			font-family: system-ui, sans-serif;
25			box-shadow: .25rem .25rem .5rem rgba(0,0,0,.5);
26			box-sizing: border-box;
27		}
28		& * {
29			color: #EDEDF5;
30			margin: 0;
31		}
32		h2 {
33			font-size: 24px;
34			line-height: 32px;
35			padding: 0 0 12px 0;
36		}
37		p {
38			font-size: 16px;
39			line-height: 20px;
40			padding: 6px 0;
41		}
42		label {
43			& {
44				display: grid;
45				grid-template-columns: 32px auto;
46				column-gap: 8px;
47				align-items: center;
48				padding: 24px;
49				margin: 16px 0 0 0;
50				background-color: #32313A;
51				border: #7C7B82 solid 1px;
52				border-radius: 3px;
53				font-size: 16px;
54			}
55			span.busy {
56				display: inline-block;
57				width: 24px; height: 24px;
58				background: transparent url('img/busy-light.svg') center no-repeat;
59				background-size: 24px;
60			}
61		}
62		input[type="checkbox"] {
63			width: 24px; height: 24px;
64			border: 2px solid #00CADB;
65			border-radius: 4px;
66			appearance: none;
67		}
68		input[type="checkbox"]:focus {
69			outline: none;
70			box-shadow: 0 0 6px rgba(0, 202, 219, .8);
71		}
72
73		input[type="checkbox"]:disabled {
74			display: none;
75		}
76		&.checking {
77			input[type="checkbox"], span.confirm, span.loading { display: none;}
78			span.busy, span.checking { display: initial; }
79			label, input[type="checkbox"] { cursor: none; }
80		}
81		&.ready {
82			input[type="checkbox"], span.confirm { display: initial;}
83			span.busy, span.checking, span.loading { display: none; }
84			label, input[type="checkbox"] { cursor: pointer; }
85		}
86		&.loading {
87			span.busy, span.loading { display: initial; }
88			input[type="checkbox"], span.confirm, span.checking { display: none;}
89			label { cursor: busy; }
90		}
91	}
92}
93
94// smaller screens:
95@media (max-width: 480px) {
96	body.botmon_captcha #botmon_captcha_box {
97		width: 100vw;
98		height: auto;
99		left: 0; top: 80px;
100		border-radius: 2px;
101		z-index: 10001;
102	}
103}
104
105/* dark mode overrides */
106@media (prefers-color-scheme: dark) {
107	body.darkmode.botmon_captcha {
108		main {
109			h1 {
110				text-shadow: 0 0 .25em rgba(170,170,170,.75);
111			}
112			p, h2, h3, h4, h5, h6 {
113				text-shadow: 0 0 .35em rgba(170,170,170,.75);
114			}
115		}
116		#botmon_captcha_box {
117			& {
118				background-color: #FFF;
119				border-color: #9F9EA1;
120				box-shadow: .25rem .25rem .5rem rgba(0,0,0,.25);
121			}
122			& * {
123				color: #15141A;
124			}
125			label {
126				background-color: #EEE;
127				border-color: #9F9EA1;
128			}
129		}
130	}
131}