icingaweb2/public/css/icinga/layout.less

/*! Icinga Web 2 | (c) 2013-2015 Icinga Development Team | GPLv2+ */

#footer {
  bottom: 0;
  left: 0;
  right: 0;
  position: fixed;
  z-index: 999;
}

#guest-error {
  background-color: @icinga-blue;
  height: 100%;
  overflow: auto;
}

#guest-error #icinga-logo {
  .fadein();
}

#guest-error-message {
  .fadein();
  color: @body-bg-color;
  font-size: 2em;
}

#header-logo-container,
#login,
#main > .container,
#menu {
  font-size: @font-size;
  line-height: @line-height;
}

#header {
  background-color: @icinga-blue;
}

#header-logo-container {
  height: 4em;
  margin-bottom: 0.2em;
  margin-left: 1.5em;
  margin-top: 0.2em;
  width: 100px;
}

#header-logo {
  background-image: url('../img/logo_icinga-inv.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: block;
  height: 100%;
}

#icinga-logo {
  background-image: url('../img/logo_icinga_big.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain; // Does not work in IE < 10
  height: 177px;
  margin-bottom: 2em;
  width: 100%;
}

#layout {
  background-color: @body-bg-color;
  color: @text-color;
  font-family: @font-family;
}

#login {
  overflow: auto;
}

@gutter: 1em;

// x-column-layout

#main {
  .clearfix();

  & > .container {
    float: left;
    // Column width controlled by #layout
    width: 100%;

    // Container scrolling
    height: 100%;
    overflow: auto;

    & > .content {
      padding: @gutter;
      z-index: 2;
    }

    & > .controls {
      z-index: 3;

      > * {
       margin-left: @gutter !important;
       margin-right: @gutter !important;
      }
    }

    // 1em gutter of containers is maintained by padding of content and margin of every element in controls. We're not
    // setting padding to .container because else horizontally scrolled .content may overflow .controls when scrolled
    // vertically
  }
}

#sidebar {
  background-color: @gray-lighter;
}

.container {
  // Don't outline containers when focused because they receive focus for accessibility only programmatically
  outline: none;
}

.controls {
  // Override default transparent background because scrolled content is positioned beneath controls and could be seen
  // through otherwise
  background-color: @body-bg-color;

  > .tabs {
    height: 2.6em;
    margin-top: -2.6em;
    overflow: hidden;
  }

  > .tabs-spacer {
    margin-bottom: 1em;
  }
}

// Display tabs if JS is disabled
html.no-js .controls > .tabs {
  background-color: @icinga-blue;
  margin-left: -1 * @gutter;
  margin-right: -1 * @gutter;
  margin-top: -1 * @gutter;
}

// Dashboard grid

.dashboard {
  letter-spacing: -0.417em;

  > .container {
    display: inline-block;
    letter-spacing: normal;
    vertical-align: top;
    // Column width controlled by #layout
    width: 100%;

    &:last-of-type {
      // See reponsive.less for gutters
      padding-right: 0;
    }
  }
}

// Notification styles

#notifications {
  margin: 0;
  padding: 0;
}

#notifications > li {
  list-style-type: none;
  display: block;
  border-top: 1px solid #999;
  color: white;
  line-height: 2.5em;
  padding-left: 3em;
  background-repeat: no-repeat;
  background-position: 1em center;
}

#notifications > li:hover {
  cursor: pointer;
}

#notifications > li.info {
  background-color: @colorFormNotificationInfo;
}

#notifications > li.warning {
  background-color: @colorWarningHandled;
}
#notifications > li.error {
  background-color: @colorCritical;
  background-image: url(../img/icons/error_white.png);
}

#notifications > li.success {
  background-color: #fe6;
  background-image: url(../img/icons/success.png);
  color: #333;
}