1/*! Icinga Web 2 | (c) 2014 Icinga Development Team | GPLv2+ */ 2 3#announcements > ul { 4 background-color: @body-bg-color; 5 list-style: none; 6 margin: 0; 7 padding: 0; 8 9 > li { 10 border-bottom: 1px solid @gray-lighter; 11 line-height: 1.5em; 12 padding: 0.5em 1em 0.5em 3em; 13 14 position: relative; 15 16 &:before { 17 color: @icinga-blue; 18 content: "\e811"; 19 font-family: 'ifont'; 20 21 position: absolute; 22 left: 1.25em; 23 } 24 25 &:last-child { 26 border-bottom: none; 27 } 28 29 a { 30 color: @icinga-blue; 31 } 32 33 .message { 34 display: inline-block; 35 vertical-align: middle; 36 padding-right: 1.5em; 37 font-size: 7/6em; 38 } 39 } 40} 41 42.acknowledge-announcement-control, 43.application-state-acknowledge-message-control { 44 background: none; 45 border: none; 46 display: block; 47 margin-top: -0.75em; 48 49 position: absolute; 50 right: .75em; 51 top: 50%; 52} 53 54.application-state-acknowledge-message-control .link-button { 55 color: #fff; 56 57 &:hover .icon-cancel { 58 color: @icinga-blue; 59 } 60} 61 62#application-state-summary > div { 63 background-color: @color-critical; 64 color: #fff; 65 line-height: 1.5em; 66 padding: 0.5em 1em 0.5em 3em; 67 width: 100%; 68 69 position: relative; 70 71 &:before { 72 content: "\e84d"; 73 font-family: 'ifont'; 74 75 position: absolute; 76 left: 1.25em; 77 } 78} 79 80.dashboard-link { 81 .clearfix(); 82 display: block; 83 max-width: 100%; 84 vertical-align: middle; 85 padding: 1em; 86 width: 36em; 87 88 &:hover { 89 -webkit-border-radius: 4px; 90 -moz-border-radius: 4px; 91 border-radius: 4px; 92 93 -webkit-background-clip: padding-box; 94 -moz-background-clip: padding; 95 background-clip: padding-box; 96 97 -webkit-box-shadow: 0 0 0.5em 0 rgba(0, 0, 0, 0.2); 98 -moz-box-shadow: 0 0 0.5em 0 rgba(0, 0, 0, 0.2); 99 box-shadow: 0 0 0.5em 0 rgba(0, 0, 0, 0.2); 100 101 background-color: @tr-hover-color; 102 text-decoration: none; 103 } 104} 105 106.dashboard.content > .container { 107 overflow-x: auto; 108} 109 110.link-meta { 111 display: table-cell; 112 vertical-align: middle; 113} 114 115.link-label { 116 font-weight: @font-weight-bold; 117} 118 119.link-description { 120 color: @text-color-light; 121} 122 123.link-icon { 124 display: table-cell; 125 padding-right: .5em; 126 vertical-align: middle; 127 128 > i { 129 font-size: 3em; 130 opacity: 0.7; 131 } 132 133 > img { 134 width: 3em; 135 height: 3em; 136 margin-right: .6em; 137 } 138} 139 140table.historycolorgrid { 141 font-size: 1.5em; 142} 143 144table.historycolorgrid th { 145 width: 1em; 146 height: 1em; 147 margin: 0.5em; 148 font-size: 0.55em; 149 font-weight: bold; 150} 151 152table.historycolorgrid td { 153 width: 1em; 154 height: 1em; 155 margin: 1em; 156} 157 158table.historycolorgrid td:hover { 159 opacity: 0.5; 160} 161 162table.historycolorgrid td.weekday { 163 font-size: 0.55em; 164 font-weight: bold; 165 width: 2.5em; 166 opacity: 1.0; 167} 168 169table.historycolorgrid a, table.historycolorgrid span { 170 .rounded-corners(0.2em); 171 margin: 0; 172 text-decoration: none; 173 display: block; 174 width: 1.1em; 175 height: 1.1em; 176} 177 178table.historycolorgrid a:hover { 179 text-decoration: none; 180} 181 182table.multiselect tr[href] td { 183 user-select: none; 184 -webkit-user-select: none; 185 -moz-user-select: none; 186 -ms-user-select: none; 187} 188 189#main div.filter { 190 form.editor { 191 input[type=text], select { 192 width: 12em; 193 height: 2em; 194 line-height: 1; 195 } 196 197 ul.tree li.active { 198 background-color: @gray-lightest; 199 } 200 201 button { 202 padding: .5em; 203 border: none; 204 background: none; 205 color: @text-color; 206 207 &:hover, &:focus { 208 color: @icinga-blue; 209 } 210 } 211 212 .buttons { 213 margin-left: 25em; 214 padding: .25em 0; 215 } 216 217 .buttons input:not(:last-child) { 218 margin-right:.5em; 219 } 220 } 221} 222 223form.role-form { 224 &.icinga-form .control-label-group { 225 width: 20em; 226 } 227 228 .control-label-group em { 229 color: @text-color-light; 230 font-style: normal; 231 } 232 233 fieldset.collapsible { 234 border: none; 235 padding: 0; 236 margin: 0; 237 238 h3 em { 239 font-size: .857em; 240 font-weight: normal; 241 color: @text-color-light; 242 } 243 244 h4 { 245 margin-top: 1.5em; 246 } 247 248 .collapsible-control { 249 border-bottom: 1px solid @gray-light; 250 cursor: pointer; 251 -webkit-touch-callout: none; 252 -webkit-user-select: none; 253 -khtml-user-select: none; 254 -moz-user-select: none; 255 -ms-user-select: none; 256 user-select: none; 257 } 258 259 .collapsible-control:after { 260 content: "\f103"; 261 display: inline-block; 262 font-family: 'ifont'; 263 font-weight: normal; 264 padding: 0 .25em; 265 margin-right: .25em; 266 width: 1em; 267 opacity: .6; 268 float: right; 269 } 270 271 &.collapsed .collapsible-control:after { 272 content: "\e87a"; 273 } 274 } 275} 276 277ul.tree select:first-of-type { /* ?? */ 278 margin-bottom: 0.3em; 279 margin-left: 2em; 280} 281 282ul.tree { 283 padding: 0; 284 margin: 0; 285 padding-top: .5em; 286} 287 288ul.tree ul { 289 padding-left: 1em; 290} 291 292ul.tree li { 293 margin: 0; 294 list-style-type: none; 295 position: relative; 296 padding: 0; 297} 298 299ul.tree li .handle { 300 background-image: url('../img/tree/tree-minus.gif'); 301 background-repeat: no-repeat; 302 display: inline-block; 303 position: absolute; 304 width: 1.5em; 305 height: 2em; 306 left: 0em; 307 background-position: center center; 308 z-index: 1; 309 cursor: pointer; 310} 311 312ul.tree li.collapsed > .handle { 313 background-image: url('../img/tree/tree-plus.gif'); 314} 315 316ul.tree li.collapsed > ul { 317 display: none; 318} 319 320ul.tree li::before, ul.tree li::after { 321 content: ''; 322 position: absolute; 323 right: auto; 324 left: -0.2em; 325 border-color: @gray-light; 326 border-style: dotted; 327 border-width: 0; 328} 329 330/* This is the left vertical line */ 331ul.tree li::before { 332 border-left-width: 1px; 333 top: -.5em; 334 width: 1em; 335 height: 2.5em; 336 bottom: 1em; 337} 338 339/* This is the horizontal dash in front of each item */ 340ul.tree li::after { 341 border-top-width: 1px; 342 top: 1em; 343 width: 2em; 344 height: 1em; 345} 346 347/* Stop left vertical line at "mid-height" after last nodes (at each level) */ 348ul.tree li:last-child::before { 349 height: 1.5em; 350} 351 352/* No border for the root element - there must be only ONE root */ 353ul.tree > li::before, ul.tree > li::after { 354 display: none; 355} 356 357/* No connector before (each) root element */ 358ul.tree > ul > li::before, ul.tree > ul > li::after { 359 border: 0; 360} 361 362ul.tree li a { 363 display: inline-block; 364 line-height: 2em; 365 padding: 0 .5em; 366 text-decoration: none; 367 color: @gray; 368 background-repeat: no-repeat; 369 background-position: 0.8em 0.4em; 370} 371 372ul.tree li a.error { 373 color: @color-critical-handled; 374} 375 376ul.tree li a:hover { 377 color: @text-color; 378 text-decoration: underline; 379} 380 381ul.tree li a.error:hover { 382 color: @color-critical; 383} 384 385/* charts should grow as much as possible but never beyond the current viewport's size */ 386.svg-container-responsive { 387 padding: 1.5em; 388 height: 80vh; 389} 390 391.tipsy .tipsy-inner { 392 // overwrite tooltip max width, we need them to grow bigger 393 font-family: @font-family; 394 font-size: @font-size-small; 395 max-width: 300px; 396 text-align: left; 397 background-color: rgba(0,0,0,0.8); 398} 399 400.progress-label span { 401 font-size: 1.5em; 402 .animate(blink 1.4s infinite both); 403 404 &:nth-child(2) { 405 animation-delay: .2s; 406 } 407 408 &:nth-child(3) { 409 animation-delay: .4s; 410 } 411} 412 413.flyover:not(.flyover-expanded) .flyover-content { 414 display: none; 415} 416 417.flyover { 418 position: relative; 419 420 .flyover-content { 421 background-color: @body-bg-color; 422 border: 1px solid @gray-lighter; 423 box-shadow: 0 0 .5em 0 rgba(0, 0, 0, 0.2); 424 position: absolute; 425 padding: @vertical-padding @horizontal-padding; 426 .rounded-corners(); 427 } 428 429 &.flyover-arrow-top .flyover-content:before { 430 background: @body-bg-color; 431 border-left: 1px solid @gray-lighter; 432 border-top: 1px solid @gray-lighter; 433 content: ""; 434 height: 1em; 435 -ms-transform: rotate(45deg); 436 transform: rotate(45deg); 437 width: 1em; 438 439 position: absolute; 440 left: 6px; 441 top: -7px; 442 } 443 444 &.flyover-right .flyover-content { 445 left: auto; 446 right: 0; 447 } 448 449 &.flyover-arrow-top.flyover-right .flyover-content:before { 450 left: auto; 451 right: 6px; 452 } 453} 454 455.slice-state-ok { 456 stroke: @color-ok; 457 background: @color-ok; 458} 459 460.slice-state-warning-handled { 461 stroke: @color-warning-handled; 462 background: @color-warning-handled; 463} 464 465.slice-state-warning { 466 stroke: @color-warning; 467 background: @color-unreachable-handled; 468} 469 470.slice-state-critical-handled { 471 stroke: @color-critical-handled; 472 background: @color-critical-handled; 473} 474 475.slice-state-critical { 476 stroke: @color-critical; 477 background: @color-critical; 478} 479 480.slice-state-unknown-handled { 481 stroke: @color-unknown-handled; 482 background: @color-unknown-handled; 483} 484 485.slice-state-unknown { 486 stroke: @color-unknown; 487 background: @color-unknown; 488} 489 490.slice-state-unreachable-handled { 491 stroke: @color-unreachable-handled; 492 background: @color-unreachable-handled; 493} 494 495.slice-state-unreachable { 496 stroke: @color-unreachable; 497 background: @color-unreachable; 498} 499 500.slice-state-pending { 501 stroke: @color-pending; 502 background: @color-pending; 503} 504 505.slice-state-not-checked { 506 stroke: @gray-light; 507 background: @gray-light; 508} 509 510.donut { 511 width: 22em; 512 height: 22em; 513 min-width: 11.5em; 514 display: table; 515} 516 517.donut-graph { 518 width: 22em; 519 height: 22em; 520} 521 522.donut-label { 523 font-weight: bold; 524 fill: @text-color; 525} 526 527.donut-label { 528 margin-top: -12.5em; 529 text-align: center; 530} 531 532.donut-label-big { 533 color: @gray-light; 534 font-size: 6em; 535 line-height: 0; 536 text-anchor: middle; 537 &:hover { 538 text-decoration: none; 539 } 540} 541 542.donut-label-big-eye-catching { 543 color: @color-critical; 544} 545 546.donut-label-small { 547 fill: @text-color; 548 font-size: 1.2em; 549 text-anchor: middle; 550 -moz-transform: translateY(0.35em); 551 -ms-transform: translateY(0.35em); 552 -webkit-transform: translateY(0.35em); 553 transform: translateY(0.35em); 554} 555 556.donut-container { 557 float: left; 558 559 &:not(:last-of-type) { 560 margin-right: 10em; 561 } 562} 563 564.dashboard .donut-container .donut-legend { 565 margin-left: auto; 566} 567 568.donut-legend { 569 width: 50%; 570 padding: 0; 571 margin-left: 18em; 572 list-style-type: none; 573 574 li { 575 vertical-align: middle; 576 577 &:not(:last-child) { 578 margin-bottom: .5em; 579 } 580 581 .badge { 582 font-weight: bold; 583 margin-right: .5em; 584 vertical-align: initial; 585 } 586 } 587} 588 589input[type="checkbox"].expandable-toggle { 590 display: none; 591 592 & + label { 593 float: right; 594 margin-right: 1em; 595 596 cursor: pointer; 597 user-select: none; 598 -webkit-user-select: none; 599 -moz-user-select: none; 600 -ms-user-select: none; 601 } 602 603 & ~ .expandable-content { 604 clear: right; // Because the label is floating right 605 } 606 607 &:checked ~ .expandable-content { 608 -webkit-transition: opacity 0.2s linear; 609 -moz-transition: opacity 0.2s linear; 610 -o-transition: opacity 0.2s linear; 611 transition: opacity 0.2s linear; 612 } 613 614 &:not(:checked) ~ .expandable-content { 615 height: 0; 616 opacity: 0; 617 visibility: hidden; 618 619 -webkit-transition: opacity 0.2s linear, visibility 0.2s; 620 -moz-transition: opacity 0.2s linear, visibility 0.2s; 621 -o-transition: opacity 0.2s linear, visibility 0.2s; 622 transition: opacity 0.2s linear, visibility 0.2s; 623 } 624 625 &:checked ~ label .expandable-expand-label { 626 display: none; 627 } 628 629 &:not(:checked) ~ label .expandable-collapse-label { 630 display: none; 631 } 632} 633 634html.no-js .progress-label { 635 display: none; 636} 637