application/views/css/base-sass/reports.sass

   1 /* progress bar ***************************************************************
   2
   3 #progress
   4         margin-left: 40%
   5         em
   6                 /*display: block;
   7                 margin-top: 12px
   8
   9 /* response ********************************************************************
  10
  11 #response
  12         margin-left: 0px
  13         padding-top: 0px
  14         background: #f9f9f5 url(images/bg.png) repeat-x
  15         h1
  16                 font: bold 12px arial,helvetica,sans-serif
  17                 display: none
  18         ul
  19                 padding: 7px 2px 5px 33px
  20                 margin: 0px
  21                 margin-bottom: 7px
  22                 width: auto
  23                 background: transparent 10px 8px no-repeat
  24         li
  25                 background: none
  26                 padding: 2px 0px
  27                 width: auto
  28                 list-style: none
  29         ul
  30                 &.ok
  31                         background-image: url(icons/16x16/shield-ok.png)
  32                 &.error
  33                         background-image: url(icons/16x16/shield-error.png)
  34                 &.warning
  35                         background-image: url(icons/16x16/shield-warning.png)
  36                 &.info
  37                         background-image: url(icons/16x16/shield-info.png)
  38                 &.help
  39                         background-image: url(icons/16x16/shield-help.png)
  40
  41 /* id:s ********************************************************************
  42
  43 #display_service_status
  44         display: none
  45
  46 #log_entries
  47         padding-bottom: 15px
  48
  49 a#optiontoggle
  50         margin: 5px
  51
  52 #new_schedule_report_table
  53         width: auto
  54
  55 #switcher
  56         margin-top: -15px
  57
  58 #save_to_schedule em
  59         font-style: italic
  60
  61 .action
  62         img
  63                 margin-left: 5px
  64                 margin-top: 2px
  65                 width: 16px
  66                 height: 16px
  67         a
  68                 border: 0 !important
  69
  70 .report-page-setup, .report-page
  71         padding: 0px 16px
  72
  73 .report-page-setup td > label
  74         margin: 4px 0
  75         display: inline-block
  76
  77 .pie-chart
  78         display: block
  79         float: left
  80         width: auto
  81         margin-right: 7px
  82
  83 .chart-border
  84         border: 1px solid #dcdcdc
  85
  86 .report-chart-fullwidth
  87         min-width: 10px
  88         min-height: 10px
  89
  90 .log_messages
  91         clear: both
  92         float: left
  93
  94 .headerNone.left
  95         text-align: left
  96
  97 /* tables **********************************************************************
  98
  99 caption
 100         padding-left: 0px
 101
 102 .setup-table
 103         border: 0px
 104         padding: 0px
 105         margin: 0px
 106         border-spacing: 0px
 107         border-collapse: collapse
 108         table tr td
 109                 border: 0px
 110                 background-color: transparent
 111
 112 #new_schedule_report_table tr td
 113         background: none
 114         vertical-align: top
 115         width: auto
 116
 117 tr#pdf-hide td
 118         background: transparent
 119         margin-top: 5px
 120         text-align: right
 121         padding-right: 2px
 122
 123 th.headerNone
 124         white-space: nowrap
 125         text-align: right
 126
 127 tr
 128         &.dark td, &.odd td.dark
 129                 border: 1px solid #dcdccd
 130                 border-left: 0px
 131                 background: #efefef
 132                 border-top: 0px
 133                 padding-top: 2px
 134                 padding-bottom: 2px
 135         &.even td.dark
 136                 border: 1px solid #dcdccd
 137                 border-left: 0px
 138                 background: #efefef
 139                 border-top: 0px
 140                 padding-top: 2px
 141                 padding-bottom: 2px
 142                 padding: 2px 5px
 143                 border-left: 1px solid #dcdcdc
 144                 vertical-align: bottom
 145                 width: auto
 146                 text-align: left
 147         &.dark td.data, &.odd td.data, &.even td.data
 148                 text-align: right
 149                 white-space: nowrap
 150
 151 .summary
 152         text-align: right
 153         &.tally.nonzero
 154                 &.ok, &.up
 155                         @include background(linear-gradient(top, transparentize($status-green-hi, 0.50), transparentize($status-green-lo, 0.50)))
 156                         @include filter-gradient(transparentize($status-green-hi, 0.50), transparentize($status-green-lo, 0.50), vertical)
 157                 &.warning, &.unreachable
 158                         @include background(linear-gradient(top, transparentize($status-yellow-hi, 0.50), transparentize($status-yellow-lo, 0.50)))
 159                         @include filter-gradient(transparentize($status-yellow-hi, 0.50), transparentize($status-yellow-lo, 0.50), vertical)
 160                 &.critical, &.down
 161                         @include background(linear-gradient(top, transparentize($status-red-hi, 0.50), transparentize($status-red-lo, 0.50)))
 162                         @include filter-gradient(transparentize($status-red-hi, 0.50), transparentize($status-red-lo, 0.50), vertical)
 163                 &.unknown
 164                         @include background(linear-gradient(top, transparentize($status-orange-hi, 0.50), transparentize($status-orange-lo, 0.50)))
 165                         @include filter-gradient(transparentize($status-orange-hi, 0.50), transparentize($status-orange-lo, 0.50), vertical)
 166                 &.undetermined
 167                         @include background(linear-gradient(top, $gradient-dark-hi / 1.2, $gradient-dark-lo / 1.2))
 168                         @include filter-gradient($gradient-dark-hi / 1.2, $gradient-dark-lo / 1.2, vertical)
 169
 170 tr
 171         &.odd td.data img, &.even td.data img, &.dark td.data img
 172                 margin-bottom: -1px
 173         &.none td
 174                 border: 0px
 175                 background: #ffffff
 176
 177 table.setup-tbl
 178         tr td
 179                 padding: 0px 5px 0px 0px
 180                 border: 0
 181         input
 182                 background: #fafafa
 183                 border: 1px solid #cccccc
 184                 -moz-border-radius: 4px
 185                 -webkit-border-radius: 4px
 186                 border-radius: 4px
 187                 padding: 3px 1px
 188                 margin-top: 3px
 189                 margin-left: 0px
 190                 margin-bottom: 15px
 191                 &[type=text]
 192                         width: 378px
 193
 194 #new_schedule_report_table tr td
 195         padding: 0px 15px 0px 0px
 196
 197 table.white-table tr.no-result td
 198         background: #ffffff
 199         font-style: italic
 200         padding-left: 0px
 201
 202 /* time picker *********************************************************************************
 203
 204 div
 205         &.time-picker
 206                 position: absolute
 207                 height: 200px
 208                 width: 9em
 209                 /* needed for IE
 210                 overflow: auto
 211                 background: #ffffff
 212                 border: 1px solid #d0d0d0
 213                 z-index: 99
 214         &.time-picker-12hours
 215                 width: 6em
 216                 /* needed for IE
 217         &.time-picker
 218                 ul
 219                         list-style-type: none
 220                         margin: 0
 221                         padding: 0
 222                 li
 223                         padding: 1px
 224                         cursor: pointer
 225                         &.selected
 226                                 background: #316aC5
 227                                 color: #fff
 228
 229 .time_error
 230         border: 1px solid red
 231         color: red
 232
 233 /* tab specifics *********************************************************************************
 234
 235 .ui-widget-content
 236         border: 0px
 237         background: #ffffff
 238         color: #222222
 239
 240 .ui-widget-header
 241         border: 0px
 242         background: #cdcdcd url(images/bg.png) repeat-x
 243         border-bottom: 1px solid #cdcdcd
 244         color: #222222
 245         font-weight: bold
 246
 247 .ui-state-default, .ui-widget-content .ui-state-default
 248         border: 1px solid #cdcdcd
 249         background: #dddddd url(images/bg.png) repeat-x
 250         font-weight: normal
 251         color: #555555
 252         outline: none
 253
 254 .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus
 255         border: 1px solid #cdcdcd
 256         background: #aaaaaa url(images/bg.png) repeat-x
 257         font-weight: normal
 258         color: #212121
 259         outline: none
 260
 261 .ui-state-active, .ui-widget-content .ui-state-active
 262         border: 1px solid #cdcdcd
 263         background: #ffffff
 264         font-weight: normal
 265         color: #212121
 266         outline: none
 267
 268 .ui-corner-all
 269         -moz-border-radius: 0px
 270         -webkit-border-radius: 0px
 271
 272 /**********************************************************************
 273
 274 input[type=text], input[type=password], select, textarea
 275         background: $input_background_color
 276         border: 1px solid $border-color-light
 277         -moz-border-radius: 4px
 278         -webkit-border-radius: 4px
 279         padding: 3px 1px
 280         margin-top: 3px
 281         margin-left: 0px
 282
 283 select
 284         width: 382px
 285         padding: 2px 1px
 286         &[multiple=multiple]
 287                 padding: 3px
 288                 width: 380px
 289         &:hover
 290                 background-color: $gradient-dark-lo
 291
 292 select.auto
 293         width: auto
 294
 295 button, input[type=reset], input[type=submit], input[type=button]
 296         background: #cdcdcd url(images/bg.png) repeat-x
 297         border: 1px solid #cccccc
 298         cursor: pointer
 299         -moz-border-radius: 4px
 300         -webkit-border-radius: 4px
 301         padding: 2px 5px !important
 302         margin-bottom: 5px
 303         &:hover
 304                 background-color: #a0a0a0
 305
 306 input
 307         &[type=button], &[type=submit], &[type=reset], &[type=checkbox], &[type=radio]
 308                 width: auto
 309         &[type=checkbox], &[type=radio]
 310                 margin: 0px
 311                 margin-bottom: 5px
 312                 border: 0px
 313         &.sla_month
 314                 width: 30px
 315         &.wide
 316                 padding: 2px 4px
 317                 width: 460px
 318                 margin: 0px
 319                 margin-top: 3px
 320
 321 .form-dropdown
 322         padding: 10px
 323         background: #cdcdcd url(images/bg.png) repeat-x
 324         border: 1px solid #dcdcdc
 325         display: none
 326         input, form
 327                 margin: 0
 328
 329 textarea
 330         width: 378px
 331
 332 select#period.popup
 333         margin-top: 3px
 334         width: 100px
 335
 336 /* alert summary specifics ********************************************
 337
 338 input#summary_items
 339         width: 50px
 340
 341 td
 342         &.iseditable input, &.report_name select, &.period_select select
 343                 width: auto
 344                 display: block
 345                 margin-bottom: 5px
 346
 347 .txtarea textarea
 348         display: block
 349         margin-bottom: 5px
 350
 351 .output
 352         white-space: normal
 353         border: 0 !important
 354         margin: 0
 355         padding: 0
 356         tr, td
 357                 white-space: normal
 358                 border: 0 !important
 359                 margin: 0
 360                 padding: 0
 361
 362 .comments
 363         text-align: right
 364         .author
 365                 font-style: italic
 366
 367 .editing-comments
 368         min-width: 40%
 369
 370 .host_alerts td
 371         width: 25%
 372
 373 /* a report block is a logical unit that contains information
 374
 375 .report-block
 376         width: 100%
 377         float: none
 378         clear: both
 379         padding-top: 2em
 380         td
 381                 word-wrap: break-word
 382                 word-break: break-all
 383                 overflow-wrap: break-word
 384
 385 #mv_hg_l, #mv_hg_r,
 386 #mv_sg_l, #mv_sg_r,
 387 #mv_s_l, #mv_s_r,
 388 #mv_h_l, #mv_h_r
 389         height: auto
 390         padding-bottom: 4px
 391         margin: 1px 1px