diff options
author | Douwe Maan <douwe@selenight.nl> | 2016-01-21 14:23:53 +0100 |
---|---|---|
committer | Douwe Maan <douwe@selenight.nl> | 2016-01-21 14:23:53 +0100 |
commit | 21facf535377ad58d07e8943033fe14efface8b2 (patch) | |
tree | 020fc70236a38f44f67faeb7a6f387dd250f01f4 /app/assets/stylesheets/highlight | |
parent | a4ff270d59ef951538cb9d3962ebc8bc7d990016 (diff) | |
download | gitlab-ce-21facf535377ad58d07e8943033fe14efface8b2.tar.gz |
Use consistent markup and styling for highlighting across blobs, diffs, blame and snippets
Diffstat (limited to 'app/assets/stylesheets/highlight')
-rw-r--r-- | app/assets/stylesheets/highlight/dark.scss | 49 | ||||
-rw-r--r-- | app/assets/stylesheets/highlight/monokai.scss | 49 | ||||
-rw-r--r-- | app/assets/stylesheets/highlight/solarized_dark.scss | 49 | ||||
-rw-r--r-- | app/assets/stylesheets/highlight/solarized_light.scss | 50 | ||||
-rw-r--r-- | app/assets/stylesheets/highlight/white.scss | 60 |
5 files changed, 142 insertions, 115 deletions
diff --git a/app/assets/stylesheets/highlight/dark.scss b/app/assets/stylesheets/highlight/dark.scss index 8201735beb5..3ba2cc94ad2 100644 --- a/app/assets/stylesheets/highlight/dark.scss +++ b/app/assets/stylesheets/highlight/dark.scss @@ -1,20 +1,35 @@ /* https://github.com/MozMorris/tomorrow-pygments */ .code.dark { + // Line numbers + .line-numbers, .diff-line-num { + background-color: #1d1f21; + } - background-color: #1d1f21 !important; - color: #c5c8c6 !important; - - pre.highlight, - .line-numbers, - .line-numbers a { - background-color: #1d1f21 !important; - color: #c5c8c6 !important; + .diff-line-num, .diff-line-num a { + color: rgba(255, 255, 255, 0.3); } + // Code itself pre.code { border-left: 1px solid #666; } + &, pre.code, .line_holder .line_content { + background-color: #1d1f21; + color: #c5c8c6; + } + + // Diff line + .line_holder { + .diff-line-num.new, .line_content.new { + @include diff_background(51, 255, 51, #808080); + } + + .diff-line-num.old, .line_content.old { + @include diff_background(255, 51, 51, #808080); + } + } + // highlight line via anchor pre .hll { background-color: #557 !important; @@ -90,22 +105,4 @@ .vg { color: #cc6666 } /* Name.Variable.Global */ .vi { color: #cc6666 } /* Name.Variable.Instance */ .il { color: #de935f } /* Literal.Number.Integer.Long */ - - .line_holder { - &.parallel .new.new_line, - &.parallel .new.line_content, - &.new .old_line, - &.new .new_line, - &.new .line_content { - @include diff_background(255, 255, 255, #808080); - } - - &.parallel .old.old_line, - &.parallel .old.line_content, - &.old .old_line, - &.old .new_line, - &.old .line_content { - @include diff_background(255, 51, 51, #808080); - } - } } diff --git a/app/assets/stylesheets/highlight/monokai.scss b/app/assets/stylesheets/highlight/monokai.scss index cc03ed6ae45..b47aef73d2b 100644 --- a/app/assets/stylesheets/highlight/monokai.scss +++ b/app/assets/stylesheets/highlight/monokai.scss @@ -1,20 +1,35 @@ /* https://github.com/richleland/pygments-css/blob/master/monokai.css */ .code.monokai { + // Line numbers + .line-numbers, .diff-line-num { + background-color: #272822; + } - background-color: #272822 !important; - color: #f8f8f2 !important; - - pre.highlight, - .line-numbers, - .line-numbers a { - background-color :#272822 !important; - color: #f8f8f2 !important; + .diff-line-num, .diff-line-num a { + color: #f8f8f2; } + // Code itself pre.code { border-left: 1px solid #555; } + &, pre.code, .line_holder .line_content { + background-color: #272822; + color: #f8f8f2; + } + + // Diff line + .line_holder { + .diff-line-num.new, .line_content.new { + @include diff_background(156, 175, 183, #808080); + } + + .diff-line-num.old, .line_content.old { + @include diff_background(254, 147, 140, #808080); + } + } + // highlight line via anchor pre .hll { background-color: #49483e !important; @@ -90,22 +105,4 @@ .gu { color: #75715e; } /* Generic.Subheading & Diff Unified/Comment? */ .gd { color: #f92672; } /* Generic.Deleted & Diff Deleted */ .gi { color: #a6e22e; } /* Generic.Inserted & Diff Inserted */ - - .line_holder { - &.parallel .new.new_line, - &.parallel .new.line_content, - &.new .old_line, - &.new .new_line, - &.new .line_content { - @include diff_background(156, 175, 183, #808080); - } - - &.parallel .old.old_line, - &.parallel .old.line_content, - &.old .old_line, - &.old .new_line, - &.old .line_content { - @include diff_background(254, 147, 140, #808080); - } - } } diff --git a/app/assets/stylesheets/highlight/solarized_dark.scss b/app/assets/stylesheets/highlight/solarized_dark.scss index fdfac6cd249..0aab580bd3c 100644 --- a/app/assets/stylesheets/highlight/solarized_dark.scss +++ b/app/assets/stylesheets/highlight/solarized_dark.scss @@ -1,20 +1,35 @@ /* https://gist.github.com/qguv/7936275 */ .code.solarized-dark { + // Line numbers + .line-numbers, .diff-line-num { + background-color: #002b36; + } - background-color: #002b36 !important; - color: #93a1a1 !important; - - pre.highlight, - .line-numbers, - .line-numbers a { - background-color: #002b36 !important; - color: #93a1a1 !important; + .diff-line-num, .diff-line-num a { + color: #93a1a1; } + // Code itself pre.code { border-left: 1px solid #113b46; } + &, pre.code, .line_holder .line_content { + background-color: #002b36; + color: #93a1a1; + } + + // Diff line + .line_holder { + .diff-line-num.new, .line_content.new { + @include diff_background(255, 255, 255, #808080); + } + + .diff-line-num.old, .line_content.old { + @include diff_background(255, 51, 51, #808080); + } + } + // highlight line via anchor pre .hll { background-color: #174652 !important; @@ -111,22 +126,4 @@ .vg { color: #268bd2 } /* Name.Variable.Global */ .vi { color: #268bd2 } /* Name.Variable.Instance */ .il { color: #2aa198 } /* Literal.Number.Integer.Long */ - - .line_holder { - &.parallel .new.new_line, - &.parallel .new.line_content, - &.new .old_line, - &.new .new_line, - &.new .line_content { - @include diff_background(255, 255, 255, #808080); - } - - &.parallel .old.old_line, - &.parallel .old.line_content, - &.old .old_line, - &.old .new_line, - &.old .line_content { - @include diff_background(255, 51, 51, #808080); - } - } } diff --git a/app/assets/stylesheets/highlight/solarized_light.scss b/app/assets/stylesheets/highlight/solarized_light.scss index f9788951aa8..3aaadcd0f96 100644 --- a/app/assets/stylesheets/highlight/solarized_light.scss +++ b/app/assets/stylesheets/highlight/solarized_light.scss @@ -1,20 +1,35 @@ /* https://gist.github.com/qguv/7936275 */ .code.solarized-light { + // Line numbers + .line-numbers, .diff-line-num { + background-color: #fdf6e3; + } - background-color: #fdf6e3 !important; - color: #586e75 !important; - - pre.highlight, - .line-numbers, - .line-numbers a { - background-color: #fdf6e3 !important; - color: #586e75 !important; + .diff-line-num, .diff-line-num a { + color: #586e75; } + // Code itself pre.code { border-left: 1px solid #c5d0d4; } + &, pre.code, .line_holder .line_content { + background-color: #fdf6e3; + color: #586e75; + } + + // Diff line + .line_holder { + .diff-line-num.new, .line_content.new { + @include diff_background(92, 164, 169, #FAF3DD); + } + + .diff-line-num.old, .line_content.old { + @include diff_background(237, 106, 90, #FAF3DD); + } + } + // highlight line via anchor pre .hll { background-color: #ddd8c5 !important; @@ -111,23 +126,4 @@ .vg { color: #268bd2 } /* Name.Variable.Global */ .vi { color: #268bd2 } /* Name.Variable.Instance */ .il { color: #2aa198 } /* Literal.Number.Integer.Long */ - - - .line_holder { - &.parallel .new.new_line, - &.parallel .new.line_content, - &.new .old_line, - &.new .new_line, - &.new .line_content { - @include diff_background(92, 164, 169, #FAF3DD); - } - - &.parallel .old.old_line, - &.parallel .old.line_content, - &.old .old_line, - &.old .new_line, - &.old .line_content { - @include diff_background(237, 106, 90, #FAF3DD); - } - } } diff --git a/app/assets/stylesheets/highlight/white.scss b/app/assets/stylesheets/highlight/white.scss index e2626da7871..8a932e6540e 100644 --- a/app/assets/stylesheets/highlight/white.scss +++ b/app/assets/stylesheets/highlight/white.scss @@ -1,20 +1,60 @@ /* https://github.com/aahan/pygments-github-style */ .code.white { + // Line numbers + .line-numbers, .diff-line-num { + background-color: $background-color; + } - background-color: #f8fafc !important; - color: #5b6169 !important; - - pre.highlight, - .line-numbers, - .line-numbers a { - background-color: $background-color !important; - color: $gl-gray !important; + .diff-line-num, .diff-line-num a { + color: rgba(0, 0, 0, 0.3); } + // Code itself pre.code { border-left: 1px solid $border-color; - background-color: #fff !important; - color: #333 !important; + } + + &, pre.code, .line_holder .line_content { + background-color: #fff; + color: #333; + } + + // Diff line + .line_holder { + .diff-line-num { + &.old { + background: #ffdddd; + border-color: #f1c0c0; + } + + &.new { + background: #dbffdb; + border-color: #c1e9c1; + } + } + + .line_content { + &.old { + background: #ffecec; + + span.idiff { + background-color: #f8cbcb; + } + } + + &.new { + background: #eaffea; + + span.idiff { + background-color: #a6f3a6; + } + } + + &.match { + color: rgba(0, 0, 0, 0.3); + background: #fafafa; + } + } } // highlight line via anchor |