Changeset - 450a5ee5889b
[Not reviewed]
default
0 2 0
domruf - 8 years ago 2017-10-25 22:41:45
dominikruf@gmail.com
less: we should be consistent with diffstat-ish colors

With this change, on the changeset page, the 'change counters' for the whole
changeset (in the top right corner) use the same colors as the counters for the
lines (a little bit below) and the line change highlighting.

- move .changed from kallithea.less to kallithea-diff.less
- be more generic with selectors in kallithea-diff
- remove remaining style from kallithea.less
2 files changed with 6 insertions and 17 deletions:
0 comments (0 inline, 0 general)
kallithea/public/less/kallithea-diff.less
Show inline comments
 
/* bootstrap progress bar has margin-bottom we don't want that in files list */
 
.cs_files .progress {
 
  margin-bottom: 0;
 
}
 
/* progress bars should be aligned right */
 
.cs_files .changes {
 
  float: right;
 
  color: @kallithea-theme-main-color;
 
}
 

	
 
/* colors for deleted/changed/added, for per file "diffstat" (rendered as Bootstrap progress-bar) */
 
.cs_files .changes .added {
 
/* colors for deleted/changed/added, both for 3 labels in top right corner with total count, and for per file "diffstat" (rendered as Bootstrap progress-bar) */
 
.changes .added {
 
  color: inherit;
 
  background-color: @add-bg-color;
 
}
 
.cs_files .changes .deleted {
 
.changes .changed {
 
  background: @change-bg-color;
 
}
 
.changes .deleted {
 
  background-color: @delete-bg-color;
 
}
 
/* binary
 
NEW_FILENODE = 1
 
DEL_FILENODE = 2
 
MOD_FILENODE = 3
 
RENAMED_FILENODE = 4
 
CHMOD_FILENODE = 5
 
BIN_FILENODE = 6
 
*/
 
.changes .bin {
 
  background-color: @add-bg-color;
 
}
 
/* added binary */
 
.changes .bin.bin1 {
 
  background-color: @add-bg-color;
 
}
 
/* deleted binary*/
 
.changes .bin.bin2 {
 
  background-color: @delete-bg-color;
 
}
 
/* mod binary*/
 
.changes .bin.bin3 {
 
  background-color: @change-bg-color;
 
}
 
/* rename file*/
 
.changes .bin.bin4 {
 
  background-color: #6D99FF;
 
}
 
/* chmod file*/
 
.changes .bin.bin5 {
 
  background-color: #6D99FF;
 
}
 

	
 
/* center collapse button */
 
.diff-collapse {
 
  text-align: center;
 
  margin-bottom: 15px;
 
}
 

	
 
.code-difftable {
 
  /* the whole line should be colored */
 
  border-collapse: collapse;
 
  border-radius: 0px !important;
 
  width: 100%;
 

	
 
  /* line coloring */
 
  .context {
 
    background: none repeat scroll 0 0 @highlight-line-color;
 
    color: #999;
 
  }
 
  .add {
 
    background: none repeat scroll 0 0 #DDFFDD;
 
  }
 
  .add ins {
 
    background: none repeat scroll 0 0 #AAFFAA;
 
    text-decoration: none;
 
  }
 
  .del {
 
    background: none repeat scroll 0 0 #FFDDDD;
 
  }
 
  .del del {
 
    background: none repeat scroll 0 0 #FFAAAA;
 
    text-decoration: none;
 
  }
 

	
 
  /* tabs */
 
  td.code pre u:before {
 
    content: "\21a6";
 
    display: inline-block;
 
    width: 0;
 
  }
 
  /* CR */
 
  td.code pre u.cr:before {
 
    content: "\21a4";
 
    display: inline-block;
 
  }
 
  /* whitespace characters */
 
  td.code pre u {
 
    color: rgba(0, 0, 0, 0.3);
 
  }
 
  /* trailing spaces */
 
  td.code pre i {
 
    border-style: solid;
 
    border-width: 0 0 0 1px;
 
    border-color: rgba(0, 0, 0, 0.3);
 
  }
 

	
 
  /** LINE NUMBERS **/
 
  .lineno {
 
    padding-left: 2px;
 
    padding-right: 2px !important;
 
    width: 30px;
 
    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;
 
  }
 
  .lineno.new {
 
    text-align: right;
 
  }
 
  .lineno.old {
 
    text-align: right;
 
  }
 
  .lineno a {
 
    color: #aaa !important;
 
    font-size: 11px;
 
    font-family: @font-family-monospace;
 
    line-height: normal;
 
    padding-left: 6px;
 
    padding-right: 6px;
 
    display: block;
 
  }
 
  .line:hover .lineno a {
 
    color: #333 !important;
 
  }
 
  /** CODE **/
 
  .code {
 
    display: block;
 
  }
 
  .code pre {
 
    border: 0;
 
    padding: 0;
 
    margin: 0;
 
    background: none;
 
    min-height: 17px;
 
    line-height: 17px;
 
    white-space: pre-wrap;
 
    word-break: break-all;
 
  }
 

	
 
  /* leading +/- on changed lines */
 
  .del .code pre:before {
 
    content: "-";
 
    color: #800;
 
  }
 
  .add .code pre:before {
 
    content: "+";
 
    color: #080;
 
  }
 
  .code pre:before {
 
    content: " ";
 
    margin: 0 2px;
 
  }
 
}
 

	
 
/* comment bubble */
 
.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: @kallithea-theme-main-color;
 
  width: 16px;
 
  height: 16px;
 
  cursor: pointer;
 
  padding: 0 2px 2px 0.5px;
 
  border: 1px solid @kallithea-theme-main-color;
 
  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);
 
}
 

	
 
