}

table.code-browser tr {

    margin: 3px;

}

table.code-browser thead th {

    background-color: #EEE;

    height: 20px;

    font-size: 1.1em;

    font-weight: 700;

    text-align: left;

    padding-left: 10px;

}

table.code-browser tbody td {

    padding-left: 10px;

    height: 20px;

}

table.code-browser .browser-file {

    height: 16px;

    padding-left: 5px;

    text-align: left;

}

.diffblock .changeset_header {

    height: 16px;

}

.diffblock .changeset_file {

    float: left;

}

.diffblock .diff-menu-wrapper {

    float: left;

}

.diffblock .diff-menu {

    position: absolute;

    background: none repeat scroll 0 0 #FFFFFF;

    border-color: #577632 #666666 #666666;

    border-right: 1px solid #666666;

    border-style: solid solid solid;

    border-width: 1px;

    box-shadow: 2px 8px 4px rgba(0, 0, 0, 0.2);

    margin-top: 5px;

    margin-left: 1px;

}

.diffblock .diff-actions {

    float: left;

}

.diffblock.twoway {

    overflow: visible;

}

.diffblock.twoway .diff-actions {

    padding-top: 0;

}

.diffblock.twoway .diff-actions label input {

    margin: -5px 5px 0 10px;

    position: relative;

    top: 3px;

}

.diffblock .diff-menu ul li {

    padding: 0px 0px 0px 0px !important;

}

.diffblock .diff-menu ul li a {

    display: block;

    padding: 3px 8px 3px 8px !important;

}

.diffblock .diff-menu ul li a:hover {

    text-decoration: none;

    background-color: #EEEEEE;

}

table.code-browser .browser-dir {

    height: 16px;

    padding-left: 5px;

    text-align: left;

}

table.code-browser .submodule-dir {

    height: 16px;

    padding-left: 5px;

    text-align: left;

}

/* add some padding to the right of the file, folder, or submodule icon and

before the text */

table.code-browser i[class^='icon-'] {

    padding-right: .3em;

}

.box .search {

    clear: both;

    overflow: hidden;

    margin: 0;

    padding: 0 20px 10px;

}

.box .search div.search_path {

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

<%def name="diff_block(a_repo_name, a_ref_type, a_ref_name, a_rev,

                       cs_repo_name, cs_ref_name, cs_ref_type, cs_rev,

                       file_diff_data)">

<div class="diff-collapse">

    <span target="${'diff-container-%s' % (id(file_diff_data))}" class="diff-collapse-button">&uarr; ${_('Collapse Diff')} &uarr;</span>

</div>

<div class="diff-container" id="${'diff-container-%s' % (id(file_diff_data))}">

%for id_fid, (url_fid, op, a_filename, cs_filename, diff, stats) in file_diff_data.iteritems():

    ${diff_block_diffblock(id_fid, url_fid, op, diff,

        a_repo_name, a_rev, a_ref_type, a_ref_name, a_filename,

        cs_repo_name, cs_rev, cs_ref_type, cs_ref_name, cs_filename)}

%endfor

</div>

</%def>

<%def name="diff_block_diffblock(id_fid, url_fid, op, diff,

    a_repo_name, a_rev, a_ref_type, a_ref_name, a_filename,

    cs_repo_name, cs_rev, cs_ref_type, cs_ref_name, cs_filename)"

>

    <div id="${id_fid}_target" style="clear:both;margin-top:25px"></div>

    <div id="${id_fid}" class="diffblock margined comm">

        <div class="code-header">

            <div class="changeset_header">

                <div class="changeset_file">

                </div>

                <div class="diff-actions">

                  <a href="${h.url('files_diff_home',repo_name=cs_repo_name,f_path=h.safe_unicode(cs_filename),diff2=cs_rev,diff1=a_rev,diff='diff',fulldiff=1)}" class="tooltip" title="${_('Show full diff for this file')}">

                  <a href="${h.url('files_diff_2way_home',repo_name=cs_repo_name,f_path=h.safe_unicode(cs_filename),diff2=cs_rev,diff1=a_rev,diff='diff',fulldiff=1)}" class="tooltip" title="${_('Show full side-by-side diff for this file')}">

                  <a href="${h.url('files_diff_home',repo_name=cs_repo_name,f_path=h.safe_unicode(cs_filename),diff2=cs_rev,diff1=a_rev,diff='raw')}" class="tooltip" title="${_('Raw diff')}">

                  <a href="${h.url('files_diff_home',repo_name=cs_repo_name,f_path=h.safe_unicode(cs_filename),diff2=cs_rev,diff1=a_rev,diff='download')}" class="tooltip" title="${_('Download diff')}">

                  ${c.ignorews_url(request.GET, url_fid)}

                  ${c.context_url(request.GET, url_fid)}

                </div>

                <span style="float:right;margin-top:-3px">

                    <label>

                        ${_('Show inline comments')}

                        ${h.checkbox('',checked="checked",class_="show-inline-comments",id_for=url_fid)}

                    </label>

                </span>

            </div>

        </div>

        <div class="code-body full_f_path" data-f_path="${h.safe_unicode(cs_filename)}">

            ${diff|n}

            %if cs_filename.rsplit('.')[-1] in ['png', 'gif', 'jpg', 'bmp']:

              <div class="btn btn-image-diff-show">Show images</div>

              %if op == 'M':

                <div id="${id_fid}_image-diff" class="btn btn-image-diff-swap" style="display:none">Press to swap images</div>

              %endif

              <div style="font-size: 0">

                %if op in 'DM':

                  <img id="${id_fid}_image-diff-img-a" class="img-diff img-diff-swapable" style="display:none"

                      realsrc="${h.url('files_raw_home',repo_name=a_repo_name,revision=a_rev,f_path=a_filename)}" />

                %endif

                %if op in 'AM':

                  <img id="${id_fid}_image-diff-img-b" class="img-diff img-diff-swapable" style="display:none"

                      realsrc="${h.url('files_raw_home',repo_name=cs_repo_name,revision=cs_rev,f_path=cs_filename)}" />

                %endif

              </div>

            %endif

        </div>

    </div>

</%def>

<%def name="diff_block_js()">

<script type="text/javascript">

$(document).ready(function(){

    $('.btn-image-diff-show').click(function(e){

        $('.btn-image-diff-show').hide();

        $('.btn-image-diff-swap').show();

        $('.img-diff-swapable')

            .each(function(i,e){

                    $(e).prop('src', $(e).attr('realsrc'));

                })

            .show();

        });

    $('.btn-image-diff-swap').mousedown(function(e){

        $('#'+e.currentTarget.id+'-img-a.img-diff-swapable')