GUI CSS: Removed snapin styles from py modules and added a _snapins.scss for the...

[check_mk.git] / web / htdocs / themes / classic / scss / _views.scss

/*
+------------------------------------------------------------------+
|             ____ _               _        __  __ _  __           |
|            / ___| |__   ___  ___| | __   |  \/  | |/ /           |
|           | |   | '_ \ / _ \/ __| |/ /   | |\/| | ' /            |
|           | |___| | | |  __/ (__|   <    | |  | | . \            |
|            \____|_| |_|\___|\___|_|\_\___|_|  |_|_|\_\           |
|                                                                  |
| Copyright Mathias Kettner 2012             mk@mathias-kettner.de |
+------------------------------------------------------------------+

This file is part of Check_MK.
The official homepage is at http://mathias-kettner.de/check_mk.

check_mk is free software;  you can redistribute it and/or modify it
under the  terms of the  GNU General Public License  as published by
the Free Software Foundation in version 2.  check_mk is  distributed
in the hope that it will be useful, but WITHOUT ANY WARRANTY;  with-
out even the implied warranty of  MERCHANTABILITY  or  FITNESS FOR A
PARTICULAR PURPOSE. See the  GNU General Public License for more de-
ails.  You should have  received  a copy of the  GNU  General Public
License along with GNU Make; see the file  COPYING.  If  not,  write
to the Free Software Foundation, Inc., 51 Franklin St,  Fifth Floor,
Boston, MA 02110-1301 USA.

*/

/* special background for embedded views */
body.main.dashlet {
    background-image: none;
    background: transparent;
    padding: 0px;
}

body.main.dashlet div.warning {
    margin: 0;
    border-radius: 0;
    box-shadow: 0;
}

/*-------------------------------------------------------------------------.
|  _____     _            ___      ___        _   _                        |
| |_   _|_ _| |__  ___   ( _ )    / _ \ _ __ | |_(_) ___  _ __  ___        |
|   | |/ _` | '_ \/ __|  / _ \/\ | | | | '_ \| __| |/ _ \| '_ \/ __|       |
|   | | (_| | |_) \__ \ | (_>  < | |_| | |_) | |_| | (_) | | | \__ \       |
|   |_|\__,_|_.__/|___/  \___/\/  \___/| .__/ \__|_|\___/|_| |_|___/       |
|                                      |_|                                 |
+--------------------------------------------------------------------------+
| The navi table contains the tab navigation above the content tables      |
| containing the buttons "filter", "commands", "display" and so on.        |
'-------------------------------------------------------------------------*/

table.filterform {
    border-collapse: collapse;
    padding: 0px;
    border-style: none;
}
table.filterform td {
    padding: 0px;
}

div.floatfilter {
    margin: 0px 4px 3px 0px;
    width: 310px;
    height: 53px;
    float: left;
    border-width: 1px;
    border-style: solid;
    border-color: #acc #22404d #22414d #8ab;
    box-shadow: 0.5px 0.5px 1px #444;
    background-color: rgba(160, 181, 190, 0.6);
    border-radius: 5px;
    color: black;
}

body.main.screenshotmode div.floatfilter {
    background-color: #5893af;
}

div.floatfilter input[type=text].neg {
    width: 229px;
}

div.floatfilter.double {
    height: 110px;
    display: table-cell;
}

div.floatfilter input[type=text] {
    width: 294px;
}

div.floatfilter .legend {
    color: white;
    margin-bottom: 1px;
    width: 300px;
    height: 17px;
    background-color: rgba(255, 255, 255, 0.2);
    padding: 3px 5px 0px 5px;
    border-radius: 5px 5px 0px 0px;
}

div.floatfilter .content {
    width: 311px;
    height: 30px;
    margin-top: 0px;
    margin-left: 0px;
    display: table-cell;
    padding-left: 4px;
    text-align: left;
    padding-top: 5px;
}
div.floatfilter.double .content {
    height: 82px;
}
div.floatfilter .content > select {
    width: 300px;
}

div.floatfilter .content > select.neg,
div.floatfilter .content > select#opthost_group,
div.floatfilter .content > select#optservice_contact_group,
div.floatfilter .content > select#opthost_contact_group,
div.floatfilter .content > select#optservice_group {
    width: 237px;
}

div.floatfilter .content .multigroup table {
    margin-top: -6px;
}

div.floatfilter .content .multigroup select {
    width: 148px;
    height: 66px;
}

div.floatfilter .content .multigroup select.large {
    width: 228px;
}

div.floatfilter .content .multigroup select.small {
    width: 68px;
}

div.floatfilter .content .filtertime select {
    width: 136px;
}

