body {

  background: url("../images/background.png") repeat scroll 0 0 #B0B0B0;

}

/* pseude content that should not be selected or copied by the user */

[data-pseudo-content]:before {

  content: attr(data-pseudo-content);

}

/* class for texts where newlines should be preserved, for very light-weight ascii art markup (like pull request descriptions) */

.formatted-fixed {

  font-family: @font-family-monospace;

  white-space: pre-wrap;

}

/* use monospace for changeset hashes */

.changeset_hash {

  font-family: @font-family-monospace;

}

/* Note: class 'icon-empty' or 'icon-gravatar' can be used to get icon-ish styling without an actual glyph */

i[class^='icon-empty'],

i[class^='icon-gravatar'] {

  background-repeat: no-repeat;

  background-position: center;

  display: inline-block;

  min-width: 16px;

  min-height: 16px;

  margin: -2px 0 -4px 0;

}

.inline-comments-general.show-general-status .hidden.general-only {

  display: block !important;

}

.truncate {

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  -o-text-overflow: ellipsis;

  -ms-text-overflow: ellipsis;

}

.truncate.autoexpand:hover {

  overflow: visible;

}

/* show comment anchors when hovering over panel-heading */

a.permalink {

  visibility: hidden;

}

.panel-heading:hover .permalink {

  visibility: visible;

}

.navbar-inverse {

  border: none;

}

/* logo */

nav.navbar.mainmenu > .navbar-header > .navbar-brand {

  font-size: 20px;

  padding-top: 12px;

  > .branding:before {

    content: "";

    display: inline-block;

    margin-right: .2em;

    background-image: url(@kallithea-logo-url);

    width: @kallithea-logo-width;

    height: @kallithea-logo-height;

    margin-bottom: -@kallithea-logo-bottom;

    margin-top: -12px;

  }

}

/* code highlighting */

/* don't use bootstrap style for code blocks */

.code-highlighttable pre {

  background: inherit;

  border: 0;

}

/* every direct child of a panel, that is not .panel-heading, should auto

 * overflow to prevent overflowing of elements like text boxes and tables */

.panel > :not(.panel-heading){

  overflow-x: auto;

  min-height: 0.01%;

}

/* allow other exceptions to automatic overflow-x */

.panel > .overflow-x-visible {

  overflow-x: visible;

}

/* margin below top level panels */

#main > .panel {

  margin-bottom: @kallithea-panel-margin;

}

/* search highlighting */

div.search-code-body pre .match {

  background-color: @highlight-color;

}

div.search-code-body pre .break {

  background-color: @highlight-line-color;

  width: 100%;

  display: block;

}

/* use @alert-danger-text for form error messages and .alert-danger for the input element */

.form-group .error-message {

  color: @alert-danger-text;

  display: inline-block;

  padding-top: 5px;

  &:empty{

    display: none;

  }

}

input.error {

  .alert-danger;

}

/* datatable */

.dataTables_left {

  .pull-left;

}

.dataTables_right {

  .pull-right;

}

/* make all datatable paginations small */

.dataTables_paginate .pagination {

  .pagination-sm;

}

/* show column sort icons in our font ... and before column header */

table.dataTable {

  .sorting_asc:before {

    font-family: "kallithea";

    content: "\23f6";

    padding-right: 8px;

  }

  .sorting_desc:before {

    font-family: "kallithea";

    content: "\23f7";

    padding-right: 8px;

  }

  .sorting:before {

    font-family: "kallithea";

    content: "\2195";

    padding-right: 8px;

    opacity: 0.5;

  }

  .sorting_asc:after,

  .sorting_desc:after,

  .sorting:after {

    content: "" !important;

  }

}

/* _dt_elements.html styling - some submit buttons have their own form but should still be shown inline */

table.dataTable td > .btn + form {

  display: inline;

}

table.dataTable .dt_repo_pending {

  opacity: 0.5;

}

/* language bars (summary page) */

#lang_stats {

  .progress-bar {

    min-width: 15px;

    border-top-right-radius: 8px;

    border-bottom-right-radius: 8px;

  }

  td {

    padding: 1px 0 !important;

  }

}

/* use pointer cursor for expand_commit */

.expand_commit .icon-align-left {

  cursor: pointer;

  color: #999;

}

/* don't break author, date and comment cells into multiple lines in changeset table */

table.changesets {

  .author,

}

#overview {

  clear: both;

  width: 450px;

  height: 100px;

}

#content #left #menu ul.closed,

#content #left #menu li ul.collapsed {

  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;

}

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 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;

}

.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,

.comment-inline-form {

  max-width: 978px;

}

.comment .panel-body {

  background-color: #FAFAFA;

}

