From 180f388af1c24dca6a494c01465ae2ee92cc6fef Mon Sep 17 00:00:00 2001
From: shanshuirenjia <ysq9207@126.com>
Date: Sat, 15 Sep 2018 17:47:09 +0800
Subject: [PATCH] Clean css (#2377)

---
 media/css/seahub.css       |   7 +-
 media/css/seahub_react.css | 380 ++++++++++++++-----------------------
 2 files changed, 151 insertions(+), 236 deletions(-)

diff --git a/media/css/seahub.css b/media/css/seahub.css
index 74b5e84550..c7005e29f8 100644
--- a/media/css/seahub.css
+++ b/media/css/seahub.css
@@ -212,7 +212,8 @@ form,input,textarea,select,button,img {
     margin:0;
 }
 body, input, textarea, button, select {
-    font: 13px/1.5 Arial, Helvetica, sans-serif;
+    font-size: 13px;
+    line-height: 1.5;
     color: #333;
     word-wrap:break-word;
 }
@@ -1290,7 +1291,7 @@ textarea:-moz-placeholder {/* for FF */
 }
 .new-narrow-panel .con {
     padding:30px 0 60px;
-    width:268px; 
+    width:268px;
     margin:0 auto;
 }
 .new-narrow-panel .input {
@@ -3912,7 +3913,7 @@ button.sf-dropdown-toggle:focus {
     color: #999;
 }
 .shared-link-copy-icon:hover {
-    cursor: pointer; 
+    cursor: pointer;
     color: #333;
 }
 
diff --git a/media/css/seahub_react.css b/media/css/seahub_react.css
index 403b33565c..e7c21ec715 100644
--- a/media/css/seahub_react.css
+++ b/media/css/seahub_react.css
@@ -1,3 +1,31 @@
+/**
+ * CONTENTS
+ *
+ * Font Icons
+ * sf2-icon-xx ...........seafile-font2
+ *
+ *
+ * Helper
+ * common class ..........common class
+ *
+ * UI Widgets(ui widgets)
+ * topbar button
+ * caret
+ * loading
+ * popover
+ * op-icon
+ * path
+ * account
+ * quota
+ * side-tabnav
+ * about-dialog
+ * notifications
+ * sf-popover
+ * go-back
+ * Container
+ * Container ......... common container styles
+ *
+ */
 /****** sf2-icon-xx ********/
 @font-face {
     font-family: 'seafile-font2';
@@ -61,7 +89,14 @@ ul,ol,li {
     margin:0;
 }
 
-/* common elements */
+.sf-heading {
+    font-size: 1rem;
+    color: #322;
+    font-weight: normal;
+    line-height: 1.5;
+}
+
+/* UI Widget */
 
 /**** topbar button ****/
 .btn-topbar {
@@ -152,27 +187,6 @@ ul,ol,li {
     margin:1em auto;
 }
 
-
-/** popover **/
-.sf-popover {
-    width:240px;
-    background:#fff;
-    border:1px solid #c9c9c9;
-    border-radius:3px;
-    box-shadow:0 0 4px #ccc;
-    position:absolute;
-    z-index: 20;
-}
-.sf-popover-con {
-    padding:0 10px;
-    overflow:auto;
-}
-.sf-popover-close {
-    font-size:16px;
-    color:#b9b9b9;
-    margin:4px 0 0;
-}
-
 /** op-icon **/
 .op-icon {
     font-size:20px;
@@ -183,109 +197,6 @@ ul,ol,li {
     vertical-align:middle;
 }
 
-/* basic layout */
-#wrapper {
-  height: 100%;
-}
-#main {
-  display: flex;
-  height: 100%;
-  width: 100%;
-}
-.main-panel {
-  flex: 1 0 75%;
-  display:flex;
-  flex-direction:column;
-}
-
-.side-panel {
-  flex: 0 0 25%;
-  display:flex;
-  flex-direction:column;
-  overflow:hidden;
-}
-@media (max-width: 767px) {
-    .side-panel {
-        background:#f8f8f8;
-        width:300px;
-        height:100%;
-        position:fixed;
-        left:-300px;
-        z-index:1; /* important! */
-        -webkit-transition: all 0.3s ease;
-        -moz-transition: all 0.3s ease;
-        transition: all 0.3s ease;
-    }
-}
-.panel-top {
-    padding:.5rem 1rem;
-    background:#f4f4f7;
-    border-bottom: 1px solid #e8e8e8;
-    display:flex;
-    flex-shrink:0;
-}
-.side-panel-top {
-    padding: .5rem 1rem;
-}
-@media (max-width: 767px) {
-    .side-panel-top {
-        border-right:1px solid #eee;
-    }
-}
-.side-panel-close {
-    margin:10px 0 0 auto;
-}
-.side-nav-footer {
-    display:flex;
-    flex-shrink:0;
-    padding:12px 20px 16px;
-    background:#f8f8f8;
-    border-top:1px solid #eee;
-    border-right: 1px solid #eee;
-}
-.side-nav-footer .item {
-    color:#666;
-    font-weight: normal;
-    margin-right:10px;
-}
-.side-nav-footer .last-item {
-    margin-left:auto;
-}
-.cur-view-main {
-    flex:1 1 auto;
-    display:flex;
-    flex-direction:column;
-}
-.cur-view-path {
-    flex-shrink:0;
-    min-height:40px;
-    padding:8px 16px 0;
-    background:#f9f9f9;
-    position:relative; /* for the ':after' */
-}
-.cur-view-path:after {
-    content:'';
-    border-bottom:1px solid #e8e8e8;
-    position:absolute;
-    left:16px;
-    right:16px;
-    bottom:0;
-}
-.cur-view-main-con {
-    padding:10px 16px 20px;
-    overflow:auto;
-    flex:auto;
-    height: calc(100% - 40px);
-}
-.cur-view-main-con .hd {
-    padding-bottom:0;
-    height:48px;
-    padding:9px 10px;
-    background:#f2f2f2;
-    margin-bottom:.5em;
-    border-radius:2px;
-}
-
 
 /**** path ****/
 .path-containter { /* for the real path */
@@ -417,7 +328,6 @@ ul,ol,li {
     }
 }
 
-
 a.op-icon:focus {
     outline:none;
     text-decoration:none;
@@ -427,8 +337,6 @@ a.op-icon:focus {
     text-decoration:none;
 }
 
-
-
 /**** side-tabnav ****/
 .side-textnav .hd,
 .side-info .hd {
@@ -564,7 +472,7 @@ a.op-icon:focus {
 .side-panel-slide {
     transition: all .3s ease-in-out;
 }
-  
+
 .side-panel-slide-up {
     transition: all .3s ease-in-out;
     height: 0;
@@ -645,14 +553,6 @@ a.op-icon:focus {
     }
 }
 
-.sf-heading {
-    font-size: 1rem;
-    color: #322;
-    font-weight: normal;
-    line-height: 1.5;
-}
-
-
 /* about dialog */
 .about-content {
     min-width: 280px;
@@ -660,95 +560,7 @@ a.op-icon:focus {
     text-align: center;
 }
 
-/* search */
-.search-input {
-    margin:0;
-    border:1px solid #ddd;
-    border-radius:3px;
-}
-.search-form .search-submit { /* the icon submit */
-    position:absolute;
-    right:1px;
-    top:1px;
-    width:30px;
-    height:23px;
-    padding:0;
-    border:0;
-    margin:0;
-}
-.search-form .icon-search {
-    font-size:16px;
-    color:#aaa;
-}
-.search-form .icon-caret-down {
-    color:#bbb;
-    cursor:pointer;
-    line-height:24px;
-}
-.top-search-link {
-    margin-top:5px;
-}
-.top-search-link .icon-search {
-    font-size:19px;
-    line-height:1;
-    color:#999;
-}
-#top-search-form {
-    position:relative;
-    margin-top:3px;
-}
-#top-search-form .search-input {
-    width:190px;
-    font-size: 0.875rem;
-    padding:1px 30px 1px 5px;
-}
-
-.wiki-page-ops {
-    position:fixed;
-    top:10px;
-}
-@media (min-width: 768px) {
-    .wiki-page-ops:before {
-        content:'';
-        border-left:1px solid #ddd;
-        position:absolute;
-        top:3px;
-        left:-16px;
-        bottom:3px;
-    }
-}
-
-.sf-btn-link:hover {
-    cursor:pointer;
-    background:#fff;
-    color:#333;
-    text-decoration:none;
-}
-
-.sf-btn-link,
-select {
-    padding:5px 6px;
-    background:-webkit-linear-gradient(top, #fafafb, #eeeeee);
-    background:-moz-linear-gradient(top, #fafafb, #eeeeee);
-    background:linear-gradient(top, #fafafb, #eeeeee);
-    border: 1px solid #c5c5c5;
-    border-radius: 2px;
-}
-
-.sf-btn-link {
-    display:inline-block;
-    color:#333;
-    line-height:19px;
-    text-decoration:none;
-    font-weight:normal;
-}
-
-.btn-white {
-    height:29px;
-    background:#fff;
-    line-height:17px;
-}
-
+/* notifications */
 #notifications .sf2-icon-bell {
     font-size:24px;
     line-height:1;
@@ -844,13 +656,6 @@ select {
     overflow:auto;
 }
 
-.main-panel-main {
-    flex:auto;
-    display:flex;
-    flex-direction:column;
-    overflow:hidden; /* for ff */
-}
-
 /* for go-back */
 .go-back {
     font-size: 25px;
@@ -862,3 +667,112 @@ select {
     color:#ff9933;
     text-decoration: none;
 }
+
+/* basic layout */
+#wrapper {
+  height: 100%;
+}
+#main {
+  display: flex;
+  height: 100%;
+  width: 100%;
+}
+.main-panel {
+  flex: 1 0 75%;
+  display:flex;
+  flex-direction:column;
+}
+
+.side-panel {
+  flex: 0 0 25%;
+  display:flex;
+  flex-direction:column;
+  overflow:hidden;
+}
+@media (max-width: 767px) {
+    .side-panel {
+        background:#f8f8f8;
+        width:300px;
+        height:100%;
+        position:fixed;
+        left:-300px;
+        z-index:1; /* important! */
+        -webkit-transition: all 0.3s ease;
+        -moz-transition: all 0.3s ease;
+        transition: all 0.3s ease;
+    }
+}
+.panel-top {
+    padding:.5rem 1rem;
+    background:#f4f4f7;
+    border-bottom: 1px solid #e8e8e8;
+    display:flex;
+    flex-shrink:0;
+}
+.side-panel-top {
+    padding: .5rem 1rem;
+}
+@media (max-width: 767px) {
+    .side-panel-top {
+        border-right:1px solid #eee;
+    }
+}
+.side-panel-close {
+    margin:10px 0 0 auto;
+}
+.side-nav-footer {
+    display:flex;
+    flex-shrink:0;
+    padding:12px 20px 16px;
+    background:#f8f8f8;
+    border-top:1px solid #eee;
+    border-right: 1px solid #eee;
+}
+.side-nav-footer .item {
+    color:#666;
+    font-weight: normal;
+    margin-right:10px;
+}
+.side-nav-footer .last-item {
+    margin-left:auto;
+}
+.cur-view-main {
+    flex:1 1 auto;
+    display:flex;
+    flex-direction:column;
+}
+.cur-view-path {
+    flex-shrink:0;
+    min-height:40px;
+    padding:8px 16px 0;
+    background:#f9f9f9;
+    position:relative; /* for the ':after' */
+}
+.cur-view-path:after {
+    content:'';
+    border-bottom:1px solid #e8e8e8;
+    position:absolute;
+    left:16px;
+    right:16px;
+    bottom:0;
+}
+.cur-view-main-con {
+    padding:10px 16px 20px;
+    overflow:auto;
+    flex:auto;
+    height: calc(100% - 40px);
+}
+.cur-view-main-con .hd {
+    padding-bottom:0;
+    height:48px;
+    padding:9px 10px;
+    background:#f2f2f2;
+    margin-bottom:.5em;
+    border-radius:2px;
+}
+.main-panel-main {
+    flex:auto;
+    display:flex;
+    flex-direction:column;
+    overflow:hidden; /* for ff */
+}