diff --git a/main/fclite.css b/main/fclite.css index b5343d0..c91c3e6 100644 --- a/main/fclite.css +++ b/main/fclite.css @@ -1,4 +1,3 @@ -/* 公共颜色变量 */ :root { --text-color-light: #000000; --text-color-dark: #F7F7FA; @@ -16,7 +15,6 @@ --border-color-dark: #42444a; } -/* 浅色模式颜色 */ [data-theme=light] { --text-color: var(--text-color-light); --background-color: var(--background-color-light); @@ -30,7 +28,6 @@ --load-more-btn-bg-color: var(--container-bg-color); } -/* 深色模式颜色 */ [data-theme=dark] { --text-color: var(--text-color-dark); --background-color: var(--background-color-dark); @@ -52,7 +49,6 @@ body { width: 100%; } -/* 随机友链文章卡片 */ #random-article { display: flex; position: relative; @@ -111,7 +107,6 @@ body { transition: background-color 0.3s ease-in-out; } -/* 模态框样式 */ .modal { position: fixed; top: 0; @@ -148,10 +143,8 @@ body { transition: opacity 0.3s; } -.modal-content:hover { - #modal-bg-avatar { - transform: scale(1.1); - } +.modal-content:hover #modal-bg { + transform: scale(1.1); } @media screen and (max-width: 440px) { @@ -160,18 +153,10 @@ body { } } -#modal-author-avatar { - display: block; - margin: 5px auto !important; - border-radius: 50% !important; - width: 110px; - height: 110px; - object-fit: cover; -} - -#modal-bg-avatar { +#modal-bg { position: absolute; filter: blur(5px); + opacity: 0.2; z-index: 0; border-radius: 125px 125px 12px 125px !important; margin: 0 !important; @@ -179,8 +164,15 @@ body { 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秒的平滑过渡效果 */ + transition: transform 0.6s ease !important; +} + +#modal-author-avatar { + display: block; + margin: 5px auto !important; + border-radius: 50% !important; + width: 110px; + height: 110px; } #modal-author-name-link { @@ -227,6 +219,7 @@ body { text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; + line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; @@ -246,7 +239,6 @@ body { text-align: right; } -/* 其他样式... */ .articles-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); @@ -286,6 +278,7 @@ body { text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; + line-clamp: 3; -webkit-box-orient: vertical; transition: color 0.3s; } @@ -348,7 +341,7 @@ body { width: 140px; height: 140px; opacity: 0.4; - transition: transform 0.6s ease, bottom 0.3s ease, right 0.3s ease; /* 0.3秒的平滑过渡效果 */ + transition: transform 0.6s ease, bottom 0.3s ease, right 0.3s ease; } #friend-circle-lite-root .card:hover .card-bg { diff --git a/main/fclite.js b/main/fclite.js index f546306..70d7092 100644 --- a/main/fclite.js +++ b/main/fclite.js @@ -134,7 +134,7 @@ function initialize_fc_lite() { - + `; root.appendChild(modal); @@ -144,13 +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'); + const modalBg = document.getElementById('modal-bg'); 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; // 头像加载失败时使用默认头像 + modalBg.src = avatar || UserConfig.error_img; // 使用默认头像 + modalBg.onerror = () => modalBg.src = UserConfig.error_img; // 头像加载失败时使用默认头像 modalAuthorNameLink.innerText = author; modalAuthorNameLink.href = new URL(link).origin;