6 files changed, 103 insertions, 98 deletions
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 5e59e735..1100222e 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -1,99 +1,6 @@
 @import '~bootstrap/dist/css/bootstrap.min.css';
-body {
-    /*background-image: url('/assets/images/add_model_background.jpg');*/
-    background-color: #003459;
-}
-
-.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);
-}
-
-
-/*Mora da se ispravi za media kada je ekran premali pa se poredjaju u kolonu*/
-
-.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);
-}
-
-.bg-light {
-    background-color: rgba(0, 152, 189, 0.3) !important;
-}
-
-a {
-    color: #00a8e8 !important;
-}
-
-@keyframes holo-hover {
-    to {
-        transform: perspective(100em) rotateX(10deg);
-    }
-}
-
-@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;
-}
-
-
-/* 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
+@import './styles/theme.css';
+@import './styles/layout.css';
+@import './styles/helper.css';
+@import './styles/scrollbar.css';
+@import './styles/fx.css';
+\ 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..bed289e4
--- /dev/null
+++ b/frontend/src/styles/helper.css
@@ -0,0 +1,15 @@
+@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;
+}
+\ 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..e24da375
--- /dev/null
+++ b/frontend/src/styles/layout.css
@@ -0,0 +1,13 @@
+/*Mora da se ispravi za media kada je ekran premali pa se poredjaju u kolonu*/
+
+.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);
+}
+\ 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..3ef44e54
--- /dev/null
+++ b/frontend/src/styles/theme.css
@@ -0,0 +1,18 @@
+:root {
+    --ns-primary: #00a8e8;
+    --ns-bg: #003459;
+    --ns-bg-transparent: rgba(0, 152, 189, 0.3)
+}
+
+body {
+    /*background-image: url('/assets/images/add_model_background.jpg');*/
+    background-color: var(--ns-bg);
+}
+
+.bg-light {
+    background-color: var(--ns-bg-transparent) !important;
+}
+
+a {
+    color: var(--ns-primary) !important;
+}
+\ No newline at end of file