div.floatfilter.service_custom_variable input, div.floatfilter.host_custom_variable input,
div.floatfilter.service_custom_variable select, div.floatfilter.host_custom_variable select {
    display: inline-block;
    width: 45%;
}

div.floatfilter.service_custom_variable select, div.floatfilter.host_custom_variable select {
    margin-right: 10px;
}

/* Improving styling of floatfilters that are contained in a ListOf() */
table.valuespec_listof.filter {
    width: 300px;
    border-spacing: 0px;
}
select.vlof_filter {
    width: 312px;
}
table.valuespec_listof td.vlof_content.filter {
    width: 1px;
    border-style: none;
}
table.valuespec_listof td.vlof_buttons.filter {
    width: 1px;
    border-style: none;
    vertical-align: top;
}
table.valuespec_listof td.vlof_buttons.filter img {
    position: relative;
    top: 2px;
    left: -28px;
    width: 16px;
    height: 16px;
}

table.filtertime td {
    vertical-align: middle;
}

div.optiondial {
    cursor: pointer;
    height: 20px;
    position: relative;
    top: 1px;
    margin: 0px 0px 0px 0;
    float: left;
    background-repeat: no-repeat;
    background-position: 1px -1px;
    overflow: hidden;
    box-shadow: 0px 0px 3px #123;
    text-shadow: 0px 0.5px 0.5px #fff;
    color: #222;
}

div.optiondial div {
    width: 100%;
    height: 100%;
    padding-top: 3px;
    position: relative;
    top: 0px;
    text-align: center;
}


div.optiondial.num_columns {
    width: 21px;
    margin-right: 6px;
}
div.optiondial.refresh {
    width: 31px;
    margin-left: -6px;
    margin-right: 6px;
}

div.optiondial.num_columns { background-image: url("images/dial_num_columns.png"); }
div.optiondial.num_columns.off { background-image: url("images/dial_num_columns_off.png"); }

div.optiondial.refresh { background-image: url("images/dial_refresh.png"); }
div.optiondial.refresh.off { background-image: url("images/dial_refresh_off.png"); }

div.view_form {
    margin-bottom: 10px;
}

/*-------------------------------------------------------------------------.
|                _                            _                            |
|               | |    __ _ _   _  ___  _   _| |_ ___                      |
|               | |   / _` | | | |/ _ \| | | | __/ __|                     |
|               | |__| (_| | |_| | (_) | |_| | |_\__ \                     |
|               |_____\__,_|\__, |\___/ \__,_|\__|___/                     |
|                           |___/                                          |
+--------------------------------------------------------------------------+
| Styles used by layouts of the views (plugins/views/layouts.py)           |
'-------------------------------------------------------------------------*/


td.fillup {
    background-color: #eee;
}
td.groupheader {
    margin: 0;
    padding: 0;
}

table.data tr.data > td.gap,
table.data tr > td.last_col,
table.data tr > th.last_col {
    border-right: 0;
}

td.gap, table.data .checkbox_hover.gap {
    background-image: url("images/contentframe_background.jpg");
    background-attachment: fixed;
    background-repeat: repeat;
    width: 5px;
}

/* boxed layout */
table.boxlayout {
    border-spacing: 0px;
}
table.boxlayout td.boxcolumn {
    padding-right: 20px;
}


/* tiled layout */
table.tiled td {
    border-style: none;
}

.tile {
    width: 180px;
    border: 1px solid #000;
    float: left;
    border-radius: 0px;
    margin-right: 6px;
    margin-bottom: 6px;
    box-shadow: 1px 1px 3px #000;
    background-color: #ccc;
}

.tile img.icon {
    width: 16px;
    height: 16px;
}

.tile table {
    height: 70px;
}
.tile td {
    border-style: none;
    font-size: 7pt;
}
.tile.sstate0, .tile.hhstate0 {
    border-color: #0f0;
}
.tile.sstate1 {
    border-color: #ff0;
    background-color: #ff0;
}
.tile.sstate2, .tile.hhstate1 {
    border-color: #f00;
    background-color: #f88;
}
.tile.sstate3, .tile.hhstate2 {
    border-color: #f80;
    background-color: #fc8;
}

.tile table {
    width: 100%;
}
.tile td.tl, .tile td.bl {
    text-align: left;
}
.tile td.tr, .tile td.br {
    text-align: right;
}
.tile td.center {
    vertical-align: middle;
}
.tile td.center, .tile td.cont {
    text-align: center;
}
.tile td.bl, .tile td.br {
    vertical-align: bottom;
}

.tile td.bl, .tile td.br, .tile td.tl, .tile td.tr {
    height: 20px;
}

