antville/code/Site/$Site.skin

<% #href %>
<% param.path %>

<% #listItem %>
<tr>
   <td class='uk-width-6-10'><% site.title | site.link %></td>
   <td class='uk-text-truncate' title='<% site.modified short %>' data-uk-tooltip="{pos: 'top-left'}">
      <% site.modified text %>
   </td>
   <td><% site.modifier %></td>
</tr>

<% #edit %>
<h1><% response.title %></h1>
<div class='uk-article-meta'><% site.skin $HopObject#meta %></div>
<form class='uk-form uk-form-stacked' id="edit" method="post" action="<% response.action %>">
   <fieldset>
      <div class='uk-form-row uk-margin-top'>
         <label class='uk-form-label' for='mode'>
            <% gettext Mode %>
         </label>
         <div class='uk-form-controls'>
            <% site.select mode %>
         </div>
      </div>
      <div class='uk-form-row'>
         <label class='uk-form-label' for='title'>
            <% gettext Title %>
         </label>
         <div class='uk-form-controls'>
            <% site.input title class='uk-width-1-1' %>
         </div>
      </div>
      <div class='uk-form-row'>
         <label class='uk-form-label' for='tagline'>
            <% gettext Description %>
         </label>
         <div class='uk-form-controls'>
            <% site.input tagline class='uk-width-1-1' %>
         </div>
      </div>
      <div class='uk-form-row'>
         <label class='uk-form-label' for='pageSize'>
            <% gettext Pagination %>
         </label>
         <div class='uk-form-controls'>
            <% site.input pageSize class='uk-width-1-6' type=number min=1 max=25 %>
            <% gettext "{0} per page" <% gettext "stories" %> %>
            <% // site.select pageMode %>
         </div>
      </div>
      <div class='uk-form-row'>
         <label class='uk-form-label' for='commentMode'>
            <% gettext Comments %>
         </label>
         <div class='uk-form-controls'>
            <label>
               <% site.checkbox commentMode %>
               <% gettext enabled %>
            </label>
         </div>
      </div>
      <div class='uk-form-row'>
         <label class='uk-form-label' for='archiveMode'>
            <% gettext Archive %>
         </label>
         <div class='uk-form-controls'>
            <label>
               <% site.checkbox archiveMode %>
               <% gettext enabled %>
            </label>
         </div>
      </div>
      <div class='uk-form-row'>
         <label class='uk-form-label' for='locale'>
            <% gettext Language %>
         </label>
         <div class='uk-form-controls'>
            <% site.select locale %>
         </div>
      </div>
      <div class='uk-form-row'>
         <label class='uk-form-label' for='timeZone'>
            <% gettext 'Time Zone' %>
         </label>
         <div class='uk-form-controls'>
            <% site.select timeZone %>
         </div>
      </div>
      <div class='uk-form-row'>
         <label class='uk-form-label' for='notificationMode'>
            <% gettext Notifications %>
         </label>
         <div class='uk-form-controls'>
            <% site.select notificationMode %>
         </div>
      </div>
   </fieldset>
   <fieldset class='uk-margin-top'>
      <legend><% gettext Advanced %></legend>
      <div class='uk-form-row'>
         <label class='uk-form-label' for='maxImageWidth'>
            <% gettext 'Image Dimension Limits' %>
            <i class='uk-icon-info-circle uk-text-muted' title='<% gettext "If you want to resize the image please specify your desired maximum width and/or maximum height in pixels. If you specify both the image will be resized to match both criterias, but the image ratio will be preserved. If the width or height of your image exceeds 100 pixels Antville automatically creates a thumbnail of it, too." %> ' data-uk-tooltip='{pos: "right"}'></i>
         </label>
         <div class='uk-form-controls'>
            <% site.input maxImageWidth type='number' min=1 class='uk-form-width-small' %>
            &times;
            <% site.input maxImageHeight type='number' min=1 class='uk-form-width-small' %> <% gettext Pixels %>
         </div>
      </div>
      <div class='uk-form-row'>
         <label class='uk-form-label' for='trollFilter'>
            <% gettext 'Troll Filter' %>
         </label>
         <div class='uk-form-controls'>
            <% site.textarea trollFilter rows=5 class='uk-width-1-1' %>
         </div>
      </div>
      <div class='uk-form-row'>
         <label class='uk-form-label' for='spamfilter' >
            <% gettext 'Referrer Filter' %>
         </label>
         <div class='uk-form-controls'>
            <% site.textarea spamfilter rows=5 class='uk-width-1-1' %>
            <p class="uk-form-help-block">
               <% gettext "Enter one filter {0}pattern{1} per line to be applied on every URL in the referrer and backlink lists." '<a href="http://en.wikipedia.org/wiki/Regular_expression">' </a> %>
            </p>
         </div>
      </div>
      <div class='uk-form-row'>
         <label class='uk-form-label' for='callbackUrl'>
            <% gettext 'Callback URL' %>
         </label>
         <div class='uk-form-controls'>
            <% site.input callbackUrl type=url class='uk-width-1-1' %>
            <label>
               <% site.checkbox callbackMode %>
               <% gettext enabled %>
            </label>
         </div>
      </div>
      <div class='uk-form-row'>
         <label class='uk-form-label'>
            <% gettext Bookmarklet %>
         </label>
         <div class='uk-form-controls'>
            <a class='uk-button' data-uk-tooltip='{pos: "right"}' href="javascript: var siteUrl = '<% site.href %>'; var selection = (window.getSelection) ? window.getSelection() : document.selection.createRange(); selection = selection.text || selection; selection = selection + ''; var url='<% root.static %>../../formica.html?s=' + encodeURIComponent(siteUrl) + '&amp;l=' + encodeURIComponent(location.href) + '&amp;r=' + encodeURIComponent(document.referrer) + '&amp;w=400&amp;h=400&amp;c=' + encodeURIComponent(selection || document.title); window.open(url, 'formica', 'width=630, height=350'); void 0;" title="<% gettext 'Drag to Bookmarks Bar' %>"><% gettext "Post to {0}" <% site.title %> %></a>
         </div>
      </div>
      <div class='uk-form-row'>
         <label class='uk-form-label'>
            <% gettext 'Disk Space' %>
         </label>
         <div class='uk-form-controls'>
            <% site.diskspace %>
         </div>
      </div>
   </fieldset>
   <% site.skin $Site#admin restricted=true %>
   <div class='uk-margin-top'>
      <button class='uk-button uk-button-primary' type="submit" id="submit" name="save" value="1">
         <% gettext Save %>
      </button>
      <% site.link delete <% gettext Delete %> class='uk-button' %>
      <a href='<% site.href %>' class="uk-button uk-button-link"><% gettext Cancel %></a>
   </div>
