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.less1196
1 files changed, 0 insertions, 1196 deletions
diff --git a/src/styles/main.less b/src/styles/main.less
deleted file mode 100644
index ee7e56aa..00000000
--- a/src/styles/main.less
+++ /dev/null
@@ -1,1196 +0,0 @@
-/* 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;
- }
-
- .list-body {
- max-height: 200px;
- overflow-y: auto;
- overflow-x: hidden;
- }
-
- .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: 500px;
-
- 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-02-04 14:03:20 +0000