/** * Notes */ @-webkit-keyframes targe3-note { from { background: $note-targe3-outside; } 50% { background: $note-targe3-inside; } to { background: $note-targe3-outside; } } ul.notes { display: block; list-style: none; margin: 0; padding: 0; .timeline-icon { float: left; } .timeline-content { margin-left: 55px; &.timeline-content-form { @media (max-width: $screen-sm-max) { margin-left: 0; } } } .note-created-ago, .note-updated-at { white-space: nowrap; } .system-note { font-size: 14px; padding: 0; clear: both; &.timeline-entry::after { clear: none; } .system-note-message { display: inline; &::first-letter { text-transform: lowercase; } a { color: $gl-link-color; text-decoration: none; } p { display: inline; margin: 0; &::first-letter { text-transform: lowercase; } } } .timeline-content { padding: 14px 10px; } .note-body { overflow: hidden; .system-note-commit-list-toggler { color: $gl-link-color; display: none; padding: 10px 0 0; cursor: pointer; position: relative; z-index: 2; &:hover { color: $gl-link-color; text-decoration: underline; } } .note-text { & p:first-child { display: none; } &.system-note-commit-list { max-height: 70px; overflow: hidden; display: block; ul { margin: 3px 0 3px 16px !important; .gfm-commit { font-family: $monospace_font; font-size: 12px; } } p:first-child { display: none; } &::after { content: ''; width: 100%; height: 67px; position: absolute; left: 0; bottom: 0; background: linear-gradient(rgba($white-light, 0.1) -100px, $white-light 100%); } &.hide-shade { max-height: 100%; overflow: auto; &::after { display: none; background: transparent; } } } } } .timeline-icon { display: none; .avatar { visibility: hidden; .discussion-body & { visibility: visible; } } } } .discussion-body { padding-top: 15px; } .discussion { overflow: hidden; display: block; position: relative; } .note { display: block; position: relative; border-bottom: 1px solid $white-normal; &.note-discussion { &.timeline-entry { padding: 14px 10px; } .system-note { padding: 0; } } &.is-editting { .note-header, .note-text, .edited-text { display: none; } .note-edit-form { display: block; &.current-note-edit-form + .note-awards { display: none; } } } .note-body { overflow-x: auto; overflow-y: hidden; .note-text { word-wrap: break-word; @include md-typography; // Reset ul style types since we're nested inside a ul already @include bulleted-list; ul.task-list { ul:not(.task-list) { padding-left: 1.3em; } } } } .note-awards { .js-awards-block { padding: 2px; margin-top: 10px; } } .note-header { padding-bottom: 3px; padding-right: 20px; @media (min-width: $screen-sm-min) { padding-right: 0; } @media (max-width: $screen-xs-min) { .inline { display: block; } } } .note-emoji-button { .fa-spinner { display: none; } &.is-loading { .fa-smile-o { display: none; } .fa-spinner { display: inline-block; } } } } } .page-sidebar-pinned.right-sidebar-expanded { @media (max-width: $screen-md-max) { .note-header { .note-headline-light { display: block; } .note-actions { position: absolute; right: 0; top: 0; } } } } // Diff code in discussion view .discussion-body .diff-file { .file-title { cursor: default; &:hover { background-color: $gray-light; } } .diff-header > span { margin-right: 10px; } .line_content { white-space: pre-wrap; } } .diff-file .notes_holder { font-family: $regular_font; td { border: 1px solid $white-normal; border-left: none; &.notes_line { vertical-align: middle; text-align: center; padding: 10px 0; background: $gray-light; color: $text-color; } &.notes_line2 { text-align: center; padding: 10px 0; border-left: 1px solid $note-line2-border !important; } &.notes_content { background-color: $gray-light; border-width: 1px 0; padding: 0; vertical-align: top; white-space: normal; &.parallel { border-width: 1px; } .notes { background-color: $white-light; } a code { top: 0; margin-right: 0; } } } } .discussion-header, .note-header { position: relative; a { color: inherit; &:hover { color: $gl-link-color; text-decoration: none; } } .author_link { color: $gl-text-color; } } .discussion-header { font-size: 14px; } .note-headline-light { display: inline; @media (max-width: $screen-xs-min) { display: block; } } .note-headline-light, .discussion-headline-light { color: $notes-light-color; } .discussion-headline-light { a { color: $gl-link-color; } } /** * Actions for Discussions/Notes */ .discussion-actions, .note-actions { float: right; margin-left: 10px; color: $gray-darkest; } .note-actions { position: absolute; right: 0; top: 0; .note-action-button { margin-left: 10px; } } .discussion-actions { @media (max-width: $screen-md-max) { float: none; margin-left: 0; .note-action-button { margin-left: 0; } } } .note-action-button { display: inline-block; margin-left: 0; line-height: 20px; @media (min-width: $screen-sm-min) { margin-left: 10px; line-height: 24px; } .fa { color: $gray-darkest; position: relative; font-size: 17px; } &:hover { .danger-highlight { color: $gl-text-red; } .link-highlight { color: $gl-link-color; } } } .discussion-toggle-button { line-height: 20px; font-size: 13px; .fa { margin-right: 3px; font-size: 10px; line-height: 18px; vertical-align: top; } } .note-role { position: relative; top: -2px; display: inline-block; padding-left: 4px; padding-right: 4px; color: $notes-role-color; font-size: 12px; line-height: 20px; border: 1px solid $border-color; border-radius: $border-radius-base; } /** * Line note button on the side of diffs */ .diff-file tr.line_holder { @mixin show-add-diff-note { display: inline-block; } .add-diff-note { margin-top: -8px; border-radius: 40px; background: $white-light; padding: 4px; font-size: 16px; color: $gl-link-color; margin-left: -56px; position: absolute; z-index: 10; width: 32px; // "hide" it by default display: none; &:hover { background: $gl-info; color: $white-light; @include show-add-diff-note; } } // "show" the icon also if we just hover somewhere over the line &:hover > td { .add-diff-note { @include show-add-diff-note; } } } .disabled-comment { margin-left: -$gl-padding-top; margin-right: -$gl-padding-top; background-color: $gray-light; border-radius: $border-radius-base; border: 1px solid $border-gray-normal; color: $note-disabled-comment-color; line-height: 200px; .disabled-comment-text { line-height: normal; } a { color: $gl-link-color; } } .line-resolve-all-container { .btn-group { margin-left: -4px; } .discussion-next-btn { border-top-left-radius: 0; border-bottom-left-radius: 0; } } .line-resolve-all { vertical-align: middle; display: inline-block; padding: 6px 10px; background-color: $gray-light; border: 1px solid $border-color; border-radius: $border-radius-default; &.has-next-btn { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0; } .line-resolve-btn { margin-right: 5px; } } .line-resolve-btn { display: inline-block; position: relative; top: 2px; padding: 0; background-color: transparent; border: none; outline: 0; &.is-disabled { cursor: default; } &:not(.is-disabled):hover, &:not(.is-disabled):focus, &.is-active { color: $gl-text-green; svg { fill: $gl-text-green; } } svg { position: relative; fill: $gray-darkest; } } .discussion-next-btn { svg { margin: 0; path { fill: $gray-darkest; } } } // Merge request notes in diffs .diff-file { // Diff is side by side .notes_content.parallel .note-header .note-headline-light { display: block; position: relative; } // Diff is inline .notes_content .note-header .note-headline-light { display: inline-block; position: relative; } }