/* file diff icons */
 
.icon-diff-modified:before {
 
  color: #d0b44c;
 
}
 
.icon-diff-removed:before {
 
  color: #bd2c00;
 
}
kallithea/public/less/style.less
Show inline comments
 
@@ -329,398 +329,384 @@ h3.files_location {
 
  font-size: 1.8em;
 
  font-weight: 700;
 
  border-bottom: none !important;
 
  margin: 10px 0 !important;
 
}
 
.file_history {
 
  padding-top: 10px;
 
  font-size: 16px;
 
}
 
.file_author {
 
  float: left;
 
}
 
.file_author .item {
 
  float: left;
 
  padding: 5px;
 
  color: #888;
 
}
 
.changeset_id {
 
  color: #666666;
 
  margin-right: -3px;
 
}
 
.changeset-logical-index {
 
  color: #666666;
 
  font-style: italic;
 
  font-size: 85%;
 
  padding-right: 0.5em;
 
  text-align: right;
 
}
 
#changeset_compare_view_content .compare_view_commits {
 
  width: auto !important;
 
}
 
#changeset_compare_view_content .compare_view_commits td {
 
  padding: 0px 0px 0px 12px !important;
 
}
 
td.author {
 
  overflow: hidden;
 
  text-overflow: ellipsis;
 
  white-space: nowrap;
 
  max-width: 210px;
 
}
 
#graph_nodes {
 
  position: absolute;
 
  width: 100px;
 
}
 
#graph_content,
 
#graph_content_pr,
 
#graph .container_header {
 
  margin-left: 100px;
 
}
 
#graph_content {
 
  position: relative;
 
}
 
table#updaterevs-table tr.mergerow,
 
table#updaterevs-table tr.out-of-range,
 
table#changesets tr.mergerow,
 
table#changesets tr.out-of-range {
 
  opacity: 0.6;
 
}
 
table#changesets tr > td {
 
  height: 31px;
 
  border-color: #cdcdcd;
 
  text-align: left;
 
}
 
table#changesets tr > td.checkbox-column {
 
  width: 14px;
 
  font-size: 0.85em;
 
}
 
table#changesets tr > td.status {
 
  width: 14px;
 
  font-size: 0.85em;
 
}
 
table#changesets tr > td.hash {
 
  width: 100px;
 
  font-size: 0.85em;
 
}
 
table#changesets tr > td.date {
 
  width: auto !important;
 
  color: #666;
 
  font-size: 10px;
 
  white-space: nowrap;
 
}
 
table#changesets tr > td.mid {
 
  width: 100%;
 
  padding: 0;
 
}
 
table#changesets .log-container {
 
  position: relative;
 
  margin-top: 8px;
 
}
 
table#changesets tr #singlerange,
 
