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 background-color: transparent; 110 border: transparent none 0; 111 } 112 } 113 & > details > summary { 114 background-color: #F0F0F0; 115 border: #CCC solid 1px; 116 } 117 } 118 119 /* visitor lists: */ 120 #botmon__today__visitorlists { 121 details ul { 122 margin: 0; 123 padding: 0; 124 list-style: none; 125 } 126 details ul > li { 127 margin: 0 0 0 .75rem; 128 padding: 0; 129 color: #000; 130 } 131 details ul > li > details { 132 border: #ccc solid 1px; 133 border-radius: .5em; 134 } 135 details ul > li > details > summary { 136 display: flex; 137 justify-content: space-between; 138 align-items: center; 139 column-gap: .5em; 140 font-weight: normal; 141 font-size: 1rem; 142 line-height: 1.5; 143 background-color: #F0F0F0; 144 border-bottom: #CCC solid 1px; 145 border-radius: .5em; 146 } 147 148 details ul > li > details > summary > span { 149 display: flex; 150 align-items: center; 151 column-gap: .25em; 152 } 153 details ul > li > details > summary > span:first-child { 154 flex-grow: 1; 155 } 156 details ul > li > details > summary > span > span { 157 display: flex; 158 align-items: center; 159 column-gap: .25em; 160 height: 1.5em; 161 overflow: hidden; 162 } 163 details ul > li > details > summary > span > span::before { 164 content: ''; 165 display: inline-block; 166 min-width: 1.25em; height: 1em; 167 text-align: center; 168 background: transparent url('img/placeholder.svg') center no-repeat; 169 background-size: 1em; 170 } 171 details ul > li > details > summary > span > span.icon { 172 width: 1.25em; 173 overflow: hidden; 174 } 175 details ul > li > details > summary > span > span[title] { 176 cursor: help; 177 } 178 179 dl.visitor_details { 180 & { 181 display: grid; 182 grid-template-columns: min-content auto; 183 border-left: transparent none 0; 184 } 185 dt { 186 grid-column: 1; 187 white-space: nowrap; 188 } 189 dd { 190 grid-column: 2; 191 display: inline-block; 192 background-color: transparent; 193 } 194 dd.pages { 195 & { 196 } 197 ul { 198 li { 199 & { 200 display: flex; 201 justify-content: space-between; 202 align-items: center; 203 } 204 } 205 } 206 } 207 } 208 dd.has_icon::before { 209 content: ''; 210 display: inline-block; 211 width: 1.25em; height: 1.25em; 212 background: transparent url('img/placeholder.svg') center no-repeat; 213 background-size: 1em; 214 } 215 216 /* bot icons */ 217 span.bot::before, dd.bot::before { background-image: url('img/robot.svg') } 218 span.bot_bingbot::before, dd.bot_bingbot::before { background-image: url('img/bing.svg') } 219 span.bot_googlebot::before, dd.bot_googlebot::before, 220 span.bot_googleads::before, dd.bot_googleads::before, 221 span.bot_googleapi::before, dd.bot_googleapi::before { background-image: url('img/google.svg') } 222 span.bot_applebot::before, dd.bot_applebot::before { background-image: url('img/apple.svg') } 223 span.bot_openai::before, dd.bot_openai::before { background-image: url('img/openai.svg') } 224 span.bot_metabots::before, dd.bot_metabots::before { background-image: url('img/meta.svg') } 225 span.bot_yandexbots::before, dd.bot_yandexbots::before { background-image: url('img/yandex.svg') } 226 span.bot_seznambot::before, dd.bot_seznambot::before { background-image: url('img/seznam.svg') } 227 228 /* user info */ 229 span.user_known::before { background-image: url('img/user.svg') } 230 231 /* platform icons */ 232 span.platform_macos::before, dd.platform_macos::before { background-image: url('img/apple.svg') } 233 span.platform_win10::before, dd.platform_win10::before { background-image: url('img/win11.svg') } 234 span.platform_linux::before, dd.platform_linux::before { background-image: url('img/linux.svg') } 235 span.platform_ios::before, dd.platform_ios::before { background-image: url('img/ios.svg') } 236 span.platform_android::before, dd.platform_android::before { background-image: url('img/android.svg') } 237 span.platform_winold::before, dd.platform_winold::before { background-image: url('img/winold.png') } 238 span.platform_tizen::before, dd.platform_tizen::before { background-image: url('img/tizen.png') } 239 span.platform_hmos::before, dd.platform_hmos::before { background-image: url('img/hmos.svg') } 240 span.platform_chromium::before, dd.platform_chromium::before { background-image: url('img/chromium.svg') } 241 span.platform_bsd::before, dd.platform_bsd::before { background-image: url('img/freebsd.png') } 242 243 /* browser icons */ 244 span.client_opera::before, dd.client_opera::before { background-image: url('img/opera.svg') } 245 span.client_msie::before, dd.client_msie::before { background-image: url('img/msie.svg') } 246 span.client_brave::before, dd.client_brave::before { background-image: url('img/brave.svg') } 247 span.client_msedge::before, dd.client_msedge::before { background-image: url('img/msedge.svg') } 248 span.client_chrome::before, dd.client_chrome::before { background-image: url('img/chrome.svg') } 249 span.client_chromeold::before, dd.client_chromeold::before { background-image: url('img/chromeold.svg') } 250 span.client_safari::before, dd.client_safari::before { background-image: url('img/safari.png') } 251 span.client_ddg::before, dd.client_ddg::before { background-image: url('img/ddg.svg') } 252 span.client_firefox::before, dd.client_firefox::before { background-image: url('img/firefox.png') } 253 span.client_samsung::before, dd.client_samsung::before { background-image: url('img/samsung.svg') } 254 span.client_uc::before, dd.client_uc::before { background-image: url('img/uc.svg') } 255 span.client_huawei::before, dd.client_huawei::before { background-image: url('img/huawei.png') } 256 span.client_vivaldi::before, dd.client_vivaldi::before { background-image: url('img/vivaldi.png') } 257 258 /* ip address type */ 259 span.ip6::before, dd.ip6::before { background-image: url('img/ip6.svg') } 260 span.ip4::before, dd.ip4::before { background-image: url('img/ip4.svg') } 261 span.ip0::before, dd.ip0::before { background-image: url('img/localhost.svg') } 262 263 /* user agent */ 264 span.agent::before { background-image: url('img/info.svg') } 265 266 /* pageviews */ 267 span.pageviews { 268 border: #999 solid 1px; 269 padding: 0 2px; 270 font-size: smaller; 271 border-radius: .25em; 272 } 273 span.pageviews::before { background-image: url('img/page.svg') } 274 275 } 276 277 /* item footer */ 278 footer { 279 & { 280 display: flex; 281 align-items: center; 282 column-gap: .25rem; 283 background-color: #F0F0F0; 284 color: #333; 285 border: #CCC solid 1px; 286 border-radius: 0 0 .5rem .5rem; 287 margin: 1pt 0 0 0; 288 padding: .25rem .5rem; 289 line-height: 1.25; 290 } 291 & > svg { 292 width: 1.25em; height: 1.25em; 293 fill: #333; 294 flex-shrink: 0; 295 } 296 & > span { 297 font-size: .96rem; 298 line-height: 1.25rem; 299 } 300 & > span.error { 301 color: #961D1B; 302 font-weight: bold; 303 } 304 } 305 } 306} 307 308/* dark mode overrides */ 309@media (prefers-color-scheme: dark) { 310 body.darkmode.mode_admin #botmon__admin { 311 312 #botmon__today { 313 314 header { 315 background-color: #0c0c0d; 316 color: #adadb3; 317 border-color: #666; 318 } 319 320 /* list formatting */ 321 dl { 322 & { 323 border-left-color: #777; 324 } 325 dt { 326 color: #adadb3; 327 } 328 dd:nth-child(even) { 329 background-color: #333337; 330 } 331 } 332 333 #botmon__today__content > details { 334 summary { 335 & { 336 background-color: #0c0c0d; 337 color: #adadb3; 338 border-color: #666; 339 } 340 &::after { 341 color: #76b0fd; 342 } 343 } 344 & > div { 345 border-color: #666; 346 } 347 } 348 349 /* visitor lists: */ 350 #botmon__today__visitorlists { 351 details ul > li { 352 color: #aeaeae; 353 } 354 } 355 356 footer { 357 & { 358 background-color: #0c0c0d; 359 color: #adadb3; 360 border-color: #CCC; 361 } 362 & > svg { 363 fill: #777; 364 } 365 & > span.error { 366 color: #961D1B; 367 } 368 } 369 } 370 } 371} 372/* layout overrides for narrow screens: */ 373@media (max-width: 670px) { 374 #botmon__admin { 375 .grid-2-columns, 376 .grid-3-columns { 377 grid-template-columns: 100%; 378 } 379 } 380} 381
