feat: Introduce the new Shaarli-pro theme with its templates, styles, and scripts.
This commit is contained in:
+62
-230
@@ -1,3 +1,6 @@
|
||||
/* Google Font */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
|
||||
|
||||
/**
|
||||
* Shaarli Professional Theme - Bookmarkify Style
|
||||
* Modern Sidebar Layout + Light/Dark Mode
|
||||
@@ -120,6 +123,17 @@ a:hover {
|
||||
color: var(--primary-hover);
|
||||
}
|
||||
|
||||
/* Accessible Focus */
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
button:focus:not(:focus-visible),
|
||||
a:focus:not(:focus-visible) {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* ===== App Layout (Sidebar + Main) ===== */
|
||||
.app-layout {
|
||||
display: flex;
|
||||
@@ -1052,54 +1066,6 @@ input:checked+.theme-slider:before {
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* ===== Paging ===== */
|
||||
.paging {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1rem 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.paging-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.paging-current {
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.paging-current strong {
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.paging-total {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.85rem;
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
|
||||
.paging a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0.5rem;
|
||||
color: var(--text-main);
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.paging a:hover {
|
||||
background: var(--primary);
|
||||
border-color: var(--primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* ===== Links Grid/List ===== */
|
||||
.links-list {
|
||||
@@ -1830,47 +1796,8 @@ select:focus {
|
||||
box-shadow: 0 0 0 3px var(--primary-light);
|
||||
}
|
||||
|
||||
/* ===== Buttons ===== */
|
||||
.button-primary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
padding: 0.625rem 1.25rem;
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 0.5rem;
|
||||
font-weight: 500;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.button-primary:hover {
|
||||
background: var(--primary-hover);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.button-secondary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
padding: 0.625rem 1.25rem;
|
||||
background: var(--bg-card);
|
||||
color: var(--text-main);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0.5rem;
|
||||
font-weight: 500;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.button-secondary:hover {
|
||||
background: var(--border-light);
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
display: flex;
|
||||
@@ -2556,8 +2483,8 @@ select:focus {
|
||||
}
|
||||
|
||||
.picwall-pictureframe::after {
|
||||
content: '\eb82';
|
||||
font-family: 'remixicon';
|
||||
content: '\F03CC';
|
||||
font-family: 'Material Design Icons';
|
||||
position: absolute;
|
||||
top: 0.75rem;
|
||||
right: 0.75rem;
|
||||
@@ -3062,6 +2989,7 @@ select:focus {
|
||||
color: var(--primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Search Results Header (Tags) */
|
||||
.search-results-header {
|
||||
display: flex;
|
||||
@@ -3105,7 +3033,7 @@ select:focus {
|
||||
}
|
||||
|
||||
.search-tag-close:hover {
|
||||
background: rgba(0,0,0,0.1);
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@@ -3114,158 +3042,57 @@ select:focus {
|
||||
}
|
||||
|
||||
|
||||
/* Filter Badge Indicator */
|
||||
.filter-badge {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #ef4444;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--header-bg);
|
||||
}
|
||||
|
||||
.header-action-btn {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header-action-btn.has-active-filter {
|
||||
background: rgba(239, 68, 68, 0.2);
|
||||
}
|
||||
|
||||
/* Filter Info Banner */
|
||||
.filter-info-banner {
|
||||
display: flex;
|
||||
/* ===== Plugin Zone Styling ===== */
|
||||
/* Plugin buttons injected into paging (e.g., "Mark as Read") */
|
||||
.paging-plugin {
|
||||
display: inline-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;
|
||||
.paging-plugin a {
|
||||
display: inline-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;
|
||||
gap: 0.375rem;
|
||||
padding: 0.375rem 0.75rem;
|
||||
border-radius: 0.375rem;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
transition: background 0.2s ease;
|
||||
color: var(--text-secondary);
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
transition: all 0.2s ease;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.filter-clear-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.35);
|
||||
.paging-plugin a:hover {
|
||||
background: var(--primary-light);
|
||||
color: var(--primary);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.filter-clear-btn i {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* ===== Filter Info Banner ===== */
|
||||
.filter-info-banner {
|
||||
/* Plugin zone inside link cards */
|
||||
.link-plugin {
|
||||
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);
|
||||
gap: 0.25rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.filter-info-banner.empty-results {
|
||||
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
|
||||
}
|
||||
|
||||
.filter-info-content {
|
||||
display: flex;
|
||||
.link-plugin a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
font-size: 0.95rem;
|
||||
gap: 0.25rem;
|
||||
padding: 0.25rem 0.625rem;
|
||||
border-radius: 0.375rem;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.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;
|
||||
.link-plugin a:hover {
|
||||
background: var(--primary-light);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
/* Single page pagination - centered stats only */
|
||||
@@ -3353,8 +3180,12 @@ select:focus {
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.modal-body h1, .modal-body h2, .modal-body h3,
|
||||
.modal-body h4, .modal-body h5, .modal-body h6 {
|
||||
.modal-body h1,
|
||||
.modal-body h2,
|
||||
.modal-body h3,
|
||||
.modal-body h4,
|
||||
.modal-body h5,
|
||||
.modal-body h6 {
|
||||
margin-top: 1.5em;
|
||||
margin-bottom: 0.75em;
|
||||
color: var(--text-main);
|
||||
@@ -3370,7 +3201,8 @@ select:focus {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.modal-body pre, .modal-body code {
|
||||
.modal-body pre,
|
||||
.modal-body code {
|
||||
background: var(--bg-body);
|
||||
font-family: monospace;
|
||||
padding: 0.2rem 0.4rem;
|
||||
@@ -3385,4 +3217,4 @@ select:focus {
|
||||
/* Button style adjustment if needed */
|
||||
.view-desc-btn {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user