icingaweb2/public/css/icinga/responsive.less

/*! Icinga Web 2 | (c) 2016 Icinga Development Team | GPLv2+ */

// Not growing larger than 3840px at 1em=16px right now
@media screen and (min-width: 240em) {
  #header {
    min-width: 240em;
  }

  #main {
    width: 227em;
  }
}

// More than 100em, usually 1600px at 1em=16px
@media screen and (min-width: 100em) {
  html {
    font-family: 'wide-layout';
  }
}

// Up to 1152px at 1em=16px
@media screen and (max-width:72em) {
  html {
    font-family: 'compact-layout';
  }
}

// Up to 752px at 1em=16px
@media screen and (max-width: 47em) {
  html {
    font-family: 'poor-layout';
  }
}

// Up to 576px at 1em=16px, should fit 320px devices
@media screen and (max-width: 36em) {
  html {
    font-family: 'minimal-layout';
  }
}

#layout.compact-layout {
  font-size: 0.875em;
}

#layout.poor-layout {
  font-size: 0.875em;

  #layout.twocols {
    #col1 {
      display: none;
    }

    #main > .container {
      width: 100%;
    }
  }

  .dashboard > div.container {
    width: 100%;
  }
}

#layout:not(.minimal-layout) {
  #mobile-menu-toggle {
    display: none;
  }
}

#layout.minimal-layout {
  #sidebar {
    width: 100%;
  }

  #header-logo-container {
    width: auto;
    height: 2.5em;
    padding: 0;
    background: inherit;
  }

  #header-logo {
    float: left;
    width: 6em;
    height: 2em;
    margin: .25em;
  }

  #mobile-menu-toggle {
    float: right;
  }

  #sidebar:not(.expanded) #menu {
    display: none;
  }

  #menu {
    -webkit-box-shadow: none;
       -moz-box-shadow: none;
            box-shadow: none;
  }

  #content-wrapper {
    flex-direction: column;
  }

  ul > .selected > a:after,
  ul > .nav-item.active:after {
    display: none;
  }

  .dashboard > div.container {
    width: 100%;
  }

  #login {
    #icinga-logo {
      max-width: 12em;
    }

    .login-wrapper {
      padding: 0 1em;
    }

    .login-form {
      width: 100%;
    }

    .login-form-content.centered-content {
      max-width: 100%;
    }
  }

  #social {
    width: 100%;
    text-align: center;
    bottom: 3em;
  }

  #social > li a i {
    color: gray;
    text-shadow: none;
  }
}

#layout.wide-layout {

  .login-wrapper {
    // use as centered-ghost
    text-align: center;
    vertical-align: middle;
    letter-spacing: -.417em;
  }

  // use as centered-ghost
  .login-wrapper:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }

  // use as centered-ghost
  .login-wrapper > * {
    letter-spacing: normal;
  }

  .login-form {
    // use as centered-content
    display: inline-block;
    vertical-align: middle;

    // Style as box
    width: 30em;
    margin: 0;
    border-radius: 1em;
    height: auto;
    padding: 12.5em 0 4em 0;
  }
}

// Dashboard

.dashboard > .container {
  padding-right: 0;
  width: 100%;
}

#layout:not(.twocols).default-layout .dashboard > .container:not(:only-child) {
  padding-right: @gutter;
  width: 50%;
}

#layout:not(.twocols).wide-layout .dashboard > .container:not(:only-child) {
  padding-right: @gutter;
  width: 33.33%;
}

// Columns

#layout.twocols #col2 {
  border-left: 1px solid @gray-lighter;
}

#layout.twocols > #main > .container {
  width: 50%;
}

#layout.twocols.wide-layout #col1 {
  width: 33.33%;
}

#layout.twocols.wide-layout #col2 {
  width: 66.66%;
}

// Safe areas for iPhone X

#header, #sidebar, #footer {
  padding-left: constant(safe-area-inset-left);
}

#main, #footer {
  padding-right: constant(safe-area-inset-right);
}