web/htdocs/mobile.css

   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 /* Styles for Check_MK mobile interface */
  29
  30 body.mobile div.really,
  31 body.mobile div.success,
  32 body.mobile div.error,
  33 body.mobile div.message,
  34 body.mobile div.warning {
  35     width: 80%;
  36     margin: 1em 0px 3em 0px;
  37     padding: 0.5ex 1em;
  38     border-width: 2px;
  39     border-style: solid;
  40     border-radius: 0.5ex;
  41     text-align: center;
  42 }
  43
  44 body.mobile div.error {
  45     background-color: #fcc;
  46 }
  47
  48 body.mobile div.command_group a {
  49      color: black;
  50 }
  51
  52 body.mobile table.data {
  53     border-collapse: collapse;
  54     empty-cells: show;
  55 }
  56
  57 body.mobile table.data td {
  58     padding: 1px;
  59     border: 1px solid #ddd;
  60     padding: 2px 3px;
  61     overflow: hidden;
  62 }
  63
  64
  65 body.mobile table.dataset {
  66     width: 100%;
  67 }
  68
  69 body.mobile table.dataset tr.header {
  70     color: black;
  71 }
  72
  73 body.mobile table.dataset > tbody > tr.data > td {
  74     border-radius: 5px;
  75     border: 1px solid #aaa;
  76     padding: 4px 6px;
  77     font-size: 10pt;
  78 }
  79
  80 td.nonstatus {
  81     background-color: #fff;
  82 }
  83
  84 /* Forms for filters and commands */
  85 body.mobile table.form {
  86     width: 100%;
  87 }
  88 body.mobile table.form > tbody > tr > * {
  89     width: 100%;
  90 }
  91 body.mobile table.form th {
  92     border-style: none;
  93 }
  94
  95 body.mobile table.filtertime td {
  96     vertical-align: middle;
  97 }
  98 body.mobile table.filtertime div {
  99 }
 100 body.mobile table.filtertime div.ui-select {
 101     width: auto;
 102 }
 103 body.mobile table.alertstatefilter td {
 104     vertical-align: top;
 105 }
 106 body.mobile table.alertstatefilter .ui-checkbox {
 107     margin: 0;
 108 }
 109
 110 /* Perfometers */
 111
 112 body.mobile td.perfometer {
 113     height: 14px;
 114     width: 70px;
 115 }
 116
 117 body.mobile td.perfometer * {
 118     color: #333;
 119     font-weight: normal;
 120     font-size: 7pt;
 121     padding: 0px;
 122 }
 123
 124 body.mobile td.perfometer div.content {
 125    width: 69px;
 126    background-color: yellow;
 127 }
 128
 129 body.mobile td.perfometer div.title {
 130    top: 2px;
 131    width: 70px;
 132 }
 133
 134 body.mobile td.perfometer img.glass {
 135    width: 69px;
 136    height: 14px;
 137 }
 138
 139 body.mobile td.perfometer table {
 140     width: 70px;
 141     height: 14px;
 142 }
 143
 144 body.mobile table.data td.perfometer td.inner {
 145     height: 14px;
 146 }
 147
 148 .ui-header .ui-title, .ui-footer .ui-title {
 149         margin: .6em 46px .8em;
 150 }
 151
 152 /*-------------------------------------------------------------------------.
 153 |                    ____  _        _                                      |
 154 |                   / ___|| |_ __ _| |_ _   _ ___                          |
 155 |                   \___ \| __/ _` | __| | | / __|                         |
 156 |                    ___) | || (_| | |_| |_| \__ \                         |
 157 |                   |____/ \__\__,_|\__|\__,_|___/                         |
 158 |                                                                          |
 159 +--------------------------------------------------------------------------+
 160 | Styles for hiliting data cells in status displays                        |
 161 '-------------------------------------------------------------------------*/
 162 .ui-li-aside.state {
 163     width: 4.5em;
 164     text-align: center;
 165     border-radius: 5px;
 166     box-shadow: 0 0 2px #444444;
 167 }
 168
 169 td.pnpgraph img {
 170      max-width: 97%;
 171 }
 172
 173 body.mobile table.dataset tr.data td.state {
 174     font-size: 25px;
 175 }
 176 /*-------------------------------------------------------------------------.
 177 |                      _                _                                  |
 178 |                     | |    ___   __ _(_)_ __                             |
 179 |                     | |   / _ \ / _` | | '_ \                            |
 180 |                     | |__| (_) | (_| | | | | |                           |
 181 |                     |_____\___/ \__, |_|_| |_|                           |
 182 |                                 |___/                                    |
 183 +--------------------------------------------------------------------------+
 184 | Styles for the mobile version of the login dialog.                       |
 185 '-------------------------------------------------------------------------*/
 186
 187 #loginhead, #loginfoot {
 188     text-align: center;
 189     font-color: #444;
 190 }
 191 #loginhead {
 192     margin: 1em;
 193 }
 194 #loginfoot {
 195     margin-top: 1em;
 196 }
 197 #loginfoot.copyright {
 198     margin-top: 1em;
 199 }
 200 img.logomk {
 201     width: 25px;
 202     height: 25px;
 203     margin-bottom: 10px;
 204 }
 205
 206
 207 td.icons {
 208     vertical-align: middle;
 209 }
 210
 211 div.popup_trigger {
 212     display: inline-block;
 213 }
 214
 215 td.icons img {
 216     height: 40px;
 217     width: 40px;
 218     margin-left: 5px;
 219 }
 220
 221 td.icons a {
 222     padding-left: 8px;
 223 }
 224
 225 div.popup_trigger > div.popup_menu {
 226     display: inline-block;
 227 }
 228
 229 div.popup_trigger > div.popup_menu a {
 230     width: 40px;
 231     display: inline-block;
 232     overflow: hidden;
 233     color: black;
 234 }
 235 div.popup_trigger > div.popup_menu a img {
 236     margin-left: 0px;
 237 }
 238
 239 div.popup_trigger > div.popup_menu ul {
 240     padding: 0;
 241     margin: 0;
 242 }
 243
 244 div.popup_trigger > div.popup_menu li {
 245     display: inline-block;
 246     margin: 0px;
 247 }