diff options
-rw-r--r-- | app/assets/stylesheets/application.scss | 1 | ||||
-rw-r--r-- | app/assets/stylesheets/sections/commits.scss | 330 | ||||
-rw-r--r-- | app/assets/stylesheets/sections/diff.scss | 329 |
3 files changed, 330 insertions, 330 deletions
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 835d18facb6..7fdbd5907b0 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -48,6 +48,7 @@ @import "sections/header.scss"; @import "sections/nav.scss"; @import "sections/commits.scss"; +@import "sections/diff.scss"; @import "sections/issues.scss"; @import "sections/projects.scss"; @import "sections/snippets.scss"; diff --git a/app/assets/stylesheets/sections/commits.scss b/app/assets/stylesheets/sections/commits.scss index f3b2e52c58a..78c268f60ea 100644 --- a/app/assets/stylesheets/sections/commits.scss +++ b/app/assets/stylesheets/sections/commits.scss @@ -10,336 +10,6 @@ } } -.diff-file { - border: 1px solid #CCC; - margin-bottom: 1em; - - .diff-header { - @extend .clearfix; - background: #DDD; - 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; - } - } - .old_line, .new_line, .diff_line { - margin: 0px; - padding: 0px; - border: none; - background: #EEE; - 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; - overflow: hidden; - width: 50%; - } - } - } - .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: 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: url('swipemode_sprites.gif') 0 3px no-repeat; - } - .bottom-handle{ - display: block; - height: 14px; - width: 15px; - position: absolute; - bottom: 0px; - background: 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: url('onion_skin_sprites.gif') -4px -20px repeat-x; - } - - .dragger { - display: block; - position: absolute; - left: 0px; - top: 0px; - height: 14px; - width: 14px; - background: 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: url('onion_skin_sprites.gif') -2px 0px no-repeat; - } - - .opaque { - display: block; - position: absolute; - top: 2px; - left: 0px; - height: 10px; - width: 10px; - background: url('onion_skin_sprites.gif') -2px -10px no-repeat; - } - } - } //.view.onion-skin - } - .view-modes{ - - padding: 10px; - text-align: center; - - background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #eee), to(#dfdfdf)); - background-image: -webkit-linear-gradient(#eee 6.6%, #dfdfdf); - background-image: -moz-linear-gradient(#eee 6.6%, #dfdfdf); - background-image: -ms-linear-gradient(#eee 6.6%, #dfdfdf); - background-image: -o-linear-gradient(#eee 6.6%, #dfdfdf); - - 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; - } - } - } -} - /** COMMIT BLOCK **/ .commit-title{ display: block; diff --git a/app/assets/stylesheets/sections/diff.scss b/app/assets/stylesheets/sections/diff.scss new file mode 100644 index 00000000000..74d144dfb06 --- /dev/null +++ b/app/assets/stylesheets/sections/diff.scss @@ -0,0 +1,329 @@ +.diff-file { + border: 1px solid #CCC; + margin-bottom: 1em; + + .diff-header { + @extend .clearfix; + background: #DDD; + 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; + } + } + .old_line, .new_line, .diff_line { + margin: 0px; + padding: 0px; + border: none; + background: #EEE; + 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; + overflow: hidden; + width: 50%; + } + } + } + .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: 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: url('swipemode_sprites.gif') 0 3px no-repeat; + } + .bottom-handle{ + display: block; + height: 14px; + width: 15px; + position: absolute; + bottom: 0px; + background: 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: url('onion_skin_sprites.gif') -4px -20px repeat-x; + } + + .dragger { + display: block; + position: absolute; + left: 0px; + top: 0px; + height: 14px; + width: 14px; + background: 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: url('onion_skin_sprites.gif') -2px 0px no-repeat; + } + + .opaque { + display: block; + position: absolute; + top: 2px; + left: 0px; + height: 10px; + width: 10px; + background: url('onion_skin_sprites.gif') -2px -10px no-repeat; + } + } + } //.view.onion-skin + } + .view-modes{ + + padding: 10px; + text-align: center; + + background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #eee), to(#dfdfdf)); + background-image: -webkit-linear-gradient(#eee 6.6%, #dfdfdf); + background-image: -moz-linear-gradient(#eee 6.6%, #dfdfdf); + background-image: -ms-linear-gradient(#eee 6.6%, #dfdfdf); + background-image: -o-linear-gradient(#eee 6.6%, #dfdfdf); + + 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; + } + } + } +} |