file-samples/html/app.css

/* app.css */


/* page scroll bar off */

html {
  overflow-y: auto
}

pre {
  white-space: pre-wrap;
  /* css-3 */
  white-space: -moz-pre-wrap;
  /* Mozilla, since 1999 */
  white-space: -pre-wrap;
  /* Opera 4-6 */
  white-space: -o-pre-wrap;
  /* Opera 7 */
  word-wrap: break-word;
  /* Internet Explorer 5.5+ */
}


/* http://tobiasahlin.com/spinkit/ */

.spinner {
  margin: 100px auto;
  width: 100px;
  height: 80px;
  text-align: center;
  font-size: 16px;
}

.spinner > div {
  background-color: #0000a0;
  height: 100%;
  width: 16px;
  display: inline-block;
  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes sk-stretchdelay {
  0%,
  40%,
  100% {
    -webkit-transform: scaleY(0.4)
  }
  20% {
    -webkit-transform: scaleY(1.0)
  }
}

@keyframes sk-stretchdelay {
  0%,
  40%,
  100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }
  20% {
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}

.fade-enter-active,
.fade-leave-active {
  transition-property: opacity;
  transition-duration: .25s;
}

.fade-enter-active {
  transition-delay: .25s;
}

.fade-enter,
.fade-leave-active {
  opacity: 0
}

.child-view {
  position: absolute;
  transition: all .5s cubic-bezier(.55, 0, .1, 1);
}

.slide-left-enter,
.slide-right-leave-active {
  opacity: 0;
  -webkit-transform: translate(30px, 0);
  transform: translate(30px, 0);
}

.slide-left-leave-active,
.slide-right-enter {
  opacity: 0;
  -webkit-transform: translate(-30px, 0);
  transform: translate(-30px, 0);
}

td.vtop {
  vertical-align: top;
}


/*
.ace_editor { height: 200px; }
*/

.acewrap {
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  height: 100%;
}

.ace_gutter-cell.ace_breakpoint {
  border-radius: 20px 0px 0px 20px;
  box-shadow: 0px 0px 1px 1px red inset;
}

.ace_editor_wrapper {
  height: 100%
}

.ace_editor {
  height: 100%;
}

.multiline-ellipsis {
  display: block;
  display: -webkit-box;
  max-height: 110px;
  margin: 0 auto;
  line-height: 1.4;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qd-active {
  background-color: green;
}

.selcard {
  background-color: green;
  border: thick double #32a1ce;
}

.contain {
  object-fit: contain;
}

.canvas {
  overflow: hidden;
}

.canvas .wrapper.outer > .background {
  fill: #000000;
}

.canvas .wrapper.inner > .background {
  fill: #CCCCCC;
  cursor: move;
}

.canvas .background {
  fill: #F6F6F6;
  stroke: #333333;
  cursor: move;
}

.canvas .panCanvas {
  cursor: move;
}

.canvas .minimap .frame {
  pointer-events: all;
}

.canvas .minimap .frame .background {
  stroke: #111111;
  stroke-width: 4px;
  fill-opacity: 0.1;
  fill: #000000;
  fill: url(#minimapGradient_qwpyza);
  filter: url(#minimapDropShadow_qwpyza);
  cursor: move;
}