/** * Default colors for icinga theme ' **/ /* @color-emphasis: #60687A; */ @font-face { font-family: 'duepuntozero'; src: url('http://net-test-icinga-vm1.adm.netways.de/milestone1/css/./fonts/duepuntozero.ttf'); } body { background-color: #fefefe; background-image: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#ffffff)); background-image: -webkit-linear-gradient(top, #fefefe, #ffffff); background-image: -moz-linear-gradient(top, #fefefe, #ffffff); background-image: -ms-linear-gradient(top, #fefefe, #ffffff); background-image: -o-linear-gradient(top, #fefefe, #ffffff); color: #393b40; font-family: Verdana, "sans serif"; } body a { text-decoration: none; } input { height: 15px !important; } html, body { height: 100%; overflow: hidden; } body { overflow: hidden; } .main { position: fixed; top: 30px; bottom: 0px; left: 49px; right: 0px; overflow: hidden; } .main .icinga-container { position: absolute; overflow: auto; -webkit-overflow-scrolling: touch; } .leftbar { position: fixed; top: 30px; bottom: 0px; left: 0px; width: 48px; padding-top: 0.5em; border-right: 1px solid #606469; background-color: #ffffff; } .leftbar ul { text-align: center; padding: 0px; margin: 0px; list-style: none; } .leftbar ul a { display: block; background-color: #fefefe; color: #393b40; margin: 4px; margin-top: 0px; width: 38px; height: 38px; position: relative; text-align: center; line-height: 38px; border-radius: 2px; box-shadow: 1px 1px 2px #ffffff, inset 0px 1px 2px #ffffff; } .leftbar ul a:hover { box-shadow: 2px 2px 5px #ffffff; } .bottombar { position: fixed; bottom: 0px; left: 48px; right: 0px; height: 30px; background-color: #212225; } .topbar { position: fixed; top: 0px; left: 0px; right: 0px; height: 30px; background-color: #ffffff; background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#cccccc)); background-image: -webkit-linear-gradient(top, #ffffff, #cccccc); background-image: -moz-linear-gradient(top, #ffffff, #cccccc); background-image: -ms-linear-gradient(top, #ffffff, #cccccc); background-image: -o-linear-gradient(top, #ffffff, #cccccc); } .topbar .icinga-breadcrumb { padding-left: 0.3em; font-family: duepuntozero; font-size: 22px; color: #aeb4ba; text-shadow: 2px 2px 1px #303439; } .topbar .icinga-breadcrumb a { text-decoration: none; color: #aeb4ba; text-shadow: 2px 2px 1px #303439; } /** * * Icinga dataviews * **/ /* Begin dataview list type */ .icinga-dataview.list { font-size: 10px; } .icinga-dataview.list table { width: 100%; margin: 0px; padding: 0px; } .icinga-dataview.list table th { background-color: #ffffff; background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ffffff)); background-image: -webkit-linear-gradient(top, #ffffff, #ffffff); background-image: -moz-linear-gradient(top, #ffffff, #ffffff); background-image: -ms-linear-gradient(top, #ffffff, #ffffff); background-image: -o-linear-gradient(top, #ffffff, #ffffff); } .icinga-dataview.list table td { border-bottom: 1px solid #ffffff; background-color: #ffffff; max-height: 25px; height: 25px; overflow: hidden; cursor: pointer; } .icinga-dataview.list table td.status { background-image: none!important; width: 50px; overflow: hidden; border-right: 1px solid #ffffff; } .icinga-dataview.list table td.status.critical, .icinga-dataview.list table td.status.down, .icinga-dataview.list table td.status.CRITICAL, .icinga-dataview.list table td.status.DOWN { background-color: #ff2222 !important; color: white!important; } .icinga-dataview.list table td.status.pending, .icinga-dataview.list table td.status.PENDING { background-color: #aa22ff !important; color: white!important; } .icinga-dataview.list table td.status.ok, .icinga-dataview.list table td.status.up, .icinga-dataview.list table td.status.OK, .icinga-dataview.list table td.status.UP { background-color: #22ff22 !important; } .icinga-dataview.list table td.status.warning, .icinga-dataview.list table td.statusWARNING { background-color: #ffff00 !important; } .icinga-dataview.list table td.status.unknown, .icinga-dataview.list table td.status.unreachable, .icinga-dataview.list table td.statusUNKNOWN, .icinga-dataview.list table td.statusUNREACHABLE { background-color: #ff9922 !important; } .icinga-dataview.list table td:nth-child(n+2) { border-right: 1px solid #ffffff; } .icinga-dataview.list table td:last-child { border-right: 1px solid #393b40; } .icinga-dataview.list table tr:nth-child(odd) td { background-color: #f3f4f5; } .icinga-dataview.list table tr.active-row td:last-child { background: #f3f4f5; /* Old browsers */ background: -moz-linear-gradient(left, #f3f4f5 0%, #ffffff 98%, #ffffff 98%, #ffffff 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%, #f3f4f5), color-stop(60%, #f3f4f5), color-stop(98%, #ffffff, color-stop(100%, #ffffff))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, #f3f4f5 0%, #ffffff 98%, #ffffff 98%, #ffffff 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, #f3f4f5 0%, #ffffff 98%, #ffffff 98%, #ffffff 100%); /* Opera 11.10+ */ background: linear-gradient(to right, #f3f4f5 0%, #ffffff 98%, #ffffff 98%, #ffffff 100%); /* W3C */ cursor: pointer; border-right: 2px solid #ffffff; } /*end datatype listtype*/ /** * * Two column Main/detail layout used for overviews * **/ .layout-main-detail.collapsed #icinga-main { right: 0px; box-shadow: none; } .layout-main-detail.collapsed #icinga-detail { display: hidden; left: 100%; } .layout-main-detail .controls { background-color: #ffffff; background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ffffff)); background-image: -webkit-linear-gradient(top, #ffffff, #ffffff); background-image: -moz-linear-gradient(top, #ffffff, #ffffff); background-image: -ms-linear-gradient(top, #ffffff, #ffffff); background-image: -o-linear-gradient(top, #ffffff, #ffffff); height: 26px; padding-top: 4px; position: absolute; top: 0px; overflow: hidden; left: 0px; right: 0px; } .layout-main-detail #icinga-main { position: absolute; left: 0px; right: 50%; background-color: #fefefe; background-image: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#ffffff)); background-image: -webkit-linear-gradient(top, #fefefe, #ffffff); background-image: -moz-linear-gradient(top, #fefefe, #ffffff); background-image: -ms-linear-gradient(top, #fefefe, #ffffff); background-image: -o-linear-gradient(top, #fefefe, #ffffff); min-width: 400px; top: 0px; bottom: 0px; -webkit-transition: right 0.5s ease; -moz-transition: right 0.5s ease; -o-transition: right 0.5s ease; -ms-transition: right 0.5s ease; transition: right 0.5s ease; overflow-x: hidden; z-index: 11; } .layout-main-detail #icinga-main .content { position: absolute; top: 30px; bottom: 0px; overflow-y: auto; -webkit-overflow-scrolling: touch; left: 0px; right: -1px; } .layout-main-detail #icinga-detail { position: absolute; top: 0px; left: 50%; right: 0px; bottom: 0px; z-index: 10; -webkit-transition: left 0.5s ease; -moz-transition: left 0.5s ease; -o-transition: left 0.5s ease; -ms-transition: left 0.5s ease; transition: left 0.5s ease; background-color: #ffffff; background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ffffff)); background-image: -webkit-linear-gradient(top, #ffffff, #ffffff); background-image: -moz-linear-gradient(top, #ffffff, #ffffff); background-image: -ms-linear-gradient(top, #ffffff, #ffffff); background-image: -o-linear-gradient(top, #ffffff, #ffffff); } .layout-main-detail #icinga-detail .content { position: absolute; top: 30px; left: 0px; right: 0px; bottom: 0px; padding: 0.5em; overflow: auto; -webkit-overflow-scrolling: touch; /** * Detail views underneath the content class **/ font-size: 12px; } .layout-main-detail #icinga-detail .content .object-name { display: block; float: none; clear: both; } @media (min-width: 750px) { .layout-main-detail #icinga-detail .content .object-name .icon { width: 32px; height: 32px; float: left; border: 1px dashed grey; margin-right: 1em; clear: left; box-shadow: 1px 1px 1px #e6e6e6; } } @media (max-width: 750px) { .layout-main-detail #icinga-detail .content .object-name .icon { display: none; } } .layout-main-detail #icinga-detail .content .object-name .headings h1 { font-size: 16px; margin: 0px; padding: 0px; line-height: 1.0em; } .layout-main-detail #icinga-detail .content .object-name .headings h2 { font-size: 14px; margin: 0px; font-weight: normal; padding: 0px; line-height: 1.5em; } .layout-main-detail #icinga-detail .content .status { background-image: none!important; border: 1px solid #393b40; padding: 0.20em; margin: 0.5em; width: 95%; text-align: center; box-shadow: 1px 1px 1px #e6e6e6; } .layout-main-detail #icinga-detail .content .status.critical, .layout-main-detail #icinga-detail .content .status.down, .layout-main-detail #icinga-detail .content .status.CRITICAL, .layout-main-detail #icinga-detail .content .status.DOWN { background-color: #ff2222 !important; color: white!important; } .layout-main-detail #icinga-detail .content .status.pending, .layout-main-detail #icinga-detail .content .status.PENDING { background-color: #aa22ff !important; color: white!important; } .layout-main-detail #icinga-detail .content .status.ok, .layout-main-detail #icinga-detail .content .status.up, .layout-main-detail #icinga-detail .content .status.OK, .layout-main-detail #icinga-detail .content .status.UP { background-color: #22ff22 !important; } .layout-main-detail #icinga-detail .content .status.warning, .layout-main-detail #icinga-detail .content .statusWARNING { background-color: #ffff00 !important; } .layout-main-detail #icinga-detail .content .status.unknown, .layout-main-detail #icinga-detail .content .status.unreachable, .layout-main-detail #icinga-detail .content .statusUNKNOWN, .layout-main-detail #icinga-detail .content .statusUNREACHABLE { background-color: #ff9922 !important; } .layout-main-detail #icinga-detail .content .nav-tabs { border-bottom: 1px solid #ffffff; } .layout-main-detail #icinga-detail .content .nav-tabs li.active a { background-color: #787d84; color: #aeb1b4; height: 15px; } .layout-main-detail #icinga-detail .content .nav-tabs li a { height: 15px; border-color: #606469; color: #393b40; } .layout-main-detail #icinga-detail .content .nav-tabs li a:hover { background-color: #c8cacd; color: #393b40; } .layout-main-detail #icinga-detail .content .output_text { font-family: monaco,monospacen; width: 95%; text-align: left; padding: 0.5em; box-shadow: inset 1px 1px 2px #929ba3; background-color: #fefefe; } .layout-main-detail #icinga-detail .content .detail label { width: 125px; display: block; float: left; clear: left; font-weight: bold; } /** * End of main/detail layout **/