fix(root_frame): clean up styles

public/static/css/default.css

@@ -423,7 +423,7 @@
 }
 
 .grey3-bg {
-  color: #697384;
+  background-color: #697384;
 }
 
 .black-bg {

public/static/css/reset.css

@@ -44,30 +44,18 @@ img {
   user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
 }
 a {
-  color: #16a085;
   opacity: 100%;
   text-decoration: none;
-  transition: color 1s 1 linear;
-}
-a:hover {
-  color: #2ecc71;
-}
-a:active {
+  transition: color 300ms;
 }
 a::selection {
   background: transparent;
 }
 
-button {
-  background-color: transparent;
-  border: none;
-  outline: none;
-}
-button:active {
-  /* animation: fade 0.1s 1 linear; */
-}
-button:hover {
-  /* animation: fade 0.1s 1 linear; */
+span,
+div,
+svg {
+  transition: color 300ms, background-color 300ms;
 }
 
 img {
@@ -88,31 +76,30 @@ input {
   padding: 0.8rem 1rem;
   width: 10rem;
 
-  background-color: rgba(0, 0, 0, 0.15);
   border-radius: 0.5rem;
+
+  transition: opacity 300ms, box-shadow 300ms;
 }
 
 input:focus {
   opacity: 0.8;
-  box-shadow: 0 0.1rem 1rem rgba(0, 0, 0, 0.1);
-}
-
-::placeholder {
-  color: #95a5a6;
 }
 
 button {
   cursor: pointer;
   border: none;
   border-radius: 0.5rem;
+  outline: none;
   padding: 0.8rem 1rem;
 
-  background-color: rgba(0, 0, 0, 0.3);
-
   font-weight: bold;
   border-radius: 0.5rem;
-}
 
-button:hover {
-  opacity: 0.9;
+  transition: opacity 300ms;
+}
+button:hover {
+  opacity: 0.8;
+}
+button:active {
+  opacity: 1;
 }

public/static/css/white.css

@@ -1,3 +1,52 @@
+.dark-font {
+  color: #34495e;
+}
+.light-font {
+  color: #95a5a6;
+}
+.normal-font {
+  color: #697384;
+}
+.highlight-font {
+  color: #16a085;
+}
+.error-font {
+  color: #f1c40f;
+}
+
+.light-bg {
+  background-color: white;
+}
+.normal-bg {
+  background-color: #ecf0f6;
+}
+.highlight-bg {
+  color: #16a085;
+}
+.dark-bg {
+  background-color: #2c3e50;
+}
+button {
+  background-color: rgba(0, 0, 0, 0.3);
+}
+::placeholder {
+  color: #95a5a6;
+}
+a {
+  color: #16a085;
+}
+a:hover {
+  color: cc#2ecc71;
+}
+input {
+  background-color: rgba(0, 0, 0, 0.15);
+}
+input:focus {
+  opacity: 0.8;
+  box-shadow: 0 0.1rem 1rem rgba(22, 160, 133, 0.1);
+}
+
+
 #root-frame {
   position: fixed;
   left: 0;
@@ -17,22 +66,11 @@
 }
 
 .theme-default #top-bar {
-  background: rgba(255, 255, 255, 0.9);
-  backdrop-filter: blur(9.5px);
-  color: #16a085;
   padding: 1rem 2rem 1rem 2rem;
-  -webkit-backdrop-filter: blur(9.5px);
   position: relative;
   z-index: 2;
-}
-
-.theme-default #topbar-user-info {
-  color: #697384;
-  margin-right: 1rem;
-}
-
-.theme-default #top-bar button {
-  min-width: 7rem;
+  backdrop-filter: blur(9.5px);
+  -webkit-backdrop-filter: blur(9.5px);
 }
 
 .theme-default #top-menu {