</form>
<script>
   $('input#callbackMode').on('click', function(event) {
      $('input#callbackUrl').prop('disabled', !this.checked);
   });
   $('input#callbackUrl').prop('disabled', !$('input#callbackMode').prop('checked'));

   // Group related <option> elements by inserting additional <optgroup> elements.
   var groups = [];
   var element = $('form#edit #timeZone');
   element.find('option').each(function(index, item) {
      var zone = $(item);
      var parts = zone.html().split('/'); // E.g. Europe/Vienna
      var group = parts[0];
      if ($.inArray(group, groups) < 0) {
         groups.push(group);
      }
   });
   groups.sort();
   $.each(groups, function(index, group) {
      var key = group + '/'; // E.g. Europe/
      element.find('option:contains(' + key + ')')
         .wrapAll($('<optgroup>').attr('label', group))
         .each(function(index, item) {
            $(item).html($(item).html().replace(key, ''));
         });
      });
</script>

<% #meta %>
<meta name='description' content='<% response.description %>'>
<meta property='og:type' content='<% response.type %>'>
<% // Facebook is very picky with locales (e.g. complains about 'de' and 'en_AU') %>
<% //site.locale prefix="<meta property='og:locale' content='" suffix="'>" %>
<meta property='og:title' content='<% response.title %>'>
<meta property='og:description' content='<% response.description %>'>
<meta property='og:site_name' content='<% site.title %>'>
<% //response.images prefix="<meta property='og:image' content='" suffix="'>" %>
<meta property='og:url' content='<% href %>'>
<meta name='twitter:card' content='summary'>
<meta name='twitter:title' content='<% response.title %>'>
<meta name='twitter:description' content='<% response.description %>'>
<% //response.image prefix="<meta name='twitter:image:src' content='" suffix="'>" %>
<meta itemprop='name' content='<% response.title %>'>
<meta itemprop='description' content='<% response.description %>'>
<% //response.image prefix="<meta itemprop='image' content='" suffix="'>" %>
<% response.images %>
<% response.videos %>

<% #links %>
<link rel='alternate' type='application/rss+xml' title='Stories and comments of <% site.title %>' href='<% site.href rss.xml %>'>
<link rel='alternate' type='application/rss+xml' title='Stories of <% site.title %>' href='<% site.href stories.xml %>'>
<link rel='alternate' type='application/rss+xml' title='Comments of <% site.title %>' href='<% site.href comments.xml %>'>
<link rel='alternate' type='application/rss+xml' title='Sites of <% root.title %>' href='<% root.href updates.xml %>'>
<link rel='search' type='application/opensearchdescription+xml' href='<% site.href search.xml %>' title='<% site.title %>'>

