merge style changes from legacy

1 files changed, 40 insertions, 13 deletions

diff --git a/vnext/src/style/main.css b/vnext/src/style/main.css
index 6a307b87..dfc657cf 100644
--- a/vnext/src/style/main.css
+++ b/vnext/src/style/main.css
@@ -41,6 +41,7 @@ img, hr {
     grid-template-areas: "header" "content" "footer";
     grid-template-columns: 1fr;
     grid-template-rows: auto minmax(1fr, auto) auto;
+    grid-gap: 6px;
     min-height: 100vh;
     font: -apple-system-body;
     font-family: -apple-system, Segoe UI;
@@ -50,7 +51,7 @@ img, hr {
 #header {
     grid-area: header;
     background: #fff;
-    border-bottom: 1px solid #ccc;
+    box-shadow: 0 0 3px rgba(0, 0, 0, 0.28);
 }
 
 #sidebar {
@@ -64,6 +65,8 @@ img, hr {
     overflow-x: hidden;
     height: 100%;
     z-index: 1;
+    display: flex;
+    flex-direction: column;
 }
 
 .nav_content {
@@ -112,7 +115,6 @@ img, hr {
 
 #ctitle {
     display: flex;
-    font-size: 14pt;
 }
 
 #ctitle img {
@@ -126,32 +128,57 @@ img, hr {
     display: flex;
 }
 
+#global a,
+#ctitle a {
+    display: flex;
+    align-items: center;
+    border-bottom: 2px solid transparent;
+}
+
 #global a {
-    color: #888;
-    display: inline-block;
-    font-size: 13pt;
+    color: #88958d;
     padding: 14px 16px;
 }
 
-#global li {
-    display: inline-block;
+#sidebar a {
+    color: #88958d;
+    display: flex;
+    padding: 14px;
+    align-items: center;
+    vertical-align: middle;
+}
+#sidebar a:hover {
+    background-color: #f8f8f8;
+    border-right: 2px solid #ff339a;
+    cursor: pointer;
 }
 
 #ctitle a {
-    padding: 4px 20px;
+    padding: 2px 20px;
 }
 
-#global a:hover, #global li:hover, #ctitle a:hover, .l a:hover .msg-button:hover {
-    background-color: #ec4b98;
-    color: #fff;
+#global a:hover,
+#ctitle a:hover,
+.l a:hover
+.msg-button:hover {
+    background-color: #f8f8f8;
+    border-bottom: 2px solid #ff339a;
     cursor: pointer;
 }
 
 .icon {
-    margin-top: -2px;
     vertical-align: middle;
 }
 
+#search input {
+    background: #FFF;
+    border: 1px solid #ccc;
+    outline: none !important;
+    padding: 4px;
+    -webkit-appearance: none;
+    border-radius: 0;
+}
+
 
 @media (--viewport-desktop) {
     #app {
@@ -189,10 +216,10 @@ img, hr {
         border: 0;
         position: static;
         grid-area: nav;
-        width: auto;
         top: inherit;
         left: inherit;
         z-index: inherit;
         overflow-x: inherit;
+        width: 240px;
     }
 }
\ No newline at end of file