gitlab-org--gitlab-foss/app/assets/stylesheets/pages/merge_conflicts.scss

$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       : #f9f9f9,


  dark_header_head_neutral   : rgba(#33ff33, .2),
  dark_line_head_neutral     : rgba(#33ff33, .1),
  dark_button_head_neutral   : #40874f,

  dark_header_head_chosen    : rgba(#33ff33, .33),
  dark_line_head_chosen      : rgba(#33ff33, .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;
  }
}