refactor to use app-rooted js imports

1 files changed, 172 insertions, 0 deletions

diff --git a/frontend/app/views/graph/graph.css b/frontend/app/views/graph/graph.css
new file mode 100644
index 0000000..389a55d
--- /dev/null
+++ b/frontend/app/views/graph/graph.css
@@ -0,0 +1,172 @@
+.graph.loading {
+  padding: 1rem;
+}
+.graph {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: linear-gradient(
+      0deg,
+      rgba(128, 0, 64, 0.5),
+      rgba(0, 0, 64, 0.5)
+    );
+}
+.graph canvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+/* Sidebar boxes */
+
+.sidebar {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 1rem;
+  overflow: auto;
+  max-height: 100%;
+  z-index: 20;
+}
+.box {
+  width: 15rem;
+  padding: 0.5rem;
+  background: rgba(64,12,64,0.9);
+  border: 2px solid #000;
+  box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
+}
+.box h1,
+.box h2 {
+  font-size: 1rem;
+  margin: 0 0 0.5rem 0;
+}
+.box form label {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-bottom: 0.25rem;
+}
+.box form .buttons {
+  justify-content: space-between;
+}
+.box form .buttons label {
+  width: auto;
+  min-width: auto;
+}
+.box form .buttons label span {
+  display: none;
+}
+.box form .buttons button:last-child {
+  margin-right: 0;
+}
+.box form label.checkbox {
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+}
+.box form input[type="checkbox"] {
+  margin-left: 0rem;
+}
+.box form input[type=checkbox] + span {
+  color: #ddd;
+}
+.box form input[type=checkbox]:hover + span {
+  color: #fff;
+}
+.box form input[type="checkbox"]:after {
+  border-color: #84f;
+}
+.box form input[type="checkbox"]:checked:after {
+  border-color: #84f;
+  background-color: #84f;
+}
+.box form input[type=checkbox]:hover + span {
+  color: #84f;
+}
+.box input[type=text],
+.box input[type=number],
+.box input[type=password] {
+  padding: 0.25rem;
+  max-width: 100%;
+  border-color: #888;
+}
+.box textarea {
+  max-width: 100%;
+  height: 5rem;
+  border-color: #888;
+}
+.box .select {
+  padding: 0.25rem;
+  margin-right: 0;
+}
+.box .selects label {
+  flex-direction: row;
+  width: 6.5rem;
+  margin-right: 0.5rem;
+  min-width: auto;
+}
+.box form textarea {
+  padding: 0.25rem;
+}
+
+.box form .pair label span {
+  min-width: 3rem;
+  padding: 0.25rem 0;
+}
+.box .pair label {
+  flex-direction: row;
+  width: 6.5rem;
+  margin-right: 0.5px;
+  min-width: auto;
+}
+.box .pair input[type=text] {
+  width: 3rem;
+}
+.box .position {
+  font-size: smaller;
+  margin-bottom: 0.25rem;
+}
+
+.box .slider {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+.box .slider span {
+  min-width: 4rem;
+  width: 4rem;
+  padding: 0.125rem 0;
+}
+.box .slider input[type='number'] {
+  width: 3.5rem;
+}
+.box .slider input[type='range'] {
+  width: 5.5rem; 
+}
+
+/* Graph handles */
+
+.handle {
+  position: absolute;
+  border: 2px solid #888;
+  background: #8833dd;
+  padding: 0.25rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 8rem;
+  user-select: none;
+  cursor: arrow;
+}
+.handle.homepage {
+  background: #533854;
+  border-color: #edc40e;
+}
+.handle a {
+  margin-left: 0.25rem;
+  color: #fff;
+  font-weight: bold;
+  text-decoration: none;
+}