Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

$warning: #f0ad4e;
$info: #5bc0de;
$error: #d9534f;
$min-width: 1024px;
$font-size: 13px;

$types:(
  "debug": $warning,
  "info": $info,
  "notice": $info,
  "emergency": $error,
  "alert": $error,
  "critical": $error,
  "error": $error
);

$cells:(
  "date": 5%,
  "logger": 5%,
  "level": 4%,
  "message": 86%,
  "extra": 50%,
  "context": 50%
);

.log-line{
  display: table;
  width: 100%;
  height:30px;
  padding:5px;
  border:1px solid #eee;
  border-left-width: 5px;
  margin:0 auto;
  font-family: 'Ubuntu', sans-serif;
  font-size: $font-size;
}

@each $column, $size in $cells {
  .log-#{$column}{
    display: table-cell;
    padding: 5px;
    width: $size;
  }
}

#wrapper {
  padding-left: 0;
  transition: all 0.5s ease;
  
  @media(min-width: $min-width){
    padding-left: 250px;
  }
  
  &.toggled{
    padding-left: 200px;
    
    @media(min-width: $min-width){
      padding-left: 0;
    }
  }
}

#sidebar-wrapper{
  z-index:1000;
  position:fixed;
  left:250px;
  width: 0;
  height: 100%;
  margin-left: -250px;
  overflow-y: auto;
  background: #000;
  transition: all 0.5s ease;
  
  @media(min-width: $min-width){
    width:250px;
  }
}

#wrapper.toggled #sidebar-wrapper{
  width: 250px;
  
  @media(min-width: $min-width){
    width: 0;
  }
}

#page-content-wrapper{
  width: 100%;
  position:absolute;
  
  @media(min-width: $min-width){
    position: relative;
  }
}

#wrapper.toggled #page-content-wrapper{
  position:absolute;
  margin-right: -250px;
  
  @media(min-width: $min-width){
    position:relative;
    margin-right: 0;
  }
}

ul.sidebar-form-bottom{
  position:fixed;
  top:723px;
  left: -34px;
  
  input#form-ws-host{
    width: 157px;
  }
  
  input#form-ws-port{
    width: 51px;
  }
}

ul.sidebar-nav{
  position: absolute;
  top: 0;
  width: 250px;
  margin: 0;
  padding: 0;
  list-style: none;
  
  >.sidebar-brand{
    height: 65px;
    font-size: 18px;
    line-height: 60px;
    
    a{
      color: #999;
      
      &:hover{
        color: #fff;
        background: none;
      }
    }
  }
  
  li {
    text-indent: 20px;
    line-height: 40px;
    
    a{
      display: block;
      text-decoration:none;
      color:#999;
      
      &:hover{
        text-decoration: none;
        color: #fff;
        background: rgba(255, 255, 255, 0.2);
      }
      
      &:active, &:focus {
        text-decoration: none;
      }
    }
  }
}

@each $type, $color in $types {
    .#{$type} {
        background-color: $color;
    }
    
    .log-line-#{$type} {
      border-left-color: $color;
      background-color: rgba($color, 0.1);
      
      &:hover, &:focus{
        background-color: rgba($color, 0.5);
        border-left-color: $color;
        box-shadow: -0.5px 1px 30px 1px rgba(0, 0, 0, 0.1) inset;
      }
    }
    
    .label-#{$type} {
      background-color: $color;
    }
}

SassMeister-output.css

.log-line {
  display: table;
  width: 100%;
  height: 30px;
  padding: 5px;
  border: 1px solid #eee;
  border-left-width: 5px;
  margin: 0 auto;
  font-family: 'Ubuntu', sans-serif;
  font-size: 13px;
}

.log-date {
  display: table-cell;
  padding: 5px;
  width: 5%;
}

.log-logger {
  display: table-cell;
  padding: 5px;
  width: 5%;
}

.log-level {
  display: table-cell;
  padding: 5px;
  width: 4%;
}

.log-message {
  display: table-cell;
  padding: 5px;
  width: 86%;
}

.log-extra {
  display: table-cell;
  padding: 5px;
  width: 50%;
}

.log-context {
  display: table-cell;
  padding: 5px;
  width: 50%;
}

#wrapper {
  padding-left: 0;
  transition: all 0.5s ease;
}

@media (min-width: 1024px) {
  #wrapper {
    padding-left: 250px;
  }
}

#wrapper.toggled {
  padding-left: 200px;
}

@media (min-width: 1024px) {
  #wrapper.toggled {
    padding-left: 0;
  }
}

#sidebar-wrapper {
  z-index: 1000;
  position: fixed;
  left: 250px;
  width: 0;
  height: 100%;
  margin-left: -250px;
  overflow-y: auto;
  background: #000;
  transition: all 0.5s ease;
}

@media (min-width: 1024px) {
  #sidebar-wrapper {
    width: 250px;
  }
}

#wrapper.toggled #sidebar-wrapper {
  width: 250px;
}

