summaryrefslogtreecommitdiff
path: root/src/styles
diff options
context:
space:
mode:
Diffstat (limited to 'src/styles')
-rw-r--r--src/styles/404.less147
-rw-r--r--src/styles/main.less1190
-rw-r--r--src/styles/navbar.less158
-rw-r--r--src/styles/profile.less22
-rw-r--r--src/styles/projects.less391
-rw-r--r--src/styles/splash.less436
6 files changed, 2344 insertions, 0 deletions
diff --git a/src/styles/404.less b/src/styles/404.less
new file mode 100644
index 00000000..8842b621
--- /dev/null
+++ b/src/styles/404.less
@@ -0,0 +1,147 @@
+html, body {
+ padding: 0;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+
+ background-image: linear-gradient(135deg, #00678a, #008fbf, #00A6D6);
+}
+
+.terminal-window {
+ width: 600px;
+ height: 400px;
+ display: block;
+
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+
+ margin: auto;
+
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ cursor: default;
+
+ overflow: hidden;
+
+ box-shadow: 5px 5px 20px #444444;
+}
+
+.terminal-header {
+ font-family: monospace;
+ background: #cccccc;
+ color: #444444;
+ height: 30px;
+ line-height: 30px;
+ padding-left: 10px;
+
+ border-top-left-radius: 7px;
+ border-top-right-radius: 7px;
+}
+
+.terminal-body {
+ font-family: monospace;
+ text-align: center;
+ background-color: #333333;
+ color: #eeeeee;
+ padding: 10px;
+
+ height: 100%;
+}
+
+.segfault {
+ text-align: left;
+}
+
+.cursor {
+ -webkit-animation: 1s blink step-end infinite;
+ -moz-animation: 1s blink step-end infinite;
+ -ms-animation: 1s blink step-end infinite;
+ -o-animation: 1s blink step-end infinite;
+ animation: 1s blink step-end infinite;
+}
+
+.code-block {
+ white-space: pre-wrap;
+
+ margin-top: 60px;
+}
+
+.sub-title {
+ margin-top: 20px;
+}
+
+.home-btn {
+ margin-top: 10px;
+ padding: 5px;
+ display: inline-block;
+ border: 1px solid #eeeeee;
+ color: #eeeeee;
+ text-decoration: none;
+ cursor: pointer;
+
+ -webkit-transition: all 200ms;
+ -moz-transition: all 200ms;
+ -ms-transition: all 200ms;
+ -o-transition: all 200ms;
+ transition: all 200ms;
+}
+
+.home-btn:hover {
+ background: #eeeeee;
+ color: #333333;
+}
+
+.home-btn:active {
+ background: #333333;
+ color: #eeeeee;
+}
+
+@keyframes blink {
+ from, to {
+ color: #eeeeee;
+ }
+ 50% {
+ color: #333333;
+ }
+}
+
+@-moz-keyframes blink {
+ from, to {
+ color: #eeeeee;
+ }
+ 50% {
+ color: #333333;
+ }
+}
+
+@-webkit-keyframes blink {
+ from, to {
+ color: #eeeeee;
+ }
+ 50% {
+ color: #333333;
+ }
+}
+
+@-ms-keyframes blink {
+ from, to {
+ color: #eeeeee;
+ }
+ 50% {
+ color: #333333;
+ }
+}
+
+@-o-keyframes blink {
+ from, to {
+ color: #eeeeee;
+ }
+ 50% {
+ color: #333333;
+ }
+} \ No newline at end of file
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;
+}
diff --git a/src/styles/navbar.less b/src/styles/navbar.less
new file mode 100644
index 00000000..3eba0982
--- /dev/null
+++ b/src/styles/navbar.less
@@ -0,0 +1,158 @@
+@import "main.less";
+
+/* Navbar */
+.top-navbar {
+ @navbar-padding: 10px;
+
+ position: relative;
+ display: block;
+ width: 100%;
+ height: @navbar-height;
+
+ color: #eee;
+ background: #343434;
+
+ z-index: 100;
+
+ -webkit-box-shadow: -10px 8px 3px 12px #000;
+ -moz-box-shadow: -10px 8px 3px 12px #000;
+ box-shadow: -10px -10px 3px 12px #000;
+
+ .opendc-brand {
+ display: inline-block;
+ float: left;
+ margin-left: @global-padding;
+
+ padding: 0 10px;
+
+ cursor: pointer;
+ color: #eee;
+ height: 100%;
+
+ .transition-def(background, @transition-length);
+
+ img {
+ display: inline-block;
+ float: left;
+ margin: @navbar-padding 0;
+
+ width: @navbar-height - @navbar-padding * 2;
+ height: @navbar-height - @navbar-padding * 2;
+ vertical-align: middle;
+ }
+
+ .opendc-title {
+ display: inline-block;
+ float: right;
+ margin-left: 20px;
+
+ font-size: 16pt;
+ line-height: @navbar-height;
+ }
+ }
+
+ .opendc-brand:hover {
+ background: @blue;
+ }
+
+ .opendc-brand:active {
+ background: @blue-dark;
+ }
+
+ .navbar-button-group {
+ display: inline-block;
+ height: 100%;
+
+ a {
+ display: inline-block;
+ line-height: @navbar-height;
+ text-align: center;
+ color: #eee;
+
+ border-left: 1px solid #464646;
+
+ .clickable;
+ .transition-def(background, @transition-length);
+ }
+
+ a:last-of-type {
+ border-right: 1px solid #464646;
+ }
+ }
+
+ .navigation {
+ margin-left: 30px;
+
+ .projects {
+ float: left;
+ padding: 0 20px;
+
+ font-size: 12pt;
+ }
+
+ .projects:hover {
+ background: #606060;
+ }
+
+ .projects:active {
+ background: #161616;
+ }
+ }
+
+ .user {
+ float: right;
+ margin-right: @global-padding;
+
+ .support {
+ float: left;
+ margin-top: -1px;
+
+ width: @navbar-height;
+
+ font-size: 14pt;
+ }
+
+ .support:hover {
+ background: #41a0cd;
+ }
+
+ .support:active {
+ background: #307798;
+ }
+
+ .username {
+ float: left;
+ padding: 0 20px;
+
+ font-size: 12pt;
+ }
+
+ .username:hover {
+ background: #4eae44;
+ }
+
+ .username:active {
+ background: #2d6527;
+ }
+
+ .sign-out {
+ float: right;
+ margin-top: -1px;
+ width: @navbar-height;
+
+ font-size: 14pt;
+ }
+
+ .sign-out:hover {
+ background: #e3474d;
+ }
+
+ .sign-out:active {
+ background: #a73438;
+ }
+ }
+}
+
+#google-signin {
+ display: none;
+}
diff --git a/src/styles/profile.less b/src/styles/profile.less
new file mode 100644
index 00000000..40bf49f8
--- /dev/null
+++ b/src/styles/profile.less
@@ -0,0 +1,22 @@
+@import "main.less";
+
+.main-body.profile-page {
+ text-align: center;
+
+ :not(.btn) {
+ text-align: left;
+ }
+}
+
+#delete-account {
+ margin: 10px 0;
+}
+
+.delete-info {
+ color: #999999;
+ padding: 0 80px;
+}
+
+.account-delete-alert {
+ display: none;
+} \ No newline at end of file
diff --git a/src/styles/projects.less b/src/styles/projects.less
new file mode 100644
index 00000000..926ea8ec
--- /dev/null
+++ b/src/styles/projects.less
@@ -0,0 +1,391 @@
+@import "main.less";
+
+/* Buttons */
+.new-project-btn {
+ @button-height: 35px;
+
+ display: inline-block;
+ position: absolute;
+ bottom: 40px;
+ right: 40px;
+ padding: 0 20px;
+ height: @button-height;
+ line-height: @button-height;
+ font-size: 12pt;
+
+ background: #679436;
+ color: #eee;
+ border: 1px solid #507830;
+
+ .border-radius-def(@standard-border-radius);
+ .clickable;
+ .transition-def(all, @transition-length);
+}
+
+.new-project-btn:hover {
+ background: #73ac45;
+}
+
+.new-project-btn:active {
+ background: #5c8835;
+}
+
+/* Side menu */
+.filter-menu {
+ display: block;
+
+ background: #0761b1;
+ border: 1px solid #06326b;
+ color: #eee;
+
+ text-align: center;
+
+ .border-radius-def(@standard-border-radius);
+ overflow: hidden;
+
+ margin-bottom: 20px;
+
+ .project-filters {
+ display: block;
+ overflow: hidden;
+ margin-left: -2px;
+
+ div {
+ display: inline-block;
+ width: 33.3%;
+ margin-right: -4px;
+ padding: 10px @global-padding;
+
+ font-size: 12pt;
+ border-right: 1px solid #06326b;
+
+ .clickable;
+ .transition-def(background, @transition-length);
+ }
+
+ div:last-of-type {
+ border: 0;
+ }
+
+ div:hover {
+ background: #0c60bf;
+ }
+
+ div:active, div.active {
+ background: #073d7d;
+ }
+ }
+}
+
+/* Message shown when no projects present */
+.no-projects-alert {
+ display: none;
+ position: relative;
+ padding-left: 50px;
+ span {
+ position: absolute;
+ top: 11px;
+ left: 10px;
+ bottom: 10px;
+ font-size: 20pt;
+ }
+}
+
+/* List of simulation projects */
+.project-list {
+ display: block;
+ font-size: 12pt;
+ border: 0;
+
+ .list-head, .list-body .project-row {
+ display: block;
+ position: relative;
+ }
+
+ .list-head div, .list-body .project-row div {
+ padding: 0 10px;
+ display: inline-block;
+ }
+
+ .list-head {
+ font-weight: bold;
+
+ div {
+ margin-right: -4px; // Address default margin between inline-blocks
+ }
+ }
+
+ .project-row {
+ background: #f8f8f8;
+ border: 1px solid #b6b6b6;
+ height: 40px;
+ line-height: 40px;
+ clear: both;
+
+ .transition-def(background, @transition-length);
+ .clickable;
+ }
+
+ .project-row:hover {
+ background: #fff;
+ }
+
+ .project-row:active {
+ background: #cccccc;
+ }
+
+ .project-row:not(:first-of-type) {
+ margin-top: -1px;
+ }
+
+ // Sizing of table columns
+ .project-row, .list-head {
+ div:first-of-type {
+ width: 50%;
+ }
+
+ div:nth-of-type(2) {
+ width: 30%;
+ }
+
+ div:last-of-type {
+ width: 20%;
+
+ span {
+ margin-right: 10px;
+ }
+ }
+ }
+
+ .project-row.active {
+ border-bottom: 0;
+ background: #3442b1;
+ color: #eee;
+ }
+
+ .project-row.active::before {
+ //noinspection CssNoGenericFontName
+ font-family: 'Glyphicons Halflings';
+ content: "\2212";
+ font-size: 14pt;
+ position: absolute;
+ top: 0;
+ right: 10px;
+ }
+
+ .project-view {
+ padding: 10px;
+ overflow: hidden;
+ border: 1px solid #b6b6b6;
+ border-top: 0;
+
+ background: #3442b1;
+ color: #eee;
+
+ .participants {
+ display: inline-block;
+ float: left;
+ }
+
+ .access-buttons {
+ display: inline-block;
+ float: right;
+
+ .inline-btn {
+ margin-left: 10px;
+ }
+
+ .open {
+ background: #e38829;
+ }
+
+ .open:hover {
+ background: #ff992e;
+ }
+
+ .open:active {
+ background: #ba6f21;
+ }
+
+ .edit {
+ background: #2c3897;
+ }
+
+ .edit:hover {
+ background: #3a4ac8;
+ }
+
+ .edit:active {
+ background: #242d7a;
+ }
+ }
+ }
+}
+
+.inline-btn {
+ display: inline-block;
+ height: 30px;
+ line-height: 30px;
+ font-size: 10pt;
+ width: 70px;
+
+ text-transform: uppercase;
+ text-align: center;
+
+ color: #eee;
+
+ .clickable;
+ .transition-def(background, @transition-length);
+}
+
+.projects-window {
+ width: 600px;
+ height: 400px;
+
+ position: absolute;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ right: 0;
+ margin: auto;
+
+ .border-radius-def(5px);
+ overflow: hidden;
+
+ .window-body {
+ width: 100%;
+ height: 340px;
+
+ padding: 10px;
+
+ background: rgba(230, 230, 230, 0.9);
+
+ .window-heading {
+ font-size: 20pt;
+ color: #000000;
+
+ .user-select-def;
+
+ font-weight: bold;
+
+ padding-left: 5px;
+ }
+
+ .project-name-form, .participant-add-form {
+ margin: 20px;
+
+ input {
+ width: 300px;
+ }
+
+ label {
+ padding-right: 5px;
+ width: 40px;
+ text-align: right;
+
+ .user-select-def;
+ }
+ }
+
+ .participants-table-label {
+ display: block;
+ padding-left: 20px;
+ margin-bottom: 5px;
+
+ .user-select-def;
+ }
+
+ .participants-table {
+ background: #ffffff;
+ .border-radius-def(5px);
+
+ margin: 0 20px;
+
+ max-height: 135px;
+ overflow: auto;
+
+ .participant-row {
+ height: 40px;
+ line-height: 40px;
+
+ div {
+ display: inline-block;
+ margin-right: -4px; // Address default margin between inline-blocks
+ }
+
+ .participant-name {
+ padding-left: 10px;
+ width: 60%;
+ }
+
+ .participant-level {
+ width: 30%;
+
+ .user-select-def;
+
+ div {
+ display: inline-block;
+
+ width: 25px;
+ height: 25px;
+
+ padding: 5px;
+
+ margin-right: 3px;
+
+ cursor: pointer;
+
+ .border-radius-def(5px);
+ .transition-def(all, @transition-length);
+ }
+
+ div.active, div:hover {
+ background-color: #415973;
+ color: #eeeeee;
+ }
+ }
+
+ .participant-remove {
+ position: relative;
+ width: 10%;
+ text-align: right;
+ padding-right: 10px;
+ }
+
+ .participant-remove div {
+ top: 2px;
+ right: 5px;
+ cursor: pointer;
+ }
+ }
+ }
+
+ .participant-add-form {
+ margin-top: 10px;
+ }
+
+ .participant-email-alert, .project-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;
+ }
+ }
+}
diff --git a/src/styles/splash.less b/src/styles/splash.less
new file mode 100644
index 00000000..7a88dd33
--- /dev/null
+++ b/src/styles/splash.less
@@ -0,0 +1,436 @@
+@screen-sm: 768px;
+@screen-md: 992px;
+@screen-lg: 1200px;
+
+html, body {
+ width: 100%;
+ height: 100%;
+ margin: 0;
+}
+
+/* Fix for the white space appearing otherwise on the right of the page, on mobile */
+.body-wrapper {
+ overflow-x: hidden;
+ overflow-y: hidden;
+}
+
+/* NAVBAR */
+@media screen and (min-width: @screen-sm) {
+ .navbar {
+ padding: 20px 0;
+ -webkit-transition: background 200ms ease-in-out, padding 200ms ease-in-out;
+ -moz-transition: background 200ms ease-in-out, padding 200ms ease-in-out;
+ transition: background 200ms ease-in-out, padding 200ms ease-in-out;
+ }
+
+ .top-nav-collapse {
+ padding: 0;
+ }
+}
+
+.navbar {
+ text-transform: uppercase;
+}
+
+.navbar-transparent {
+ background: transparent;
+ border: none;
+
+ .collapse li a, .projects-btn {
+ color: #eee;
+ }
+}
+
+.navbar-toggle {
+ margin-right: 30px;
+}
+
+.navbar-fixed-top {
+ padding: 0;
+}
+
+.navbar .logged-in {
+ display: none;
+}
+
+.sign-out {
+ padding: 10px;
+ width: 40px;
+ margin-top: 5px;
+ margin-left: 5px;
+
+ font-size: 14pt;
+ color: #eeeeee;
+
+ -webkit-border-radius: 25px;
+ -moz-border-radius: 25px;
+ border-radius: 25px;
+
+ -webkit-transition: background 200ms;
+ -moz-transition: background 200ms;
+ -ms-transition: background 200ms;
+ -o-transition: background 200ms;
+ transition: background 200ms;
+}
+
+.sign-out:hover {
+ background: #e3474d;
+ color: #eeeeee;
+}
+
+.sign-out:active {
+ background: #a73438;
+}
+
+.projects-btn {
+ position: relative;
+ top: -4px;
+ color: #eee;
+}
+
+.projects-btn:hover {
+ color: #fff;
+}
+
+a.navbar-brand {
+ width: 40px;
+ height: 40px;
+ padding: 0;
+ margin-right: 5px;
+ margin-top: 5px;
+
+ -webkit-border-radius: 20px;
+ -moz-border-radius: 20px;
+ border-radius: 20px;
+
+ -webkit-transition: background-color 200ms ease-in-out;
+ -moz-transition: background-color 200ms ease-in-out;
+ -ms-transition: background-color 200ms ease-in-out;
+ -o-transition: background-color 200ms ease-in-out;
+ transition: background-color 200ms ease-in-out;
+}
+
+a.navbar-brand:hover {
+ background: #eee !important;
+}
+
+a.navbar-brand:active, a.navbar-brand:visited, .active a.navbar-brand {
+ background: #ccc !important;
+}
+
+.navbar-brand > img {
+ padding: 5px;
+ margin: 0;
+ width: auto;
+ height: 100%;
+}
+
+@media screen and (max-width: @screen-sm) {
+ .navbar-brand {
+ margin-left: 15px;
+ }
+}
+
+#google-signin {
+ margin-top: 10px;
+ margin-bottom: 10px;
+}
+
+/* GENERAL CONTENT RULES */
+a {
+ text-decoration: none;
+}
+
+a:hover {
+ text-decoration: none;
+}
+
+.content-section {
+ padding-top: 50px;
+ padding-bottom: 150px;
+ text-align: center;
+}
+
+.img-caption {
+ margin-top: 10px;
+ color: #666;
+}
+
+@media screen and (min-width: @screen-sm) and (max-width: @screen-md) {
+ .content-section h1 {
+ font-size: 2em;
+ margin-bottom: 40px;
+ }
+
+ .content-section h3 {
+ font-size: 1.5em;
+ }
+}
+
+@media screen and (min-width: @screen-md) and (max-width: @screen-lg) {
+ .content-section h1 {
+ font-size: 3em;
+ margin-bottom: 40px;
+ }
+
+ .content-section h3 {
+ font-size: 1.8em;
+ }
+}
+
+@media screen and (min-width: @screen-lg) {
+ .content-section h1 {
+ font-size: 3em;
+ margin-bottom: 40px;
+ }
+}
+
+.info-points {
+ font-size: 1.2em;
+}
+
+@media screen and (min-width: @screen-sm) and (max-width: @screen-md) {
+ .info-points {
+ font-size: 1em;
+ }
+}
+
+@media screen and (min-width: @screen-md) and (max-width: @screen-lg) {
+ .info-points {
+ font-size: 1.1em;
+ }
+}
+
+.pitch-column {
+ text-align: left;
+}
+
+.jumbotron ul, .content-section ul {
+ list-style: none;
+ padding-left: 25px;
+}
+
+.jumbotron ul li, .content-section ul li {
+ display: block;
+}
+
+.jumbotron ul li:before, .content-section ul li:before {
+ content: "\e080";
+ font-family: 'Glyphicons Halflings', monospace;
+ font-size: 10px;
+ float: left;
+ margin-top: 6px;
+ margin-left: -17px;
+ color: #aaa;
+}
+
+/* CONTENT SECTION COLORS */
+.intro-section {
+ background-color: #fff;
+}
+
+.stakeholder-section {
+ background-color: #f2f2f2;
+}
+
+.modeling-section {
+ background-color: #fff;
+}
+
+.simulation-section {
+ background-color: #f2f2f2;
+}
+
+.technologies-section {
+ background-color: #fff;
+}
+
+.team-section {
+ background-color: #f2f2f2;
+}
+
+.contact-section {
+ background-color: #444;
+}
+
+/* HEADING SECTION */
+.header-section {
+ background-image: linear-gradient(135deg, #1c2e48, #005bbf, #00c5d6);
+}
+
+.jumbotron {
+ margin: 140px 0 120px 0;
+ background-color: inherit;
+}
+
+.jumbotron h1 {
+ color: #eee;
+}
+
+.jumbotron h1 .dc {
+ color: #eee;
+ font-weight: bold;
+}
+
+.jumbotron h2 {
+ margin-top: 50px;
+ color: #eee;
+
+}
+
+/* INTRO SECTION*/
+.intro-section {
+ padding-top: 0;
+ padding-bottom: 50px;
+ text-align: center;
+}
+
+.pitch-container {
+ margin-top: 50px;
+}
+
+p.img-source {
+ font-size: 0.6em;
+ position: relative;
+ top: 20px;
+}
+
+@media screen and (max-width: @screen-sm) {
+ p.img-source {
+ top: 0;
+ }
+}
+
+/* STAKEHOLDERS */
+@media screen and (max-width: @screen-sm) {
+ .stakeholder-section img {
+ position: relative;
+ top: 15px;
+ }
+}
+
+@media screen and (min-width: @screen-sm) and (max-width: @screen-md) {
+ .stakeholder-section img {
+ position: relative;
+ top: 5px;
+ }
+
+ .stakeholder-section h3 {
+ font-size: 1.5em;
+ }
+}
+
+@media screen and (min-width: @screen-md) and (max-width: @screen-lg) {
+ .stakeholder-section img {
+ position: relative;
+ top: 15px;
+ }
+
+ .stakeholder-section h3 {
+ font-size: 1.7em;
+ }
+}
+
+.stakeholder-container div {
+ text-align: left;
+}
+
+/* MOCKUPS */
+.construction-container {
+ margin-top: 20px;
+ margin-bottom: 60px;
+}
+
+.simulation-container > div:first-child {
+ margin-bottom: 30px;
+}
+
+.img-construction-building {
+ margin-top: 10px;
+}
+
+.modeling-section img, .simulation-section img {
+ outline: 2px solid #3f3f3f;
+ padding-right: 0;
+ padding-left: 0;
+}
+
+.simulation-building-row {
+ margin-bottom: 40px;
+}
+
+.key-points {
+ padding-right: 50px;
+}
+
+/* TECHNOLOGIES */
+.web-flow {
+ font-size: 4em;
+}
+
+.technologies-section {
+ h3 {
+ margin-top: 0;
+ }
+
+ .tech-row {
+ padding: 15px;
+
+ -webkit-border-radius: 10px;
+ -moz-border-radius: 10px;
+ border-radius: 10px;
+
+ margin-bottom: 10px;
+ }
+
+ .browser-tech {
+ background-color: #82d0e7;
+ }
+
+ .server-tech {
+ background-color: #edd667;
+ }
+
+ .database-tech {
+ background-color: #ed9c67;
+ }
+
+ .simulator-tech {
+ background-color: #49d65f;
+ }
+}
+
+.technology-arrow {
+ margin-bottom: 20px;
+ margin-top: 15px;
+}
+
+/* TEAM */
+.team-member-description {
+ margin-bottom: 30px;
+}
+
+/* CONTACT */
+.contact-section {
+ margin-bottom: -5px; // Fixes an unwanted margin that appeared when adding the sign-in button to the nav
+
+ h1 {
+ color: #ddd;
+ }
+
+ .names {
+ color: #ddd;
+ }
+
+ a {
+ color: #ddd;
+ }
+
+ a:hover {
+ color: #fff;
+ }
+}
+
+.tudelft-icon {
+ margin-bottom: 10px;
+} \ No newline at end of file
generated by cgit v1.2.3 (git 2.25.1) at 2026-03-22 00:56:17 +0000