web/htdocs/themes/classic/scss/_sidebar.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 /*-------------------------------------------------------------------------.
  29 |                 ____  _     _      _                                     |
  30 |                / ___|(_) __| | ___| |__   __ _ _ __                      |
  31 |                \___ \| |/ _` |/ _ \ '_ \ / _` | '__|                     |
  32 |                 ___) | | (_| |  __/ |_) | (_| | |                        |
  33 |                |____/|_|\__,_|\___|_.__/ \__,_|_|                        |
  34 |                                                                          |
  35 +--------------------------------------------------------------------------+
  36 | Styling for the sidebar and its snapins.                                 |
  37 '-------------------------------------------------------------------------*/
  38
  39 body.side {
  40     background-image: url("images/sidebar_background.jpg");
  41     padding: 0;
  42     width: 280px;
  43     height: 100%;
  44     overflow:hidden;
  45     font-family: arial, helvetica, sans-serif;
  46     font-size: 9pt;
  47     margin: 0px;
  48 }
  49
  50 body.side.screenshotmode {
  51     background-image: url("");
  52 }
  53
  54 /* Top logo part */
  55 #side_header {
  56     position: relative;
  57     top: 0px;
  58     left: 0px;
  59     width: 274px;
  60     height: 49px;
  61     z-index: 10;
  62
  63     border: 1px solid #264755;
  64     border-top: 0;
  65     border-left: 0;
  66     border-bottom-right-radius: 5px;
  67     box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.50);
  68     background: #498aa6;
  69 }
  70
  71 #side_bg {
  72     position: absolute;
  73     top: 0;
  74     left: 0;
  75     width: 271px;
  76     height: 46px;
  77     z-index: 10;
  78     background-image: url(images/sidebar_top.png);
  79     background-size: contain;
  80 }
  81
  82 #side_header > a {
  83     display: block;
  84     width: 255px;
  85     height: 55px;
  86     text-decoration: none;
  87     margin-left: 10px; /* space for sidebar folding */
  88 }
  89
  90 #side_fold {
  91     position: absolute;
  92     left: 0px;
  93     top: 0px;
  94     width: 10px;
  95     height: 100%;
  96     z-index: 15;
  97     cursor: pointer;
  98 }
  99
 100 #side_fold:hover {
 101     background-repeat: no-repeat;
 102     background-position: 5% 65%;
 103     background-image: url("images/side_fold.png");
 104 }
 105
 106 #side_version {
 107     position: absolute;
 108     top: 12px;
 109     right: 10px;
 110     z-index: 54;
 111     color: #fff;
 112     text-align: right;
 113     font-size: 8pt;
 114     max-width: 150px;
 115 }
 116
 117 #side_version a  {
 118     text-decoration: none;
 119 }
 120
 121 #side_version a:hover  {
 122     text-decoration: underline;
 123 }
 124
 125 #side_version span.unack_werks {
 126     z-index: 15;
 127     cursor: pointer;
 128     background-color: #f00;
 129     color: #fff;
 130     padding: 2px;
 131     border-radius: 10px;
 132     position: absolute;
 133     right: -12px;
 134     top: 5px;
 135 }
 136
 137 /* Scrolling part with snapins */
 138 #side_content {
 139     z-index: 5;
 140     width: 100%;
 141     height: 500px;
 142     overflow: hidden;
 143     color: #000000;
 144     position: absolute;
 145     top: 50px;
 146 }
 147
 148 #side_content.scroll {
 149     overflow-y: scroll;
 150 }
 151
 152 /* The footer of the sidebar */
 153 #side_footer {
 154     position: absolute;
 155     bottom: 0;
 156     left: 0;
 157     height: 38px;
 158     width: 274px;
 159     z-index: 10;
 160     margin: 0;
 161
 162     border-color: #86b1c4 #264755;
 163     border-width: 1px 1px 0 0;
 164     border-style: solid;
 165     border-top-right-radius: 5px;
 166     box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.50);
 167     background: #498aa6;
 168 }
 169
 170 #side_footer img.iconbutton {
 171     position: relative;
 172     top: 4px;
 173     left: 9px;
 174     margin-right: 5px;
 175     width: 27px;
 176     height: 27px;
 177     padding: 0;
 178
 179     background-color: #498aa6;
 180     border-width: 1px;
 181     border-style: solid;
 182     border-color: #22404d;
 183     box-shadow: 0 0 1px rgba(255, 255, 255, 0.8), 1px 1px 0px 0px rgba(255, 255, 255, 0.5) inset;
 184     font-size: 7pt;
 185     border-radius: 5px;
 186 }
 187
 188 #side_footer div.copyright {
 189     color: #fff;
 190     position: absolute;
 191     right: 10px;
 192     bottom: 5px;
 193     text-align: right;
 194 }
 195
 196 #side_footer a {
 197     color: #eee;
 198 }
 199
 200 #side_footer a:hover {
 201     color: #fff;
 202 }
 203
 204 /* General layout of snapins */
 205 div.snapin {
 206     padding: 0;
 207     overflow: hidden;
 208     border-color: #8ab1c0 #294753 #294753 #8ab1c0;
 209     border-width: 1px;
 210     border-style: solid;
 211     width: 248px;
 212     margin: 5px 10px;
 213     border-radius: 5px;
 214     box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.50);
 215     background: #508aa1;
 216 }
 217
 218 div.snapin:last-child {
 219     margin-bottom: 10px;
 220 }
 221
 222 /* Header of the snapin */
 223 div.snapin div.head {
 224     background-color: #6da1b8;
 225     text-align: center;
 226     color: #fff;
 227     height: 20px;
 228     line-height: 20px;
 229 }
 230
 231 div.snapin div.head b {
 232     font-weight: normal;
 233 }
 234
 235 /* close button on header */
 236 div.snapin div.closesnapin {
 237     float: right;
 238     margin-right: 6px;
 239     margin-top: 6px;
 240     line-height: 0px;
 241     height: 8px;
 242     width: 8px;
 243     padding: 0;
 244 }
 245
 246 div.snapin div.closesnapin img {
 247     width: 8px;
 248     height: 8px;
 249 }
 250
 251 div.snapin div.minisnapin {
 252     float: left;
 253     margin-left: 6px;
 254     margin-top: 6px;
 255     line-height: 0px;
 256     height: 8px;
 257     width: 8px;
 258     cursor: pointer;
 259     background-image: url("images/icon_minisnapin.png");
 260 }
 261
 262 div.snapin div.head.closed div.minisnapin {
 263     background-image: url("images/icon_maxisnapin.png");
 264 }
 265
 266 div.snapin div.content {
 267     padding: 10px;
 268     width: 228px;
 269     color: #fff;
 270 }
 271
 272 div.snapin select {
 273     background-color: #6da1b8;
 274     color: #fff;
 275     border-color: #123a4a;
 276     font-size: 8pt;
 277 }
 278
 279 /*
 280  * General styles for snapin contents
 281  */
 282
 283 div.snapin .content_center {
 284     margin-left:  auto;
 285     margin-right: auto;
 286 }
 287
 288 div.snapin td {
 289     color: #fff;
 290 }
 291
 292 div.snapin h3 {
 293     margin: 2px 0px;
 294     color: #fff;
 295     font-size: 100%;
 296 }
 297
 298 div.snapin li {
 299     padding-left: 1px;
 300     color: #274750;
 301     color: #478;
 302 }
 303
 304 /* Normal link in snapins */
 305 div.snapin a {
 306     text-decoration: none;
 307     font-weight: normal;
 308     color: #fff;
 309 }
 310
 311 div.snapin a:hover {
 312     text-decoration: underline;
 313     color: #fff;
 314 }
 315
 316 div.snapin ul {
 317     margin: 0;
 318     padding: 0;
 319     padding-left: 16px;
 320     /* width: 220px; Bei mehrstufigen Einrueckungen stimmt der rechte Rand nicht */
 321 }
 322
 323 div.snapin li.sidebar {
 324     margin-left: 0;
 325     margin-left: 0;
 326 }
 327
 328 div.snapin a.iconlink img {
 329     margin-right: 8px;
 330 }
 331
 332 div.snapin div.footnote {
 333     width: 100%;
 334     text-align: right;
 335 }
 336
 337 /* Style for exceptions displayed in snapins */
 338 div.snapin div.snapinexception {
 339     background-color: #f88;
 340     border-radius: 4px;
 341     padding: 3px;
 342     border: 1px solid #f00;
 343     width: 220px;
 344 }
 345
 346 div.snapin div.snapinexception h2 {
 347     font-size: 9pt;
 348     color: #f00;
 349     margin-top: 0px;
 350 }
 351
 352 div.snapin div.snapinexception p {
 353     color: #800;
 354 }
 355
 356 /* The right-aligned link at the bottom of some snapins like the "views" snapin. */
 357 div.snapin div.footnotelink {
 358     margin-top: 5px;
 359     text-align: right;
 360 }
 361
 362 div.snapin div.footnotelink a {
 363     background-color: #497e95;
 364     border-width: 1px;
 365     border-style: solid;
 366     border-color: #86a9b8 #22404d #22414d #86a9b8;
 367     box-shadow: 0 0 1.5px #000;
 368     font-size: 7pt;
 369     border-radius: 5px;
 370     padding: 2px 6px;
 371     margin-left: 5px;
 372 }
 373
 374 div.snapin div.footnotelink a:hover {
 375     background-color: #6da1b8;
 376     text-decoration: none;
 377 }
 378 div.snapin div.footnotelink a:active {
 379     border-color:  #22414d #86a9b8 #86a9b8 #22404d;
 380     background-color: #3b6678;
 381     box-shadow: inset 0 0 0.5px #444444;
 382 }
 383
 384 /* Small iconbutton (e.g. at bookmarks) */
 385 div.snapin img.iconbutton {
 386     margin: 0px 2px 0px 0px;
 387     border: none;
 388     width: 10px;
 389     height: 10px;
 390 }
 391
 392 div.snapin img.iconbutton:hover {
 393     opacity: 0.5;
 394     filter: alpha(opacity=50); /* For IE8 and earlier */
 395 }
 396
 397 div.snapin img.iconbutton.bookmark {
 398     width:  16px;
 399     height: 16px;
 400     margin: 0px -1px;
 401 }
 402
 403 /* state bullets at problem host or all hosts snapin */
 404 div.snapin div.statebullet {
 405     margin-left: 0;
 406     margin-right: 6px;
 407     width: 10px;
 408     height: 10px;
 409     border: 1px solid #123a4a;
 410     float: left;
 411     box-shadow: 0px 0px 1px #123a4a;
 412 }
 413
 414 div#snapinDragIndicator {
 415   height:            1.5px;
 416   line-height:       1px;
 417   font-size:         1px;
 418   width:             247px;
 419   background-color:  #fff;
 420   margin:            0px 0px 0px 11px;
 421   border-radius:     3px;
 422   box-shadow:        0px 0px 3px #fff;
 423   position:          relative;
 424   top:               2px;
 425 }
 426
 427
 428 /*-------------------------------------------------------------------------.
 429 |          _       _     _                         _                       |
 430 |         / \   __| | __| |  ___ _ __   __ _ _ __ (_)_ __  ___             |
 431 |        / _ \ / _` |/ _` | / __| '_ \ / _` | '_ \| | '_ \/ __|            |
 432 |       / ___ \ (_| | (_| | \__ \ | | | (_| | |_) | | | | \__ \            |
 433 |      /_/   \_\__,_|\__,_| |___/_| |_|\__,_| .__/|_|_| |_|___/            |
 434 |                                           |_|                            |
 435 +--------------------------------------------------------------------------+
 436 | Style for the page where you can add new snapins to the sidebar.         |
 437 '-------------------------------------------------------------------------*/
 438
 439
 440 div.add_snapin div.snapinadder {
 441     padding: 8px 2px 14px 2px;
 442     background-color: #478;
 443     border-radius: 5px;
 444     border-bottom: 1px solid #9ab;
 445     border-right: 1px solid #89a;
 446     height: 220px;
 447     width: 270px;
 448     margin-right: 10px;
 449     margin-bottom: 10px;
 450     float: left;
 451     box-shadow: 1px 1px 5px #000;
 452     border-style: solid;
 453     border-width: 1px;
 454     border-color: #9bc #245 #245 #9bc;
 455 }
 456 div.add_snapin div.snapinadder:hover {
 457     background-color: #69a;
 458     box-shadow: 0px 0px 10px #fff;
 459     border-color: #fff; /* #9bc #9bc #fff; */
 460     position: relative;
 461 }
 462
 463 div.add_snapin div.snapinadder div.description {
 464     color: #fff;
 465     padding: 10px;
 466 }
 467 div.add_snapin div.snapin_preview div.clickshield {
 468     z-index: 100;
 469     position: absolute;
 470     top: 0px;
 471     left: 0px;
 472     width: 270px;
 473     height: 120px;
 474 }
 475
 476 div.add_snapin div.snapin_preview {
 477     width: 270px;
 478     height: 120px;
 479     overflow: hidden;
 480     position: relative;
 481     top: 0px;
 482     left: 0px;
 483 }
 484
 485 /*-Popup Msg-----------------------------------------------------------.
 486 |           ____                           __  __                      |
 487 |          |  _ \ ___  _ __  _   _ _ __   |  \/  |___  __ _            |
 488 |          | |_) / _ \| '_ \| | | | '_ \  | |\/| / __|/ _` |           |
 489 |          |  __/ (_) | |_) | |_| | |_) | | |  | \__ \ (_| |           |
 490 |          |_|   \___/| .__/ \__,_| .__/  |_|  |_|___/\__, |           |
 491 |                     |_|         |_|                 |___/            |
 492 +----------------------------------------------------------------------+
 493 | Popup message rendering                                              |
 494 '---------------------------------------------------------------------*/
 495
 496 div.popup_msg {
 497     position:absolute;
 498     bottom: 35px;
 499     left: 20px;
 500     width: 200px;
 501     padding: 3px;
 502
 503     background-color: #244452;
 504 }
 505
 506 div.popup_msg .close {
 507     display: block;
 508     float: right;
 509 }
 510
 511 span#msg_label {
 512     z-index: 15;
 513
 514     background-color: #fff;
 515     color: #ff0000;
 516     padding: 1px;
 517     position: relative;
 518     border-radius: 5px;
 519 }