diff options
Diffstat (limited to 'app/assets/stylesheets/highlight')
10 files changed, 258 insertions, 2 deletions
diff --git a/app/assets/stylesheets/highlight/diff_custom_colors_addition.scss b/app/assets/stylesheets/highlight/diff_custom_colors_addition.scss new file mode 100644 index 00000000000..30895a55711 --- /dev/null +++ b/app/assets/stylesheets/highlight/diff_custom_colors_addition.scss @@ -0,0 +1,36 @@ +/** +* CSS variables used below are declared in `app/views/layouts/_diffs_colors_css.haml` +*/ +.diff-custom-addition-color { + .code { + .line_holder { + .diff-line-num, + .line-coverage, + .line-codequality, + .line_content { + &.new { + &:not(.hll) { + background: var(--diff-addition-color); + } + + &.line_content span.idiff { + background: var(--diff-addition-color) !important; + } + + &::before, + a { + mix-blend-mode: luminosity; + } + } + } + } + + .gd { + background-color: var(--diff-addition-color); + } + } + + .idiff.addition { + background: var(--diff-addition-color) !important; + } +} diff --git a/app/assets/stylesheets/highlight/diff_custom_colors_deletion.scss b/app/assets/stylesheets/highlight/diff_custom_colors_deletion.scss new file mode 100644 index 00000000000..a8ab43909eb --- /dev/null +++ b/app/assets/stylesheets/highlight/diff_custom_colors_deletion.scss @@ -0,0 +1,36 @@ +/** +* CSS variables used below are declared in `app/views/layouts/_diffs_colors_css.haml` +*/ +.diff-custom-deletion-color { + .code { + .line_holder { + .diff-line-num, + .line-coverage, + .line-codequality, + .line_content { + &.old { + &:not(.hll) { + background: var(--diff-deletion-color); + } + + &.line_content span.idiff { + background: var(--diff-deletion-color) !important; + } + + &::before, + a { + mix-blend-mode: luminosity; + } + } + } + } + + .gd { + background-color: var(--diff-deletion-color); + } + } + + .idiff.deletion { + background: var(--diff-deletion-color) !important; + } +} diff --git a/app/assets/stylesheets/highlight/hljs.scss b/app/assets/stylesheets/highlight/hljs.scss new file mode 100644 index 00000000000..2e31e7c1f6d --- /dev/null +++ b/app/assets/stylesheets/highlight/hljs.scss @@ -0,0 +1,125 @@ +.code.highlight { + .hljs-comment { + color: var(--color-hljs-comment); + } + + .hljs-link { + color: var(--color-hljs-link); + } + + .hljs-meta { + color: var(--color-hljs-meta); + } + + .hljs-keyword { + color: var(--color-hljs-keyword); + } + + .hljs-type { + color: var(--color-hljs-type); + } + + .hljs-attr, + .hljs-property { + color: var(--color-hljs-attr); + } + + .hljs-built_in { + color: var(--color-hljs-builtin); + } + + .hljs-literal { + color: var(--color-hljs-literal); + } + + .hljs-title { + color: var(--color-hljs-title); + + &.class_ { + color: var(--color-hljs-class); + } + + &.function_ { + color: var(--color-hljs-function); + } + } + + .hljs-tag , + .hljs-name { + color: var(--color-hljs-tag); + } + + .hljs-number { + color: var(--color-hljs-number); + } + + .hljs-subst { + color: var(--color-hljs-subst); + } + + .hljs-string, + .hljs-section, + .hljs-bullet { + color: var(--color-hljs-string); + } + + .hljs-symbol { + color: var(--color-hljs-symbol); + } + + .hljs-variable { + color: var(--color-hljs-variable); + + &.language_ { + color: var(--color-hljs-language); + } + + &.constant_ { + color: var(--color-hljs-constant); + } + } + + .hljs-attribute { + color: var(--color-hljs-attribute); + } + + .hljs-operator { + color: var(--color-hljs-operator); + } + + .hljs-punctuation { + color: var(--color-hljs-punctuation); + } + + .hljs-regexp { + color: var(--color-hljs-regexp); + } + + .hljs-params { + color: var(--color-hljs-params); + } + + .hljs-doctag { + color: var(--color-hljs-doctag); + } + + .hljs-selector-tag { + color: var(--color-hljs-selector-tag); + } + + .hljs-selector-class { + color: var(--color-hljs-selector-class); + } + + .hljs-selector-id { + color: var(--color-hljs-selector-id); + } + + .hljs-selector-attr { + color: var(--color-hljs-selector-attr); + } + + .hljs-selector-pseudo { + color: var(--color-hljs-selector-pseudo); + } +} diff --git a/app/assets/stylesheets/highlight/themes/dark.scss b/app/assets/stylesheets/highlight/themes/dark.scss index 28878280d24..c51b1f04757 100644 --- a/app/assets/stylesheets/highlight/themes/dark.scss +++ b/app/assets/stylesheets/highlight/themes/dark.scss @@ -1,6 +1,7 @@ /* https://github.com/MozMorris/tomorrow-pygments */ @import '../common'; +@import '../hljs'; /* * Dark syntax colors @@ -88,6 +89,41 @@ $dark-vg: #c66; $dark-vi: #c66; $dark-il: #de935f; +:root { + --color-hljs-comment: #{$dark-c}; + --color-hljs-variable: #{$dark-k}; + --color-hljs-link: #{$dark-l}; + --color-hljs-meta: #{$dark-cp}; + --color-hljs-keyword: #{$dark-kd}; + --color-hljs-type: #{$dark-kt}; + --color-hljs-attr: #{$dark-na}; + --color-hljs-builtin: #{$dark-nb}; + --color-hljs-title: #{$dark-n}; + --color-hljs-class: #{$dark-nc}; + --color-hljs-function: #{$dark-nf}; + --color-hljs-tag: #{$dark-nt}; + --color-hljs-number: #{$dark-mi}; + --color-hljs-subst: #{$dark-sc}; + --color-hljs-string: #{$dark-s1}; + --color-hljs-symbol: #{$dark-ss}; + --color-hljs-variable: #{$dark-vi}; + --color-hljs-operator: #{$dark-o}; + --color-hljs-punctuation: #{$dark-p}; + --color-hljs-regexp: #{$dark-sr}; + --color-hljs-constant: #{$dark-nx}; + --color-hljs-literal: #{$dark-kc}; + --color-hljs-language: #{$dark-nx}; + --color-hljs-params: #{$dark-nx}; + --color-hljs-selector-doctag: #{$dark-cm}; + --color-hljs-selector-tag: #{$dark-nt}; + --color-hljs-selector-class: #{$dark-nc}; + --color-hljs-selector-id: #{$dark-nn}; + --color-hljs-selector-attr: #{$dark-nt}; + --color-hljs-selector-pseudo: #{$dark-nd}; + --default-diff-color-deletion: #ff3333; + --default-diff-color-addition: #288f2a; +} + .code.dark { // Line numbers .file-line-num { diff --git a/app/assets/stylesheets/highlight/themes/monokai.scss b/app/assets/stylesheets/highlight/themes/monokai.scss index 6faf1cffdef..226bb44f0e7 100644 --- a/app/assets/stylesheets/highlight/themes/monokai.scss +++ b/app/assets/stylesheets/highlight/themes/monokai.scss @@ -89,6 +89,11 @@ $monokai-gd: #f92672; $monokai-gi: #a6e22e; $monokai-gh: #75715e; +:root { + --default-diff-color-deletion: #c87872; + --default-diff-color-addition: #678528; +} + .code.monokai { // Line numbers .file-line-num { diff --git a/app/assets/stylesheets/highlight/themes/none.scss b/app/assets/stylesheets/highlight/themes/none.scss index 9c28d9463dc..7a36aba8be7 100644 --- a/app/assets/stylesheets/highlight/themes/none.scss +++ b/app/assets/stylesheets/highlight/themes/none.scss @@ -9,6 +9,11 @@ background-color: $white-normal; } +:root { + --default-diff-color-deletion: #b4b4b4; + --default-diff-color-addition: #b4b4b4; +} + .code.none { // Line numbers .file-line-num { diff --git a/app/assets/stylesheets/highlight/themes/solarized-dark.scss b/app/assets/stylesheets/highlight/themes/solarized-dark.scss index c9f889c79fc..acd401e1694 100644 --- a/app/assets/stylesheets/highlight/themes/solarized-dark.scss +++ b/app/assets/stylesheets/highlight/themes/solarized-dark.scss @@ -92,6 +92,11 @@ $solarized-dark-vg: #268bd2; $solarized-dark-vi: #268bd2; $solarized-dark-il: #2aa198; +:root { + --default-diff-color-deletion: #ff362c; + --default-diff-color-addition: #647e0e; +} + .code.solarized-dark { // Line numbers .file-line-num { diff --git a/app/assets/stylesheets/highlight/themes/solarized-light.scss b/app/assets/stylesheets/highlight/themes/solarized-light.scss index 0108d7e496f..ddcecc4cbcf 100644 --- a/app/assets/stylesheets/highlight/themes/solarized-light.scss +++ b/app/assets/stylesheets/highlight/themes/solarized-light.scss @@ -94,6 +94,11 @@ $solarized-light-vg: #268bd2; $solarized-light-vi: #268bd2; $solarized-light-il: #2aa198; +:root { + --default-diff-color-deletion: #dc322f; + --default-diff-color-addition: #859900; +} + @mixin match-line { color: $black-transparent; background: $solarized-light-matchline-bg; diff --git a/app/assets/stylesheets/highlight/themes/white.scss b/app/assets/stylesheets/highlight/themes/white.scss index ed1d9c924c0..8698e448c94 100644 --- a/app/assets/stylesheets/highlight/themes/white.scss +++ b/app/assets/stylesheets/highlight/themes/white.scss @@ -3,3 +3,8 @@ @include conflict-colors('white'); } + +:root { + --default-diff-color-deletion: #eb919b; + --default-diff-color-addition: #a0f5b4; +}
\ No newline at end of file diff --git a/app/assets/stylesheets/highlight/white_base.scss b/app/assets/stylesheets/highlight/white_base.scss index 91d8f4a1ba5..20a36d2e8b1 100644 --- a/app/assets/stylesheets/highlight/white_base.scss +++ b/app/assets/stylesheets/highlight/white_base.scss @@ -149,7 +149,6 @@ pre.code, .diff-line-num { &.old { background-color: $line-number-old; - border-color: $line-removed-dark; a { color: scale-color($line-number-old, $red: -30%, $green: -30%, $blue: -30%); @@ -158,7 +157,6 @@ pre.code, &.new { background-color: $line-number-new; - border-color: $line-added-dark; a { color: scale-color($line-number-new, $red: -30%, $green: -30%, $blue: -30%); |