diff --git a/main/fclite.css b/main/fclite.css index 7902980..5c5076a 100644 --- a/main/fclite.css +++ b/main/fclite.css @@ -26,7 +26,7 @@ --shadow-color: var(--shadow-color-light); --border-color: var(--border-color-light); --modal-bg-color: rgba(255, 255, 255, 0.5); - --modal-content-bg-color: rgba(239, 250, 255, 0.7); + --modal-content-bg-color: rgba(239, 250, 255, 0.5); --load-more-btn-bg-color: var(--container-bg-color); } @@ -155,10 +155,10 @@ body { #modal-author-avatar { display: block; - margin: 0 auto 10px; + margin: 0 auto; border-radius: 50%; - width: 80px; - height: 80px; + width: 100px; + height: 100px; object-fit: cover; } @@ -166,7 +166,7 @@ body { display: block; text-align: center; font-size: 15px; - margin: 25px 0; + margin: 15px 0; color: var(--hover-color); text-decoration: none; } @@ -242,6 +242,11 @@ body { flex-direction: column; justify-content: space-between; height: 150px; + transition: border 0.3s; +} + +.card:hover { + border: 1px solid var(--hover-color); } .card-title { @@ -319,6 +324,13 @@ body { width: 140px; height: 140px; opacity: 0.4; + transition: transform 0.6s ease, bottom 0.3s ease, right 0.3s ease; /* 0.3秒的平滑过渡效果 */ +} + +#friend-circle-lite-root .card:hover .card-bg { + transform: scale(1.1); + bottom: -10px; + right: -8px; } #load-more-btn { @@ -327,7 +339,7 @@ body { background-color: var(--container-bg-color); cursor: pointer; width: 200px; - border-radius: 20px; + border-radius: 10px; border: 1px solid var(--border-color); padding: 3px; transition: all 0.3s; diff --git a/main/fclite.js b/main/fclite.js index 1047598..9cd9dfd 100644 --- a/main/fclite.js +++ b/main/fclite.js @@ -17,7 +17,7 @@ function initialize_fc_lite() { const loadMoreBtn = document.createElement('button'); loadMoreBtn.id = 'load-more-btn'; - loadMoreBtn.innerText = '显示更多'; + loadMoreBtn.innerText = '再来亿点'; root.appendChild(loadMoreBtn); // 创建统计信息容器 @@ -42,7 +42,7 @@ function initialize_fc_lite() { } } - fetch(`${UserConfig.private_api_url}all.json`) + fetch(`${UserConfig.private_api_url}all`) .then(response => response.json()) .then(data => { localStorage.setItem(cacheKey, JSON.stringify(data)); @@ -50,7 +50,7 @@ function initialize_fc_lite() { processArticles(data); }) .finally(() => { - loadMoreBtn.innerText = '显示更多'; // 恢复按钮文本 + loadMoreBtn.innerText = '再来亿点'; // 恢复按钮文本 }); } @@ -152,7 +152,7 @@ function initialize_fc_lite() { const authorArticles = allArticles.filter(article => article.author === author); // 仅仅取前五个,防止文章过多导致模态框过长,如果不够五个则全部取出 - authorArticles.slice(0, 5).forEach(article => { + authorArticles.slice(0, 4).forEach(article => { const articleDiv = document.createElement('div'); articleDiv.className = 'modal-article'; @@ -203,12 +203,19 @@ function initialize_fc_lite() { }; }; -document.addEventListener("DOMContentLoaded", function() { - setTimeout(initialize_fc_lite, 0); -}); +//document.addEventListener("DOMContentLoaded", function() { +// setTimeout(initialize_fc_lite, 0); +//}); -document.addEventListener('pjax:complete', function() { - setTimeout(initialize_fc_lite, 0); -}); +//document.addEventListener('pjax:complete', function() { +// setTimeout(initialize_fc_lite, 0); +//}); -setTimeout(initialize_fc_lite, 0); +//setTimeout(initialize_fc_lite, 0); + +function whenDOMReady() { + initialize_fc_lite(); +} + +whenDOMReady() +document.addEventListener("pjax:complete", whenDOMReady) \ No newline at end of file diff --git a/main/fclite.min.css b/main/fclite.min.css index 821c9b1..9c31e64 100644 --- a/main/fclite.min.css +++ b/main/fclite.min.css @@ -1 +1 @@ -:root{--text-color-light:#000000;--text-color-dark:#F7F7FA;--background-color-light:#f4f4f9;--background-color-dark:#181818;--container-bg-color-light:white;--container-bg-color-dark:#1D1E22;--hover-color:#3498db;--author-color-light:gray;--author-color-dark:#b3b3b3;--modal-bg-blur:25px;--shadow-color-light:rgba(0,0,0,0.1);--shadow-color-dark:rgba(255,255,255,0.1);--border-color-light:#e3e8f7;--border-color-dark:#42444a;}[data-theme=light]{--text-color:var(--text-color-light);--background-color:var(--background-color-light);--tag-bg-color:#bfbfbf;--container-bg-color:var(--container-bg-color-light);--author-color:var(--author-color-light);--shadow-color:var(--shadow-color-light);--border-color:var(--border-color-light);--modal-bg-color:rgba(255,255,255,0.5);--modal-content-bg-color:rgba(239,250,255,0.7);--load-more-btn-bg-color:var(--container-bg-color);}[data-theme=dark]{--text-color:var(--text-color-dark);--background-color:var(--background-color-dark);--tag-bg-color:#474747;--container-bg-color:var(--container-bg-color-dark);--author-color:var(--author-color-dark);--shadow-color:var(--shadow-color-dark);--border-color:var(--border-color-dark);--modal-bg-color:rgba(0,0,0,0.3);--modal-content-bg-color:rgba(20,20,20,0.5);--load-more-btn-bg-color:var(--container-bg-color);}body{background-color:var(--background-color);}#friend-circle-lite-root{width:100%;}#random-article{display:flex;position:relative;width:100%;margin:8px 0;background-color:var(--container-bg-color);border-radius:10px;border:1px solid var(--border-color);height:210px;}.random-container{position:relative;margin:20px;width:90%;height:170px;}.random-container:hover .random-title{font-size:32px;}.random-author{font-size:14px;color:var(--author-color);margin-bottom:10px;}.random-container-title{font-size:20px;font-weight:700;margin-bottom:20px;}.random-title{margin-bottom:10px;font-size:30px;transition:font-size 0.3s ease-in-out;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.random-link-button{position:absolute;bottom:20px;right:20px;padding:10px 20px;border:none;border-radius:20px;background-color:var(--hover-color);color:#fff;cursor:pointer;font-size:14px;transition:background-color 0.3s ease-in-out;}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--modal-bg-color);backdrop-filter:blur(var(--modal-bg-blur));-webkit-backdrop-filter:blur(var(--modal-bg-blur));z-index:999;opacity:0;visibility:hidden;transition:opacity 0.3s;}.modal-open{opacity:1;visibility:visible;}.modal-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:350px;background-color:var(--modal-content-bg-color);padding:20px;border:1px solid var(--border-color);z-index:1000;max-height:90%;overflow-y:auto;border-radius:20px;transition:opacity 0.3s;}@media screen and (max-width:440px){.modal-content{width:80%;}}#modal-author-avatar{display:block;margin:0 auto 10px;border-radius:50%;width:80px;height:80px;object-fit:cover;}#modal-author-name-link{display:block;text-align:center;font-size:15px;margin:25px 0;color:var(--hover-color);text-decoration:none;}#modal-author-name-link:hover{text-decoration:underline;}.modal-content hr{margin:20px 0;}#modal-articles-container{border-top:var(--hover-color) double 2px;margin-top:20px;padding-top:10px;}.modal-article{display:flex;flex-wrap:wrap;margin-bottom:10px;padding-bottom:10px;border-bottom:var(--hover-color) dashed 1px;}.modal-article .modal-article-title{color:var(--text-color);font-size:18px;line-height:1.2;cursor:pointer;height:2.5em;width:100%;margin-bottom:5px;text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;}.modal-article .modal-article-title:hover{color:var(--hover-color);text-decoration:underline;}.modal-article .modal-article-date{font-size:12px;width:100%;color:var(--author-color);padding:5px;cursor:default;text-align:right;}.articles-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;width:100%;}.card{background-color:var(--container-bg-color);border-radius:10px;padding:10px;border:1px solid var(--border-color);position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;height:150px;}.card-title{z-index:1;font-size:17px;color:var(--text-color);font-weight:520;cursor:pointer;margin-bottom:10px;line-height:1.5;max-height:4.5em;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;transition:color 0.3s;}.card-title:hover{color:var(--hover-color);text-decoration:underline;}.card-author,.card-date{font-size:12px;color:var(--author-color);padding:5px;transition:box-shadow 0.2s;}.card-author:hover{box-shadow:0 4px 8px rgba(0,0,0,0.2);}.card-author{cursor:pointer;background-color:var(--background-color);border:1px solid var(--border-color);border-radius:15px;display:flex;padding-right:10px;width:fit-content;height:26px;align-items:center;}#friend-circle-lite-root .card-author img{border-radius:50%;width:15px;height:15px;margin:0 2px !important;object-fit:cover;}.card-date{position:absolute;z-index:1;bottom:5px;cursor:default;right:10px;display:flex;align-items:center;}#friend-circle-lite-root .card-bg{cursor:default;z-index:0;border-radius:50%;margin:0;position:absolute;bottom:-20px;right:-16px;width:140px;height:140px;opacity:0.4;}#load-more-btn{color:var(--text-color);font-size:15px;background-color:var(--container-bg-color);cursor:pointer;width:200px;border-radius:20px;border:1px solid var(--border-color);padding:3px;transition:all 0.3s;margin:20px auto;display:block;}#load-more-btn:hover{background-color:var(--hover-color);width:300px;color:white;}#stats-container{font-size:13px;text-align:right;margin-top:20px;}#stats-container > *{margin-bottom:3px;}#stats-container a{color:var(--author-color);text-decoration:none;} \ No newline at end of file +:root{--text-color-light:#000000;--text-color-dark:#F7F7FA;--background-color-light:#f4f4f9;--background-color-dark:#181818;--container-bg-color-light:white;--container-bg-color-dark:#1D1E22;--hover-color:#3498db;--author-color-light:gray;--author-color-dark:#b3b3b3;--modal-bg-blur:25px;--shadow-color-light:rgba(0,0,0,0.1);--shadow-color-dark:rgba(255,255,255,0.1);--border-color-light:#e3e8f7;--border-color-dark:#42444a}[data-theme=light]{--text-color:var(--text-color-light);--background-color:var(--background-color-light);--tag-bg-color:#bfbfbf;--container-bg-color:var(--container-bg-color-light);--author-color:var(--author-color-light);--shadow-color:var(--shadow-color-light);--border-color:var(--border-color-light);--modal-bg-color:rgba(255,255,255,0.5);--modal-content-bg-color:rgba(239,250,255,0.5);--load-more-btn-bg-color:var(--container-bg-color)}[data-theme=dark]{--text-color:var(--text-color-dark);--background-color:var(--background-color-dark);--tag-bg-color:#474747;--container-bg-color:var(--container-bg-color-dark);--author-color:var(--author-color-dark);--shadow-color:var(--shadow-color-dark);--border-color:var(--border-color-dark);--modal-bg-color:rgba(0,0,0,0.3);--modal-content-bg-color:rgba(20,20,20,0.5);--load-more-btn-bg-color:var(--container-bg-color)}body{background-color:var(--background-color)}#friend-circle-lite-root{width:100%}#random-article{display:flex;position:relative;width:100%;margin:8px 0;background-color:var(--container-bg-color);border-radius:10px;border:1px solid var(--border-color);height:210px}.random-container{position:relative;margin:20px;width:90%;height:170px}.random-container:hover .random-title{font-size:32px}.random-author{font-size:14px;color:var(--author-color);margin-bottom:10px}.random-container-title{font-size:20px;font-weight:700;margin-bottom:20px}.random-title{margin-bottom:10px;font-size:30px;transition:font-size 0.3s ease-in-out;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.random-link-button{position:absolute;bottom:20px;right:20px;padding:10px 20px;border:none;border-radius:20px;background-color:var(--hover-color);color:#fff;cursor:pointer;font-size:14px;transition:background-color 0.3s ease-in-out}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--modal-bg-color);backdrop-filter:blur(var(--modal-bg-blur));-webkit-backdrop-filter:blur(var(--modal-bg-blur));z-index:999;opacity:0;visibility:hidden;transition:opacity 0.3s}.modal-open{opacity:1;visibility:visible}.modal-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:350px;background-color:var(--modal-content-bg-color);padding:20px;border:1px solid var(--border-color);z-index:1000;max-height:90%;overflow-y:auto;border-radius:20px;transition:opacity 0.3s}@media screen and (max-width:440px){.modal-content{width:80%}}#modal-author-avatar{display:block;margin:0 auto;border-radius:50%;width:100px;height:100px;object-fit:cover}#modal-author-name-link{display:block;text-align:center;font-size:15px;margin:15px 0;color:var(--hover-color);text-decoration:none}#modal-author-name-link:hover{text-decoration:underline}.modal-content hr{margin:20px 0}#modal-articles-container{border-top:var(--hover-color) double 2px;margin-top:20px;padding-top:10px}.modal-article{display:flex;flex-wrap:wrap;margin-bottom:10px;padding-bottom:10px;border-bottom:var(--hover-color) dashed 1px}.modal-article .modal-article-title{color:var(--text-color);font-size:18px;line-height:1.2;cursor:pointer;height:2.5em;width:100%;margin-bottom:5px;text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.modal-article .modal-article-title:hover{color:var(--hover-color);text-decoration:underline}.modal-article .modal-article-date{font-size:12px;width:100%;color:var(--author-color);padding:5px;cursor:default;text-align:right}.articles-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;width:100%}.card{background-color:var(--container-bg-color);border-radius:10px;padding:10px;border:1px solid var(--border-color);position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;height:150px;transition:border 0.3s}.card:hover{border:1px solid var(--hover-color)}.card-title{z-index:1;font-size:17px;color:var(--text-color);font-weight:520;cursor:pointer;margin-bottom:10px;line-height:1.5;max-height:4.5em;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;transition:color 0.3s}.card-title:hover{color:var(--hover-color);text-decoration:underline}.card-author,.card-date{font-size:12px;color:var(--author-color);padding:5px;transition:box-shadow 0.2s}.card-author:hover{box-shadow:0 4px 8px rgba(0,0,0,0.2)}.card-author{cursor:pointer;background-color:var(--background-color);border:1px solid var(--border-color);border-radius:15px;display:flex;padding-right:10px;width:fit-content;height:26px;align-items:center}#friend-circle-lite-root .card-author img{border-radius:50%;width:15px;height:15px;margin:0 2px !important;object-fit:cover}.card-date{position:absolute;z-index:1;bottom:5px;cursor:default;right:10px;display:flex;align-items:center}#friend-circle-lite-root .card-bg{cursor:default;z-index:0;border-radius:50%;margin:0;position:absolute;bottom:-20px;right:-16px;width:140px;height:140px;opacity:0.4;transition:transform 0.6s ease,bottom 0.3s ease,right 0.3s ease}#friend-circle-lite-root .card:hover .card-bg{transform:scale(1.1);bottom:-10px;right:-8px}#load-more-btn{color:var(--text-color);font-size:15px;background-color:var(--container-bg-color);cursor:pointer;width:200px;border-radius:10px;border:1px solid var(--border-color);padding:3px;transition:all 0.3s;margin:20px auto;display:block}#load-more-btn:hover{background-color:var(--hover-color);width:300px;color:white}#stats-container{font-size:13px;text-align:right;margin-top:20px}#stats-container > *{margin-bottom:3px}#stats-container a{color:var(--author-color);text-decoration:none} \ No newline at end of file diff --git a/main/fclite.min.js b/main/fclite.min.js index 9f13e29..3785db0 100644 --- a/main/fclite.min.js +++ b/main/fclite.min.js @@ -1 +1 @@ -function initialize_fc_lite(){const root=document.getElementById('friend-circle-lite-root');if(!root)return;root.innerHTML='';const randomArticleContainer=document.createElement('div');randomArticleContainer.id='random-article';root.appendChild(randomArticleContainer);const container=document.createElement('div');container.className='articles-container';container.id='articles-container';root.appendChild(container);const loadMoreBtn=document.createElement('button');loadMoreBtn.id='load-more-btn';loadMoreBtn.innerText='显示更多';root.appendChild(loadMoreBtn);const statsContainer=document.createElement('div');statsContainer.id='stats-container';root.appendChild(statsContainer);let start=0;let allArticles=[];function loadMoreArticles(){const cacheKey='friend-circle-lite-cache';const cacheTimeKey='friend-circle-lite-cache-time';const cacheTime=localStorage.getItem(cacheTimeKey);const now=new Date().getTime();if(cacheTime&&(now-cacheTime<10*60*1000)){const cachedData=JSON.parse(localStorage.getItem(cacheKey));if(cachedData){processArticles(cachedData);return}}fetch(`${UserConfig.private_api_url}all.json`).then(response=>response.json()).then(data=>{localStorage.setItem(cacheKey,JSON.stringify(data));localStorage.setItem(cacheTimeKey,now.toString());processArticles(data)}).finally(()=>{loadMoreBtn.innerText='显示更多'})}function processArticles(data){allArticles=data.article_data;const stats=data.statistical_data;statsContainer.innerHTML=`