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 Paging %>
         </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'>
            <% 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>
   <% site.skin $Site#admin restricted=true %>
   <fieldset class='uk-margin-top'>
      <legend><% gettext Advanced %></legend>
      <div class='uk-form-row'>
         <label class='uk-form-label'>
            <% 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'>
            <% 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'>
            <% 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' 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 'Disk Space' %>
         </label>
         <div class='uk-form-controls'>
            <% site.diskspace %>
         </div>
      </div>
   </fieldset>
   <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'>
   <div class='av-header-bg'>
      <div class='av-header-bg-chaos'></div>
      <div class='av-header-bg-offset'>
         <div class='av-header-bg-dots'></div>
      </div>
   </div>
   <div class='av-title'>
      <% 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$=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 {
   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-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 {
   margin-top: 5px;

   .av-header-bg {
      position: relative;
   }

   .av-header-bg-chaos {
      float: left;
      width: 262px;
      height: 53px;
      margin-left: -40px;
      background: url('<% image /spritesheet.png url %>');
      background-position: 5px -139px;
   }

   .av-header-bg-offset {
      height: 53px;
      margin-left: 222px;
   }

   .av-header-bg-dots {
      position: relative;
      top: 7px;
      height: 38px;
      background: url('<% image /dot.gif url %>');
      background-position-x: 1px;
   }

   .av-title {
      position: relative;
      top: -50px;
      overflow: visible;
      white-space: nowrap;
      font-family: Verdana, Helvetica, Arial, sans-serif;
      font-size: 25px;
      font-weight: bold;
      transform: translateY(50%);
   }
}

.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 %>
<% gettext "This site is going to be deleted completely and irreversibly after {0}." <% site.deleted | format long %> %>

<% #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