v1.0 beta init

public/css/theme/basic.less

@@ -66,7 +66,15 @@
 #switcher span:before {
 	content: "b";
 }
-
+.noteSplit {
+  position: absolute;
+  top: 0;
+  width: 5px;
+  height: 100%;
+  overflow: hidden;
+  z-index: 5;
+  cursor: col-resize;
+}
 .dropdown-menu {
   border-radius: 3px;
   margin:0;
@@ -91,12 +99,12 @@
 .dropdown-submenu .dropdown-menu:before {
 	background: none;
 }
-#searchNotebookForAddDropdownList:before {
-	left: 190px;
-	right: inherit;
-}
-#tagColor:before {
-	background: none;
+#searchNotebookForAddDropdownList, #searchNotebookForAddShareDropdownList {
+	left: -200px;
+	&:before {
+		left: 190px;
+		right: inherit;
+	}
 }
 
 .dropdown-menu li {
@@ -235,9 +243,7 @@
 	line-height: 40px; margin-top: 10px;
 }
 
-#searchNotebookForAddDropdownList {
-	left: -200px;
-}
+
 
 #searchNotebookForAdd {
 	line-height: normal;
@@ -251,6 +257,10 @@
 #myNotebooks .folderBody {
 	padding-top: 3px;
 }
+// 防止左侧笔记本名称太长
+.folderBody {
+	overflow-x: hidden;
+}
 #searchNotebookForList {
 	height: 30px;
 	width: 90%;
@@ -319,13 +329,29 @@
 	border-radius: 3px;
 }
 
+//
+.notebook-number-notes {
+	position: absolute;
+	right: 10px;
+	top: 0;
+	bottom: 0;
+	z-index: 1;
+	display: inline-block;
+	//border: 1px solid #ccc;
+	//border-radius: 1px;
+	line-height: 20px !important;
+	height: 20px;
+	margin-top: 5px;
+	padding: 0 3px;
+}
 // 设置
 .notebook-setting {
 	display: none;
 	position: absolute;
-	right: 3px;
+	right: 1px;
 	top: 0;
 	bottom: 0;
+	z-index: 2;
 	line-height: 30px;
 }
 .notebook-setting:before {
@@ -388,20 +414,20 @@
 	position: relative;
 	margin-top: 5px;
 }
-#dropAttach {
+.dropzone {
 	text-align: center;
 	input {
 		display: none;
 	}
 }
-#dropAttach.in {
+.dropzone.in {
     border: 1px solid #000000;
 }
-#dropAttach.hover {
+.dropzone.hover {
     border: 2px solid #000000;
 }
 
-#attachUploadMsg{
+#attachUploadMsg, #avatarUploadMsg{
 	list-style-type: none;
 	margin: 0;
 	padding: 0;
@@ -441,6 +467,9 @@
 			float: right;
 		}
 	}
+	li.loading {
+		text-align: center;
+	}
 }
 
 //--------
@@ -557,4 +586,344 @@
 	-moz-animation-name: fadeInUp;
 	-o-animation-name: fadeInUp;
 	animation-name: fadeInUp;
