etcd/mod/dashboard/app/styles/browser.css

.etcd-container.etcd-browser {
  width: 100%;
  height: 500px;
}

.home-container .etcd-container.etcd-browser {
  height: 400px;
}

.etcd-container.etcd-browser .etcd-header {
  height: 37px;
}

.etcd-container.etcd-browser.etcd-preview-reveal .etcd-back {
  display: block;
}

.etcd-container.etcd-browser.etcd-preview-hide .etcd-back {
  display: block;
}

.etcd-container.etcd-browser.etcd-preview-reveal .etcd-add {
}

.etcd-container.etcd-browser.etcd-preview-hide .etcd-add {
}

.etcd-container.etcd-browser .etcd-header .etcd-browser-path {
  position: absolute;
  left: 72px;
  right: 0px;
  top: 0;
  margin: 6px 5px 6px 5px;
}

.etcd-container.etcd-browser .etcd-header .etcd-browser-path input {
  width: 100%;
  box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.etcd-container.etcd-browser .etcd-header .etcd-save {
  position: absolute;
  width: 54px;
  right: -55px;
  margin: 6px 0;
}

.etcd-container.etcd-browser.etcd-save-reveal .etcd-header .etcd-save {
  right: 7px;
}

.etcd-container.etcd-browser.etcd-save-reveal .etcd-header .etcd-browser-path {
  right: 62px;
}

.etcd-container.etcd-browser.etcd-save-hide .etcd-header .etcd-save {
  right: -55px;
}

.etcd-container.etcd-browser.etcd-save-hide .etcd-header .etcd-browser-path {
  right: 0px;
}

.etcd-container.etcd-browser .etcd-preview {
  position: absolute;
  left: 100%;
  min-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  top: 0px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  background-color: #fff;
  width: 100%;
  border-left: 1px solid #ddd;
}

.etcd-container.etcd-browser .etcd-preview pre, .etcd-container.etcd-browser .etcd-preview textarea {
  padding: 20px 20px 20px 20px;
  margin: 0px;
  font-family: Consolas, "Liberation Mono", Courier, monospace;
  height: 100%;
  width: 100%;
  white-space: pre-wrap;
  position: absolute;
  font-size: 13px;
  border: 1px;
  outline: none;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.etcd-container.etcd-browser.etcd-preview-reveal .etcd-preview pre, .etcd-container.etcd-browser.etcd-preview-reveal .etcd-preview textarea {
  display: block;
}

.etcd-container.etcd-browser .etcd-preview .etcd-empty {
  top: 0px;
  bottom: 0px;
  width: 100%;
  text-align: center;
  position: absolute;
}

.etcd-container.etcd-browser.etcd-preview-reveal .etcd-empty {
  display: none;
}

.etcd-container.etcd-browser .etcd-preview .etcd-empty-message {
  margin-top: 25%;
  color: #999;
}

/* Single Column Positioning */
@media (max-width: 700px) {
  .etcd-container.etcd-browser .etcd-list {
    width: 100%;
  }

  .etcd-container.etcd-browser.etcd-preview-reveal .etcd-list {
    left: -100%;
    transition-property: all;
      transition-duration: 250ms;
      transition-timing-function: ease-in-out;
  }

  .etcd-container.etcd-browser.etcd-preview-hide .etcd-list {
    left: 0%;
    transition-property: all;
      transition-duration: 250ms;
      transition-timing-function: ease-in-out;
  }

  .etcd-container.etcd-browser .etcd-preview {
    left: 100%;
  }

  .etcd-container.etcd-browser.etcd-preview-reveal .etcd-preview { left: -1px;
    transition-property: all;
      transition-duration: 250ms;
      transition-timing-function: ease-in-out;
  }

  .etcd-container.etcd-browser.etcd-preview-hide .etcd-preview {
    left: 100%;
    transition-property: all;
      transition-duration: 250ms;
      transition-timing-function: ease-in-out;
  }
}


/* Double Column Positioning */
@media (min-width: 700px) {
  .etcd-container.etcd-browser .etcd-list {
      width: 50%;
  }

  .etcd-container.etcd-browser .etcd-preview {
    left: 50%;
    width: 50%;
  }

  .etcd-container.etcd-browser.etcd-preview-reveal .etcd-preview {
    left: 50%; /* does nothing */
  }

  .etcd-container.etcd-browser.etcd-preview-reveal .etcd-preview .etcd-empty {
    display: none;
  }

  .etcd-container.etcd-browser.etcd-preview-hide .etcd-preview {
    left: 50%; /* does nothing */
  }

  .etcd-container.etcd-browser.etcd-preview-hide .etcd-preview .etcd-empty {
    display: block;
  }

  .etcd-container.etcd-browser.etcd-preview-hide .etcd-preview pre, .etcd-container.etcd-browser.etcd-preview-hide .etcd-preview textarea {
    display: none;
  }
}