feat: Add Shaarli Professional Theme with modern sidebar layout, light/dark mode, and pagination template.
This commit is contained in:
parent
0b6b45b1d7
commit
b21d97d179
@ -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;
|
||||||
|
}
|
||||||
|
|||||||
@ -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>
|
||||||
@ -28,5 +29,4 @@
|
|||||||
<a {loop="$value.attr" }{$key}="{$value}">{$value.html}</a>
|
<a {loop="$value.attr" }{$key}="{$value}">{$value.html}</a>
|
||||||
</div>
|
</div>
|
||||||
{/loop}
|
{/loop}
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
|
||||||
Loading…
x
Reference in New Issue
Block a user