1@import 'mixins_and_variables_and_functions'; 2@import '../highlight/conflict_colors'; 3 4@mixin color-scheme($color) { 5 .header.line_content, 6 .diff-line-num { 7 &.origin { 8 background-color: map-get($conflict-colors, #{$color}-header-origin-neutral); 9 border-color: map-get($conflict-colors, #{$color}-header-origin-neutral); 10 11 button { 12 background-color: map-get($conflict-colors, #{$color}-button-origin-neutral); 13 border-color: darken(map-get($conflict-colors, #{$color}-button-origin-neutral), 15); 14 } 15 16 &.selected { 17 background-color: map-get($conflict-colors, #{$color}-header-origin-chosen); 18 border-color: map-get($conflict-colors, #{$color}-header-origin-chosen); 19 20 button { 21 background-color: map-get($conflict-colors, #{$color}-button-origin-chosen); 22 border-color: darken(map-get($conflict-colors, #{$color}-button-origin-chosen), 15); 23 } 24 } 25 26 &.unselected { 27 background-color: map-get($conflict-colors, #{$color}-header-not-chosen); 28 border-color: map-get($conflict-colors, #{$color}-header-not-chosen); 29 30 button { 31 background-color: lighten(map-get($conflict-colors, #{$color}-button-origin-neutral), 15); 32 border-color: map-get($conflict-colors, #{$color}-button-origin-neutral); 33 } 34 } 35 } 36 37 &.head { 38 background-color: map-get($conflict-colors, #{$color}-header-head-neutral); 39 border-color: map-get($conflict-colors, #{$color}-header-head-neutral); 40 41 button { 42 background-color: map-get($conflict-colors, #{$color}-button-head-neutral); 43 border-color: darken(map-get($conflict-colors, #{$color}-button-head-neutral), 15); 44 } 45 46 &.selected { 47 background-color: map-get($conflict-colors, #{$color}-header-head-chosen); 48 border-color: map-get($conflict-colors, #{$color}-header-head-chosen); 49 50 button { 51 background-color: map-get($conflict-colors, #{$color}-button-head-chosen); 52 border-color: darken(map-get($conflict-colors, #{$color}-button-head-chosen), 15); 53 } 54 } 55 56 &.unselected { 57 background-color: map-get($conflict-colors, #{$color}-header-not-chosen); 58 border-color: map-get($conflict-colors, #{$color}-header-not-chosen); 59 60 button { 61 background-color: lighten(map-get($conflict-colors, #{$color}-button-head-neutral), 15); 62 border-color: map-get($conflict-colors, #{$color}-button-head-neutral); 63 } 64 } 65 } 66 } 67 68 .line_content { 69 &.origin { 70 background-color: map-get($conflict-colors, #{$color}-line-origin-neutral); 71 72 &.selected { 73 background-color: map-get($conflict-colors, #{$color}-line-origin-chosen); 74 } 75 76 &.unselected { 77 background-color: map-get($conflict-colors, #{$color}-line-not-chosen); 78 } 79 } 80 81 &.head { 82 background-color: map-get($conflict-colors, #{$color}-line-head-neutral); 83 84 &.selected { 85 background-color: map-get($conflict-colors, #{$color}-line-head-chosen); 86 } 87 88 &.unselected { 89 background-color: map-get($conflict-colors, #{$color}-line-not-chosen); 90 } 91 } 92 } 93} 94 95#conflicts { 96 .white { 97 @include color-scheme('white'); } 98 99 .dark { 100 @include color-scheme('dark'); } 101 102 .monokai { 103 @include color-scheme('monokai'); } 104 105 .solarized-light { 106 @include color-scheme('solarized-light'); } 107 108 .solarized-dark { 109 @include color-scheme('solarized-dark'); } 110 111 .none { 112 .line_content.header { 113 button { 114 color: $gray-900; 115 } 116 } 117 } 118 119 .diff-wrap-lines .line_content { 120 white-space: normal; 121 min-height: 19px; 122 } 123 124 .line_content.header { 125 position: relative; 126 127 button { 128 border-radius: 2px; 129 font-size: 10px; 130 position: absolute; 131 right: 10px; 132 padding: 0; 133 outline: none; 134 color: var(--white, $white); 135 width: 75px; // static width to make 2 buttons have same width 136 height: 19px; 137 } 138 } 139 140 .editor-wrap { 141 &.is-loading { 142 .editor { 143 display: none; 144 } 145 146 .loading { 147 display: block; 148 } 149 } 150 151 &.saved { 152 .editor { 153 border-top: solid 2px var(--green-300, $green-300); 154 } 155 } 156 157 .editor { 158 pre { 159 height: 350px; 160 border: 0; 161 border-radius: 0; 162 margin-bottom: 0; 163 } 164 } 165 166 .loading { 167 display: none; 168 } 169 } 170 171 .discard-changes-alert { 172 background-color: var(--gray-10, $gray-10); 173 text-align: right; 174 padding: $gl-padding-top $gl-padding; 175 color: var(--gl-text-color, $gl-text-color); 176 } 177} 178