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

$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);



$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(#FFF, .37);
$solarized_light_line_not_chosen       : rgba(#FFF, .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(#FFF, .25);
$solarized_dark_line_not_chosen       : rgba(#FFF, .15);



$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(#FFF, .24);
$monokai_line_not_chosen       : rgba(#FFF, .1);



#conflicts {

  .white {
    .header.line_content, .diff-line-num {
      &.origin {
        background-color: $white_header_origin_neutral;
        &.selected {
          background-color: $white_header_origin_chosen;
        }
        &.unselected {
          background-color: $white_header_not_chosen;
        }
      }
      &.head {
        background-color: $white_header_head_neutral;
        &.selected {
          background-color: $white_header_head_chosen;
        }
        &.unselected {
          background-color: $white_header_not_chosen;
        }
      }
    }

    .line_content {
      &.origin {
        background-color: $white_line_origin_neutral;
        &.selected {
          background-color: $white_line_origin_chosen;
        }
        &.unselected {
          background-color: $white_line_not_chosen;
        }
      }
      &.head {
        background-color: $white_line_head_neutral;
        &.selected {
          background-color: $white_line_head_chosen;
        }
        &.unselected {
          background-color: $white_line_not_chosen;
        }
      }
    }
  }


  .dark {
    .header.line_content, .diff-line-num {
      &.origin {
        background-color: $dark_header_origin_neutral;
        &.selected {
          background-color: $dark_header_origin_chosen;
        }
        &.unselected {
          background-color: $dark_header_not_chosen;
        }
      }
      &.head {
        background-color: $dark_header_head_neutral;
        &.selected {
          background-color: $dark_header_head_chosen;
        }
        &.unselected {
          background-color: $dark_header_not_chosen;
        }
      }
    }

    .line_content {
      &.origin {
        background-color: $dark_line_origin_neutral;
        &.selected {
          background-color: $dark_line_origin_chosen;
        }
        &.unselected {
          background-color: $dark_line_not_chosen;
        }
      }
      &.head {
        background-color: $dark_line_head_neutral;
        &.selected {
          background-color: $dark_line_head_chosen;
        }
        &.unselected {
          background-color: $dark_line_not_chosen;
        }
      }
    }
  }


  .solarized-light {
    .header.line_content, .diff-line-num {
      &.origin {
        background-color: $solarized_light_header_origin_neutral;
        &.selected {
          background-color: $solarized_light_header_origin_chosen;
        }
        &.unselected {
          background-color: $solarized_light_header_not_chosen;
        }
      }
      &.head {
        background-color: $solarized_light_header_head_neutral;
        &.selected {
          background-color: $solarized_light_header_head_chosen;
        }
        &.unselected {
          background-color: $solarized_light_header_not_chosen;
        }
      }
    }

    .line_content {
      &.origin {
        background-color: $solarized_light_line_origin_neutral;
        &.selected {
          background-color: $solarized_light_line_origin_chosen;
        }
        &.unselected {
          background-color: $solarized_light_line_not_chosen;
        }
      }
      &.head {
        background-color: $solarized_light_line_head_neutral;
        &.selected {
          background-color: $solarized_light_line_head_chosen;
        }
        &.unselected {
          background-color: $solarized_light_line_not_chosen;
        }
      }
    }
  }


  .solarized-dark {
    .header.line_content, .diff-line-num {
      &.origin {
        background-color: $solarized_dark_header_origin_neutral;
        &.selected {
          background-color: $solarized_dark_header_origin_chosen;
        }
        &.unselected {
          background-color: $solarized_dark_header_not_chosen;
        }
      }
      &.head {
        background-color: $solarized_dark_header_head_neutral;
        &.selected {
          background-color: $solarized_dark_header_head_chosen;
        }
        &.unselected {
          background-color: $solarized_dark_header_not_chosen;
        }
      }
    }

    .line_content {
      &.origin {
        background-color: $solarized_dark_line_origin_neutral;
        &.selected {
          background-color: $solarized_dark_line_origin_chosen;
        }
        &.unselected {
          background-color: $solarized_dark_line_not_chosen;
        }
      }
      &.head {
        background-color: $solarized_dark_line_head_neutral;
        &.selected {
          background-color: $solarized_dark_line_head_chosen;
        }
        &.unselected {
          background-color: $solarized_dark_line_not_chosen;
        }
      }
    }
  }


  .monokai {
    .header.line_content, .diff-line-num {
      &.origin {
        background-color: $monokai_header_origin_neutral;
        &.selected {
          background-color: $monokai_header_origin_chosen;
        }
        &.unselected {
          background-color: $monokai_header_not_chosen;
        }
      }
      &.head {
        background-color: $monokai_header_head_neutral;
        &.selected {
          background-color: $monokai_header_head_chosen;
        }
        &.unselected {
          background-color: $monokai_header_not_chosen;
        }
      }
    }

    .line_content {
      &.origin {
        background-color: $monokai_line_origin_neutral;
        &.selected {
          background-color: $monokai_line_origin_chosen;
        }
        &.unselected {
          background-color: $monokai_line_not_chosen;
        }
      }
      &.head {
        background-color: $monokai_line_head_neutral;
        &.selected {
          background-color: $monokai_line_head_chosen;
        }
        &.unselected {
          background-color: $monokai_line_not_chosen;
        }
      }
    }
  }


  .diff-wrap-lines .line_content {
    white-space: normal;
    min-height: 19px;
  }

  .line_content.header {
    position: relative;

    button {
      border-radius: 4px;
      border: 1px solid #e1e1e1;
      background: #fff;
      font-size: 10px;
      position: absolute;
      right: 10px;
      height: 17px;
      line-height: 4px; // FIXME: 4px?
      top: 1px;
      outline: none;
    }
  }

  .btn-success .fa-spinner {
    color: #FFF;
  }
}