quadre-git/styles/code-mirror.less

Integration of Git into Quadre

// main: quadre-git.less

.CodeMirror {
    .CodeMirror-gutter-elt {
        // do not enable pointer events
        // pointer-events: all;
    }
    .quadre-git-gutter {
        width: @gutterWidth;
        margin-left: 1px;
    }
    .quadre-git-gutter-added,
    .quadre-git-gutter-modified,
    .quadre-git-gutter-removed {
        background-size: @gutterWidth @gutterWidth;
        background-repeat: no-repeat;
        font-size: 1em;
        font-weight: bold;
        color: @bc-menu-bg;

        .dark & {
            color: @dark-bc-menu-bg;
        }
    }
    .quadre-git-gutter-added {
        background-color: @green;
    }
    .quadre-git-gutter-added.quadre-git-gutter-hover:before {
        content: "+";
    }
    .quadre-git-gutter-modified {
        background-color: @orange;
    }
    .quadre-git-gutter-modified.quadre-git-gutter-hover:before {
        content: "*";
    }
    .quadre-git-gutter-removed {
        background-color: @red;
    }
    .quadre-git-gutter-removed.quadre-git-gutter-hover:before {
        content: "-";
    }
    .quadre-git-gutter-deleted-lines {
        color: @bc-text;
        background-color: lighten(@red, 25%);
        .selectable-text();

        .dark & {
            background-color: darken(@red, 25%);
            color: @dark-bc-text;
        }

        position: relative;
        .quadre-git-gutter-copy-button {
            position: absolute;
            left: 0;
            top: 0;
            padding: 1px;
            height: 1.2em;
            line-height: 0.5em;
        }
    }
    .CodeMirror-linenumber.quadre-git-gutter-hover {
        background-color: @bc-panel-bg-alt;
        color: @bc-text-thin;

        .dark & {
            background-color: @dark-bc-panel-bg-alt;
            color: @dark-bc-text-alt !important;
        }
    }
}