
@import '../../node_modules/lesshat/build/lesshat.less';

@color-1: #2C3E50;
@color-2: #E74C3C;
@color-3: #ECF0F1;
@color-4: #3498DB;
@color-5: #2980B9;
@color-node-highlight : #ef79b5;

@font-family-base: "Helvetica Neue",Helvetica,"Hiragino Sans GB","STHeitiSC-Light","Microsoft YaHei","微软雅黑",Arial,sans-serif;

body, .app {
    font-family: @font-family-base;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#toc-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fafafa;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

#toc {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 100%;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    color: #666;
}

#xmind-container {
    position: absolute;
    top: 0;
    left: 300px;
    right: 0;
    bottom: 0;
    border-left: 1px solid rgba(0, 0, 0, .07);
    background-color: white;
    overflow: hidden;
    min-width: 300px;
}

#canvas {
    width: 100%;
    height: 100%;
}


.filename, .current-sheet {
    max-width: 120px;
    border-right: 1px solid #eee;
}
.sheets {
    border-bottom: 1px solid #eee;
}

/* This sets the color for "TK" nodes to a light blue green. */
text {
    font-weight: 300;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
    font-size: 14px;
}

.node {
    rect {
        stroke: #999;
        fill: #fff;
        stroke-width: 1.5px;
    }
    &.primary {
        rect {
            stroke: @color-4;
            stroke-width: 6px;
        }
    }
    &.normal {
        rect {
            stroke: #ddd;
            stroke-width: 1px;
        }
    }
}

.topic {
    .border-radius(5px);
    padding: 5px;

    &.primary {
        font-size: 2em;
        font-weight: bold;
        background-color: @color-1;
        color: @color-3;
        padding: 10px;
        .labels {
            color: @color-1;
        }
    }
    &.secondary {
        font-size: 1.2em;
        background-color: @color-3;
    }

    .body {
        white-space: nowrap;
        span {
            margin: 2px;
        }
    }
    .hyperlink, .notes {
        color: @color-4;
        cursor: pointer;
        /*border: 1px solid transparent;*/
        &:hover {
            color: @color-5;
            /*border: 1px solid @color-4;*/
        }
    }
    .labels {
        font-size: 0.8em;
        background-color: lightyellow;
        text-align: center;
    }
}

.edgePath path {
    stroke: #aaa;
    stroke-width: 1.5px;
}
marker path {
    fill: white;
}

.node.highlight {
    rect {
        stroke: @color-node-highlight;
        stroke-width: 5;
    }
}
