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