Seahub UI (#5261)

* [top toolbar] fixed the position of the vertical line between 2 sides

- fixed it for all the pages
- removed the duplicated 'div.main-panel' in 'lib-content-view'

* [search] modified the UI

* [top toolbar] redesigned the notification

* [top toolbar] avatar & the triangle: modified the UI

* [left side panel] updated the UI; fixup & improvement

* [misc] modified links' color, op-icon, and etc.

* [misc] updated UI for share dialog, other dialogs, & 'more operations' dropdown

* [misc] UI: modified markdown side panels, comment panels, input/textarea placeholder

* ['user settings' page] modified UI

* [shared dir upload link page] modified the UI

* [user settings] modified the UI

* [user settings] fixup

* [seafile-ui.css] use an updated one (modified color of buttons)

frontend/src/css/layout.css

@@ -15,6 +15,7 @@
   flex: 1;
   display: flex;
   min-height: 0;
+  overflow: hidden;
 }
 
 .side-panel {

frontend/src/css/participants-list.css

@@ -14,7 +14,7 @@
 }
 .participants .add-participants i {
   font-size: 16px;
-  color: rgb(229, 162, 82);
+  color: #ff9800;
   border: 2px solid #fff;
   border-radius: 50%;
 }

frontend/src/css/search.css

@@ -33,6 +33,7 @@
 .search-input {
   height: 1.875rem;
   width: 15rem;
+  font-size: .875rem;
 }
 
 .search-result-container {

frontend/src/css/share-link-dialog.css

@@ -18,17 +18,16 @@
 }
 @media (min-width: 768px) {
   .share-dialog-content .share-dialog-side {
-    padding: 1rem 0 0 1rem;
     border: 0;
     border-right: 1px solid #eee;
   }
   .share-dialog-side .nav {
     flex-direction: column;
   }
-}
-
-.share-dialog-side .nav-pills .nav-item .nav-link {
+  .share-dialog-side .nav-pills .nav-item .nav-link {
     width: 100%;
+    margin: 0;
+  }
 }
 
 .share-dialog-content .share-dialog-main {
@@ -86,7 +85,7 @@
 }
 
 .share-dialog .nav .nav-item .nav-link {
-    padding: 0.3125rem 1rem 0.3125rem 0.25rem;
+    padding: 0.3125rem 0.25rem;
 }
 
 input.expire-input {

frontend/src/css/toolbar.css

@@ -11,7 +11,7 @@
 .border-left-show:before {
   position: absolute;
   top: 10px;
-  left: 0;
+  left: -1px;
   width: 1px;
   height: 30px;
   content: '';
@@ -79,6 +79,7 @@
 .common-toolbar {
   display: flex;
   margin-left: auto;
+  align-items: center;
 }
 
 .common-toolbar > div{

frontend/src/css/upload-link.css

@@ -29,8 +29,8 @@ body {
   list-style: decimal inside none;
 }
 #upload-link-drop-zone {
-  background: rgba(240, 159, 63, 0.1);
-  border: 2px dashed #f09f3f;
+  background: rgba(255, 152, 0, 0.1);
+  border: 2px dashed #ff9800;
   border-radius: 4px;
   padding: 28px 0;
 }

frontend/src/css/user-settings.css

@@ -13,7 +13,7 @@ body {
 
 .side-panel {
   flex: 0 0 22%;
-  padding: 20px;
+  padding: 1rem;
   border-right: 1px solid #eee;
 }
 .main-panel {
@@ -21,26 +21,36 @@ body {
 }
 .heading {
   padding: 8px 16px;
-    background: #f9f9f9;
-    font-size: 1rem;
-    color: #322;
-    font-weight: normal;
-    line-height: 1.5;
-    margin:0;
+  background: #f9f9f9;
+  font-size: 1rem;
+  color: #322;
+  font-weight: normal;
+  line-height: 1.5;
+  margin:0;
+  position: relative;
+}
+.heading:after {
+  position: absolute;
+  left: 16px;
+  right: 16px;
+  bottom: 0;
+  content: '';
+  border-bottom: 1px solid #e8e8e8;
 }
 .content {
   padding: 0rem 1rem 8rem;
   overflow: auto;
 }
 .setting-item {
+  font-size: 0.875rem;
   margin: 1em 0 3em;
 }
 .setting-item-heading {
-  font-size: 1rem;
+  font-size: 0.9375rem;
   font-weight: normal;
-  padding-bottom: 0.2em;
+  padding-bottom: 0.3rem;
   border-bottom: 1px solid #ddd;
-  margin-bottom: 0.7em;
+  margin-bottom: 0.7rem;
 }
 .user-avatar {
   border-radius: 3px;
@@ -67,8 +77,8 @@ body {
   color: #333;
 }
 .user-setting-nav .nav-item.active .nav-link {
-  color: #eb8205;
-  border-color: #eb8205;
+  color: #ff9800;
+  border-color: #ff9800;
 }
 .user-setting-nav .nav-item .nav-link:hover {
   color: #eb8205;