table#changesets tr .changeset_range {
 
  float: left;
 
  margin: 2px 0;
 
}
 
table#changesets tr > td.author img {
 
  vertical-align: middle;
 
}
 
table#changesets tr > td.author .user {
 
  color: #444444;
 
}
 
table#changesets tr > td.mid .message,
 
#graph_content_pr .compare_view_commits .message {
 
  white-space: nowrap;
 
  padding: 0;
 
  overflow: hidden;
 
}
 
#graph_content_pr .compare_view_commits .message {
 
  padding: 0 !important;
 
}
 
table#changesets tr > td.mid .message.expanded,
 
#graph_content_pr .compare_view_commits .message.expanded {
 
  height: auto;
 
  overflow: initial;
 
}
 
table#changesets tr .extra-container {
 
  display: block;
 
  position: absolute;
 
  top: 0;
 
  right: 0;
 
}
 
.comments-container,
 
table#changesets .logtags {
 
  display: block;
 
  float: left;
 
  overflow: hidden;
 
  padding: 0;
 
  margin: 0;
 
  white-space: nowrap;
 
}
 
table#changesets .tagcontainer {
 
  width: 80px;
 
  position: relative;
 
  float: right;
 
  height: 100%;
 
  top: 7px;
 
  margin-left: 0.5em;
 
}
 
table#changesets .logtags {
 
  min-width: 80px;
 
  height: 1.1em;
 
  position: absolute;
 
  left: 0px;
 
  width: auto;
 
  top: 0px;
 
}
 
table#changesets .logtags.tags {
 
  top: 14px;
 
}
 
table#changesets .logtags:hover {
 
  overflow: visible;
 
  position: absolute;
 
  width: auto;
 
  right: 0;
 
  left: initial;
 
}
 
table#changesets .logtags .booktag,
 
table#changesets .logtags .tagtag {
 
  float: left;
 
  line-height: 1em;
 
  margin-bottom: 1px;
 
  margin-right: 1px;
 
  padding: 1px 3px;
 
  font-size: 10px;
 
}
 
table#changesets tr > td.mid .message a:hover {
 
  text-decoration: none;
 
}
 
#updaterevs-graph {
 
  position: relative;
 
  width: 40px;
 
  height: 0;
 
}
 
#updaterevs-table {
 
  margin-left: 40px !important;
 
}
 
.issue-tracker-link {
 
  color: #3F6F9F;
 
  font-weight: bold !important;
 
}
 
/* changeset statuses (must be the same name as the status) */
 
.changeset-status-not_reviewed {
 
  color: #bababa;
 
}
 
.changeset-status-approved {
 
  color: #81ba51;
 
}
 
.changeset-status-rejected {
 
  color: #d06060;
 
}
 
.changeset-status-under_review {
 
  color: #ffc71e;
 
}
 
.pull-right .changes .added,
 
.pull-right .changes .changed,
 
.pull-right .changes .deleted {
 
  color: #444444;
 
}
 
.pull-right .changes .added {
 
  background: #CFC;
 
}
 
.pull-right .changes .changed {
 
  background: #FEA;
 
}
 
.pull-right .changes .deleted {
 
  background: #FAA;
 
}
 

	
 
#repo_size {
 
  display: block;
 
  margin-top: 4px;
 
  color: #666;
 
  float: right;
 
}
 
.currently_following {
 
  padding-left: 10px;
 
  padding-bottom: 5px;
 
}
 
#switch_repos {
 
  position: absolute;
 
  height: 25px;
 
  z-index: 1;
 
}
 
#switch_repos select {
 
  min-width: 150px;
 
  max-height: 250px;
 
  z-index: 1;
 
}
 
.breadcrumbs {
 
  border: medium none;
 
  color: #FFF;
 
  font-weight: 700;
 
  font-size: 14px;
 
}
 
table#permissions_manage span.private_repo_msg {
 
  font-size: 0.8em;
 
  opacity: 0.6;
 
}
 
table#permissions_manage td.private_repo_msg {
 
  font-size: 0.8em;
 
}
 
table#permissions_manage tr#add_perm_input td {
 
  vertical-align: middle;
 
}
 