.comments-number {

  padding: 10px 0;

  color: #666;

}

.automatic-comment {

  font-style: italic;

}

/** comment form **/

.status-block {

  margin: 5px;

  clear: both;

}

.panel-heading .pull-left input[type=checkbox],

.panel-heading .pull-right input[type=checkbox] {

  position: relative;

  top: 4px;

  margin: -10px 2px 0;

}

/** indent actual inline comments - not general comments **/

td.inline-comments {

  padding: @kallithea-panel-margin;

}

.inline-comments .comments-number {

  padding: 0px 0px 10px 0px;

}

input.status_change_checkbox,

input.status_change_radio {

  margin: 0 0 5px 15px;

}

@keyframes animated-comment-background {

  0% {

    background-position: 0 0;

  }

  100% {

    background-position: 20px 0;

  }

}

.comment-preview.failed .user,

.comment-preview.failed .panel-body {

  color: #666;

}

.comment-preview .comment-submission-status {

  float: right;

}

.comment-preview .comment-submission-status .btn-group {

  margin-left: 10px;

}

.comment-preview.submitting .panel-body {

  background-image: linear-gradient(-45deg, #FAFAFA, #FAFAFA 25%, #FFF 25%, #FFF 50%, #FAFAFA 50%, #FAFAFA 75%, #FFF 75%, #FFF 100%);

  background-size: 20px 20px;

  animation: animated-comment-background 0.4s linear infinite;

}

/****

PULL REQUESTS

*****/

div.pr-details-title.closed {

  color: #555;

  background: #eee;

}

div.pr {

  margin: 0px 15px;

  padding: 4px 4px;

}

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;

  color: @kallithea-theme-main-color;

  white-space: nowrap;

  border-radius: 4px;

  border: 1px solid #d9e8f8;

  line-height: 1.5em;

}

#s2id_org_ref,

#s2id_other_ref,

#s2id_org_repo,

#s2id_other_repo {

  min-width: 150px;

  margin: 5px;

}

#pr-summary > .pr-not-edit {

  min-height: 50px !important;

}

/* make 'next iteration' changeset table smaller and scrollable */

#pr-summary #updaterevs {

  max-height: 200px;

  overflow-y: auto;

  overflow-x: hidden;

}

/****

  PERMS

*****/

.perm-gravatar-ac {

  vertical-align: middle;

  padding: 2px;

  width: 14px;

  height: 14px;

}

/* avoid gaps between the navbar and browser */

.navbar.mainmenu {

  border-top-left-radius: 0;

  border-top-right-radius: 0;

}

.navbar.footer {

  border-bottom-left-radius: 0;

  border-bottom-right-radius: 0;

}

/* show some context of link targets - but only works when the link target

   can be extended with any visual difference */

