/* ========== 侧栏小工具(模仿 zibll .zib-widget) ========== */ .content-layout__aside .widget, .widget-card, .zib-widget { clear: both; background: var(--surface-1); padding: var(--card-padding); box-shadow: var(--shadow-sm); border-radius: var(--radius); margin-bottom: 20px; border: 1px solid var(--color-line); } /* Custom HTML widgets: de-card (no background, no padding — matches Zibll) */ .widget_custom_html, .zib-widget.widget_custom_html { background: transparent; padding: 0; box-shadow: none; } /* Zibll zib-widget-sm / noshadow modifier */ .zib-widget-sm, .zib-widget.noshadow { box-shadow: none !important; } .widget-title { font-size: 15px; font-weight: 700; margin: 0 0 10px; padding-bottom: 8px; position: relative; color: var(--color-ink); border-bottom: none; text-transform: none; letter-spacing: normal; } /* 标题下划线装饰(模仿 zibll) */ .widget-title::before { content: ''; position: absolute; left: 0; bottom: 3px; width: 40px; height: 3px; background: var(--color-primary); border-radius: 5px; box-shadow: 1px 1px 3px -1px var(--color-primary); transition: transform 0.4s ease; transform-origin: left; } /* 暗色模式 */ .theme-dark .content-layout__aside .widget, html.dark .content-layout__aside .widget, .theme-dark .widget-card, html.dark .widget-card, .theme-dark .zib-widget, html.dark .zib-widget { background: var(--surface-1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); } .author-card { text-align: center; padding: 28px 20px; border-radius: var(--radius-lg); background: linear-gradient(145deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); color: #fff; box-shadow: var(--shadow-md); border: none; } .author-card img { width: 100px; height: 100px; border-radius: var(--radius-avatar); border: 3px solid rgba(255, 255, 255, 0.35); margin-bottom: 14px; object-fit: cover; } .author-card h3 { margin: 0 0 8px; color: #fff; font-size: 1.125rem; } .author-card p { margin: 0 0 16px; font-size: 0.875rem; opacity: 0.92; line-height: 1.55; } .author-card .social-row, .author-card .profile-social-links { justify-content: center; } .profile-social-links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .profile-social-links a, .social-icon-link { width: 36px; height: 36px; border-radius: var(--radius-avatar); background: rgba(255, 255, 255, 0.2); display: flex; align-items: center; justify-content: center; color: #fff; transition: background 0.2s; } .profile-social-links a svg, .social-icon-link svg { width: 18px; height: 18px; display: block; fill: currentColor; } .profile-social-links a:hover, .social-icon-link:hover { background: rgba(255, 255, 255, 0.35); color: #fff; } .widget_search .search-form { display: flex; position: relative; } .widget_search label { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--color-ink-4); } .widget_search .search-field { width: 100%; height: 44px; padding: 0 16px 0 44px; border-radius: var(--radius-btn); border: 1px solid var(--color-line); background: var(--surface-3); color: var(--color-ink); font-size: 14px; } .widget_search .search-field:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-50); } .widget_search .search-submit { position: absolute; right: 4px; top: 4px; height: 36px; padding: 0 14px; border-radius: 6px; border: none; background: var(--color-primary); color: #fff; font-weight: 600; cursor: pointer; } .widget-list { list-style: none; margin: 0; padding: 0; } .widget-list li { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--color-line); font-size: 14px; color: var(--color-ink-3); } .widget-list li:last-child { border-bottom: none; } .widget-list li a { flex: 1; transition: color 0.2s, padding 0.2s; } .widget-list li a:hover { color: var(--color-primary); padding-left: 6px; } .widget-list li span { color: var(--color-ink-4); font-variant-numeric: tabular-nums; } .widget_recent_entries li, .recent-posts-row { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--color-line); } .widget_recent_entries li:last-child, .recent-posts-row:last-child { border-bottom: none; } .recent-posts-row img { width: 60px; height: 60px; border-radius: var(--radius-btn); object-fit: cover; flex-shrink: 0; } .tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; } .tag-cloud a { padding: 6px 12px; border-radius: var(--radius-pill); border: 1px solid var(--color-line); font-weight: 500; color: var(--color-ink-3); transition: background 0.2s, border-color 0.2s, color 0.2s; } .tag-cloud a:hover { border-color: var(--color-primary); background: var(--color-primary); color: #fff; } .content-layout__aside .widget:last-child { margin-bottom: 0; } /* ============================================================ * 热榜文章小工具 — v4.0 Zibll-Inspired * ============================================================ */ .widget-hot-posts { display: flex; flex-direction: column; gap: 0; } .hot-post-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--color-line); } .hot-post-item:last-child { border-bottom: none; padding-bottom: 0; } .hot-post-item:first-child { padding-top: 0; } .hot-post-item__rank { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; min-width: 22px; border-radius: 4px; font-size: 12px; font-weight: 700; background: var(--surface-3); color: var(--color-ink-4);