src/styles/brackets_codemirror_override.less - master - githubmirror/brackets

src/styles/brackets_codemirror_override.less
290 строк9 KB
Martin Zagora
Merge pull request #12635 from petetnt/petetnt/no-code-padding
16 авг 2016, 08:48
16 авг 2016, 08:481cd8d9c
// Copyright (c) 2012 - present Adobe Systems Incorporated. All rights reserved.
//  
// Permission is hereby granted, free of charge, to any person obtaining a
// copy of this software and associated documentation files (the "Software"), 
// to deal in the Software without restriction, including without limitation 
// the rights to use, copy, modify, merge, publish, distribute, sublicense, 
// and/or sell copies of the Software, and to permit persons to whom the 
// Software is furnished to do so, subject to the following conditions:
//  
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//  
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 
// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER 
// DEALINGS IN THE SOFTWARE.

/* Brackets / CodeMirror Code Formatting */

@code-padding: 15px;

.CodeMirror pre {
    padding: 0 @code-padding 0 0;

    > * {
        text-indent: 0;
    }
}

.show-line-padding .CodeMirror pre {
    padding-left: 0;
}

.CodeMirror-scroll {
    background-color: @background;
}

.CodeMirror {
    .code-font();
}

.platform-mac .CodeMirror {
    .code-font-mac();
}

.platform-win .CodeMirror {
    .code-font-win();
}

.CodeMirror-activeline-background {
    background: transparent;
}

.CodeMirror-focused .CodeMirror-activeline-background {
    background: @activeline-bg;
}

.show-line-padding .CodeMirror-focused .CodeMirror-activeline-background {
    box-shadow: inset @code-padding 0 0 0 @activeline-number-bg;
}

.CodeMirror-focused .CodeMirror-activeline {
    & > div, .CodeMirror-gutter-elt {
        height: 100%;
    }
    .CodeMirror-gutter-elt {
        background: @activeline-number-bg;
        color: @activeline-number;
    }
    .inline-widget .CodeMirror-gutter-elt {
        color: @accent-comment;    
    }
}

.CodeMirror-focused .cm-matchhighlight {
    border-bottom: 2px solid #78B2F2;
}

span.cm-keyword {color: @accent-keyword;}
span.cm-atom {color: @accent-atom;}
span.cm-number {color: @accent-number;}
span.cm-def {color: @accent-def;}
span.cm-variable {color: @accent-variable;}
span.cm-variable-2 {color: @accent-variable-2;}
span.cm-variable-3 {color: @accent-variable-3;}
span.cm-operator {color: @accent-operator;}
span.cm-comment {color: @accent-comment;}
span.cm-string {color: @accent-string;}
span.cm-string-2 {color: @accent-string-2;}
span.cm-meta {color: @accent-meta;}
span.cm-qualifier {color: @accent-qualifier;}
span.cm-builtin {color: @accent-builtin;}
span.cm-bracket {color: @accent-bracket;}
span.cm-tag {color: @accent-tag;}
span.cm-attribute {color: @accent-attribute;}
span.cm-header {color: @accent-header;}
span.cm-quote {color: @accent-quote;}
span.cm-hr {color: @accent-hr;}
span.cm-link {color: @accent-link; text-decoration: none;}
span.cm-rangeinfo {color: @accent-rangeinfo;}
span.cm-minus {color: @accent-minus;}
span.cm-plus {color: @accent-plus;}
span.cm-property {color: @accent-property;} //cm-property has go after cm-string for a better JSON look.
span.cm-error {color: @accent-error;}

span.CodeMirror-matchingbracket {color: @accent-bracket !important; background-color: @matching-bracket;}
span.CodeMirror-nonmatchingbracket {color: @accent-bracket;}

div.CodeMirror-cursors {
    .CodeMirror-cursor {
        .code-cursor();
    }

    /* Ensure the cursor shows up in front of code spans with a background color
     * (e.g. matchingbracket).
     */
    z-index: 3;
}

.CodeMirror-lines {
    padding: @code-padding 0;

    /* This is necessary for issue #2780. The logic for closing dropdowns depends on "click" events. Now
     * that each line has a separate div element, there is a good chance that mouseDown and mouseUp events
     * occur on different elements, which means a click event will not be sent. By disabling pointer events here,
     * we are guaranteed that the mouse event will be captured by our parent div, and click events will 
     * be dispatched.
     */
    pointer-events: none;
}

