}
/**
- * CONTENT
+ * CONTENT - GENERAL
*/
#content {
position: relative;
box-shadow: 0 -2px 1em #797979;
z-index: 2;
background: url(../img/noise.png) #979797;
+}
+
+/**
+ * CONTENT - LINKLIST PAGING
+ */
+@media screen and (min-width: 35.5em) {
+ .linklist-paging {
+ margin: 2.1em 0 0 0;
+ }
+}
+
+@media screen and (min-width: 64em) {
+ .linklist-paging {
+ margin: 0;
+ }
+}
+
+.linklist-filters {
+ margin: 10px 0;
+ color: #252525;
+}
+
+.linklist-filters span {
+ margin: 0 0 0 10px;
+}
+
+.linklist-filters a {
+ padding: 2px 5px;
+ text-decoration: none;
+}
+
+.linklist-filters .filter-off {
+ color: #252525;
+ background: #c8c8c8;
+}
+
+.linklist-filters .filter-on {
+ color: #b0ddce;
+ background: #1b926c;
+}
+
+.linklist-pages {
+ margin: 10px 0;
+ color: #252525;
+ text-align: center;
+}
+
+.linklist-pages a {
+ color: #252525;
+ text-decoration: none;
+}
+
+.linklist-pages a:hover {
+ color: #fff;
+}
+
+.linksperpage {
+ margin: 10px 0;
+ text-align: right;
+ color: #252525;
+}
+
+.linksperpage a {
+ padding: 2px 5px;
+ text-decoration: none;
+ color: #252525;
+ background: #c8c8c8;
+ border: solid 1px #979797;
+}
+
+.linksperpage form {
+ display: inline;
+ margin: 0 10px 0 0;
+}
+
+.linksperpage input[type="text"] {
+ width: 28px;
+ height: 20px;
+ margin: 0 0 5px 0;
+ padding: 3px 5px 3px 8px;
+ background: #c8c8c8;
+ border: medium none currentColor;
+ border-radius: 25px;
+ box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 4px rgba(0, 0, 0, 0.298) inset;
+ color: #252525;
+ font-size: 0.8em;
}
\ No newline at end of file
-<div class="paging">
-{if="isLoggedIn()"}
- <div class="paging_privatelinks">
- <a href="?privateonly">
- {if="$privateonly"}
- <img src="images/private_16x16_active.png#" width="16" height="16" title="Click to see all links" alt="Click to see all links">
- {else}
- <img src="images/private_16x16.png#" width="16" height="16" title="Click to see only private links" alt="Click to see only private links">
- {/if}
- </a>
+<div class="linklist-paging">
+ <div class="paging pure-g">
+ <div class="linklist-filters pure-u-1-3">
+ {if="isLoggedIn() or !empty($action_plugin)"}
+ <span class="linklist-filters-text">
+ Filters:
+ </span>
+ {if="isLoggedIn()"}
+ <a href="?privateonly" title="Click to see all links"
+ class={if="$privateonly"}"filter-on"{else}"filter-off"{/if}
+ ><i class="fa fa-key"></i></a>
+ {/if}
+ {loop="$action_plugin"}
+ <!-- FIXME! Plugin update to handle that. -->
+ <a href="?privateonly" title="{$value.title}" class=
+ {if="$value.on"}
+ "filter-on"
+ {else}
+ "filter-off"
+ {/if}
+ >{$value.url}</a>
+ {/loop}
+ {/if}
+ </div>
+ <div class="linklist-pages pure-u-1-3">
+ {if="$previous_page_url"}
+ <a href="{$previous_page_url}" class="paging_older">
+ <i class="fa fa-long-arrow-left"></i> Older
+ </a>
+ {/if}
+ {if="$page_max>1"}{$page_current} / {$page_max}{/if}
+ {if="$next_page_url"}
+ <a href="{$next_page_url}" class="paging_newer">
+ Newer <i class="fa fa-long-arrow-right"></i>
+ </a>
+ {/if}
</div>
-{/if}
- {loop="$action_plugin"}
- {$value}
- {/loop}
- <div class="paging_linksperpage">
- Links per page: <a href="?linksperpage=20">20</a> <a href="?linksperpage=50">50</a> <a href="?linksperpage=100">100</a>
- <form method="GET" class="linksperpage"><input type="text" name="linksperpage" size="2"></form>
+
+ <div class="linksperpage pure-u-1-3">
+ Links per page:
+ <a href="?linksperpage=20">20</a>
+ <a href="?linksperpage=50">50</a>
+ <a href="?linksperpage=100">100</a>
+ <form method="GET">
+ <input type="text" name="linksperpage" size="2">
+ </form>
</div>
- {if="$previous_page_url"} <a href="{$previous_page_url}" class="paging_older">◄Older</a> {/if}
- <div class="paging_current">page {$page_current} / {$page_max} </div>
- {if="$next_page_url"} <a href="{$next_page_url}" class="paging_newer">Newer►</a> {/if}
-</div>
+ </div>
+</div>
\ No newline at end of file
projects / github / shaarli / Shaarli.git / commitdiff
