@import "basic.less";

::selection {
    background: @selectionBg;
    color: @selectionColor;
}

::-moz-selection {
    background: @selectionBg;
    color: @selectionColor;
}

::-webkit-selection {
    background: @selectionBg;
    color: @selectionColor;
}

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;
    border-bottom: 1px solid @borderColor;
    /* for app */
    webkit-user-select: none;
    /* 还不知 */
    -webkit-app-region: drag;
    /* -webkit-app-region: no-drag; */
}

#header {
    color: @aBlackColor;
}

#logo,
#logo span {
    line-height: 50px; // @headerHeight;
}

#logo {
    width: 140px;
    height: @headerHeight;
    //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: #fff;
    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;
        cursor: pointer;
        font-size: 18px;
        &:hover {
            color: @hColor;
        }
    }
}

// 中间的背景色
@noteListBg: rgba(250, 250, 250, 1);
#noteList,
#notesAndSort,
#searchNote,
#noteItemListWrap {
    background: @noteListBg;
}

#searchNote {
    // padding-left: 0;
    // padding-right: 0;
    padding: 2px 10px;
    line-height: 30px;
    width: 100%;
    margin: 0;
    /* margin-top: 2px; */
    input {
        background-size: 18px 13px;
        border-color: @borderColor;
        padding-left: 10px;
        height: 30px;
        // width: 250px;
        line-height: 20px;
        box-shadow: none;
        display: block;
        width: 93%;
        margin: 0 auto;
        outline: none;
        &:focus,
        &:active {
            outline: none !important;
            // border-color: @hColor;
            box-shadow: none;
        }
    }
}

#noteItemListWrap {
    position: absolute;
    left: 0;
    right: 0;
    top: 75px;
    bottom: 3px;
}

#noteItemList {
    .item:first-child {
        margin-top: 0;
    }
}

#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;
}
/*********************/

#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: #f5f6f7;
    overflow-y: auto;
    overflow-x: auto;
    z-index: 2;
}

#notebookMin {
    z-index: 1;
    overflow-y: visible;
    overflow-x: visible;
    background-color: #eee;
    div.minContainer {
        border-bottom: 1px solid #ccc;
        padding: 5px;
        position: relative;
        cursor: pointer;
        i {
            font-size: 20px;
            color: #000;
        }
        &: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;
                }
            }
        }
    }
}

#noteAndEditor {
    position: absolute;
    bottom: 0;
    top: 0;
    right: 0;
    left: @leftNotebookWidth;
    border-left: 1px solid @borderColor;
}

#noteList {
    width: @noteListWidth;
    border-right: 1px solid @borderColor;
    // border-left: 1px solid @borderColor;
}

#note {
    position: absolute;
    bottom: 0;
    left: @noteListWidth;
    right: 0;
    padding-left: 0;
    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(0, 0, 0, 0.05);
    height: 36px;
}

.folderHeader span {
    display: inline-block;
    line-height: @folderHeaderHeight;
    color: #000; // @hColor;
    font-size: 16px;
}

.folderHeader .fa-left,
.friend-header i.fa {
    display: inline-block;
    line-height: @folderHeaderHeight;
    font-size: 16px;
    width: @folderHeaderHeight;
    border-right: 1px solid rgba(0, 0, 0, 0.05);
    text-align: center;
    color: #000; // @hColor;
}

.each-user div {
    cursor: pointer;
    border-bottom: 1px solid transparent;
    border-color: rgba(0, 0, 0, 0.05);
    span {
        display: inline-block;
        line-height: @folderHeaderHeight;
        color: #000;
        padding-left: 3px;
        font-size: 14px;
    }
    .fa {
        width: 20px;
        border-right: none;
    }
}

#addNotebookPlus {
    padding-right: 10px;
    .fa {
        font-size: 16px;
    }
    color: #666;
}

.closed .folder-icon {
    /* 折叠状态 */
    width: 9px;
    height: 11px;
    background-position: -108px -149px;
}

.closed .folderBody {
    display: none;
}

.folderBody {
    list-style: none;
    margin: 0;
    padding: 0;
}

.folderBody li {
    line-height: 30px;
}

.folderBody a.active {
    background-color: @bgColor;
    color: @hColor;
}

.folderBody a:hover,
.folderBody .contextmenu-hover {
    background-color: @borderColor !important;
}