.CodeMirror-linewidget {
    /* Re-enable pointer events for line widget. Pointer events are disabled for "CodeMirror-lines", which is the
     * parent of line widgets, so they need to be explicitly re-enabled here in order for selection to work. */
    pointer-events: auto;
}

.CodeMirror-gutters {
    background-color: @background;
    border-right: none;
}

.platform-mac {
    .CodeMirror-scrollbar-filler {
        background-image: url(images/scrollbar-mac-corner.png);
    }
    .CodeMirror-gutter-filler {
        background-image: url(images/scrollbar-mac-bg.png);
    }
}
.platform-win {
    .CodeMirror-scrollbar-filler,
    .CodeMirror-gutter-filler {
        background-color: @win-scrollbar-track;
        height: 12px !important;
    }
    .CodeMirror-scrollbar-filler {
        width: 12px !important;
    }
}
.platform-linux {
    .CodeMirror-scrollbar-filler,
    .CodeMirror-gutter-filler {
        background-color: @background;
        height: 12px !important;
    }
    .CodeMirror-scrollbar-filler {
        width: 12px !important;
    }
}

.CodeMirror-linenumber {
    color: @accent-comment;
    min-width: 2.5em;
    /*font-size: 0.9em;*/  /* restore after SourceCodePro font fix? */
    padding: 0 @code-padding 0 10px;  // note: overridden if code-folding gutter is shown
}
.CodeMirror .CodeMirror-selected {
    background: @selection-color-unfocused;
}
.CodeMirror-focused .CodeMirror-selected {
    background: @selection-color-focused;
}

/*
    CodeMirror's use of descendant selectors for certain styling causes problems when editors are
    nested because, for items in the inner editor, the left-hand clause in the selector will now
    match either the actual containing CodeMirror instance *OR* the outer "host" CodeMirror instance.
    
    TODO (issue #324): We'll still have problems if editors can be nested more than one level deep,
    or if any other descendant-selector-driven CM styles can differ between inner & outer editors
    (potential problem areas include line wrap and coloring theme: basically, anything in codemirror.css
    that uses a descandant selector where the CSS class name to the left of the space is something
    other than a vanilla .CodeMirror)
 */
.CodeMirror {
    .CodeMirror-overwrite .CodeMirror-cursor {
        border-left: none !important;
        border-bottom: 1px solid black;
        width: 1.2ex;
    }
    
    .CodeMirror {
        background: transparent;
    }
    
    .CodeMirror span.CodeMirror-matchingbracket {
        /* Ensure visibility against gray inline editor background */
        background-color: @matching-bracket;
        color: @accent-bracket !important;
    }

    .CodeMirror .CodeMirror-cursors {
        visibility: hidden;
    }
    .CodeMirror.CodeMirror-focused .CodeMirror-cursors {
        visibility: visible;
    }
    
    .CodeMirror .CodeMirror-selected {
        background: @selection-color-unfocused;
    }
    .CodeMirror.CodeMirror-focused .CodeMirror-selected {
        background: @selection-color-focused;
    }
    .CodeMirror .CodeMirror-gutters {
        background: transparent;
        border-right: none;
    }
    
    .CodeMirror-scroll {
        outline: none;
    }
    
    .CodeMirror-sizer {
        cursor: text;
    }
    
    .CodeMirror .CodeMirror-vscrollbar, .CodeMirror .CodeMirror-hscrollbar {
        cursor: default;
    }
    
    .CodeMirror .CodeMirror-activeline-background {
        background: transparent;
    }
    
    .show-line-padding & .CodeMirror .CodeMirror-activeline-background {
        box-shadow: none;
    }
    
    .CodeMirror .CodeMirror-activeline .CodeMirror-gutter-elt {
        background: transparent;
        color: @accent-comment;
    }
    
    .CodeMirror-focused .CodeMirror-activeline-background {
        background: @activeline-bg;
    }
    
    .show-line-padding & .CodeMirror-focused .CodeMirror-activeline-background {
        box-shadow: inset @code-padding 0 0 0 @background;
    }
    
    .CodeMirror-focused .CodeMirror-activeline {
        .CodeMirror-gutter-elt {
            background: @activeline-number-bg-inline;
            color: @activeline-number;
        }
    }

    .CodeMirror-matchingtag { background: @matching-bracket; }
}

/*
 * Temporarily override bold and italic syntax highlighting until
 * SourceCodePro supports them in a fixed pitch
 */
span.cm-em {
    font-style: normal;
}
span.cm-header, span.cm-strong {
    font-weight: normal;
}
span.cm-emstrong {
    font-style: normal;
    font-weight: normal;
}