+}
+
+#historyList {
+	img {
+		max-width: 100%;
+	}
+}
+#avatar {
+	height: 60px; max-width: 200px; display: inline-block; margin: 10px;
+}
+#noteReadTitle {
+	white-space: nowrap;text-overflow:ellipsis; overflow:hidden;
+}
+#noteReadInfo {
+	white-space: nowrap;text-overflow:ellipsis; overflow:hidden;
+	color: #666;
+}
+.my-link, .new-markdown-text-abbr, .new-note-text-abbr {
+	display: none;
+}
+#myAvatar {
+	height: 30px; 
+	max-width: 30px;
+	overflow: hidden;
+	// border: 1px solid #ccc;
+	border-radius: 50%;
+}
+#tool {
+	position: relative;
+}
+#tag {
+	position: absolute;
+	right: 270px;
+	left: 0;
+	top: 0;
+	bottom: 0;
+}
+#tagColor {
+	left: 10px;
+	&:before {
+		content: "";
+		background-image: none;
+	}
+}
+#addTagInput {
+	width: 100px;
+}
+#notesAndSort {
+	height: 36px;
+}
+#noteItemListWrap {
+	position: absolute; left: 0; right: 0; 
+	top: 36px; bottom: 3px;
+}
+
+// -------------------
+// mdeditor 
+
+#mdEditorPreview {
+	position: absolute;	
+	top: 35px;
+	left: 0;
+	right: 0;
+	bottom: 0;
+}
+
+#left-column, #right-column, #mdSplitter{
+	position: absolute;
+	top: 0;
+	bottom: 0;
+}
+#mdSplitter {
+	width: 5px;
+	height: 100%;
+	overflow: hidden;
+	z-index: 5;
+	cursor: col-resize;
+	left: 450px;
+	background: none;
+}
+#left-column {
+	left: 0;
+	width: 450px;
+}
+#right-column {
+	left: 450px;
+	right: 0;
+	overflow: hidden;
+}
+
+.wmd-panel-editor, .preview-container, #wmd-input {
+	height: 100%;
+}
+
+.wmd-panel-editor, .wmd-panel-preview {
+}
+
+.wmd-input, .wmd-input:focus, #md-section-helper /* helper必须在这里 */
+{
+	width: 100%;
+	border: 1px #eee solid;
+	border-radius: 5px;
+	outline: none;
+    font-size: 14px;
+    resize: none;
+    overflow-x: hidden;
+}
+
+/* 不能为display: none */
+#md-section-helper {
+	position: absolute;
+    height: 0;
+    overflow-y: scroll;
+    padding: 0 6px;
+    top:10px; /*一条横线....*/
+    z-index: -1;
+    opacity: none;
+}
+
+#right-column {
+	border: 1px dashed #BBBBBB;
+    border-radius: 5px;
+    padding-left: 5px;
+}
+.preview-container {
+    overflow: auto;
+    
+}
+
+.wmd-preview { 
+	width: 100%;
+    font-size: 14px;
+    overflow: auto;
+    overflow-x: hidden;
+}
+
+.wmd-button-row, .preview-button-row
+{
+	padding: 0px;  
+	height: auto;
+	margin: 0;
+}
+
+.wmd-spacer
+{
+	width: 0px; 
+	height: 20px; 
+	margin-left: 10px;
+
+	background-color: Silver;
+	display: inline-block; 
+	list-style: none;
+}
+.wmd-button, .preview-button {
+    width: 20px;
+    height: 20px;
+    display: inline-block;
+    list-style: none;
+    cursor: pointer;
+    font-size: 17px;
+}
+.wmd-button {
+    margin-left: 10px;
+}
+.preview-button {
+    margin-right: 10px;
+}
+.wmd-button > span, .preview-button > span {
+    width: 20px;
+    height: 20px;
+    display: inline-block;
+	font-size: 14px;
+}
+
+// 顶部导航, 博客
+.top-nav {
+	margin: 0 10px;
+	display: inline-block;
+	line-height: 60px;
+}
+
+// context-menu
+// 防止换行
+.cm-item {
+	position: relative;
+	.cm-text {
+		position: absolute;
+		left: 23px;
+		right: 10px;
+		white-space: nowrap;text-overflow:ellipsis;
+		overflow: hidden;
+		.c-text {
+			display: initial;
+		}
+	}
+}
+.b-m-mpanel {
+	border-radius: 3px;
+}
+
+//-------------
+// 
+
+/* 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;
+}
+
+//--------
+// 右部edtior
+// 为splitter使用
+#editorMask {
+	position: absolute; top: 0px; bottom: 0px; right: 0; left: 0; 
+	background-color: #fff;
+	display: none;
+	z-index: -10;
+	.fa, a {
+		font-size: 24px;
+	}
+	padding-top: 50px;
+	text-align: center;
+	a {
+		display: inline-block;
+		border-radius: 3px;
+		border: 1px solid @borderColor;
+		padding: 10px;
+		&:hover {
+			background-color: @noteActiveBg;
+			color: #fff;
+		}
+	}
+}
+.note-mask {
+	position: absolute; top: 0px; bottom: 0px; right: 0; left: 3px; z-index: -1;
+}
+#noteMaskForLoading {
+	padding-top: 60px;
+	background: #fff;
+	text-align: center;
+	opacity: .3;
+}
+#themeForm td {
+	padding: 5px;
+	text-align: center;
+}
+#themeForm img {
+	border: 1px solid #eee;
+	padding: 2px;
+}
+
+.dropdown-menu .divider {
+	margin: 3px 0;
 }