summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--app/assets/stylesheets/application.scss1
-rw-r--r--app/assets/stylesheets/sections/commits.scss330
-rw-r--r--app/assets/stylesheets/sections/diff.scss329
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;
+ }
+ }
+ }
+}