rhodecode/public/css/code-block.less

// Default styles

.diff-collapse {
    margin: @padding 0;
    text-align: right;
}

.diff-container {
    margin-bottom: @space;

    .diffblock {
        margin-bottom: @space;
    }

    &.hidden {
        display: none;
        overflow: hidden;
    }
}

.compare_view_files {

    .diff-container {

        .diffblock {
            margin-bottom: 0;
        }
    }
}

div.diffblock .sidebyside {
 background: #ffffff;
}

div.diffblock {
    overflow-x: auto;
    overflow-y: hidden;
    clear: both;
    padding: 0px;
    background: @grey6;
    border: @border-thickness solid @grey5;
    -webkit-border-radius: @border-radius @border-radius 0px 0px;
    border-radius: @border-radius @border-radius 0px 0px;


    .comments-number {
        float: right;
    }

    // BEGIN CODE-HEADER STYLES

    .code-header {
        background: @grey6;
        padding: 10px 0 10px 0;
        height: auto;
        width: 100%;

        .hash {
            float: left;
            padding: 2px 0 0 2px;
        }

        .date {
            float: left;
            text-transform: uppercase;
            padding: 4px 0px 0px 2px;
        }

        div {
            margin-left: 4px;
        }

        div.compare_header {
            min-height: 40px;
            margin: 0;
            padding: 0 @padding;

            .drop-menu {
                float:left;
                display: block;
                margin:0 0 @padding 0;
            }

            .compare-label {
                float: left;
                clear: both;
                display: inline-block;
                min-width: 5em;
                margin: 0;
                padding: @button-padding @button-padding @button-padding 0;
                font-family: @text-semibold;
            }

            .compare-buttons {
                float: left;
                margin: 0;
                padding: 0 0 @padding;

                .btn {
                    margin: 0 @padding 0 0;
                }
            }
        }

    }

    .parents {
        float: left;
        width: 100px;
        font-weight: 400;
        vertical-align: middle;
        padding: 0px 2px 0px 2px;
        background-color: @grey6;

        #parent_link {
           margin: 00px 2px;

           &.double {
               margin: 0px 2px;
            }

            &.disabled{
                margin-right: @padding;
            }
        }
    }

    .children {
        float: right;
        width: 100px;
        font-weight: 400;
        vertical-align: middle;
        text-align: right;
        padding: 0px 2px 0px 2px;
        background-color: @grey6;

        #child_link {
           margin: 0px 2px;

           &.double {
               margin: 0px 2px;
            }

            &.disabled{
                margin-right: @padding;
            }
        }
    }

    .changeset_header {
        height: 16px;

        & > div{
            margin-right: @padding;
       }
    }

    .changeset_file {
        text-align: left;
        float: left;
        padding: 0;

        a{
            display: inline-block;
            margin-right: 0.5em;
        }

       #selected_mode{
            margin-left: 0;
       }
    }

    .diff-menu-wrapper {
        float: left;
    }

    .diff-menu {
        position: absolute;
        background: none repeat scroll 0 0 #FFFFFF;
        border-color: #003367 @grey3 @grey3;
        border-right: 1px solid @grey3;
        border-style: solid solid solid;
        border-width: @border-thickness;
        box-shadow: 2px 8px 4px rgba(0, 0, 0, 0.2);
        margin-top: 5px;
        margin-left: 1px;
    }

    .diff-actions, .editor-actions {
        float: left;

        input{
            margin: 0 0.5em 0 0;
        }
    }

    // END CODE-HEADER STYLES

    // BEGIN CODE-BODY STYLES

    .code-body {
        background: white;
        padding: 0;
        background-color: #ffffff;
        position: relative;
        max-width: none;
        box-sizing: border-box;
        // TODO: johbo: Parent has overflow: auto, this forces the child here
        // to have the intended size and to scroll. Should be simplified.
        width: 100%;
        overflow-x: auto;
    }

    pre.raw {
        background: white;
        color: @grey1;
    }
    // END CODE-BODY STYLES

}