<% #admin %>
<a name='admin' id='admin'></a>
<fieldset class='uk-margin-top'>
   <legend><% gettext Administration %></legend>
   <div class='uk-form-row'>
      <label class='uk-form-label' for='status'>
         <% gettext Status %>
      </label>
      <div class='uk-form-controls'>
         <% site.select status %>
      </div>
   </div>
   <div class='uk-form-row'>
      <label class='uk-form-label' for='status'>
         <% gettext Information %>
      </label>
      <div><% ngettext "{0} Story" "{0} Stories" <% count <% site.self stories %> %> %></div>
      <div><% ngettext "{0} Comment" "{0} Comments" <% count <% site.self comments %> %> %></div>
      <div><% ngettext "{0} Image" "{0} Images" <% count <% site.self images %> %> %></div>
      <div><% ngettext "{0} File" "{0} Files" <% count <% site.self files %> %> %></div>
   </div>
   <div class='uk-form-row'>
      <label class='uk-form-label' for='notes'>
         <% gettext Notes %>
      </label>
      <div class='uk-form-controls'>
         <% site.textarea notes class='uk-width-1-1' rows=5 %>
      </div>
   </div>
</fieldset>

<% #delete %>
<div class='uk-alert uk-alert-danger'>
   <% gettext 'You are about to delete the whole site which currently contains {0}, {1}, {2}, {3} and {4}.'
      <% ngettext '{0} story' '{0} stories' <% count <% site.self stories %> %> %>
      <% ngettext '{0} comment' '{0} comments' <% count <% site.self comments %> %> %>
      <% ngettext '{0} image' '{0} images' <% count <% site.self images %> %> %>
      <% ngettext '{0} file' '{0} files' <% count <% site.self files %> %> %>
      <% ngettext '{0} poll' '{0} polls' <% count <% site.self polls %> %> %> %>
   <strong><% gettext 'All of this will be deleted irreversibly.' %></strong>
   <% gettext 'Are you sure you want to proceed?' %>
</div>

<% #search %>
<h1><% response.title %></h1>
<form class='uk-form' method='post' action='<% site.href search %>'>
   <div class='uk-form-controls'>
      <input type='text' class='uk-width-1-2' name='q' value='<% request.q encoding="form" %>' required>
      <button type='submit' name='search' value='1' class='uk-button uk-button-primary'>
         <% gettext Find %>
      </button>
      <a href='<% site.href %>' class='uk-button uk-button-link'><% gettext Cancel %></a>
   </div>
</form>
<p>
   <% if <% response.count %> is null then '' else <% ngettext 'Showing {0} result' 'Showing {0} results' <% response.count %> suffix=. %> %>
</p>
<dl class='uk-description-list-line'>
   <% response.result %>
</dl>

<% #opensearchdescription %>
<?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
   <ShortName><% site.title %></ShortName>
   <Description>Search the site <% site.href %></Description>
   <Tags>antville search</Tags>
   <Image height="16" width="16" type="image/vnd.microsoft.icon"><% image /favicon.png url %></Image>
   <Url type="text/html" template="<% site.href search %>?q={searchTerms}" />
   <Query role="example" searchTerms="cat" />
</OpenSearchDescription>

<% #page %>
<!DOCTYPE html>
<html <% site.locale prefix='lang=' %>>
   <head>
      <meta charset='utf-8'>
      <title><% response.title %></title>
      <link rel='icon' type='image/x-icon' href='<% image /favicon.png url %>'>
      <link rel='shortcut icon' type='image/x-icon' href='<% image /favicon.png url %>'>
      <link rel='search' type='application/opensearchdescription+xml' href='<% site.href search.xml %>' title='<% site.title %>'>
      <link rel='alternate' type='application/rss+xml' title='Stories and comments of <% site.title %>' href='<% site.href rss.xml %>'>
      <link rel='alternate' type='application/rss+xml' title='Stories of <% site.title %>' href='<% site.href stories.xml %>'>
      <link rel='alternate' type='application/rss+xml' title='Comments of <% site.title %>' href='<% site.href comments.xml %>'>
      <link rel='alternate' type='application/rss+xml' title='Sites of <% root.title %>' href='<% root.href updates.xml %>'>
      <link rel='stylesheet' type='text/css' href='<% root.href main.css %>'>
      <script type='text/javascript' src='<% root.href main.js %>'></script>
   </head>
   <body class='uk-container-center av-page'>
   <body class='uk-container-center av-page'>
      <% site.skin $Site#header %>
      <div class='uk-grid'>
         <div class='uk-width-7-10'>
            <% response.message prefix="<div class='uk-alert' data-uk-alert>" suffix=</div> %>
            <% response.body %>
         </div>
         <div class='uk-width-3-10'>
            <div class='uk-margin-large-left av-border-left'>
               <% membership.status %>
               <ul class='uk-nav uk-nav-side'>
                  <li class='uk-nav-divider'/>
                  <% site.skin Site#navigation %>
                  <li class='uk-nav-divider'/>
                  <li class='uk-margin-left'>
                     <% site.skin Site#search %>
                  </li>
                  <li class='uk-nav-header'/>
                  <li class='uk-margin-left uk-text-small'>
                     <% site.calendar %>
                  </li>
               </ul>
            </div>
         </div>
      </div>
      <% site.skin $Site#footer %>
   </body>
