akurath/addons/cb.files.editor/stylesheets/file.less

IDE Frontend for codepsaces.io

.mixin-cursor-color(@color) {
    @pseudo-selector: ~".marker-@{color}";
    @{pseudo-selector} {
        &.marker-selection {
            background: ~"#@{color}";
        }
    }
}

.addon-files-aceeditor {
    .file-participants {
        a {
            position: relative;
            overflow: hidden;
            padding: 6px 10px;
            border-left: 6px solid #eee;
        }
    }

    .editor-inner {
        .editor-ace {
            -webkit-font-smoothing: subpixel-antialiased;
            font-smoothing: subpixel-antialiased;

            position: absolute !important;
            top: 0px;
            bottom: 0px;
            left: 0px;
            right: 0px;
            border-radius: 0px;
            padding: 0px;

            .marker-debug {
                position: absolute;
                background: #5e9ef3;
                opacity: .5;
                width: 100% !important;
            }

            .marker-cursor {
                position: absolute;
                border-left: 2px solid red;
                opacity: 1;
            }

            .marker-selection {
                position: absolute;
                background: red;
                opacity: 0.2;
            }
            .mixin-cursor-color("1abc9c");
            .mixin-cursor-color("9b59b6");
            .mixin-cursor-color("e67e22");
            .mixin-cursor-color("16a085");
            .mixin-cursor-color("c0392b");
            .mixin-cursor-color("2980b9");
            .mixin-cursor-color("f39c12");
            .mixin-cursor-color("8e44ad");

            .marker-cursor {
                position: absolute;
                z-index: 5;
                border-left: 2px solid #0ff;
                margin-left: -1px;
                right: 5px;
                text-align: right;
                color: #ff0;
                border-bottom: 1px dotted rgba(0,255,255,0.30);
            }
            .marker-cursor-nametag {
                position: absolute;
                bottom: -1px;
                right: 0px;
                text-align: right;
                color: #fff;
                background: #0ff;
                padding: 0px;
                padding-left: 3px;
                padding-right: 3px;
                opacity: 1;
                font-family: Arial, sans-serif;
                font-weight: 600;
                pointer-events: auto;
                cursor: help;
            }
            .marker-cursor-nametag-flag {
                position: absolute;
                bottom: 0px;
                left: -6px;
                width: 0px;
                height: 0px;
                border: 3px solid rgba(0,255,255,0.00);
                border-right: 3px solid #0ff;
                border-bottom: 3px solid #0ff;
            }

            .ace_gutter-cell.ace_breakpoint {
                position: relative;

                &:before {
                    content: " ";
                    width: 10px;
                    height: 10px;
                    border-radius: 16px;
                    border: 2px solid #fff;
                    position: absolute;
                    left: 4px;
                    background: #5E9EF3;
                    top: 3px;
                }
            } 
        }
    }
}