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