Merge branch 'redesign' into 'master'

merge

See merge request igrannonica/neuronstellar!29

6 files changed, 339 insertions, 0 deletions

diff --git a/frontend/src/styles/font.css b/frontend/src/styles/font.css
new file mode 100644
index 00000000..a4d876f5
--- /dev/null
+++ b/frontend/src/styles/font.css
@@ -0,0 +1,6 @@
+/*p,
+a {
+    font-family: Helvetica, sans-serif;
+    letter-spacing: 2px;
+    font-weight: 100;
+}*/
\ No newline at end of file
diff --git a/frontend/src/styles/fx.css b/frontend/src/styles/fx.css
new file mode 100644
index 00000000..9c29ad58
--- /dev/null
+++ b/frontend/src/styles/fx.css
@@ -0,0 +1,24 @@
+.shadowed:hover {
+    box-shadow: rgba(0, 152, 189, 0.4) 0px 5px, rgba(0, 152, 189, 0.3) 0px 10px, rgba(0, 152, 189, 0.2) 0px 15px, rgba(0, 152, 189, 0.1) 0px 20px, rgba(0, 152, 189, 0.05) 0px 25px;
+}
+
+.shadowed:first-child:hover {
+    box-shadow: rgba(0, 152, 189, 0.4) -5px 5px, rgba(0, 152, 189, 0.3) -10px 10px, rgba(0, 152, 189, 0.2) -15px 15px, rgba(0, 152, 189, 0.1) -20px 20px, rgba(0, 152, 189, 0.05) -25px 25px;
+}
+
+.shadowed:last-child:hover {
+    box-shadow: rgba(0, 152, 189, 0.4) 5px 5px, rgba(0, 152, 189, 0.3) 10px 10px, rgba(0, 152, 189, 0.2) 15px 15px, rgba(0, 152, 189, 0.1) 20px 20px, rgba(0, 152, 189, 0.05) 25px 25px;
+}
+
+.shadow-accent:hover {
+    box-shadow: rgba(0, 152, 189, 0.4) 0px 5px, rgba(0, 152, 189, 0.3) 0px 10px, rgba(0, 152, 189, 0.2) 0px 15px, rgba(0, 152, 189, 0.1) 0px 20px, rgba(0, 152, 189, 0.05) 0px 25px;
+    animation-name: holo-hover;
+    animation-duration: 300ms;
+    transform: perspective(100em) rotateX(10deg);
+}
+
+@keyframes holo-hover {
+    to {
+        transform: perspective(100em) rotateX(10deg);
+    }
+}
\ No newline at end of file
diff --git a/frontend/src/styles/helper.css b/frontend/src/styles/helper.css
new file mode 100644
index 00000000..1c172058
--- /dev/null
+++ b/frontend/src/styles/helper.css
@@ -0,0 +1,144 @@
+@keyframes logo-animation {
+    from {
+        transform: perspective(100em) rotateX(50deg) rotateZ(0deg);
+    }
+    to {
+        transform: perspective(100em) rotateX(50deg) rotateZ(360deg);
+    }
+}
+
+.ann-logo {
+    animation-name: logo-animation;
+    animation-duration: 3140ms;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+}
+
+.bg-controls {
+    position: fixed;
+    bottom: 10px;
+    right: 10px;
+}
+
+.center-horizontal {
+    margin-top: 50%;
+    margin-left: auto;
+    transform: translateX(-50%);
+}
+
+.footer-center {
+    position: relative;
+    height: 1rem;
+    text-align: center;
+}
+
+.row-height {
+    white-space: nowrap;
+    height: 1rem;
+}
+
+.icon-double>*:nth-child(2) {
+    margin-left: -1rem;
+}
+
+.no-wrap {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.btn-clear {
+    border: unset;
+    background-color: unset;
+    outline: unset;
+    position: relative;
+}
+
+.input-icon {
+    color: var(--offwhite);
+    transform: translateY(25%);
+}
+
+.input-icon:hover {
+    color: var(--ns-primary);
+}
+
+.f-row {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.icon-toggle {
+    color: var(--offwhite);
+    height: 100%;
+}
+
+.icon-toggle>* {
+    margin-top: 5px;
+}
+
+.icon-toggle:active {
+    background-color: var(--ns-primary);
+}
+
+.icon-toggle-on {
+    background-color: var(--ns-primary);
+}
+
+.icon-toggle-on>* {
+    transform: scale(1.3);
+}
+
+.force-link {
+    color: var(--offwhite) !important;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.text-primary {
+    color: var(--ns-primary) !important;
+}
+
+.btn-icon {
+    color: var(--offwhite) !important;
+    background-color: var(--ns-primary);
+    border-radius: 50%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    margin: 3px;
+    width: 28px;
+    height: 28px;
+}
+
+.bg-blur {
+    backdrop-filter: blur(2px);
+}
+
+.chart-wrapper {
+    width: 150px;
+    height: 150px;
+    padding-left: 2px;
+}
+
+.close-button {
+    background-color: none;
+    color: white;
+    position: absolute;
+    top: 5px;
+    right: 5px;
+}
+
+input:-webkit-autofill,
+textarea:-webkit-autofill,
+select:-webkit-autofill {
+    -webkit-box-shadow: 0 0 0 1000px var(--ns-bg) inset !important;
+    -webkit-text-fill-color: var(--ns-accent) !important;
+}
+
+a {
+    color: var(--ns-accent) !important;
+}
\ No newline at end of file
diff --git a/frontend/src/styles/layout.css b/frontend/src/styles/layout.css
new file mode 100644
index 00000000..07c0bf34
--- /dev/null
+++ b/frontend/src/styles/layout.css
@@ -0,0 +1,69 @@
+/*Mora da se ispravi za media kada je ekran premali pa se poredjaju u kolonu*/
+
+html,
+body {
+    height: 100%;
+}
+
+.align-items-view>*:first-child {
+    transform: perspective(100em) rotateY(25deg) translateZ(1em);
+}
+
+.align-items-view>* {
+    transform: perspective(100em) translateZ(-2em);
+}
+
+.align-items-view>*:last-child {
+    transform: perspective(100em) rotateY(-25deg) translateZ(1em);
+}
+
+.ns-row {
+    width: 98%;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    margin: 0;
+    padding: 0;
+}
+
+.ns-col {
+    flex-grow: 1;
+    padding: 2px;
+    margin-bottom: 0;
+    padding-bottom: 0;
+    flex-grow: 1;
+    flex-shrink: 0;
+    flex-basis: 50%;
+}
+
+@media screen and (min-width: 1200px) {
+    .ns-col {
+        flex-basis: 25%;
+    }
+}
+
+@media screen and (min-width: 1600px) {
+    .ns-col {
+        flex-basis: 12.5%;
+        width: 10%;
+    }
+}
+
+
+/*.break-1,
+.break-2 {
+    height: 1px;
+    width: 100%;
+}
+
+@media screen and (min-width: 1200px) {
+    .break-1 {
+        display: none;
+    }
+}
+
+@media screen and (min-width: 1600px) {
+    .break-2 {
+        display: none;
+    }
+}*/
\ No newline at end of file
diff --git a/frontend/src/styles/scrollbar.css b/frontend/src/styles/scrollbar.css
new file mode 100644
index 00000000..7fb79329
--- /dev/null
+++ b/frontend/src/styles/scrollbar.css
@@ -0,0 +1,28 @@
+/* width */
+
+::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+}
+
+
+/* Track */
+
+::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0);
+}
+
+
+/* Handle */
+
+::-webkit-scrollbar-thumb {
+    background: rgba(0, 188, 252, 0.6);
+    border-radius: 25px;
+}
+
+
+/* Handle on hover */
+
+::-webkit-scrollbar-thumb:hover {
+    background: rgba(0, 188, 252, 0.8);
+}
\ No newline at end of file
diff --git a/frontend/src/styles/theme.css b/frontend/src/styles/theme.css
new file mode 100644
index 00000000..ee7a2e61
--- /dev/null
+++ b/frontend/src/styles/theme.css
@@ -0,0 +1,68 @@
+:root {
+    --ns-primary: #0063AB;
+    --ns-primary-25: rgba(0, 99, 171, 0.25);
+    --ns-primary-50: rgba(0, 99, 171, 0.5);
+    --ns-accent: #00a8e8;
+    --ns-bg: #003459;
+    --ns-bg-light-30: rgba(0, 152, 189, 0.3);
+    --ns-bg-dark-100: rgba(0, 65, 101, 1.0);
+    --ns-bg-dark-50: rgba(0, 65, 101, 0.5);
+    --offwhite: #dfd7d7;
+    --ns-warn: #f9b7b7;
+    --ns-alt: #002b49;
+}
+
+body {
+    /*background-image: url('/assets/images/add_model_background.jpg');*/
+    background-color: var(--ns-bg);
+}
+
+.bg-light {
+    background-color: var(--ns-bg-light-30) !important;
+}
+
+.bg-alt {
+    background-color: var(--ns-alt);
+}
+
+.ns-border-primary {
+    border: 1px solid var(--ns-primary);
+}
+
+.ns-bg-dark-50 {
+    background-color: var(--ns-bg-dark-50) !important;
+}
+
+.ns-bg-dark-100 {
+    background-color: var(--ns-bg-dark-100) !important;
+}
+
+a {
+    color: var(--ns-primary) !important;
+}
+
+.text-offwhite {
+    color: var(--offwhite) !important;
+}
+
+.highlight {
+    color: var(--ns-accent);
+}
+
+
+/* Ripple effect */
+
+.bubble {
+    background-position: center;
+    transition: background 0.2s;
+}
+
+.bubble:hover {
+    background: var(--ns-primary-50) radial-gradient(circle, transparent 1%, var(--ns-accent) 1%) center/15000%;
+}
+
+.bubble:active {
+    background-color: #6eb9f7;
+    background-size: 100%;
+    transition: background 0s;
+}
\ No newline at end of file