// 重命名, 添加notebook
#notebookList input,
#notebookListForSearch input {
    width: 90%;
    border: none;
    box-shadow: none;
    padding-left: 3px;
    background: none;
    &:focus {
        outline: none !important;
        border: none;
    }
}

#myTag .folderBody {
    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 {
    border-bottom: 1px solid @borderColor;
}
/* 包裹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;
    //padding-left: 5px;
    //margin-right: 3px;
}
/* 最顶层 */

#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;
}
/*标签与其它工具*/
/* tag */

#tagInput {
    line-height: 25px;
    display: none;
    padding: 0;
    border: none;
    background: none;
    &: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: 3px;
    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;
}

//---------------
// note for read
#noteRead {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: none;
    z-index: 100;
    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;
#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;
}

.mce-container-body iframe {
    //overflow-x: hidden;
    //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;
    }
}

#loadingDialog {
    z-index: 999999;
}

#loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    content: url(../../images/loading-a-20-black.gif);
    vertical-align: middle;
    visibility: hidden;
}

#toggleEditorMode {
    margin: 0 10px !important;
}

#notebookList {
    border-top: 1px dashed #eee;
}

#notebookTree {
    border: 1px solid #eee;
    border-radius: 5px;
    &.ztree li a {
        color: #000;
    }
}

// @import "mobile.less";
//----------------------
// atom
body {
    border: none;
    border-shadow: none;
    border-radius: none;
    left: 0;
    right: 0;
    bottom: 0;
    // font-family: '微软雅黑';
}

#newMyNote * {
    font-family: 'Arial';
}

html,
body,
#page,
#pageInner,
#noteList,
#notebook,
#leftNotebook {
    border-radius: 0;
}

// localUser
.local #syncRefresh,
.local #syncProgress {
    display: none;
}

//===========
// history
.history-modal .modal-dialog {
    width: auto !important;
    position: absolute;
    /* width: 100%; */
    /* height: 100%; */
    left: 5px;
    right: 5px;
    top: 20px;
    bottom: 20px;
    .modal-content {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: 0;
        padding: 0;
        overflow: scroll;
        .modal-body {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 0;
            .history-list-wrap {
                position: absolute;
                top: 0;
                bottom: 0;
                overflow-y: auto;
                width: 200px;
                border-right: 1px solid #ccc;
                box-shadow: 1px 1px 10px #ddd;
                .history-list-header {
                    line-height: 50px;
                    font-size: 16px;
                    font-weight: bold;
                    padding-left: 15px;
                    border-bottom: 1px solid #eee;
                    background-color: #ccc;
                }
                .history-list {
                    position: absolute;
                    top: 51px;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    overflow-y: auto;
                    margin-bottom: 0;
                }
                .list-group-item {
                    border-top: none;
                    &.active,
                    &:hover {
                        color: #000;
                        background-color: #eee;
                        border-color: #eee;
                    }
                }
            }
            .history-content-wrap {
                position: absolute;
                top: 0;
                bottom: 0;
                right: 0;
                left: 200px;
                .close {
                    padding: 10px 15px;
                }
                .back {
                    margin-left: 10px;
                    margin-top: 5px;
                }
                .history-content-header {
                    // background-color: #eee;
                    height: 51px;
                    border-bottom: 1px solid #eee;
                    box-shadow: 5px 0px 5px #ccc;
                }
                .history-content {
                    position: absolute;
                    top: 51px;
                    bottom: 0;
                    right: 0;
                    left: 0;
                    -webkit-user-select: text;
                    padding-top: 5px;
                    padding-right: 5px;
                    padding-left: 10px;
                    overflow-y: auto;
                }
            }
        }
    }
}

.mce-item-table,
.mce-item-table td,
.mce-item-table th,
.mce-item-table caption {
    border: 1px solid #ddd;
    border-collapse: collapse;
}

.mce-item-table td {
    padding: 3px;
}

.mce-item-table tr {
    background-color: none;
    border-top: 1px solid #ccc;
}

.mce-item-table tr:nth-child(2n) {
    background-color: #f7f7f9;
}

.init-loading {
    display: none;
    img {
        width: 20px;
    }
}

.init .init-loading {
    display: block;
}

#viewModeDropdown {
  width: 30px;
  height:35px;
  line-height: 34px;
  text-align: center;
  position: relative;
  z-index: 1000;
  cursor: pointer;
}

@import 'includes/markdown.less';