</html>

<% #header %>
<header class='av-header <% if <% site.id %> is <% root.id %> then 'av-root-site' %>'>
   <div class='av-header-bg-chaos'></div>
   <div class='av-header-bg-dots'></div>
   <div class='av-title'>
      <% if <% site.id %> is <% root.id %> then
         <% image /big.gif | site.link title=<% site.tagline %> %>
      else
         <% site.title | site.link title=<% site.tagline %> %>
      %>
   </div>
</header>

<% #footer %>
<footer>
   <hr class='uk-margin-large-top'>
   <div class='uk-text-small uk-margin-bottom uk-float-left'>
      <div><% gettext 'Created {0}' <% site.created text %> %>.</div>
      <div><% gettext 'Last modified {0}' <% site.modified text %> %>.</div>
   </div>
   <div class='uk-text-right'>
      <% image /smallchaos.gif | link http://antville.org %> &
      <% image /helma.png | link http://helma.org %>
   </div>
</footer>

<% #javascript %>
$(function () {
   // Unhide hidden links triggering JavaScript
   $('a[href="javascript:"]:hidden').css('display', 'inline-block');

   // Injecting main.css if necessary for compatibility reasons
   if (!document.querySelector('link[href="<% site.href main.css %>"]')) {
      var link = document.createElement('link');
      link.href = '<% site.href main.css %>';
      link.rel = 'stylesheet';
      link.type = 'text/css';
      document.head.appendChild(link);
   }
});

<% site.skin Site#javascript | script %>

<% #include %>
(function (url) {
   var script = document.createElement('script');
   script.type = 'text/javascript';
   script.src = url;
   document.head.appendChild(script);
})('<% param.href %>');

<% #stylesheet %>
@import '<% root.static ../../styles/main.min.css %>';

// FIXME: compatibility

@base-font: <% value 'base font' default='Helvetica Neue, Helvetica, Arial, sans-serif' %>;
@base-font-size: <% value 'base font size' default="'14px / 20px'" %>;
@base-font-color: <% value 'base font color' default=#444 %>;

@big-font: <% value 'big font' default=@base-font %>;
@big-font-size: <% value 'big font size' default=inherit %>;
@big-font-color: <% value 'big font color' default=@base-font-color %>;

@small-font: <% value 'small font' default=@base-font %>;
@small-font-size: <% value 'small font size' default=inherit %>;
@small-font-color: <% value 'small font color' default=#999 %>;

@active-link-color: <% value 'active link color' default=#d50000 %>;

//

@background: <% value 'background color' default=#fff %>;
@text-color: <% value 'text color' default=@base-font-color %>;
@title-color: <% value 'title color' default=@big-font-color %>;
@link-color: <% value 'link color' default=#ff4040 %>;
@hover-color: <% value 'hover color' default=@active-link-color %>;
@muted-color: <% value 'muted color' default=@small-font-color %>;
@muted-background: fadeout(@muted-color, 90%);
@border-color: fadeout(@muted-color, 75%);

@text-font: normal @base-font-size <% value 'text font' default=@base-font %>;
@title-font: <% value 'title font' default=@big-font %>;

// Overwriting some classes defined by UIKit to go along with Antville’s layout


html, html.uk-notouch, body {
   background-color: @background;
   color: @text-color;
   font-family: @text-font;
}

h1, h2, h3, h4, h5, h6 {
   color: @title-color;
   font-family: @title-font;
}

a {
   color: @link-color;
   &:hover {
     color: @hover-color;
   }
   &[href='javascript:'] {
      display: none;
   }
}

em {
   color: @text-color;
   small & {
      color: @muted-color;
   }
}

img {
   max-width: initial; // FIXME: compatibility
   &[src$='pixel.gif'] {
      width: initial;
      height: initial;
   }
}

hr {
   border-top-color: @border-color;
}

.uk-description-list-line {
   overflow: hidden;
}

.uk-text-muted, .uk-article-meta, .uk-description-list-line > dd {
   color: @muted-color !important;
}

.uk-table-striped tbody tr:hover, .uk-table-striped tbody tr:nth-of-type(odd) {
   background: inherit;
}

.uk-button-group.av-link-group a {
   border-right: initial;
}

.uk-nav-divider + .uk-nav-divider,
.uk-nav-header + .uk-nav-header {
  display: none;
}

.uk-nav-side .uk-nav-divider {
   margin-top: 15px;
   border-top: none;
}