div.comment:target:before {

  display: block;

  height: 100px;

  margin: -100px 0 0;

## -*- coding: utf-8 -*-

## usage:

## <%namespace name="comment" file="/changeset/changeset_file_comment.html"/>

## ${comment.comment_block(co)}

##

<%def name="comment_block(co)">

  <div class="comment" id="comment-${co.comment_id}">

    <div class="comment-prev-next-links"></div>

    <div class="panel panel-default">

      <div class="panel-heading">

          ${h.gravatar_div(co.author.email, size=20)}

          <span class="user">

              ${co.author.full_name_and_username}

          </span>

          <span data-toggle="tooltip" title="${h.fmt_date(co.modified_at)}">

              ${h.age(co.modified_at)}

          </span>

              %if co.pull_request:

                <a href="${co.url()}">${_("comment")}</a>

                ${_('on pull request')}

                <a href="${co.pull_request.url()}">"${co.pull_request.title or _("No title")}"</a>

              %else:

                ${_('on this changeset')}

              %endif

              <a class="permalink" href="${co.url()}">&para;</a>

          %if co.author_id == request.authuser.user_id or h.HasRepoPermissionLevel('admin')(c.repo_name):

            %if co.deletable():

              <button type="button" onClick="confirm('${_('Delete comment?')}') && deleteComment(${co.comment_id})" class="pull-right buttons delete-comment btn btn-default btn-xs">${_('Delete')}</button>

            %endif

          %endif

      </div>

      <div class="panel-body">

        %if co.status_change:

           <div class="automatic-comment">

             <p>

               ${_("Status change")}: <span class="comment-status-label">${co.status_change[0].status_lbl}</span>

               <i class="icon-circle changeset-status-${co.status_change[0].status}"></i>

             </p>

           </div>

        %endif

        <div class="comment-text">

        %if co.text:

          ${h.render_w_mentions(co.text, c.repo_name)|n}

        %endif

        </div>

      </div>

    </div>

  </div>

</%def>

<%def name="comment_inline_form()">

<div id='comment-inline-form-template' style="display: none;">

  <div class="comment comment-preview submitting" style="display: none;">

    <div class="panel panel-default">

      <div class="panel-heading">

          ${h.gravatar_div(request.authuser.email, size=20)}

          <span class="user">

              ${request.authuser.full_name_or_username}

          </span>

          <span class="comment-submission-status">

              ${_('Submitting ...')}

          </span>

      </div>

      <div class="panel-body">

           <div class="automatic-comment" style="display: none;">

             <p>

               ${_("Status change")}: <span class="comment-status-label"></span>

               <i class="icon-circle"></i>

             </p>

           </div>

           <div class="comment-text">

             <div class="formatted-fixed">

             </div>

           </div>

      </div>

    </div>

  </div>

  <div class="ac">

  %if request.authuser.username != 'default':

    ${h.form('#', class_='inline-form')}

        <div class="comment-help">

          <span class="text-muted">${_('Comments are in plain text. Use @username to notify another user.')|n}</span>

        </div>

        <textarea name="text" class="form-control"></textarea>

        <div id="status_block_container" class="status-block general-only hidden">

                %if c.pull_request is None:

                  ${_('Set changeset status')}:

                %else:

                  ${_('Vote for pull request status')}:

                %endif

                <span class="general-only cs-only">

                </span>

                <label class="radio-inline">

                    <input type="radio" class="status_change_radio" name="changeset_status" id="changeset_status_unchanged" value="" checked="checked" />

                    ${_('No change')}

                </label>

                %for status, lbl in c.changeset_statuses:

                    <label class="radio-inline">

                        <input type="radio" class="status_change_radio" name="changeset_status" id="${status}" value="${status}">

                        ${lbl}<i class="icon-circle changeset-status-${status}"></i>

                    </label>

                %endfor

                %if c.pull_request is not None and ( \

                    h.HasPermissionAny('hg.admin')() or h.HasRepoPermissionLevel('admin')(c.repo_name) \

                    or c.pull_request.owner_id == request.authuser.user_id):

                <div>

                  ${_('Finish pull request')}:

                  <label class="checkbox-inline">

                    <input id="save_close" type="checkbox" name="save_close" class="status_change_checkbox">

                    ${_("Close")}

                  </label>

                  <label class="checkbox-inline">

                    <input id="save_delete" type="checkbox" name="save_delete" value="delete" class="status_change_checkbox">

                    ${_("Delete")}

                  </label>

                </div>

                %endif

        </div>

      </div>

      <div class="comment-button">

        ${h.submit('save', _('Comment'), class_='btn btn-default btn-sm save-inline-form')}

        ${h.reset('hide-inline-form', _('Cancel'), class_='btn btn-default btn-sm hide-inline-form')}

      </div>

    ${h.end_form()}

  %else:

      ${h.form('')}

      <div class="clearfix">

          <div class="comment-help">

            ${_('You need to be logged in to comment.')} <a href="${h.url('login_home', came_from=request.path_qs)}">${_('Login now')}</a>

          </div>

      </div>

      <div class="comment-button">

      ${h.reset('hide-inline-form', _('Hide'), class_='btn btn-default btn-sm hide-inline-form')}

      </div>

      ${h.end_form()}

  %endif

  </div>

</div>

</%def>

## show comment count as "x comments (y inline, z general)"

<%def name="comment_count(inline_cnt, general_cnt)">

    ${'%s (%s, %s)' % (

        ungettext("%d comment", "%d comments", inline_cnt + general_cnt) % (inline_cnt + general_cnt),

        ungettext("%d inline", "%d inline", inline_cnt) % inline_cnt,

        ungettext("%d general", "%d general", general_cnt) % general_cnt

    )}

    <span class="firstlink"></span>

</%def>

## generate inline comments and the main ones

<%def name="generate_comments()">

## original location of comments ... but the ones outside diff context remains here

<div class="comments inline-comments">

  %for f_path, lines in c.inline_comments:

    %for line_no, comments in lines.iteritems():

      <div class="comments-list-chunk" data-f_path="${f_path}" data-line_no="${line_no}" data-target-id="${h.safeid(h.safe_unicode(f_path))}_${line_no}">

        %for co in comments:

            ${comment_block(co)}

        %endfor

      </div>

    %endfor

  %endfor

      <div class="comments-list-chunk" data-f_path="" data-line_no="" data-target-id="general-comments">

        %for co in c.comments:

            ${comment_block(co)}

        %endfor

      </div>

</div>

<div class="comments-number">