xref: /plugin/botmon/style.less (revision 446aa816f13a67da1363de8d428f5109f5b3a359) 
1#botmon__admin {
2
3	section[role="tabpanel"] {
4		margin: .25rem 0;
5	}
6
7	/* grid layout classes (taken from the Ad-Hoc Wrap plugin) */
8	.grid-2-columns,
9	.grid-3-columns {
10		display: grid;
11	}
12	.grid-2-columns {
13		grid-template-columns: 1fr 1fr;
14		grid-gap: 0 .5em;
15	}
16	.grid-3-columns {
17		grid-template-columns: 1fr 1fr 1fr;
18		grid-gap: 0 .33em;
19	}
20
21	/* the "today" tab: */
22	#botmon__today {
23
24		/* item header */
25		header {
26			background-color: #F0F0F0;
27			color: #333;
28			border: #CCC solid 1px;
29			border-radius: .5rem .5rem 0 0;
30			margin: .5rem 0 1pt 0;
31			padding: .25rem .5rem;
32			font-size: 1rem;
33			line-height: 1.25;
34		}
35
36		/* list formatting */
37		dl {
38			& {
39				border-left: #555 solid 1px;
40				padding-left: .5rem;
41				margin: 0;
42				font-size: 1rem;
43				line-height: 1.5;
44			}
45			&:first-child {
46				border-left: none;
47				padding-left: 0;
48			}
49			dt {
50				margin-bottom: .2em;
51			}
52			dd {
53				display: flex;
54				justify-content: space-between;
55				padding: 0; margin: 0;
56			}
57			dd:nth-child(even) {
58				background-color: #EEE;
59			}
60		}
61
62		/* Content */
63		#botmon__today__content {
64			& details {
65				& {
66					margin: 0 0 1pt 0;
67					text-align: left;
68				}
69				summary {
70					& {
71						display: flex;
72						justify-content: flex-start;
73						align-items: center;
74						column-gap: .25em;
75						font-weight: bold;
76						font-size: 1rem;
77						line-height: 1.5;
78						margin: 0;
79						padding: .25em;
80						color: #333;
81						cursor: pointer;
82					}
83					&::marker, &::before {
84						content: none;
85						display: none;
86					}
87					&::before {
88						content: '';
89						display: inline-block;
90						width: 1.25em; height: 1.25em;
91						background: transparent url('img/chevron.svg') center no-repeat;
92						background-size: 1.25em;
93						transform: rotate(-90deg);
94						transition-duration: .25s;
95					}
96				}
97				&[open] {
98					& > summary::before {
99						transform: rotate(0deg);
100					}
101				}
102				& > div {
103					padding: .5rem;
104					border: #CCC solid 1px;
105					border-top-width: 0;
106					border-radius: 0 0 .25rem .25rem;
107				}
108				& details summary {
109					& {
110						background-color: transparent;
111						border: transparent none 0;
112					}
113					span.title {
114						flex-grow: 1;
115					}
116				}
117			}
118			& > details > summary {
119				background-color: #F0F0F0;
120				border: #CCC solid 1px;
121			}
122		}
123
124		/* visitor lists: */
125		#botmon__today__visitorlists {
126			details ul {
127				margin: 0;
128				padding: 0;
129				list-style: none;
130			}
131			details ul > li {
132				margin: 0 0 0 .75rem;
133				padding: 0;
134				color: #000;
135			}
136			details ul > li > details {
137				border: #ccc solid 1px;
138				border-radius: .5em;
139			}
140			details ul > li > details > summary {
141				display: flex;
142				justify-content: space-between;
143				align-items: center;
144				column-gap: .5em;
145				font-weight: normal;
146				font-size: 1rem;
147				line-height: 1.5;
148				background-color: #F0F0F0;
149				border-bottom: #CCC solid 1px;
150				border-radius: .7em;
151			}
152
153			details ul > li > details > summary > span {
154				display: flex;
155				align-items: center;
156				column-gap: .25em;
157			}
158			details ul > li > details > summary > span:first-child {
159				flex-grow: 1;
160			}
161			details ul > li > details > summary > span > span {
162				display: flex;
163				align-items: center;
164				column-gap: .25em;
165				height: 1.5em;
166				overflow: hidden;
167				margin-right: .2rem;
168			}
169			details ul > li > details > summary > span > span::before {
170				content: '';
171				display: inline-block;
172				min-width: 1.25em; height: 1em;
173				text-align: center;
174				background: transparent url('img/placeholder.svg') center no-repeat;
175				background-size: 1em;
176			}
177			details ul > li > details > summary > span > span.icon {
178				width: 1.25em;
179				overflow: hidden;
180			}
181			details ul > li > details > summary > span > span[title] {
182				cursor: help;
183			}
184
185			dl.visitor_details {
186				& {
187					display: grid;
188					grid-template-columns: min-content auto;
189					border-left: transparent none 0;
190				}
191				dt {
192					grid-column: 1;
193					white-space: nowrap;
194				}
195				dd {
196					& {
197						grid-column: 2;
198						display: inline-block;
199						background-color: transparent;
200					}
201					&.bot-rating {
202						text-align: right;
203					}
204				}
205				dd.pages {
206					& {
207					}
208					ul {
209						li {
210							& {
211								display: flex;
212								justify-content: space-between;
213								align-items: center;
214							}
215							span {
216								&.visit-length {
217									min-width: min-content;
218								}
219								&.bounce {
220									width: 1.25em; height: 1.25em;
221									overflow: hidden;
222								}
223								&.bounce::before {
224									display: inline-block;
225									content: '';
226									width: 1.25em; height: 1.25em;
227									background: transparent url('img/bounce.svg') center no-repeat;
228									background-size: 1.25em;
229								}
230							}
231						}
232					}
233				}
234			}
235			dd.has_icon::before {
236				content: '';
237				display: inline-block;
238				width: 1.25em; height: 1.25em;
239				background: transparent url('img/placeholder.svg') center no-repeat;
240				background-size: 1em;
241			}
242
243			ul.eval {
244				li {
245					display: flex;
246					justify-content: space-between;
247					align-items: center;
248				}
249				li:nth-child(odd) {
250					background-color: #EEE;
251				}
252				li.total {
253					border-top: #333 solid 1px;
254					font-style: italic;
255				}
256			}
257
258			/* bot icons */
259			span.bot::before, dd.bot::before { background-image: url('img/robot.svg') }
260			span.bot_bingbot::before, dd.bot_bingbot::before { background-image: url('img/bing.svg') }
261			span.bot_googlebot::before, dd.bot_googlebot::before,
262			span.bot_googleads::before, dd.bot_googleads::before,
263			span.bot_googleapi::before, dd.bot_googleapi::before { background-image: url('img/google.svg') }
264			span.bot_applebot::before, dd.bot_applebot::before { background-image: url('img/apple.svg') }
265			span.bot_slurp::before, dd.bot_slurp::before { background-image: url('img/yahoo.svg') }
266			span.bot_ddg::before, dd.bot_ddg::before { background-image: url('img/ddg.svg') }
267			span.bot_openai::before, dd.bot_openai::before { background-image: url('img/openai.svg') }
268			span.bot_claude::before, dd.bot_claude::before { background-image: url('img/anthropic.png') }
269			span.bot_perplexity::before, dd.bot_perplexity::before { background-image: url('img/perplexity.svg') }
270			span.bot_metabots::before, dd.bot_metabots::before { background-image: url('img/meta.svg') }
271			span.bot_qwant::before, dd.bot_qwant::before { background-image: url('img/qwant.svg') }
272			span.bot_yandex::before, dd.bot_yandex::before { background-image: url('img/yandex.svg') }
273			span.bot_seznambot::before, dd.bot_seznambot::before { background-image: url('img/seznam.svg') }
274			span.bot_ahrefs::before, dd.bot_ahrefs::before { background-image: url('img/ahrefs.png') }
275			span.bot_ccbot::before, dd.bot_ccbot::before { background-image: url('img/ccbot.png') }
276			span.bot_mjbot::before, dd.bot_mjbot::before { background-image: url('img/majestic.png') }
277			span.bot_petal::before, dd.bot_petal::before { background-image: url('img/petal.svg') }
278			span.bot_barkrowler::before, dd.bot_barkrowler::before { background-image: url('img/babbar.png') }
279			span.bot_semrush::before, dd.bot_semrush::before { background-image: url('img/semrush.png') }
280			span.bot_bytespider::before, dd.bot_bytespider::before { background-image: url('img/bytedance.svg') }
281			span.bot_dfseo::before, dd.bot_dfseo::before { background-image: url('img/dataforseo.png') }
282			span.bot_hunter::before, dd.bot_hunter::before { background-image: url('img/hunter.png') }
283			span.bot_serpstat::before, dd.bot_serpstat::before { background-image: url('img/serpstat.svg') }
284			span.bot_netestate::before, dd.bot_netestate::before { background-image: url('img/netestate.png') }
285			span.bot_imagesift::before, dd.bot_imagesift::before { background-image: url('img/hive.svg') }
286			/*span.bot_dotbot::before, dd.bot_dotbot::before { background-image: url('img/moz.svg') }*/
287			/*span.bot_maui::before, dd.bot_maui::before { background-image: url('img/maui.svg') }*/
288			span.bot_plagaware::before, dd.bot_plagaware::before { background-image: url('img/plagaware.png') }
289
290			/* user info */
291			span.user_known::before { background-image: url('img/user.svg') }
292
293			/* platform icons */
294			span.platform_win10::before, dd.platform_win10::before { background-image: url('img/win11.svg') }
295			span.platform_macos::before, dd.platform_macos::before { background-image: url('img/apple.svg') }
296			span.platform_linux::before, dd.platform_linux::before { background-image: url('img/linux.svg') }
297			span.platform_ios::before, dd.platform_ios::before { background-image: url('img/ios.svg') }
298			span.platform_android::before, dd.platform_android::before { background-image: url('img/android.svg') }
299			span.platform_winold::before, dd.platform_winold::before { background-image: url('img/winold.png') }
300			span.platform_macosold::before, dd.platform_macosold::before { background-image: url('img/macos.svg') }
301			span.platform_tizen::before, dd.platform_tizen::before { background-image: url('img/tizen.png') }
302			span.platform_hmos::before, dd.platform_hmos::before { background-image: url('img/hmos.svg') }
303			span.platform_chromium::before, dd.platform_chromium::before { background-image: url('img/chromium.svg') }
304			span.platform_bsd::before, dd.platform_bsd::before { background-image: url('img/freebsd.png') }
305
306			/* browser icons */
307			span.client_opera::before, dd.client_opera::before { background-image: url('img/opera.svg') }
308			span.client_msie::before, dd.client_msie::before { background-image: url('img/msie.svg') }
309			span.client_brave::before, dd.client_brave::before { background-image: url('img/brave.svg') }
310			span.client_msedge::before, dd.client_msedge::before { background-image: url('img/msedge.svg') }
311			span.client_chrome::before, dd.client_chrome::before { background-image: url('img/chrome.svg') }
312			span.client_chromeold::before, dd.client_chromeold::before { background-image: url('img/chromeold.svg') }
313			span.client_safari::before, dd.client_safari::before { background-image: url('img/safari.png') }
314			span.client_ddg::before, dd.client_ddg::before { background-image: url('img/ddg.svg') }
315			span.client_firefox::before, dd.client_firefox::before { background-image: url('img/firefox.png') }
316			span.client_samsung::before, dd.client_samsung::before { background-image: url('img/samsung.svg') }
317			span.client_uc::before, dd.client_uc::before { background-image: url('img/uc.svg') }
318			span.client_huawei::before, dd.client_huawei::before { background-image: url('img/huawei.png') }
319			span.client_vivaldi::before, dd.client_vivaldi::before { background-image: url('img/vivaldi.svg') }
320			span.client_aol::before, dd.client_aol::before { background-image: url('img/aol.png') }
321			span.client_ya::before, dd.client_ya::before { background-image: url('img/yandex.svg') }
322
323			/* ip address type */
324			span.ip6::before, dd.ip6::before { background-image: url('img/ip6.svg') }
325			span.ip4::before, dd.ip4::before { background-image: url('img/ip4.svg') }
326			span.ip0::before, dd.ip0::before { background-image: url('img/localhost.svg') }
327
328			/* user agent */
329			span.agent::before { background-image: url('img/info.svg') }
330
331			/* pageviews */
332			span.pageviews {
333				border: #999 solid 1px;
334				padding: 0 2px;
335				font-size: smaller;
336				border-radius: .25em;
337			}
338			span.pageviews::before { background-image: url('img/page.svg') }
339
340		}
341
342		/* item footer */
343		footer {
344			& {
345				display: flex;
346				align-items: center;
347				column-gap: .25rem;
348				background-color: #F0F0F0;
349				color: #333;
350				border: #CCC solid 1px;
351				border-radius: 0 0 .5rem .5rem;
352				margin: 1pt 0 0 0;
353				padding: .25rem .5rem;
354				line-height: 1.25;
355			}
356			& > svg {
357				width: 1.25em; height: 1.25em;
358				fill: #333;
359				flex-shrink: 0;
360			}
361			& > span {
362				font-size: .96rem;
363				line-height: 1.25rem;
364			}
365			& > span.error {
366				color: #961D1B;
367				font-weight: bold;
368			}
369		}
370	}
371}
372
373/* dark mode overrides */
374@media (prefers-color-scheme: dark) {
375	body.darkmode.mode_admin #botmon__admin {
376
377		#botmon__today {
378
379			header {
380				background-color: #0c0c0d;
381				color: #adadb3;
382				border-color: #666;
383			}
384
385			/* list formatting */
386			dl {
387				& {
388					border-left-color: #777;
389				}
390				dt {
391					color: #adadb3;
392				}
393				dd:nth-child(even) {
394					background-color: #333337;
395				}
396			}
397
398			#botmon__today__content > details {
399				summary {
400					& {
401						background-color: #0c0c0d;
402						color: #adadb3;
403						border-color: #666;
404					}
405					&::after {
406						color: #76b0fd;
407					}
408				}
409				& > div {
410					border-color: #666;
411				}
412			}
413
414			/* visitor lists: */
415			#botmon__today__visitorlists {
416				details ul > li {
417					color: #aeaeae;
418				}
419			}
420
421			ul.eval {
422				li:nth-child(odd) {
423					background-color: #333337;
424				}
425				li.total {
426					border-top-color: #CCC;
427				}
428			}
429
430			footer {
431				& {
432					background-color: #0c0c0d;
433					color: #adadb3;
434					border-color: #CCC;
435				}
436				& > svg {
437					fill: #777;
438				}
439				& > span.error {
440					color: #961D1B;
441				}
442			}
443		}
444	}
445}
446/* layout overrides for narrow screens: */
447@media (max-width: 670px) {
448	#botmon__admin {
449		.grid-2-columns,
450		.grid-3-columns {
451			grid-template-columns: 100%;
452		}
453	}
454}
455