diff.scss 8.36 KB
Newer Older
1
// Common
2
.diff-file {
3
  border: 1px solid $border-color;
4
  margin-bottom: $gl-padding;
Annabel Dunstone's avatar
Annabel Dunstone committed
5
  border-radius: 3px;
6

7
  .commit-short-id {
8
    font-family: $regular_font;
9 10 11
    font-weight: 400;
  }

12
  .diff-header {
13 14 15
    position: relative;
    background: $background-color;
    border-bottom: 1px solid $border-color;
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
16
    padding: 10px 16px;
17
    color: #555;
18
    z-index: 10;
Annabel Dunstone's avatar
Annabel Dunstone committed
19
    border-radius: 3px 3px 0 0;
20

21
    .diff-title {
22
      font-family: $monospace_font;
23 24
      word-break: break-all;
      display: block;
25 26 27 28

      .file-mode {
        color: #777;
      }
29 30 31 32 33 34 35
    }

    .commit-short-id {
      font-family: $monospace_font;
      font-size: smaller;
    }
  }
36 37 38 39 40 41 42 43 44 45 46 47 48

  .file-title {
    cursor: pointer;

    &:hover {
      background-color: $dark-background-color;
    }

    .diff-toggle-caret {
      padding-right: 6px;
    }
  }

49 50 51
  .diff-content {
    overflow: auto;
    overflow-y: hidden;
52
    background: #fff;
53
    color: #333;
Annabel Dunstone's avatar
Annabel Dunstone committed
54
    border-radius: 0 0 3px 3px;
55

skv's avatar
skv committed
56 57 58
    .unfold {
      cursor: pointer;
    }
59

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

65 66 67 68 69 70 71 72 73 74 75
    .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;
      }
    }

76 77 78 79
    table {
      width: 100%;
      font-family: $monospace_font;
      border: none;
80
      border-collapse: separate;
81 82
      margin: 0;
      padding: 0;
83 84 85 86 87
      table-layout: fixed;

      .diff-line-num {
        width: 50px;
      }
88

89
      .line_holder td {
90 91
        line-height: $code_line_height;
        font-size: $code_font_size;
92

Annabel Dunstone's avatar
Annabel Dunstone committed
93 94 95 96
        &.noteable_line {
          position: relative;

          &.old {
97
            &::before {
Annabel Dunstone's avatar
Annabel Dunstone committed
98 99 100
              content: '-';
              position: absolute;
            }
101
          }
102

Annabel Dunstone's avatar
Annabel Dunstone committed
103
          &.new {
104
            &::before {
Annabel Dunstone's avatar
Annabel Dunstone committed
105 106 107
              content: '+';
              position: absolute;
            }
108
          }
109 110
        }

Annabel Dunstone's avatar
Annabel Dunstone committed
111
        span {
Annabel Dunstone's avatar
Annabel Dunstone committed
112
          white-space: pre-wrap;
Annabel Dunstone's avatar
Annabel Dunstone committed
113
        }
114
      }
115
    }
116

117 118
    tr.line_holder.parallel {
      td.line_content.parallel {
119 120 121 122 123
        width: 46%;
      }

      .add-diff-note {
        margin-left: -65px;
124
      }
125 126
    }

127 128
    .old_line,
    .new_line {
129 130
      margin: 0;
      padding: 0;
131
      border: none;
132
      padding: 0 5px;
133
      border-right: 1px solid;
134 135 136 137 138
      text-align: right;
      min-width: 35px;
      max-width: 50px;
      width: 35px;
      @include user-select(none);
139

140 141 142 143
      a {
        float: left;
        width: 35px;
        font-weight: normal;
144

145 146 147 148 149
        &:hover {
          text-decoration: underline;
        }
      }
    }
150

151 152
    .line_content {
      display: block;
153 154
      margin: 0;
      padding: 0 0.5em;
155
      border: none;
156

157 158
      &.parallel {
        display: table-cell;
159 160 161 162

        span {
          word-break: break-all;
        }
163 164
      }
    }
165 166 167 168

    .text-file.diff-wrap-lines table .line_holder td span {
      white-space: pre-wrap;
    }
169
  }
170

