markdown editor v2

public/css/theme/includes/note_list.less

@@ -0,0 +1,180 @@
+/**
+ * 笔记列表
+ */
+
+
+#notesAndSort {
+    height: 36px;
+}
+
+// 为了显示右侧的线条
+#noteList {
+    z-index: 333;
+}
+
+#noteItemListWrap {
+    position: absolute; left: 0; right: 0; 
+    top: 36px; bottom: 3px;
+}
+
+#noteList {
+  position: absolute;
+  bottom: 0;
+  top: 0;
+}
+// 笔记列表与editor的遮罩
+#noteAndEditorMask {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background: #fff;
+    text-align: center;
+    padding-top: 60px;
+    opacity: .3;
+    z-index: 20;
+    display: none;
+}
+
+//-------------
+// 
+
+/* item list */
+#noteItemList {
+  position: absolute;
+  top: 0;
+  left:0;
+  right:0;
+  bottom: 0;
+  width: 100%;
+  overflow-y: hidden;
+  padding: 0 5px;
+}
+#noteItemList .item {
+  position: relative;
+  height: 110px;
+  overflow: hidden;
+  cursor: pointer;
+    border: 1px solid @borderColor;
+    border-radius: 3px;
+  margin-top: 5px;
+  background-color: #fff;
+}
+
+#noteItemList .item:hover, 
+#noteItemList .contextmenu-hover {
+  background-color: #ddd !important;
+  //color: @aBlackColor;
+  .item-title {
+    //color: @aBlackColor;
+    //font-weight: 800;
+  }
+}
+
+.item-active, #noteItemList .item-active:hover {
+  background-color: #65bd77 !important; // #eee;/*@bgColor*/;
+  color: #fff;
+  .fa {
+     color: #eee !important;
+  }
+  .item-title {
+    color: #fff;
+    // font-weight: 800;
+  }
+}
+#noteItemList .item-thumb  {
+  width: 100px; 
+  height: 100px; 
+  overflow: hidden;
+  position: absolute; 
+  z-index: 1;
+  right: 0px;
+top: 4px;
+  height: 100px;
+  background-color: #fff;
+  margin-right: 5px;
+  line-height: 100px;
+  text-align: center;
+}
+.item-thumb img {
+ max-width: 100px;
+}
+
+.item-title {
+    /*font-weight: 400;*/
+    font-size: 16px;
+    height: 22px;
+    line-height: 20px;
+    overflow: hidden;
+    margin-bottom: 0px;
+    color: @aBlackColor;
+    border-bottom: dashed 1px @borderColor;
+}
+
+#noteItemList .item-desc {
+  position: absolute; 
+  left: 0;
+  top: 4px;
+    right: 0px;
+  margin-left: 4px;
+  .fa { // folder, calender 颜色暗些
+    color: #666;
+  }
+}
+#noteItemList .item-image .item-desc {
+  right: 100px;
+}
+
+.item-info {
+    margin: 0;
+    white-space: nowrap;
+    text-overflow:
+    ellipsis;
+    overflow:hidden;
+}
+.desc {
+    margin: 0;
+    word-wrap: break-word;
+}
+
+// blog
+#noteItemList {
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    .item-setting, .item-blog {
+      position: absolute; 
+      right: 1px;
+      font-size: 10px;
+      z-index: 2;
+      padding: 3px;
+      border-radius: 5px;
+      cursor: pointer;
+      .fa {
+          color: #fff !important;
+      }
+      width: 20px;
+      text-align: center;
+      opacity: 0.5;
+      &:hover {
+          opacity: 0.8;
+      }
+      background-color: #464C5E;
+     }
+      
+     .item-blog {
+        top: 1px;
+     }
+      
+     .item-setting {
+        bottom: 0;
+        display: none;
+     }
+}
+
+#noteItemList .item:hover  {
+     .item-setting {
+        display: block;
+     }
+}