diff options
Diffstat (limited to '')
| -rw-r--r-- | web_src/css/review.css | 297 |
1 files changed, 297 insertions, 0 deletions
diff --git a/web_src/css/review.css b/web_src/css/review.css new file mode 100644 index 0000000..a198edf --- /dev/null +++ b/web_src/css/review.css @@ -0,0 +1,297 @@ +.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; +} |