forgejo/web_src/css/review.css

298 lines
6.2 KiB
CSS
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

.show-outdated,
.hide-outdated {
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
}
.ui.button.add-code-comment {
padding: 2px;
position: absolute;
margin-left: -22px;
z-index: 5;
opacity: 0;
transition: transform 0.1s ease-in-out;
transform: scale(1);
box-shadow: none !important;
border: none !important;
}
.ui.button.add-code-comment:hover {
transform: scale(1.1);
}
.lines-escape .toggle-escape-button::before {
visibility: visible;
content: "";
font-family: var(--fonts-emoji);
color: var(--color-red);
}
.repository .diff-file-box .code-diff td.lines-escape {
padding-left: 0 !important;
}
.diff-file-box .lines-code:hover .ui.button.add-code-comment {
opacity: 1;
}
.ui.button.add-code-comment:focus {
opacity: 1;
}
.repository .diff-file-box .code-diff .add-comment-left,
.repository .diff-file-box .code-diff .add-comment-right,
.repository .diff-file-box .code-diff .add-code-comment .add-comment-left,
.repository .diff-file-box .code-diff .add-code-comment .add-comment-right,
.repository .diff-file-box .code-diff .add-code-comment .lines-type-marker {
padding-left: 0 !important;
padding-right: 0 !important;
}
.add-comment-left.add-comment-right .ui.attached.header {
border: 1px solid var(--color-secondary);
}
.add-comment-left.add-comment-right .ui.attached.header:not(.top) {
margin-bottom: 0.5em;
}
.show-outdated:hover,
.hide-outdated:hover {
text-decoration: underline;
}
.comment-code-cloud {
padding: 0.5rem 1rem !important;
position: relative;
}
.code-diff .conversation-holder .comment-code-cloud {
max-width: 820px;
}
@media (max-width: 767.98px) {
.comment-code-cloud {
max-width: none;
padding: 0.75rem !important;
}
.comment-code-cloud .code-comment-buttons {
margin: 0.5rem 0 0.25rem !important;
}
.comment-code-cloud .code-comment-buttons .code-comment-buttons-buttons {
width: 100%;
}
.comment-code-cloud .ui.buttons {
width: 100%;
margin: 0 !important;
}
.comment-code-cloud .ui.buttons .button {
flex: 1;
}
}
.comment-code-cloud .comments .comment {
padding: 0;
}
@media (max-width: 767.98px) {
.comment-code-cloud .comments .comment .comment-header-right.actions .ui.basic.label {
display: none;
}
.comment-code-cloud .comments .comment .avatar {
width: auto;
float: none;
margin: 0 0.5rem 0 0;
flex-shrink: 0;
}
.comment-code-cloud .comments .comment .avatar ~ .content {
margin-left: 1em;
}
.comment-code-cloud .comments .comment img.avatar {
margin: 0 !important;
}
.comment-code-cloud .comments .comment .comment-content {
margin-left: 0 !important;
}
.comment-code-cloud .comments .comment .comment-container {
width: 100%;
}
.comment-code-cloud .comments .comment.code-comment {
padding: 0 0 0.5rem !important;
}
}
.comment-code-cloud .attached.tab {
border: 0;
padding: 0;
margin: 0;
}
.comment-code-cloud .attached.header {
padding: 1px 8px 1px 12px;
}
.comment-code-cloud .attached.header .text {
margin: 0;
}
.comment-code-cloud .right.menu.options .item {
padding: 0.85714286em 0.442857em;
cursor: pointer;
}
.comment-code-cloud .ui.active.tab {
padding: 0.5em;
}
.comment-code-cloud .ui.active.tab.markup {
padding: 1em;
min-height: 168px;
}
.comment-code-cloud .ui.tab.markup {
font-size: 14px;
}
.comment-code-cloud .ui.tabular.menu {
margin: 0.5em;
}
.comment-code-cloud .editor-statusbar {
display: none;
}
.comment-code-cloud .footer {
padding: 10px 0;
}
.comment-code-cloud .footer .markup-info {
display: inline-block;
margin: 5px 0;
font-size: 12px;
color: var(--color-text-light);
}
.comment-code-cloud .footer .ui.right.floated {
padding-top: 6px;
}
.comment-code-cloud .footer::after {
clear: both;
content: "";
display: block;
}
@media (max-width: 767.98px) {
.comment-code-cloud .button {
width: 100%;
margin: 0 !important;
margin-bottom: 0.75rem !important;
}
}
.diff-file-body .comment-form {
margin: 0 0 0 3em;
}
.diff-file-body.binary {
padding: 5px 10px;
}
.file-comment {
color: var(--color-text);
}
.code-expander-button {
border: none;
color: var(--color-text-light);
height: 28px;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
background: var(--color-expand-button);
flex: 1;
}
.code-expander-button:hover {
background: var(--color-primary);
color: var(--color-primary-contrast);
}
.review-box-panel .ui.segment {
border: none;
}
/* See the comment of createCommentEasyMDE() for the review editor */
/* EasyMDE's options can not handle minHeight & maxHeight together correctly, we have to set minHeight in JS code */
.review-box-panel .CodeMirror-scroll {
min-height: 80px;
max-height: calc(100vh - 360px);
}
.review-box-panel .combo-markdown-editor {
width: 730px; /* this width matches current EasyMDE's toolbar's width */
max-width: calc(100vw - 70px); /* leave enough space on left, and align the page content */
}
#review-box {
position: relative;
}
#review-box .review-comments-counter {
background-color: var(--color-primary-light-4);
color: var(--color-primary-contrast);
}
#review-box:hover .review-comments-counter {
background-color: var(--color-primary-light-5);
}
#review-box .review-comments-counter[data-pending-comment-number="0"] {
display: none;
}
.pull.files.diff .comment {
scroll-margin-top: 99px;
}
@media (max-width: 991.98px) {
.pull.files.diff .comment {
scroll-margin-top: 130px;
}
}
.changed-since-last-review {
border: 1px var(--color-accent) solid;
background-color: var(--color-small-accent);
border-radius: var(--border-radius);
padding: 4px 8px;
margin: -8px 0; /* just like other buttons in the diff box header */
font-size: 0.857rem; /* just like .ui.tiny.button */
}
.viewed-file-form {
display: flex;
align-items: center;
border: 1px solid transparent;
padding: 4px 8px;
margin: -8px 0; /* just like other buttons in the diff box header */
border-radius: var(--border-radius);
font-size: 0.857rem; /* just like .ui.tiny.button */
}
.viewed-file-form input {
margin-right: 4px;
}
.viewed-file-checked-form {
background-color: var(--color-small-accent);
border-color: var(--color-accent);
}
#viewed-files-summary {
width: 100%;
height: 8px;
}