Merge pull request '重新设计用户/作者卡片小工具：消除多层卡片堆叠' (#337) from worktree-user-card-redesign into main
Reviewed-on: CYL/wordpress-theme-aksrt#337
This commit is contained in:
@@ -110,116 +110,6 @@
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* 10. 用户卡片 Widget
|
||||
* ============================================================ */
|
||||
.aksrt-user-card {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.aksrt-user-card__avatar {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: 50%;
|
||||
margin: 0 auto 12px;
|
||||
overflow: hidden;
|
||||
border: 3px solid var(--color-primary-soft, rgba(136,171,218,0.1));
|
||||
}
|
||||
|
||||
.aksrt-user-card__avatar img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.aksrt-user-card__name {
|
||||
margin: 0 0 4px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--color-ink);
|
||||
}
|
||||
|
||||
.aksrt-user-card__name a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.aksrt-user-card__name a:hover {
|
||||
color: var(--color-primary, var(--color-primary));
|
||||
}
|
||||
|
||||
.aksrt-user-card__bio {
|
||||
margin: 0 0 12px;
|
||||
font-size: 13px;
|
||||
color: var(--color-ink-3);
|
||||
line-height: 1.5;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.aksrt-user-card__stats {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.aksrt-user-card__stat {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.aksrt-user-card__stat-value {
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--color-ink);
|
||||
}
|
||||
|
||||
.aksrt-user-card__stat-label {
|
||||
font-size: 12px;
|
||||
color: var(--color-ink-4, #8A8F98);
|
||||
}
|
||||
|
||||
.aksrt-user-card__actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.aksrt-user-card__btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 6px 16px;
|
||||
border-radius: var(--radius, 10px);
|
||||
font-size: 13px;
|
||||
text-decoration: none;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.aksrt-user-card__btn--primary {
|
||||
background: var(--color-primary, var(--color-primary));
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.aksrt-user-card__btn--primary:hover {
|
||||
opacity: 0.85;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.aksrt-user-card__btn--ghost {
|
||||
border: 1px solid var(--color-line);
|
||||
color: var(--color-ink-2);
|
||||
}
|
||||
|
||||
.aksrt-user-card__btn--ghost:hover {
|
||||
border-color: var(--color-primary, var(--color-primary));
|
||||
color: var(--color-primary, var(--color-primary));
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* 11. 滚动触发动画初始状态
|
||||
* ============================================================ */
|
||||
|
||||
@@ -129,33 +129,6 @@
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* 用户卡片 widget */
|
||||
.widget-user-card {
|
||||
text-align: center;
|
||||
padding: 20px 16px;
|
||||
}
|
||||
|
||||
.widget-user-card__avatar {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.widget-user-card__name {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--color-ink, #333);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.widget-user-card__desc {
|
||||
font-size: 12px;
|
||||
color: var(--color-ink-3, #777);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
/* 侧边栏响应式 — width/float 由 layout.css 的 --sidebar-width + site-layout-* 拥有。
|
||||
* 禁止在这里硬编码 280px（会与 content-layout gutter 失配导致叠层/空隙）。 */
|
||||
@media (max-width: 991px) {
|
||||
|
||||
@@ -636,7 +636,7 @@ html.dark .post-drop-meta__item:hover {
|
||||
|
||||
|
||||
/* ===== Zibll user-card after-box ===== */
|
||||
.user-card.author.zib-widget { margin-bottom: 16px; overflow: hidden; }
|
||||
.user-card.author { margin-bottom: 16px; overflow: hidden; }
|
||||
.user-card.author .user-avatar { display: flex; justify-content: center; }
|
||||
.user-card.author .user-avatar .avatar,
|
||||
.user-card.author .user-avatar img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; }
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--color-line, #e5e7eb);
|
||||
background: var(--surface-1, #fff);
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: 0;
|
||||
text-align: center;
|
||||
}
|
||||
.aksrt-author-card__cover {
|
||||
|
||||
@@ -2,13 +2,26 @@
|
||||
* Batch5: user card guest/login depth, main posts, term aggregation.
|
||||
*/
|
||||
|
||||
/* 用户卡/作者卡：外层 .zib-widget 包裹层不再画卡片，内层 .aksrt-*-card 是唯一卡片 */
|
||||
.zib-widget.widget_aksrt_user_card,
|
||||
.zib-widget.widget_aksrt_author_card,
|
||||
.aksrt-homepage__aside > .zib-widget.widget_aksrt_user_card,
|
||||
.aksrt-homepage__aside > .zib-widget.widget_aksrt_author_card {
|
||||
background: none;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.aksrt-user-card {
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--color-line, #e5e7eb);
|
||||
background: var(--surface-1, #fff);
|
||||
text-align: center;
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.aksrt-user-card__cover {
|
||||
height: 90px;
|
||||
|
||||
@@ -101,7 +101,7 @@ class WidgetAuthorCard extends \WP_Widget {
|
||||
echo $args['before_title'] . esc_html($title) . $args['after_title']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
|
||||
}
|
||||
|
||||
$card_cls = 'aksrt-author-card user-card author zib-widget' . ($show_bg ? ' has-cover' : '') . $affix['class'];
|
||||
$card_cls = 'aksrt-author-card user-card author' . ($show_bg ? ' has-cover' : '') . $affix['class'];
|
||||
echo '<div class="' . esc_attr($card_cls) . '"' . $affix['attr'] . '>';
|
||||
if ($show_bg) {
|
||||
$bg = $cover !== '' ? ' style="background-image:url(' . esc_url($cover) . ')"' : '';
|
||||
|
||||
@@ -18,7 +18,10 @@ class WidgetUserCard extends \WP_Widget {
|
||||
parent::__construct(
|
||||
'aksrt_user_card',
|
||||
__('用户卡片', 'aksrt'),
|
||||
['description' => __('未登录显示登录入口；登录后显示当前用户卡片、签到、快捷按钮与更多文章。', 'aksrt')]
|
||||
[
|
||||
'description' => __('未登录显示登录入口；登录后显示当前用户卡片、签到、快捷按钮与更多文章。', 'aksrt'),
|
||||
'classname' => 'widget_aksrt_user_card',
|
||||
]
|
||||
);
|
||||
}
|
||||
|
||||
@@ -122,7 +125,7 @@ class WidgetUserCard extends \WP_Widget {
|
||||
? aksrt_get_user_name(['id' => $user_id, 'follow' => !$is_self, 'class' => 'flex ac jc'])
|
||||
: '<a href="' . esc_url($profile_url) . '">' . esc_html($user->display_name) . '</a>';
|
||||
|
||||
echo '<div class="aksrt-user-card user-card zib-widget widget">';
|
||||
echo '<div class="aksrt-user-card user-card">';
|
||||
if ($show_cover) {
|
||||
if ($cover !== '') {
|
||||
echo '<div class="aksrt-user-card__cover user-cover graphic" style="background-image:url(' . esc_url($cover) . ')"></div>';
|
||||
@@ -209,7 +212,7 @@ class WidgetUserCard extends \WP_Widget {
|
||||
}
|
||||
}
|
||||
|
||||
echo '<div class="aksrt-user-card user-card zib-widget widget is-guest">';
|
||||
echo '<div class="aksrt-user-card user-card is-guest">';
|
||||
if ($show_cover) {
|
||||
$default_cover = '';
|
||||
if (class_exists('\AKSRT\Settings\Settings') && method_exists('\AKSRT\Settings\Settings', 'get_user_cover_default')) {
|
||||
|
||||
Reference in New Issue
Block a user