.uk-nav-side > li > a {
   color: @text-color;
   &:hover {
      background: @muted-background;
      color: @text-color;
      text-shadow: none;
   }
}

.uk-alert {
   background: @muted-background;
   border-color: @muted-color;
   color: @muted-color;
   text-shadow: none;
}

.uk-icon-button {
   &:link, &:visited {
      background-color: @background;
      color: @link-color;
      border-color: @link-color;
      text-shadow: initial;
   }
   &:hover {
      background-color: @background;
      color: @hover-color;
      border-color: @hover-color;
      text-shadow: initial;
   }
}

.uk-button:not(.uk-button-success) {
   text-shadow: initial !important;

   &, &:link, &:visited {
      background-color: @background;
      color: @text-color;
      border-color: @text-color;
   }
   &:hover {
      background-color: @background;
      color: @hover-color;
      border-color: @hover-color;
   }
   &.uk-button-link {
      border: initial;
      &:link, &:visited {
         color: @link-color;
      }
      &:hover {
         color: @hover-color;
      }
   }
   &.uk-button-primary {
      background-color: @background;
      border-style: double;
      border-color: @link-color;
      color: @link-color;
      font-weight: bold;
      &:hover {
         background: inherit;
         border-color: @hover-color;
         color: @hover-color;
      }
   }
}

.uk-pagination {
   & > li > a {
      background: @background;
      color: @link-color;
      border-color: @link-color;
      text-shadow: initial;
      &:hover {
         background: @background;
         color: @hover-color;
         border-color: @hover-color;
      }
   }
   & > .uk-active > span {
      background: @background;
      border-color: @text-color;
      color: @text-color;
      font-weight: bold;
   }
   & > .uk-disabled > span {
      background: @muted-background;
      color: @muted-color;
      border-color: @muted-color;
      text-shadow: initial;
   }
}

.uk-subnav > li > a {
   &:link, &:visited {
      color: @link-color;
   }
   &:hover {
      color: @hover-color;
   }
}

.uk-nav-side > li.uk-active > a {
   background: none;
   color: @link-color;
   box-shadow: none;
   font-weight: bold;
}

.uk-thumbnail img {
   max-width: 100%;
}

h1 a, .uk-table a {
   &:visited {
      color: @link-color;
   }
   &:hover {
      color: @hover-color;
   }
}

.uk-table th, .uk-table td, {
   border-color: @border-color;
}

.uk-form legend:after {
   content: '';
   display: block;
   border-bottom: 1px solid @border-color;
   width: 100%;
}

.uk-form select, .uk-form textarea, .uk-form input:not([type]), .uk-form input[type="text"], .uk-form input[type="password"], .uk-form input[type="datetime"], .uk-form input[type="datetime-local"], .uk-form input[type="date"], .uk-form input[type="month"], .uk-form input[type="time"], .uk-form input[type="week"], .uk-form input[type="number"], .uk-form input[type="email"], .uk-form input[type="url"], .uk-form input[type="search"], .uk-form input[type="tel"], .uk-form input[type="color"] {
   border-color: @border-color;
}

// Remove the left padding of the first meta subnav item for vertical alignment with the username
h4 + .uk-comment-meta li:first-child {
   padding-left: 0;
}

.av-page {
   width: 900px; // FIXME: Could we use the `vw` unit already?
}

.av-sprite {
  display: inline-block;
  vertical-align: middle;
}

.av-ant {
   display: inline-block;
   margin: 0 0 -2px -2px;
   width: 15px;
   height: 15px;
   background: url(/static/img/ant.svg);
   background-size: 15px 15px;
}

.av-border-left {
   border-left: 1px solid @border-color;
}

.av-overflow {
   // FIXME: Is this cross-browser compatible?
   max-width: 0;
   overflow: hidden;
}

.av-invisible {
   visibility: hidden;
}

.av-upload {
   position: relative;

   input[type='file'] {
      position: relative;
      z-index: 1;
      visibility: hidden;
   }

   .av-upload-controls {
      position: absolute;
      z-index: 2;
      top: 0;
      left: 0;
   }
}

.av-upload-drop {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(255, 255, 255, 0.8);
   z-index: 10;

   i {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 20em;

      &.av-upload-glow {
         animation-name: av-upload-glow;
         animation-duration: 3s;
         animation-direction: alternate;
         animation-iteration-count: infinte;
         -webkit-animation-name: av-upload-glow;
         -webkit-animation-duration: 0.5s;
         -webkit-animation-direction: alternate;
         -webkit-animation-iteration-count: infinite;
      }

      @keyframes av-upload-glow {
         0% {color: inherit;}
         100% {color: @link-color;}
      }

      @-webkit-keyframes av-upload-glow {
         0% {color: inherit;}
         100% {color: @link-color;}
      }
   }
}

