kallithea Changeset - 24d01c64c5f3

Changeset - 24d01c64c5f3

Parent rev.

Child rev.

[Not reviewed]

default

0 1 0

Mads Kiilerich - 10 years ago 2015-08-05 12:29:41
madski@unity3d.com

comments: when linking to specific comments, make the browser show a bit of the context of the comment

Make the link targets have an invisible pre: that goes 100px above the target.

1 file changed with 13 insertions and 5 deletions:

kallithea/public/css/style.css

0 comments (0 inline, 0 general)

kallithea/public/css/style.css

➞

Show inline comments

@@ @@ -3939,598 +3939,597 @@ div.readme h2 { @@
     font-weight: normal;
+}
 div.readme .readme_box {
     background-color: #fafafa;
+}
 div.readme .readme_box {
     clear: both;
     overflow: hidden;
     margin: 0;
     padding: 0 20px 10px;
+}
 div.readme .readme_box h1,
 div.readme .readme_box h2,
 div.readme .readme_box h3,
 div.readme .readme_box h4,
 div.readme .readme_box h5,
 div.readme .readme_box h6 {
     border-bottom: 0 !important;
     margin: 0 !important;
     padding: 0 !important;
     line-height: 1.5em !important;
+}
 div.readme .readme_box h1:first-child {
     padding-top: .25em !important;
+}
 div.readme .readme_box h2,
 div.readme .readme_box h3 {
     margin: 1em 0 !important;
+}
 div.readme .readme_box h2 {
     margin-top: 1.5em !important;
     border-top: 4px solid #e0e0e0 !important;
     padding-top: .5em !important;
+}
 div.readme .readme_box p {
     color: black !important;
     margin: 1em 0 !important;
     line-height: 1.5em !important;
+}
 div.readme .readme_box ul {
     list-style: disc !important;
     margin: 1em 0 1em 2em !important;
+}
 div.readme .readme_box ol {
     list-style: decimal;
     margin: 1em 0 1em 2em !important;
+}
 div.readme .readme_box code {
     font-size: 12px !important;
     background-color: ghostWhite !important;
     color: #444 !important;
     padding: 0 .2em !important;
     border: 1px solid #dedede !important;
+}
 div.readme .readme_box pre code {
     padding: 0 !important;
     font-size: 12px !important;
     background-color: #eee !important;
     border: none !important;
+}
 div.readme .readme_box pre {
     margin: 1em 0;
     font-size: 12px;
     background-color: #eee;
     border: 1px solid #ddd;
     padding: 5px;
     color: #444;
     overflow: auto;
     border-radius: 3px;
+}
 div.readme .readme_box table {
     display: table;
     border-collapse: separate;
     border-spacing: 2px;
     border-color: gray;
     width: auto !important;
+}
 /** RST STYLE **/
 div.rst-block {
     padding: 0px;
+}
 div.rst-block h2 {
     font-weight: normal;
+}
 div.rst-block {
     background-color: #fafafa;
+}
 div.rst-block {
     clear: both;
     overflow: hidden;
     margin: 0;
     padding: 0 20px;
+}
 div.rst-block h1,
 div.rst-block h2,
 div.rst-block h3,
 div.rst-block h4,
 div.rst-block h5,
 div.rst-block h6 {
     border-bottom: 0 !important;
     margin: 0 !important;
     padding: 0 !important;
     line-height: 1.5em !important;
+}
 div.rst-block h1:first-child {
     padding-top: .25em !important;
+}
 div.rst-block h2,
 div.rst-block h3 {
     margin: 1em 0 !important;
+}
 div.rst-block h2 {
     margin-top: 1.5em !important;
     border-top: 4px solid #e0e0e0 !important;
     padding-top: .5em !important;
+}
 div.rst-block p {
     color: black !important;
     margin: 1em 0 !important;
     line-height: 1.5em !important;
+}
 div.rst-block ul {
     list-style: disc !important;
     margin: 1em 0 1em 2em !important;
+}
 div.rst-block ol {
     list-style: decimal;
     margin: 1em 0 1em 2em !important;
+}
 div.rst-block code {
     font-size: 12px !important;
     background-color: ghostWhite !important;
     color: #444 !important;
     padding: 0 .2em !important;
     border: 1px solid #dedede !important;
+}
 div.rst-block pre code {
     padding: 0 !important;
     font-size: 12px !important;
     background-color: #eee !important;
     border: none !important;
+}
 div.rst-block pre {
     margin: 1em 0;
     font-size: 12px;
     background-color: #eee;
     border: 1px solid #ddd;
     padding: 5px;
     color: #444;
     overflow: auto;
     border-radius: 3px;
+}
 /** comment main **/
 .comments {
     padding: 10px 20px;
     max-width: 978px;
+}
 .comments .comment {
+.comments .comment .comment-wrapp {
     border: 1px solid #ddd;
     margin-top: 10px;
     border-radius: 4px;
+}
 .comments .comment .meta {
     background: #f8f8f8;
     padding: 4px;
     border-bottom: 1px solid #ddd;
     min-height: 18px;
     overflow: auto;
+}
 .comments .comment .meta img {
     vertical-align: middle;
+}
 .comments .comment .meta .user {
     font-weight: bold;
     float: left;
     padding: 4px 2px 2px 2px;
+}
 .comments .comment .meta .date {
     float: left;
     padding: 4px 4px 0px 4px;
+}
 .comments .comment .text {
     background-color: #FAFAFA;
+}
 .comment .text div.rst-block p {
     margin: 0.5em 0px !important;
+}
 .comments-number {
     margin: 5px;
     padding: 0px 0px 10px 0px;
     font-weight: bold;
     color: #666;
     font-size: 16px;
+}
 .automatic-comment {
     font-style: italic;
+}
 /** comment form **/
 .status-block {
     margin: 5px;
     clear: both
+}
 .comment-form textarea {
     width: 100%;
     height: 100px;
     font-family: Lucida Console, Consolas, Monaco, Inconsolata, Liberation Mono, monospace;
+}
 form.comment-form {
     margin-top: 10px;
     margin-left: 10px;
+}
 .comment-inline-form .comment-block-ta,
 .comment-form .comment-block-ta {
     border: 1px solid #ccc;
     border-radius: 3px;
     box-sizing: border-box;
+}
 .comment-form-submit {
     margin-top: 5px;
     margin-left: 525px;
+}
 .file-comments {
     display: none;
+}
 .comment-form .comment {
     margin-left: 10px;
+}
 .comment-form .comment-help {
     padding: 5px 5px 5px 5px;
     color: #666;
+}
 .comment-form .comment-help .preview-btn,
 .comment-form .comment-help .edit-btn {
     float: right;
     margin: -6px 0px 0px 0px;
+}
 .comment-form .preview-box.unloaded,
 .comment-inline-form .preview-box.unloaded {
     height: 50px;
     text-align: center;
     padding: 20px;
     background-color: #fafafa;
+}
 .comment-form .comment-button {
     padding-top: 5px;
+}
 .add-another-button {
     margin-left: 10px;
     margin-top: 10px;
     margin-bottom: 10px;
+}
 .comment .buttons {
     float: right;
     margin: -1px 0px 0px 0px;
+}
 .show-inline-comments {
     position: relative;
     top: 1px
+}
 /** comment inline form **/
 .comment-inline-form {
     margin: 4px;
     max-width: 978px;
+}
 .comment-inline-form .submitting-overlay {
     display: none;
     height: 0;
     text-align: center;
     font-size: 16px;
     opacity: 0.5;
+}
 .comment-inline-form .clearfix,
 .comment-form .clearfix {
     background: #EEE;
     border-radius: 4px;
     padding: 5px;
     margin: 0px;
+}
 div.comment-inline-form {
     padding: 4px 0px 6px 0px;
+}
 .comment-inline-form textarea {
     width: 100%;
     height: 100px;
     font-family: Lucida Console, Consolas, Monaco, Inconsolata, Liberation Mono, monospace;
+}
 form.comment-inline-form {
     margin-top: 10px;
     margin-left: 10px;
+}
 .comment-inline-form-submit {
     margin-top: 5px;
     margin-left: 525px;
+}
 .file-comments {
     display: none;
+}
 .comment-inline-form .comment {
     margin-left: 10px;
+}
 .comment-inline-form .comment-help {
     padding: 5px 5px 5px 5px;
     color: #666;
+}
 .comment-inline-form .comment-help .preview-btn,
 .comment-inline-form .comment-help .edit-btn {
     float: right;
     margin: -6px 0px 0px 0px;
+}
 .comment-inline-form .comment-button {
     padding-top: 5px;
+}
 /** comment inline **/
 .inline-comments {
     padding: 0 20px;
+}
 .inline-comments div.rst-block {
     clear: both;
     overflow: hidden;
     margin: 0;
     padding: 0 20px 0px;
+}
 .inline-comments .comment {
 .inline-comments .comment .comment-wrapp {
     max-width: 978px;
     border: 1px solid #ddd;
     border-radius: 4px;
     margin: 3px 3px 5px 5px;
     background-color: #FAFAFA;
+}
 .inline-comments .add-comment {
     padding: 2px 4px 8px 5px;
+}
 .inline-comments .comment-wrapp {
     padding: 1px;
+}
 .inline-comments .comment .meta {
     background: #f8f8f8;
     padding: 4px;
     border-bottom: 1px solid #ddd;
     min-height: 20px;
     overflow: auto;
+}
 .inline-comments .comment .meta img {
     vertical-align: middle;
+}
 .inline-comments .comment .meta .user {
     font-weight: bold;
     float: left;
     padding: 3px;
+}
 .inline-comments .comment .meta .date {
     float: left;
     padding: 3px;
+}
 .inline-comments .comment .text {
     background-color: #FAFAFA;
+}
 .inline-comments .comments-number {
     padding: 0px 0px 10px 0px;
     font-weight: bold;
     color: #666;
     font-size: 16px;
+}
 .inline-comments-button .add-comment {
     margin: 2px 0px 8px 5px !important
+}
 .notification-paginator {
     padding: 0px 0px 4px 16px;
+}
 #context-pages .pull-request span,
 .menu_link_notifications {
     padding: 4px 4px !important;
     text-align: center;
     color: #888 !important;
     background-color: #DEDEDE !important;
     border-radius: 4px !important;
+}
 #context-pages .forks span,
 .menu_link_notifications {
     padding: 4px 4px !important;
     text-align: center;
     color: #888 !important;
     background-color: #DEDEDE !important;
     border-radius: 4px !important;
+}
 .notification-header {
     padding-top: 6px;
+}
 .notification-header .desc {
     font-size: 16px;
     height: 24px;
     float: left
+}
 .notification-list .container.unread {
     background: none repeat scroll 0 0 rgba(255, 255, 180, 0.6);
+}
 .notification-header .gravatar {
     background: none repeat scroll 0 0 transparent;
     padding: 0px 0px 0px 8px;
+}
 .notification-list .container .notification-header .desc {
     font-weight: bold;
     font-size: 17px;
+}
 .notification-table {
     border: 1px solid #ccc;
     border-radius: 6px 6px 6px 6px;
     clear: both;
     margin: 0px 20px 0px 20px;
+}
 .notification-header .delete-notifications {
     float: right;
     padding-top: 8px;
     cursor: pointer;
+}
 .notification-header .read-notifications {
     float: right;
     padding-top: 8px;
     cursor: pointer;
+}
 .notification-subject {
     clear: both;
     border-bottom: 1px solid #eee;
     padding: 5px 0px 5px 38px;
+}
 .notification-body {
     clear: both;
     margin: 34px 2px 2px 8px
+}
 /****
 PULL REQUESTS
 *****/
 .pullrequests_section_head {
     padding: 10px 10px 10px 0px;
     margin: 0 20px;
     font-size: 16px;
     font-weight: bold;
+}
 div.pr-details-title.closed {
     color: #555;
     background: #eee;
+}
 div.pr-details-title {
     font-size: 1.6em;
     padding: 5px 0px 5px 10px;
+}
 div.pr {
     margin: 0px 20px;
     padding: 4px 4px;
+}
 div.pr-desc {
     margin: 0px 20px;
+}
 tr.pr-closed td {
     background-color: #eee !important;
     color: #555 !important;
+}
 span.pr-closed-tag {
     margin-bottom: 1px;
     margin-right: 1px;
     padding: 1px 3px;
     font-size: 10px;
     padding: 1px 3px 1px 3px;
     font-size: 10px;
     color: #577632;
     white-space: nowrap;
     border-radius: 4px;
     border: 1px solid #d9e8f8;
     line-height: 1.5em;
+}
 .pr-box {
     max-width: 978px;
+}
 #s2id_org_ref,
 #s2id_other_ref,
 #s2id_org_repo,
 #s2id_other_repo {
     min-width: 150px;
     margin: 5px;
+}
 #pr-summary .msg-div {
     margin: 5px 0;
+}
 /****
   PERMS
 *****/
 #perms .perms_section_head {
     padding: 10px 10px 10px 0px;
     font-size: 16px;
     font-weight: bold;
     text-transform: capitalize;
