style (#3112)

frontend/src/css/markdown-viewer/comments-list.css

@@ -1,5 +1,4 @@
 .seafile-comment {
-  border-left: 1px solid #e6e6dd;
   background-color: #fff;
   display: flex;
   flex-direction: column;
@@ -12,11 +11,14 @@
   border-bottom: 1px solid #e5e5e5;
   min-height: 2em;
   line-height: 2em;
-  padding: 0 1em;
+  padding: 2px 1em;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   background-color: #fafaf9;
+  position: absolute;
+  z-index: 1;
+  width: 30%;
 }
 .seafile-comment-title .seafile-comment-title-close {
   color: #b9b9b9;
@@ -27,7 +29,10 @@
 .seafile-comment-list {
   height: calc(100% - 40px);
   overflow-y: auto;
-  margin-bottom: 120px;
+  margin: 30px 0 120px;
+}
+.seafile-comment::-webkit-scrollbar {
+  display: none;
 }
 .seafile-comment-list .comment-vacant {
   padding: 1em;
@@ -95,7 +100,7 @@
   position: absolute;
   bottom: 0;
   padding: 0;
-  width: inherit;
+  width: 30%;
 }
 .seafile-comment-footer .seafile-add-comment {
   margin: 10px 20px 5px 15px;
@@ -113,7 +118,8 @@
 }
 .seafile-add-comment .add-comment-input {
   height: calc(100% - 50px);
-  width:  calc(100% - 40px);
+  width: 92%;
+  max-height: 300px;
 }
 .seafile-comment-footer .seafile-add-comment .submit-comment {
   margin-top: 5px;

frontend/src/css/markdown-viewer/history-viewer.css

@@ -1,6 +1,5 @@
 .seafile-history-side-panel {
   user-select: none;
-  border-left: 1px solid #e5e5e5;
   background-color: #fff;
   display: flex;
   flex-direction: column;

frontend/src/css/markdown-viewer/markdown-editor.css

@@ -1,6 +1,8 @@
 .seafile-md-viewer {
   height: 100%;
   flex-direction: row;
+  position: relative;
+  float: none;
 }
 .sf-md-viewer-topbar-first {
   padding: 4px 10px;
@@ -13,7 +15,16 @@
 .seafile-md-viewer-container {
   width: 70%;
   background-color: #fafaf9;
-  overflow-y: auto;
+  overflow: hidden;
+  height: 100%;
+}
+.seafile-md-viewer-container:hover {
+  overflow: auto;
+}
+.seafile-md-viewer-slate {
+  flex: auto;
+  position: relative;
+  margin: 20px 40px;
 }
 .seafile-md-viewer-main {
   flex:auto;
@@ -21,41 +32,11 @@
   background:#fafaf9;
   width: 70%;
 }
-
-.seafile-md-viewer-outline-heading2,
-.seafile-md-viewer-outline-heading3 {
-  margin-left: .75rem;
-  line-height: 2.5;
-  color:#666;
-  white-space: nowrap;
-  overflow:hidden;
-  text-overflow:ellipsis;
-  cursor:pointer;
-}
-.seafile-md-viewer-outline-heading3 {
-  margin-left: 2rem;
-}
-.seafile-md-viewer-outline-heading2:hover,
-.seafile-md-viewer-outline-heading3:hover {
-  color: #eb8205;
-}
-.seafile-markdown-outline {
-  position: fixed;
-  padding-right: 1rem;
-  top: 97px;
-  right: 0;
-  width: 200px;
-  overflow: scroll;
-  height: 80%;
-}
-.seafile-editor-outline {
-  border-left: 1px solid #ddd;
-}
-.seafile-markdown-outline .active {
+.seafile-editor-outline .active {
   color: #eb8205;
   border-left: 1px solid #eb8205;
 }
-.seafile-markdown-outline .outline-h2, .seafile-markdown-outline .outline-h3 {
+.seafile-editor-outline .outline-h2, .seafile-editor-outline .outline-h3 {
   height: 30px;
   margin-left: 0;
   white-space: nowrap;
@@ -63,24 +44,24 @@
   text-overflow: ellipsis;
   font-size: 14px;
 }
-.seafile-markdown-outline .outline-h2 {
+.seafile-editor-outline .outline-h2 {
   padding-left: 20px;
 }
-.seafile-markdown-outline .outline-h3 {
+.seafile-editor-outline .outline-h3 {
   padding-left: 40px;
 }
-
 /* side-panel */
 .seafile-md-viewer-side-panel {
   height: 100%;
   overflow:hidden;
   user-select: none;
+  width: 30%;
 }
 .seafile-md-viewer-side-panel .seafile-editor-outline {
   border-left: 0;
 }
 .seafile-md-viewer-side-panel:hover {
-  overflow:auto;
+  overflow: auto;
 }
 .seafile-md-viewer-side-panel-heading {
   padding:7px 0;
@@ -100,7 +81,11 @@
 }
 .seafile-md-viewer-side-panel .tab-content {
   height: calc(100% - 39px);
-  overflow-y: scroll;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+.seafile-md-viewer-side-panel .tab-content .outline {
+  padding: 20px;
 }
 .seafile-md-viewer-side-panel .md-side-panel-nav {
   margin: 0;
@@ -146,16 +131,12 @@
   cursor: pointer;
   background-color: #eee;
 }
-.seafile-md-viewer-slate {
-  flex: auto;
-  position: relative;
-  margin: 20px 40px;
-}
+
 @media (max-width:991.8px) {
   .seafile-md-viewer-side-panel {
     display:none;
   }
-  .seafile-markdown-outline {
+  .seafile-editor-outline {
     display: none;
   }
   .seafile-md-viewer-slate {