table.code-difftable {
    border-collapse: collapse;
    width: 99%;
    border-radius: 0px !important;

     td {
        padding: 0 !important;
        background: none !important;
        border: 0 !important;
    }

    .context {
        background: none repeat scroll 0 0 #DDE7EF;
    }

    .add {
        background: none repeat scroll 0 0 #DDFFDD;

        ins {
            background: none repeat scroll 0 0 #AAFFAA;
            text-decoration: none;
        }
    }

    .del {
        background: none repeat scroll 0 0 #FFDDDD;

        del {
            background: none repeat scroll 0 0 #FFAAAA;
            text-decoration: none;
        }
    }

    /** LINE NUMBERS **/
    .lineno {
        padding-left: 2px !important;
        padding-right: 2px;
        text-align: right;
        width: 32px;
        -moz-user-select: none;
        -webkit-user-select: none;
        border-right: @border-thickness solid @grey5 !important;
        border-left: 0px solid #CCC !important;
        border-top: 0px solid #CCC !important;
        border-bottom: none !important;

        a {
            &:extend(pre);
            text-align: right;
            padding-right: 2px;
            cursor: pointer;
            display: block;
            width: 32px;
        }
    }

    .context {
        cursor: auto;
        &:extend(pre);
    }

    .lineno-inline {
        background: none repeat scroll 0 0 #FFF !important;
        padding-left: 2px;
        padding-right: 2px;
        text-align: right;
        width: 30px;
        -moz-user-select: none;
        -webkit-user-select: none;
    }

    /** CODE **/
    .code {
        display: block;
        width: 100%;

        td {
            margin: 0;
            padding: 0;
        }

        pre {
            margin: 0;
            padding: 0;
            margin-left: .5em;
        }
    }
}


// Comments

div.comment:target {
    border-left: 6px solid @comment-highlight-color;
    padding-left: 3px;
    margin-left: -9px;
}

//TODO: anderson: can't get an absolute number out of anything, so had to put the
//current values that might change. But to make it clear I put as a calculation
@comment-max-width: 1065px;
@pr-extra-margin: 34px;
@pr-border-spacing: 4px;
@pr-comment-width: @comment-max-width - @pr-extra-margin - @pr-border-spacing;

// Pull Request
.cs_files .code-difftable {
    border: @border-thickness solid @grey5; //borders only on PRs

    .comment-inline-form,
    div.comment {
        width: @pr-comment-width;
    }
}

// Changeset
.code-difftable {
    .comment-inline-form,
    div.comment {
        width: @comment-max-width;
    }
}

//Style page
@style-extra-margin: @sidebar-width + (@sidebarpadding * 3) + @padding;
#style-page .code-difftable{
    .comment-inline-form,
    div.comment {
        width: @comment-max-width - @style-extra-margin;
    }
}

#context-bar > h2 {
    font-size: 20px;
}

#context-bar > h2> a {
    font-size: 20px;
}
// end of defaults

.file_diff_buttons {
    padding: 0 0 @padding;

    .drop-menu {
        float: left;
        margin: 0 @padding 0 0;
    }
    .btn {
        margin: 0 @padding 0 0;
    }
}

.code-body.textarea.editor {
    max-width: none;
    padding: 15px;
}

td.injected_diff{
    max-width: 1178px;
    overflow-x: auto;
    overflow-y: hidden;

    div.diff-container,
    div.diffblock{
        max-width: 100%;
    }

    div.code-body {
        max-width: 1124px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0;
    }
    div.diffblock {
        border: none;
    }

    &.inline-form {
        width: 99%
    }
 }


table.code-difftable {
    width: 100%;
}

/** PYGMENTS COLORING **/
div.codeblock {

    // TODO: johbo: Added interim to get rid of the margin around
    // Select2 widgets. This needs further cleanup.
    margin-top: @padding;

    overflow: auto;
    padding: 0px;
    border: @border-thickness solid @grey5;
    background: @grey6;
    .border-radius(@border-radius);

    #remove_gist {
        float: right;
    }

    .author {
        clear: both;
        vertical-align: middle;
        font-family: @text-bold;
    }

    .btn-mini {
        float: left;
        margin: 0 5px 0 0;
    }

    .code-header {
        padding: @padding;
        border-bottom: @border-thickness solid @grey5;

        .rc-user {
            min-width: 0;
            margin-right: .5em;
        }

        .stats {
            clear: both;
            margin: 0 0 @padding 0;
            padding: 0;
            .left {
                float: left;
                clear: left;
                max-width: 75%;
                margin: 0 0 @padding 0;

                &.item {
                    margin-right: @padding;
                    &.last { border-right: none; }
                }
            }
            .buttons { float: right; }
            .author {
                height: 25px; margin-left: 15px; font-weight: bold;
            }
        }

        .commit {
            margin: 5px 0 0 26px;
            font-weight: normal;
            white-space: pre-wrap;
        }
    }

    .message {
        position: relative;
        margin: @padding;

        .codeblock-label {
            margin: 0 0 1em 0;
        }
    }

    .code-body {
        padding: @padding;
        background-color: #ffffff;
        min-width: 100%;
        box-sizing: border-box;
        // TODO: johbo: Parent has overflow: auto, this forces the child here
        // to have the intended size and to scroll. Should be simplified.
        width: 100%;
        overflow-x: auto;
    }
}