.av-image-box {
   display: inline-block;
   max-width: 100%;
}

.av-collage {
   padding: 0;
   .av-tagged-image {
      opacity: 0;
      img {
         max-width: 100%;
         display: inline-block;
         margin: 0;
         padding: 0;
         vertical-align: bottom;
         opacity: 1;
      }
      .Caption_Content {
         color: #fff;
         padding: 10px;
      }
   }
}

.av-poll-result-bar {
   display: inline-block;
   height: 0.5rem;
   overflow: hidden;
   margin-right: 0.5rem;
   background-color: @link-color;
}

.av-header {
   position: relative;
   height: 73px;
   margin-top: 5px;

   .av-header-bg-chaos {
      width: 274px;
      height: 53px;
      margin-left: -54px;
      background: url('<% image /spritesheet.png url %>');
      background-position: -9px -139px;
      background-repeat: no-repeat;
   }

   .av-header-bg-dots {
      margin-left: 222px;
      position: relative;
      top: -46px;
      width: 900px - 274px + 54px;
      height: 38px;
      background: url('<% image /dot.gif url %>');
   }

   .av-title {
      position: absolute;
      top: 13px;
      overflow: visible;
      white-space: nowrap;
      font-family: Verdana, Helvetica, Arial, sans-serif;
      font-size: 25px;
      font-weight: bold;
   }

   // The root site gets the beautiful logo with ant animation
   &.av-root-site {
      .av-title {
         top: 0px;
         left: -55px;
      }
   }
}

.av-skin-active {
   background: #fff;
   opacity: .25;
}

.av-locale-needs-translation {
   color: @muted-color;
}

.av-layout-sandbox {
   height: 22px;
}

.av-layout-sandbox div {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   height: 22px;
   padding: 0 20px;
   background: url('<% image /sandbox.png url %>');
   background-position: 0 23px;
   text-align: left;
}

.av-skin-control {
   margin: 5px 0;
}

.av-skin-edit-link {
   padding: 2px;
   text-decoration: none !important;
}

// Overwriting some Helma and Jala classes for debugging and calendar integration

.helma-debug-line /*:has(script)*/ {
   border: none !important;
}

.jala-calendar {
   width: 100%;
   text-align: center;

   tbody th {
      font-weight: normal;
      color: @text-color;
   }

   .jala-calendar-day {
      width: 14.27%;
      line-height: 1.2rem;
      text-align: center;
      a {
         font-weight: bold;
      }
   }

   .jala-calendar-selected {
      border: 1px solid @muted-color;
      border-radius: 4px;
      font-weight: bold;
   }

   .jala-calendar-left {
      text-align: center;
      vertical-align: baseline;
   }

   .jala-calendar-right {
      border: 0;
      text-align: center;
      vertical-align: baseline;
   }
}

// Overwriting some CSS classes for Google’s custom search

.gs-webResult.gs-result a.gs-title:link,
.gs-webResult.gs-result a.gs-title:link b,
.gs-imageResult a.gs-title:link,
.gs-imageResult a.gs-title:link b {
   color: @link-color !important;
}

.gs-webResult.gs-result a.gs-title:visited,
.gs-webResult.gs-result a.gs-title:visited b,
.gs-imageResult a.gs-title:visited,
.gs-imageResult a.gs-title:visited b {
   color: @link-color !important;
}

.gs-result .gs-title, .gs-result .gs-title * {
   text-decoration: none !important;
}

a.gs-title:hover {
   text-decoration: underline !important;
}

.gsc-results {
   border: none !important;
   width: auto !important;
}

.cse .gsc-control-cse, .gsc-control-cse, .gsc-result-info, .gcsc-branding, .gsc-table-result, .gsc-thumbnail-inside, .gsc-url-top  {
   border: none !important;
   padding-left: 0 !important;
   padding-right: 0 !important;
}

.gsc-results .gsc-cursor-box {
   margin: 10px 0 0 0 !important;
}

.gsc-result-info, .gsc-orderby-label, td.gsc-branding-text, td.gcsc-branding-text {
   color: @muted-color !important;
}

.gs-no-results-result .gs-snippet, .gs-error-result .gs-snippet {
   margin: 0 !important;
   border: none !important;
   padding: 0 !important;
   background-color: inherit !important;
}

.gs-webResult div.gs-visibleUrl, .gs-imageResult div.gs-visibleUrl {
   color: @muted-color !important;
}

.gsc-control-cse, .gsc-control-cse-en {
   background: @background !important;
}

.gsc-webResult.gsc-result, .gsc-results .gsc-imageResult {
   border: none !important;
   background: none !important;
}

.gs-webResult .gs-snippet, .gs-imageResult .gs-snippet, .gs-fileFormatType {
   color: @text-color !important;
}

