feat: Add Shaarli Professional Theme with modern sidebar layout, light/dark mode, and pagination template.

This commit is contained in:
Bruno Charest 2026-01-17 20:22:43 -05:00
parent 0b6b45b1d7
commit b21d97d179
2 changed files with 88 additions and 4 deletions

View File

@ -3172,3 +3172,87 @@ select:focus {
.filter-clear-btn i { .filter-clear-btn i {
font-size: 1rem; font-size: 1rem;
} }
/* ===== Filter Info Banner ===== */
.filter-info-banner {
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
color: white;
padding: 0.75rem 1.25rem;
border-radius: 8px;
margin: 1rem 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.filter-info-banner.empty-results {
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}
.filter-info-content {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.95rem;
}
.filter-info-content i {
font-size: 1.25rem;
opacity: 0.9;
}
.filter-info-content strong {
background: rgba(255, 255, 255, 0.25);
padding: 0.15rem 0.5rem;
border-radius: 4px;
font-weight: 600;
}
.filter-clear-btn {
display: flex;
align-items: center;
gap: 0.35rem;
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.3);
color: white;
padding: 0.4rem 0.75rem;
border-radius: 6px;
cursor: pointer;
font-size: 0.85rem;
font-weight: 500;
transition: background 0.2s ease;
}
.filter-clear-btn:hover {
background: rgba(255, 255, 255, 0.35);
}
.filter-clear-btn i {
font-size: 1rem;
}
/* Filter Badge on button */
.filter-badge {
position: absolute;
top: -2px;
right: -2px;
width: 10px;
height: 10px;
background: #ef4444;
border-radius: 50%;
border: 2px solid var(--header-bg);
}
.header-action-btn.has-active-filter {
position: relative;
}
/* Single page pagination - centered stats only */
.paging.single-page {
justify-content: center;
}
.paging.single-page .paging-stats {
margin: 0;
}

View File

@ -1,4 +1,3 @@
{if="$page_max > 1"}
{if="isset($result_count) && $result_count > 0"} {if="isset($result_count) && $result_count > 0"}
{$total=$result_count} {$total=$result_count}
{else} {else}
@ -14,12 +13,14 @@
{/if} {/if}
{$from=($page_current - 1) * $links_per_page + 1} {$from=($page_current - 1) * $links_per_page + 1}
{$to=min($total, ($page_current - 1) * $links_per_page + $links_per_page)} {$to=min($total, ($page_current - 1) * $links_per_page + $links_per_page)}
<div class="paging"> <div class="paging{if=" $page_max <=1"} single-page{/if}">
{if="$page_max > 1"}
<div class="paging-links"> <div class="paging-links">
{if="$next_page_url"}<a href="{$next_page_url}" class="paging-newer" title="Newer"><i class="mdi mdi-chevron-left"></i></a>{/if} {if="$next_page_url"}<a href="{$next_page_url}" class="paging-newer" title="Newer"><i class="mdi mdi-chevron-left"></i></a>{/if}
<div class="paging-current">page <strong>{$page_current}</strong> / {$page_max}</div> <div class="paging-current">page <strong>{$page_current}</strong> / {$page_max}</div>
{if="$previous_page_url"}<a href="{$previous_page_url}" class="paging-older" title="Older"><i class="mdi mdi-chevron-right"></i></a>{/if} {if="$previous_page_url"}<a href="{$previous_page_url}" class="paging-older" title="Older"><i class="mdi mdi-chevron-right"></i></a>{/if}
</div> </div>
{/if}
<div class="paging-stats"> <div class="paging-stats">
Bookmarks <strong>{$from}</strong> - <strong>{$to}</strong> / <strong>{$total}</strong> Bookmarks <strong>{$from}</strong> - <strong>{$to}</strong> / <strong>{$total}</strong>
</div> </div>
@ -29,4 +30,3 @@
</div> </div>
{/loop} {/loop}
</div> </div>
{/if}