/*
 LAYOUT: dataset
 The dataset layout is used to display detailed information
 about a single host/service on a page. e.g. the "host defails"
 page uses thislayout
*/
table.data.single {
    margin-top: 5px;
    border-spacing: 1px;
    padding: 0;
    border-collapse: collapse;
    empty-cells: show;
}

table.data.single tr.data > td {
    padding-bottom: 4px;
    padding: 4px 5px 2px 5px;
    text-align: left;
    height: 16px;
    line-height: 14px;
    vertical-align: top;
}

table.data.single tr.data td.left {
    width: 10%;
    white-space: nowrap;
    vertical-align: top;
    padding-right: 20px;
}

table.data.matrix {
    width: auto;
    margin-bottom: 10px;
}

table.data.matrix tr.even0 td.left,
table.data.single tr.even0 td.left {
    background-color: #bbb;
}

table.data.matrix tr.odd0 td.left,
table.data.single tr.odd0 td.left {
    background-color: #ccc;
}

table.data.matrix tr.even0 td.matrixhead {
    background-color: #888;
    color: white;
}

table.data.matrix tr.odd0 td.matrixhead {
    background-color: #999;
    color: white;
}

table.data.matrix td.cell {
    padding: 0px;
}

table.data.matrix td.cell table {
    width: 100%;
    padding: 0px;
}

table.data.matrix table.cell > tbody > tr > td {
    padding: 0px;
    border: 1px solid red;
}

table.data.matrix tr.matrixhead td.left a,
table.data.matrix tr.matrixhead td.left {
    color: white;
}

.even0 .minority {
    background-color: #cff;
}
.odd0 .minority {
    background-color: #dff;
}

table.data.matrix tr.even0 td.left.minority {
    background-color: #bdd;
}
table.data.matrix tr.odd0 td.left.minority {
    background-color: #cee;
}


table.data.single td.gap {
    background-color: transparent;
    border-left-style: none;
    border-right-style: none;
}
table.data.single td.age,
table.data.single td.number,
table.data.single td.count {
    text-align: left;
}

table.data.single td.perfometer div.content {
    width: 100%;
}
table.data.single td.perfometer div.glass {
    width: 100%;
}
table.data.single td.perfometer div.title {
    width: 100%;
}

/*-------------------------------------------------------------------------.
|              _____    _ _ _           _                                  |
|             | ____|__| (_) |_  __   _(_) _____      __                   |
|             |  _| / _` | | __| \ \ / / |/ _ \ \ /\ / /                   |
|             | |__| (_| | | |_   \ V /| |  __/\ V  V /                    |
|             |_____\__,_|_|\__|   \_/ |_|\___| \_/\_/                     |
|                                                                          |
+--------------------------------------------------------------------------+
| Styles used while editing a view in the view editor                      |
'-------------------------------------------------------------------------*/

div.clear {
    clear: left;
}

input#try{
    float:left;
}


/*-------------------------------------------------------------------------.
|       _     _     _            __         _                              |
|      | |   (_)___| |_    ___  / _| __   _(_) _____      _____            |
|      | |   | / __| __|  / _ \| |_  \ \ / / |/ _ \ \ /\ / / __|           |
|      | |___| \__ \ |_  | (_) |  _|  \ V /| |  __/\ V  V /\__ \           |
|      |_____|_|___/\__|  \___/|_|     \_/ |_|\___| \_/\_/ |___/           |
|                                                                          |
+--------------------------------------------------------------------------+
| The table with the list of all views                                     |
'-------------------------------------------------------------------------*/

table.views {
    border-collapse: collapse;
    empty-cells: show;
    margin-bottom: 1ex;
}

table.views td, table.views th{
    border: 1px solid #444;
    padding: 2px 1ex;
}

table.views td {
    height: 25px;
    padding-top: 3px;
    color: #fff;
}

table.views th {
    background-color: #709aa5;
    color: #fff;
}

table.views td.legend {
    background-color: #8eaeb8;
    color: #fff;
}

table.views td.content {
    background-color: #9ebec8;
    color: #fff;
}

table.views td.edit {
    background-color: #6ab;
    text-align: center;
}

table.views td.buttons {
    padding: 3px;
    vertical-align: middle;
    background-color: #8EAEB8;
}

/* Availability */
table.data.availability {
    width: 100%;
}

table.data.availability td.number {
    width: 60px;
}

table.data.availability td.unused {
    color: #888;
    text-shadow: 1px 1px 0.5px #fff;
}

