Initial commit

1 files changed, 1190 insertions, 0 deletions

diff --git a/src/styles/main.less b/src/styles/main.less
new file mode 100644
index 00000000..bb560c5b
--- /dev/null
+++ b/src/styles/main.less
@@ -0,0 +1,1190 @@
+/* Colors */
+@gray-dark: #aaa;
+@gray-semi-dark: #bbb;
+@gray-semi-light: #ccc;
+@gray-light: #ddd;
+@gray-very-light: #eee;
+@blue: #00A6D6;
+@blue-dark: #0087b5;
+@blue-very-dark: #006182;
+@blue-light: #deebf7;
+
+/* Sizes, Margins and Paddings*/
+@document-padding: 20px;
+@inter-element-margin: 5px;
+@standard-border-radius: 5px;
+@side-menu-width: 350px;
+@color-indicator-width: 140px;
+
+@global-padding: 30px;
+@transition-length: 150ms;
+@side-bar-width: 250px;
+@navbar-height: 50px;
+
+html, body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+
+  font-family: Helvetica, Verdana, sans-serif;
+
+  overflow: hidden;
+
+  background: #eee;
+}
+
+a:hover {
+  text-decoration: none;
+}
+
+#main-canvas {
+  float: left;
+}
+
+.app-content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  z-index: 1;
+}
+
+/* Mixin for cross-platform prevention of user-text-selection */
+.user-select-def {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+/* Mixin for cross-platform transitions */
+.transition-def(@property, @time) {
+  -webkit-transition: @property @time;
+  -moz-transition: @property @time;
+  -ms-transition: @property @time;
+  -o-transition: @property @time;
+  transition: @property @time;
+}
+
+/* Mixin for cross-platform border-radius properties */
+.border-radius-def(@length) {
+  -webkit-border-radius: @length;
+  -moz-border-radius: @length;
+  border-radius: @length;
+}
+
+/* General Button Abstractions */
+.clickable {
+  cursor: pointer;
+  .user-select-def;
+}
+
+.button {
+  text-align: center;
+  padding: 5px;
+
+  background-color: @gray-semi-dark;
+
+  .border-radius-def(@standard-border-radius);
+  .clickable;
+
+  .transition-def(all, 200ms);
+}
+
+.button:hover {
+  background-color: @gray-semi-light;
+}
+
+.button:active {
+  background-color: @gray-dark;
+}
+
+/* Container for menu panels */
+.side-menu-container {
+  display: inline-block;
+  position: absolute;
+  top: @document-padding;
+  width: @side-menu-width;
+  height: calc(100% - @document-padding);
+  margin-top: 10px;
+
+  pointer-events: none;
+}
+
+.left-side {
+  left: @document-padding;
+}
+
+.right-side {
+  right: @document-padding;
+}
+
+.right-middle-side {
+  right: @document-padding * 2 + @side-menu-width;
+}
+
+/* Collapsible menu panel */
+.menu-container {
+  margin-bottom: 10px;
+  border: 1px solid @gray-dark;
+
+  -webkit-border-radius: @standard-border-radius;
+  -moz-border-radius: @standard-border-radius;
+  border-radius: @standard-border-radius;
+
+  overflow: hidden;
+  pointer-events: all;
+}
+
+.menu-header-bar {
+  display: block;
+  padding: 5px;
+
+  font-weight: bold;
+
+  background-color: @gray-semi-light;
+  border-bottom-width: 0;
+}
+
+.menu-body {
+  display: block;
+  padding: 10px 5px;
+
+  background-color: @gray-very-light;
+
+  .dropdown {
+    margin: @inter-element-margin 0;
+    display: inline-block;
+  }
+
+  .dropdown-label {
+    display: inline-block;
+    margin-right: 10px;
+  }
+}
+
+.menu-body.simulation {
+  display: none;
+}
+
+.side-menu-container .menu-collapse, .side-menu-container .menu-exit {
+  display: inline-block;
+  float: right;
+  width: 20px;
+  height: 20px;
+
+  text-align: center;
+  line-height: 20px;
+  padding: 0;
+  font-size: 9pt;
+
+  color: #777;
+}
+
+#room-menu {
+  .input-group {
+    margin-bottom: 5px;
+  }
+
+  label {
+    margin-top: 10px;
+  }
+}
+
+#room-construction-cancel {
+  display: none;
+}
+
+/* DC components */
+.dc-component-container {
+  .border-radius-def(@standard-border-radius);
+
+  margin-bottom: @inter-element-margin;
+  padding: 10px;
+
+  cursor: pointer;
+
+  .transition-def(background-color, 150ms);
+
+  .dc-component {
+    display: inline-block;
+    width: 50px;
+    height: 50px;
+    float: left;
+
+    border: 4px solid #000;
+  }
+
+  .dc-component-label {
+    display: inline-block;
+    padding-left: 20px;
+    line-height: 50px;
+    font-size: 1.3em;
+  }
+}
+
+.dc-component-container:hover {
+  background-color: @gray-semi-dark;
+}
+
+.dc-component-container:active {
+  background-color: @blue-dark;
+}
+
+.dc-component-container[data-active="true"] {
+  background-color: @blue;
+}
+
+/* DC Object colors */
+.dc-rack {
+  background-color: rgb(170, 170, 170);
+}
+
+.dc-psu {
+  background-color: rgb(230, 50, 60);
+}
+
+.dc-cooling-item {
+  background-color: rgb(40, 50, 230);
+}
+
+/* Rack menu */
+.node-list-container {
+  border: 2px solid #000000;
+  overflow: auto;
+  max-height: 300px;
+
+  margin: @inter-element-margin 0;
+  padding: 0;
+  @node-height: 50px;
+
+  .node-element {
+    position: relative;
+
+    @img-size: 34px;
+    height: @node-height;
+    cursor: hand;
+
+    background-color: @gray-semi-light;
+
+    .node-element-btn {
+      display: inline-block;
+      float: left;
+      width: 40px;
+      height: @node-height - 1px;
+
+      color: #000;
+
+      line-height: @node-height - 1px;
+      text-align: center;
+    }
+
+    .node-element-btn:hover {
+      text-decoration: none;
+    }
+
+    .node-element-content {
+      @element-padding-top: 2px;
+      @element-padding-left: 12px;
+      @img-margin: 7px;
+
+      position: relative;
+
+      display: inline-flex;
+      overflow: hidden;
+      margin: 5px;
+      padding: @element-padding-top @element-padding-left;
+
+      border: 1px solid #000;
+      background: #eeeeee;
+
+      img {
+        width: @img-size;
+        height: @img-size;
+      }
+
+      img:not(:last-of-type) {
+        margin-right: @img-margin;
+      }
+
+      .icon-overlay {
+        position: absolute;
+        top: @element-padding-top;
+        width: @img-size;
+        height: @img-size;
+
+        background: #eeeeee;
+        opacity: 0.6;
+      }
+
+      .overlay-cpu {
+        left: @element-padding-left;
+      }
+
+      .overlay-gpu {
+        left: @element-padding-left + @img-size + @img-margin;
+      }
+
+      .overlay-memory {
+        left: @element-padding-left + (@img-size + @img-margin) * 2;
+      }
+
+      .overlay-storage {
+        left: @element-padding-left + (@img-size + @img-margin) * 3;
+      }
+
+      .overlay-network {
+        left: @element-padding-left + (@img-size + @img-margin) * 4;
+      }
+    }
+
+    .node-element-number {
+      display: inline-block;
+      float: right;
+      width: 30px;
+      height: 100%;
+
+      line-height: 50px;
+      text-align: right;
+      padding-right: 10px;
+    }
+  }
+
+  .node-element:not(:last-of-type) {
+    border-bottom: 1px solid #666;
+  }
+
+  .node-element:last-of-type .node-element-content {
+    margin-bottom: 0;
+  }
+
+  .node-element-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    width: 100%;
+    height: @node-height;
+
+    background: #eeeeee;
+    opacity: 0.6;
+
+    z-index: 100;
+  }
+}
+
+#node-menu {
+  .nav-tabs {
+    li.active, li.active a {
+      background-color: @gray-very-light;
+    }
+
+    img {
+      width: 30px;
+      height: 30px;
+    }
+  }
+
+  .tab-content {
+    overflow: hidden;
+
+    .panel-heading .accordion-toggle:after {
+      //noinspection CssNoGenericFontName
+      font-family: 'Glyphicons Halflings';
+      content: "\e114";
+      float: right;
+      color: grey;
+    }
+
+    .panel-heading .accordion-toggle.collapsed:after {
+      content: "\e080";
+    }
+  }
+
+  .remove-unit:hover {
+    text-decoration: none;
+  }
+
+  .unit-add-input {
+    margin-bottom: 10px;
+  }
+
+  .spec-table td {
+    height: 40px;
+    line-height: 40px;
+    padding: 0 10px;
+  }
+
+  .spec-table tr td:first-child {
+    width: 50px;
+    text-align: right;
+  }
+
+  .spec-table tr td:nth-child(2) {
+    width: 200px;
+  }
+
+  .spec-table tr td:nth-child(3) {
+    width: 50px;
+  }
+}
+
+/* Tasks menu */
+#tasks-menu .menu-body {
+  overflow-y: auto;
+  max-height: 350px;
+}
+
+#tasks-menu .menu-body .task-element {
+  height: 70px;
+
+  .task-icon {
+    @icon-size: 35px;
+
+    display: inline-block;
+    position: relative;
+    float: left;
+
+    top: 13px;
+    left: 10px;
+
+    width: @icon-size;
+    height: @icon-size;
+    font-size: @icon-size;
+
+  }
+
+  .task-info {
+    display: inline-block;
+    width: 270px;
+    float: right;
+
+    .task-time {
+      display: block;
+    }
+
+    .progress {
+      margin-bottom: 0;
+    }
+
+    .task-flops {
+      display: block;
+    }
+  }
+
+  &:not(:last-child) {
+    border-bottom: 1px solid #bbb;
+    margin-bottom: 10px;
+  }
+}
+
+#statistics-chart, #machine-statistics-chart {
+  display: block;
+  height: 200px;
+  margin-right: 15px;
+}
+
+/* Container for Zooming buttons */
+.tool-panel {
+  display: inline-block;
+  position: absolute;
+  bottom: @document-padding;
+  left: @document-padding;
+
+  z-index: 1000;
+}
+
+.btn-circle {
+  width: 30px;
+  height: 30px;
+  text-align: center;
+  padding: 6px 0;
+  font-size: 12px;
+  line-height: 1.428571429;
+  border-radius: 15px;
+
+  border-color: @gray-dark;
+}
+
+/* Indicators*/
+.indicators {
+  display: inline-block;
+  position: absolute;
+  bottom: @document-padding;
+  right: @document-padding;
+}
+
+/* Scale indicator */
+.scale-indicator {
+  display: inline-block;
+  width: 100px;
+  height: 18px;
+  line-height: 18px;
+
+  text-align: right;
+
+  border-top-width: 0;
+  border-right-width: 0;
+  border-bottom: 2px solid #000;
+  border-left: 2px solid #000;
+
+  .user-select-def;
+}
+
+/* Color indicator */
+.color-indicator {
+  @color-indicator-padding: 7px;
+  @element-width: (@color-indicator-width - @color-indicator-padding * 2) / 4;
+
+  display: inline-block;
+  position: relative;
+  top: 5px;
+  margin-left: 15px;
+  cursor: pointer;
+  padding: @color-indicator-padding;
+  .border-radius-def(@standard-border-radius);
+  .transition-def(background, @transition-length);
+  z-index: 100;
+
+  width: @color-indicator-width;
+
+  &:hover {
+    background: rgba(127, 127, 127, 0.5);
+  }
+
+  .intensity-labels {
+    height: 20px;
+    line-height: 20px;
+
+    font-size: 8pt;
+
+    div {
+      display: inline-block;
+      width: @element-width;
+      margin-right: -3px;
+
+      text-align: center;
+    }
+
+    div:first-of-type {
+      width: @element-width / 2;
+      text-align: left;
+    }
+
+    div:last-of-type {
+      width: @element-width / 2;
+      text-align: right;
+    }
+  }
+
+  .intensity-colors {
+    height: 15px;
+
+    div {
+      display: inline-block;
+      width: @element-width + 1;
+      height: 100%;
+      margin-right: -5px;
+      border: 1px solid #444;
+    }
+
+    .intensity-low {
+      border-top-left-radius: 4px;
+      border-bottom-left-radius: 4px;
+      background: rgba(197, 224, 180, 1);
+    }
+
+    .intensity-mid-low {
+      background: rgba(255, 230, 153, 1);
+    }
+
+    .intensity-mid-high {
+      background: rgba(248, 203, 173, 1);
+    }
+
+    .intensity-high {
+      border-top-right-radius: 4px;
+      border-bottom-right-radius: 4px;
+      background: rgba(249, 165, 165, 1);
+    }
+  }
+}
+
+@global-control-height: 40px;
+
+/* Mode switch */
+.mode-switch {
+  display: block;
+  width: 100%;
+  height: @global-control-height;
+  line-height: @global-control-height;
+
+  margin-bottom: 10px;
+  pointer-events: all;
+
+  background-color: #fff;
+  border: 1px solid @gray-dark;
+  .border-radius-def(@standard-border-radius);
+  overflow: hidden;
+
+  div {
+    display: inline-block;
+    width: 50%;
+    height: 100%;
+    text-align: center;
+
+    font-size: 1.2em;
+    .clickable;
+  }
+
+  div:first-child {
+    float: left;
+  }
+
+  div:last-child {
+    float: right;
+  }
+}
+
+#save-version-btn {
+  width: 50%;
+  height: @global-control-height;
+  line-height: @global-control-height;
+  text-align: center;
+  margin-bottom: 10px;
+  font-size: 1.2em;
+  color: #fff;
+
+  .clickable;
+  pointer-events: all;
+  .border-radius-def(@standard-border-radius);
+}
+
+#save-version-btn[data-saved="true"] {
+  background-color: #4dba31;
+
+  &:hover {
+    background: #3b8e25;
+  }
+}
+
+#save-version-btn[data-saved="false"] {
+  background-color: #d69931;
+
+  &:hover {
+    background: #af7b2d;
+  }
+}
+
+.mode-switch[data-selected="construction"] {
+  #construction-mode-switch {
+    background: @blue;
+    color: #fff;
+  }
+
+  #construction-mode-switch:hover {
+    background: @blue-dark;
+  }
+
+  #simulation-mode-switch {
+    background: #fff;
+    color: #000;
+  }
+
+  #simulation-mode-switch:hover {
+    background: #eee;
+  }
+}
+
+.mode-switch[data-selected="simulation"] {
+  #construction-mode-switch {
+    background: #fff;
+    color: #000;
+  }
+
+  #construction-mode-switch:hover {
+    background: #eee;
+  }
+
+  #simulation-mode-switch {
+    background: @blue;
+    color: #fff;
+  }
+
+  #simulation-mode-switch:hover {
+    background: @blue-dark;
+  }
+}
+
+#experiment-menu h2 {
+  margin-top: 0;
+  font-size: 12pt;
+}
+
+/* Timeline controls */
+.timeline-bar {
+  display: block;
+  position: absolute;
+  left: 0;
+  bottom: @document-padding;
+  width: 100%;
+  text-align: center;
+}
+
+.timeline-container {
+  @container-size: 500px;
+  @play-btn-size: 40px;
+  @border-width: 1px;
+  @timeline-border: @border-width solid @gray-semi-dark;
+
+  display: inline-block;
+  margin: 0 auto;
+  text-align: left;
+
+  width: @container-size;
+
+  .labels {
+    display: block;
+    height: 25px;
+    line-height: 25px;
+
+    div {
+      display: inline-block;
+    }
+
+    .start-time-label {
+      margin-left: @play-btn-size - @border-width;
+      padding-left: 4px;
+    }
+
+    .end-time-label {
+      padding-right: 4px;
+      float: right;
+    }
+  }
+
+  .controls {
+    display: flex;
+    border: @timeline-border;
+    overflow: hidden;
+
+    // Fix for border-radius overflow in Chrome/Webkit
+    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
+
+    .border-radius-def(@standard-border-radius);
+
+    .play-btn {
+      width: @play-btn-size;
+      height: @play-btn-size + @border-width;
+      line-height: @play-btn-size + @border-width;
+      text-align: center;
+      float: left;
+
+      margin-top: -@border-width;
+
+      font-size: 16pt;
+      background: #333;
+      color: #eee;
+
+      .transition-def(background, @transition-length);
+
+      .user-select-def;
+      .clickable;
+
+      // Loading icon
+      img {
+        display: none;
+        position: relative;
+        width: 70%;
+        height: 70%;
+        margin-top: -10px;
+      }
+    }
+
+    .play-btn::before {
+      position: relative;
+      top: -1px;
+      left: 1px;
+    }
+
+    .play-btn:hover {
+      background: #656565;
+    }
+
+    .play-btn:active {
+      background: #000;
+    }
+
+    .timeline {
+      position: relative;
+      flex: 1;
+      height: @play-btn-size;
+      line-height: @play-btn-size;
+      float: right;
+
+      background: @blue-light;
+
+      z-index: 500;
+
+      div {
+        .transition-def(all, @transition-length);
+      }
+
+      .time-marker {
+        position: absolute;
+        top: 0;
+        left: 0;
+
+        width: 6px;
+        height: 100%;
+
+        background: @blue-very-dark;
+
+        .border-radius-def(2px);
+
+        z-index: 503;
+      }
+
+      .section-marker {
+        position: absolute;
+        top: 0;
+        left: 0;
+
+        width: 3px;
+        height: 100%;
+
+        background: #222222;
+
+        z-index: 504;
+      }
+
+      .cache-section {
+        position: absolute;
+        top: 0;
+        left: 0;
+
+        width: 0;
+        height: 100%;
+
+        background: @blue;
+
+        z-index: 501;
+      }
+
+      .task-indicator {
+        display: inline-block;
+        position: absolute;
+        bottom: 0;
+        width: 10px;
+        height: 10px;
+
+        border: 1px solid #000;
+
+        z-index: 502;
+      }
+
+      .task-queued {
+        background: #fff340;
+      }
+
+      .task-started {
+        background: #ff72a0;
+      }
+
+      .task-finished {
+        background: #c036ff;
+      }
+    }
+  }
+}
+
+/* Informational message container, for communicating events to the user */
+.info-balloon {
+  display: none;
+  position: absolute;
+  bottom: @document-padding;
+  right: @document-padding;
+
+  padding-left: 15px;
+  padding-right: 15px;
+
+  height: 30px;
+  line-height: 30px;
+
+  background: @blue;
+  color: #fff;
+
+  .border-radius-def(15px);
+
+  span {
+    line-height: 30px;
+    margin-right: 10px;
+  }
+}
+
+/* Loading overlay, shown during setup */
+.loading-overlay {
+  z-index: 1000;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+
+  background: rgba(0, 124, 159, 0.7);
+
+  .loading-overlay-content {
+    text-align: center;
+    display: inline-block;
+
+    width: 300px;
+    height: 200px;
+
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+
+    margin: auto;
+
+    img {
+      position: relative;
+      bottom: -10px;
+
+      animation: bounce 3s ease infinite;
+    }
+
+    .loading-text {
+      padding: 3px 10px;
+      background-color: #eeeeee;
+      .border-radius-def(@standard-border-radius);
+    }
+  }
+}
+
+@keyframes bounce {
+  0% {
+    bottom: -10px;
+  }
+  50% {
+    bottom: 40px;
+  }
+  100% {
+    bottom: -10px;
+  }
+}
+
+/* Experiments */
+.experiment-list {
+  display: block;
+  font-size: 12pt;
+  border: 0;
+
+  .list-head, .list-body .experiment-row {
+    display: block;
+    position: relative;
+  }
+
+  .list-head div, .list-body .project-row div {
+    padding: 0 10px;
+    display: inline-block;
+  }
+
+  .list-head {
+    font-weight: bold;
+  }
+
+  .experiment-row {
+    background: #f8f8f8;
+    border: 1px solid #b6b6b6;
+    height: 40px;
+    line-height: 40px;
+    clear: both;
+
+    .transition-def(background, @transition-length);
+    .clickable;
+  }
+
+  .experiment-row:hover {
+    background: #fff;
+  }
+
+  .experiment-row:active {
+    background: #cccccc;
+  }
+
+  .experiment-row:not(:first-of-type) {
+    margin-top: -1px;
+  }
+
+  // Sizing of table columns
+  .experiment-row, .list-head {
+    div {
+      display: inline-block;
+      width: 20%;
+
+      padding-left: 5px;
+      margin-right: -4px; // Address default margin between inline-blocks
+    }
+
+    div:last-of-type {
+      text-align: right;
+      padding-right: 10px;
+    }
+  }
+}
+
+.no-experiments-alert {
+  display: none;
+  position: relative;
+  padding-left: 50px;
+  span {
+    position: absolute;
+    top: 11px;
+    left: 10px;
+    bottom: 10px;
+    font-size: 20pt;
+  }
+}
+
+.window-overlay {
+  display: none;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+
+  background: rgba(0, 0, 0, 0.5);
+
+  z-index: 5000;
+}
+
+.experiments-window {
+  width: 80%;
+  height: 80%;
+
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  margin: auto;
+
+  overflow: hidden;
+
+  .window-body {
+    width: 100%;
+    height: 340px;
+
+    padding: 10px;
+
+    background: rgba(230, 230, 230, 0.9);
+
+    .border-radius-def(5px);
+
+    .window-heading {
+      font-size: 20pt;
+      color: #000000;
+
+      .user-select-def;
+
+      font-weight: bold;
+
+      padding-left: 5px;
+    }
+
+    .experiment-add-form {
+      margin: 20px;
+
+      input, select {
+        width: 200px;
+      }
+
+      label {
+        width: 80px;
+        text-align: right;
+
+        .user-select-def;
+      }
+    }
+
+    .experiments-table-label {
+      display: block;
+      padding-left: 20px;
+      margin-bottom: 5px;
+
+      font-size: 18px;
+
+      .user-select-def;
+    }
+
+    .experiment-name-alert {
+      position: absolute;
+      bottom: 0;
+      left: 20px;
+      display: none;
+    }
+  }
+
+  .window-footer {
+    width: 100%;
+    height: 60px;
+
+    background: rgba(56, 56, 56, 0.9);
+
+    padding: 12px 10px;
+
+    .btn.pull-left {
+      margin-right: 5px;
+    }
+
+    .btn.pull-right {
+      margin-left: 5px;
+    }
+  }
+}
+
+.window-close {
+  display: inline-block;
+  font-size: 16pt;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  cursor: pointer;
+  color: #888888;
+}
+
+/* Internal page */
+/* Main content body (side-menu and main-body) */
+.content {
+  position: relative;
+  top: -@navbar-height;
+  width: 100%;
+  height: 100%;
+  padding-top: @navbar-height;
+  z-index: 1;
+}
+
+/* Content body */
+.main-body {
+  position: relative;
+  display: block;
+  margin: auto;
+  width: 900px;
+  max-width: 900px;
+  height: 100%;
+  padding: 40px;
+
+  border-left: 1px solid #bbb;
+  border-right: 1px solid #bbb;
+  background: #f7f7f7;
+
+  h2 {
+    font-weight: bold;
+    margin: 10px 0 20px 0;
+  }
+}
+
+.modal {
+  z-index: 10000;
+}