// Common .diff-file { border: 1px solid $border-color; margin-bottom: $gl-padding; border-radius: 3px; .diff-header { position: relative; background: $background-color; border-bottom: 1px solid $border-color; padding: 10px 16px; color: #555; z-index: 10; border-radius: 3px 3px 0 0; .diff-title { font-family: $monospace_font; word-break: break-all; display: block; .file-mode { color: #777; } } .commit-short-id { font-family: $monospace_font; font-size: smaller; } } .diff-content { overflow: auto; overflow-y: hidden; background: #fff; color: #333; border-radius: 0 0 3px 3px; -webkit-overflow-scrolling: auto; .unfold { cursor: pointer; } .file-mode-changed { padding: 10px; color: #777; } .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; } } table { width: 100%; font-family: $monospace_font; border: none; border-collapse: separate; margin: 0; padding: 0; .line_holder td { line-height: $code_line_height; font-size: $code_font_size; &.noteable_line { position: relative; &.old { &:before { content: '-'; position: absolute; } } &.new { &:before { content: '+'; position: absolute; } } } span { white-space: pre-wrap; } } } tr.line_holder.parallel { .old_line, .new_line { min-width: 50px; } td.line_content.parallel { width: 46%; } .add-diff-note { margin-left: -65px; } } .old_line, .new_line { margin: 0; padding: 0; border: none; padding: 0 5px; border-right: 1px solid; text-align: right; min-width: 35px; max-width: 50px; width: 35px; @include user-select(none); a { float: left; width: 35px; font-weight: normal; &:hover { text-decoration: underline; } } } .line_content { display: block; margin: 0; padding: 0 0.5em; border: none; &.parallel { display: table-cell; span { word-break: break-all; } } } .text-file.diff-wrap-lines table .line_holder td span { white-space: pre-wrap; } } .image { background: #ddd; text-align: center; padding: 30px; .wrap { display: inline-block; } .frame { display: inline-block; background-color: #fff; line-height: 0; img { border: 1px solid #fff; background: image-url('trans_bg.gif'); max-width: 100%; } &.deleted { border: 1px solid $deleted; } &.added { border: 1px solid $added; } } .image-info { font-size: 12px; margin: 5px 0 0; color: grey; } .view.swipe { position: relative; .swipe-frame { display: block; margin: auto; position: relative; } .swipe-wrap { overflow: hidden; border-left: 1px solid #999; position: absolute; display: block; top: 13px; right: 7px; } .frame { top: 0; right: 0; position: absolute; &.deleted { margin: 0; display: block; top: 13px; right: 7px; } } .swipe-bar { display: block; height: 100%; width: 15px; z-index: 100; position: absolute; cursor: pointer; &:hover { .top-handle { background-position: -15px 3px; } .bottom-handle { background-position: -15px -11px; } } .top-handle { display: block; height: 14px; width: 15px; position: absolute; top: 0; background: image-url('swipemode_sprites.gif') 0 3px no-repeat; } .bottom-handle { display: block; height: 14px; width: 15px; position: absolute; bottom: 0; background: image-url('swipemode_sprites.gif') 0 -11px no-repeat; } } } //.view.swipe .view.onion-skin { .onion-skin-frame { display: block; margin: auto; position: relative; } .frame.added, .frame.deleted { position: absolute; display: block; top: 0; left: 0; } .controls { display: block; height: 14px; width: 300px; z-index: 100; position: absolute; bottom: 0; left: 50%; margin-left: -150px; .drag-track { display: block; position: absolute; left: 12px; height: 10px; width: 276px; background: image-url('onion_skin_sprites.gif') -4px -20px repeat-x; } .dragger { display: block; position: absolute; left: 0; top: 0; height: 14px; width: 14px; background: image-url('onion_skin_sprites.gif') 0 -34px repeat-x; cursor: pointer; } .transparent { display: block; position: absolute; top: 2px; right: 0; height: 10px; width: 10px; background: image-url('onion_skin_sprites.gif') -2px 0 no-repeat; } .opaque { display: block; position: absolute; top: 2px; left: 0; height: 10px; width: 10px; background: image-url('onion_skin_sprites.gif') -2px -10px no-repeat; } } } //.view.onion-skin } .view-modes { padding: 10px; text-align: center; background: #eee; ul, li { list-style: none; margin: 0; padding: 0; display: inline-block; } li { color: grey; border-left: 1px solid #c1c1c1; padding: 0 12px 0 16px; cursor: pointer; &:first-child { border-left: none; } &:hover { text-decoration: underline; } &.active { &:hover { text-decoration: none; } cursor: default; color: #333; } &.disabled { display: none; } } } } .file-content .diff-file { margin: 0; border: none; } .diff-file .line_content { white-space: pre-wrap; } .diff-wrap-lines .line_content { white-space: pre-wrap; } .inline-parallel-buttons { float: right; } .diffs { .content-block { border-bottom: none; } } .files-changed { border-bottom: none; } // 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; } } @mixin diff_background($background, $idiff, $border) { background: $background; &.line_content span.idiff { background: $idiff; } &.diff-line-num { border-color: $border; } } .files { margin-top: -1px; .diff-file:last-child { margin-bottom: 0; } } .file-holder { .diff-line-num:not(.js-unfold-bottom) { a { &:before { content: attr(data-linenumber); } } } } .discussion { .diff-content { .diff-line-num { &:before { content: attr(data-linenumber); } } } }