table.data.availability tr.summary {
    background-color: #bbb;
}
table.data.availability tr.summary td {
    border-top: 1px solid black;
    font-weight: bold;
    border-bottom-style: none;
    padding-bottom: 1px;
    padding-top: 1px;
}


table.data td.flapping, table.timeline td.flapping, div.avlegend.timeline div.state.flapping {
    background-color: #f0f;
}
table.data td.downtime, table.timeline td.downtime, div.avlegend.timeline div.state.downtime {
    background-color: #0af;
}
table.data td.hostdown, table.timeline td.hostdown, div.avlegend.timeline div.state.hostdown {
    background-color: #048;
    color: white;
}
table.data td.unmonitored, table.timeline td.unmonitored, div.avlegend.timeline div.state.unmonitored  {
    background-color: #cacaca;
    color: #888;
}
table.timeline td.ooservice, div.avlegend.timeline div.state.ooservice {
    background-color: #cacaca;
    background-image: url("images/ooservice.png");
    background-repeat: repeat;
}
table.data.availability tr.odd0 td.number {
    background-image: url("images/white_30percent.png");
    background-repeat: repeat;
}

table.data.availability td.number.stats {
    background-image: url("images/white_30percent.png");
}

table.data.availability tr.odd0 td.number.stats {
    background-image: url("images/white_50percent.png");
}


div.floatfilter.rangespec table.valuespec_tuple {
    width: 100%;
}

div.floatfilter.rangespec table.valuespec_tuple span.title {
    position: relative;
    top: 7px;
}

div#avoptions_on {
    margin-right: 3px;
}

table.data tr.data > td.timeline {
    width: 500px;
    padding: 0px;
}

table.timeline {
    height: 30px;
    border-spacing: 0px;
    border-collapse: collapse;
}

table.timeline.low {
    height: 5px;
    margin-top: -18px;
    border-spacing: 0px;
    border-collapse: collapse;
}

table.timeline.standalone {
    box-shadow: 0px 0px 1px #ccf;
    margin-bottom: 20px;
    width: 800px;
}

table.timeline.inline {
    border-style: none;
    width: 500px;
}
table.timeline.inline {
    border-style: none;
    width: 500px;
    box-shadow: 0px 0px 1px #555 inset;
}

table.timeline td {
    padding: 0px;
    border-style: none;
}

table.timeline td.hilite {
    padding: 0px;
    border-style: none;
    background-color: #0091b6;
    filter: brightness(80%);
}

table.timeline td.chaos {
    background-color: #8844ff;
}

table.timeline.standalone td {
    border: 1px solid #444;
}

div.timelinerange {
    position: relative;
}

/* We render the small vertical lines in a way that only
   the left border is visible but the thing is thick 5 pixels.
   That makes hovering over it more easy. */
div.timelinerange div.timelinechoord {
    position: absolute;
    top: 0px;
    width: 5px;
    height: 30px;
    border-style: none none none solid;
    border-width: 0px 0px 0px 1px;
    border-color: #666;
}

table.timelineevents {
    width: 800px;
}
table.data.oddeven.timelineevents > tbody > tr.hilite {
    background-color: #6ab;
    color: white;
}
div.timelinerange {
    width: 800px;
    float: none;
}
div.timelinerange.inline {
    width: 500px;
}
div.timelinerange div {
    width: 300px;
    float: left;
}
div.timelinerange div.until {
    text-align: right;
    float: right;
}

table.data.timewarp {
    width: 800px;
    margin-bottom: 20px;
}

div.avlegend {
    background-color: rgba(255, 255, 255, 0.2);
    padding: 5px 15px;
    border-radius: 5px;
    margin-top: 10px;
    text-align: right;
}
div.avlegend h3 {
    margin-top: 0px;
    font-size: 13px;
    color: black;
}
div.avlegend div {
    display: inline-block;
    width: 50px;
    white-space: nowrap;
    margin-right: 5px;
}
div.avlegend div.state {
    text-align: center;
    padding: 2px 0px;
    font-size: 12px;
}
div.avlegend div:last-child {
    margin-right: 0px;
}
div.avlegend.levels div.level {
    margin-right: 15px;
    color: black;
}

div.avlegend.timeline div.state {
    width: 75px;
}
div.avlegend.timeline div.state.ooservice {
    color: black;
}


/*--Inventory--------------------------------------------------------------.
|            ___                      _                                    |
|           |_ _|_ ____   _____ _ __ | |_ ___  _ __ _   _                  |
|            | || '_ \ \ / / _ \ '_ \| __/ _ \| '__| | | |                 |
|            | || | | \ V /  __/ | | | || (_) | |  | |_| |                 |
|           |___|_| |_|\_/ \___|_| |_|\__\___/|_|   \__, |                 |
|                                                   |___/                  |
+--------------------------------------------------------------------------+
| Styles for displaying HW/SW-Inventory data                               |
'-------------------------------------------------------------------------*/

