@import "basic.less"; @bgColor: #fff; @headerBgColor: #25313e; @fontFamily: 'Open Sans','Helvetica Neue',Arial,'Hiragino Sans GB','Microsoft YaHei','WenQuanYi Micro Hei',sans-serif; @aWhiteColor: #fff; @aBlackColor: #000; @borderColor: #EBEFF2; @headerHeight: 60px; @headerHeightNoBorder: 59px; @hColor: #0fb264; // #47a447;// 更深 #198764; // boostrap: #5cb85c; bootstrap:hover #47a447; // #5AD4A0; // #47a447 @titleColor: @hColor; @fontSize: 14px; @leftNotebookWidth: 170px; @noteListWidth: 250px; @noteActiveBg: #65bd77; @selectionBg: @aBlackColor; @selectionColor: #fff; ::selection { background:@selectionBg; color:@selectionColor; } ::-moz-selection { background:@selectionBg; color:@selectionColor; } ::-webkit-selection { background:@selectionBg; color:@selectionColor; } html,body { } *, body { font-family: @fontFamily; font-weight: 300; font-size: @fontSize; } h1, h2, h3 { font-family: @fontFamily; font-weight: 300 !important; } a { color: @aBlackColor; cursor: pointer; } a:hover { text-decoration: none !important; color: @aBlackColor; } // 原生的a a.raw { color: #428bca; } a.raw:hover { color: #2a6496; } /* header */ #header { height: @headerHeight; background-color: @headerBgColor; color: @aWhiteColor; a { color: #ccc;//@aWhiteColor; } li { color: @aBlackColor; } li a { color: @aBlackColor; } border-bottom: 1px solid @borderColor; /* for app */ webkit-user-select: none; /* 还不知 */ -webkit-app-region: drag; /* -webkit-app-region: no-drag; */ } #logo, #logo span { line-height: 50px;//@headerHeight; } #logo { width: 140px; height: @headerHeightNoBorder; //background-color: #41586e; // #374b5e; // #65bd77; padding-left: 10px; padding-top: 0px; border-bottom: 1px solid transparent; border-color: rgba(255, 255, 255, 0.1); //color: #ccc; } #logo span{ background-color: #000; //color: #eee; border-radius: 10px; display: inline-block; padding: 4px 0;//4px 3px 4px 3px; line-height: 1.0; } #switcher { line-height: 50px;//@headerHeight; padding-top: 6px; padding-right: 5px; width: 30px; text-align: center; i { font-size: 16px; cursor: pointer; &:hover { color: @hColor; } } span { border-radius: 5px; background-color: #000; cursor: pointer; font-size: 16px; &:hover { color: @hColor; } } } #searchNote { padding-left: 0; line-height: 60px; margin:0; input { background-size: 18px 13px; border-color: @borderColor; border: none; color: #ccc; background-color: #000; padding-left: 14px; border-radius: 5px; //height: 30px; width: @noteListWidth; line-height: 20px; box-shadow: none; &:focus { outline: none !important; border-color: @hColor; box-shadow: none; } } } #header ul { margin:0; padding:0; list-style: none; } #header ul li.dropdown { display: inline-block; height: @headerHeight; } #header ul > li > a.dropdown-toggle { display: block; // 这里必须要有padding-top, 不然不会垂直居中, 悲剧 // li 限制了60px, 所以下拉的top还和之前一样 padding: 15px 5px 0 0; position: relative; // -webkit-transition: all 0.3s; // -moz-transition: all 0.3s; // transition: all 0.3s; } #header span.icon { display: inline-block; font-size: 28px; color: #999999; } .dropdown-menu { border: 1px solid @hColor; } .dropdown-menu li > a { color: @aBlackColor; } .dropdown-menu li:hover, .dropdown-menu li:focus { background-color: @borderColor; } .dropdown-menu li > a:hover, .dropdown-menu li > a:focus { background-color: @borderColor; } .ios7-a { display: inline-block; padding: 0 10px 0 5px; height: 40px; vertical-align: middle; line-height: 38px; cursor: pointer; } /*********************/ #page { overflow: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } #pageInner { position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; } #mainContainer { position: absolute; top: @headerHeightNoBorder; left: 0; right: 0; bottom: 0; overflow: auto; zoom: 1; } #mainMask { position: absolute; left: 0; right: 0; bottom: 0; top: 0; background-color: #fff; text-align: center; padding-top: 100px; z-index: 1000; } .noteSplit { position: absolute; top: 0; width: 5px; height: 100%; overflow: hidden; z-index: 5; cursor: col-resize; } #notebookSplitter { left: @leftNotebookWidth; } #noteSplitter { left: @noteListWidth; } #leftNotebook { position: absolute; left: 0; top: 0; bottom: 0; width: @leftNotebookWidth; } #notebook, #notebookMin { position: absolute; left: 0; // bottom: 30px; 为了给bottom bottom: 0; top: 0; right: 0; /*border: 1px solid #ccc;*/ background-color: #41586e; /* overflow-y: auto; overflow-x: auto; */ z-index: 2; } #notebookMin { z-index: 1; overflow-y: visible; overflow-x: visible; background-color: #41586e; div.minContainer { border-bottom: 1px solid transparent; border-color: rgba(255, 255, 255, 0.3); padding: 5px; position: relative; i { font-size: 20px; color: #fff; } &:hover { i { color: @hColor; } } ul { background-color: #fff; opacity: 0.8; display: none; list-style: none; margin: 0; margin-left: 20px; padding: 5px 0px; border: 1px solid @hColor; position: absolute; z-index: 1000; top: 0; left: 10px; width: 150px; li { padding: 0 5px; cursor: pointer; span { cursor: pointer; } a { cursor: pointer; } } } } } #notebookBottom { position: absolute; bottom: 0px; height: 30px; right: 0; left: 0; line-height: 30px; text-align: right; padding-right: 5px; background-color: #eee; #leftSwitcher { border: 1px solid #ccc; padding: 3px 8px; cursor: pointer; } } #noteAndEditor { position: absolute; bottom: 0; top: 0; right: 0; left: @leftNotebookWidth; } #noteList { width: @noteListWidth; border-right: 1px solid #cfcfcf; border-left: 1px solid #cfcfcf; } #note { position: absolute; bottom: 0; top: 0; left: @noteListWidth; right: 0; padding-left: 5px; overflow-y: hidden; overflow-x: auto; background-color: @bgColor; } .folderNote { // padding-bottom: 5px; } @folderHeaderHeight: 35px; .folderHeader { min-height: @folderHeaderHeight; line-height: @folderHeaderHeight; cursor: pointer; border-bottom: 1px solid transparent; border-color: rgba(255,255,255,0.05); } .folderHeader span { display: inline-block; line-height: @folderHeaderHeight; color: #fff; // @hColor; font-size: 16px; } .folderHeader .fa-left, .each-user .fa { display: inline-block; line-height: @folderHeaderHeight; font-size: 16px; width: @folderHeaderHeight; border-right: 1px solid rgba(255,255,255,0.05); text-align: center; color: #fff; // @hColor; } .each-user div { cursor: pointer; border-bottom: 1px solid transparent; border-color: rgba(255,255,255,0.05); span { display: inline-block; line-height: @folderHeaderHeight; color: #fff; padding-left: 3px; font-size: 14px; } .fa { width: 20px; border-right: none; } } .each-user ul { list-style: none; margin: 0; padding:0; a { padding-left: 20px; font-size: 12px; } } #myNotebooks.opened .fa-left { /* background-color: #65bd77; color: #e2f3e5; */ } #myNotebooks .folderBody { /* max-height: 600px; overflow: auto; */ } #addNotebookPlus { padding-right: 10px; .fa { font-size: 16px; } color: #ADBECE; } .closed .folder-icon { /* 折叠状态 */ width: 9px; height: 11px; background-position: -108px -149px; } .closed .folderBody { display: none; } .folderBody { list-style: none; margin: 0; padding: 0; background-color: #37485e; } .folderBody li { line-height: 30px; } .folderBody a { padding-left: 20px; display: block; color: #ADBECE; cursor: pointer; border-bottom: 1px solid transparent; border-color: rgba(255,255,255,0.05); line-height: 35px; } .folderBody a:hover, .folderBody .contextmenu-hover { // background-color: @borderColor !important; color: #fff; background-color: rgba(0,0,0,0.05) !important; } .folderBody a.active, .folderBody a.active:hover { background-color: #25313e !important; // @bgColor; color: #fff; // @hColor; } // 重命名, 添加notebook #notebookList input { border: 1px solid @borderColor; width: 90%; box-shadow: none; &:focus { outline: none !important; border-color: @hColor; } } #myTag .folderBody { /* max-height: 200px; overflow: auto; */ li { position: relative } } #myTag .folderBody li .badge { width: 40px; position: absolute; right:3px; top: 7px; font-weight: normal; background-color: @bgColor; color: @aBlackColor; border: 1px solid @borderColor; } /* notelist */ #search { border: #bababa 1px solid; background-color: #fff; white-space: nowrap; position: absolute; height: 30px; left:3px; right:60px; margin-top: 3px; } #search label { display: none; } #searchButton { border: 0 none; width: 16px; height: 16px; overflow: hidden; cursor: pointer; position: absolute; right:3px; top: 5px; } #searchInput { border: 0 none; overflow: hidden; position: absolute; right:20px; left: 0px; padding-left: 10px; height: 28px; } #searchInput:focus { border: none; outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px } #notesAndSort { background-color: #eee; // #65bd77; // @bgColor; border-bottom: 1px solid @borderColor; a.dropdown-toggle { // color: #fff; } } #sortType { /* position: absolute; right:0;*/ float: right; } /* item list */ #noteItemList { position: absolute; left:0; right:0; bottom: 0; top: 0; width: 100%; overflow-y: hidden; background-color: #f7f7f7; padding: 0 5px; } #noteItemList .item { position: relative; height: 110px; overflow: hidden; cursor: pointer; padding: 5px; 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: @noteActiveBg !important; // #eee;/*@bgColor*/; color: #fff; .item-desc .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; height: 100px; background-color: #fff; margin-right: 5px; line-height: 100px; text-align: center; } .item-thumb img { max-width: 100px; } #noteItemList .item-desc { position: absolute; left: 0; right: 100px; margin-left: 4px; .fa { // folder, calender 颜色暗些 color: #666; } } // blog #noteItemList .item-blog { position: absolute; right: 1px; font-size: 10px; z-index: 2; top: 1px; padding: 3px; cursor: pointer; .fa { color: #fff !important; } width: 20px; text-align: center; opacity: 0.5; &:hover { opacity: 0.8; } background-color: #464C5E; } .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; } /* note */ #noteTop { // background-color: #f0f0f0; } /* editor */ #editorTool { margin: 0; padding: 0; list-style: none; // width: 200px; } #editorTool li { display: inline-block; } #noteTitleDiv { height: 30px; border-bottom: 1px solid #ddd; } #noteTitle { height: 100%; padding: 0px 3px; width: 100%; border: none; background-color: @bgColor; } #noteTitle:focus { // outline:thin dotted #333;outline:1px auto -webkit-focus-ring-color;outline-offset:-2px outline: none !important; // border: 1px solid @hColor; } #editorMask { position: absolute; top: 0px; bottom: 0px; right: 0; left: 0; background-color: #fff; 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; } } } #editor, #mdEditor{ position: absolute; z-index: 2; top: 71px; bottom: 0px; right: 0; left: 5px; padding: 0; // 0px 0px 0px 0px; display: none; } #mdEditor { z-index: 1; background-color: #fff; bottom: 10px; #md-section-helper, #wmd-input { font-size: 14px; line-height: 22px; } } #editorContent { position: absolute; top:30px; bottom: 10px; right: 0; left: 0; overflow: auto; // 不设置editor隐藏时没有scroll } #editorContent_ifr { // padding-top: 10px; } /* 包裹iframe */ #editor .mce-ifr { border: none; // padding: 10px; overflow: hidden !important; /*不知道哪里设置了auto*/ /*border-radius: 5px;*/ // border: 1px solid @borderColor; // border-top-left-radius: 5px; // border-bottom-left-radius: 5px; } /* 最顶层 */ #editor .mce-tinymce { border: none; } #editor iframe { } /*编辑器按钮*/ #mceToolbar, #wmd-button-bar { position: relative; height: 30px; overflow: hidden; border-bottom: 1px solid #ccc; background-color: #f0f0f0; } /* 编辑器工具 需要important, 因为mce还要有js加载css, 肯定在此之后 */ /*加高, 之前显得拥挤*/ .mce-btn-small button { padding: 5px 5px !important; line-height: 20px !important; } .mce-btn { // background-color: @bgColor !important; } .mce-menubtn.mce-btn-small span { line-height: 20px !important; } .mce-btn span { font-family: @fontFamily !important; } .mce-primary button, .mce-primary button i { text-shadow: none; } .mce-primary { background-color: #47a447 !important; border-color: #398439 !important; } // 下拉 .mce-menu-item:hover, .mce-menu-item.mce-selected, .mce-menu-item:focus { background-color: @borderColor; span { color: #000 !important; } } // 下拉选中 .mce-menu-item-normal.mce-active { background-color: @borderColor; } // tool的分隔 .tool-split { display: inline-block; line-height: 25px; color: #ddd; } /*标签与其它工具*/ #tool { border-bottom: 1px solid #ddd; } /* tag */ #tag { height: 40px; line-height: 38px } // 前面的38影响了dropdown #tag .dropdown { line-height: 30px; } #addTagInput { line-height: 25px; display: none; padding:0; border: none; background-color: @bgColor; } #addTagInput:focus { outline: none; } .label-default { background-color: #464C5E; } .label-red { background-color: #d9534f; } .label-yellow { background-color: #f0ad4e; } .label-blue { background-color: #428bca; } .label-green { background-color: #5cb85c; } .label { border-radius: 0; font-weight: normal; } .label i { width: 10px; cursor: pointer; font-style: normal; /*border-left: 1px solid #ccc;*/ display: inline-block; padding-left: 3px; opacity: 0; } .label i:hover { opacity: 1; // font-weight: bold; } /* leanote nav */ #leanoteNavTrigger { } #leanoteNav { position: absolute; right: 5px; border: 1px solid #ccc; border-radius: 3px; background-color: #fff; opacity: 0.5; // display: none; z-index: 11; margin-right: 2px; h1 { margin:0; font-size: 18px; padding: 3px; cursor: pointer; } i { padding: 3px; } span { display: none; } #leanoteNavContent { display: none; overflow: auto; } } #leanoteNav.unfolder { min-width: 200px; max-width: 300px; // bottom: 1px; opacity: 0.8; h1 { border-bottom: 1px dashed @borderColor; } span { display: inline; } #leanoteNavContent { display: block; min-height: 30px; } } #leanoteNav ul { margin:0; padding-left: 23px; li { list-style-type: disc; a { &:hover { color: @hColor; } } } } #leanoteNav ul .nav-h1 { } #leanoteNav ul .nav-h2 { margin-left: 20px; } #leanoteNav ul .nav-h3 { margin-left: 30px; } #leanoteNav ul .nav-h4 { margin-left: 40px; } #leanoteNav ul .nav-h5 { margin-left: 50px; } .scrollTo-a { cursor: pointer !important; } //--------------- // note for read #noteRead { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: none; z-index: 100; padding-left: 5px; background-color: #fff; } #noteReadContainer { position: relative; width: 100%; height: 100%; } @noteReadTopHeight: 60px; #noteReadTop { position: absolute; height: @noteReadTopHeight; left:0; right: 0; border-bottom: 1px solid @borderColor; } #noteReadTitle { margin: 3px 0; } #noteReadContent { position: absolute; top: @noteReadTopHeight; bottom: 0; right: 0; left: 0; overflow: auto; padding: 3px; } @sbc: @bgColor; /*scroll*/ /* ::-webkit-scrollbar { width: 5px; height: 8px; background: none; } ::-webkit-scrollbar-thumb { background-color: #41586e; opacity: 0.1; } ::-webkit-scrollbar-thumb:hover { background-color:#dadada } ::-webkit-scrollbar-thumb:active { background-color:#606060 } ::-webkit-scrollbar-thumb:disabled { background-color:#f9f9f9 } ::-webkit-scrollbar-corner { background-color:#f0f0f0 } ::-webkit-scrollbar-button { height: 0; background-color:#f0f0f0; background-repeat:no-repeat } ::-webkit-scrollbar-button:vertical { height:0px } ::-webkit-scrollbar-button:horizontal { width:33px } ::-webkit-scrollbar-button:horizontal:increment { background-position:0 -444px } ::-webkit-scrollbar-button:horizontal:decrement { background-position:12px -425px } ::-webkit-scrollbar-button:vertical:increment { background-position:-1px -391px } ::-webkit-scrollbar-button:vertical:decrement { background-position:-1px -358px } ::-webkit-scrollbar-button:hover { background-color:#dadada } ::-webkit-scrollbar-button:horizontal:increment:hover { background-position:0 -548px } ::-webkit-scrollbar-button:horizontal:decrement:hover { background-position:12px -529px } ::-webkit-scrollbar-button:vertical:increment:hover { background-position:-1px -495px } ::-webkit-scrollbar-button:vertical:decrement:hover { background-position:-1px -462px } ::-webkit-scrollbar-button:active { background-color:#606060 } ::-webkit-scrollbar-button:horizontal:increment:active { background-position:0 -652px } ::-webkit-scrollbar-button:horizontal:decrement:active { background-position:12px -633px } ::-webkit-scrollbar-button:vertical:increment:active { background-position:-1px -599px } ::-webkit-scrollbar-button:vertical:decrement:active { background-position:-1px -566px } ::-webkit-scrollbar-button:disabled { background-color:#f9f9f9 } ::-webkit-scrollbar-button:horizontal:increment:disabled { background-position:0 -756px } ::-webkit-scrollbar-button:horizontal:decrement:disabled { background-position:12px -737px } ::-webkit-scrollbar-button:vertical:increment:disabled { background-position:-1px -703px } ::-webkit-scrollbar-button:vertical:decrement:disabled { background-position:-1px -670px } */ /*from notebook*/ /*::-webkit-scrollbar{width:7px;height:7px;}::-webkit-scrollbar-thumb{background-color:rgba(50,50,50,0.3);}::-webkit-scrollbar-thumb:hover{background-color:rgba(50,50,50,0.6);}::-webkit-scrollbar-track{background-color:rgba(50,50,50,0.1);}::-webkit-scrollbar-track:hover{background-color:rgba(50,50,50,0.2);} */ #editorContent_ifr { // border: 1px solid red; } .fa-calendar { color: #666; } .dropdown-menu .fa { width: 15px; } .dropdown-menu span, .dropdown-menu a, .dropdown-menu li { cursor: default; } // 顶部导航, 博客 #topNav a { display: inline-block; line-height: 60px; } .tab-pane { padding: 5px 0 0 0; } .alert { margin-bottom: 10px; } .btn { border-radius: 0 !important; } .mce-container-body iframe { //overflow-x: hidden; // firefox 不能要 //overflow-y: hidden; } // 新建笔记item #notebookNavForNewNote li, #notebookNavForNewSharedNote > li { padding-left: 0; border-bottom: 1px solid @borderColor; } #notebookNavForNewNote > li:hover, #notebookNavForNewNote > li:focus, #notebookNavForNewSharedNote > li:hover, #notebookNavForNewSharedNote > li:focus { background: none; } .new-note-left { padding: 0 5px; width: 95px; overflow: hidden; white-space:nowrap; border-right: 1px dashed @borderColor; &:hover { background-color:@borderColor; } } .new-note-right { &:hover { background-color:@borderColor; } } // 历史记录 #historyList { table { width: 100%; } .btns{ border-top: 1px dashed #eee; padding: 5px 0; } } #leanoteMsg { line-height: 40px; margin-top: 10px; margin-left: 10px; } #newNoteWrap { line-height: 40px; margin-top: 10px; } #loading { display: inline-block; width: 20px; height: 20px; content: url(../../images/loading-a-20.gif); vertical-align: middle; visibility: hidden; } #toggleEditorMode { margin: 0 10px !important; } // leaui image drop drag #upload { position: absolute; z-index: 0; bottom: 0; right: 0; left: 0px; padding: 0; background-color: #fff; text-align: center; display: none; } #upload #drop { width: 100%; height: 100%; padding-top: 100px; } #drop.in { border: 1px solid #000000; } #drop.hover { border: 2px solid #000000; } #uploadMsg { position: absolute; top: 3px; right: 3px; bottom: 10px; overflow: scroll; list-style: none; }