logviewer/static/css/layout.css

   1 :root {\r
   2     --layout-link-color: #000;\r
   3     --layout-link-hover-color: #333;\r
   4     --layout-input-text-color: #000;\r
   5     --layout-offset-background-color: #FFF;\r
   6         --layout-offset-background-light-color: #e9e9e9;\r
   7 }\r
   8 \r
   9 [data-theme="dark"] {\r
  10     --layout-link-color: #FFF;\r
  11     --layout-link-hover-color: #BBB;\r
  12     --layout-input-text-color: #FFF;\r
  13     --layout-input-background-color: #444;\r
  14     --layout-offset-background-color: #444;\r
  15         --layout-offset-background-light-color: #666;\r
  16 }\r
  17 \r
  18 /*\r
  19 -----------------------------------------------\r
  20 Grey Box Method - Layout CSS\r
  21 ----------------------------------------------- */\r
  22 \r
  23 body {\r
  24     font: 10pt "Helvetica Neue", Arial, Helvetica, sans-serif;\r
  25         font-size: 11px;\r
  26         padding: 0;\r
  27 }\r
  28 \r
  29 \r
  30 /* anchors\r
  31 ----------------------------------------------- */\r
  32 a {\r
  33         color: var(--layout-link-color);\r
  34         font-weight:bold;\r
  35         text-decoration: none;\r
  36 }\r
  37 a:hover {\r
  38         color: var(--layout-link-hover-color);\r
  39 }\r
  40 \r
  41 /* input\r
  42 ----------------------------------------------- */\r
  43 input { \r
  44     color: var(--layout-input-text-color);\r
  45     background-color: var(--layout-input-background-color);\r
  46 }\r
  47 \r
  48 \r
  49 /* 960 grid system container background\r
  50 ----------------------------------------------- */\r
  51 .container_12,\r
  52 .container_16 {\r
  53 }\r
  54 \r
  55 \r
  56 /* headings\r
  57 ----------------------------------------------- */\r
  58 h1, h2, h3, h4, h5, h6 {line-height:1.2em; margin-bottom:.3em;}\r
  59 h2 {margin-top:1em;}\r
  60 h5 {font-size:1.2em;}\r
  61 h6 {font-size:1em; text-transform:uppercase;}\r
  62 \r
  63 \r
  64 h1 a {\r
  65         font-weight:normal;\r
  66 }\r
  67 \r
  68 \r
  69 /* branding\r
  70 ----------------------------------------------- */\r
  71 h1#branding {\r
  72         font-weight:normal;\r
  73         font-size:3em;\r
  74         text-align:left;\r
  75         background:#aaa;\r
  76         padding:.7em 1em;\r
  77         margin-bottom:0;\r
  78 }\r
  79 \r
  80 \r
  81 /* page heading\r
  82 ----------------------------------------------- */\r
  83 h2#page-heading {\r
  84         font-weight:normal;\r
  85         padding:.5em;\r
  86         margin:0 0 10px 0;\r
  87         border-bottom:1px solid #ccc;\r
  88 }\r
  89 \r
  90 \r
  91 /* boxes\r
  92 ----------------------------------------------- */\r
  93 .box {\r
  94         background:#ddd;\r
  95         margin-bottom:20px;\r
  96         padding:10px 10px 1px 10px;\r
  97 }\r
  98 .box h2 {\r
  99         font-size:1em;\r
 100         font-weight:normal;\r
 101         text-transform:uppercase;\r
 102         color:#fff;\r
 103         background:#333;\r
 104         margin:-10px -10px 0 -10px;\r
 105         padding:6px 12px;\r
 106 }\r
 107 .box h2 a,\r
 108 .box h2 a.visible {\r
 109         color:#fff;\r
 110         background:#333 url("images/switch_minus.gif") 97% 50% no-repeat;\r
 111         display:block;\r
 112         padding:6px 12px;\r
 113         margin:-6px -12px;\r
 114         border:none;\r
 115 }\r
 116 .grid_4 .box h2 a {\r
 117         background-position: 97% 50%;\r
 118 }\r
 119 .grid_5 .box h2 a {\r
 120         background-position: 98% 50%;\r
 121 }\r
 122 .grid_12 .box h2 a {\r
 123         background-position: 99% 50%;\r
 124 }\r
 125 \r
 126 \r
 127 .box h2 a.hidden,\r
 128 .box h2 a.hidden:hover {\r
 129         background-image: url("images/switch_plus.gif");\r
 130 }\r
 131 .box h2 a:hover {\r
 132         background-color:#111;\r
 133 }\r
 134 .block {\r
 135         padding-top:10px;\r
 136 }\r
 137 div.menu {\r
 138         padding:0;\r
 139 }\r
 140 div.menu h2 {\r
 141         margin:0;\r
 142 }\r
 143 div.menu .block {\r
 144         padding-top:0;\r
 145 }\r
 146 \r
 147 \r
 148 /* paragraphs, quotes and lists\r
 149 ----------------------------------------------- */\r
 150 p {\r
 151         margin-bottom:1em;\r
 152 }\r
 153 blockquote {\r
 154         xfont-family: Georgia, 'Times New Roman', serif;\r
 155         font-size:1.2em;\r
 156         padding-left:1em;\r
 157         border-left:4px solid #ccc;\r
 158 }\r
 159 blockquote cite {\r
 160         font-size:.9em;\r
 161 }\r
 162 ul, ol {\r
 163         padding-top:0;\r
 164 }\r
 165 \r
 166 \r
 167 /* menus\r
 168 ----------------------------------------------- */\r
 169 ul.menu {\r
 170         list-style:none;\r
 171         border-top:1px solid #bbb;\r
 172 }\r
 173 ul.menu li {\r
 174         margin:0;\r
 175 }\r
 176 ul.menu li a {\r
 177         display:block;\r
 178         padding:4px 10px;\r
 179         border-bottom:1px solid #ccc;\r
 180 }\r
 181 ul.menu li a:hover {\r
 182         background:#eee;\r
 183 }\r
 184 ul.menu li a:active {\r
 185         background:#ccc;\r
 186 }\r
 187 \r
 188 \r
 189 /* submenus\r
 190 ----------------------------------------------- */\r
 191 ul.menu ul {\r
 192         list-style:none;\r
 193         margin:0;\r
 194 }\r
 195 ul.menu ul li a {\r
 196         padding-left:30px;\r
 197 }\r
 198 \r
 199 \r
 200 /* section menus\r
 201 ----------------------------------------------- */\r
 202 ul.section {\r
 203         border-top:0;\r
 204         margin-bottom:0;\r
 205 }\r
 206 ul.section li {\r
 207         text-transform:uppercase;\r
 208 }\r
 209 ul.section li a {\r
 210         xbackground:#bbb;\r
 211 }\r
 212 ul.section li a:hover {\r
 213         xbackground:#aaa;\r
 214 }\r
 215 ul.section li a:active {\r
 216         color:#fff;\r
 217         xbackground:#666;\r
 218 }\r
 219 ul.section li li a {\r
 220         background:#ddd;\r
 221         border-bottom:1px solid #eee;\r
 222 }\r
 223 ul.section li li a:hover {\r
 224         background:#ccc;\r
 225 }\r
 226 ul.section li li a:active {\r
 227         color:#000;\r
 228         xbackground:#fff;\r
 229 }\r
 230 ul.section ul li {\r
 231         text-transform:none;\r
 232 }\r
 233 ul.section ul.current li a {\r
 234         xbackground:#eee;\r
 235         border-bottom:1px solid #fff;\r
 236 }\r
 237 ul.section ul.current li a:hover {\r
 238         xbackground:#ddd;\r
 239 }\r
 240 ul.section ul.current li a:active {\r
 241         xbackground:#fff;\r
 242 }\r
 243 ul.section li a.current {\r
 244         color:#fff;\r
 245         xbackground:#666;\r
 246 }\r
 247 ul.section li a.current:hover {\r
 248         background:#555;\r
 249 }\r
 250 ul.section li a.current:active {\r
 251         background:#444;\r
 252 }\r
 253 ul.section li a.active {\r
 254         background:#fff;\r
 255         cursor:default;\r
 256 }\r
 257 ul.section li.current > a.active,\r
 258 ul.section li.current > a.active:hover {\r
 259         color:#fff;\r
 260         background:#666;\r
 261         cursor:default;\r
 262 }\r
 263 \r
 264 \r
 265 /* table\r
 266 ----------------------------------------------- */\r
 267 table {\r
 268         width:100%;\r
 269         border:1px solid #bbb;\r
 270         margin-bottom:10px;\r
 271 }\r
 272 col.colC {\r
 273         width:8em;\r
 274 }\r
 275 th, td {\r
 276         padding:.2em 1em;\r
 277         text-align:left;\r
 278 }\r
 279 thead th {\r
 280         border-bottom:2px solid #888;\r
 281         background:#bbb;\r
 282         padding:.4em 1em .2em;\r
 283 }\r
 284 thead th.table-head {\r
 285         font-size:1em;\r
 286         font-weight:normal;\r
 287         text-transform:uppercase;\r
 288         color:#fff;\r
 289         background:#555;\r
 290         border:1px solid #555;\r
 291 }\r
 292 tbody th,\r
 293 tbody td {\r
 294         border-top:1px solid #bbb;\r
 295         border-bottom:1px solid #bbb;\r
 296         xbackground:#eee;\r
 297 }\r
 298 tbody tr.odd th,\r
 299 tbody tr.odd td {\r
 300         xbackground:#fff;\r
 301 }\r
 302 tfoot th,\r
 303 tfoot td {\r
 304         border-top:2px solid #666;\r
 305         background:#555;\r
 306 }\r
 307 tfoot tr.total th,\r
 308 tfoot tr.total td {\r
 309         border-top:6px double #666;\r
 310 }\r
 311 tfoot tr.total th {\r
 312         text-transform:uppercase;\r
 313 }\r
 314 th.currency,\r
 315 td.currency {\r
 316         text-align:right;\r
 317 }\r
 318 \r
 319 \r
 320 /* forms\r
 321 ----------------------------------------------- */\r
 322 form {\r
 323         overflow:hidden;\r
 324 }\r
 325 fieldset {\r
 326         border:1px solid #bbb;\r
 327         padding:10px;\r
 328         position:relative;\r
 329         background: var(--layout-offset-background-light-color);\r
 330         margin-bottom:10px;\r
 331 }\r
 332 legend {\r
 333         font-size:1.1em;\r
 334         padding:.4em .8em;\r
 335         background: var(--layout-offset-background-color);\r
 336         border:1px solid #bbb;\r
 337 }\r
 338 fieldset.login p {\r
 339         margin-bottom:1em;\r
 340         margin-top:0pt;\r
 341 }\r
 342 fieldset p label {\r
 343         width:98%;\r
 344 }\r
 345 fieldset p input {\r
 346         width:98%;\r
 347 }\r
 348 fieldset p select {\r
 349         width:99%;\r
 350 }\r
 351 fieldset.login p label {\r
 352         float:left;\r
 353         line-height:2em;\r
 354         margin-right:3%;\r
 355         text-align:right;\r
 356         width:32%;\r
 357 }\r
 358 fieldset.login p input {\r
 359         width:60%;\r
 360 }\r
 361 fieldset.login input.button {\r
 362         margin-left:35%;\r
 363 }\r
 364 form p.notice {\r
 365         font-weight:bold;\r
 366 }\r
 367 input.search.text {\r
 368         width:66%;\r
 369 }\r
 370 input.search.button {\r
 371         width:28%;\r
 372         margin-left:2%;\r
 373 }\r
 374 \r
 375 \r
 376 /* articles\r
 377 ----------------------------------------------- */\r
 378 .articles {\r
 379         padding:0;\r
 380 }\r
 381 .articles h2 {\r
 382         margin:0;\r
 383 }\r
 384 #articles {\r
 385         padding-top:0;\r
 386 }\r
 387 .article {\r
 388         border-top:1px solid #666;\r
 389         padding-top:.5em;\r
 390     min-height:125px;\r
 391 }\r
 392 .box .article {\r
 393         border-top:3px solid #fff;\r
 394         padding:13px 10px 0 10px;\r
 395 }\r
 396 .article h2 {\r
 397         font-size:2em;\r
 398         font-weight:normal;\r
 399         text-transform:none;\r
 400         color:#333;\r
 401         background:transparent;\r
 402         padding:0;\r
 403         margin:0;\r
 404         border:none;\r
 405 }\r
 406 .article h3 {\r
 407         margin-bottom:.2em;\r
 408         font-size:1.6em;\r
 409 }\r
 410 .box .first {\r
 411         border-top:none;\r
 412 }\r
 413 .article h4 {\r
 414         font-size:1.2em;\r
 415         text-transform:uppercase;\r
 416         margin-bottom:.5em;\r
 417 }\r
 418 .article a.image {\r
 419         float:left; \r
 420         margin:3px 10px 3px 0; \r
 421         padding:4px;\r
 422         border:1px solid #bbb;\r
 423         background:#fff;\r
 424 }\r
 425 .article a.image:hover {\r
 426         border:1px solid #666;\r
 427 }\r
 428 .article a.image img {\r
 429         float:left; \r
 430 }\r
 431 .article p.meta {\r
 432         color:#666;\r
 433         border-top:1px dotted #999;\r
 434         border-bottom:1px dotted #999;\r
 435         padding:.3em 0;\r
 436         margin-bottom:.8em;\r
 437 }\r
 438 \r
 439 \r
 440 /* site information\r
 441 ----------------------------------------------- */\r
 442 #site_info .box {\r
 443         color:#ccc;\r
 444         background:#666;\r
 445         margin-bottom:10px;\r
 446 }\r
 447 #site_info a {\r
 448         color:#fff;\r
 449 }\r
 450 #site_info a:hover {\r
 451         color:#000;\r
 452 }\r
 453 \r
 454 \r
 455 /* AJAX sliding shelf\r
 456 ----------------------------------------------- */\r
 457 #loading {float:right; margin-right:14px; margin-top:-2px;}\r
 458 .block {padding-bottom:1px;}\r
 459 \r
 460 \r
 461 /* Accordian\r
 462 ----------------------------------------------- */\r
 463 .toggler {\r
 464         color: #222;\r
 465         margin: 0;\r
 466         padding: 2px 5px;\r
 467         background: #eee;\r
 468         border-bottom: 1px solid #ddd;\r
 469         border-right: 1px solid #ddd;\r
 470         border-top: 1px solid #f5f5f5;\r
 471         border-left: 1px solid #f5f5f5;\r
 472         font-size:1.1em;\r
 473         font-weight: normal;\r
 474 }\r
 475 .element h4 {\r
 476         margin: 0;\r
 477         padding:4px;\r
 478         line-height:1.2em;\r
 479 }\r
 480 .element p {\r
 481         margin: 0;\r
 482         padding: 4px;\r
 483 }\r
 484 .float-right {\r
 485         padding:10px 20px;\r
 486         float:right;\r
 487 }\r
 488 \r
 489 #accordian-block {\r
 490         padding-bottom:10px;\r
 491 }\r
 492 \r
 493 \r
 494 /* Mootools Kwicks\r
 495 ----------------------------------------------- */\r
 496 #kwick-box { \r
 497         padding:0;\r
 498         overflow:hidden;\r
 499 }\r
 500 #kwick-box h2 { \r
 501         margin:0;\r
 502 }\r
 503 #kwick {\r
 504         position: relative;\r
 505 }\r
 506 #kwick .kwicks {\r
 507         display: block;\r
 508         background: #999;\r
 509         height: 120px;\r
 510         list-style:none;\r
 511         margin:0;\r
 512         overflow:hidden;\r
 513 }\r
 514 #kwick li {\r
 515         float: left;\r
 516         margin:0;\r
 517         padding:0;\r
 518 }\r
 519 #kwick .kwick {\r
 520         display: block;\r
 521         cursor: pointer;\r
 522         overflow: hidden;\r
 523         height: 100px;\r
 524         width: 215px;\r
 525         padding: 10px;\r
 526         background: #fff;\r
 527 }\r
 528 #kwick .kwick span {\r
 529         color:#fff;\r
 530 }\r
 531 #kwick .one {\r
 532         background: #666;\r
 533 }\r
 534 #kwick .two {\r
 535         background: #777;\r
 536 }\r
 537 #kwick .three {\r
 538         background: #888;\r
 539 }\r
 540 #kwick .four {\r
 541         background: #999;\r
 542 }\r