$colors: ( white_header_head_neutral : #e1fad7, white_line_head_neutral : #effdec, white_button_head_neutral : #9adb84, white_header_head_chosen : #baf0a8, white_line_head_chosen : #e1fad7, white_button_head_chosen : #52c22d, white_header_origin_neutral : #e0f0ff, white_line_origin_neutral : #f2f9ff, white_button_origin_neutral : #87c2fa, white_header_origin_chosen : #add8ff, white_line_origin_chosen : #e0f0ff, white_button_origin_chosen : #268ced, white_header_not_chosen : #f0f0f0, white_line_not_chosen : $gray-light, dark_header_head_neutral : rgba(#3f3, .2), dark_line_head_neutral : rgba(#3f3, .1), dark_button_head_neutral : #40874f, dark_header_head_chosen : rgba(#3f3, .33), dark_line_head_chosen : rgba(#3f3, .2), dark_button_head_chosen : #258537, dark_header_origin_neutral : rgba(#2878c9, .4), dark_line_origin_neutral : rgba(#2878c9, .3), dark_button_origin_neutral : #2a5c8c, dark_header_origin_chosen : rgba(#2878c9, .6), dark_line_origin_chosen : rgba(#2878c9, .4), dark_button_origin_chosen : #1d6cbf, dark_header_not_chosen : rgba(#fff, .25), dark_line_not_chosen : rgba(#fff, .1), monokai_header_head_neutral : rgba(#a6e22e, .25), monokai_line_head_neutral : rgba(#a6e22e, .1), monokai_button_head_neutral : #376b20, monokai_header_head_chosen : rgba(#a6e22e, .4), monokai_line_head_chosen : rgba(#a6e22e, .25), monokai_button_head_chosen : #39800d, monokai_header_origin_neutral : rgba(#60d9f1, .35), monokai_line_origin_neutral : rgba(#60d9f1, .15), monokai_button_origin_neutral : #38848c, monokai_header_origin_chosen : rgba(#60d9f1, .5), monokai_line_origin_chosen : rgba(#60d9f1, .35), monokai_button_origin_chosen : #3ea4b2, monokai_header_not_chosen : rgba(#76715d, .24), monokai_line_not_chosen : rgba(#76715d, .1), solarized_light_header_head_neutral : rgba(#859900, .37), solarized_light_line_head_neutral : rgba(#859900, .2), solarized_light_button_head_neutral : #afb262, solarized_light_header_head_chosen : rgba(#859900, .5), solarized_light_line_head_chosen : rgba(#859900, .37), solarized_light_button_head_chosen : #94993d, solarized_light_header_origin_neutral : rgba(#2878c9, .37), solarized_light_line_origin_neutral : rgba(#2878c9, .15), solarized_light_button_origin_neutral : #60a1bf, solarized_light_header_origin_chosen : rgba(#2878c9, .6), solarized_light_line_origin_chosen : rgba(#2878c9, .37), solarized_light_button_origin_chosen : #2482b2, solarized_light_header_not_chosen : rgba(#839496, .37), solarized_light_line_not_chosen : rgba(#839496, .2), solarized_dark_header_head_neutral : rgba(#859900, .35), solarized_dark_line_head_neutral : rgba(#859900, .15), solarized_dark_button_head_neutral : #376b20, solarized_dark_header_head_chosen : rgba(#859900, .5), solarized_dark_line_head_chosen : rgba(#859900, .35), solarized_dark_button_head_chosen : #39800d, solarized_dark_header_origin_neutral : rgba(#2878c9, .35), solarized_dark_line_origin_neutral : rgba(#2878c9, .15), solarized_dark_button_origin_neutral : #086799, solarized_dark_header_origin_chosen : rgba(#2878c9, .6), solarized_dark_line_origin_chosen : rgba(#2878c9, .35), solarized_dark_button_origin_chosen : #0082cc, solarized_dark_header_not_chosen : rgba(#839496, .25), solarized_dark_line_not_chosen : rgba(#839496, .15) ); @mixin color-scheme($color) { .header.line_content, .diff-line-num { &.origin { background-color: map-get($colors, #{$color}_header_origin_neutral); border-color: map-get($colors, #{$color}_header_origin_neutral); button { background-color: map-get($colors, #{$color}_button_origin_neutral); border-color: darken(map-get($colors, #{$color}_button_origin_neutral), 15); } &.selected { background-color: map-get($colors, #{$color}_header_origin_chosen); border-color: map-get($colors, #{$color}_header_origin_chosen); button { background-color: map-get($colors, #{$color}_button_origin_chosen); border-color: darken(map-get($colors, #{$color}_button_origin_chosen), 15); } } &.unselected { background-color: map-get($colors, #{$color}_header_not_chosen); border-color: map-get($colors, #{$color}_header_not_chosen); button { background-color: lighten(map-get($colors, #{$color}_button_origin_neutral), 15); border-color: map-get($colors, #{$color}_button_origin_neutral); } } } &.head { background-color: map-get($colors, #{$color}_header_head_neutral); border-color: map-get($colors, #{$color}_header_head_neutral); button { background-color: map-get($colors, #{$color}_button_head_neutral); border-color: darken(map-get($colors, #{$color}_button_head_neutral), 15); } &.selected { background-color: map-get($colors, #{$color}_header_head_chosen); border-color: map-get($colors, #{$color}_header_head_chosen); button { background-color: map-get($colors, #{$color}_button_head_chosen); border-color: darken(map-get($colors, #{$color}_button_head_chosen), 15); } } &.unselected { background-color: map-get($colors, #{$color}_header_not_chosen); border-color: map-get($colors, #{$color}_header_not_chosen); button { background-color: lighten(map-get($colors, #{$color}_button_head_neutral), 15); border-color: map-get($colors, #{$color}_button_head_neutral); } } } } .line_content { &.origin { background-color: map-get($colors, #{$color}_line_origin_neutral); &.selected { background-color: map-get($colors, #{$color}_line_origin_chosen); } &.unselected { background-color: map-get($colors, #{$color}_line_not_chosen); } } &.head { background-color: map-get($colors, #{$color}_line_head_neutral); &.selected { background-color: map-get($colors, #{$color}_line_head_chosen); } &.unselected { background-color: map-get($colors, #{$color}_line_not_chosen); } } } } #conflicts { .white { @include color-scheme('white') } .dark { @include color-scheme('dark') } .monokai { @include color-scheme('monokai') } .solarized-light { @include color-scheme('solarized_light') } .solarized-dark { @include color-scheme('solarized_dark') } .diff-wrap-lines .line_content { white-space: normal; min-height: 19px; } .line_content.header { position: relative; button { border-radius: 2px; font-size: 10px; position: absolute; right: 10px; padding: 0; outline: none; color: #fff; width: 75px; // static width to make 2 buttons have same width height: 19px; } } .btn-success .fa-spinner { color: #fff; } }