div.gravatar {
 
  float: left;
 
  background-color: #FFF;
 
  margin-right: 0.7em;
 
  padding: 1px 1px 1px 1px;
 
  line-height: 0;
 
  border-radius: 3px;
 
}
 
div.gravatar img {
 
  border-radius: 2px;
 
}
 
.panel-body.settings > ul.nav-stacked {
 
  float: left;
 
  width: 150px;
 
  padding-right: 35px;
 
  color: #393939;
 
  font-weight: 700;
 
}
 
.panel-body.settings .nav-pills > :not(.active) > a {
 
  color: inherit;
 
}
 
.panel-body.settings > div,
 
.panel-body.settings > form {
 
  float: left;
 
  width: 750px;
 
  margin: 0;
 
}
 
.panel-body.no-padding {
 
  padding: 0;
 
}
 
.panel-body ~ .panel-body {
 
  padding-top: 0;
 
}
 
.panel-body.no-padding ~ .panel-body {
 
  padding-top: 15px;
 
}
 
.panel-body > :last-child {
 
  margin-bottom: 0;
 
}
 
.panel-body.settings .text-muted {
 
  margin: 5px 0;
 
}
 
ins,
 
div.options a:hover {
 
  text-decoration: none;
 
}
 
img,
 
nav.navbar #quick li a:hover span.normal,
 
#clone_url,
 
#clone_url_id {
 
  border: none;
 
}
 
img.icon,
 
.right .merge img {
 
  vertical-align: bottom;
 
}
 
#content div.panel div.panel-heading ul.links,
 
#content div.panel div.message div.dismiss {
 
  float: right;
 
  margin: 0;
 
  padding: 0;
 
}
 
nav.navbar #home,
 
#content div.panel ul.left,
 
#content div.panel ol.left,
 
div#commit_history,
 
div#legend_data,
 
div#legend_container,
 
div#legend_choices {
 
  float: left;
 
}
 

	
 
/* set size for statistics charts */
 
#commit_history {
 
  width: 450px;
 
  height: 300px;
 
}
 
#overview {
 
  clear: both;
 
  width: 450px;
 
  height: 100px;
 
}
 

	
 
#content #left #menu ul.closed,
 
#content #left #menu li ul.collapsed,
 
.yui-tt-shadow {
 
  display: none;
 
}
 
#content #left #menu ul.opened,
 
#content #left #menu li ul.expanded {
 
  display: block !important;
 
}
 

	
 
#content div.panel ol.lower-roman,
 
#content div.panel ol.upper-roman,
 
#content div.panel ol.lower-alpha,
 
#content div.panel ol.upper-alpha,
 
#content div.panel ol.decimal {
 
  margin: 10px 24px 10px 44px;
 
}
 
#content div.panel div.form div.form-group > div {
 
  margin: 0 0 10px 200px;
 
}
 
div.form div.form-group div.button input,
 
#content div.panel div.form div.buttons input,
 
div.form div.buttons input,
 
#content div.panel div.action div.button input {
 
  font-size: 11px;
 
  font-weight: 700;
 
  margin: 0;
 
}
 
div.form div.form-group div.highlight,
 
#content div.panel div.form div.buttons div.highlight {
 
  display: inline;
 
}
 
#content div.panel div.form div.buttons,
 
div.form div.buttons {
 
  margin: 10px 10px 0 200px;
 
  padding: 0;
 
}
 
#content div.panel table td.user,
 
#content div.panel table td.address {
 
  width: 10%;
 
  text-align: center;
 
}
 
#content div.panel div.action div.button {
 
  text-align: right;
 
  margin: 6px 0 0;
 
  padding: 0;
 
}
 
#login,
 
#register {
 
  width: 520px;
 
  margin: 10% auto 0;
 
  padding: 0;
 
}
 
.ac .match {
 
  font-weight: 700;
 
  padding-top: 5px;
 
  padding-bottom: 5px;
 
}
 
.q_filter_box {
 
  border-radius: 4px;
 
  border: 0 none;
 
  margin-bottom: -4px;
 
  margin-top: -4px;
 
  padding-left: 3px;
 
}
 
#node_filter {
 
  border: 0px solid #545454;
 
  color: #AAAAAA;
 
  padding-left: 3px;
 
}
 
/** comment main **/
 
.comment .panel,
0 comments (0 inline, 0 general)