@media (min-width: 1024px) {
  #wrapper.toggled #sidebar-wrapper {
    width: 0;
  }
}

#page-content-wrapper {
  width: 100%;
  position: absolute;
}

@media (min-width: 1024px) {
  #page-content-wrapper {
    position: relative;
  }
}

#wrapper.toggled #page-content-wrapper {
  position: absolute;
  margin-right: -250px;
}

@media (min-width: 1024px) {
  #wrapper.toggled #page-content-wrapper {
    position: relative;
    margin-right: 0;
  }
}

ul.sidebar-form-bottom {
  position: fixed;
  top: 723px;
  left: -34px;
}

ul.sidebar-form-bottom input#form-ws-host {
  width: 157px;
}

ul.sidebar-form-bottom input#form-ws-port {
  width: 51px;
}

ul.sidebar-nav {
  position: absolute;
  top: 0;
  width: 250px;
  margin: 0;
  padding: 0;
  list-style: none;
}

ul.sidebar-nav > .sidebar-brand {
  height: 65px;
  font-size: 18px;
  line-height: 60px;
}

ul.sidebar-nav > .sidebar-brand a {
  color: #999;
}

ul.sidebar-nav > .sidebar-brand a:hover {
  color: #fff;
  background: none;
}

ul.sidebar-nav li {
  text-indent: 20px;
  line-height: 40px;
}

ul.sidebar-nav li a {
  display: block;
  text-decoration: none;
  color: #999;
}

ul.sidebar-nav li a:hover {
  text-decoration: none;
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
}

ul.sidebar-nav li a:active, ul.sidebar-nav li a:focus {
  text-decoration: none;
}

.debug {
  background-color: #f0ad4e;
}

.log-line-debug {
  border-left-color: #f0ad4e;
  background-color: rgba(240, 173, 78, 0.1);
}

.log-line-debug:hover, .log-line-debug:focus {
  background-color: rgba(240, 173, 78, 0.5);
  border-left-color: #f0ad4e;
  box-shadow: -0.5px 1px 30px 1px rgba(0, 0, 0, 0.1) inset;
}

.label-debug {
  background-color: #f0ad4e;
}

.info {
  background-color: #5bc0de;
}

.log-line-info {
  border-left-color: #5bc0de;
  background-color: rgba(91, 192, 222, 0.1);
}

.log-line-info:hover, .log-line-info:focus {
  background-color: rgba(91, 192, 222, 0.5);
  border-left-color: #5bc0de;
  box-shadow: -0.5px 1px 30px 1px rgba(0, 0, 0, 0.1) inset;
}

.label-info {
  background-color: #5bc0de;
}

.notice {
  background-color: #5bc0de;
}

.log-line-notice {
  border-left-color: #5bc0de;
  background-color: rgba(91, 192, 222, 0.1);
}

.log-line-notice:hover, .log-line-notice:focus {
  background-color: rgba(91, 192, 222, 0.5);
  border-left-color: #5bc0de;
  box-shadow: -0.5px 1px 30px 1px rgba(0, 0, 0, 0.1) inset;
}

.label-notice {
  background-color: #5bc0de;
}

.emergency {
  background-color: #d9534f;
}

.log-line-emergency {
  border-left-color: #d9534f;
  background-color: rgba(217, 83, 79, 0.1);
}

.log-line-emergency:hover, .log-line-emergency:focus {
  background-color: rgba(217, 83, 79, 0.5);
  border-left-color: #d9534f;
  box-shadow: -0.5px 1px 30px 1px rgba(0, 0, 0, 0.1) inset;
}

.label-emergency {
  background-color: #d9534f;
}

.alert {
  background-color: #d9534f;
}

.log-line-alert {
  border-left-color: #d9534f;
  background-color: rgba(217, 83, 79, 0.1);
}

.log-line-alert:hover, .log-line-alert:focus {
  background-color: rgba(217, 83, 79, 0.5);
  border-left-color: #d9534f;
  box-shadow: -0.5px 1px 30px 1px rgba(0, 0, 0, 0.1) inset;
}

.label-alert {
  background-color: #d9534f;
}

.critical {
  background-color: #d9534f;
}

.log-line-critical {
  border-left-color: #d9534f;
  background-color: rgba(217, 83, 79, 0.1);
}

.log-line-critical:hover, .log-line-critical:focus {
  background-color: rgba(217, 83, 79, 0.5);
  border-left-color: #d9534f;
  box-shadow: -0.5px 1px 30px 1px rgba(0, 0, 0, 0.1) inset;
}

.label-critical {
  background-color: #d9534f;
}

.error {
  background-color: #d9534f;
}

.log-line-error {
  border-left-color: #d9534f;
  background-color: rgba(217, 83, 79, 0.1);
}

.log-line-error:hover, .log-line-error:focus {
  background-color: rgba(217, 83, 79, 0.5);
  border-left-color: #d9534f;
  box-shadow: -0.5px 1px 30px 1px rgba(0, 0, 0, 0.1) inset;
}

.label-error {
  background-color: #d9534f;
}