Show More
comments.less
575 lines
| 9.9 KiB
| text/x-less
|
LessCssLexer
r1 | // comments.less | |||
// For use in RhodeCode applications; | ||||
// see style guide documentation for guidelines. | ||||
// Comments | ||||
r1344 | @comment-outdated-opacity: 0.6; | |||
r1 | .comments { | |||
width: 100%; | ||||
} | ||||
tr.inline-comments div { | ||||
max-width: 100%; | ||||
p { | ||||
white-space: normal; | ||||
} | ||||
code, pre, .code, dd { | ||||
overflow-x: auto; | ||||
width: 1062px; | ||||
} | ||||
dd { | ||||
width: auto; | ||||
} | ||||
} | ||||
#injected_page_comments { | ||||
.comment-previous-link, | ||||
.comment-next-link, | ||||
.comment-links-divider { | ||||
display: none; | ||||
} | ||||
} | ||||
.add-comment { | ||||
margin-bottom: 10px; | ||||
} | ||||
.hide-comment-button .add-comment { | ||||
display: none; | ||||
} | ||||
.comment-bubble { | ||||
color: @grey4; | ||||
margin-top: 4px; | ||||
margin-right: 30px; | ||||
visibility: hidden; | ||||
} | ||||
r1324 | .comment-label { | |||
float: left; | ||||
padding: 0.4em 0.4em; | ||||
r1332 | margin: 3px 5px 0px -10px; | |||
r1324 | display: inline-block; | |||
min-height: 0; | ||||
text-align: center; | ||||
font-size: 10px; | ||||
line-height: .8em; | ||||
font-family: @text-italic; | ||||
background: #fff none; | ||||
color: @grey4; | ||||
border: 1px solid @grey4; | ||||
white-space: nowrap; | ||||
text-transform: uppercase; | ||||
r1325 | min-width: 40px; | |||
r1324 | ||||
&.todo { | ||||
color: @color5; | ||||
font-family: @text-bold-italic; | ||||
} | ||||
r1326 | ||||
.resolve { | ||||
cursor: pointer; | ||||
text-decoration: underline; | ||||
} | ||||
.resolved { | ||||
text-decoration: line-through; | ||||
color: @color1; | ||||
} | ||||
.resolved a { | ||||
text-decoration: line-through; | ||||
color: @color1; | ||||
} | ||||
.resolve-text { | ||||
color: @color1; | ||||
margin: 2px 8px; | ||||
font-family: @text-italic; | ||||
} | ||||
r1324 | } | |||
r1360 | .has-spacer-after { | |||
&:after { | ||||
content: ' | '; | ||||
color: @grey5; | ||||
} | ||||
} | ||||
.has-spacer-before { | ||||
&:before { | ||||
content: ' | '; | ||||
color: @grey5; | ||||
} | ||||
} | ||||
r1324 | ||||
r1 | .comment { | |||
r1286 | ||||
&.comment-general { | ||||
border: 1px solid @grey5; | ||||
padding: 5px 5px 5px 5px; | ||||
} | ||||
r1 | margin: @padding 0; | |||
padding: 4px 0 0 0; | ||||
line-height: 1em; | ||||
r8 | .rc-user { | |||
min-width: 0; | ||||
r1324 | margin: 0px .5em 0 0; | |||
.user { | ||||
display: inline; | ||||
} | ||||
r8 | } | |||
r1 | .meta { | |||
position: relative; | ||||
width: 100%; | ||||
r1286 | border-bottom: 1px solid @grey5; | |||
r1324 | margin: -5px 0px; | |||
line-height: 24px; | ||||
r1 | ||||
&:hover .permalink { | ||||
visibility: visible; | ||||
color: @rcblue; | ||||
} | ||||
} | ||||
.author, | ||||
.date { | ||||
display: inline; | ||||
&:after { | ||||
content: ' | '; | ||||
color: @grey5; | ||||
} | ||||
} | ||||
r1286 | .author-general img { | |||
r1324 | top: 3px; | |||
r1286 | } | |||
.author-inline img { | ||||
r1324 | top: 3px; | |||
r1286 | } | |||
r1 | .status-change, | |||
.permalink, | ||||
.changeset-status-lbl { | ||||
display: inline; | ||||
} | ||||
.permalink { | ||||
visibility: hidden; | ||||
} | ||||
.comment-links-divider { | ||||
display: inline; | ||||
} | ||||
.comment-links-block { | ||||
float:right; | ||||
text-align: right; | ||||
min-width: 85px; | ||||
[class^="icon-"]:before, | ||||
[class*=" icon-"]:before { | ||||
margin-left: 0; | ||||
margin-right: 0; | ||||
} | ||||
} | ||||
.comment-previous-link { | ||||
display: inline-block; | ||||
.arrow_comment_link{ | ||||
cursor: pointer; | ||||
i { | ||||
font-size:10px; | ||||
} | ||||
} | ||||
.arrow_comment_link.disabled { | ||||
cursor: default; | ||||
color: @grey5; | ||||
} | ||||
} | ||||
.comment-next-link { | ||||
display: inline-block; | ||||
.arrow_comment_link{ | ||||
cursor: pointer; | ||||
i { | ||||
font-size:10px; | ||||
} | ||||
} | ||||
.arrow_comment_link.disabled { | ||||
cursor: default; | ||||
color: @grey5; | ||||
} | ||||
} | ||||
.flag_status { | ||||
display: inline-block; | ||||
margin: -2px .5em 0 .25em | ||||
} | ||||
.delete-comment { | ||||
display: inline-block; | ||||
color: @rcblue; | ||||
&:hover { | ||||
cursor: pointer; | ||||
} | ||||
} | ||||
.text { | ||||
clear: both; | ||||
.border-radius(@border-radius); | ||||
.box-sizing(border-box); | ||||
.markdown-block p, | ||||
.rst-block p { | ||||
margin: .5em 0 !important; | ||||
// TODO: lisa: This is needed because of other rst !important rules :[ | ||||
} | ||||
} | ||||
r1286 | ||||
.pr-version { | ||||
float: left; | ||||
margin: 0px 4px; | ||||
} | ||||
.pr-version-inline { | ||||
float: left; | ||||
r1324 | margin: 0px 4px; | |||
r1286 | } | |||
.pr-version-num { | ||||
font-size: 10px; | ||||
} | ||||
r1 | } | |||
r1324 | @comment-padding: 5px; | |||
r1344 | .general-comments { | |||
.comment-outdated { | ||||
opacity: @comment-outdated-opacity; | ||||
} | ||||
} | ||||
r1324 | .inline-comments { | |||
border-radius: @border-radius; | ||||
.comment { | ||||
margin: 0; | ||||
border-radius: @border-radius; | ||||
} | ||||
.comment-outdated { | ||||
r1344 | opacity: @comment-outdated-opacity; | |||
r1324 | } | |||
.comment-inline { | ||||
background: white; | ||||
padding: @comment-padding @comment-padding; | ||||
border: @comment-padding solid @grey6; | ||||
.text { | ||||
border: none; | ||||
} | ||||
.meta { | ||||
border-bottom: 1px solid @grey6; | ||||
margin: -5px 0px; | ||||
line-height: 24px; | ||||
} | ||||
} | ||||
.comment-selected { | ||||
border-left: 6px solid @comment-highlight-color; | ||||
} | ||||
.comment-inline-form { | ||||
padding: @comment-padding; | ||||
display: none; | ||||
} | ||||
.cb-comment-add-button { | ||||
margin: @comment-padding; | ||||
} | ||||
/* hide add comment button when form is open */ | ||||
.comment-inline-form-open ~ .cb-comment-add-button { | ||||
display: none; | ||||
} | ||||
.comment-inline-form-open { | ||||
display: block; | ||||
} | ||||
/* hide add comment button when form but no comments */ | ||||
.comment-inline-form:first-child + .cb-comment-add-button { | ||||
display: none; | ||||
} | ||||
/* hide add comment button when no comments or form */ | ||||
.cb-comment-add-button:first-child { | ||||
display: none; | ||||
} | ||||
/* hide add comment button when only comment is being deleted */ | ||||
.comment-deleting:first-child + .cb-comment-add-button { | ||||
display: none; | ||||
} | ||||
} | ||||
r1 | .show-outdated-comments { | |||
display: inline; | ||||
color: @rcblue; | ||||
} | ||||
// Comment Form | ||||
div.comment-form { | ||||
margin-top: 20px; | ||||
} | ||||
.comment-form strong { | ||||
display: block; | ||||
margin-bottom: 15px; | ||||
} | ||||
.comment-form textarea { | ||||
width: 100%; | ||||
height: 100px; | ||||
font-family: 'Monaco', 'Courier', 'Courier New', monospace; | ||||
} | ||||
form.comment-form { | ||||
margin-top: 10px; | ||||
margin-left: 10px; | ||||
} | ||||
.comment-inline-form .comment-block-ta, | ||||
.comment-form .comment-block-ta, | ||||
.comment-form .preview-box { | ||||
.border-radius(@border-radius); | ||||
.box-sizing(border-box); | ||||
background-color: white; | ||||
} | ||||
.comment-form-submit { | ||||
margin-top: 5px; | ||||
margin-left: 525px; | ||||
} | ||||
.file-comments { | ||||
display: none; | ||||
} | ||||
.comment-form .preview-box.unloaded, | ||||
.comment-inline-form .preview-box.unloaded { | ||||
height: 50px; | ||||
text-align: center; | ||||
padding: 20px; | ||||
background-color: white; | ||||
} | ||||
.comment-footer { | ||||
position: relative; | ||||
width: 100%; | ||||
min-height: 42px; | ||||
.status_box, | ||||
.cancel-button { | ||||
float: left; | ||||
display: inline-block; | ||||
} | ||||
.action-buttons { | ||||
float: right; | ||||
display: inline-block; | ||||
} | ||||
r1445 | ||||
.action-buttons-extra { | ||||
display: inline-block; | ||||
} | ||||
r1 | } | |||
.comment-form { | ||||
.comment { | ||||
margin-left: 10px; | ||||
} | ||||
.comment-help { | ||||
color: @grey4; | ||||
padding: 5px 0 5px 0; | ||||
} | ||||
.comment-title { | ||||
padding: 5px 0 5px 0; | ||||
} | ||||
.comment-button { | ||||
display: inline-block; | ||||
} | ||||
r1325 | .comment-button-input { | |||
r1 | margin-right: 0; | |||
} | ||||
.comment-footer { | ||||
margin-bottom: 110px; | ||||
r1281 | margin-top: 10px; | |||
r1 | } | |||
} | ||||
.comment-form-login { | ||||
.comment-help { | ||||
padding: 0.9em; //same as the button | ||||
} | ||||
div.clearfix { | ||||
clear: both; | ||||
width: 100%; | ||||
display: block; | ||||
} | ||||
} | ||||
r1324 | .comment-type { | |||
margin: 0px; | ||||
border-radius: inherit; | ||||
border-color: @grey6; | ||||
} | ||||
r1 | .preview-box { | |||
r1281 | min-height: 105px; | |||
r1 | margin-bottom: 15px; | |||
background-color: white; | ||||
.border-radius(@border-radius); | ||||
.box-sizing(border-box); | ||||
} | ||||
.add-another-button { | ||||
margin-left: 10px; | ||||
margin-top: 10px; | ||||
margin-bottom: 10px; | ||||
} | ||||
.comment .buttons { | ||||
float: right; | ||||
margin: -1px 0px 0px 0px; | ||||
} | ||||
// Inline Comment Form | ||||
.injected_diff .comment-inline-form, | ||||
.comment-inline-form { | ||||
r1281 | background-color: white; | |||
r1 | margin-top: 10px; | |||
margin-bottom: 20px; | ||||
} | ||||
.inline-form { | ||||
padding: 10px 7px; | ||||
} | ||||
.inline-form div { | ||||
max-width: 100%; | ||||
} | ||||
.overlay { | ||||
display: none; | ||||
position: absolute; | ||||
width: 100%; | ||||
text-align: center; | ||||
vertical-align: middle; | ||||
font-size: 16px; | ||||
background: none repeat scroll 0 0 white; | ||||
&.submitting { | ||||
display: block; | ||||
opacity: 0.5; | ||||
z-index: 100; | ||||
} | ||||
} | ||||
.comment-inline-form .overlay.submitting .overlay-text { | ||||
margin-top: 5%; | ||||
} | ||||
.comment-inline-form .clearfix, | ||||
.comment-form .clearfix { | ||||
.border-radius(@border-radius); | ||||
margin: 0px; | ||||
} | ||||
r1281 | .comment-inline-form .comment-footer { | |||
margin: 10px 0px 0px 0px; | ||||
} | ||||
r1 | .hide-inline-form-button { | |||
margin-left: 5px; | ||||
} | ||||
.comment-button .hide-inline-form { | ||||
background: white; | ||||
} | ||||
r1281 | ||||
.comment-area { | ||||
padding: 8px 12px; | ||||
border: 1px solid @grey5; | ||||
.border-radius(@border-radius); | ||||
r1344 | ||||
.resolve-action { | ||||
padding: 1px 0px 0px 6px; | ||||
} | ||||
r1281 | } | |||
.comment-area-header .nav-links { | ||||
display: flex; | ||||
flex-flow: row wrap; | ||||
-webkit-flex-flow: row wrap; | ||||
width: 100%; | ||||
} | ||||
.comment-area-footer { | ||||
display: flex; | ||||
} | ||||
.comment-footer .toolbar { | ||||
} | ||||
.nav-links { | ||||
padding: 0; | ||||
margin: 0; | ||||
list-style: none; | ||||
height: auto; | ||||
border-bottom: 1px solid @grey5; | ||||
} | ||||
.nav-links li { | ||||
display: inline-block; | ||||
} | ||||
.nav-links li:before { | ||||
content: ""; | ||||
} | ||||
.nav-links li a.disabled { | ||||
cursor: not-allowed; | ||||
} | ||||
.nav-links li.active a { | ||||
border-bottom: 2px solid @rcblue; | ||||
color: #000; | ||||
font-weight: 600; | ||||
} | ||||
.nav-links li a { | ||||
display: inline-block; | ||||
padding: 0px 10px 5px 10px; | ||||
margin-bottom: -1px; | ||||
font-size: 14px; | ||||
line-height: 28px; | ||||
color: #8f8f8f; | ||||
border-bottom: 2px solid transparent; | ||||
} | ||||
.toolbar-text { | ||||
float: left; | ||||
margin: -5px 0px 0px 0px; | ||||
font-size: 12px; | ||||
} | ||||