mirror of https://github.com/helloxz/onenav.git
GitHub
11 changed files with 1804 additions and 5 deletions
@ -0,0 +1,297 @@
@@ -0,0 +1,297 @@
|
||||
<!DOCTYPE html> |
||||
<html lang="zh-cn"> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> |
||||
<title><?php echo $site['title']; ?> - <?php echo $site['subtitle']; ?></title> |
||||
<meta name="keywords" content="<?php echo $site['keywords']; ?>" /> |
||||
<meta name="description" content="<?php echo $site['description']; ?>" /> |
||||
|
||||
<!-- Bootstrap 4 CSS --> |
||||
<link rel="stylesheet" href="static/bootstrap4/css/bootstrap.min.css"> |
||||
<!-- Font Awesome --> |
||||
<link rel="stylesheet" href="static/font-awesome/4.7.0/css/font-awesome.css"> |
||||
<!-- Custom CSS --> |
||||
<link rel="stylesheet" href="templates/<?php echo $template; ?>/static/style.css?v=<?php echo $version; ?>"> |
||||
|
||||
<?php echo $site['custom_header']; ?> |
||||
<style> |
||||
<?php if( $theme_config->link_description == "hide" ) { ?> |
||||
.bookmark-description { |
||||
display: none; |
||||
} |
||||
<?php } ?> |
||||
</style> |
||||
</head> |
||||
<body> |
||||
<!-- Navigation --> |
||||
<nav class="navbar navbar-expand-lg navbar-light fixed-top shadow"> |
||||
<div class="container"> |
||||
<!-- Brand --> |
||||
<a class="navbar-brand fw-bold" href="/" title="<?php echo $site['description']; ?>"> |
||||
<i class="fa fa-bookmark-o me-2"></i> |
||||
<?php echo $site['title']; ?> |
||||
</a> |
||||
|
||||
<!-- Mobile menu toggle --> |
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" |
||||
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> |
||||
<span class="navbar-toggler-icon"></span> |
||||
</button> |
||||
|
||||
<!-- Navigation Links --> |
||||
<div class="collapse navbar-collapse" id="navbarNav"> |
||||
<ul class="navbar-nav ml-auto"> |
||||
<?php if( is_login() ) { ?> |
||||
<li class="nav-item"> |
||||
<a class="nav-link" href="/index.php?c=admin" target="_blank" title="后台管理"> |
||||
<i class="fa fa-cog"></i> 管理后台 |
||||
</a> |
||||
</li> |
||||
<?php } else { ?> |
||||
<li class="nav-item"> |
||||
<a class="nav-link" href="/index.php?c=login" target="_blank" title="登录"> |
||||
<i class="fa fa-sign-in"></i> 登录 |
||||
</a> |
||||
</li> |
||||
<?php } ?> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</nav> |
||||
|
||||
<!-- Main Content --> |
||||
<main class="main-content"> |
||||
<div class="container"> |
||||
<!-- Search Section --> |
||||
<section class="search-section"> |
||||
<div class="row justify-content-center"> |
||||
<div class="col-lg-8 col-md-10"> |
||||
<div class="search-container"> |
||||
<div class="search-box" id="searchBox"> |
||||
<i class="fa fa-search search-icon" aria-hidden="true"></i> |
||||
<input type="text" class="search-input" id="searchInput" placeholder="搜索书签..." autocomplete="off" /> |
||||
<button class="search-clear" id="clearSearch" type="button" title="清除"><i class="fa fa-times"></i></button> |
||||
</div> |
||||
<div class="search-suggestions" id="searchSuggestions"></div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
|
||||
<!-- Categories Navigation --> |
||||
<!-- 如果存在cid参数，则不显示 --> |
||||
<?php if( !isset($_GET['cid']) ) { ?> |
||||
<section class="categories-nav"> |
||||
<div class="category-tabs-scroll" id="catTabsScrollWrap"> |
||||
<button class="cat-scroll-btn prev" id="catScrollPrev" type="button" aria-label="向左"><i class="fa fa-angle-left"></i></button> |
||||
<div class="cat-scroll-inner" id="catScrollInner"> |
||||
<ul class="nav nav-tabs category-tabs flex-nowrap" id="categoryTabs" role="tablist"> |
||||
<li class="nav-item"> |
||||
<a class="nav-link active" href="javascript:void(0);" data-category="all" role="tab"> |
||||
<i class="fa fa-home"></i> 全部 |
||||
</a> |
||||
</li> |
||||
<?php foreach ($categorys as $category) { |
||||
$font_icon = empty($category['font_icon']) ? 'fa fa-folder' : $category['font_icon']; |
||||
?> |
||||
<li class="nav-item"> |
||||
<a class="nav-link" href="javascript:void(0);" data-category="<?php echo $category['id']; ?>" role="tab"> |
||||
<i class="<?php echo $font_icon; ?>"></i> |
||||
<?php echo htmlspecialchars_decode($category['name']); ?> |
||||
</a> |
||||
</li> |
||||
<?php } ?> |
||||
</ul> |
||||
</div> |
||||
<button class="cat-scroll-btn next" id="catScrollNext" type="button" aria-label="向右"><i class="fa fa-angle-right"></i></button> |
||||
</div> |
||||
</section> |
||||
<?php } ?> |
||||
|
||||
<!-- Back Button for Category View --> |
||||
<?php if( isset($_GET['cid']) ) { ?> |
||||
<section class="back-section"> |
||||
<div class="row"> |
||||
<div class="col-12"> |
||||
<a href="javascript:history.back()" class="btn btn-outline-primary btn-back"> |
||||
<i class="fa fa-arrow-left"></i> 返回 |
||||
</a> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
<?php } ?> |
||||
|
||||
<!-- Bookmarks Grid --> |
||||
<section class="bookmarks-section"> |
||||
<?php foreach ($categorys as $category) { |
||||
$fid = $category['id']; |
||||
$links = $get_links($fid); |
||||
$font_icon = empty($category['font_icon']) ? 'fa fa-folder' : $category['font_icon']; |
||||
|
||||
// 如果分类是私有的 |
||||
$property_icon = ($category['property'] == 1) ? '<i class="fa fa-lock text-warning ml-1" title="该分类是私有的，仅登录后可见！"></i>' : ''; |
||||
?> |
||||
|
||||
<div class="category-section" id="category-<?php echo $category['id']; ?>" data-category="<?php echo $category['id']; ?>"> |
||||
<div class="row"> |
||||
<div class="col-12"> |
||||
<h3 class="category-title"> |
||||
<i class="<?php echo $font_icon; ?> category-icon"></i> |
||||
<?php echo htmlspecialchars_decode($category['name']); ?> |
||||
<?php echo $property_icon; ?> |
||||
<span class="badge badge-secondary ml-2"><?php echo count($links); ?></span> |
||||
</h3> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="bookmarks-grid"> |
||||
<?php foreach ($links as $link) { |
||||
// 默认描述 |
||||
$link['description'] = empty($link['description']) ? '作者很懒，没有填写描述。' : $link['description']; |
||||
$id = $link['id']; |
||||
|
||||
// 直链模式 |
||||
if( $site['link_model'] === 'direct' ) { |
||||
$url = $link['url']; |
||||
} else { |
||||
$url = '/index.php?c=click&id='.$link['id']; |
||||
} |
||||
?> |
||||
<div class="bookmark-card" data-title="<?php echo $link['title']; ?>" |
||||
data-url="<?php echo $link['url']; ?>" data-description="<?php echo $link['description']; ?>"> |
||||
|
||||
<?php if($link['property'] == 1) { ?> |
||||
<div class="private-badge" title="改链接是私有的，仅登录后可见！"> |
||||
<i class="fa fa-lock"></i> |
||||
</div> |
||||
<?php } ?> |
||||
|
||||
<a href="<?php echo $url; ?>" target="_blank" class="bookmark-link"> |
||||
<div class="bookmark-header"> |
||||
<div class="bookmark-favicon"> |
||||
<?php if( $theme_config->favicon == "online") { |
||||
// 提取基础域名(协议+主机)，去掉路径 |
||||
$parsed_url = parse_url($link['url']); |
||||
if( isset($parsed_url['scheme']) && isset($parsed_url['host']) ){ |
||||
$favicon_domain = $parsed_url['scheme'].'://'.$parsed_url['host']; |
||||
} elseif( isset($parsed_url['host']) ){ |
||||
$favicon_domain = 'https://'.$parsed_url['host']; |
||||
} else { |
||||
$favicon_domain = $link['url']; |
||||
} |
||||
if ($link['font_icon']) { |
||||
$icon_url = $link['font_icon']; |
||||
} |
||||
else{ |
||||
$icon_url = "https://t0.gstatic.cn/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&size=32&url=".urlencode($favicon_domain); |
||||
} |
||||
?> |
||||
<img loading="lazy" src="<?php echo $icon_url; ?>" |
||||
width="24" height="24"> |
||||
<?php } else { |
||||
if ($link['font_icon']) { |
||||
$icon_url = $link['font_icon']; |
||||
} else { |
||||
$icon_url = "/index.php?c=ico&text=".$link['title']; |
||||
} |
||||
?> |
||||
<img loading="lazy" src="<?php echo $icon_url; ?>" |
||||
width="24" height="24"> |
||||
<?php } ?> |
||||
</div> |
||||
<div class="bookmark-title" title="<?php echo $link['title']; ?>"><?php echo $link['title']; ?></div> |
||||
</div> |
||||
<div class="bookmark-description"> |
||||
<?php echo $link['description']; ?> |
||||
</div> |
||||
<div class="bookmark-url"> |
||||
<?php echo parse_url($link['url'], PHP_URL_HOST); ?> |
||||
</div> |
||||
</a> |
||||
<div class="bookmark-actions bottom-right"> |
||||
<button class="btn btn-xs btn-action copy-link" data-url="<?php echo $link['url']; ?>" title="复制链接"> |
||||
<i class="fa fa-copy"></i> |
||||
</button> |
||||
<button class="btn btn-xs btn-action qr-code" data-url="<?php echo $link['url']; ?>" title="二维码"> |
||||
<i class="fa fa-qrcode"></i> |
||||
</button> |
||||
</div> |
||||
</div> |
||||
<?php } ?> |
||||
|
||||
<!-- More Button --> |
||||
<?php if( !isset($_GET['cid']) && get_links_number($fid) > $link_num ) { ?> |
||||
<div class="bookmark-card more-card"> |
||||
<a href="/index.php?cid=<?php echo $category['id']; ?>" class="more-link simple-more" aria-label="查看更多分类 <?php echo htmlspecialchars_decode($category['name']); ?> 的链接"> |
||||
<div class="more-text">查看更多</div> |
||||
<div class="more-count">还有 <?php echo get_links_number($fid) - $link_num; ?> 个链接</div> |
||||
</a> |
||||
</div> |
||||
<?php } ?> |
||||
</div> |
||||
</div> |
||||
<?php } ?> |
||||
</section> |
||||
</div> |
||||
</main> |
||||
|
||||
<!-- Footer --> |
||||
<footer class="site-footer"> |
||||
<div class="container"> |
||||
<div class="row"> |
||||
<div class="col-12 text-center"> |
||||
<?php if(empty( $site['custom_footer']) ){ ?> |
||||
<p>© <?php echo date("Y"); ?> Powered by |
||||
<a href="https://www.onenav.top/" target="_blank" rel="nofollow">OneNav</a> |
||||
</p> |
||||
<?php } else { |
||||
echo $site['custom_footer']; |
||||
} ?> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</footer> |
||||
|
||||
<!-- Floating Action Buttons --> |
||||
<div class="floating-actions"> |
||||
<?php if( is_login() ) { ?> |
||||
<button class="fab fab-add" id="addLinkBtn" title="快速添加链接"> |
||||
<i class="fa fa-plus"></i> |
||||
</button> |
||||
<?php } ?> |
||||
<button class="fab fab-top" id="backToTop" title="返回顶部"> |
||||
<i class="fa fa-arrow-up"></i> |
||||
</button> |
||||
</div> |
||||
|
||||
<!-- QR Code Modal --> |
||||
<div class="modal fade" id="qrModal" tabindex="-1" role="dialog"> |
||||
<div class="modal-dialog modal-dialog-centered" role="document"> |
||||
<div class="modal-content"> |
||||
<div class="modal-header"> |
||||
<h5 class="modal-title">二维码</h5> |
||||
<button type="button" class="close" data-dismiss="modal"> |
||||
<span>×</span> |
||||
</button> |
||||
</div> |
||||
<div class="modal-body text-center"> |
||||
<div id="qrcode"></div> |
||||
<p class="mt-3 text-muted" id="qrUrl"></p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- Scripts --> |
||||
<script src="static/js/jquery.min.js"></script> |
||||
<script src="static/bootstrap4/js/bootstrap.bundle.min.js"></script> |
||||
<script src="static/layer/layer.js"></script> |
||||
<script src="static/js/clipBoard.min.js"></script> |
||||
<script src="static/js/qrcode.min.js"></script> |
||||
<script src="templates/<?php echo $template; ?>/static/embed.js?v=<?php echo $version; ?>"></script> |
||||
<!-- <script> |
||||
<?php echo $onenav['right_menu']; ?> |
||||
</script> --> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,20 @@
@@ -0,0 +1,20 @@
|
||||
{ |
||||
"name": "Minima简约主题", |
||||
"description": "基于 Bootstrap 4 的现代化、响应式 OneNav 主题，让简约回归本质。", |
||||
"homepage": "https://www.onenav.top", |
||||
"help_url": "https://www.onenav.top", |
||||
"version": "1.0.0", |
||||
"update": "2025/08/14", |
||||
"author": "xiaoz", |
||||
"screenshot": "https://img.rss.ink/imgs/2025/08/14/10f90c5e185321a8.png", |
||||
"demo": "", |
||||
"require": { |
||||
"min": "1.1.4", |
||||
"max": "" |
||||
}, |
||||
"config": { |
||||
"full_width_mode": "off", |
||||
"link_description": "show", |
||||
"favicon": "online" |
||||
} |
||||
} |
||||
@ -0,0 +1,417 @@
@@ -0,0 +1,417 @@
|
||||
$(document).ready(function(){initTheme();initSearch();initBookmarks();initScrollEffects();initCategoryNav();}); |
||||
|
||||
/** |
||||
* Initialize theme functionality |
||||
*/ |
||||
function initTheme() { |
||||
// Initialize tooltips
|
||||
$('[data-toggle="tooltip"]').tooltip(); |
||||
|
||||
// Handle mobile menu
|
||||
$('.navbar-toggler').on('click', function() { |
||||
$('body').toggleClass('menu-open'); |
||||
}); |
||||
} |
||||
|
||||
/** |
||||
* Initialize search functionality |
||||
*/ |
||||
function initSearch() { |
||||
const $input = $('#searchInput'); |
||||
const $suggest = $('#searchSuggestions'); |
||||
const $clear = $('#clearSearch'); |
||||
let timer; |
||||
|
||||
// Search input handler
|
||||
$input.on('input', function() { |
||||
const q = this.value.toLowerCase().trim(); |
||||
|
||||
clearTimeout(timer); |
||||
timer = setTimeout(() => performSearch(q), 220); |
||||
|
||||
if (!q) { |
||||
$clear.hide(); |
||||
} else { |
||||
$clear.show(); |
||||
} |
||||
}); |
||||
|
||||
// Clear search on escape
|
||||
$input.on('keydown', e => { |
||||
if (e.key === 'Escape') { |
||||
clearSearch(); |
||||
} |
||||
}); |
||||
|
||||
// Clear button click
|
||||
$clear.on('click', () => { |
||||
clearSearch(); |
||||
$input.focus(); |
||||
}); |
||||
|
||||
// Hide suggestions when clicking outside
|
||||
$(document).on('click', function(e) { |
||||
if (!$(e.target).closest('.search-container').length) { |
||||
$suggest.hide(); |
||||
} |
||||
}); |
||||
|
||||
// Focus search with Ctrl+K or Cmd+K
|
||||
$(document).on('keydown', function(e) { |
||||
if ((e.ctrlKey || e.metaKey) && e.key === 'k') { |
||||
e.preventDefault(); |
||||
$input.focus(); |
||||
} |
||||
}); |
||||
} |
||||
|
||||
/** |
||||
* Perform search and show results |
||||
*/ |
||||
function performSearch(query) { |
||||
const searchSuggestions = $('#searchSuggestions'); |
||||
|
||||
if (!query) { |
||||
clearSearch(); |
||||
return; |
||||
} |
||||
|
||||
const bookmarks = $('.bookmark-card').not('.more-card'); |
||||
const matches = []; |
||||
|
||||
bookmarks.each(function() { |
||||
const $card = $(this); |
||||
const title = $card.data('title') || ''; |
||||
const url = $card.data('url') || ''; |
||||
const description = $card.data('description') || ''; |
||||
const searchText = (title + ' ' + url + ' ' + description).toLowerCase(); |
||||
if (searchText.includes(query)) { |
||||
matches.push({ |
||||
element: $card, |
||||
title: title, |
||||
url: url, |
||||
description: description, |
||||
score: calculateSearchScore(query, title, url, description) |
||||
}); |
||||
} |
||||
}); |
||||
matches.sort((a, b) => b.score - a.score); |
||||
displaySearchResults(matches, query); // 仅展示建议，不再过滤主列表
|
||||
} |
||||
|
||||
/** |
||||
* Calculate search relevance score |
||||
*/ |
||||
function calculateSearchScore(query, title, url, description) { |
||||
let score = 0; |
||||
const lowerQuery = query.toLowerCase(); |
||||
const lowerTitle = title.toLowerCase(); |
||||
const lowerUrl = url.toLowerCase(); |
||||
const lowerDesc = description.toLowerCase(); |
||||
|
||||
// Title matches are most important
|
||||
if (lowerTitle.includes(lowerQuery)) { |
||||
score += 10; |
||||
if (lowerTitle.startsWith(lowerQuery)) score += 5; |
||||
} |
||||
|
||||
// URL matches
|
||||
if (lowerUrl.includes(lowerQuery)) { |
||||
score += 5; |
||||
} |
||||
|
||||
// Description matches
|
||||
if (lowerDesc.includes(lowerQuery)) { |
||||
score += 2; |
||||
} |
||||
|
||||
return score; |
||||
} |
||||
|
||||
/** |
||||
* Display search suggestions |
||||
*/ |
||||
function displaySearchResults(matches, query) { |
||||
const searchSuggestions = $('#searchSuggestions'); |
||||
if (matches.length === 0) { |
||||
searchSuggestions.html('<div class="search-suggestion-item empty text-muted">没有找到匹配的书签</div>').show(); |
||||
return; |
||||
} |
||||
let html = ''; |
||||
matches.slice(0, 5).forEach(match => { // 限制最多 5 条
|
||||
const highlightedTitle = highlightText(match.title, query); |
||||
const domain = extractDomain(match.url); |
||||
html += ` |
||||
<div class="search-suggestion-item" data-url="${match.url}" title="${match.title}"> |
||||
<div class="ss-icon"> |
||||
<img src="/index.php?c=ico&text=${encodeURIComponent(match.title)}" width="28" height="28" alt="${match.title}"> |
||||
</div> |
||||
<div class="ss-meta"> |
||||
<div class="ss-title">${highlightedTitle}</div> |
||||
<div class="ss-domain">${domain}</div> |
||||
</div> |
||||
</div>`; |
||||
}); |
||||
searchSuggestions.html(html).show(); |
||||
$('.search-suggestion-item').off('click').on('click', function() { |
||||
const url = $(this).data('url'); |
||||
if (url) window.open(url, '_blank'); |
||||
}); |
||||
} |
||||
|
||||
/** |
||||
* Highlight text matches |
||||
*/ |
||||
function highlightText(text, query) { |
||||
if (!query) return text; |
||||
|
||||
const regex = new RegExp(`(${escapeRegex(query)})`, 'gi'); |
||||
return text.replace(regex, '<span class="search-highlight">$1</span>'); |
||||
} |
||||
|
||||
/** |
||||
* Escape regex special characters |
||||
*/ |
||||
function escapeRegex(string) { |
||||
return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); |
||||
} |
||||
|
||||
/** |
||||
* Extract domain from URL |
||||
*/ |
||||
function extractDomain(url) { |
||||
try { |
||||
return new URL(url).hostname; |
||||
} catch { |
||||
return url; |
||||
} |
||||
} |
||||
|
||||
/** |
||||
* Clear search results |
||||
*/ |
||||
function clearSearch() { |
||||
$('#searchInput').val(''); |
||||
$('#searchSuggestions').hide().empty(); |
||||
} |
||||
|
||||
/** |
||||
* Update category counts |
||||
*/ |
||||
function updateCategoryCounts() { |
||||
$('.category-section').each(function() { |
||||
const $section = $(this); |
||||
const visibleCount = $section.find('.bookmark-card:not(.d-none):not(.more-card)').length; |
||||
$section.find('.badge').text(visibleCount); |
||||
}); |
||||
} |
||||
|
||||
/** |
||||
* Initialize bookmark interactions |
||||
*/ |
||||
function initBookmarks() { |
||||
// Copy link functionality
|
||||
$(document).on('click', '.copy-link', function(e) { |
||||
e.preventDefault(); |
||||
e.stopPropagation(); |
||||
|
||||
const url = $(this).data('url'); |
||||
copyToClipboard(url); |
||||
showToast('链接已复制', 'success'); |
||||
}); |
||||
|
||||
// QR code functionality
|
||||
$(document).on('click', '.qr-code', function(e) { |
||||
e.preventDefault(); |
||||
e.stopPropagation(); |
||||
|
||||
const url = $(this).data('url'); |
||||
showQRCode(url); |
||||
}); |
||||
|
||||
// Add link functionality (for logged-in users)
|
||||
$('#addLinkBtn').on('click', function() { |
||||
window.open('/index.php?c=admin&page=add_link', '_blank'); |
||||
}); |
||||
} |
||||
|
||||
/** |
||||
* Copy text to clipboard |
||||
*/ |
||||
function copyToClipboard(text) { |
||||
if (navigator.clipboard && window.isSecureContext) { |
||||
navigator.clipboard.writeText(text); |
||||
} else { |
||||
const textArea = document.createElement('textarea'); |
||||
textArea.value = text; |
||||
textArea.style.position = 'fixed'; |
||||
textArea.style.left = '-999999px'; |
||||
textArea.style.top = '-999999px'; |
||||
document.body.appendChild(textArea); |
||||
textArea.focus(); |
||||
textArea.select(); |
||||
document.execCommand('copy'); |
||||
textArea.remove(); |
||||
} |
||||
} |
||||
|
||||
/** |
||||
* Show QR code modal |
||||
*/ |
||||
function showQRCode(url) { |
||||
$('#qrcode').empty(); |
||||
$('#qrUrl').text(url); |
||||
|
||||
try { |
||||
// 使用 qrcode.min.js 库（QRCode 构造函数）
|
||||
const qrobj = new QRCode('qrcode', { |
||||
text: url, |
||||
width: 180, |
||||
height: 180, |
||||
colorDark: '#1f2937', |
||||
colorLight: '#ffffff', |
||||
correctLevel: QRCode.CorrectLevel.H |
||||
}); |
||||
} catch (e) { |
||||
$('#qrcode').html('<p class="text-muted">二维码生成失败</p>'); |
||||
} |
||||
|
||||
$('#qrModal').modal('show'); |
||||
} |
||||
|
||||
/** |
||||
* Show simple toast notification |
||||
*/ |
||||
function showToast(message, type = 'info') { |
||||
const toastId = 'toast-' + Date.now(); |
||||
const alertClass = type === 'success' ? 'alert-success' : |
||||
type === 'error' ? 'alert-danger' : 'alert-info'; |
||||
|
||||
const toast = $(` |
||||
<div id="${toastId}" class="alert ${alertClass} alert-dismissible fade show position-fixed" |
||||
style="top: 100px; right: 20px; z-index: 9999; min-width: 250px;"> |
||||
${message} |
||||
<button type="button" class="close" data-dismiss="alert"> |
||||
<span>×</span> |
||||
</button> |
||||
</div> |
||||
`);
|
||||
|
||||
$('body').append(toast); |
||||
|
||||
// Auto remove after 2 seconds
|
||||
setTimeout(() => { |
||||
$(`#${toastId}`).alert('close'); |
||||
}, 2000); |
||||
} |
||||
|
||||
/** |
||||
* Initialize scroll effects |
||||
*/ |
||||
function initScrollEffects() { |
||||
const $backToTop = $('#backToTop'); |
||||
|
||||
// Back to top button
|
||||
$(window).on('scroll', function() { |
||||
if ($(this).scrollTop() > 300) { |
||||
$backToTop.addClass('show'); |
||||
} else { |
||||
$backToTop.removeClass('show'); |
||||
} |
||||
}); |
||||
|
||||
// Back to top click
|
||||
$backToTop.on('click', function() { |
||||
$('html, body').animate({ |
||||
scrollTop: 0 |
||||
}, 500); |
||||
}); |
||||
} |
||||
|
||||
/** |
||||
* Initialize category navigation |
||||
*/ |
||||
function initCategoryNav() { |
||||
const $tabs = $('#categoryTabs .nav-link'); |
||||
const $scroll = $('#categoryScroll'); |
||||
|
||||
// Handle category tab clicks
|
||||
$tabs.on('click', function(e) { |
||||
e.preventDefault(); |
||||
|
||||
const $t = $(this); |
||||
const cat = $t.data('category'); |
||||
|
||||
// Update active tab
|
||||
$tabs.removeClass('active'); |
||||
$t.addClass('active'); |
||||
|
||||
// Filter categories
|
||||
if (cat === 'all') { |
||||
$('.category-section').show(); |
||||
} else { |
||||
$('.category-section').hide(); |
||||
$('#category-' + cat).show(); |
||||
} |
||||
|
||||
// 计算当前tab在容器中的位置，自动滚动使其尽量居中
|
||||
const tabEl = this; |
||||
const container = $scroll.get(0); |
||||
const cRect = container.getBoundingClientRect(); |
||||
const tRect = tabEl.getBoundingClientRect(); |
||||
const offset = (tRect.left - cRect.left) - (cRect.width / 2 - tRect.width / 2); |
||||
container.scrollBy({ left: offset, behavior: 'smooth' }); |
||||
}); |
||||
} |
||||
|
||||
/** |
||||
* 删除 initCategoryNavArrows 相关调用后保留函数引用以防外部依赖（可选保留空） |
||||
*/ |
||||
function initCategoryNavArrows(){} |
||||
|
||||
// 重新初始化分类箭头（防止某些情况下未绑定）
|
||||
$(function(){ |
||||
if(typeof initCategoryNavArrows==='function'){ |
||||
initCategoryNavArrows(); |
||||
} |
||||
}); |
||||
|
||||
/** |
||||
* Initialize scrollable category tabs |
||||
*/ |
||||
function initScrollableCategoryTabs(){ |
||||
var $wrap = $('#catTabsScrollWrap'); |
||||
if(!$wrap.length) return; |
||||
var $inner = $('#catScrollInner'); |
||||
var $prev = $('#catScrollPrev'); |
||||
var $next = $('#catScrollNext'); |
||||
function maxScroll(){return $inner[0].scrollWidth - $inner[0].clientWidth;} |
||||
function update(){var sl=$inner.scrollLeft();var max=maxScroll();$prev.prop('disabled',sl<=2);$next.prop('disabled',sl>=max-2||max<=0);if(max<=0){$prev.hide();$next.hide();}else{$prev.show();$next.show();}} |
||||
function smoothTo(target){var start=$inner.scrollLeft();var max=maxScroll();target=Math.max(0,Math.min(target,max));if(Math.abs(target-start)<2){$inner.scrollLeft(target);update();return;}var dur=360;var t0=null;function step(ts){if(!t0)t0=ts;var p=Math.min(1,(ts-t0)/dur);var ease=1-Math.pow(1-p,3);var cur=start+(target-start)*ease;$inner.scrollLeft(cur);if(p<1)requestAnimationFrame(step);else update();}requestAnimationFrame(step);} |
||||
function stepSize(){return Math.max(120,Math.round($inner.width()*0.55));} |
||||
$prev.on('click',function(){smoothTo($inner.scrollLeft()-stepSize());}); |
||||
$next.on('click',function(){smoothTo($inner.scrollLeft()+stepSize());}); |
||||
$inner.on('scroll',update); |
||||
$(window).on('resize',update); |
||||
update(); |
||||
// 居中当前激活项（首次）
|
||||
var $active=$inner.find('.nav-link.active'); |
||||
if($active.length){var left=$active.position().left;var target=left-($inner.width()-$active.outerWidth())/2;smoothTo(target);} |
||||
// 点击自动居中
|
||||
$inner.on('click','.nav-link',function(){var left=$(this).position().left;var target=left-($inner.width()-$(this).outerWidth())/2;smoothTo(target);}); |
||||
} |
||||
$(document).ready(function(){initScrollableCategoryTabs();}); |
||||
|
||||
/** |
||||
* Handle responsive layout changes |
||||
*/ |
||||
function handleResponsiveLayout() { |
||||
// Any responsive adjustments can be added here
|
||||
// Currently handled by CSS Grid
|
||||
} |
||||
|
||||
// Handle window resize
|
||||
$(window).on('resize', handleResponsiveLayout); |
||||
|
||||
// Initialize responsive layout on load
|
||||
handleResponsiveLayout(); |
||||
@ -0,0 +1,912 @@
@@ -0,0 +1,912 @@
|
||||
/* OneNav Default3 Theme CSS - Simplified and Clean */ |
||||
|
||||
:root { |
||||
--primary-color: #007bff; |
||||
--secondary-color: #6c757d; |
||||
--success-color: #28a745; |
||||
--warning-color: #ffc107; |
||||
--danger-color: #dc3545; |
||||
--info-color: #17a2b8; |
||||
--light-color: #f8f9fa; |
||||
--dark-color: #343a40; |
||||
--white: #ffffff; |
||||
--gray-100: #f8f9fa; |
||||
--gray-200: #e9ecef; |
||||
--gray-300: #dee2e6; |
||||
--gray-400: #ced4da; |
||||
--gray-500: #adb5bd; |
||||
--gray-600: #6c757d; |
||||
--gray-700: #495057; |
||||
--gray-800: #343a40; |
||||
--gray-900: #212529; |
||||
|
||||
--border-radius: 0.375rem; |
||||
--border-radius-sm: 0.25rem; |
||||
--border-radius-lg: 0.5rem; |
||||
--shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); |
||||
--shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); |
||||
--shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175); |
||||
|
||||
--accent:#2563eb; /* 蓝色主色 */ |
||||
--accent-soft:#e0efff; |
||||
--bg:#f5f7fb; |
||||
--card-bg:#ffffff; |
||||
--card-border:#e5e7eb; |
||||
--card-border-hover:#d0d7e2; |
||||
--radius-sm:6px; |
||||
--radius:10px; |
||||
--radius-lg:18px; |
||||
--transition: .25s cubic-bezier(.4,.0,.2,1); |
||||
--text:#1f2933; |
||||
--text-soft:#5b6472; |
||||
--shadow-sm:0 1px 3px rgba(15,23,42,.06),0 1px 2px rgba(15,23,42,.08); |
||||
--shadow:0 4px 12px -2px rgba(15,23,42,.08),0 2px 6px -1px rgba(15,23,42,.06); |
||||
--shadow-lg:0 10px 28px -4px rgba(15,23,42,.15),0 6px 14px -2px rgba(15,23,42,.10); |
||||
--gradient-accent:linear-gradient(135deg,#2563eb,#3b82f6); |
||||
} |
||||
|
||||
/* Global Styles */ |
||||
body { |
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; |
||||
background-color: #f5f7fa; |
||||
min-height: 100vh; |
||||
padding-top: 80px; |
||||
line-height: 1.6; |
||||
color: var(--gray-800); |
||||
background:var(--bg); |
||||
color:var(--text); |
||||
font-family:"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif; |
||||
letter-spacing:.2px; |
||||
} |
||||
|
||||
/* Scrollbar Styling */ |
||||
::-webkit-scrollbar { |
||||
width: 8px; |
||||
} |
||||
|
||||
::-webkit-scrollbar-track { |
||||
background: var(--gray-100); |
||||
} |
||||
|
||||
::-webkit-scrollbar-thumb { |
||||
background: var(--gray-400); |
||||
border-radius: 4px; |
||||
} |
||||
|
||||
::-webkit-scrollbar-thumb:hover { |
||||
background: var(--gray-500); |
||||
} |
||||
|
||||
/* Navigation */ |
||||
.navbar { |
||||
background-color: var(--white) !important; |
||||
border-bottom: 1px solid var(--gray-200); |
||||
box-shadow: var(--shadow-sm); |
||||
backdrop-filter:saturate(180%) blur(14px); |
||||
background:rgba(255,255,255,.85)!important; |
||||
} |
||||
|
||||
.navbar-brand { |
||||
font-size: 1.5rem; |
||||
font-weight: 700; |
||||
color: var(--primary-color) !important; |
||||
text-decoration: none; |
||||
} |
||||
|
||||
.navbar-brand:hover { |
||||
color: var(--primary-color) !important; |
||||
opacity: 0.8; |
||||
} |
||||
|
||||
.nav-link { |
||||
color: var(--gray-700) !important; |
||||
font-weight: 500; |
||||
transition: color 0.3s ease; |
||||
} |
||||
|
||||
.nav-link:hover { |
||||
color: var(--primary-color) !important; |
||||
} |
||||
|
||||
/* Remove active tab border, keep underline */ |
||||
.category-tabs .nav-link, .category-tabs .nav-link:hover, .category-tabs .nav-link:focus {border:0!important;box-shadow:none!important;} |
||||
.category-tabs .nav-link.active {border:0!important;box-shadow:none!important;background:transparent!important;} |
||||
|
||||
/* Main Content */ |
||||
.main-content { |
||||
min-height: calc(100vh - 80px); |
||||
padding-bottom: 100px; |
||||
} |
||||
|
||||
/* Search Section */ |
||||
.search-section { |
||||
padding: 2rem 0; |
||||
margin-bottom: 1.5rem; |
||||
margin-bottom:1.25rem; |
||||
} |
||||
|
||||
.search-container { |
||||
position: relative; |
||||
} |
||||
|
||||
/* 搜索框新结构 */ |
||||
.search-box { |
||||
display: flex; |
||||
align-items: center; |
||||
background: #ffffff!important; |
||||
border: 1px solid #d6dde5!important; |
||||
border-radius: 32px!important; |
||||
padding: 0 0.85rem!important; |
||||
height: 52px!important; |
||||
gap: .65rem!important; |
||||
box-shadow: 0 6px 18px -6px rgba(30,64,175,.18),0 3px 8px -3px rgba(30,64,175,.12)!important; |
||||
backdrop-filter:none!important; |
||||
} |
||||
|
||||
.search-box:focus-within { |
||||
border-color: #2f6ff1!important; |
||||
box-shadow: 0 8px 26px -6px rgba(47,111,241,.28),0 4px 10px -4px rgba(47,111,241,.22)!important; |
||||
} |
||||
|
||||
.search-box .search-icon { |
||||
margin-left:.15rem; |
||||
color:#637182!important; |
||||
} |
||||
|
||||
.search-box .search-input { |
||||
flex: 1!important; |
||||
border: none!important; |
||||
background: transparent!important; |
||||
box-shadow: none!important; |
||||
padding: 0!important; |
||||
font-size: .95rem!important; |
||||
font-weight: 500!important; |
||||
height: 100%!important; |
||||
line-height: 52px!important; |
||||
outline: none!important; |
||||
} |
||||
|
||||
.search-box .search-input::placeholder { |
||||
color: #98a3b1!important; |
||||
font-weight: 400!important; |
||||
} |
||||
|
||||
.search-box .search-clear { |
||||
background: transparent!important; |
||||
border: none!important; |
||||
color: #8a97a6!important; |
||||
width: 30px!important; |
||||
height: 30px!important; |
||||
display: flex!important; |
||||
align-items: center!important; |
||||
justify-content: center!important; |
||||
border-radius: 50%!important; |
||||
transition: .25s!important; |
||||
} |
||||
|
||||
.search-box .search-clear:hover { |
||||
background: #eef3f8!important; |
||||
color: #2f6ff1!important; |
||||
} |
||||
|
||||
/* 移除旧的内层圆角/阴影影响 */ |
||||
.search-input { |
||||
border: none!important; |
||||
box-shadow: none!important; |
||||
border-radius: 0!important; |
||||
} |
||||
|
||||
/* Categories Navigation */ |
||||
.categories-nav { |
||||
margin-bottom: 2rem; |
||||
margin-bottom:1.6rem; |
||||
} |
||||
|
||||
.category-tabs { |
||||
border-bottom:1px solid rgba(0,0,0,.08); |
||||
overflow-x:auto; |
||||
white-space:nowrap; |
||||
flex-wrap:nowrap!important; |
||||
background: var(--white); |
||||
border-radius: var(--border-radius-lg); |
||||
padding: 1rem; |
||||
box-shadow: var(--shadow-sm); |
||||
border: 1px solid var(--gray-200); |
||||
padding:.5rem .75rem; |
||||
position:sticky; |
||||
top:70px; |
||||
z-index:50; |
||||
overflow:hidden; |
||||
} |
||||
|
||||
.category-tabs::-webkit-scrollbar { |
||||
height: 6px; |
||||
background: transparent; |
||||
} |
||||
|
||||
.category-tabs::-webkit-scrollbar-thumb { |
||||
background: rgba(0, 0, 0, .15); |
||||
border-radius: 3px; |
||||
} |
||||
|
||||
.category-tabs .nav-item { |
||||
margin-bottom: -1px; |
||||
} |
||||
|
||||
.category-tabs .nav-link { |
||||
position: relative; |
||||
font-weight: 500; |
||||
padding: .55rem 1rem; |
||||
border: 0; |
||||
background: transparent; |
||||
color: #4a5568; |
||||
transition: color .25s, background .25s; |
||||
display: inline-flex; |
||||
align-items: center; |
||||
gap: .4rem; |
||||
border-radius: .75rem; |
||||
} |
||||
|
||||
.category-tabs .nav-link i { |
||||
font-size: .95rem; |
||||
opacity: .8; |
||||
} |
||||
|
||||
.category-tabs .nav-link:hover { |
||||
color: #1f56c7; |
||||
background: rgba(31, 86, 199, .08); |
||||
} |
||||
|
||||
.category-tabs .nav-link.active { |
||||
color: #1f56c7; |
||||
background: #fff; |
||||
font-weight: 600; |
||||
} |
||||
|
||||
.category-tabs .nav-link.active::after { |
||||
content: ""; |
||||
position: absolute; |
||||
left: 14px; |
||||
right: 14px; |
||||
bottom: 0; |
||||
height: 3px; |
||||
border-radius: 2px; |
||||
background: linear-gradient(90deg, #2d6ae9, #1f56c7); |
||||
} |
||||
|
||||
@media (max-width: 767.98px) { |
||||
.category-tabs .nav-link { |
||||
padding: .5rem .85rem; |
||||
font-size: .875rem; |
||||
} |
||||
} |
||||
|
||||
/* Back Section */ |
||||
.back-section { |
||||
margin-bottom: 2rem; |
||||
} |
||||
|
||||
.btn-back { |
||||
border-radius: var(--border-radius); |
||||
font-weight: 500; |
||||
transition: all 0.3s ease; |
||||
} |
||||
|
||||
/* Bookmarks Section */ |
||||
.bookmarks-section { |
||||
margin-bottom: 4rem; |
||||
} |
||||
|
||||
.category-section { |
||||
margin-bottom: 3rem; |
||||
} |
||||
|
||||
.category-title { |
||||
color: var(--gray-800); |
||||
font-weight: 700; |
||||
font-size: 1.5rem; |
||||
margin-bottom: 1.5rem; |
||||
padding: 1rem 0; |
||||
border-bottom: 2px solid var(--gray-200); |
||||
display: flex; |
||||
align-items: center; |
||||
font-size:1.25rem; |
||||
margin:0 0 1.25rem; |
||||
padding:0 0 .75rem; |
||||
border-bottom:1px solid var(--card-border); |
||||
font-weight:600; |
||||
background:linear-gradient(90deg,rgba(37,99,235,.12),rgba(255,255,255,0)); |
||||
padding:.85rem 1rem .85rem .75rem; |
||||
border-radius: var(--radius); |
||||
border:1px solid var(--card-border); |
||||
} |
||||
|
||||
.category-icon { |
||||
margin-right: 0.75rem; |
||||
color: var(--primary-color); |
||||
color:var(--accent); |
||||
} |
||||
|
||||
/* Bookmark Cards */ |
||||
.bookmarks-grid { |
||||
display: grid; |
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); |
||||
gap: 1.5rem; |
||||
gap:1.1rem; |
||||
} |
||||
|
||||
.bookmark-card { |
||||
background: var(--white); |
||||
border-radius: var(--border-radius-lg); |
||||
padding: 1.25rem; |
||||
transition: all 0.3s ease; |
||||
box-shadow: var(--shadow-sm); |
||||
border: 1px solid var(--gray-200); |
||||
position: relative; |
||||
overflow: hidden; |
||||
height: auto; |
||||
min-height: 140px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
border:1px solid var(--card-border); |
||||
border-radius: var(--radius-lg); |
||||
background:var(--card-bg); |
||||
padding:1rem 1rem .9rem; |
||||
box-shadow:none; |
||||
transition:var(--transition); |
||||
min-height:auto; |
||||
position:relative; |
||||
} |
||||
|
||||
.bookmark-card:hover { |
||||
transform: translateY(-2px); |
||||
box-shadow: var(--shadow); |
||||
border-color: var(--gray-300); |
||||
border-color:var(--card-border-hover); |
||||
box-shadow:var(--shadow); |
||||
transform:translateY(-3px); |
||||
} |
||||
|
||||
.bookmark-card:after { |
||||
content: ""; |
||||
position: absolute; |
||||
inset: 0; |
||||
border: 1px solid transparent; |
||||
border-radius: inherit; |
||||
background: linear-gradient(120deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, 0) 35%) border-box; |
||||
mask: linear-gradient(#fff, #fff) padding-box, linear-gradient(#fff, #fff); |
||||
mask-composite: exclude; |
||||
pointer-events: none; |
||||
} |
||||
|
||||
.bookmark-card:hover:after { |
||||
background: linear-gradient(120deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 40%); |
||||
} |
||||
|
||||
.bookmark-link { |
||||
text-decoration: none; |
||||
color: inherit; |
||||
display: flex; |
||||
flex-direction: column; |
||||
height: 100%; |
||||
} |
||||
|
||||
.bookmark-link:hover { |
||||
text-decoration: none; |
||||
color: inherit; |
||||
} |
||||
|
||||
.bookmark-header { |
||||
display: flex; |
||||
align-items: flex-start; |
||||
margin-bottom: 0.75rem; |
||||
margin-bottom:.4rem; |
||||
align-items: center; |
||||
} |
||||
|
||||
.bookmark-favicon { |
||||
margin-right: 0.75rem; |
||||
flex-shrink: 0; |
||||
} |
||||
|
||||
.bookmark-favicon img { |
||||
border-radius: var(--border-radius-sm); |
||||
background: var(--gray-100); |
||||
padding: 2px; |
||||
background:transparent; |
||||
padding:0; |
||||
} |
||||
|
||||
.bookmark-title { |
||||
font-weight: 600; |
||||
color: var(--gray-800); |
||||
font-size: 1rem; |
||||
line-height: 1.4; |
||||
margin-bottom: 0.5rem; |
||||
flex: 1; |
||||
font-size:.95rem; |
||||
font-weight:600; |
||||
margin:0 0 .35rem; |
||||
display:-webkit-box; |
||||
-webkit-line-clamp:2; |
||||
-webkit-box-orient:vertical; |
||||
overflow:hidden; |
||||
padding-top:9px; |
||||
} |
||||
|
||||
/* Single line bookmark title override */ |
||||
.bookmark-title{display:block!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;-webkit-line-clamp:unset!important;-webkit-box-orient:unset!important;line-height:1.3!important;margin:0 0 .4rem!important;} |
||||
.bookmark-title{line-clamp:1!important;} |
||||
|
||||
/* Bookmark Description */ |
||||
.bookmark-description { |
||||
color: var(--gray-600); |
||||
font-size: 0.875rem; |
||||
line-height: 1.4; |
||||
margin-bottom: 0.75rem; |
||||
display: -webkit-box; |
||||
-webkit-line-clamp: 2; |
||||
line-clamp: 2; |
||||
-webkit-box-orient: vertical; |
||||
overflow: hidden; |
||||
flex: 1; |
||||
font-size:.78rem; |
||||
line-height:1.4; |
||||
margin:0 0 .55rem; |
||||
color:var(--text-soft); |
||||
-webkit-line-clamp:2; |
||||
line-clamp:2; |
||||
} |
||||
|
||||
/* 补充缺失的line-clamp标准属性 */ |
||||
.bookmark-card .bookmark-description{-webkit-line-clamp:2;line-clamp:2;} |
||||
|
||||
/* Bookmark URL */ |
||||
.bookmark-url { |
||||
color: var(--gray-500); |
||||
font-size: 0.8rem; |
||||
margin-top: auto; |
||||
padding-top: 0.5rem; |
||||
border-top: 1px solid var(--gray-100); |
||||
font-size:.68rem; |
||||
letter-spacing:.3px; |
||||
color:#64748b; |
||||
border-top:0; |
||||
padding-top:0; |
||||
margin-top:auto; |
||||
opacity:.85; |
||||
} |
||||
|
||||
/* Private Badge */ |
||||
.private-badge { |
||||
position: absolute; |
||||
top: 0.5rem; |
||||
right: 0.5rem; |
||||
background: var(--warning-color); |
||||
color: var(--white); |
||||
border-radius: 50%; |
||||
width: 20px; |
||||
height: 20px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
font-size: 0.7rem; |
||||
top:.55rem; |
||||
right:.6rem; |
||||
background:var(--accent); |
||||
width:18px; |
||||
height:18px; |
||||
font-size:.6rem; |
||||
box-shadow:0 2px 4px rgba(0,0,0,.15); |
||||
} |
||||
|
||||
/* Bookmark Actions */ |
||||
.bookmark-actions { |
||||
position: absolute; |
||||
top: 0.5rem; |
||||
left: 0.5rem; |
||||
opacity: 0; |
||||
transition: opacity 0.3s ease; |
||||
top:auto; |
||||
left:auto; |
||||
right:.55rem; |
||||
bottom:.55rem; |
||||
display:flex; |
||||
gap:.4rem; |
||||
opacity:0; |
||||
} |
||||
|
||||
.bookmark-card:hover .bookmark-actions { |
||||
opacity: 1; |
||||
} |
||||
|
||||
.bookmark-actions .btn { |
||||
margin-right: 0.25rem; |
||||
border-radius: 50%; |
||||
width: 28px; |
||||
height: 28px; |
||||
padding: 0; |
||||
display: inline-flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
font-size: 0.8rem; |
||||
background:rgba(255,255,255,.9); |
||||
border:1px solid var(--card-border); |
||||
color:var(--accent); |
||||
width:30px; |
||||
height:30px; |
||||
display:inline-flex; |
||||
align-items:center; |
||||
justify-content:center; |
||||
border-radius:10px; |
||||
backdrop-filter:blur(6px); |
||||
transition:var(--transition); |
||||
} |
||||
|
||||
.bookmark-actions .btn-action { |
||||
background:rgba(255,255,255,.9); |
||||
border:1px solid var(--card-border); |
||||
color:var(--accent); |
||||
width:30px; |
||||
height:30px; |
||||
display:inline-flex; |
||||
align-items:center; |
||||
justify-content:center; |
||||
border-radius:10px; |
||||
backdrop-filter:blur(6px); |
||||
transition:var(--transition); |
||||
} |
||||
|
||||
.btn-action:hover { |
||||
background:var(--accent); |
||||
color:#fff; |
||||
border-color:var(--accent); |
||||
} |
||||
|
||||
.btn-action i { |
||||
font-size:.85rem; |
||||
} |
||||
|
||||
/* More Card */ |
||||
.more-card { |
||||
background: var(--card-bg); |
||||
border: 1.5px dashed var(--card-border); |
||||
border-radius: var(--radius-lg); |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
position: relative; |
||||
overflow: hidden; |
||||
transition: var(--transition); |
||||
height:auto; |
||||
border:1px solid var(--card-border); |
||||
} |
||||
|
||||
/* Redesigned More Card */ |
||||
.more-card{position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:.85rem!important;min-height:140px!important;background:var(--card-bg)!important;border:1px solid var(--card-border)!important;border-radius:var(--radius-lg)!important;box-shadow:none!important;transition:var(--transition)!important;} |
||||
.more-card:before{display:none!important;} |
||||
.more-card .more-link{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;width:100%!important;height:100%!important;text-decoration:none!important;color:var(--text)!important;gap:.55rem!important;} |
||||
.more-card .more-icon{width:44px!important;height:44px!important;border-radius:14px!important;background:var(--accent-soft)!important;display:flex!important;align-items:center!important;justify-content:center!important;color:var(--accent)!important;font-size:1.05rem!important;margin:0!important;box-shadow:0 3px 8px -3px rgba(37,99,235,.25)!important;} |
||||
.more-card .more-text{font-size:.9rem!important;font-weight:600!important;color:var(--text)!important;} |
||||
.more-card .more-count{font-size:.65rem!important;letter-spacing:.4px!important;color:var(--text-soft)!important;background:rgba(0,0,0,.04)!important;padding:.25rem .5rem!important;border-radius:999px!important;} |
||||
.more-card:hover{transform:translateY(-4px)!important;box-shadow:var(--shadow)!important;border-color:var(--card-border-hover)!important;} |
||||
.more-card:hover .more-icon{background:var(--accent)!important;color:#fff!important;} |
||||
@media (max-width:992px){.more-card{min-height:130px!important;}.more-card .more-icon{width:42px!important;height:42px!important;}} |
||||
@media (max-width:560px){.more-card{min-height:120px!important;}} |
||||
|
||||
/* More card left icon two-line layout */ |
||||
.more-link.more-layout{flex-direction:row!important;align-items:center!important;justify-content:center!important;padding:1rem .9rem!important;gap:1rem!important;} |
||||
.more-link.more-layout .more-icon{flex:0 0 54px!important;width:54px!important;height:54px!important;border-radius:18px!important;font-size:1.25rem!important;} |
||||
.more-link.more-layout .more-info{display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;line-height:1.2!important;} |
||||
.more-link.more-layout .more-text{font-size:.95rem!important;margin:0 0 .35rem!important;} |
||||
.more-link.more-layout .more-count{background:rgba(0,0,0,.05)!important;padding:.3rem .65rem!important;border-radius:999px!important;font-size:.68rem!important;letter-spacing:.3px!important;} |
||||
@media (max-width:560px){.more-link.more-layout{gap:.85rem!important;padding:.85rem .75rem!important;}.more-link.more-layout .more-icon{flex:0 0 50px!important;width:50px!important;height:50px!important;font-size:1.1rem!important;}.more-link.more-layout .more-text{font-size:.9rem!important;}} |
||||
|
||||
/* Floating Actions */ |
||||
.floating-actions { |
||||
position: fixed; |
||||
bottom: 2rem; |
||||
right: 2rem; |
||||
z-index: 1000; |
||||
display: flex; |
||||
flex-direction: column; |
||||
gap: 1rem; |
||||
bottom:1.75rem; |
||||
right:1.5rem; |
||||
gap:.9rem; |
||||
} |
||||
|
||||
.floating-add-btn, |
||||
.back-to-top { |
||||
width: 50px; |
||||
height: 50px; |
||||
border-radius: 50%; |
||||
box-shadow: var(--shadow-lg); |
||||
border: none; |
||||
transition: all 0.3s ease; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.btn-floating { |
||||
background-color: var(--primary-color); |
||||
color: var(--white); |
||||
font-size: 1.25rem; |
||||
} |
||||
|
||||
.btn-floating:hover { |
||||
background-color: var(--primary-color); |
||||
transform: scale(1.05); |
||||
color: var(--white); |
||||
} |
||||
|
||||
.back-to-top { |
||||
background: var(--white); |
||||
color: var(--primary-color); |
||||
opacity: 0; |
||||
visibility: hidden; |
||||
} |
||||
|
||||
.back-to-top.show { |
||||
opacity: 1; |
||||
visibility: visible; |
||||
} |
||||
|
||||
.back-to-top:hover { |
||||
background: var(--white); |
||||
transform: scale(1.05); |
||||
color: var(--primary-color); |
||||
} |
||||
|
||||
/* Footer */ |
||||
.site-footer { |
||||
background: var(--white); |
||||
border-top: 1px solid var(--gray-200); |
||||
padding: 2rem 0; |
||||
margin-top: 3rem; |
||||
} |
||||
|
||||
.site-footer p { |
||||
margin: 0; |
||||
color: var(--gray-600); |
||||
} |
||||
|
||||
.site-footer a { |
||||
color: var(--primary-color); |
||||
text-decoration: none; |
||||
} |
||||
|
||||
.site-footer a:hover { |
||||
text-decoration: underline; |
||||
} |
||||
|
||||
/* QR Code Modal */ |
||||
.modal-content { |
||||
border-radius: var(--border-radius-lg); |
||||
border: none; |
||||
box-shadow: var(--shadow-lg); |
||||
} |
||||
|
||||
.modal-header { |
||||
border-bottom: 1px solid var(--gray-200); |
||||
border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0; |
||||
} |
||||
|
||||
.modal-body { |
||||
padding: 2rem; |
||||
} |
||||
|
||||
#qrcode { |
||||
display: flex; |
||||
justify-content: center; |
||||
} |
||||
|
||||
/* Responsive Design */ |
||||
@media (max-width: 1200px) { |
||||
.bookmarks-grid { |
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); |
||||
} |
||||
} |
||||
|
||||
@media (max-width: 992px){ |
||||
.bookmark-title {font-size:.92rem;} |
||||
.bookmark-description {-webkit-line-clamp:2;line-clamp:2;} |
||||
.bookmark-card {padding:0.9rem 0.9rem .85rem;} |
||||
.category-tabs {top:65px;} |
||||
} |
||||
|
||||
@media (max-width: 768px) { |
||||
body { |
||||
padding-top: 70px; |
||||
} |
||||
|
||||
.search-section { |
||||
padding: 1.5rem 0; |
||||
} |
||||
|
||||
.category-tabs { |
||||
padding: 0.75rem; |
||||
} |
||||
|
||||
.nav-pills .nav-link { |
||||
padding: 0.5rem 1rem; |
||||
margin: 0.125rem; |
||||
font-size: 0.9rem; |
||||
} |
||||
|
||||
.category-title { |
||||
font-size: 1.25rem; |
||||
margin-bottom: 1rem; |
||||
} |
||||
|
||||
.bookmarks-grid { |
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); |
||||
gap: 1rem; |
||||
} |
||||
|
||||
.floating-actions { |
||||
bottom: 1rem; |
||||
right: 1rem; |
||||
} |
||||
|
||||
.floating-add-btn, |
||||
.back-to-top { |
||||
width: 45px; |
||||
height: 45px; |
||||
} |
||||
} |
||||
|
||||
@media (max-width: 560px){ |
||||
.bookmarks-grid {grid-template-columns:repeat(auto-fill,minmax(180px,1fr));} |
||||
.bookmark-title {-webkit-line-clamp:2;line-clamp:2;} |
||||
.fab {width:48px;height:48px;} |
||||
} |
||||
|
||||
@media (max-width: 440px){ |
||||
.bookmarks-grid {grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.75rem;} |
||||
#categoryTabs .nav-link {padding:.45rem .75rem;font-size:.78rem;} |
||||
.bookmark-actions {right:.4rem;bottom:.4rem;} |
||||
} |
||||
|
||||
/* Search highlighting */ |
||||
.search-highlight { |
||||
background-color: #fff3cd; |
||||
padding: 0.125rem 0.25rem; |
||||
border-radius: var(--border-radius-sm); |
||||
} |
||||
|
||||
/* Loading animation */ |
||||
.loading { |
||||
opacity: 0.6; |
||||
pointer-events: none; |
||||
} |
||||
|
||||
/* Animations */ |
||||
@keyframes fadeInUp { |
||||
from { |
||||
opacity: 0; |
||||
transform: translateY(20px); |
||||
} |
||||
to { |
||||
opacity: 1; |
||||
transform: translateY(0); |
||||
} |
||||
} |
||||
|
||||
.bookmark-card { |
||||
animation: fadeInUp 0.4s ease-out; |
||||
} |
||||
|
||||
/* Focus states for accessibility */ |
||||
.bookmark-card:focus-within, |
||||
.nav-link:focus, |
||||
.search-input:focus, |
||||
.btn:focus { |
||||
outline: 2px solid var(--primary-color); |
||||
outline-offset: 2px; |
||||
} |
||||
|
||||
/* Print styles */ |
||||
@media print { |
||||
.navbar, |
||||
.floating-actions, |
||||
.bookmark-actions { |
||||
display: none !important; |
||||
} |
||||
|
||||
body { |
||||
padding-top: 0; |
||||
background: var(--white); |
||||
} |
||||
|
||||
.bookmark-card { |
||||
break-inside: avoid; |
||||
box-shadow: none; |
||||
border: 1px solid var(--gray-300); |
||||
} |
||||
} |
||||
|
||||
body:before { |
||||
content: ""; |
||||
position: fixed; |
||||
inset: 0; |
||||
pointer-events: none; |
||||
background: radial-gradient(circle at 80% 10%, rgba(37, 99, 235, .10), transparent 60%), radial-gradient(circle at 10% 70%, rgba(59, 130, 246, .10), transparent 55%); |
||||
display:none!important; |
||||
} |
||||
|
||||
/* === Category Nav Adjustments Override === */ |
||||
.category-tabs.with-fade {padding:.6rem 2.4rem!important;box-shadow:none!important;border:1px solid #e2e8f0!important;background:#fff!important;} |
||||
.cat-nav-arrow {display:flex!important;opacity:1!important;visibility:visible!important;z-index:5!important;} |
||||
.cat-nav-arrow.left {left:.55rem!important;} |
||||
.cat-nav-arrow.right {right:.55rem!important;} |
||||
.cat-fade {display:none!important;} /* 去掉淡出遮罩避免视觉压迫 */ |
||||
.category-scroll {padding:0!important;} |
||||
#categoryTabs {padding-left:0!important;padding-right:0!important;} |
||||
/* 去掉全局蓝色背景光影响分类下缘 */ |
||||
body:before {display:none!important;} |
||||
/* 去除可能的底部伪阴影 */ |
||||
.categories-nav {box-shadow:none!important;} |
||||
/* add standard line-clamp for compatibility */ |
||||
.bookmark-card .desc{-webkit-line-clamp:2;line-clamp:2;} |
||||
|
||||
/* Horizontal scroll category nav wrapper */ |
||||
.category-tabs-scroll{position:relative;display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;} |
||||
.category-tabs-scroll .cat-scroll-inner{overflow-x:auto;flex:1;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;} |
||||
.category-tabs-scroll .cat-scroll-inner::-webkit-scrollbar{height:6px;background:transparent;} |
||||
.category-tabs-scroll .cat-scroll-inner::-webkit-scrollbar-thumb{background:rgba(0,0,0,.18);border-radius:3px;} |
||||
.cat-scroll-btn{flex:0 0 38px;height:38px;border:0;border-radius:12px;background:rgba(31,86,199,.08);color:#1f56c7;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .25s;font-size:1.05rem;} |
||||
.cat-scroll-btn:hover{background:#1f56c7;color:#fff;box-shadow:0 4px 12px -4px rgba(31,86,199,.45);} |
||||
.cat-scroll-btn:disabled{opacity:.35;cursor:default;background:rgba(0,0,0,.05);color:#666;box-shadow:none;} |
||||
.category-tabs-scroll .category-tabs{border-bottom:0;display:inline-flex;flex-wrap:nowrap;white-space:nowrap;} |
||||
.category-tabs-scroll .category-tabs .nav-link{margin-right:.25rem;} |
||||
@media (max-width:767.98px){.cat-scroll-btn{flex:0 0 34px;height:34px;font-size:.95rem;border-radius:10px;}} |
||||
|
||||
/* Simplified More Link Style */ |
||||
.more-link.simple-more{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:.55rem!important;padding:1.1rem .75rem!important;text-align:center!important;} |
||||
.more-link.simple-more .more-text{font-size:.9rem!important;} |
||||
.more-link.simple-more .more-count{padding:.25rem .6rem!important;font-size:.65rem!important;} |
||||
.more-card:hover .more-text{color:var(--accent)!important;} |
||||
/* === More Card Height Adjustments === */ |
||||
.more-card{min-height:auto!important;padding:.9rem .9rem!important;} |
||||
.more-link.simple-more{padding:.6rem .6rem!important;gap:.4rem!important;} |
||||
.more-link.simple-more .more-text{font-size:.9rem!important;} |
||||
.more-link.simple-more .more-count{padding:.25rem .6rem!important;font-size:.65rem!important;} |
||||
|
||||
/* Final override: remove active/focus border (outline) for category tabs */ |
||||
.nav-tabs{border-bottom:0!important;} |
||||
.category-tabs .nav-link, .category-tabs .nav-link:hover, .category-tabs .nav-link:focus, .category-tabs .nav-link.active, .nav-tabs .nav-link, .nav-tabs .nav-link:focus, .nav-tabs .nav-link.active {border:0!important;box-shadow:none!important;outline:none!important;background:transparent!important;} |
||||
/* Keep accessibility: custom subtle focus ring only when keyboard (focus-visible) */ |
||||
.category-tabs .nav-link:focus-visible {outline:2px solid rgba(37,99,235,.45)!important;outline-offset:3px!important;border-radius:.9rem!important;} |
||||
/* === Floating Action Buttons Modern Style Override === */ |
||||
.fab{appearance:none;background:var(--accent);background:var(--gradient-accent);color:#fff;border:0;cursor:pointer;width:54px;height:54px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:1.15rem;font-weight:500;box-shadow:0 8px 18px -6px rgba(37,99,235,.45),0 4px 10px -4px rgba(37,99,235,.35);transition:var(--transition);position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent;} |
||||
.fab:before{content:"";position:absolute;inset:0;background:linear-gradient(140deg,rgba(255,255,255,.32),rgba(255,255,255,0) 60%);pointer-events:none;mix-blend-mode:overlay;} |
||||
.fab-add{background:var(--gradient-accent);} |
||||
.fab-top{background:#fff;color:var(--accent);border:1px solid var(--card-border);box-shadow:0 4px 12px -4px rgba(15,23,42,.18),0 2px 6px -4px rgba(15,23,42,.12);} |
||||
.fab:hover{transform:translateY(-4px);box-shadow:0 14px 30px -8px rgba(37,99,235,.55),0 6px 14px -6px rgba(37,99,235,.45);} |
||||
.fab-top:hover{background:var(--accent-soft);border-color:var(--card-border-hover);box-shadow:0 10px 24px -8px rgba(15,23,42,.28),0 4px 10px -4px rgba(15,23,42,.18);} |
||||
.fab:active{transform:translateY(-1px) scale(.95);box-shadow:0 6px 16px -6px rgba(37,99,235,.5);} |
||||
.fab-top:active{box-shadow:0 6px 14px -6px rgba(15,23,42,.25);} |
||||
.fab i{pointer-events:none;} |
||||
.fab:focus-visible{outline:2px solid rgba(37,99,235,.55);outline-offset:4px;} |
||||
@media (max-width:640px){.fab{width:50px;height:50px;border-radius:16px;font-size:1.05rem;}} |
||||
|
||||
/* === Search Suggestions Enhanced Style === */ |
||||
.search-suggestions{position:absolute;top:58px;left:0;right:0;background:#fff;border:1px solid #d8e1ea;border-radius:20px;padding:.4rem .4rem .5rem;box-shadow:0 14px 34px -10px rgba(37,99,235,.25),0 6px 16px -6px rgba(15,23,42,.15);z-index:120;max-height:360px;overflow-y:auto;backdrop-filter:saturate(180%) blur(8px);display:none;} |
||||
.search-suggestions::-webkit-scrollbar{width:6px;} |
||||
.search-suggestions::-webkit-scrollbar-thumb{background:rgba(0,0,0,.18);border-radius:3px;} |
||||
.search-suggestion-item{display:flex;align-items:center;gap:.85rem;padding:.65rem .75rem;border-radius:14px;transition:var(--transition);cursor:pointer;position:relative;} |
||||
.search-suggestion-item + .search-suggestion-item{margin-top:.15rem;} |
||||
.search-suggestion-item:hover{background:#f1f6fd;box-shadow:0 4px 10px -4px rgba(37,99,235,.25);} |
||||
.search-suggestion-item:active{transform:scale(.97);} |
||||
.search-suggestion-item.empty{cursor:default;box-shadow:none;background:transparent;} |
||||
.search-suggestion-item.empty:hover{background:transparent;} |
||||
.search-suggestion-item .ss-icon{flex:0 0 42px;width:42px;height:42px;border-radius:12px;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 3px 8px -3px rgba(37,99,235,.35);} |
||||
.search-suggestion-item .ss-icon img{width:28px;height:28px;border-radius:6px;display:block;} |
||||
.search-suggestion-item .ss-meta{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2;} |
||||
.search-suggestion-item .ss-title{font-size:.95rem;font-weight:600;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} |
||||
.search-suggestion-item .ss-domain{font-size:.7rem;letter-spacing:.4px;color:#64748b;margin-top:.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} |
||||
.search-highlight{background:#ffe7a3;padding:.15rem .35rem;border-radius:6px;color:#111;font-weight:500;} |
||||
@media (max-width:640px){.search-suggestions{top:56px;border-radius:18px;}.search-suggestion-item{padding:.6rem .65rem;gap:.75rem;}.search-suggestion-item .ss-icon{flex:0 0 38px;width:38px;height:38px;border-radius:11px;}} |
||||
@ -0,0 +1,47 @@
@@ -0,0 +1,47 @@
|
||||
// OneNav Default3 Theme Service Worker
|
||||
const CACHE_NAME = 'onenav-default3-v1.0.0'; |
||||
const urlsToCache = [ |
||||
'/templates/default3/static/style.css', |
||||
'/templates/default3/static/embed.js', |
||||
'/static/bootstrap4/css/bootstrap.min.css', |
||||
'/static/bootstrap4/js/bootstrap.bundle.min.js', |
||||
'/static/js/jquery.min.js', |
||||
'/static/font-awesome/4.7.0/css/font-awesome.css' |
||||
]; |
||||
|
||||
// Install event
|
||||
self.addEventListener('install', function(event) { |
||||
event.waitUntil( |
||||
caches.open(CACHE_NAME) |
||||
.then(function(cache) { |
||||
return cache.addAll(urlsToCache); |
||||
}) |
||||
); |
||||
}); |
||||
|
||||
// Fetch event
|
||||
self.addEventListener('fetch', function(event) { |
||||
event.respondWith( |
||||
caches.match(event.request) |
||||
.then(function(response) { |
||||
// Return cached version or fetch from network
|
||||
return response || fetch(event.request); |
||||
} |
||||
) |
||||
); |
||||
}); |
||||
|
||||
// Activate event
|
||||
self.addEventListener('activate', function(event) { |
||||
event.waitUntil( |
||||
caches.keys().then(function(cacheNames) { |
||||
return Promise.all( |
||||
cacheNames.map(function(cacheName) { |
||||
if (cacheName !== CACHE_NAME) { |
||||
return caches.delete(cacheName); |
||||
} |
||||
}) |
||||
); |
||||
}) |
||||
); |
||||
}); |
||||
Loading…
Reference in new issue