diff --git a/themes/Ying/layouts/page/circles.html b/themes/Ying/layouts/page/circles.html
index cfc64145..5388d5e9 100644
--- a/themes/Ying/layouts/page/circles.html
+++ b/themes/Ying/layouts/page/circles.html
@@ -15,9 +15,9 @@
.friend-circle-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
- gap: 12px; /* Tighter gap to make cards wider */
+ gap: 12px;
margin-top: 20px;
- padding: 0; /* Remove padding to maximize width */
+ padding: 0;
width: 100%;
}
@@ -29,7 +29,7 @@
}
}
- /* Card Style - Refined based on User Request */
+ /* Card Style */
.fc-item {
display: flex;
flex-direction: column;
@@ -39,89 +39,57 @@
height: 160px;
justify-content: space-between;
background: rgba(255, 255, 255, 0.4);
- /* Enhanced Glassmorphism for non-mobile */
backdrop-filter: blur(12px) saturate(120%);
-webkit-backdrop-filter: blur(12px) saturate(120%);
border: 1px solid #111827;
box-shadow: none;
- transition:
- transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
- box-shadow 0.3s ease,
- background-color 0.3s ease,
- border-color 0.3s ease;
+ transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
will-change: transform;
text-decoration: none;
- transform: translateZ(0); /* Enable GPU acceleration */
- overflow: hidden; /* 防止背景图溢出 */
+ transform: translateZ(0);
+ overflow: hidden;
}
- /* Mobile Optimization: Remove expensive effects */
@media (max-width: 767px) {
- .fc-item {
- backdrop-filter: none !important;
- -webkit-backdrop-filter: none !important;
- background: rgba(255, 255, 255, 0.8); /* Higher opacity fallback */
- }
- [data-theme="dark"] .fc-item {
- background: rgba(30, 30, 30, 0.8);
- }
+ .fc-item {
+ backdrop-filter: none !important;
+ -webkit-backdrop-filter: none !important;
+ background: rgba(255, 255, 255, 0.8);
+ }
+ [data-theme="dark"] .fc-item {
+ background: rgba(30, 30, 30, 0.8);
+ }
}
.friend-circle-list a {
text-decoration: none;
}
- /* Light Mode Override - if theme is light, keep it readable but consistent layout */
- /* Assuming the user wants the dark look as shown in the reference, we prioritize that feel
- or make it adapt. Let's make it adapt but keep the structure. */
:root {
- /* --fc-bg: rgba(255, 255, 255, 0.8); */
--fc-text: #333;
--fc-meta-bg: rgba(0, 0, 0, 0.05);
- /* --fc-border: rgba(0, 0, 0, 0.05); */
}
[data-theme="dark"] {
- /* --fc-bg: rgba(35, 35, 35, 0.8); */
--fc-text: #fff;
--fc-meta-bg: rgba(255, 255, 255, 0.1);
- /* --fc-border: rgba(255, 255, 255, 0.1); */
}
- /*
- .fc-item {
- background: var(--fc-bg);
- border-color: var(--fc-border);
- }
- */
-
- /* UK Style Animation & Hover */
- /* 优化后的 hover 效果 */
.fc-item:hover {
- /* 位移+缩放:微调数值,更克制不夸张 */
transform: translateY(-6px) scale(1.015);
- /* 阴影:分层阴影,更有立体感(主阴影+柔和光晕) */
- box-shadow:
- 0 12px 28px rgba(0, 0, 0, 0.1),
- /* 主阴影:缩小范围,降低不透明度 */ 0 2px 8px rgba(0, 0, 0, 0.06); /* 次级光晕:增加柔和感 */
- /* 背景:轻微提亮,保留通透感 */
+ box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.06);
background: rgba(255, 255, 255, 0.7);
- /* 边框:轻微加亮,避免纯黑太突兀 */
border-color: #1a1a1a;
- /* 层级:保持原有值 */
z-index: 10;
- /* 光标:交互提示 */
cursor: pointer;
}
- /* 可选:点击回弹效果,增强交互反馈 */
.fc-item:active {
transform: translateY(-3px) scale(1.005);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
transition: all 0.15s ease;
}
- /* Top: Title */
.fc-title {
font-size: 18px;
font-weight: 700;
@@ -133,14 +101,13 @@
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
- margin-right: 60px; /* Space for the image */
+ margin-right: 60px;
}
.fc-item:hover .fc-title {
color: #000000;
}
- /* Background Image (Decorative) */
.fc-bg-image {
position: absolute;
right: -20px;
@@ -162,7 +129,6 @@
filter: grayscale(0%);
}
- /* Bottom Row: Author Pill & Date */
.fc-bottom {
display: flex;
justify-content: space-between;
@@ -170,7 +136,6 @@
z-index: 2;
}
- /* Author Pill */
.fc-author-pill {
display: flex;
align-items: center;
@@ -200,7 +165,6 @@
opacity: 0.9;
}
- /* Date */
.fc-date {
font-size: 12px;
color: var(--fc-text);
@@ -214,14 +178,12 @@
font-size: 11px;
}
- /* FontAwesome fallback if not available, simple calendar icon via CSS or Unicode */
.fc-icon-calendar::before {
content: "\f133";
font-family: "Font Awesome 5 Free", "FontAwesome";
font-weight: 900;
}
- /* Loading Animation */
.loading-container {
grid-column: 1 / -1;
display: flex;
@@ -241,14 +203,8 @@
margin-bottom: 15px;
}
- /* Dark Mode Specific Adjustments to match the reference exactly */
[data-theme="dark"] .fc-item {
- background: rgba(
- 35,
- 35,
- 35,
- 0.65
- ); /* More transparent for glass effect */
+ background: rgba(35, 35, 35, 0.65);
box-shadow: none;
border: 1px solid rgba(255, 255, 255, 0.1);
}
@@ -271,19 +227,15 @@
color: #ffffff;
}
- /* Removed unused fadeInUp to keep clean, utilizing ukFadeInUp instead */
-
@keyframes spin {
- to {
- transform: rotate(360deg);
- }
+ to { transform: rotate(360deg); }
}
- /* Load More Button */
+
.fc-load-more-btn {
grid-column: 1 / -1;
padding: 5px 30px;
margin: 30px auto 10px;
- background: #000; /* Black background */
+ background: #000;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 30px;
color: #fff;
@@ -310,12 +262,10 @@
background: #222;
}
- /* Artalk Dark Mode Adjustment */
[data-theme="dark"] .artalk .atk-main-editor {
border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
- /* Friend Circle Tooltip Card */
.fc-tooltip {
position: fixed;
z-index: 9999;
@@ -334,7 +284,7 @@
font-size: 14px;
line-height: 1.6;
color: #333;
- display: none; /* Hidden by default */
+ display: none;
}
.fc-tooltip.is-visible {
@@ -356,7 +306,7 @@
color: #555;
text-align: justify;
display: -webkit-box;
- -webkit-line-clamp: 6; /* Limit lines */
+ -webkit-line-clamp: 6;
-webkit-box-orient: vertical;
overflow: hidden;
}
@@ -383,7 +333,6 @@
{{ end }}