diff --git a/main/fclite.css b/main/fclite.css index c0bfb83..b5343d0 100644 --- a/main/fclite.css +++ b/main/fclite.css @@ -133,7 +133,7 @@ body { } .modal-content { - position: absolute; + position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); @@ -143,11 +143,17 @@ body { border: 1px solid var(--border-color); z-index: 1000; max-height: 90%; - overflow-y: auto; + overflow: hidden; border-radius: 20px; transition: opacity 0.3s; } +.modal-content:hover { + #modal-bg-avatar { + transform: scale(1.1); + } +} + @media screen and (max-width: 440px) { .modal-content { width: 80%; @@ -156,13 +162,27 @@ body { #modal-author-avatar { display: block; - margin: 0 auto; - border-radius: 50%; - width: 100px; - height: 100px; + margin: 5px auto !important; + border-radius: 50% !important; + width: 110px; + height: 110px; object-fit: cover; } +#modal-bg-avatar { + position: absolute; + filter: blur(5px); + z-index: 0; + border-radius: 125px 125px 12px 125px !important; + margin: 0 !important; + width: 250px; + height: 250px; + right: -20px; + bottom: -20px; + opacity: 0.2; + transition: transform 0.6s ease, bottom 0.3s ease, right 0.3s ease !important; /* 0.3秒的平滑过渡效果 */ +} + #modal-author-name-link { display: block; text-align: center; @@ -181,6 +201,8 @@ body { } #modal-articles-container { + position: relative; + z-index: 1; border-top: var(--hover-color) double 2px; margin-top: 20px; padding-top: 10px; @@ -278,7 +300,7 @@ body { font-size: 12px; color: var(--author-color); padding: 5px; - transition: box-shadow 0.2s; + height: 25px; } .card-author:hover { @@ -293,8 +315,8 @@ body { display: flex; padding-right: 10px; width: fit-content; - height: 26px; align-items: center; + transition: box-shadow 0.2s; } #friend-circle-lite-root .card-author img { @@ -308,7 +330,7 @@ body { .card-date { position: absolute; z-index: 1; - bottom: 5px; + bottom: 10px; cursor: default; right: 10px; display: flex; diff --git a/main/fclite.js b/main/fclite.js index b374985..f0aa2f2 100644 --- a/main/fclite.js +++ b/main/fclite.js @@ -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)); @@ -125,7 +125,7 @@ function initialize_fc_lite() { function showAuthorArticles(author, avatar, link) { // 如果不存在,则创建模态框结构 - if (!document.getElementById('modal')) { + if (!document.getElementById('fclite-modal')) { const modal = document.createElement('div'); modal.id = 'modal'; modal.className = 'modal'; @@ -134,6 +134,7 @@ function initialize_fc_lite() { + `; root.appendChild(modal); @@ -143,10 +144,13 @@ function initialize_fc_lite() { const modalArticlesContainer = document.getElementById('modal-articles-container'); const modalAuthorAvatar = document.getElementById('modal-author-avatar'); const modalAuthorNameLink = document.getElementById('modal-author-name-link'); + const modalBgAvatar = document.getElementById('modal-bg-avatar'); modalArticlesContainer.innerHTML = ''; // 清空之前的内容 modalAuthorAvatar.src = avatar || UserConfig.error_img; // 使用默认头像 modalAuthorAvatar.onerror = () => modalAuthorAvatar.src = UserConfig.error_img; // 头像加载失败时使用默认头像 + modalBgAvatar.src = avatar || UserConfig.error_img; // 使用默认头像 + modalBgAvatar.onerror = () => modalBgAvatar.src = UserConfig.error_img; // 头像加载失败时使用默认头像 modalAuthorNameLink.innerText = author; modalAuthorNameLink.href = new URL(link).origin; @@ -184,7 +188,7 @@ function initialize_fc_lite() { modal.classList.remove('modal-open'); modal.addEventListener('transitionend', () => { modal.style.display = 'none'; - document.body.removeChild(modal); + root.removeChild(modal); }, { once: true }); }