171 172 173 174
  .image {
    background: #ddd;
    text-align: center;
    padding: 30px;
175

176
    .wrap {
177 178 179 180 181 182 183
      display: inline-block;
    }

    .frame {
      display: inline-block;
      background-color: #fff;
      line-height: 0;
184

185
      img {
186
        border: 1px solid #fff;
187 188 189 190
        background-image: linear-gradient(45deg, #e5e5e5 25%, transparent 25%, transparent 75%, #e5e5e5 75%, #e5e5e5 100%),
        linear-gradient(45deg, #e5e5e5 25%, transparent 25%, transparent 75%, #e5e5e5 75%, #e5e5e5 100%);
        background-size: 10px 10px;
        background-position: 0 0, 5px 5px;
191 192
        max-width: 100%;
      }
193

194 195 196 197 198 199 200 201
      &.deleted {
        border: 1px solid $deleted;
      }

      &.added {
        border: 1px solid $added;
      }
    }
202

203
    .image-info {
204
      font-size: 12px;
205
      margin: 5px 0 0;
206 207 208
      color: grey;
    }

209
    .view.swipe {
210 211
      position: relative;

212
      .swipe-frame {
213 214 215 216
        display: block;
        margin: auto;
        position: relative;
      }
217

218
      .swipe-wrap {
219 220 221 222 223 224 225
        overflow: hidden;
        border-left: 1px solid #999;
        position: absolute;
        display: block;
        top: 13px;
        right: 7px;
      }
226

227
      .frame {
228 229 230
        top: 0;
        right: 0;
        position: absolute;
231

232
        &.deleted {
233 234 235 236 237 238
          margin: 0;
          display: block;
          top: 13px;
          right: 7px;
        }
      }
239

240
      .swipe-bar {
241 242 243 244 245 246
        display: block;
        height: 100%;
        width: 15px;
        z-index: 100;
        position: absolute;
        cursor: pointer;
247

248 249
        &:hover {
          .top-handle {
250 251
            background-position: -15px 3px;
          }
252

253
          .bottom-handle {
254 255
            background-position: -15px -11px;
          }
256
        }
257

258
        .top-handle {
259 260 261 262
          display: block;
          height: 14px;
          width: 15px;
          position: absolute;
263
          top: 0;
264
          background: image-url('swipemode_sprites.gif') 0 3px no-repeat;
265
        }
266

267
        .bottom-handle {
268 269 270 271
          display: block;
          height: 14px;
          width: 15px;
          position: absolute;
272
          bottom: 0;
273
          background: image-url('swipemode_sprites.gif') 0 -11px no-repeat;
274 275
        }
      }
276 277 278 279
    }
    //.view.swipe
    .view.onion-skin {
      .onion-skin-frame {
280 281 282 283
        display: block;
        margin: auto;
        position: relative;
      }
284

285 286
      .frame.added,
      .frame.deleted {
287 288
        position: absolute;
        display: block;
289 290
        top: 0;
        left: 0;
291
      }
292

293
      .controls {
294 295 296 297 298
        display: block;
        height: 14px;
        width: 300px;
        z-index: 100;
        position: absolute;
299
        bottom: 0;
300 301 302
        left: 50%;
        margin-left: -150px;

303
        .drag-track {
304 305 306 307 308
          display: block;
          position: absolute;
          left: 12px;
          height: 10px;
          width: 276px;
309
          background: image-url('onion_skin_sprites.gif') -4px -20px repeat-x;
310 311 312 313 314
        }

        .dragger {
          display: block;
          position: absolute;
315 316
          left: 0;
          top: 0;
317 318
          height: 14px;
          width: 14px;
319
          background: image-url('onion_skin_sprites.gif') 0 -34px repeat-x;
320 321 322 323 324 325 326
          cursor: pointer;
        }

        .transparent {
          display: block;
          position: absolute;
          top: 2px;
327
          right: 0;
328 329
          height: 10px;
          width: 10px;
330
          background: image-url('onion_skin_sprites.gif') -2px 0 no-repeat;
331 332 333 334 335 336
        }

        .opaque {
          display: block;
          position: absolute;
          top: 2px;
337
          left: 0;
338 339
          height: 10px;
          width: 10px;
340
          background: image-url('onion_skin_sprites.gif') -2px -10px no-repeat;
341 342
        }
      }
343 344
    }
    //.view.onion-skin
345
  }
346

347
  .view-modes {
348 349
    padding: 10px;
    text-align: center;
350
    background: #eee;
351

352 353
    ul,
    li {
354 355 356 357 358 359
      list-style: none;
      margin: 0;
      padding: 0;
      display: inline-block;
    }

360
    li {
361 362 363 364
      color: grey;
      border-left: 1px solid #c1c1c1;
      padding: 0 12px 0 16px;
      cursor: pointer;
365

366
      &:first-child {
367 368
        border-left: none;
      }
369

370
      &:hover {
371 372
        text-decoration: underline;
      }
373

374 375
      &.active {
        &:hover {
376 377
          text-decoration: none;
        }
378

379 380 381
        cursor: default;
        color: #333;
      }
382

383
      &.disabled {
384 385 386 387 388
        display: none;
      }
    }
  }
}
389 390 391 392 393

.file-content .diff-file {
  margin: 0;
  border: none;
}
394 395

.diff-file .line_content {
Annabel Dunstone's avatar
Annabel Dunstone committed
396
  white-space: pre-wrap;
397 398 399 400 401 402
}

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

403 404 405
.inline-parallel-buttons {
  float: right;
}
406

Annabel Dunstone's avatar
Annabel Dunstone committed
407 408 409 410 411 412
.diffs {
  .content-block {
    border-bottom: none;
  }
}

Annabel Dunstone's avatar
Annabel Dunstone committed
413 414 415 416
.files-changed {
  border-bottom: none;
}

417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449
// 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;
  }
}
450

451 452
@mixin diff_background($background, $idiff, $border) {
  background: $background;
453

454 455
  &.line_content span.idiff {
    background: $idiff;
456 457
  }

458 459
  &.diff-line-num {
    border-color: $border;
460 461
  }
}
462 463 464 465 466 467 468 469

.files {
  margin-top: -1px;

  .diff-file:last-child {
    margin-bottom: 0;
  }
}
470

471 472 473
.file-holder {
  .diff-line-num:not(.js-unfold-bottom) {
    a {
474
      &::before {
475
        content: attr(data-linenumber);
476 477 478 479
      }
    }
  }
}