跳转到内容

MediaWiki:Gadget-UnihanTooltips.css

勤求古训，博采众方

注意：在发布之后，您可能需要清除浏览器缓存才能看到所作出的更改的影响。

  • Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
  • Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
  • Edge：按住Ctrl的同时单击刷新，或按Ctrl-F5。
/* 主工具提示容器：优化渲染、适配多场景，无性能与兼容问题 */
.unihantooltip {
    /* 核心变量：多层回退，适配MediaWiki变量体系迭代 */
    --tooltip-border: var(--background-color-border, var(--border-color-base, #a2a9b1));
    --tooltip-bg: var(--background-color-interactive-subtle, var(--bg-default, #f8f9fa));
    --tooltip-text: var(--text-color-base, #333);
    --tooltip-arrow-inner: var(--border-color-muted, var(--bg-default, #f7f7f7));

    position: absolute;
    list-style: none;
    padding: 0;
    margin: 0;
    z-index: 10000; /* 高于MediaWiki原生UI层级，避免遮挡 */
    opacity: 0;
    font-size: 0.875rem; /* 相对单位，适配字体缩放 */
    pointer-events: none; /* 未显示时不干扰底层交互 */
    /* 平滑过渡：仅必要属性，避免过度渲染 */
    transition: opacity 0.15s ease;
    /* 优化初始渲染：1.43+支持，未显示时不参与布局计算 */
    content-visibility: hidden;
    /* 适配深色模式：原生识别系统/站点主题 */
    color-scheme: light dark;
}

/* 弹窗显示状态：同步启用渲染、交互、透明度 */
.unihantooltip.is-visible {
    opacity: 1;
    content-visibility: visible;
    pointer-events: auto;
}

/* 内容区域：精准控制，无溢出与继承干扰 */
.unihantooltip > li:first-child {
    border: 2px solid var(--tooltip-border);
    max-width: 260px; /* 限制宽度，避免过宽 */
    padding: 10px 8px 13px;
    margin: 0;
    background-color: var(--tooltip-bg);
    color: var(--tooltip-text);
    box-shadow: 2px 4px 2px rgba(0, 0, 0, 0.3); /* 基础阴影，不冗余 */
    pointer-events: auto;
    position: relative; /* 为设置图标绝对定位提供基准 */
}

/* 内容区链接：优化交互，无继承冲突 */
.unihantooltip > li:first-child a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px; /* 1.43+支持，提升可读性 */
    text-decoration-thickness: 1px;
    transition: text-decoration-color 0.15s ease;
    border: none; /* 避免继承内容区边框 */
    padding: 0; /* 清除默认内边距 */
    margin: 0; /* 清除默认外边距 */
}
.unihantooltip > li:first-child a:hover {
    text-decoration-color: var(--tooltip-border);
}

/* 箭头主体：逻辑属性适配多语言，无定位偏差 */
.unihantooltip > li:last-child {
    margin-inline-start: 0; /* 适配RTL语言 */
    margin-block-start: -2px; /* 与内容区无缝衔接 */
    padding: 0;
    height: 0; /* 清除占位高度 */
    width: 0; /* 清除占位宽度 */
    border: none; /* 清除默认边框 */
    border-block-start: 12px solid var(--tooltip-border); /* 箭头方向 */
    border-inline-end: 7px solid transparent;
    border-inline-start: 7px solid transparent;
    position: relative;
    filter: drop-shadow(0 1px 0 rgba(0,0,0,0.05)); /* 优化边缘锯齿 */
}

/* 箭头内部填充：精准对齐，无错位 */
.unihantooltip > li:last-child::after {
    content: '';
    border: none; /* 清除默认边框 */
    border-block-start: 8px solid var(--tooltip-arrow-inner);
    border-inline-end: 5px solid transparent;
    border-inline-start: 5px solid transparent;
    position: absolute;
    inset-block-start: -11px; /* 向上偏移1px，与箭头主体对齐 */
    inset-inline-start: -5px; /* 向左偏移5px，水平居中 */
}

/* 翻转状态：修正定位，无逻辑冲突 */
.unihantooltip.UHflipped {
    padding-block-start: 0; /* 清除冗余内边距 */
}

.unihantooltip.UHflipped > li:last-child {
    border-block-start: none; /* 清除原箭头方向 */
    border-block-end: 12px solid var(--tooltip-border); /* 翻转后箭头方向 */
    margin-block-start: 2px; /* 与内容区无缝衔接 */
}

.unihantooltip.UHflipped > li:last-child::after {
    border-block-start: none; /* 清除原填充方向 */
    border-block-end: 8px solid var(--tooltip-arrow-inner); /* 翻转后填充方向 */
    inset-block-start: 3px; /* 向下偏移3px，与翻转箭头对齐 */
}

/* 设置图标：无溢出，显示正常 */
.UHsettings {
    --settings-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='M12 15.5A3.5 3.5 0 0 1 8.5 12 3.5 3.5 0 0 1 12 8.5a3.5 3.5 0 0 1 3.5 3.5 3.5 3.5 0 0 1-3.5 3.5m7.43-2.53c.04-.32.07-.64.07-.97 0-.33-.03-.66-.07-1l2.11-1.63c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.31-.61-.22l-2.49 1c-.52-.39-1.06-.73-1.69-.98l-.37-2.65A.506.506 0 0 0 14 2h-4c-.25 0-.46.18-.5.42l-.37 2.65c-.63.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.5 0-.61.22l-2 3.46c-.13.22-.07.49.12.64L4.57 11c-.04.34-.07.67-.07 1 0 .33.03.65.07.97l-2.11 1.66c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1.01c.52.4 1.06.74 1.69.99l.37 2.65c.04.24.25.42.5.42h4c.25 0 .46-.18.5-.42l.37-2.65c.63-.26 1.17-.59 1.69-.99l2.49 1.01c.22.08.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.66z'/%3E%3C/svg%3E");
    
    position: absolute;
    inset-block-start: 8px; /* 上内边距8px，不溢出 */
    inset-inline-end: 8px; /* 右内边距8px，不溢出 */
    width: 16px;
    aspect-ratio: 1; /* 1.43+支持，确保正方形 */
    cursor: pointer;
    background-image: var(--settings-icon);
    background-size: contain;
    background-repeat: no-repeat; /* 避免重复显示 */
    background-position: center; /* 居中显示 */
    opacity: 0.6;
    transition: opacity 0.15s ease, transform 0.15s ease;
    pointer-events: auto; /* 允许点击交互 */
}

/* 图标hover效果：无变形，反馈清晰 */
.UHsettings:hover {
    opacity: 1;
    transform: scale(1.1); /* 微缩放，不夸张 */
}

/* 目标元素：无文字挤压，高亮明显 */
.UHTarget {
    border: 2px solid var(--tooltip-border);
    cursor: help; /* 提示可交互 */
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    padding: 0 2px; /* 左右内边距，避免边框挤压文字 */
    margin: 0; /* 清除默认外边距 */
}

/* 目标元素hover：无突兀效果 */
.UHTarget:hover {
    border-color: var(--tooltip-border);
    box-shadow: 0 0 0 1px rgba(162, 169, 177, 0.5); /* 弱阴影，提升辨识度 */
}

/* 嵌套li：无继承干扰，排版正常 */
.client-js .unihantooltip li li {
    border: none;
    box-shadow: none;
    height: auto;
    width: auto;
    margin: 0; /* 清除居中margin，避免错位 */
    padding: 0;
    position: static; /* 清除定位，正常流排版 */
    font-size: inherit; /* 继承父级字体大小 */
    color: inherit; /* 继承父级文字颜色 */
}

/* 深色模式：对比度合理，无显示异常 */
@media (prefers-color-scheme: dark) {
    .unihantooltip {
        --tooltip-border: var(--background-color-border, #54595d);
        --tooltip-bg: var(--background-color-interactive-subtle, #202122);
        --tooltip-text: var(--text-color-base, #eaecf0); /* 高对比度，易读 */
        --tooltip-arrow-inner: var(--border-color-muted, #202122);
        --tooltip-shadow: 2px 4px 2px rgba(0, 0, 0, 0.8); /* 加深阴影，提升层次 */
    }
    .UHTarget {
        border-color: #54595d;
        box-shadow: 0 0 0 1px rgba(84, 89, 93, 0.5);
    }
    .UHsettings {
        --settings-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23eaecf0' d='M12 15.5A3.5 3.5 0 0 1 8.5 12 3.5 3.5 0 0 1 12 8.5a3.5 3.5 0 0 1 3.5 3.5 3.5 3.5 0 0 1-3.5 3.5m7.43-2.53c.04-.32.07-.64.07-.97 0-.33-.03-.66-.07-1l2.11-1.63c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.31-.61-.22l-2.49 1c-.52-.39-1.06-.73-1.69-.98l-.37-2.65A.506.506 0 0 0 14 2h-4c-.25 0-.46.18-.5.42l-.37 2.65c-.63.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.5 0-.61.22l-2 3.46c-.13.22-.07.49.12.64L4.57 11c-.04.34-.07.67-.07 1 0 .33.03.65.07.97l-2.11 1.66c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1.01c.52.4 1.06.74 1.69.99l.37 2.65c.04.24.25.42.5.42h4c.25 0 .46-.18.5-.42l.37-2.65c.63-.26 1.17-.59 1.69-.99l2.49 1.01c.22.08.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.66z'/%3E%3C/svg%3E");
    }
}
检索自“https://cs.zybkcn.com/w/index.php?title=MediaWiki:Gadget-UnihanTooltips.css&oldid=163”