MediaWiki:Gadget-unihan-helper.css
注意：保存之后，你必须清除浏览器缓存才能看到做出的更改。Google Chrome、Firefox、Microsoft Edge及Safari：按住⇧ Shift键并单击工具栏的“刷新”按钮。参阅Help:绕过浏览器缓存以获取更多帮助。
/**
* Unihan Helper 样式
* 参考 ilhpp 项目的样式和动画实现
*/
/* ========== 动画定义 ========== */
/* 旋转动画 - 用于加载状态的设置按钮 */
@keyframes unihan-rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* 从上方弹入 */
@keyframes unihan-popup-top-in {
0% {
opacity: 0;
transform: translate(0, -20px);
}
100% {
opacity: 1;
transform: translate(0, 0);
}
}
/* 向上方弹出 */
@keyframes unihan-popup-top-out {
0% {
opacity: 1;
transform: translate(0, 0);
}
100% {
opacity: 0;
transform: translate(0, -20px);
}
}
/* 从下方弹入 */
@keyframes unihan-popup-bottom-in {
0% {
opacity: 0;
transform: translate(0, 20px);
}
100% {
opacity: 1;
transform: translate(0, 0);
}
}
/* 向下方弹出 */
@keyframes unihan-popup-bottom-out {
0% {
opacity: 1;
transform: translate(0, 0);
}
100% {
opacity: 0;
transform: translate(0, 20px);
}
}
/* ========== Overlay 容器 ========== */
.unihan-overlay {
position: absolute;
top: 0;
left: 0;
z-index: 999999;
}
/* ========== Tooltip 样式 ========== */
/* Tooltip 容器 */
.unihan-tooltip {
position: absolute;
z-index: 100;
max-width: 350px;
background: var(--background-color-base, #fff);
color: var(--color-base, #202122);
font-size: 14px;
line-height: 1.6;
border: 1px solid var(--border-color-subtle, #a2a9b1);
border-radius: 2px;
box-shadow: 0 15px 45px -10px rgba(0, 0, 0, 0.3);
word-break: break-word;
}
/* Tooltip 内容 */
.unihan-tooltip-content {
padding: 12px 42px 12px 16px;
max-height: 400px;
overflow-y: auto;
position: relative;
}
/* 上方显示时的内容边距调整 */
.unihan-tooltip-above .unihan-tooltip-content {
margin-bottom: -8px;
padding-bottom: 20px;
}
/* 下方显示时的内容边距调整 */
.unihan-tooltip-below .unihan-tooltip-content {
margin-top: -10px;
padding-top: 22px;
}
.unihan-tooltip-text {
white-space: pre-line;
}
/* Tooltip 尾巴（箭头） */
.unihan-tooltip-tail,
.unihan-tooltip-tail::after {
position: absolute;
width: 12px;
height: 12px;
}
.unihan-tooltip-tail {
background: var(--border-color-subtle, #a2a9b1);
background: linear-gradient(to top right, var(--border-color-subtle, #a2a9b1) 50%, transparent 50%);
}
.unihan-tooltip-tail::after {
content: '';
background: var(--background-color-base, #fff);
bottom: 1px;
left: 1px;
}
/* 上方显示时的尾巴 */
.unihan-tooltip-above .unihan-tooltip-tail {
transform: rotate(-45deg);
transform-origin: 100% 100%;
bottom: 0;
left: 15px;
}
/* 下方显示时的尾巴 */
.unihan-tooltip-below .unihan-tooltip-tail {
transform: rotate(135deg);
transform-origin: 0 0;
top: 0;
left: 27px;
}
/* 设置按钮容器 */
.unihan-settings-btn-container {
position: absolute;
top: 4px;
right: 4px;
z-index: 1;
}
/* ========== 设置按钮样式 ========== */
/* 设置按钮 */
.unihan-settings-button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: transparent;
border: 1px solid transparent;
border-radius: 2px;
padding: 5px;
margin: 0;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
transition-property: background-color, border-color, box-shadow;
transition-duration: 0.1s;
}
.unihan-settings-button:hover:not(:disabled) {
background-color: var(--background-color-interactive-subtle, #eaecf0);
}
.unihan-settings-button:active:not(:disabled) {
background-color: var(--background-color-interactive-subtle--active, #dadde3);
}
.unihan-settings-button:focus:not(:active, :disabled) {
border-color: var(--border-color-progressive--focus, #36c);
box-shadow: inset 0 0 0 1px var(--box-shadow-color-progressive--focus, #36c);
outline: none;
}
.unihan-settings-button:disabled {
cursor: not-allowed;
}
/* 设置图标 */
.unihan-settings-icon {
display: inline-block;
width: 20px;
height: 20px;
mask: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20aria-hidden='true'%3e%3c!----%3e%3cg%3e%3cg%20transform='translate(10%2010)'%3e%3cpath%20id='cdx-icon-settings-a'%20d='M1.5-10h-3l-1%206.5h5m0%207h-5l1%206.5h3'%3e%3c/path%3e%3cuse%20xlink:href='%23cdx-icon-settings-a'%20transform='rotate(45)'%3e%3c/use%3e%3cuse%20xlink:href='%23cdx-icon-settings-a'%20transform='rotate(90)'%3e%3c/use%3e%3cuse%20xlink:href='%23cdx-icon-settings-a'%20transform='rotate(135)'%3e%3c/use%3e%3c/g%3e%3cpath%20d='M10%202.5a7.5%207.5%200%20000%2015%207.5%207.5%200%20000-15v4a3.5%203.5%200%20010%207%203.5%203.5%200%20010-7'%3e%3c/path%3e%3c/g%3e%3c/svg%3e") no-repeat center / contain;
-webkit-mask: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20aria-hidden='true'%3e%3c!----%3e%3cg%3e%3cg%20transform='translate(10%2010)'%3e%3cpath%20id='cdx-icon-settings-a'%20d='M1.5-10h-3l-1%206.5h5m0%207h-5l1%206.5h3'%3e%3c/path%3e%3cuse%20xlink:href='%23cdx-icon-settings-a'%20transform='rotate(45)'%3e%3c/use%3e%3cuse%20xlink:href='%23cdx-icon-settings-a'%20transform='rotate(90)'%3e%3c/use%3e%3cuse%20xlink:href='%23cdx-icon-settings-a'%20transform='rotate(135)'%3e%3c/use%3e%3c/g%3e%3cpath%20d='M10%202.5a7.5%207.5%200%20000%2015%207.5%207.5%200%20000-15v4a3.5%203.5%200%20010%207%203.5%203.5%200%20010-7'%3e%3c/path%3e%3c/g%3e%3c/svg%3e") no-repeat center / contain;
background-color: var(--color-base, #202122);
transition: transform 0.2s ease;
}
/* 设置按钮加载状态 - 旋转动画 */
.unihan-settings-button:disabled .unihan-settings-icon {
animation: unihan-rotate 3s linear infinite;
background-color: var(--color-disabled, #a2a9b1);
}
/* 设置按钮悬停效果 */
.unihan-settings-button:hover:not(:disabled) .unihan-settings-icon {
transform: rotate(45deg);
}
/* ========== 动画类 ========== */
.unihan-fade-in-up {
animation: unihan-popup-bottom-in 0.2s ease forwards;
}
.unihan-fade-in-down {
animation: unihan-popup-top-in 0.2s ease forwards;
}
.unihan-fade-out-down {
animation: unihan-popup-bottom-out 0.2s ease forwards;
}
.unihan-fade-out-up {
animation: unihan-popup-top-out 0.2s ease forwards;
}
/* ========== 移动端优化 ========== */
@media (max-width: 768px) {
.unihan-tooltip-content {
max-height: 60vh;
padding: 10px 38px 10px 14px;
}
.unihan-settings-btn-container {
top: 2px;
right: 2px;
}
/* 移动端动画速度稍快 */
.unihan-fade-in-up,
.unihan-fade-in-down,
.unihan-fade-out-down,
.unihan-fade-out-up {
animation-duration: 0.15s;
}
}