.code-highlighttable,
div.codeblock {

    &.readme {
        background-color: white;
    }

    .markdown-block table {
        border-collapse: collapse;

        th,
        td {
            padding: .5em;
            border: @border-thickness solid @border-default-color;
        }
    }

    table {
        border: 0px;
        margin: 0;
        letter-spacing: normal;


        td {
            border: 0px;
            vertical-align: top;
        }
    }
}

div.codeblock .code-header .search-path { padding: 0 0 0 10px; }
div.search-code-body {
    background-color: #ffffff; padding: 5px 0 5px 10px;
    pre {
        .match { background-color: #faffa6;}
        .break { display: block; width: 100%; background-color: #DDE7EF; color: #747474; }
    }
    .code-highlighttable {
        border-collapse: collapse;

        tr:hover {
            background: #fafafa;
        }
        td.code {
          padding-left: 10px;
        }
        td.line {
            border-right: 1px solid #ccc !important;
            padding-right: 10px;
            text-align: right;
            font-family: "Lucida Console",Monaco,monospace;
            span {
                white-space: pre-wrap;
                color: #666666;
            }
        }
    }
}

div.annotatediv { margin-left: 2px; margin-right: 4px; }
.code-highlight {
    margin: 0; padding: 0; border-left: @border-thickness solid @grey5;
    pre, .linenodiv pre { padding: 0 5px; margin: 0; }
    pre div:target {background-color: @comment-highlight-color !important;}
}

.linenos a { text-decoration: none; }

.CodeMirror-selected { background: @rchighlightblue; }
.CodeMirror-focused .CodeMirror-selected { background: @rchighlightblue; }
.CodeMirror ::selection { background: @rchighlightblue; }
.CodeMirror ::-moz-selection { background: @rchighlightblue; }

.code { display: block; border:0px !important; }
.code-highlight, /* TODO: dan: merge codehilite into code-highlight */
.codehilite {
    .hll { background-color: #ffffcc }
    .c { color: #408080; font-style: italic } /* Comment */
    .err, .codehilite .err { border: @border-thickness solid #FF0000 } /* Error */
    .k { color: #008000; font-weight: bold } /* Keyword */
    .o { color: #666666 } /* Operator */
    .cm { color: #408080; font-style: italic } /* Comment.Multiline */
    .cp { color: #BC7A00 } /* Comment.Preproc */
    .c1 { color: #408080; font-style: italic } /* Comment.Single */
    .cs { color: #408080; font-style: italic } /* Comment.Special */
    .gd { color: #A00000 } /* Generic.Deleted */
    .ge { font-style: italic } /* Generic.Emph */
    .gr { color: #FF0000 } /* Generic.Error */
    .gh { color: #000080; font-weight: bold } /* Generic.Heading */
    .gi { color: #00A000 } /* Generic.Inserted */
    .go { color: #808080 } /* Generic.Output */
    .gp { color: #000080; font-weight: bold } /* Generic.Prompt */
    .gs { font-weight: bold } /* Generic.Strong */
    .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
    .gt { color: #0040D0 } /* Generic.Traceback */
    .kc { color: #008000; font-weight: bold } /* Keyword.Constant */
    .kd { color: #008000; font-weight: bold } /* Keyword.Declaration */
    .kn { color: #008000; font-weight: bold } /* Keyword.Namespace */
    .kp { color: #008000 } /* Keyword.Pseudo */
    .kr { color: #008000; font-weight: bold } /* Keyword.Reserved */
    .kt { color: #B00040 } /* Keyword.Type */
    .m { color: #666666 } /* Literal.Number */
    .s { color: #BA2121 } /* Literal.String */
    .na { color: #7D9029 } /* Name.Attribute */
    .nb { color: #008000 } /* Name.Builtin */
    .nc { color: #0000FF; font-weight: bold } /* Name.Class */
    .no { color: #880000 } /* Name.Constant */
    .nd { color: #AA22FF } /* Name.Decorator */
    .ni { color: #999999; font-weight: bold } /* Name.Entity */
    .ne { color: #D2413A; font-weight: bold } /* Name.Exception */
    .nf { color: #0000FF } /* Name.Function */
    .nl { color: #A0A000 } /* Name.Label */
    .nn { color: #0000FF; font-weight: bold } /* Name.Namespace */
    .nt { color: #008000; font-weight: bold } /* Name.Tag */
    .nv { color: #19177C } /* Name.Variable */
    .ow { color: #AA22FF; font-weight: bold } /* Operator.Word */
    .w { color: #bbbbbb } /* Text.Whitespace */
    .mf { color: #666666 } /* Literal.Number.Float */
    .mh { color: #666666 } /* Literal.Number.Hex */
    .mi { color: #666666 } /* Literal.Number.Integer */
    .mo { color: #666666 } /* Literal.Number.Oct */
    .sb { color: #BA2121 } /* Literal.String.Backtick */
    .sc { color: #BA2121 } /* Literal.String.Char */
    .sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */
    .s2 { color: #BA2121 } /* Literal.String.Double */
    .se { color: #BB6622; font-weight: bold } /* Literal.String.Escape */
    .sh { color: #BA2121 } /* Literal.String.Heredoc */
    .si { color: #BB6688; font-weight: bold } /* Literal.String.Interpol */
    .sx { color: #008000 } /* Literal.String.Other */
    .sr { color: #BB6688 } /* Literal.String.Regex */
    .s1 { color: #BA2121 } /* Literal.String.Single */
    .ss { color: #19177C } /* Literal.String.Symbol */
    .bp { color: #008000 } /* Name.Builtin.Pseudo */
    .vc { color: #19177C } /* Name.Variable.Class */
    .vg { color: #19177C } /* Name.Variable.Global */
    .vi { color: #19177C } /* Name.Variable.Instance */
    .il { color: #666666 } /* Literal.Number.Integer.Long */
}

/* customized pre blocks for markdown/rst */
pre.literal-block, .codehilite pre{
    padding: @padding;
    border: 1px solid @grey6;
    .border-radius(@border-radius);
    background-color: @grey7;
}


/* START NEW CODE BLOCK CSS */

@cb-line-height: 18px;
@cb-line-code-padding: 10px;
@cb-text-padding: 5px;

@diff-pill-padding: 2px 7px;

input.diff-collapse-state {
    display: none;

    &:checked + .diff { /* file diff is collapsed */
        .cb {
            display: none
        }
        .diff-collapse-indicator {
            border-width: 9px 0 9px 15.6px;
            border-color: transparent transparent transparent #ccc;
        }
        .diff-menu {
            display: none;
        }
        margin: -1px 0 0 0;
    }

    &+ .diff { /* file diff is expanded */
        .diff-collapse-indicator {
            border-width: 15.6px 9px 0 9px;
            border-color: #ccc transparent transparent transparent;
        }
        .diff-menu {
            display: block;
        }
        margin: 20px 0;
    }
}
.diff {
    border: 1px solid @grey5;

    /* START OVERRIDES */
    .code-highlight {
        border: none;  // TODO: remove this border from the global
                       // .code-highlight, it doesn't belong there
    }
    label {
        margin: 0; // TODO: remove this margin definition from global label
                   // it doesn't belong there - if margin on labels
                   // are needed for a form they should be defined
                   // in the form's class
    }
    /* END OVERRIDES */

    * {
        box-sizing: border-box;
    }
    .diff-anchor {
        visibility: hidden;
    }
    &:hover {
        .diff-anchor {
            visibility: visible;
        }
    }

    .diff-collapse-indicator {
        width: 0;
        height: 0;
        border-style: solid;
        float: left;
        margin: 2px 2px 0 0;
        cursor: pointer;
    }

    .diff-heading {
        background: @grey7;
        cursor: pointer;
        display: block;
        padding: 5px 10px;
    }
    .diff-heading:after {
        content: "";
        display: table;
        clear: both;
    }
    .diff-heading:hover {
        background: #e1e9f4 !important;
    }

    .diff-menu {
        float: right;

        a, span {
            padding: 5px;
            display: block;
            float: left
        }
    }
    .diff-pill {
        display: block;
        float: left;
        padding: @diff-pill-padding;
    }
    .diff-pill-group {
        .diff-pill {
            opacity: .8;
            &:first-child {
                border-radius: @border-radius 0 0 @border-radius;
            }
            &:last-child {
                border-radius: 0 @border-radius @border-radius 0;
            }
            &:only-child {
                border-radius: @border-radius;
            }
        }
    }
    .diff-pill {
        &[op="name"] {
            background: none;
            color: @grey2;
            opacity: 1;
            color: white;
        }
        &[op="limited"] {
            background: @grey2;
            color: white;
        }
        &[op="binary"] {
            background: @color7;
            color: white;
        }
        &[op="modified"] {
            background: @alert1;
            color: white;
        }
        &[op="renamed"] {
            background: @color4;
            color: white;
        }
        &[op="mode"] {
            background: @grey3;
            color: white;
        }
        &[op="symlink"] {
            background: @color8;
            color: white;
        }

        &[op="added"] { /* added lines */
            background: @alert1;
            color: white;
        }
        &[op="deleted"] { /* deleted lines */
            background: @alert2;
            color: white;
        }

        &[op="created"] { /* created file */
            background: @alert1;
            color: white;
        }
        &[op="removed"] { /* deleted file */
            background: @color5;
            color: white;
        }
    }

    .diff-collapse-button, .diff-expand-button {
        cursor: pointer;
    }
    .diff-collapse-button {
        display: inline;
    }
    .diff-expand-button {
        display: none;
    }
    .diff-collapsed .diff-collapse-button {
        display: none;
    }
    .diff-collapsed .diff-expand-button {
        display: inline;
    }
}
table.cb {
    width: 100%;
    border-collapse: collapse;

    .cb-text {
        padding: @cb-text-padding;
    }
    .cb-hunk {
        padding: @cb-text-padding;
    }
    .cb-expand {
        display: none;
    }
    .cb-collapse {
        display: inline;
    }
    &.cb-collapsed {
        .cb-line {
            display: none;
        }
        .cb-expand {
            display: inline;
        }
        .cb-collapse {
            display: none;
        }
    }

    /* intentionally general selector since .cb-line-selected must override it
       and they both use !important since the td itself may have a random color
       generated by annotation blocks. TLDR: if you change it, make sure
       annotated block selection and line selection in file view still work */
    .cb-line-fresh .cb-content {
        background: white !important;
    }
    .cb-warning {
        background: #fff4dd;
    }

    &.cb-diff-sideside {
        td {
            &.cb-content {
                width: 50%;
            }
        }
    }

    tr {
        &.cb-annotate {
            border-top: 1px solid #eee;

            &+ .cb-line {
                border-top: 1px solid #eee;
            }

            &:first-child {
                border-top: none;
                &+ .cb-line {
                    border-top: none;
                }
            }
        }

        &.cb-hunk {
            font-family: @font-family-monospace;
            color: rgba(0, 0, 0, 0.3);

            td {
                &:first-child {
                    background: #edf2f9;
                }
                &:last-child {
                    background: #f4f7fb;
                }
            }
        }
    }

    td {
        vertical-align: top;
        padding: 0;

        &.cb-content {
            font-size: 12.35px;

            &.cb-line-selected .cb-code {
                background: @comment-highlight-color !important;
            }

            span.cb-code {
                line-height: @cb-line-height;
                padding-left: @cb-line-code-padding;
                padding-right: @cb-line-code-padding;
                display: block;
                white-space: pre-wrap;
                font-family: @font-family-monospace;
                word-break: break-word;
            }
        }

        &.cb-lineno {
            padding: 0;
            width: 50px;
            color: rgba(0, 0, 0, 0.3);
            text-align: right;
            border-right: 1px solid #eee;
            font-family: @font-family-monospace;

            a::before {
                content: attr(data-line-no);
            }
            &.cb-line-selected a {
                background: @comment-highlight-color !important;
            }

            a {
                display: block;
                padding-right: @cb-line-code-padding;
                padding-left: @cb-line-code-padding;
                line-height: @cb-line-height;
                color: rgba(0, 0, 0, 0.3);
            }
        }

        &.cb-empty {
            background: @grey7;
        }

        ins {
            color: black;
            background: #a6f3a6;
            text-decoration: none;
        }
        del {
            color: black;
            background: #f8cbcb;
            text-decoration: none;
        }
        &.cb-addition {
            background: #ecffec;

            &.blob-lineno {
                background: #ddffdd;
            }
        }
        &.cb-deletion {
            background: #ffecec;

            &.blob-lineno {
                background: #ffdddd;
            }
        }

        &.cb-annotate-info {
            width: 320px;
            min-width: 320px;
            max-width: 320px;
            padding: 5px 2px;
            font-size: 13px;

            strong.cb-annotate-message {
                padding: 5px 0;
                white-space: pre-line;
                display: inline-block;
            }
            .rc-user {
                float: none;
                padding: 0 6px 0 17px;
                min-width: auto;
                min-height: auto;
            }
        }

        &.cb-annotate-revision {
            cursor: pointer;
            text-align: right;
        }
    }
}