/** * 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; .note-created-ago, .note-updated-at { white-space: nowrap; } .discussion-body { padding-top: 8px; .panel { margin-bottom: 0; } } .discussion { display: block; position: relative; .diff-content { overflow: visible; } } > li { // .timeline-entry padding: 0; display: block; position: relative; border-bottom: 0; @include notes-media('min', $screen-sm-min) { padding-left: $note-icon-gutter-width; } .timeline-entry-inner { padding: $gl-padding $gl-btn-padding; border-bottom: 1px solid $white-normal; } &:target, &.target { border-bottom: 1px solid $white-normal; &:not(:first-child) { border-top: 1px solid $white-normal; margin-top: -1px; } .timeline-entry-inner { border-bottom: 0; } } .timeline-icon { @include notes-media('min', $screen-sm-min) { margin-left: -$note-icon-gutter-width; } } .timeline-content { margin-left: $note-icon-gutter-width; @include notes-media('min', $screen-sm-min) { margin-left: 0; } } &.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-inner { padding: $gl-padding 10px; } } .editing-spinner { display: none; } &.is-requesting { .note-timestamp { display: none; } .editing-spinner { display: inline-block; } } &.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 { @include md-typography; // Reset ul style types since we're nested inside a ul already @include bulleted-list; word-wrap: break-word; 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; clear: both; .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; @include notes-media('min', $screen-sm-min) { margin-left: 0; width: auto; } svg { width: 16px; height: 16px; fill: $gray-darkest; margin-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: 70px; 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-info { 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; &.discussion { padding-bottom: 0; } } .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 { @include new-style-dropdown; align-self: flex-start; flex-shrink: 0; display: inline-flex; align-items: center; // 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; } } .more-actions { float: right; // phantomjs fallback display: flex; align-items: flex-end; .tooltip { white-space: nowrap; } } .more-actions-toggle { &:hover .icon, &:focus .icon { color: $blue-600; } } .more-actions-dropdown { width: 180px; min-width: 180px; } .discussion-actions { @include notes-media('max', $screen-md-max) { float: none; margin-left: 0; } } .note-actions-item { margin-left: 12px; display: flex; align-items: center; &.more-actions { // compensate for narrow icon margin-left: 10px; } } .note-action-button { line-height: 1; padding: 0; min-width: 16px; color: $gray-darkest; .fa { position: relative; font-size: 16px; } svg { height: 16px; width: 16px; top: 0; vertical-align: text-top; path { fill: currentColor; } } .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; display: inline-block; color: $notes-role-color; font-size: 12px; line-height: 20px; margin: 0 3px; &.note-role-access { padding: 0 7px; border: 1px solid $border-color; border-radius: $label-border-radius; } &.note-role-special { text-shadow: 0 0 15px $gl-text-color-inverted; } } /** * Line note button on the side of diffs */ .line_holder .is-over:not(.no-comment-btn) { .add-diff-note { opacity: 1; } } .add-diff-note { @include btn-comment-icon; opacity: 0; margin-top: -2px; margin-left: -55px; position: absolute; z-index: 10; } .discussion-body, .diff-file { .notes .note { border-bottom: 1px solid $white-normal; .timeline-entry-inner { padding-left: $gl-padding; padding-right: $gl-padding; border-bottom: none; } } } .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; &.discussion-locked { border: none; background-color: $white-light; } 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 { svg path { fill: $gray-darkest; } } .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; } } } } .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; color: $gray-darkest; transition: color $general-hover-transition-duration $general-hover-transition-curve; &.is-disabled { cursor: default; } &:not(.is-disabled) { &:hover, &:focus { color: $gl-text-green; } } &.is-active { color: $gl-text-green; &:hover, &:focus { color: $gl-text-green-hover; } } svg { fill: currentColor; height: 16px; width: 16px; } .loading { margin: 0; height: auto; } } .line-resolve-text { vertical-align: middle; } // Merge request notes in diffs .diff-file { // Diff is inline .notes_content .note-header .note-headline-light { display: inline-block; position: relative; } }