.gsc-results .gsc-cursor-box .gsc-cursor-page {
   color: @link-color !important;
   background: none !important;
}

.gcsc-branding-img-noclear {
   width: 51px;
   height: 15px;
   max-width: initial;
   vertical-align: text-bottom;
}

.gsc-above-wrapper-area {
   border-bottom-color: @border-color !important;
}

<% #referrers %>
<h1><% response.title %></h1>
<form class='uk-form' action="<% response.action %>" method="get">
   <div class='uk-form-row'>
      <input class='uk-width-1-2' type="text" name="filter" value="<% request.filter encoding="form" %>">
      <button class='uk-button uk-button-primary' type="submit" name="submit" value="1"><% gettext Search %></button>
      <a class='uk-button' href='<% site.href referrers %>'>
         <% gettext Reset %>
      </a>
      <div class='uk-form-help-block'>
         <label>
            <input type="checkbox" id="includeSpam" name="includeSpam" value="checked" <% request.includeSpam prefix='checked="' suffix='"' encoding="form" %> />
            <% gettext 'Disable filter' %>
            <i class='uk-icon uk-icon-info-circle uk-text-muted' data-uk-tooltip="{pos: 'right'}" title='<% gettext "Edit the filter in the site settings." %>'></i>
         </label>
      </div>
   </div>
   <% site.skin $Site#referrerTable %>
</form>

<% #referrerTable %>
<% site.skin $Site#noscript %>
<table class='uk-table uk-table-condensed uk-table-striped uk-table-hover av-referrers'>
   <thead>
      <tr>
         <th class='uk-text-right'><i class='uk-icon-bar-chart'></i></th>
         <th><% gettext Referrer %></th>
         <th></th>
      </tr>
   </thead>
   <tbody>
      <% response.list %>
   </tbody>
</table>
<script type="text/javascript">
   $('.av-referrers').addClass('uk-hidden');
   $('.av-referrer-control a').removeClass('uk-hidden');

   var query = new Antville.Query();
   var spamFilter = new Antville.Filter([<% site.spamfilter %>]);
   var searchFilter = new Antville.Filter(query.filter);

   var searchEngineFilters = [
      new Antville.Filter("//.*altavista.*/\?", "q"),
      new Antville.Filter("//.*bing\..*/\?", "q"),
      new Antville.Filter("//.*google\..*/imgres\?", "imgurl"),
      new Antville.Filter("//.*google\..*/\?.*q=[^&]", "q"),
      new Antville.Filter("//.*search\.yahoo\..*/\?", "p"),
      new Antville.Filter("//.*yandex\..*/\?", "text")
   ];

   var urlShortenerCounter = 0;
   var urlShortenerFilters = [
      new Antville.Filter('//bit\.ly/'),
      new Antville.Filter('//goo\.gl/'),
      new Antville.Filter('//owl\.ly/'),
      new Antville.Filter('//t\.co/'),
      new Antville.Filter('//tinyurl\.com/'),
      new Antville.Filter('//.*google\..*/url\?')
   ];

   $('.av-referrer-row').each(function (index) {
      var row = $(this);
      var ref = row.find('.av-referrer a');
      var url = ref.attr('href');
      var count = row.find('.av-referrer-count').html();
      var control = row.find('.av-referrer-control a');

      control.on('click', function (event) {
         event.preventDefault();
         var input = prompt("<% gettext 'Are you sure you want to add this URL to the referrer  filter? Edit it below to filter a pattern only.' %>", url);
         if (input) {
            location.href = '<% site.href referrers %>?submit=1&permanent=' + encodeURIComponent(input);
         }
      });

      var referrer = new Antville.Referrer(url, url, count);
      ref.html(referrer.text);

      if (spamFilter.test(url)) {
         if (query.includeSpam) {
            ref.addClass('uk-text-muted');
            control.remove();
         } else {
            row.remove();
         }
      }

      if (query.filter && !searchFilter.test(url)) {
         row.remove();
      }

      var re = new RegExp('[:/].*$');

      for (var i = 0, filter; i < searchEngineFilters.length; i += 1) {
         filter = searchEngineFilters[i];
         if (filter.test(url)) {
            var host = referrer.text.replace(re, '');
            ref.html(referrer.compose('<i><% gettext Search %>:</i>', filter.key));
            return;
         }
      }

      for (var i = 0, filter; i < urlShortenerFilters.length; i += 1) {
         filter = urlShortenerFilters[i];
         if (filter.test(url)) {
            urlShortenerCounter += parseInt(count, 10);
            var host = referrer.text.replace(re, '');
            var url = referrer.url.replace(new RegExp('^(.+//[^/]+).*'), '$1');
            ref.attr('href', url).html(host);
            return;
         }
      }
   });

   $('.av-referrer a').each(function (index) {
      var html = $(this).html();
      var countElement = $('.av-referrer-count').eq(index);
      var count = 0;
      $('.av-referrer a').each(function (index2) {
         if (index2 <= index) return;
         if ($(this).html() === html) {
            count += parseInt($('.av-referrer-count').eq(index2).html(), 10);
            $(this).parents('.av-referrer-row').addClass('av-delete');
         }
      });
      if (count) {
         countElement.html(parseInt(countElement.html(), 10) + count);
      }
   });

   $('.av-referrer-row.av-delete').remove();

   var table = $('.av-referrers');
   var rows = $('tbody > tr', table);
   rows.sort(function (a, b) {
      var countA = parseInt($('.av-referrer-count', a).text(), 10);
      var countB = parseInt($('.av-referrer-count', b).text(), 10);
      return countB - countA;
   });
   rows.each(function () {
      table.append(this);
   });

   if ($('.av-referrers tbody').children().length > 0) {
      $('.av-referrers').removeClass('uk-hidden');
   }