td.invtree {
    width: 100%;
}

td.invtree b.treeangle.title {
    color: black;
    font-weight: normal;
}

td.invtree ul.treeangle {
    margin: 0px;
    margin-bottom: 3px;
}

td.sla_spec table,
td.invtree table,
td.agent_config table {
   border-collapse: collapse;
   border: 0.5px solid black;
   box-shadow: 0.5px 0.5px 1px #ccc;
   margin-top: 3px;
}

td.invtree table td,
td.invtree table th,
table.data.single tr.data td.invtree table td,
table.data.single tr.data td.invtree table th
{
    border: 1px solid #888;
    padding: 1px 5px;
    height: 14px;
}

/* Make td class of invtree more specific, when shown in single dataset mode */
/* td.data.single td.invtree td.number { */
table.data.single td.invtree td.number {
    text-align: right;
}


td.invtree table th {
    text-align: left;
}

td.invtree table td {
    background-color: #fff;
}

td.invtree span.invold, span.invold table.data {
    color: #ff0000;
}

td.invtree span.invnew, span.invnew table.data {
    color: #00bf00;
}

/* Positioning of the link from an inventory dicttable to the matching multisite table */
div.invtablelink {
    position: absolute;
    top: -17px;
    right: 1px;
}


td.if_state.if_state_up {
    background-color: #00c020;
    box-shadow: 0px 0px 3px #ccffcc inset;
}

td.if_state.if_state_down {
    background-color: #bc5b4e;
    box-shadow: 0px 0px 2px #000 inset;
}

td.if_state.if_state_other {
    background-color: #c020c0;
    box-shadow: 0px 0px 2px #000 inset;
}

td.if_state {
    color: white;
    box-shadow: 0.5px 0.5px 2px #000 inset;
    text-align: center;
    font-weight: bold;
    width: 50px;
}

td.if_state.if_available {
    color: black;
    background-color: #80ff40;
}

td.if_state.if_not_available {
    color: black;
    background-color: #cccccc;
}






table.data.headerleft.sla th {
    width: 130px;
    text-align: left;
    padding: 4px 5px;
}

table.data.headerleft.sla a {
    color: white;
    text-decoration: underline;
}

table.data.headerleft.sla th.sla_state {
    width: 30px;
}

table.data.headerleft.sla th.sla_date,
table.data.headerleft.sla td.sla_date{
    width: 120px;
    padding-right: 4px;
}

table.data.headerleft.sla th.sla_duration{
    text-align: left;
}

table.data.headerleft.sla td.sla_duration{
    text-align: right;
    padding-right: 4px;
}

table.data.headerleft.sla td.sla_output{
    width: 70%;
    padding-left: 4px;
}

table.data.headerleft.sla td {
    padding: 0px;
}

table.data.headerleft.sla {
    margin-bottom: 20px;
}

table.timeline.standalone.sla td {
    border: 0px solid #444;
    padding: 0px;
}

table.timeline.standalone.sla  {
    margin-bottom: 5px;
}

table.timeline.standalone.sla.period  {
    margin-bottom: 5px;
    height: 10px;
}

table.timeline td.state0.even{
    background-color: #0b3;
}

table.timeline td.state0.odd{
    background-color: #092;
}

table.timeline td.state2.even{
    background-color: #f00;
}

table.timeline td.state2.odd{
    background-color: #900;
}

div.sla_details{
    background-color: #73a1b4;
}

td.sla > div.foldable > b{
    color: black;
}

h2.sla {
    margin-bottom: 3px;
}

h3.sla {
    margin-top: 3px;
}

table.data tr.sla_horizontal_line > td.sla_horizontal_line {
    height: 1px;
}

table.data tr.sla_horizontal_line > td.sla_horizontal_line.black {
    height: 1px;
    border-bottom: 1px solid black;
}


table.timeline.sla td.sla_hilite,
table.data.oddeven > tbody > tr.sla_hilite {
    padding: 0px;
    border-style: none;
    filter: brightness(70%);
}

table.timeline.sla td.sla_hilite.sla_error_hilite,
table.data.oddeven > tbody > tr.sla_hilite.sla_error_hilite {
    padding: 0px;
    border-style: none;
    filter: brightness(50%);
}

div.timelinerange.sla {
    width: auto;
    float: none;
}


div#avoptions td.dictleft {
    width: 99%;
}

div#avoptions td.dictright {
    padding-right: 4px;
}