@green: #65bd77; @media screen and (max-width:700px) { #toggleEditorMode, #lea, #myBlog, #demoRegister, .noteSplit, #logo, #tipsBtn, #contentHistory, #curNotebookForNewNote, #curNotebookForNewSharedNote, .for-split, #listNotebookDropdownMenu, #listShareNotebookDropdownMenu, .new-markdown-text, .new-note-text, .username, #notebookMin, .ui-loader, #md-section-helper, .writing-mobile-hide, .tips-ctn, #wmd-undo-button, #wmd-redo-button, #wmd-hr-button, #wmd-help-button { display: none !important; } *, .ztree li a.level0 span, .ztree li a.level1 span, { font-size: 16px; } .label i { opacity: 1; width: 12px; &:hover, &:focus { color: @green !important; } } #leftSwitcher:before { content: "\f039"; } a:focus, a:hover, a:active { color: @green !important; } #noteItemList .item { height: 120px; } // 为防止进入min模式 @leftNotebookWidth: 140px; #leftNotebook { width: @leftNotebookWidth !important; max-width: @leftNotebookWidth; } #notebook { display: block !important; } #leftNotebook .slimScrollDiv { display: block !important; } #switcher { padding-top: 0; padding-right: 0; i { padding: 20px 0; font-size: 20px; } } #newNoteMarkdownBtn { width: 10px; overflow: hidden; } #noteAndEditor { left: @leftNotebookWidth !important; // left: 0 !important; } #noteList { display: block; width: 100% !important; } #note { visibility: hidden; z-index: -1; // 把note放到后面, 这样手机端滚动才平滑 overflow-x: hidden; #editor { visibility: hidden; } .mce-tinymce { visibility: hidden !important; } left: 0 !important; padding-left: 0; } #note.editor-show { visibility: visible; z-index: initial; #editor { visibility: visible; } .mce-tinymce { visibility: visible !important; } } #leftSwitcher { display: block !important; } #leftSwitcher2 { display: none !important; } .full-editor { #leftNotebook { display: none; } #noteAndEditor { left: 0 !important; } #noteList { display: none; } } #searchWrap { margin-left: 3px; } #searchNote { border-top: none; border-bottom: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; padding-right: 10px; input { width: 55px; padding-left: 5px; padding-right: 2px; margin-top: 3px; -webkit-transform: translate3d(0, 0, 0); -webkit-transition: 0.3s ease; -moz-transition: 0.3s ease; transition: 0.3s ease; } input:focus { width: 100px; } } #tool { position: relative; } #tag { position: absolute; right: 124px; left:0; top:0; bottom:0; overflow: hidden; #tags { position: absolute; left: 50px; right: 0; top: 0; bottom: 0; overflow-y: hidden; overflow-x: scroll; position: absolute; line-height: 40px; line-height: inherit !important; } #tagDropdown { float: left; width: 50px; line-height: 40px; overflow: hidden; padding-left: 3px; } .add-tag-text { display: none; } #addTagInput { width: 30px; display: inline-block; } #tagColor { display: none !important; } } #left-column { width: 100% !important; } #mdEditor #wmd-input * { font-size: 14px; } .new-markdown-text-abbr, .new-note-text-abbr { display: inline; } .my-link { display: block; } #themeForm img { height: 70px !important; } // 去除slimscroll .slimScrollBar, .slimScrollRail { display: none !important; } #noteItemList, #notebook, #leftNotebook, .slimScrollDiv, #editorContent_ifr, .mce-edit-area,.mce-container-body,.mce-tinymce, #editor .mce-ifr, .wmd-input, #noteReadContent, #attachList, #tags, .wmd-input-section { -webkit-overflow-scrolling: touch !important; // for iphone overflow: auto !important; } #attachMenu { width: 320px; } #attachList { max-height: 200px; } #attachList li .attach-title { width: 170px; } #dropAttach .btn { padding: 5px 3px; margin-top: 3px; display: block; } #myTag .folderBody li { margin: 5px; a:hover { span { color: @green; } } } // 中部列表 #noteItemList .item-thumb { width: 80px; height: 80px; margin-top: 15px; } #noteItemList .item { height: 118px; } #noteItemList .item-setting, #noteItemList .item-blog { font-size: 16px; width: 30px; display: inline-block; } #noteMaskForLoading { opacity: .8 } // editor #editorContent .ace-tomorrow { padding: 0; } #note, #editor, #mdEditor { left: 0; } // readonly // 正常下, 右侧是隐藏的 #mdEditor { #right-column { display: none; } } // readonly下, 左侧是隐藏的 #mdEditor.read-only { #left-column { // display: none; visibility: hidden; } #right-column { left: 0 !important; display: block; -webkit-overflow-scrolling: touch !important; } .preview-container { left: 5px; } } } // ipad @media screen and (max-device-width: 768px) { } // ipad // @media screen and (max-device-width: 1024px) and (orientation: landscape) { @media screen and (max-width: 1024px) { #noteItemList, #notebook, #leftNotebook, .slimScrollDiv, #editorContent_ifr, .mce-edit-area,.mce-container-body,.mce-tinymce, #editor .mce-ifr, .wmd-input, #noteReadContent, #attachList, #tags { overflow: auto !important; -webkit-overflow-scrolling: touch !important; // for iphone } #tag { position: absolute; right: 310px; left: 0; top:0; bottom:0; overflow: hidden; padding-left: 5px; #tagDropdown { float: left; width: 50px; line-height: 40px; overflow: hidden; padding-left: 3px; } .add-tag-text { display: none; } #addTagInput { width: 30px; display: inline-block; } #tagColor { display: none !important; } } #tags { position: absolute; left: 50px; right: 0; top: 0; bottom: 0; overflow-y: hidden; overflow-x: scroll; position: absolute; line-height: 40px; line-height: inherit !important; } } @media screen and (max-width: 800px) { #noteItemList, #notebook, #leftNotebook, .slimScrollDiv, #editorContent_ifr, .mce-edit-area,.mce-container-body,.mce-tinymce, #editor .mce-ifr, .wmd-input, #noteReadContent, #attachList, #tags, .wmd-input-section { overflow: auto !important; -webkit-overflow-scrolling: touch !important; // for iphone } #lea, .lea-blog, #myBlog, #demoRegister, .noteSplit, #tipsBtn, #contentHistory, #curNotebookForNewNote, #curNotebookForNewSharedNote, .for-split, #listNotebookDropdownMenu, #listShareNotebookDropdownMenu, .username, .ui-loader, #md-section-helper, { display: none !important; } #tag { position: absolute; right: 124px; left:0; top:0; bottom:0; overflow: hidden; #tags { position: absolute; left: 50px; right: 0; top: 0; bottom: 0; overflow-y: hidden; overflow-x: scroll; position: absolute; line-height: 40px; line-height: inherit !important; } #tagDropdown { float: left; width: 50px; line-height: 40px; overflow: hidden; padding-left: 3px; } .add-tag-text { display: none; } #addTagInput { width: 30px; display: inline-block; } #tagColor { display: none !important; } } .my-link { display: block; } #attachMenu { width: 320px; } #attachList { max-height: 200px; } #attachList li .attach-title { width: 170px; } #dropAttach .btn { padding: 5px 3px; margin-top: 3px; display: block; } #myTag .folderBody li { margin: 5px; a:hover { span { color: @green; } } } #left-column { width: 100% !important; } #mdEditor #wmd-input { font-size: 14px; } .my-link { display: block; } #themeForm img { height: 70px !important; } // readonly // 正常下, 右侧是隐藏的 #mdEditor { #right-column { display: none; } } // 有一些toolbar不能显示 .wmd-button-bar-inner { // overflow: scroll; height: 30px; } // readonly下, 左侧是隐藏的 #mdEditor.read-only { #left-column { // display: none; visibility: hidden; } #right-column { left: 0 !important; display: block; -webkit-overflow-scrolling: touch !important; } .preview-container { left: 10px; } } #searchNote { margin-top: 2px; } #noteTitle { // padding: 0; } #tags { .label, .label i { font-size: 10px; } } .mobile-hide { display: none; } .mobile-show { display: block; } #editorContent, #mdEditor { bottom: 0 !important; } #mdEditor .layout-wrapper-l3, #editorContent { margin-top: 0; border: none; } // iframe插件 视频 .leanote-plugin { @pluginHeaderHeight: 40px; #header { height: @pluginHeaderHeight; } #mainContainer { top: @pluginHeaderHeight; } .profile-img { line-height: @pluginHeaderHeight - 3; } #switcher i { padding: 11px 0; } #searchNote { padding-top: 1px; } #newNoteWrap { line-height: 22px; } #leanoteMsg { margin-top: 0; } *, .ztree li a.level0 span, .ztree li a.level1 span, #noteItemList .item-setting, #noteItemList .item-blog { font-size: 14px; } h1, h2, h3, h4, h5 { } .leanoteNav h1 { font-size: 16px; } h1 { font-size: 24px; } h2 { font-size: 20px; } h3 { font-size: 18px; } h4 { font-size: 16px; } #noteItemList .item-setting, #noteItemList .item-blog { width: 23px; padding: 1px; } #noteItemList .item { height: 69px; } #noteItemList .item-thumb { width: 60px; height: 60px; margin-top: 0px; } #preview-contents { padding-left: 0; } #msg { font-size: 12px; } #noteInfo { width: 265px; } #noteInfo table th { min-width: 72px; } #noteInfo .post-url-wrap span { word-break: break-all; } } .extension-preview-buttons { border: none; } }