summaryrefslogtreecommitdiff
path: root/src/styles/main.less
diff options
context:
space:
mode:
Diffstat (limited to 'src/styles/main.less')
-rw-r--r--src/styles/main.less1190
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;
+}
generated by cgit v1.2.3 (git 2.25.1) at 2026-06-18 13:54:55 +0000