diff options
Diffstat (limited to 'app/assets/stylesheets/pages/diff.scss')
| -rw-r--r-- | app/assets/stylesheets/pages/diff.scss | 351 |
1 files changed, 351 insertions, 0 deletions
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss new file mode 100644 index 00000000000..54311a68852 --- /dev/null +++ b/app/assets/stylesheets/pages/diff.scss @@ -0,0 +1,351 @@ +.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; + z-index: 10; + + > span { + font-family: $monospace_font; + line-height: 2; + } + + .diff-btn-group { + float: right; + + .btn { + background-color: #FFF; + } + } + + .commit-short-id { + font-family: $monospace_font; + font-size: smaller; + } + + .file-mode { + font-family: $monospace_font; + margin-left: 10px; + } + } + .diff-content { + overflow: auto; + overflow-y: hidden; + background: #FFF; + color: #333; + font-size: $code_font_size; + .old { + span.idiff { + background-color: #f8cbcb; + } + } + .new { + span.idiff { + background-color: #a6f3a6; + } + } + .unfold { + cursor: pointer; + } + + .file-mode-changed { + padding: 10px; + color: #777; + } + + table { + width: 100%; + font-family: $monospace_font; + border: none; + margin: 0px; + padding: 0px; + td { + line-height: $code_line_height; + font-size: $code_font_size; + } + } + + 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: rgba(0,0,0,0.3); + 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: rgba(0,0,0,0.3); + &:hover { + text-decoration: underline; + } + } + &.new { + background: #CFD; + } + &.old { + background: #FDD; + } + } + .diff_line { + padding: 0; + } + .line_holder { + &.old .old_line, + &.old .new_line { + background: #ffdddd; + border-color: #f1c0c0; + } + &.new .old_line, + &.new .new_line { + background: #dbffdb; + border-color: #c1e9c1; + } + } + .line_content { + display: block; + margin: 0px; + padding: 0px 0.5em; + border: none; + &.new { + background: #eaffea; + } + &.old { + background: #ffecec; + } + &.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; + } + } + } +} + +.file-content .diff-file { + margin: 0; + border: none; +} + +.diff-file .line_content { + white-space: pre; +} + +.diff-wrap-lines .line_content { + white-space: pre-wrap; +} + |