BigW Consortium Gitlab

diff.scss 7.64 KB
Newer Older
1
// Common
2
.diff-file {
3 4
  margin-left: -$gl-padding;
  margin-right: -$gl-padding;
5 6
  border: none;
  border-bottom: 1px solid #E7E9EE;
7 8

  .diff-header {
9 10 11
    position: relative;
    background: $background-color;
    border-bottom: 1px solid $border-color;
12
    padding: 10px 16px;
13
    color: #555;
14
    z-index: 10;
15

16
    .diff-title {
17
      font-family: $monospace_font;
18 19
      word-break: break-all;
      display: block;
20 21 22 23

      .file-mode {
        color: #777;
      }
24 25
    }

26
    .diff-controls {
27
      .btn {
28 29 30
        padding: 0px 10px;
        font-size: 13px;
        line-height: 28px;
31 32 33 34 35 36 37 38 39 40 41 42 43
      }
    }

    .commit-short-id {
      font-family: $monospace_font;
      font-size: smaller;
    }
  }
  .diff-content {
    overflow: auto;
    overflow-y: hidden;
    background: #FFF;
    color: #333;
44

45 46
    .old {
      span.idiff {
47
        background-color: #f8cbcb;
48 49 50 51
      }
    }
    .new {
      span.idiff {
52
        background-color: #a6f3a6;
53 54
      }
    }
skv committed
55 56 57
    .unfold {
      cursor: pointer;
    }
58

59 60 61 62 63
    .file-mode-changed {
      padding: 10px;
      color: #777;
    }

64 65 66 67 68 69 70 71 72 73 74
    .suppressed-container {
      padding: ($padding-base-vertical + 5px) $padding-base-horizontal;
      text-align: center;

      // "Changes suppressed. Click to show." link
      .show-suppressed-diff {
        font-size: 110%;
        font-weight: bold;
      }
    }

75 76 77 78 79 80
    table {
      width: 100%;
      font-family: $monospace_font;
      border: none;
      margin: 0px;
      padding: 0px;
81
      .line_holder td {
82 83
        line-height: $code_line_height;
        font-size: $code_font_size;
84 85
      }
    }
86

87
    tr.line_holder.parallel {
88 89 90 91
      .old_line, .new_line, .diff_line {
        min-width: 50px;
      }

92
      td.line_content.parallel {
93 94
        width: 50%;
      }
95 96
    }

97 98 99 100
    .old_line, .new_line, .diff_line {
      margin: 0px;
      padding: 0px;
      border: none;
101
      background: $background-color;
102
      color: rgba(0, 0, 0, 0.3);
103
      padding: 0px 5px;
104
      border-right: 1px solid $border-color;
105 106 107 108 109 110 111 112 113
      text-align: right;
      min-width: 35px;
      max-width: 50px;
      width: 35px;
      @include user-select(none);
      a {
        float: left;
        width: 35px;
        font-weight: normal;
114
        color: rgba(0, 0, 0, 0.3);
115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131
        &:hover {
          text-decoration: underline;
        }
      }
      &.new {
        background: #CFD;
      }
      &.old {
        background: #FDD;
      }
    }
    .diff_line {
      padding: 0;
    }
    .line_holder {
      &.old .old_line,
      &.old .new_line {
132 133
        background: #ffdddd;
        border-color: #f1c0c0;
134 135 136
      }
      &.new .old_line,
      &.new .new_line {
137 138
        background: #dbffdb;
        border-color: #c1e9c1;
139 140 141 142 143 144 145 146
      }
    }
    .line_content {
      display: block;
      margin: 0px;
      padding: 0px 0.5em;
      border: none;
      &.new {
147
        background: #eaffea;
148 149
      }
      &.old {
150
        background: #ffecec;
151 152
      }
      &.matched {
153
        color: $border-color;
154 155 156 157 158 159 160 161 162 163 164
        background: #fafafa;
      }
      &.parallel {
        display: table-cell;
      }
    }
  }
  .image {
    background: #ddd;
    text-align: center;
    padding: 30px;
165
    .wrap {
166 167 168 169 170 171 172
      display: inline-block;
    }

    .frame {
      display: inline-block;
      background-color: #fff;
      line-height: 0;
173
      img {
174
        border: 1px solid #FFF;
175
        background: image-url('trans_bg.gif');
176 177 178 179 180 181 182 183 184 185
        max-width: 100%;
      }
      &.deleted {
        border: 1px solid $deleted;
      }

      &.added {
        border: 1px solid $added;
      }
    }
186
    .image-info {
187 188 189 190 191
      font-size: 12px;
      margin: 5px 0 0 0;
      color: grey;
    }

192
    .view.swipe {
193 194
      position: relative;

195
      .swipe-frame {
196 197 198 199
        display: block;
        margin: auto;
        position: relative;
      }
200
      .swipe-wrap {
201 202 203 204 205 206 207
        overflow: hidden;
        border-left: 1px solid #999;
        position: absolute;
        display: block;
        top: 13px;
        right: 7px;
      }
208
      .frame {
209 210 211
        top: 0;
        right: 0;
        position: absolute;
212
        &.deleted {
213 214 215 216 217 218
          margin: 0;
          display: block;
          top: 13px;
          right: 7px;
        }
      }
219
      .swipe-bar {
220 221 222 223 224 225
        display: block;
        height: 100%;
        width: 15px;
        z-index: 100;
        position: absolute;
        cursor: pointer;
226 227
        &:hover {
          .top-handle {
228 229
            background-position: -15px 3px;
          }
230
          .bottom-handle {
231 232
            background-position: -15px -11px;
          }
233 234
        }
        .top-handle {
235 236 237 238 239
          display: block;
          height: 14px;
          width: 15px;
          position: absolute;
          top: 0px;
240
          background: image-url('swipemode_sprites.gif') 0 3px no-repeat;
241
        }
242
        .bottom-handle {
243 244 245 246 247
          display: block;
          height: 14px;
          width: 15px;
          position: absolute;
          bottom: 0px;
248
          background: image-url('swipemode_sprites.gif') 0 -11px no-repeat;
249 250
        }
      }
251 252 253 254
    }
    //.view.swipe
    .view.onion-skin {
      .onion-skin-frame {
255 256 257 258 259 260 261 262 263 264
        display: block;
        margin: auto;
        position: relative;
      }
      .frame.added, .frame.deleted {
        position: absolute;
        display: block;
        top: 0px;
        left: 0px;
      }
265
      .controls {
266 267 268 269 270 271 272 273 274
        display: block;
        height: 14px;
        width: 300px;
        z-index: 100;
        position: absolute;
        bottom: 0px;
        left: 50%;
        margin-left: -150px;

275
        .drag-track {
276 277 278 279 280
          display: block;
          position: absolute;
          left: 12px;
          height: 10px;
          width: 276px;
281
          background: image-url('onion_skin_sprites.gif') -4px -20px repeat-x;
282 283 284 285 286 287 288 289 290
        }

        .dragger {
          display: block;
          position: absolute;
          left: 0px;
          top: 0px;
          height: 14px;
          width: 14px;
291
          background: image-url('onion_skin_sprites.gif') 0px -34px repeat-x;
292 293 294 295 296 297 298 299 300 301
          cursor: pointer;
        }

        .transparent {
          display: block;
          position: absolute;
          top: 2px;
          right: 0px;
          height: 10px;
          width: 10px;
302
          background: image-url('onion_skin_sprites.gif') -2px 0px no-repeat;
303 304 305 306 307 308 309 310 311
        }

        .opaque {
          display: block;
          position: absolute;
          top: 2px;
          left: 0px;
          height: 10px;
          width: 10px;
312
          background: image-url('onion_skin_sprites.gif') -2px -10px no-repeat;
313 314
        }
      }
315 316
    }
    //.view.onion-skin
317
  }
318
  .view-modes {
319 320
    padding: 10px;
    text-align: center;
321
    background: #EEE;
322

323
    ul, li {
324 325 326 327 328 329
      list-style: none;
      margin: 0;
      padding: 0;
      display: inline-block;
    }

330
    li {
331 332 333 334
      color: grey;
      border-left: 1px solid #c1c1c1;
      padding: 0 12px 0 16px;
      cursor: pointer;
335
      &:first-child {
336 337
        border-left: none;
      }
338
      &:hover {
339 340
        text-decoration: underline;
      }
341 342
      &.active {
        &:hover {
343 344 345 346 347
          text-decoration: none;
        }
        cursor: default;
        color: #333;
      }
348
      &.disabled {
349 350 351 352 353
        display: none;
      }
    }
  }
}
354 355 356 357 358

.file-content .diff-file {
  margin: 0;
  border: none;
}
359 360 361 362 363 364 365 366 367

.diff-file .line_content {
  white-space: pre;
}

.diff-wrap-lines .line_content {
  white-space: pre-wrap;
}

368 369 370
.inline-parallel-buttons {
  float: right;
}
371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404

// Mobile
@media (max-width: 480px) {
  .diff-title {
    margin: 0;

    .file-mode {
      display: none;
    }
  }

  .diff-controls {
    position: static;
    text-align: center;
  }
}

// Bigger screens
@media (min-width: 481px) {
  .diff-title {
    margin-right: 200px;

    .file-mode {
      margin-left: 10px;
    }
  }

  .diff-controls {
    float: right;
    position: absolute;
    top: 5px;
    right: 15px;
  }
}