/** * Notes */ ul.notes { display: block; list-style: none; margin: 0px; padding: 0px; .discussion-header, .note-header { @extend .cgray; padding-top: 5px; padding-bottom: 15px; .avatar { float: left; margin-right: 10px; } .discussion-last-update, .note-last-update { font-style: italic; } .author { color: $style_color; font-weight: bold; &:hover { color: $primary_color; } } } .discussion { padding: 8px 0; overflow: hidden; display: block; position:relative; .discussion-body { margin-left: 50px; .file, .discussion-hidden, .notes { @extend .borders; background-color: #F9F9F9; } .file .notes { /* reset */ background: inherit; border: none; @include box-shadow(none); } .discussion-hidden .note { @extend .cgray; padding: 8px; text-align: center; } .notes .note { border-color: #ddd; padding: 8px; } .reply-btn { margin-top: 8px; } } } .note { padding: 8px 0; overflow: hidden; display: block; position:relative; p { color: $style_color; } .avatar { margin-top: 3px; } .attachment { font-size: 14px; margin-top: -20px; } .note-body { @include md-typography; margin-left: 45px; } .note-header { padding-bottom: 5px; } } // paint top or bottom borders depending on notes direction &:not(.reversed) .note, &:not(.reversed) .discussion { border-bottom: 1px solid #eee; } &.reversed .note, &.reversed .discussion { border-top: 1px solid #eee; } } .file .notes_holder { font-family: $sansFontFamily; font-size: 13px; line-height: 18px; td { border: 1px solid #ddd; border-left: none; &.notes_line { text-align: center; padding: 10px 0; } &.notes_content { background-color: $white; border-width: 1px 0; padding-top: 0; } } .reply-btn { margin-top: 8px; } } /** * Actions for Discussions/Notes */ .discussion, .note { &.note:hover { .note-actions { display: block; } } .discussion-header:hover { .discussion-actions { display: block; } } .discussion-actions, .note-actions { display: none; float: right; [class^="icon-"], [class*="icon-"] { font-size: 16px; line-height: 16px; vertical-align: middle; } a { @extend .cgray; &:hover { color: $primary_color; &.danger { @extend .cred; } } } } } .file .note .note-actions { right: 0; top: 0; } /** * Line note button on the side of diffs */ .file tr.line_holder { .add-diff-note { background: url("diff_note_add.png") no-repeat left 0; height: 22px; margin-left: -65px; position: absolute; width: 22px; z-index: 10; // "hide" it by default opacity: 0.0; filter: alpha(opacity=0); &:hover { opacity: 1.0; filter: alpha(opacity=100); } } // "show" the icon also if we just hover somewhere over the line &:hover > td { background: $hover !important; .add-diff-note { opacity: 1.0; filter: alpha(opacity=100); } } } /** * Note Form */ .comment-btn { @extend .btn-create; } .reply-btn { @extend .btn-primary; } .file .content tr.line_holder:hover { &> td.line_content { background: $hover !important; border-color: darken($hover, 10%) !important; } &> td.new_line, &> td.old_line { background: darken($hover, 4%) !important; border-color: darken($hover, 10%) !important; } } .file .content tr.line_holder:hover > td .line_note_link { opacity: 1.0; filter: alpha(opacity=100); } .file, .discussion { .new_note { margin: 8px 5px 8px 0; } } .new_note { display: none; .buttons { float: left; margin-top: 8px; } .clearfix { margin-bottom: 0; } .note_text_and_preview { // makes the "absolute" position for links relative to this position: relative; // preview/edit buttons > a { font-size: 24px; padding: 4px; position: absolute; right: 10px; } .note_preview { background: #f5f5f5; border: 1px solid #ddd; @include border-radius(4px); min-height: 80px; padding: 4px 6px; } .note_text { border: 1px solid #DDD; box-shadow: none; font-size: 14px; height: 80px; width: 98.6%; } } } /* loading indicator */ .notes-busy { margin: 18px; } .note-image-attach { @extend .span4; @extend .thumbnail; margin-left: 45px; } .common-note-form { margin: 0; height: 140px; background: #F9F9F9; padding: 3px; padding-bottom: 25px; border: 1px solid #DDD; } .note-form-actions { background: #F9F9F9; height: 45px; padding: 0 5px; .note-form-option { margin-top: 10px; margin-left: 30px; @extend .pull-left; } .js-notify-commit-author { float: left; } }