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