mirror of
https://github.com/harness/drone.git
synced 2025-05-19 10:29:55 +08:00
486 lines
11 KiB
SCSS
486 lines
11 KiB
SCSS
/*
|
|
* Copyright 2023 Harness, Inc.
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
* See the License for the specific language governing permissions and
|
|
* limitations under the License.
|
|
*/
|
|
|
|
.main {
|
|
--border-color: var(--grey-200);
|
|
--line-height: 17.3438px;
|
|
|
|
// TODO: Restyle DiffView to match latest design
|
|
// https://www.figma.com/file/PgBvi804VdQNyLS8fD9K0p/Code?node-id=9391%3A118114&mode=dev
|
|
--bg-selected-line-number: #ccf8a5;
|
|
--bg-selected-line-content: #e7f8b5fc;
|
|
|
|
--bg-line-added: var(--green-100);
|
|
--bg-change-added: var(--green-300);
|
|
--bg-line-deleted: var(--red-100);
|
|
--bg-change-deleted: var(--red-200);
|
|
--bg-hunk: var(--grey-100);
|
|
--fg-hunk: var(--grey-700);
|
|
|
|
border-radius: 5px;
|
|
min-height: 36px;
|
|
|
|
:global {
|
|
.d2h-wrapper > div {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.d2h-file-wrapper {
|
|
border: 0;
|
|
|
|
.d2h-diff-tbody {
|
|
&,
|
|
tr {
|
|
position: relative;
|
|
|
|
// Use content-visibility to optimize for rendering performance
|
|
// Ref:
|
|
// - https://web.dev/articles/content-visibility
|
|
// - https://web.dev/articles/dom-size-and-interactivity
|
|
&,
|
|
.d2h-code-line-ctn > * {
|
|
content-visibility: auto;
|
|
contain-intrinsic-size: auto var(--line-height);
|
|
}
|
|
|
|
// Reduce pointer events on diff line DOM elements to avoid
|
|
// browser hit test. When the number of DOM elements is huge,
|
|
// browsers have to spend too much time on hit test causing unresponsivenss
|
|
// Ref: https://stackoverflow.com/questions/41830529/optimizing-native-hit-testing-of-dom-elements-chrome
|
|
.d2h-code-line-ctn {
|
|
width: auto;
|
|
|
|
& > * {
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
&[data-annotated-line] {
|
|
background-color: var(--white);
|
|
|
|
& + [data-annotated-line] {
|
|
[data-comment-thread-id] {
|
|
padding-top: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
tr {
|
|
&:has(.d2h-del) {
|
|
background-color: var(--bg-line-deleted);
|
|
}
|
|
|
|
&:has(.d2h-ins) {
|
|
background-color: var(--bg-line-added);
|
|
}
|
|
|
|
&:has(.d2h-emptyplaceholder) {
|
|
background-color: #f1f1f1;
|
|
}
|
|
}
|
|
|
|
.d2h-info {
|
|
background-color: var(--bg-hunk);
|
|
color: var(--fg-hunk);
|
|
line-height: 26px;
|
|
}
|
|
|
|
.d2h-code-linenumber {
|
|
width: auto;
|
|
display: flex;
|
|
padding: 0 5px;
|
|
|
|
.line-num1,
|
|
.line-num2 {
|
|
flex-basis: 100%;
|
|
width: auto;
|
|
text-overflow: initial;
|
|
overflow: visible;
|
|
display: inline-block;
|
|
padding: 0 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.d2h-code-line,
|
|
.d2h-code-side-line {
|
|
.d2h-code-line-ctn {
|
|
ins {
|
|
background-color: var(--bg-change-added);
|
|
}
|
|
|
|
del {
|
|
background-color: var(--bg-change-deleted);
|
|
}
|
|
}
|
|
}
|
|
|
|
.d2h-file-diff :is(.d2h-del.d2h-change, .d2h-ins.d2h-change) {
|
|
background-color: transparent;
|
|
}
|
|
|
|
// Line number background - kind of distracted
|
|
// td:is(.d2h-code-side-linenumber, .d2h-code-linenumber).d2h-del {
|
|
// background-color: var(--bg-change-deleted);
|
|
// }
|
|
|
|
&.line-by-line-file-diff {
|
|
.d2h-code-line {
|
|
padding: 0 4px;
|
|
}
|
|
|
|
[data-annotation-for-line] {
|
|
right: -25px;
|
|
top: 4px;
|
|
}
|
|
|
|
[data-selected-indicator] {
|
|
top: 0;
|
|
right: -8px;
|
|
}
|
|
}
|
|
|
|
&.side-by-side-file-diff {
|
|
.d2h-code-line {
|
|
padding: 0 70px;
|
|
}
|
|
|
|
.d2h-code-side-line {
|
|
padding: 0 6px;
|
|
}
|
|
|
|
.d2h-code-side-linenumber.d2h-info {
|
|
pointer-events: none;
|
|
}
|
|
|
|
[data-content-for-line-number] {
|
|
padding-left: 2px;
|
|
}
|
|
}
|
|
|
|
.d2h-code-side-linenumber,
|
|
.d2h-code-linenumber {
|
|
position: sticky;
|
|
left: 0;
|
|
z-index: 2;
|
|
overflow: visible;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.d2h-code-side-line {
|
|
position: relative;
|
|
padding: 0;
|
|
}
|
|
|
|
tr {
|
|
td:first-of-type {
|
|
z-index: 2;
|
|
}
|
|
|
|
td:last-of-type > div {
|
|
z-index: 0;
|
|
}
|
|
|
|
[data-annotation-for-line] {
|
|
height: 14px;
|
|
width: 14px;
|
|
font-weight: 600;
|
|
background: var(--primary-7);
|
|
color: var(--white);
|
|
text-align: center;
|
|
border-radius: 5px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
position: absolute;
|
|
top: -11px;
|
|
right: -26px;
|
|
display: none;
|
|
transform: scale(1.1);
|
|
transition: transform 0.75s;
|
|
}
|
|
|
|
[data-selected-indicator] {
|
|
height: 20px;
|
|
width: 4px;
|
|
background-color: var(--primary-7);
|
|
position: absolute;
|
|
top: -15px;
|
|
right: -9px;
|
|
display: none;
|
|
}
|
|
|
|
&.selected,
|
|
&:has(.selected) {
|
|
td {
|
|
&:first-of-type {
|
|
background-color: var(--bg-selected-line-number) !important;
|
|
border-color: var(--primary-7) !important;
|
|
}
|
|
|
|
&:last-of-type,
|
|
*:not(
|
|
span[data-annotation-for-line],
|
|
span[data-selected-indicator],
|
|
[data-comment-thread-id],
|
|
[data-comment-thread-id] *
|
|
) {
|
|
background-color: var(--bg-selected-line-content) !important;
|
|
}
|
|
|
|
[data-selected-indicator] {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:hover [data-annotation-for-line] {
|
|
display: flex;
|
|
|
|
&:hover {
|
|
transform: scale(1.3);
|
|
}
|
|
}
|
|
|
|
&:has([data-annotated='true'] [data-content-for-line-number]),
|
|
&:has([data-content-for-line-number='']),
|
|
&:has(.d2h-emptyplaceholder[data-content-for-line-number='']) {
|
|
&,
|
|
:hover {
|
|
[data-annotation-for-line] {
|
|
pointer-events: none;
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
[data-content-for-line-number] {
|
|
cursor: default;
|
|
width: 100%;
|
|
padding-left: 4px;
|
|
height: 17.3438px !important;
|
|
}
|
|
}
|
|
|
|
.d2h-file-header {
|
|
display: none;
|
|
}
|
|
|
|
.d2h-files-diff {
|
|
.d2h-code-side-linenumber {
|
|
border-left: 0;
|
|
}
|
|
}
|
|
|
|
.d2h-file-side-diff {
|
|
border-bottom-left-radius: 5px;
|
|
border-bottom-right-radius: 5px;
|
|
}
|
|
|
|
.d2h-code-side-linenumber {
|
|
width: 64px;
|
|
}
|
|
}
|
|
|
|
&.readOnly {
|
|
:global {
|
|
.d2h-file-wrapper {
|
|
.d2h-diff-tbody {
|
|
tr:hover [data-annotation-for-line] {
|
|
display: none !important;
|
|
}
|
|
|
|
.d2h-code-side-linenumber,
|
|
.d2h-code-linenumber {
|
|
cursor: default;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.collapsed {
|
|
.diffHeader {
|
|
border-bottom-left-radius: 5px;
|
|
border-bottom-right-radius: 5px;
|
|
}
|
|
|
|
.diffContent {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.diffHeader {
|
|
display: grid;
|
|
align-items: center;
|
|
background-color: var(--white);
|
|
position: sticky;
|
|
top: var(--diff-viewer-sticky-top, 0);
|
|
z-index: 1;
|
|
padding: 5px 10px 5px 5px;
|
|
border-top-left-radius: 4px;
|
|
border-top-right-radius: 4px;
|
|
box-shadow: 0px 2px 4px 0px rgba(96, 97, 112, 0.16), 0px 0px 1px 0px rgba(40, 41, 61, 0.04);
|
|
z-index: 4;
|
|
|
|
.fnamePopover {
|
|
display: flex;
|
|
}
|
|
|
|
.chevron {
|
|
align-self: center;
|
|
height: 24px;
|
|
width: 24px;
|
|
}
|
|
|
|
.fname {
|
|
align-self: center;
|
|
align-items: center;
|
|
text-align: left;
|
|
|
|
a {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
line-height: 20px;
|
|
text-align: center;
|
|
|
|
color: var(--grey-700);
|
|
|
|
&:hover {
|
|
color: var(--primary-7) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.expandCollapseDiffBtn {
|
|
transform: translateX(-5px);
|
|
|
|
> span {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
.addedLines {
|
|
align-self: center;
|
|
min-width: 36px;
|
|
height: 18px;
|
|
background: var(--green-50);
|
|
border-radius: 2px;
|
|
padding: 0px 8px 0px 8px;
|
|
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
line-height: 18px;
|
|
text-align: center;
|
|
color: var(--green-800);
|
|
}
|
|
|
|
.deletedLines {
|
|
align-self: center;
|
|
min-width: 36px;
|
|
height: 18px;
|
|
background: var(--red-50);
|
|
border-radius: 2px;
|
|
padding: 0px 8px 0px 8px;
|
|
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
line-height: 18px;
|
|
text-align: center;
|
|
color: var(--red-800);
|
|
}
|
|
|
|
.fileChanged {
|
|
align-self: center;
|
|
height: 28px;
|
|
width: 184px;
|
|
background: var(--orange-50);
|
|
border-radius: 4px;
|
|
|
|
margin-top: 2px;
|
|
margin-right: 8px;
|
|
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
line-height: 28px;
|
|
text-align: center;
|
|
color: var(--orange-500);
|
|
}
|
|
|
|
.viewLabel {
|
|
display: flex;
|
|
background: var(--grey-100);
|
|
height: 28px;
|
|
padding: 0 8px;
|
|
align-items: center;
|
|
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
line-height: 28px;
|
|
border-radius: 4px;
|
|
text-align: center;
|
|
color: var(--black);
|
|
|
|
margin-top: 2px;
|
|
|
|
// avoid text being selected when user presses button twice
|
|
user-select: none;
|
|
cursor: pointer;
|
|
|
|
input {
|
|
display: inline-block;
|
|
margin-right: var(--spacing-small);
|
|
}
|
|
}
|
|
}
|
|
|
|
.diffContent {
|
|
box-shadow: 0px 2px 4px 0px rgba(96, 97, 112, 0.16), 0px 0px 1px 0px rgba(40, 41, 61, 0.04);
|
|
z-index: 3;
|
|
|
|
border-bottom-left-radius: 4px;
|
|
border-bottom-right-radius: 4px;
|
|
max-width: calc(var(--page-container-width) - 48px);
|
|
|
|
&.hidden {
|
|
height: var(--block-height);
|
|
content-visibility: auto;
|
|
contain-intrinsic-size: auto var(--line-height);
|
|
|
|
* {
|
|
display: none !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.popover {
|
|
:global {
|
|
.bp3-popover-content {
|
|
padding: var(--spacing-medium);
|
|
max-width: 700px;
|
|
word-break: break-all;
|
|
}
|
|
}
|
|
}
|
|
|
|
.selectoSelection {
|
|
display: none !important;
|
|
}
|