mirror of
https://github.com/wahyd4/gitlabhq.git
synced 2026-08-15 07:36:41 +10:00
Move diff css to separate file
Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>
This commit is contained in:
Dmitriy Zaporozhets
@@ -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";
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user