+}
 #perms .perm_tag {
     padding: 1px 3px 1px 3px;
     font-size: 10px;
     font-weight: bold;
     text-transform: uppercase;
     white-space: nowrap;
     border-radius: 3px;
+}
 #perms .perm_tag.admin {
     background-color: #B94A48;
     color: #ffffff;
+}
@@ @@ -4650,240 +4649,249 @@ div.diffblock .children { @@
     text-align: right;
     padding: 0px 2px 2px 2px;
     background-color: #eeeeee;
     border-bottom: 1px solid #CCCCCC;
+}
 div.diffblock .code-body {
     background: #FFFFFF;
     clear: both;
+}
 div.diffblock pre.raw {
     background: #FFFFFF;
     color: #000000;
+}
 table.code-difftable {
     border-collapse: collapse;
     width: 99%;
     border-radius: 0px !important;
+}
 table.code-difftable td {
     padding: 0 !important;
     background: none !important;
     border: 0 !important;
     vertical-align: baseline !important
+}
 table.code-difftable .context {
     background: none repeat scroll 0 0 #DDE7EF;
     color: #999;
+}
 table.code-difftable .add {
     background: none repeat scroll 0 0 #DDFFDD;
+}
 table.code-difftable .add ins {
     background: none repeat scroll 0 0 #AAFFAA;
     text-decoration: none;
+}
 table.code-difftable .del {
     background: none repeat scroll 0 0 #FFDDDD;
+}
 table.code-difftable .del del {
     background: none repeat scroll 0 0 #FFAAAA;
     text-decoration: none;
+}
 table.code-highlighttable div.code-highlight pre u:before,
 table.code-difftable td.code pre u:before {
     content: "\21a6";
     display: inline-block;
     width: 0;
+}
 table.code-highlighttable div.code-highlight pre u.cr:before,
 table.code-difftable td.code pre u.cr:before {
     content: "\21a4";
     display: inline-block;
     color: rgba(0,0,0,0.5);
+}
 table.code-highlighttable div.code-highlight pre u,
 table.code-difftable td.code pre u {
     color: rgba(0,0,0,0.15);
+}
 table.code-highlighttable div.code-highlight pre i,
 table.code-difftable td.code pre i {
     border-style: solid;
     border-left-width: 1px;
     color: rgba(0,0,0,0.5);
+}
 /** LINE NUMBERS **/
 table.code-difftable .lineno {
     padding-left: 2px;
     padding-right: 2px !important;
     width: 30px;
     -moz-user-select: none;
     -webkit-user-select: none;
     border-right: 1px solid #CCC !important;
     border-left: 0px solid #CCC !important;
     border-top: 0px solid #CCC !important;
     border-bottom: none !important;
     vertical-align: middle !important;
     text-align: center;
+}
 table.code-difftable .lineno.new {
     text-align: right;
+}
 table.code-difftable .lineno.old {
     text-align: right;
+}
 table.code-difftable .lineno a {
     color: #aaa !important;
     font: 11px Lucida Console, Consolas, Monaco, Inconsolata, Liberation Mono, monospace !important;
     letter-spacing: -1px;
     padding-left: 10px;
     padding-right: 8px;
     box-sizing: border-box;
     cursor: pointer;
     display: block;
     width: 100%;
+}
 table.code-difftable .lineno-inline {
     background: none repeat scroll 0 0 #FFF !important;
     padding-left: 2px;
     padding-right: 2px;
     text-align: right;
     width: 30px;
     -moz-user-select: none;
     -webkit-user-select: none;
+}
 /** CODE **/
 table.code-difftable .code {
     display: block;
     width: 100%;
+}
 table.code-difftable .code td {
     margin: 0;
     padding: 0;
+}
 table.code-difftable .code pre {
     margin: 0 0 0 12px;
     padding: 0;
     min-height: 17px;
     line-height: 17px;
     white-space: pre-wrap;
+}
 table.code-difftable .del .code pre:before {
     content: "-";
     color: #800;
     float: left;
     left: -1em;
     position: relative;
     width: 0;
+}
 table.code-difftable .add .code pre:before {
     content: "+";
     color: #080;
     float: left;
     left: -1em;
     position: relative;
     width: 0;
+}
 table.code-difftable .unmod .code pre:before {
     content: " ";
     float: left;
     left: -1em;
     position: relative;
     width: 0;
+}
 .add-bubble {
     position: relative;
     display: none;
     float: left;
     width: 0px;
     height: 0px;
     left: -8px;
     box-sizing: border-box;
+}
 /* comment bubble, only visible when in a commentable diff */
 .commentable-diff tr.line.add:hover td .add-bubble,
 .commentable-diff tr.line.del:hover td .add-bubble,
 .commentable-diff tr.line.unmod:hover td .add-bubble {
     display: block;
     z-index: 1;
+}
 .add-bubble div {
     background: #577632;
     width: 16px;
     height: 16px;
     cursor: pointer;
     padding: 0 2px 2px 0.5px;
     border: 1px solid #577632;
     border-radius: 3px;
     box-sizing: border-box;
+}
 .add-bubble div:before {
     font-size: 14px;
     color: #ffffff;
     font-family: "kallithea";
     content: '\1f5ea';
+}
 .add-bubble div:hover {
     transform: scale(1.2, 1.2);
+}
 /* show some context of link targets - but only works when the link target
    can be extended with any visual difference */
 :target:before {
   display: block;
   height: 100px;
   margin: -100px 0 0;
   content: "";
+}
 div.comment:target>.comment-wrapp {
     border: solid 2px #ee0 !important;
+}
 .lineno:target a {
     border: solid 2px #ee0 !important;
     margin: -2px;
+}
 .btn-image-diff-show,
 .btn-image-diff-swap {
     margin: 5px;
+}
 .img-diff {
     max-width: 45%;
     height: auto;
     margin: 5px;
     /* http://lea.verou.me/demos/css3-patterns.html */
     background-image:
         linear-gradient(45deg, #888 25%, transparent 25%, transparent),
         linear-gradient(-45deg, #888 25%, transparent 25%, transparent),
         linear-gradient(45deg, transparent 75%, #888 75%),
         linear-gradient(-45deg, transparent 75%, #888 75%);
     background-size: 10px 10px;
     background-color: #999;
+}
 .img-preview {
     max-width: 100%;
     height: auto;
     margin: 5px;
+}
 div.comment-prev-next-links div.prev-comment,
 div.comment-prev-next-links div.next-comment {
     display: inline-block;
     min-width: 150px;
     margin: 3px 6px;
+}
 #help_kb {
     display: none;
+}
 .icon-only-links i {
     color: white;
+}

0 comments (0 inline, 0 general)