MediaWiki:Common.css：修订间差异

2026年8月19日 (三) 02:50的版本

/* ============================================
   基础链接悬停效果
   ============================================ */

/* 1. 页面内链接 - 平滑变色加下划线 */
a {
    transition: color 0.3s ease, text-decoration-color 0.3s ease;
}

a:hover {
    color: #d4532a; /* 醒目橙红色 */
    text-decoration-color: #d4532a;
}

/* 2. 外部链接 - 添加右箭头动画 */
a.external {
    transition: all 0.3s ease;
}

a.external:hover {
    padding-right: 4px;
    color: #2a6b9e;
}

a.external:hover::after {
    content: " →";
    transition: all 0.3s ease;
}

/* 3. 导航栏链接 - 背景高亮 */
#mw-panel a,
#p-navigation a {
    display: block;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.25s ease, padding-left 0.25s ease;
}

#mw-panel a:hover,
#p-navigation a:hover {
    background-color: #eaf3ff;
    padding-left: 12px;
}

/* 4. 页面标题 - 微缩放 */
#firstHeading {
    transition: transform 0.3s ease;
}

#firstHeading:hover {
    transform: scale(1.02);
    color: #2a4b7a;
}

/* 5. 信息框或卡片样式悬停 */
.infobox,
.wikitable {
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.infobox:hover,
.wikitable:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

/* 6. 图片悬停 - 轻微放大和阴影 */
.thumb img,
.image img {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    border-radius: 4px;
}

.thumb img:hover,
.image img:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* 7. 按钮悬停效果（如有自定义按钮类） */
.mw-ui-button {
    transition: all 0.3s ease;
}

.mw-ui-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* 8. 目录列表悬停 - 左移效果 */
#toc li {
    transition: padding-left 0.2s ease;
}

#toc li:hover {
    padding-left: 8px;
    color: #2a6b9e;
}

/* 9. 分类链接悬停 - 背景色块 */
#catlinks a {
    padding: 2px 6px;
    border-radius: 3px;
    transition: background-color 0.3s ease;
}

#catlinks a:hover {
    background-color: #d9e8ff;
}

/* 10. 编辑区链接工具条（如编辑、查看历史等） */
#p-views a,
#p-cactions a {
    transition: background-color 0.3s ease, border-radius 0.3s ease;
    padding: 2px 8px;
}

#p-views a:hover,
#p-cactions a:hover {
    background-color: #f0f8ff;
    border-radius: 4px;
}