web/htdocs/themes/facelift/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 .hostmatrix td.state1 a,
  84 /* TODO: Reproduce these two html elements */
  85 .hostmatrix td.state1 body.main .popup_menu span,
  86 body.main .popup_menu .hostmatrix td.state1 span {
  87   background-color: $theme-color-main;
  88 }
  89
  90 .hostmatrix td.state0 a,
  91 /* TODO: Reproduce these two html elements */
  92 .hostmatrix td.state0 body.main .popup_menu span,
  93 body.main .popup_menu .hostmatrix td.state0 span {
  94   background-color: $theme-color-nuance-12;
  95 }
  96
  97 /*
  98  * Hosts snapin
  99  */
 100 .snapin table.allhosts {
 101   width: 100%;
 102
 103   td {
 104     width: 50%;
 105     padding: 0;
 106   }
 107
 108   .statebullet {
 109     margin: 8px 4px 8px 0;
 110   }
 111 }
 112
 113 /*
 114  * Master control snapin
 115  */
 116 div.snapin table.master_control {
 117   width: 100%;
 118   margin: 0;
 119   border-spacing: 8px;
 120
 121   td {
 122     div.toggle_switch {
 123       float: right;
 124     }
 125
 126     &.left {
 127       display: inline-block;
 128       font-size: $theme-font-size-main;
 129       font-weight: $theme-font-weight-global;
 130       letter-spacing: $theme-letter-spacing-table;
 131       color: $theme-color-nuance-9;
 132       text-align: left;
 133
 134       a {
 135         font-size: 11px;
 136         font-weight: normal;
 137         text-align: left;
 138       }
 139     }
 140
 141     /* TODO: Reproduce this html element */
 142     img.iconbutton {
 143       width: 60px;
 144       height: 16px;
 145     }
 146   }
 147 }
 148
 149 /* Styles shared/inherited by different performance tables */
 150 %performance-table-shared {
 151   padding: 8px;
 152   background-color: $theme-color-table-background-dark;
 153   border: 1px solid $theme-color-table-border-dark;
 154   border-spacing: 4px;
 155   box-sizing: border-box;
 156
 157   td {
 158     font-weight: $theme-font-weight-global;
 159     letter-spacing: $theme-letter-spacing-table;
 160   }
 161 }
 162
 163 /*
 164  * Event console performance snapin (mkeventd)
 165  */
 166 table.mkeventd_performance {
 167   @extend %performance-table-shared;
 168   width: $theme-snapin-width - 2px;
 169   border-radius: 2px;
 170
 171   td {
 172     padding: 0 2px;
 173     font-size: 11px;
 174
 175     &:nth-of-type(2) {
 176       padding: 0;
 177       padding-right: 1px;
 178       font-weight: bold;
 179       text-align: right;
 180       white-space: nowrap;
 181     }
 182   }
 183 }
 184
 185 /* TODO: Reproduce this html element */
 186 #snapin_mkeventd_performance select {
 187   margin-bottom: 2px;
 188 }
 189
 190 /*
 191  * NagVis maps snapin
 192  */
 193 div.state1 {
 194   &.statea, &.stated {
 195     border-color: #ff0;
 196   }
 197 }
 198
 199 div.state2 {
 200   &.statea, &.stated {
 201     border-color: #f00;
 202   }
 203 }
 204
 205 div.statea, div.stated {
 206   background-color: #0b3;
 207 }
 208
 209 /*
 210  * Performance snapin
 211  */
 212 table.performance {
 213   @extend %performance-table-shared;
 214   width: $theme-snapin-width - 2px;
 215   border-radius: 2px;
 216
 217   td {
 218     padding: 0 2px;
 219     font-size: 11px;
 220
 221     &.right {
 222       padding: 0;
 223       padding-right: 1px;
 224       text-align: right;
 225       white-space: nowrap;
 226     }
 227   }
 228 }
 229
 230 /* TODO: Reproduce this html element */
 231 #snapin_performance select {
 232   margin-bottom: 2px;
 233 }
 234
 235 /*
 236  * Server time snapin
 237  */
 238 div.time {
 239   width: $theme-snapin-width - 2px;
 240   padding: 8px;
 241   font-size: 24px;
 242   font-weight: bold;
 243   letter-spacing: $theme-letter-spacing-table;
 244   color: $theme-color-white;
 245   text-align: center;
 246   background-color: $theme-color-table-background-dark;
 247   border: 1px solid $theme-color-table-border-dark;
 248   border-spacing: 4px;
 249 }
 250
 251 /*
 252  * Site status snapin
 253  */
 254 table.sitestate {
 255   width: $theme-snapin-width;
 256
 257   td {
 258     padding: 1px 0;
 259     text-align: right;
 260
 261     &.left {
 262       text-align: left;
 263
 264       a {
 265         font-weight: normal;
 266         text-align: left;
 267       }
 268     }
 269
 270     &.state {
 271       width: 60px;
 272       font-size: 9px;
 273     }
 274   }
 275 }
 276
 277 /* TODO: Reproduce this html element */
 278 div.snapin table.sitestate td img.iconbutton {
 279   width: 60px;
 280   height: 16px;
 281 }
 282
 283 /*
 284  * Speedometer snapin
 285  */
 286 div.speedometer {
 287   position: relative;
 288   top: 0;
 289   left: 0;
 290   height: 223px;
 291 }
 292
 293 img#speedometerbg, canvas#speedometer {
 294   position: absolute;
 295   top: 0;
 296   left: 0;
 297 }
 298
 299 /*
 300  * Tactical overview snapin
 301  */
 302 table.tacticaloverview {
 303   width: 100%;
 304   margin: 0;
 305   border-collapse: separate;
 306   border-spacing: 2px;
 307
 308   th {
 309     padding: 0;
 310     padding-top: 4px;
 311     font-size: 11px;
 312     font-weight: normal;
 313     line-height: 9px;
 314     letter-spacing: 0;
 315     color: $theme-color-nuance-5;
 316     text-align: center;
 317     vertical-align: bottom;
 318   }
 319
 320   td {
 321     height: 14px;
 322     padding: 2px;
 323     text-align: right;
 324     background: $theme-color-background;
 325     border: 1px solid $theme-color-table-border-dark;
 326     border-radius: $theme-border-radius;
 327
 328     &.prob {
 329       background: $theme-color-nuance-6;
 330       box-shadow: none;
 331     }
 332
 333     &.col3 {
 334       width: 33%;
 335     }
 336
 337     &.col4 {
 338       width: 25%;
 339     }
 340   }
 341
 342   a {
 343     display: block;
 344     margin-right: 2px;
 345   }
 346 }
 347
 348 table.tacticaloverview td a,
 349 table.tacticaloverview td a.link,
 350 table.tacticaloverview td a:hover,
 351 /* TODO: Reproduce these two html elements */
 352 table.tacticaloverview td body.main .popup_menu span,
 353 body.main .popup_menu table.tacticaloverview td span {
 354   padding: 4px;
 355   font-size: $theme-font-size-main;
 356   font-weight: $theme-font-weight-bold;
 357   letter-spacing: 0;
 358   color: $theme-color-text;
 359 }
 360
 361 div.tacticalalert {
 362   height: 25px;
 363   margin-top: 8px;
 364   font-size: 12px;
 365   line-height: 25px;
 366   text-align: center;
 367   background-color: $theme-color-state-2-background;
 368   border-radius: $theme-border-radius;
 369   box-shadow: none;
 370 }
 371
 372 div.spacertop {
 373   padding-top: 5px;
 374 }
 375
 376 #snapin_tactical_overview img {
 377   position: relative;
 378   top: -1px;
 379   width: 15px;
 380   height: auto;
 381 }
 382
 383 /*
 384  * Virtual host tree snapin
 385  */
 386 #snapin_tag_tree {
 387   position: relative;
 388   top: 0;
 389   left: 0;
 390
 391   select {
 392     float: right;
 393     margin-top: -2px;
 394     margin-bottom: 2px;
 395     font-size: 11px;
 396   }
 397
 398   /* TODO: Reproduce this html element */
 399   form img.iconbutton {
 400     display: inline-box;
 401     float: right;
 402     width: 16px;
 403     height: 16px;
 404   }
 405
 406   div.tag_tree {
 407     clear: both;
 408     font-size: $theme-font-size-main;
 409   }
 410
 411   div.statebullet {
 412     position: relative;
 413     top: 3px;
 414     left: 1px;
 415     display: inline-block;
 416     float: none;
 417     width: 8px;
 418     height: 8px;
 419     margin-right: 0;
 420     border-radius: 50%;
 421     box-shadow: 0 0 0.7px #284850;
 422   }
 423
 424   ul > div.statebullet.leaf {
 425     margin-left: 16px;
 426   }
 427
 428   b {
 429     font-weight: normal;
 430   }
 431
 432   p {
 433     margin: 0;
 434
 435     a {
 436       text-decoration: underline;
 437
 438       &:hover {
 439         text-decoration: none;
 440       }
 441     }
 442   }
 443 }
 444
 445 /*
 446  * Admin mini snapin (WATO)
 447  */
 448 #snapin_admin_mini {
 449   padding-top: 6px;
 450   clear: right;
 451
 452   img {
 453     position: relative;
 454     left: 3px;
 455     width: 18px;
 456     height: 18px;
 457     padding: 0;
 458     margin-right: 3.9px;
 459     margin-bottom: 4px;
 460   }
 461
 462   div.footnotelink {
 463     float: right;
 464   }
 465
 466   div.clear {
 467     clear: right;
 468   }
 469 }
 470
 471 /*
 472  * WATO folder tree snapin
 473  */
 474 #snapin_wato_foldertree {
 475   table {
 476     width: 100%;
 477     border-spacing: 0;
 478
 479     td {
 480       vertical-align: baseline;
 481
 482       &.label {
 483         width: 1px;
 484       }
 485     }
 486   }
 487
 488   select {
 489     margin: 8px 0 2px;
 490     clear: both;
 491     font-size: $theme-font-size-main;
 492     color: $theme-color-nuance-7;
 493     background: $theme-color-lightgrey;
 494     border-radius: $theme-border-radius;
 495     box-sizing: border-box;
 496   }
 497 }
 498
 499 /* Styles shared/inherited by different search bars */
 500 %search-shared {
 501   width: 100%;
 502   padding: 0;
 503
 504   img {
 505     display: none; }
 506
 507   input {
 508     float: left;
 509     margin:  0;
 510     font-size: 11px;
 511     background-repeat: no-repeat;
 512   }
 513
 514   input, select, textarea, #mk_side_search_field {
 515     box-sizing: border-box;
 516   }
 517 }
 518
 519 /*
 520  * Wiki snapin
 521  */
 522 #snapin_container_wiki div.content {
 523   font-weight: bold;
 524   color: #fff;
 525
 526   p {
 527     font-weight: normal;
 528   }
 529 }
 530
 531 /* TODO: Reproduce this html element */
 532 #wiki_navigation {
 533   text-align: left;
 534 }
 535
 536 #wiki_search {
 537   @extend %search-shared;
 538
 539   input {
 540     width: 194px;
 541     height: 25px;
 542   }
 543 }
 544
 545 #wiki_side_clear {
 546   clear: both;
 547 }
 548
 549 /*
 550  * Quicksearch snapin
 551  */
 552 #mk_side_search {
 553   @extend %search-shared;
 554
 555   input {
 556     width: 100%;
 557     height: 100%;
 558   }
 559
 560   div.topic {
 561     margin-top: 3px;
 562     margin-left: 2px;
 563     font-size: 125%;
 564   }
 565 }
 566
 567 #mk_search_results {
 568   position: relative;
 569   float: left;
 570   width: 223px;
 571   font-size: 80%;
 572   color: #000;
 573   background-color: #dfdfdf;
 574   border: 1px solid #fff;
 575
 576   a {
 577     display: block;
 578     width: 217px;
 579     padding-left: 5px;
 580     color: #000;
 581     text-align: left;
 582     text-decoration: none;
 583
 584     &:hover, &.active {
 585       background-color: #bfbfbf;
 586     }
 587   }
 588
 589   div.error, div.warning {
 590     padding: 2px;
 591     font-size: 12px;
 592   }
 593 }
 594
 595 #mk_side_clear {
 596   clear: both;
 597 }