</script>

<% #referrer %>
<tr class='av-referrer-row'>
   <td class='uk-text-right av-referrer-count'><% param.requests %></td>
   <td class='av-referrer av-overflow uk-width-1-1'>
      <% param.referrer | link %>
   </td>
   <td class='av-referrer-control uk-text-right'>
      <a href='javascript:' class='uk-hidden'><i class='uk-icon uk-icon-filter'></i></a>
   </td>
</tr>

<% #deleted %>
<p><% gettext "This site is going to be deleted completely and irreversibly after {0}." <% site.deleted | format long %> %></p>

<% #export %>
<h1><% gettext "Export Site Data" %></h1>
<p>
   <% if <% param.status %> is null then <% if <% file.self %> is null then '' else <% gettext "Download the file {0} or klick “Start” to create a new one." <% file.skin File#main %> '<small>' <% file.created | format short %> '</small>' %> %> else <% param.status %> %>
</p>
<form action="" method="post">
   <button type="submit" name="submit" value="<% if <% param.status %> is null then start else stop %>" class='uk-button uk-button-primary'>
      <% if <% param.status %> is null then <% gettext Start %> else <% gettext Stop %> %>
   </button>
   <a href='<% site.href %>' class='uk-button uk-link-button'><% gettext Cancel %></a>
</form>

<% #import %>
<h1><% gettext 'Import Site Data' %></h1>
<p>
   <% if <% file.self %> is null then '' else <% gettext "The site is scheduled for importing the file {0}. The imported site data will be available within 24 hours." <% file.skin File#main %> '</a>' '<small>' <% file.created | format short %> '</small>' %> %>
</p>
<form class='uk-form uk-form-stacked' method="post" enctype="multipart/form-data">
   <div class='uk-form-row'>
      <label class='uk-form-label' for=''>
         <% gettext File %>
      </label>
      <div class='uk-form-controls'>
         <% if <% file.self %> is null then <% site.upload file %> %>
      </div>
   </div>
   <div class='uk-form-row'>
      <button class='uk-button uk-button-primary' type="submit" name="submit" value="<% if <% file.self %> is null then start else stop %>">
         <% if <% file.self %> is null then <% gettext Start %> else <% gettext Stop %> %>
      </button>
      <a href='<% site.href %>' class='uk-button uk-button-link'><% gettext Cancel %></a>
   </div>
</form>

<% #notify_block %>
<% gettext 'Hello {0}.' <% membership.name %> %>

<% gettext 'The site {0} at {1} will be blocked in {2} because it is being
      restricted for too long.' <% site.title %> <%site.href %>
      <% ngettext '{0} day' '{0} days' <% root.phaseOutGracePeriod %> %> %>

<% gettext "Best regards." %>
<% gettext "The Management" %>

<% #notify_delete %>
<% gettext 'Hello {0}.' <% membership.name %> %>

<% gettext 'The site {0} at {1} will be deleted in {2} because it has been
      considered as abandoned.' <% site.title %> <% site.href %>
      <% ngettext '{0} day' '{0} days' <% root.phaseOutGracePeriod %> %> %>

<% gettext "Best regards." %>
<% gettext "The Management" %>

<% #noscript %>
<noscript>
   <div class='uk-margin-top'>
      <i><% gettext 'Please enable JavaScript in your browser for improved functionality.' %></i>
   </div>
</noscript>

<% #menuExt %>
<script type="text/javascript" defer="defer">
   var win = external.menuArguments;
   var url = "<% site.url %>stories/create?text=";
   var link = escape('<a href="' + win.location.href + '">' +
      win.document.title + "</a>: ");
   var text = escape(win.document.selection.createRange().text);
   win.location.href = url + link + text;
</script>

<% #menuExtRegistry %>
REGEDIT4
[HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\MenuExt\Post to <% site.title %>]
@="<% site.url %>menuext"
"contexts"=hex:31