web/htdocs/themes/classic/scss/_snapins.scss

   1 /*
   2 +------------------------------------------------------------------+
   3 |             ____ _               _        __  __ _  __           |
   4 |            / ___| |__   ___  ___| | __   |  \/  | |/ /           |
   5 |           | |   | '_ \ / _ \/ __| |/ /   | |\/| | ' /            |
   6 |           | |___| | | |  __/ (__|   <    | |  | | . \            |
   7 |            \____|_| |_|\___|\___|_|\_\___|_|  |_|_|\_\           |
   8 |                                                                  |
   9 | Copyright Mathias Kettner 2012             mk@mathias-kettner.de |
  10 +------------------------------------------------------------------+
  11
  12 This file is part of Check_MK.
  13 The official homepage is at http://mathias-kettner.de/check_mk.
  14
  15 check_mk is free software;  you can redistribute it and/or modify it
  16 under the  terms of the  GNU General Public License  as published by
  17 the Free Software Foundation in version 2.  check_mk is  distributed
  18 in the hope that it will be useful, but WITHOUT ANY WARRANTY;  with-
  19 out even the implied warranty of  MERCHANTABILITY  or  FITNESS FOR A
  20 PARTICULAR PURPOSE. See the  GNU General Public License for more de-
  21 ails.  You should have  received  a copy of the  GNU  General Public
  22 License along with GNU Make; see the file  COPYING.  If  not,  write
  23 to the Free Software Foundation, Inc., 51 Franklin St,  Fifth Floor,
  24 Boston, MA 02110-1301 USA.
  25 */
  26
  27 /*
  28  * Bookmarks snapin
  29  */
  30 div.bookmark {
  31   width: 230px;
  32   max-width: 230px;
  33   overflow: hidden;
  34   color: #fff;
  35   text-overflow: ellipsis;
  36   -o-text-overflow: ellipsis;
  37   white-space: nowrap;
  38 }
  39
  40 /*
  41  * Custom links snapin
  42  */
  43 #snapin_custom_links {
  44   div.sublist {
  45     padding-left: 10px;
  46   }
  47
  48   img {
  49     margin-right: 5px;
  50
  51     &.icon {
  52       width: 16px;
  53       height: 16px;
  54     }
  55   }
  56 }
  57
  58 /*
  59  * Host matrix snapin
  60  */
  61 table.hostmatrix {
  62   border-spacing: 0;
  63
  64   tr {
  65     padding: 0;
  66     border-spacing: 0;
  67   }
  68
  69   a {
  70     display: block;
  71     width: 100%;
  72     height: 100%;
  73     line-height: 100%;
  74   }
  75
  76   td {
  77     padding: 0;
  78     border: 1px solid #123a4a;
  79     border-spacing: 0;
  80   }
  81 }
  82
  83 /*
  84  * Hosts snapin
  85  */
  86 .snapin table.allhosts {
  87   width: 100%;
  88
  89   td {
  90     width: 50%;
  91     padding: 0;
  92   }
  93 }
  94
  95 /*
  96  * Master control snapin
  97  */
  98 div.snapin table.master_control {
  99   width: 100%;
 100   margin: 0;
 101   border-spacing: 0;
 102
 103   td {
 104     div.toggle_switch {
 105       float: right;
 106     }
 107
 108     &.left {
 109       text-align: left;
 110
 111       a {
 112         font-size: 11px;
 113         font-weight: normal;
 114         text-align: left;
 115       }
 116     }
 117
 118     /* TODO: Reproduce this html element */
 119     img.iconbutton {
 120       width: 60px;
 121       height: 16px;
 122     }
 123   }
 124 }
 125
 126 /*
 127  * Event console performance snapin (mkeventd)
 128  */
 129 table.mkeventd_performance {
 130   width: 228px;
 131   background-color: rgba(0, 0, 0, 0.1);
 132   border-color: rgba(0, 0, 0, 0.3) rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.3) rgba(0, 0,   0, 0.3);
 133   border-style: solid;
 134   border-width: 1.5px;
 135   border-radius: 2px;
 136
 137   td {
 138     padding: 0 2px;
 139     font-size: 11px;
 140
 141     &:nth-of-type(2) {
 142       padding: 0;
 143       padding-right: 1px;
 144       font-weight: bold;
 145       text-align: right;
 146       white-space: nowrap;
 147     }
 148   }
 149 }
 150
 151 #snapin_mkeventd_performance select {
 152   margin-bottom: 2px;
 153 }
 154
 155 /*
 156  * NagVis maps snapin
 157  */
 158 div.state1 {
 159   &.statea, &.stated {
 160     border-color: #ff0;
 161   }
 162 }
 163
 164 div.state2 {
 165   &.statea, &.stated {
 166     border-color: #f00;
 167   }
 168 }
 169
 170 div.statea, div.stated {
 171   background-color: #0b3;
 172 }
 173
 174 /*
 175  * Performance snapin
 176  */
 177 #snapin_performance select {
 178   margin-bottom: 2px;
 179 }
 180
 181 table.performance {
 182   width: 228px;
 183   background-color: rgba(0, 0, 0, 0.1);
 184   border-color: rgba(0, 0, 0, 0.3) rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.3) rgba(0, 0, 0, 0.3);
 185   border-style: solid;
 186   border-width: 1.5px;
 187   border-radius: 2px;
 188
 189   td {
 190     padding: 0 2px;
 191     font-size: 11px;
 192
 193     &.right {
 194       padding: 0;
 195       padding-right: 1px;
 196       text-align: right;
 197       white-space: nowrap;
 198     }
 199   }
 200 }
 201
 202 /*
 203  * Server time snapin
 204  */
 205 div.time {
 206   width: 228px;
 207   font-size: 24px;
 208   font-weight: bold;
 209   color: #aff;
 210   text-align: center;
 211   background-color: #588;
 212   /* The border needs to be substracted from the width */
 213   border: 1px solid #8cc;
 214   -moz-border-radius: 10px;
 215 }
 216
 217 /*
 218  * Site status snapin
 219  */
 220 table.sitestate {
 221   width: 230px;
 222
 223   td {
 224     padding: 1px 0;
 225     text-align: right;
 226
 227     &.left {
 228       text-align: left;
 229
 230       a {
 231         font-weight: normal;
 232         text-align: left;
 233       }
 234     }
 235
 236     &.state {
 237       width: 60px;
 238       font-size: 9px;
 239     }
 240   }
 241 }
 242
 243 /* TODO: Reproduce this html element */
 244 div.snapin table.sitestate td img.iconbutton {
 245   width: 60px;
 246   height: 16px;
 247 }
 248
 249 /*
 250  * Speedometer snapin
 251  */
 252 div.speedometer {
 253   position: relative;
 254   top: 0;
 255   left: 0;
 256   height: 223px;
 257 }
 258
 259 img#speedometerbg, canvas#speedometer {
 260   position: absolute;
 261   top: 0;
 262   left: 0;
 263 }
 264
 265 /*
 266  * Tactical overview snapin
 267  */
 268 table.tacticaloverview {
 269   width: 230px;
 270   margin-top: -7px;
 271   border-collapse: separate;
 272
 273   th {
 274     padding: 0;
 275     padding-top: 2px;
 276     font-size: 11px;
 277     font-weight: normal;
 278     line-height: 9px;
 279     color: #123a4a;
 280     text-align: left;
 281     vertical-align: bottom;
 282   }
 283
 284   td {
 285     height: 14px;
 286     padding: 0;
 287     text-align: right;
 288     background-color: #6da1b8;
 289
 290     &.prob {
 291       box-shadow: 0 0 4px #ffd000;
 292     }
 293
 294     &.col3 {
 295       width: 33%;
 296     }
 297
 298     &.col4 {
 299       width: 25%;
 300     }
 301   }
 302
 303   a {
 304     display: block;
 305     margin-right: 2px;
 306   }
 307 }
 308
 309 div.tacticalalert {
 310   height: 25px;
 311   font-size: 12px;
 312   line-height: 25px;
 313   text-align: center;
 314   background-color: #f50;
 315   box-shadow: 0 0 4px #ffd000;
 316 }
 317
 318 div.spacertop {
 319   padding-top: 5px;
 320 }
 321
 322 #snapin_tactical_overview img {
 323   position: relative;
 324   top: -1px;
 325   width: 15px;
 326   height: auto;
 327 }
 328
 329 /*
 330  * Virtual host tree snapin
 331  */
 332 #snapin_tag_tree {
 333   position: relative;
 334   top: 0;
 335   left: 0;
 336
 337   select {
 338     float: right;
 339     margin-top: -2px;
 340     margin-bottom: 2px;
 341     font-size: 11px;
 342   }
 343
 344   /* TODO: Reproduce this html element */
 345   form img.iconbutton {
 346     display: inline-box;
 347     float: right;
 348     width: 16px;
 349     height: 16px;
 350   }
 351
 352   div.tag_tree {
 353     clear: both;
 354   }
 355
 356   div.statebullet {
 357     position: relative;
 358     top: 3px;
 359     left: 1px;
 360     display: inline-block;
 361     float: none;
 362     width: 8px;
 363     height: 8px;
 364     margin-right: 0;
 365     box-shadow: 0 0 0.7px #284850;
 366   }
 367
 368   ul > div.statebullet.leaf {
 369     margin-left: 16px;
 370   }
 371
 372   b {
 373     font-weight: normal;
 374   }
 375
 376   p {
 377     margin: 0;
 378
 379     a {
 380       text-decoration: underline;
 381
 382       &:hover {
 383         text-decoration: none;
 384       }
 385     }
 386   }
 387 }
 388
 389 /*
 390  * Admin mini snapin (WATO)
 391  */
 392 #snapin_admin_mini {
 393   padding-top: 6px;
 394   clear: right;
 395
 396   img {
 397     position: relative;
 398     left: 3px;
 399     width: 18px;
 400     height: 18px;
 401     padding: 0;
 402     margin-right: 3.9px;
 403     margin-bottom: 4px;
 404   }
 405
 406   div.footnotelink {
 407     float: right;
 408   }
 409
 410   div.clear {
 411     clear: right;
 412   }
 413 }
 414
 415 /*
 416  * WATO folder tree snapin
 417  */
 418 #snapin_wato_foldertree table {
 419   width: 100%;
 420   border-spacing: 0;
 421
 422   td {
 423     vertical-align: baseline;
 424
 425     &.label {
 426       width: 1px;
 427     }
 428   }
 429 }
 430
 431 /*
 432  * Wiki snapin
 433  */
 434 #snapin_container_wiki div.content {
 435     font-weight: bold;
 436     color: white;
 437
 438     p {
 439         font-weight: normal;
 440     }
 441 }
 442
 443 #wiki_navigation {
 444     text-align: left;
 445 }
 446
 447 #wiki_search {
 448     width: 232px;
 449     padding: 0;
 450
 451     img.iconbutton {
 452         width: 33px;
 453         height: 26px;
 454         margin-top: -25px;
 455         left: 196px;
 456         float: left;
 457         position: relative;
 458         z-index:100;
 459     }
 460
 461     input {
 462         margin:  0;
 463         padding: 0px 5px;
 464         font-size: 8pt;
 465         width: 194px;
 466         height: 25px;
 467         background-image: url(images/quicksearch_field_bg.png);
 468         background-repeat: no-repeat;
 469         -moz-border-radius: 0px;
 470         border-style: none;
 471         float: left;
 472     }
 473 }
 474
 475 #wiki_side_clear {
 476     clear: both;
 477 }
 478
 479 /*
 480  * Quicksearch snapin
 481  */
 482 #mk_side_search {
 483     width: 232px;
 484     padding: 0;
 485
 486     img.iconbutton {
 487         width: 33px;
 488         height: 26px;
 489         margin-top: -25px;
 490         left: 196px;
 491         float: left;
 492         position: relative;
 493         z-index:100;
 494         opacity: 1;
 495         filter: alpha(opacity=100); /* For IE8 and earlier */
 496
 497         &:hover {
 498             filter: grayscale(20%);
 499             -webkit-filter: grayscale(20%);
 500             -moz-filter: grayscale(20%);
 501             -ms-filter: grayscale(20%);
 502             -o-filter: grayscale(20%);
 503         }
 504     }
 505
 506     input {
 507         margin:  0;
 508         padding: 0px 5px;
 509         font-size: 8pt;
 510         width: 194px;
 511         height: 25px;
 512         background-image: url(images/quicksearch_field_bg.png);
 513         background-repeat: no-repeat;
 514         -moz-border-radius: 0px;
 515         border-style: none;
 516         float: left;
 517     }
 518
 519     div.topic {
 520         font-size: 125%;
 521         margin-top:  3px;
 522         margin-left:  2px;
 523     }
 524 }
 525
 526 #mk_side_clear {
 527     clear: both;
 528 }
 529
 530 #mk_search_results {
 531     position: relative;
 532     float:left;
 533     border: 1px solid white;
 534     background-color: #DFDFDF;
 535     color: #000;
 536     font-size: 80%;
 537     width: 223px;
 538
 539     a {
 540         display: block;
 541         color: #000;
 542         text-decoration: none;
 543         text-align: left;
 544         padding-left: 5px;
 545         width: 217px;
 546
 547         &:hover, &.active {
 548             background-color: #BFBFBF;
 549         }
 550     }
 551
 552     div.error {
 553         padding: 2px;
 554         font-size: 9pt;
 555     }
 556
 557     div.warning {
 558         padding: 2px;
 559         font-size: 9pt;
 560     }
 561 }