.diff-file { border: 1px solid #CCC; margin-bottom: 1em; .diff-header { @extend .clearfix; background: #EEE; border-bottom: 1px solid #CCC; padding: 5px 5px 5px 10px; color: #555; > span { font-family: $monospace_font; font-size: 14px; line-height: 2; } .diff-btn-group { float: right; .btn { background-color: #EEE; color: #666; font-weight: bolder; } } .commit-short-id { font-family: $monospace_font; font-size: smaller; } .file-mode { font-family: $monospace_font; } } .diff-content { overflow: auto; overflow-y: hidden; background: #FFF; color: #333; font-size: 12px; .old { span.idiff { background-color: #FAA; } } .new { span.idiff { background-color: #AFA; } } table { width: 100%; font-family: $monospace_font; border: none; margin: 0px; padding: 0px; td { line-height: 18px; font-size: 12px; } } tr.line_holder.parallel{ .old_line, .new_line, .diff_line { min-width: 50px; } td.line_content.parallel{ width: 50%; } } .old_line, .new_line, .diff_line { margin: 0px; padding: 0px; border: none; background: #F5F5F5; color: #666; padding: 0px 5px; border-right: 1px solid #ccc; text-align: right; min-width: 35px; max-width: 50px; width: 35px; @include user-select(none); a { float: left; width: 35px; font-weight: normal; color: #666; &:hover { text-decoration: underline; } } &.new { background: #CFD; } &.old { background: #FDD; } } .diff_line { padding: 0; } .line_holder { &.old .old_line, &.old .new_line { background: #FCC; border-color: #E7BABA; } &.new .old_line, &.new .new_line { background: #CFC; border-color: #B9ECB9; } } .line_content { display: block; white-space: pre; height: 18px; margin: 0px; padding: 0px 0.5em; border: none; &.new { background: #CFD; } &.old { background: #FDD; } &.matched { color: #ccc; background: #fafafa; } &.parallel { display: table-cell; } } } .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 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: 0px; background: image-url('swipemode_sprites.gif') 0 3px no-repeat; } .bottom-handle{ display: block; height: 14px; width: 15px; position: absolute; bottom: 0px; 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: 0px; left: 0px; } .controls{ display: block; height: 14px; width: 300px; z-index: 100; position: absolute; bottom: 0px; 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: 0px; top: 0px; height: 14px; width: 14px; background: image-url('onion_skin_sprites.gif') 0px -34px repeat-x; cursor: pointer; } .transparent { display: block; position: absolute; top: 2px; right: 0px; height: 10px; width: 10px; background: image-url('onion_skin_sprites.gif') -2px 0px no-repeat; } .opaque { display: block; position: absolute; top: 2px; left: 0px; 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; } } } }