/** * 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-content { margin-left: 55px; &.timeline-content-form { @include notes-media('max', $screen-sm-max) { margin-left: 0; } } } .note-created-ago, .note-updated-at { white-space: nowrap; } .discussion-body { padding-top: 8px; .panel { margin-bottom: 0; } } .discussion { overflow: hidden; display: block; position: relative; } > li { padding: $gl-padding $gl-btn-padding; display: block; position: relative; border-bottom: 1px solid $white-normal; &:last-child { // Override `.timeline > li:last-child { border-bottom: none; }` border-bottom: 1px solid $white-normal; } &.being-posted { pointer-events: none; opacity: 0.5; .dummy-avatar { background-color: $kdb-border; border: 1px solid darken($kdb-border, 25%); } .note-headline-light, .fa-spinner { margin-left: 3px; } } &.note-discussion { &.timeline-entry { padding: $gl-padding 10px; } } &.is-editing { .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; } } table { @include markdown-table; } } } .note-awards { .js-awards-block { margin-top: 16px; } } .note-header { @include notes-media('max', $screen-xs-min) { .inline { display: block; } } } .note-emoji-button { position: relative; line-height: 1; .fa-spinner { display: none; } &.is-loading { .fa-smile-o { display: none; } .fa-spinner { display: inline-block; } } } } .system-note { font-size: 14px; padding-left: 0; clear: both; @include notes-media('min', $screen-sm-min) { margin-left: 65px; } .note-header-info { padding-bottom: 0; } &.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-icon { float: left; svg { width: 16px; height: 16px; fill: $gray-darkest; position: absolute; left: 0; top: 2px; } } .timeline-content { @include notes-media('min', $screen-sm-min) { margin-left: 30px; } } .note-header { padding-bottom: 0; } .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; } 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; } } } } } } } // Diff code in discussion view .discussion-body .diff-file { .file-title { cursor: default; &:hover { background-color: $gray-light; } } .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; } .discussion-notes { &:not(:first-child) { border-top: 1px solid $white-normal; margin-top: 20px; } &:not(:last-child) { border-bottom: 1px solid $white-normal; margin-bottom: 20px; } } .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; } &:focus, &:hover { text-decoration: none; } } .author_link { color: $gl-text-color; } } .discussion-header { font-size: 14px; } .note-header { display: flex; justify-content: space-between; @include notes-media('max', $screen-xs-max) { flex-flow: row wrap; } } .note-header-info { min-width: 0; padding-bottom: 8px; } .system-note .note-header-info { padding-bottom: 0; } .note-header-author-name { @include notes-media('max', $screen-xs-max) { display: none; } } .note-headline-light { display: inline; @include notes-media('max', $screen-xs-min) { display: block; } } .note-headline-light, .discussion-headline-light { color: $notes-light-color; } .discussion-headline-light { a { color: $gl-link-color; } } .note-headline-meta { display: inline-block; white-space: nowrap; .system-note-message { white-space: normal; } } /** * Actions for Discussions/Notes */ .discussion-actions { float: right; margin-left: 10px; color: $gray-darkest; } .note-actions { flex-shrink: 0; // For PhantomJS that does not support flex float: right; margin-left: 10px; color: $gray-darkest; @include notes-media('max', $screen-xs-max) { float: none; margin-left: 0; } .note-action-button { margin-left: 8px; } } .discussion-actions { @include notes-media('max', $screen-md-max) { float: none; margin-left: 0; .note-action-button { margin-left: 0; } } } .note-action-button { display: inline; line-height: 20px; @include notes-media('min', $screen-sm-min) { margin-left: 10px; line-height: 24px; } .fa { color: $gray-darkest; position: relative; font-size: 17px; } svg { height: 16px; width: 16px; fill: $gray-darkest; vertical-align: text-top; } .award-control-icon-positive, .award-control-icon-super-positive { position: absolute; top: 0; left: 0; opacity: 0; } &:hover, &.is-active { .danger-highlight { color: $gl-text-red; } .link-highlight { color: $gl-link-color; svg { fill: $gl-link-color; } } .award-control-icon-neutral { opacity: 0; } .award-control-icon-positive { opacity: 1; } } &.is-active { .award-control-icon-positive { opacity: 0; } .award-control-icon-super-positive { opacity: 1; } } } .discussion-toggle-button { padding: 0; background-color: transparent; border: 0; line-height: 20px; font-size: 13px; transition: color 0.1s linear; &:hover { color: $gl-link-color; } &:focus { text-decoration: underline; outline: none; color: $gl-link-color; } .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 */ .add-diff-note { display: none; margin-top: -2px; border-radius: 50%; background: $white-light; padding: 1px 5px; font-size: 12px; color: $blue-500; margin-left: -55px; position: absolute; z-index: 10; width: 23px; height: 23px; border: 1px solid $blue-500; transition: transform .1s ease-in-out; &:hover { background: $blue-500; border-color: $blue-600; color: $white-light; transform: scale(1.15); } &:active { outline: 0; } } .discussion-body, .diff-file { .notes .note { padding-left: $gl-padding; padding-right: $gl-padding; &.system-note { padding-left: 0; @media (min-width: $screen-sm-min) { margin-left: 70px; } } } } .diff-file { .is-over { .add-diff-note { display: inline-block; } } } .disabled-comment { background-color: $gray-light; border-radius: $border-radius-base; border: 1px solid $border-gray-normal; color: $note-disabled-comment-color; padding: 90px 0; a { color: $gl-link-color; } } .line-resolve-all-container { @include notes-media('min', $screen-sm-min) { margin-right: 0; padding-left: $gl-padding; } > div { white-space: nowrap; } .btn-group { margin-left: -4px; } .discussion-next-btn { border-top-left-radius: 0; border-bottom-left-radius: 0; } .btn.discussion-create-issue-btn { margin-left: -4px; border-radius: 0; border-right: 0; a { padding: 0; line-height: 0; &:hover { text-decoration: none; border: 0; } } .new-issue-for-discussion path { fill: $gray-darkest; } } } .line-resolve-all { vertical-align: middle; display: inline-block; padding: 5px 10px 6px; 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; svg { vertical-align: middle; } } } .line-resolve-btn { position: relative; top: 0; padding: 0; background-color: transparent; border: none; outline: 0; &.is-disabled { cursor: default; } &:not(.is-disabled):hover, &.is-active { color: $gl-text-green; svg { fill: $gl-text-green; } } svg { fill: $gray-darkest; height: 16px; width: 16px; } .loading { margin: 0; height: auto; } } .line-resolve-text { vertical-align: middle; } .discussion-next-btn { svg { margin: 0; path { fill: $gray-darkest; } } } .discussion-notes .flash-container { margin-bottom: 0; } // Merge request notes in diffs .diff-file { // Diff is inline .notes_content .note-header .note-headline-light { display: inline-block; position: relative; } }