xref: /plugin/botmon/admin.css (revision bda325f4f6bbd6b72fe9093b827061e6bcd22139)
1#botmon__admin {
2
3	section[role="tabpanel"] {
4		margin: .25rem 0;
5	}
6
7	/* icon items */
8	.has_icon {
9		display: inline-flex;
10	}
11	.icon_only {
12		display: inline-grid;
13		grid-template-columns: 20px max-content;
14		overflow: hidden;
15		width: 20px;
16	}
17
18	.has_icon, .icon_only {
19		& {
20			align-items: center;
21			column-gap: .25em;
22		}
23
24		&::before {
25			content: '';
26			display: inline-block;
27			width: 20px; height: 20px;
28			background: transparent none center no-repeat;
29			background-position: 0 0;
30			background-size: 20px;
31		}
32
33		/* user info Icon */
34		&.user_known::before { background-image: url('img/user.svg') }
35
36		/* IP Address types */
37		&.ipaddr::before { background-image: url('img/addr.png') }
38		&.ip4::before { background-position-y: -20px }
39		&.ip6::before { background-position-y: -40px }
40
41		/* Bot icons */
42		&.bot::before { background-image: url('img/bots.png') }
43		&.bot_googlebot::before, &.bot_googleads::before, &.bot_googleapi::before,
44			&.bot_googleother::before, &.bot_googinspct::before { background-position-y: -20px }
45		&.bot_bingbot::before { background-position-y: -40px }
46		&.bot_applebot::before { background-position-y: -60px }
47		&.bot_openai::before { background-position-y: -80px }
48		&.bot_metabots::before { background-position-y: -100px }
49		&.bot_ahrefs::before { background-position-y: -120px }
50		&.bot_seznambot::before { background-position-y: -140px }
51		&.bot_claude::before { background-position-y: -160px }
52		&.bot_baidu::before { background-position-y: -180px }
53		&.bot_reddit::before { background-position-y: -200px }
54		&.bot_wayback::before { background-position-y: -220px }
55		&.bot_alibaba::before { background-position-y: -241px }
56		&.bot_ibou::before { background-position-y: -260px }
57		&.bot_discord::before { background-position-y: -280px }
58		&.bot_twitter::before { background-position-y: -300px }
59		&.bot_other::before { background-image: url('img/more.svg') }
60
61		/* platform icons */
62		&.platform::before { background-image: url('img/platforms.png') }
63		&.pf_win10::before { background-position-y: -20px }
64		&.pf_winold::before, dd.platform_winold::before,
65			&.pf_winsrvr:before { background-position-y: -40px }
66		&.pf_macos::before { background-position-y: -60px }
67		&.pf_macosold::before { background-position-y: -80px }
68		&.pf_ios::before { background-position-y: -100px }
69		&.pf_android::before { background-position-y: -120px }
70		&.pf_androidold::before { background-position-y: -140px }
71		&.pf_linux::before { background-position-y: -160px }
72		&.pf_bsd::before { background-position-y: -180px }
73		&.pf_chromium::before { background-position-y: -200px }
74		&.pf_hmos::before { background-position-y: -220px }
75		&.pf_tizen::before { background-position-y: -240px }
76		&.pf_fire::before { background-position-y: -260px }
77		&.pf_app::before { background-position-y: -280px }
78		&.pf_other::before { background-image: url('img/more.svg') }
79
80		/* browser icons */
81		&.client::before { background-image: url('img/clients.png') }
82		&.cl_firefox::before, &.cl_ffios::before { background-position-y: -20px }
83		&.cl_safari::before { background-position-y: -40px }
84		&.cl_chrome::before { background-position-y: -60px }
85		&.cl_msedge::before { background-position-y: -80px }
86		&.cl_msie::before { background-position-y: -100px }
87		&.cl_opera::before { background-position-y: -120px }
88		&.cl_brave::before { background-position-y: -140px }
89		&.cl_ddg::before { background-position-y: -160px }
90		&.cl_samsung::before { background-position-y: -180px }
91		&.cl_huawei::before { background-position-y: -200px }
92		&.cl_vivaldi::before { background-position-y: -220px }
93		&.cl_aol::before { background-position-y: -240px }
94		&.cl_ya::before { background-position-y: -260px }
95		&.cl_silk::before { background-position-y: -280px }
96		&.cl_ffold::before { background-position-y: -300px }
97		&.cl_chromeold::before { background-position-y: -320px }
98		&.cl_ecosia::before { background-position-y: -340px }
99		&.cl_webkit::before { background-position-y: -360px }
100		&.cl_operaold::before { background-position-y: -380px }
101		&.cl_whatsapp::before { background-position-y: -400px }
102		&.cl_applemsgs::before { background-position-y: -420px }
103		&.cl_goognblm::before { background-position-y: -440px }
104		&.cl_other::before { background-image: url('img/more.svg') }
105
106		/* Country flags */
107		/* Note: flag images and CSS adapted from: https://github.com/lafeber/world-flags-sprite/ */
108		&.country::before {
109			content: '';
110			height: 20px; width: 20px;
111			background:url(img/flags.png) no-repeat 0 0;
112			background-size: 20px auto;
113		}
114		&.ctry_ad::before { background-position-y: -441px }
115		&.ctry_ae::before { background-position-y: -461px }
116		&.ctry_af::before { background-position-y: -481px }
117		&.ctry_ag::before { background-position-y: -501px }
118		&.ctry_ai::before { background-position-y: -521px }
119		&.ctry_al::before { background-position-y: -541px }
120		&.ctry_am::before { background-position-y: -561px }
121		&.ctry_ao::before { background-position-y: -581px }
122		&.ctry_aq::before { background-position-y: -601px }
123		&.ctry_ar::before { background-position-y: -621px }
124		&.ctry_as::before { background-position-y: -641px }
125		&.ctry_at::before { background-position-y: -661px }
126		&.ctry_au::before { background-position-y: -681px }
127		&.ctry_aw::before { background-position-y: -701px }
128		&.ctry_ax::before { background-position-y: -721px }
129		&.ctry_az::before { background-position-y: -741px }
130		&.ctry_ba::before { background-position-y: -761px }
131		&.ctry_bb::before { background-position-y: -781px }
132		&.ctry_bd::before { background-position-y: -801px }
133		&.ctry_be::before { background-position-y: -821px }
134		&.ctry_bf::before { background-position-y: -841px }
135		&.ctry_bg::before { background-position-y: -861px }
136		&.ctry_bh::before { background-position-y: -881px }
137		&.ctry_bi::before { background-position-y: -901px }
138		&.ctry_bj::before { background-position-y: -921px }
139		&.ctry_bm::before { background-position-y: -941px }
140		&.ctry_bn::before { background-position-y: -961px }
141		&.ctry_bo::before { background-position-y: -981px }
142		&.ctry_br::before { background-position-y: -1001px }
143		&.ctry_bs::before { background-position-y: -1021px }
144		&.ctry_bt::before { background-position-y: -1041px }
145		&.ctry_bw::before { background-position-y: -1061px }
146		&.ctry_by::before { background-position-y: -1081px }
147		&.ctry_bz::before { background-position-y: -1101px }
148		&.ctry_ca::before { background-position-y: -1121px }
149		&.ctry_cd::before { background-position-y: -1141px }
150		&.ctry_cf::before { background-position-y: -1161px }
151		&.ctry_cg::before { background-position-y: -1181px }
152		&.ctry_ch::before { background-position-y: -1201px }
153		&.ctry_ci::before { background-position-y: -1221px }
154		&.ctry_ck::before { background-position-y: -1241px }
155		&.ctry_cl::before { background-position-y: -1261px }
156		&.ctry_cm::before { background-position-y: -1281px }
157		&.ctry_cn::before { background-position-y: -1301px }
158		&.ctry_co::before { background-position-y: -1321px }
159		&.ctry_cr::before { background-position-y: -1341px }
160		&.ctry_cu::before { background-position-y: -1361px }
161		&.ctry_cv::before { background-position-y: -1381px }
162		&.ctry_cy::before { background-position-y: -1401px }
163		&.ctry_cz::before { background-position-y: -1421px }
164		&.ctry_de::before { background-position-y: -1441px }
165		&.ctry_dj::before { background-position-y: -1461px }
166		&.ctry_dk::before { background-position-y: -1481px }
167		&.ctry_dm::before { background-position-y: -1501px }
168		&.ctry_do::before { background-position-y: -1521px }
169		&.ctry_dz::before { background-position-y: -1541px }
170		&.ctry_ec::before { background-position-y: -1561px }
171		&.ctry_ee::before { background-position-y: -1581px }
172		&.ctry_eg::before { background-position-y: -1601px }
173		&.ctry_eh::before { background-position-y: -1621px }
174		&.ctry_er::before { background-position-y: -1641px }
175		&.ctry_es::before { background-position-y: -1661px }
176		&.ctry_et::before { background-position-y: -1681px }
177		&.ctry_fi::before { background-position-y: -1701px }
178		&.ctry_fj::before { background-position-y: -1721px }
179		&.ctry_fm::before { background-position-y: -1741px }
180		&.ctry_fo::before { background-position-y: -1761px }
181		&.ctry_fr::before, &.ctry_bl::before, &.ctry_cp::before, &.ctry_mf::before,
182			&.ctry_yt::before { background-position-y: -1781px }
183		&.ctry_ga::before { background-position-y: -1801px }
184		&.ctry_gb::before, &.ctry_bg::before, &.ctry_uk::before,
185			&.ctry_sh::before { background-position-y: -1821px }
186		&.ctry_gd::before { background-position-y: -1841px }
187		&.ctry_ge::before { background-position-y: -1861px }
188		&.ctry_gg::before { background-position-y: -1881px }
189		&.ctry_gh::before { background-position-y: -1901px }
190		&.ctry_gi::before { background-position-y: -1921px }
191		&.ctry_gl::before { background-position-y: -1941px }
192		&.ctry_gm::before { background-position-y: -1961px }
193		&.ctry_gn::before { background-position-y: -1981px }
194		&.ctry_gp::before { background-position-y: -2001px }
195		&.ctry_gq::before { background-position-y: -2021px }
196		&.ctry_gr::before { background-position-y: -2041px }
197		&.ctry_gt::before { background-position-y: -2061px }
198		&.ctry_gu::before { background-position-y: -2081px }
199		&.ctry_gw::before { background-position-y: -2101px }
200		&.ctry_gy::before { background-position-y: -2121px }
201		&.ctry_hk::before { background-position-y: -2141px }
202		&.ctry_hn::before { background-position-y: -2161px }
203		&.ctry_hr::before { background-position-y: -2181px }
204		&.ctry_ht::before { background-position-y: -2201px }
205		&.ctry_hu::before { background-position-y: -2221px }
206		&.ctry_id::before, &.ctry_mc::before { background-position-y: -2241px }
207		&.ctry_ie::before { background-position-y: -2261px }
208		&.ctry_il::before { background-position-y: -2281px }
209		&.ctry_im::before { background-position-y: -2301px }
210		&.ctry_in::before { background-position-y: -2321px }
211		&.ctry_iq::before { background-position-y: -2341px }
212		&.ctry_ir::before { background-position-y: -2361px }
213		&.ctry_is::before { background-position-y: -2381px }
214		&.ctry_it::before { background-position-y: -2401px }
215		&.ctry_je::before { background-position-y: -2421px }
216		&.ctry_jm::before { background-position-y: -2441px }
217		&.ctry_jo::before { background-position-y: -2461px }
218		&.ctry_jp::before { background-position-y: -2481px }
219		&.ctry_ke::before { background-position-y: -2501px }
220		&.ctry_kg::before { background-position-y: -2521px }
221		&.ctry_kh::before { background-position-y: -2541px }
222		&.ctry_ki::before { background-position-y: -2561px }
223		&.ctry_km::before { background-position-y: -2581px }
224		&.ctry_kn::before { background-position-y: -2601px }
225		&.ctry_kp::before { background-position-y: -2621px }
226		&.ctry_kr::before { background-position-y: -2641px }
227		&.ctry_kw::before { background-position-y: -2661px }
228		&.ctry_ky::before { background-position-y: -2681px }
229		&.ctry_kz::before { background-position-y: -2701px }
230		&.ctry_la::before { background-position-y: -2721px }
231		&.ctry_lb::before { background-position-y: -2741px }
232		&.ctry_lc::before { background-position-y: -2761px }
233		&.ctry_li::before { background-position-y: -2781px }
234		&.ctry_lk::before { background-position-y: -2801px }
235		&.ctry_lr::before { background-position-y: -2821px }
236		&.ctry_ls::before { background-position-y: -2841px }
237		&.ctry_lt::before { background-position-y: -2861px }
238		&.ctry_lu::before { background-position-y: -2881px }
239		&.ctry_lv::before { background-position-y: -2901px }
240		&.ctry_ly::before { background-position-y: -2921px }
241		&.ctry_ma::before { background-position-y: -2941px }
242		&.ctry_md::before { background-position-y: -2961px }
243		&.ctry_me::before { background-position-y: -2981px }
244		&.ctry_mg::before { background-position-y: -3001px }
245		&.ctry_mh::before { background-position-y: -3021px }
246		&.ctry_mk::before { background-position-y: -3041px }
247		&.ctry_ml::before { background-position-y: -3061px }
248		&.ctry_mm::before { background-position-y: -3081px }
249		&.ctry_mn::before { background-position-y: -3101px }
250		&.ctry_mo::before { background-position-y: -3121px }
251		&.ctry_mq::before { background-position-y: -3141px }
252		&.ctry_mr::before { background-position-y: -3161px }
253		&.ctry_ms::before { background-position-y: -3181px }
254		&.ctry_mt::before { background-position-y: -3201px }
255		&.ctry_mu::before { background-position-y: -3221px }
256		&.ctry_mv::before { background-position-y: -3241px }
257		&.ctry_mw::before { background-position-y: -3261px }
258		&.ctry_mx::before { background-position-y: -3281px }
259		&.ctry_my::before { background-position-y: -3301px }
260		&.ctry_mz::before { background-position-y: -3321px }
261		&.ctry_na::before { background-position-y: -3341px }
262		&.ctry_nc::before { background-position-y: -3361px }
263		&.ctry_ne::before { background-position-y: -3381px }
264		&.ctry_ng::before { background-position-y: -3401px }
265		&.ctry_ni::before { background-position-y: -3421px }
266		&.ctry_nl::before,
267			&.ctry_bq::before { background-position-y: -3441px }
268		&.ctry_no::before, &.ctry_bv::before , &.ctry_nq::before,
269			&.ctry_sj::before { background-position-y: -3461px }
270		&.ctry_np::before { background-position-y: -3481px }
271		&.ctry_nr::before { background-position-y: -3501px }
272		&.ctry_nz::before { background-position-y: -3521px }
273		&.ctry_om::before { background-position-y: -3541px }
274		&.ctry_pa::before { background-position-y: -3561px }
275		&.ctry_pe::before { background-position-y: -3581px }
276		&.ctry_pf::before { background-position-y: -3601px }
277		&.ctry_pg::before { background-position-y: -3621px }
278		&.ctry_ph::before { background-position-y: -3641px }
279		&.ctry_pk::before { background-position-y: -3661px }
280		&.ctry_pl::before { background-position-y: -3681px }
281		&.ctry_pr::before { background-position-y: -3701px }
282		&.ctry_ps::before { background-position-y: -3721px }
283		&.ctry_pt::before { background-position-y: -3741px }
284		&.ctry_pw::before { background-position-y: -3761px }
285		&.ctry_py::before { background-position-y: -3781px }
286		&.ctry_qa::before { background-position-y: -3801px }
287		&.ctry_re::before { background-position-y: -3821px }
288		&.ctry_ro::before { background-position-y: -3841px }
289		&.ctry_rs::before { background-position-y: -3861px }
290		&.ctry_ru::before { background-position-y: -3881px }
291		&.ctry_rw::before { background-position-y: -3901px }
292		&.ctry_sa::before { background-position-y: -3921px }
293		&.ctry_sb::before { background-position-y: -3941px }
294		&.ctry_sc::before { background-position-y: -3961px }
295		&.ctry_sd::before { background-position-y: -3981px }
296		&.ctry_se::before { background-position-y: -4001px }
297		&.ctry_sg::before { background-position-y: -4021px }
298		&.ctry_si::before { background-position-y: -4041px }
299		&.ctry_sk::before { background-position-y: -4061px }
300		&.ctry_sl::before { background-position-y: -4081px }
301		&.ctry_sm::before { background-position-y: -4101px }
302		&.ctry_sn::before { background-position-y: -4121px }
303		&.ctry_so::before { background-position-y: -4141px }
304		&.ctry_sr::before { background-position-y: -4161px }
305		&.ctry_st::before { background-position-y: -4181px }
306		&.ctry_sv::before { background-position-y: -4201px }
307		&.ctry_sy::before { background-position-y: -4221px }
308		&.ctry_sz::before { background-position-y: -4241px }
309		&.ctry_tc::before { background-position-y: -4261px }
310		&.ctry_td::before { background-position-y: -4281px }
311		&.ctry_tg::before { background-position-y: -4301px }
312		&.ctry_th::before { background-position-y: -4321px }
313		&.ctry_tj::before { background-position-y: -4341px }
314		&.ctry_tl::before { background-position-y: -4361px }
315		&.ctry_tm::before { background-position-y: -4381px }
316		&.ctry_tn::before { background-position-y: -4401px }
317		&.ctry_to::before { background-position-y: -4421px }
318		&.ctry_tr::before { background-position-y: -4441px }
319		&.ctry_tt::before { background-position-y: -4461px }
320		&.ctry_tv::before { background-position-y: -4481px }
321		&.ctry_tw::before { background-position-y: -4501px }
322		&.ctry_tz::before { background-position-y: -4521px }
323		&.ctry_ua::before { background-position-y: -4541px }
324		&.ctry_ug::before { background-position-y: -4561px }
325		&.ctry_us::before { background-position-y: -4581px }
326		&.ctry_uy::before { background-position-y: -4601px }
327		&.ctry_uz::before { background-position-y: -4621px }
328		&.ctry_va::before { background-position-y: -4641px }
329		&.ctry_vc::before { background-position-y: -4661px }
330		&.ctry_ve::before { background-position-y: -4681px }
331		&.ctry_vg::before { background-position-y: -4701px }
332		&.ctry_vi::before { background-position-y: -4721px }
333		&.ctry_vn::before { background-position-y: -4741px }
334		&.ctry_vu::before { background-position-y: -4761px }
335		&.ctry_ws::before { background-position-y: -4781px }
336		&.ctry_ye::before { background-position-y: -4801px }
337		&.ctry_za::before { background-position-y: -4821px }
338		&.ctry_zm::before { background-position-y: -4841px }
339		&.ctry_zw::before { background-position-y: -4861px }
340		&.ctry_sx::before { background-position-y: -4881px }
341		&.ctry_cw::before { background-position-y: -4901px }
342		&.ctry_ss::before { background-position-y: -4921px }
343		&.ctry_nu::before { background-position-y: -4941px }
344
345		&.ctry_local::before { background-image: url('img/addr.png') } /* localhost */
346		&.ctry_other::before { background-image: url('img/more.svg') } /* other countries */
347
348		/* Session icons */
349		&.session::before { background-image: url('img/idtyp.png') }
350		&.typ_dw::before { background-position-y: -20px }
351		&.typ_php::before { background-position-y: -40px }
352		&.typ_ip::before { background-position-y: -60px }
353		&.typ_usr::before { background-position-y: -80px }
354
355		/* External link icons */
356		&.extlink::before { background-image: url('img/links.png') }
357		&.extlink.ipinfo::before { background-position-y: -40px }
358		&.extlink.abuseipdb::before { background-position-y: -20px }
359
360		/* Common referers icons */
361		&.referer::before { background-image: url('img/referers.png') }
362		&.ref_null::before { background-position-y: -20px }
363		&.ref_google::before { background-position-y: -40px }
364		&.ref_bing::before { background-position-y: -60px }
365		&.ref_yahoo::before { background-position-y: -80px }
366		&.ref_dokuwiki::before { background-position-y: -100px }
367		&.ref_duckduckgo::before { background-position-y: -120px }
368		&.ref_ecosia::before { background-position-y: -140px }
369		&.ref_yandex::before { background-position-y: -160px }
370		&.ref_chatgpt::before { background-position-y: -180px }
371		&.ref_brave::before { background-position-y: -200px }
372		&.ref_wikipedia::before { background-position-y: -220px }
373		&.ref_denkfehler::before { background-position-y: -240px }
374		&.ref_fallacies::before { background-position-y: -260px }
375		&.ref_facebook::before { background-position-y: -280px }
376		&.ref_discord::before { background-position-y: -300px }
377		&.ref_other::before { background-image: url('img/more.svg') }
378	}
379
380	.page_icon {
381		display: inline-flex;
382		column-gap: .25em;
383		align-items: center;
384	}
385	.page_icon::before {
386		content: '';
387		display: inline-block;
388		width: 20px; height: 20px;
389		background: transparent url('img/page.svg') center no-repeat;
390		background-position: 0 0;
391		background-size: 20px;
392	}
393
394	/* grid layout for the overview: */
395	.botmon_bots_grid, .botmon_webmetrics_grid, .botmon_traffic_grid {
396		& {
397			display: grid;
398			grid-gap: 0 .33em;
399		}
400		dl {
401			dd {
402				display: flex;
403				justify-content: space-between;
404				align-items: baseline;
405			}
406		}
407	}
408	.botmon_bots_grid {
409		&[data-geoip="disabled"] {
410			& {
411				grid-template-columns: 1fr 1fr 1fr;
412			}
413			#botmon__botcountries {
414				display: none;
415			}
416		}
417		&:not([data-geoip="disabled"]) {
418			grid-template-columns: 1fr 1fr 1fr 1fr;
419		}
420	}
421	.botmon_webmetrics_grid {
422		&[data-geoip="disabled"] {
423			& {
424				grid-template-columns: 1fr 1fr 1fr;
425			}
426			#botmon__today__wm_countries {
427				display: none;
428			}
429		}
430		&:not([data-geoip="disabled"]) {
431			grid-template-columns: 1fr 1fr 1fr 1fr;
432		}
433	}
434	.botmon_traffic_grid {
435		grid-template-columns: 2fr 1fr;
436	}
437
438	/* The tabs bar */
439	#botmon__tabs ul.tabs li {
440		a[aria-selected="true"] {
441			background-color: #DDD;
442			color: #111;
443		}
444		a[aria-selected="false"] {
445			background-color: #EEE;
446			color: #111;
447		}
448	}
449
450	/* the "today" tab: */
451	#botmon__latest {
452
453		/* item header */
454		header {
455			background-color: #F0F0F0;
456			color: #333;
457			border: #999 solid 1px;
458			border-radius: .5rem .5rem 0 0;
459			margin: .5rem 0 1pt 0;
460			padding: .25rem .5rem;
461			font-size: 1rem;
462			line-height: 1.25;
463		}
464
465		/* list formatting */
466		dl {
467			& {
468				border-left: #555 solid 1px;
469				padding-left: .5rem;
470				margin: 0;
471				font-size: 1rem;
472				line-height: 1.5;
473			}
474			&:first-child {
475				border-left: none;
476				padding-left: 0;
477			}
478			dt {
479				margin-bottom: .2em;
480			}
481			dd {
482				padding: 0; margin: 0;
483			}
484			dd.spaced {
485				display: flex;
486				justify-content: space-between;
487			}
488			dd:nth-child(even) {
489				background-color: #EEE;
490			}
491		}
492
493		/* Content */
494		#botmon__today__content {
495			& details {
496				& {
497					margin: 0 0 1pt 0;
498					text-align: left;
499				}
500				summary {
501					& {
502						display: flex;
503						justify-content: flex-start;
504						align-items: center;
505						column-gap: .25em;
506						font-weight: bold;
507						font-size: 1rem;
508						line-height: 1.5;
509						margin: 0;
510						padding: .25em;
511						color: #333;
512						cursor: pointer;
513					}
514					&::marker, &::before {
515						content: none;
516						display: none;
517					}
518					&::before {
519						content: '';
520						display: inline-block;
521						width: 1.25em; height: 1.25em;
522						background: transparent url('img/chevron.svg') center no-repeat;
523						background-size: 1.25em;
524						transform: rotate(-90deg);
525						transition-duration: .25s;
526					}
527				}
528				&[open] {
529					& > summary::before {
530						transform: rotate(0deg);
531					}
532				}
533				& > div {
534					padding: .5rem;
535					border: #999 solid 1px;
536					border-top-width: 0;
537					border-radius: 0 0 .25rem .25rem;
538				}
539				& details summary {
540					& {
541						background-color: transparent;
542						border: transparent none 0;
543					}
544					span.title {
545						flex-grow: 1;
546					}
547					a.ext_info {
548						display: inline-block;
549						width: 1.25em; height: 1.25em;
550						overflow: hidden;
551						border-radius: 50%;
552					}
553					a.ext_info::before {
554						content: '';
555						display: inline-block;
556						width: 1.25em; height: 1.25em;
557						background: transparent url('img/info.svg') center no-repeat
558					}
559				}
560			}
561			& > details > summary {
562				background-color: #F0F0F0;
563				border: #999 solid 1px;
564			}
565		}
566
567		/* visitor lists: */
568		#botmon__today__visitorlists {
569			& > details summary {
570				border-radius: .5em;
571			}
572			details ul {
573				margin: 0;
574				padding: 0;
575				list-style: none;
576			}
577			details ul > li {
578				margin: 0 0 0 .75rem;
579				padding: 0;
580				color: #000;
581			}
582			details ul > li > details {
583				border: #ccc solid 1px;
584				border-radius: .5em;
585			}
586			details ul > li > details > summary {
587				display: flex;
588				justify-content: space-between;
589				align-items: center;
590				column-gap: .5em;
591				font-weight: normal;
592				font-size: 1rem;
593				line-height: 1.5;
594				background-color: #F0F0F0;
595				border-bottom: #CCC solid 1px;
596				border-radius: .7em;
597			}
598			details ul > li > details > summary.noServer {
599				opacity: 67%;
600			}
601			details ul > li > details > summary > span {
602				display: flex;
603				align-items: center;
604				column-gap: .25em;
605			}
606			details ul > li > details > summary > span:first-child {
607				flex-grow: 1;
608			}
609			details ul > li > details > summary > span > span[title] {
610				cursor: help;
611			}
612
613			dl.visitor_details {
614				& {
615					display: grid;
616					grid-template-columns: min-content auto;
617					border-left: transparent none 0;
618					margin: 0 .5rem .25rem 0;
619				}
620				dt {
621					grid-column: 1;
622					white-space: nowrap;
623				}
624				dd {
625					grid-column: 2;
626					background-color: transparent;
627				}
628				dd.pages {
629					& {
630					}
631					ul {
632						li {
633							& {
634								display: flex;
635								flex-direction: column;
636								line-height: 1.2rem;
637								margin: 0;
638								padding: 0 .25em;
639							}
640							&:nth-child(odd) {
641								background-color: #DFDFDF;
642							}
643							div.row {
644								display: flex;
645								flex-direction: row;
646								justify-content: space-between;
647								align-items: baseline;
648								white-space: nowrap;
649								line-height: 1.35em;
650							}
651							span {
652								display: inline-block;
653							}
654						}
655					}
656					a[hreflang] {
657						overflow: hidden;
658						text-overflow: ellipsis;
659						padding: 2pt 0 0 2pt;
660
661					}
662					a[hreflang]::after {
663						content: attr(hreflang);
664						font-size: smaller;
665						color: #666;
666						border: #666 solid 1px;
667						line-height: 1.25;
668						border-radius: 2pt;
669						padding: 0 1pt;
670						margin-left: .2em;
671					}
672					span.first-seen {
673						min-width: 4.2em;
674						text-align: right;
675					}
676					span.visit-length {
677						font-size: smaller;
678					}
679					span.bounce {
680						width: 1.25em; height: 1.25em;
681						overflow: hidden;
682					}
683					span.bounce::before {
684						display: inline-block;
685						content: '';
686						width: 1.25em; height: 1em;
687						background: transparent url('img/bounce.svg') center no-repeat;
688						background-size: .95em;
689					}
690					span.referer {
691						font-size: smaller;
692						margin-left: .67rem;
693					}
694				}
695			}
696
697			dd.eval > ul {
698				li {
699					display: flex;
700					justify-content: space-between;
701					align-items: center;
702				}
703				li:nth-child(odd) {
704					background-color: #DFDFDF;
705				}
706				li.total {
707					border-top: #333 solid 1px;
708					font-style: italic;
709				}
710			}
711
712			/* user agent */
713			span.agent::before {
714				background-image: url('img/info.svg')
715			}
716
717			/* pageviews */
718			span.pageviews {
719				border: #999 solid 1px;
720				padding: 0 2px;
721				font-size: smaller;
722				border-radius: .5em;
723				margin-right: .25em;
724			}
725			span.pageviews::before {
726				content : '';
727				display: inline-block;
728				width: 1.25em; height: 1.25em;
729				background: transparent url('img/page.svg') center no-repeat;
730				background-size: 1.25em;
731			}
732		}
733
734		/* item footer */
735		footer {
736			& {
737				display: flex;
738				align-items: center;
739				column-gap: .25rem;
740				background-color: #F0F0F0;
741				color: #333;
742				border: #999 solid 1px;
743				border-radius: 0 0 .5rem .5rem;
744				margin: 1pt 0 0 0;
745				padding: .25rem .5rem;
746				line-height: 1.25;
747			}
748			& > svg {
749				width: 1.25em; height: 1.25em;
750				fill: #333;
751				flex-shrink: 0;
752			}
753			& > span {
754				font-size: .96rem;
755				line-height: 1.25rem;
756			}
757			& > span.error {
758				color: #961D1B;
759				font-weight: bold;
760			}
761		}
762	}
763
764	/* the log tab: */
765	#botmon__log {
766
767		#botmon__loglist {
768			& {
769				border: #999 solid 1px;
770				background-color: #F0F0F0;
771				margin: .5rem 0 0 0;
772				padding: .5em;
773				border-radius: .5em 1pt 1pt .5em;
774				list-style: none inside;
775				display: block;
776				min-height: 24rem;
777				max-height: 32rem;
778				overflow: hidden auto
779			}
780			li {
781				& {
782					margin: 0; padding: 0;
783				}
784				&:nth-child(even) {
785					background-color: #DFDFDF;
786				}
787				&.info { color: #626262; font-style: italic;}
788				&.success { color: #217121; }
789				&.error { color: #bb2929; }
790			}
791		}
792	}
793}
794
795/* dark mode overrides */
796@media (prefers-color-scheme: dark) {
797	body.darkmode.mode_admin #botmon__admin {
798
799		#botmon__tabs ul.tabs li {
800			a[aria-selected="true"] {
801				background-color: #0c0c0d;
802				color: #adadb3;
803			}
804			a[aria-selected="false"] {
805				background-color: #39393D;
806				color: #ADADB3;
807			}
808		}
809
810		#botmon__latest {
811
812			header {
813				background-color: #0c0c0d;
814				color: #adadb3;
815				border-color: #666;
816			}
817
818			/* list formatting */
819			dl {
820				& {
821					border-left-color: #777;
822				}
823				dt {
824					color: #adadb3;
825				}
826				dd:nth-child(even) {
827					background-color: #333;
828				}
829			}
830
831			#botmon__today__content > details {
832				summary {
833					& {
834						background-color: #0c0c0d;
835						color: #adadb3;
836						border-color: #666;
837					}
838					&::after {
839						color: #76b0fd;
840					}
841				}
842				& > div {
843					border-color: #666;
844				}
845			}
846
847			/* visitor lists: */
848			#botmon__today__visitorlists {
849				details ul > li {
850					& {
851						color: #aeaeae;
852					}
853					& > details {
854						border-color: #666;
855					}
856					& > details summary {
857						background-color: #171717;
858					}
859				}
860
861				dl.visitor_details {
862					dd.pages {
863						ul li:nth-child(odd) {
864							background-color: #333;
865						}
866					}
867				}
868
869				dd.eval > ul {
870					li:nth-child(odd) {
871						background-color: #333;
872					}
873					li.total {
874						border-top-color: #CCC;
875					}
876				}
877				span.pageviews {
878					border-color: #555;
879				}
880
881			}
882
883			footer {
884				& {
885					background-color: #0c0c0d;
886					color: #adadb3;
887					border-color: #666;
888				}
889				& > svg {
890					fill: #777;
891				}
892				& > span.error {
893					color: #961D1B;
894				}
895			}
896		}
897
898		#botmon__log {
899			#botmon__loglist {
900				& {
901					border-color: #CCC;
902					background-color: #232327;
903				}
904				li {
905					&:nth-child(even) { background-color: #39393D; }
906					&.info { color: #a2a2a2;}
907					&.success { color: #50b750; }
908					&.error { color: #f87d7d; }
909				}
910			}
911		}
912
913	}
914}
915/* layout overrides for narrow screens: */
916@media (max-width: 800px) {
917	#botmon__admin #botmon__latest #botmon__today__visitorlists {
918		dl.visitor_details {
919			& {
920				display: block;
921				margin-top: .5rem;
922			}
923			dt {
924				margin-left: .67rem;
925				font-size: smaller;
926			}
927			dd {
928				margin-left: 1.5rem;
929			}
930			dd.pages, dd.eval {
931				margin-left: 0;
932			}
933		}
934	}
935}
936
937@media (max-width: 670px) {
938	#botmon__admin #botmon__latest {
939		.botmon_bots_grid, .botmon_webmetrics_grid, .botmon_traffic_grid {
940			& {
941				grid-template-columns: 1fr !important;
942			}
943			dt {
944				margin: .5em 0;
945			}
946			dl {
947				border-left: transparent none 0;
948				padding-left: 0;
949			}
950		}
951	}
952}
953