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 {
--tooltip-border: var(--border-color-base, #a2a9b1);
--tooltip-bg: var(--background-color-interactive-subtle, #f8f9fa);
--tooltip-shadow: 2px 4px 2px rgba(0, 0, 0, 0.3);
position: absolute;
list-style: none;
padding: 0;
margin: 0;
z-index: 5;
opacity: 0;
font-size: 0.875rem; /* 使用相对的font-size */
pointer-events: none; /* 防止工具提示干扰交互 */
transition: opacity 0.15s ease; /* 添加平滑过渡 */
}
/* 工具提示内容区域 */
.unihantooltip > li:first-child {
border: 2px solid var(--tooltip-border);
max-width: 260px;
padding: 10px 8px 13px;
margin: 0;
background-color: var(--tooltip-bg);
box-shadow: var(--tooltip-shadow);
color: inherit;
pointer-events: auto; /* 允许内容区域交互 */
position: relative; /* 为设置图标定位 */
}
/* 工具提示箭头 */
.unihantooltip > li:last-child {
margin-left: 7px;
margin-top: -2px;
padding: 0;
height: 3px;
width: 0;
border-top: 12px solid var(--tooltip-border);
border-right: 7px solid transparent;
border-left: 7px solid transparent;
position: relative;
}
/* 箭头内部白色部分 */
.unihantooltip > li:last-child::after {
content: '';
border-top: 8px solid var(--border-color-muted, #f7f7f7);
border-right: 5px solid transparent;
border-left: 5px solid transparent;
position: absolute;
top: -12px;
left: -5px;
}
/* 翻转状态下的工具提示 */
.unihantooltip.UHflipped {
padding-top: 13px;
}
.unihantooltip.UHflipped > li:last-child {
border-top: none;
border-bottom: 12px solid var(--tooltip-border);
top: 2px;
}
.unihantooltip.UHflipped > li:last-child::after {
border-top: none;
border-bottom: 8px solid var(--border-color-muted, #f7f7f7);
top: 7px;
}
/* 设置图标 */
.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;
top: -9px;
right: -7px;
width: 16px;
height: 16px;
cursor: pointer;
background-image: var(--settings-icon);
background-size: contain;
opacity: 0.6;
transition: opacity 0.15s ease;
pointer-events: auto;
}
.UHsettings:hover {
opacity: 1;
}
/* 目标元素高亮 */
.UHTarget {
border: 2px solid var(--border-color-base, #a2a9b1);
}
/* 客户端JS特定的样式 */
.client-js .unihantooltip li li {
border: none;
box-shadow: none;
height: auto;
width: auto;
margin: auto;
padding: 0;
}