8 files changed, 266 insertions, 7 deletions
diff --git a/client/src/admin/scss/_colors.scss b/client/src/admin/scss/_colors.scss
new file mode 100644
index 0000000..45ae737
--- /dev/null
+++ b/client/src/admin/scss/_colors.scss
@@ -0,0 +1,5 @@
+$background: #181818;
+$background-menu: #222;
+$text: #fff;
+$text-selected: orange;
+$text-inactive: #aaa;
diff --git a/client/src/admin/scss/_forms.scss b/client/src/admin/scss/_forms.scss
new file mode 100644
index 0000000..0585cd6
--- /dev/null
+++ b/client/src/admin/scss/_forms.scss
@@ -0,0 +1,52 @@
+// Text Input
+
+.text-input {
+  text-align: left;
+  margin-bottom: 1.5em;
+  transition: all .3s;
+  cursor: text;
+
+  &:focus-within {
+    transform: scale(1.05,1.05);
+  }
+}
+
+.text-input-label {
+  font-size: 1.25em;
+  width: 100%;
+  color: #aaa;
+  display:block;
+  transform:translateY(-1.75em);
+  transform-origin: 0 0;
+  transition: all .3s;
+  z-index: -1;
+  cursor: text;
+}
+
+.text-input-field {
+  font-size: 1.5rem;
+  box-shadow: none;
+  background: $background;
+  color: $text;
+  border-radius: 0;
+  border-color: #ccc;
+  border-style: none none solid none;
+  width: 100%;
+  transition: all .5s;
+  padding: 5px;
+
+  &::placeholder {
+    color: transparent;
+  }
+
+  &:focus {
+    box-shadow: none;
+    outline: none;
+    border-color: $text-selected;
+  }
+
+  &:focus + .text-input-label,
+  &:not(:placeholder-shown) + .text-input-label {
+    transform: translateY(-3em) scale(0.8);
+  }
+}
diff --git a/client/src/admin/scss/_globals.scss b/client/src/admin/scss/_globals.scss
new file mode 100644
index 0000000..f03ad86
--- /dev/null
+++ b/client/src/admin/scss/_globals.scss
@@ -0,0 +1,12 @@
+html {
+  background: $background;
+}
+
+* {
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: -moz-none;
+    -o-user-select: none;
+    user-select: none;
+}
+
diff --git a/client/src/admin/scss/_info.scss b/client/src/admin/scss/_info.scss
new file mode 100644
index 0000000..ac32949
--- /dev/null
+++ b/client/src/admin/scss/_info.scss
@@ -0,0 +1,8 @@
+.info {
+  display: block;
+  color: #ddd;
+  flex-grow: 0;
+  text-align: center;
+  padding-bottom: 3vh;
+  padding-top: 3vh;
+}
diff --git a/client/src/admin/scss/_main.scss b/client/src/admin/scss/_main.scss
new file mode 100644
index 0000000..e182f3c
--- /dev/null
+++ b/client/src/admin/scss/_main.scss
@@ -0,0 +1,16 @@
+.main {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  &__content {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+  }
+}
diff --git a/client/src/admin/scss/_reset.scss b/client/src/admin/scss/_reset.scss
new file mode 100755
index 0000000..2928cc4
--- /dev/null
+++ b/client/src/admin/scss/_reset.scss
@@ -0,0 +1,52 @@
+* {
+  box-sizing: border-box;
+}
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+
+html{
+  min-width: 320px;
+  background: white;
+}
+
diff --git a/client/src/admin/scss/_topBar.scss b/client/src/admin/scss/_topBar.scss
new file mode 100644
index 0000000..af9fcd6
--- /dev/null
+++ b/client/src/admin/scss/_topBar.scss
@@ -0,0 +1,114 @@
+@keyframes showTopMenu {
+  0%   {transform: translateY(100%) scale(0.8) ; opacity: 0;}
+  80%   {transform: translateY(100%) scale(1.1); opacity: 100%;}
+  100%   {transform: translateY(100%) scale(1); opacity: 100%;}
+}
+
+.top-bar {
+  flex-grow: 0;
+  display: flex;
+  justify-content: end;
+  padding: 1em;
+
+
+  &__fog {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+}
+
+.user {
+  position: relative;
+
+  &__list {
+    position: absolute;
+    display: block;
+    bottom: 0;
+    right: 0;
+    transform: translateY(100%);
+    background: $background-menu;
+    animation: showTopMenu .3s;
+  }
+
+  &__main-item {
+    color: $text;
+    display: block;
+    padding: .5em;
+    white-space: nowrap;
+    transition: color .3s;
+    cursor: pointer;
+
+    &--active {
+      background: $background-menu;
+      color: $text-selected;
+    }
+
+    &:hover {
+      color: $text-selected;
+    }
+  }
+
+  &__item {
+    display: block;
+    color: $text;
+    padding: .5em;
+    font-weight: normal;
+    transition: color .3s;
+    cursor: pointer;
+    white-space: nowrap;
+    text-align: right;
+
+    &:hover {
+      color: $text-selected;
+    }
+  }
+}
+
+.lang-switch {
+  display: inline-block;
+  position: relative;
+
+  &__list {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    transform: translateY(100%);
+    background: $background-menu;
+    animation: showTopMenu .3s;
+  }
+
+  &__main-item {
+    transition: .3s color;
+    padding: .5em;
+    display: block;
+    color: $text;
+    font-weight: normal;
+    cursor: pointer;
+
+    &:hover {
+      color: $text-selected;
+    }
+
+    &--active {
+      background: $background-menu;
+      color: $text-selected;
+    }
+  }
+
+  &__item {
+    padding: .5em;
+    display: block;
+    color: $text;
+    font-weight: normal;
+    cursor: pointer;
+    transition: color .3s;
+
+    &:hover {
+      color: $text-selected;
+    }
+  }
+}
diff --git a/client/src/admin/scss/index.scss b/client/src/admin/scss/index.scss
index 67553bb..ab61dd9 100644
--- a/client/src/admin/scss/index.scss
+++ b/client/src/admin/scss/index.scss
@@ -1,8 +1,8 @@
-@import '../../common/scss/reset';
-@import '../../common/scss/colors';
-@import '../../common/scss/globals';
-@import '../../common/scss/forms';
-@import '../../common/scss/main';
-@import '../../common/scss/info';
-@import '../../common/scss/topBar';
+@import 'reset';
+@import 'colors';
+@import 'globals';
+@import 'forms';
+@import 'main';
+@import 'info';
+@import 'topBar';
 @import 'mainScreen';