模板:标识符/styles.css

/* ===== 基础容器 ===== */
.wiki-marker {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 2.5rem;
    padding: 0.5rem 6rem;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    border-radius: 0.4rem;
    color: #fff;
    font-size: 0.88rem;
    line-height: 1.5;
}

/* ===== 颜色变体：背景渐变 ===== */
.wiki-marker--red {
    background: linear-gradient(90deg, #56000d 0%, #8b1a2b 50%, #56000d 100%);
}
.wiki-marker--orange {
    background: linear-gradient(90deg, #5c2a00 0%, #d97706 50%, #5c2a00 100%);
}
.wiki-marker--yellow {
    background: linear-gradient(90deg, #4a3800 0%, #b8860b 50%, #4a3800 100%);
}
.wiki-marker--green {
    background: linear-gradient(90deg, #0f3d1a 0%, #2d8a47 50%, #0f3d1a 100%);
}
.wiki-marker--purple {
    background: linear-gradient(90deg, #3a0d5c 0%, #7c3aed 50%, #3a0d5c 100%);
}

/* ===== 四角箭头 ===== */
.wiki-marker__corner {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    font-size: 1.5rem;
    line-height: 1;
    color: rgba(255, 255, 255, 0.7);
    user-select: none;
}
.wiki-marker__corner--tl { top: 0.15rem; left: 0.15rem; transform: rotate(0deg); }
.wiki-marker__corner--tr { top: 0.15rem; right: 0.15rem; transform: rotate(90deg); }
.wiki-marker__corner--br { bottom: 0.15rem; right: 0.15rem; transform: rotate(180deg); }
.wiki-marker__corner--bl { bottom: 0.15rem; left: 0.15rem; transform: rotate(-90deg); }

/* ===== 箭头呼吸发光（按颜色） ===== */
@keyframes wiki-marker-glow-red {
    0%, 100% { text-shadow: 0 0 3px rgba(255,215,221,0.7), 0 0 6px rgba(139,26,43,0.5); }
    50% { text-shadow: 0 0 5px rgba(255,215,221,1), 0 0 12px rgba(139,26,43,0.9), 0 0 20px rgba(139,26,43,0.6); }
}
@keyframes wiki-marker-glow-orange {
    0%, 100% { text-shadow: 0 0 3px rgba(255,224,179,0.7), 0 0 6px rgba(217,119,6,0.5); }
    50% { text-shadow: 0 0 5px rgba(255,224,179,1), 0 0 12px rgba(217,119,6,0.9), 0 0 20px rgba(217,119,6,0.6); }
}
@keyframes wiki-marker-glow-yellow {
    0%, 100% { text-shadow: 0 0 3px rgba(255,243,179,0.7), 0 0 6px rgba(184,134,11,0.5); }
    50% { text-shadow: 0 0 5px rgba(255,243,179,1), 0 0 12px rgba(184,134,11,0.9), 0 0 20px rgba(184,134,11,0.6); }
}
@keyframes wiki-marker-glow-green {
    0%, 100% { text-shadow: 0 0 3px rgba(200,232,208,0.7), 0 0 6px rgba(45,138,71,0.5); }
    50% { text-shadow: 0 0 5px rgba(200,232,208,1), 0 0 12px rgba(45,138,71,0.9), 0 0 20px rgba(45,138,71,0.6); }
}
@keyframes wiki-marker-glow-purple {
    0%, 100% { text-shadow: 0 0 3px rgba(224,208,255,0.7), 0 0 6px rgba(124,58,237,0.5); }
    50% { text-shadow: 0 0 5px rgba(224,208,255,1), 0 0 12px rgba(124,58,237,0.9), 0 0 20px rgba(124,58,237,0.6); }
}

.wiki-marker--red .wiki-marker__corner { animation: wiki-marker-glow-red 2s ease-in-out infinite; }
.wiki-marker--orange .wiki-marker__corner { animation: wiki-marker-glow-orange 2s ease-in-out infinite; }
.wiki-marker--yellow .wiki-marker__corner { animation: wiki-marker-glow-yellow 2s ease-in-out infinite; }
.wiki-marker--green .wiki-marker__corner { animation: wiki-marker-glow-green 2s ease-in-out infinite; }
.wiki-marker--purple .wiki-marker__corner { animation: wiki-marker-glow-purple 2s ease-in-out infinite; }

/* ===== 说明文字 ===== */
.wiki-marker__label {
    flex: 0 1 auto;
    min-width: 0;
    text-align: center;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wiki-marker__label a {
    color: inherit !important;
    text-decoration: none !important;
}
.wiki-marker__label a:hover {
    color: #ffd7dd !important;
    text-decoration: none !important;
}

/* ===== 类型短名（移动端才显示） ===== */
.wiki-marker__type {
    display: none;
    flex: 0 0 auto;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.85);
}

/* ===== 作者栏 ===== */
.wiki-marker__author {
    position: absolute;
    top: 50%;
    right: 2rem;
    transform: translateY(-50%);
    padding-left: 0.75rem;
    border-left: 1px solid rgba(255, 255, 255, 0.35);
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.82rem;
    white-space: nowrap;
    line-height: 1.5;
}
.wiki-marker__author a {
    color: #fff;
    text-decoration: underline;
}

/* ===== 空节点隐藏 ===== */
.wiki-marker__type:empty,
.wiki-marker__author:empty {
    display: none !important;
}

/* ===== 夜间模式 ===== */
html.skin-theme-clientpref-night .wiki-marker--red,
html.skin-theme-clientpref-pureblack .wiki-marker--red {
    background: linear-gradient(90deg, #3a0008 0%, #6b1010 50%, #3a0008 100%);
}
html.skin-theme-clientpref-night .wiki-marker--orange,
html.skin-theme-clientpref-pureblack .wiki-marker--orange {
    background: linear-gradient(90deg, #3a1a00 0%, #92400e 50%, #3a1a00 100%);
}
html.skin-theme-clientpref-night .wiki-marker--yellow,
html.skin-theme-clientpref-pureblack .wiki-marker--yellow {
    background: linear-gradient(90deg, #2d2200 0%, #856404 50%, #2d2200 100%);
}
html.skin-theme-clientpref-night .wiki-marker--green,
html.skin-theme-clientpref-pureblack .wiki-marker--green {
    background: linear-gradient(90deg, #0a2a12 0%, #1e5c30 50%, #0a2a12 100%);
}
html.skin-theme-clientpref-night .wiki-marker--purple,
html.skin-theme-clientpref-pureblack .wiki-marker--purple {
    background: linear-gradient(90deg, #26103a 0%, #55308f 50%, #26103a 100%);
}

/* ===== 移动端：只显示类型 + 作者 ===== */
@media (max-width: 700px) {
    .wiki-marker {
        padding: 0.5rem 2.5rem;
        gap: 0.75rem;
        justify-content: center;
    }
    .wiki-marker__label {
        display: none;
    }
    .wiki-marker__type {
        display: inline-block;
        font-size: 0.85rem;
    }
    .wiki-marker__author {
        position: static;
        transform: none;
        padding-left: 0.75rem;
        border-left: 1px solid rgba(255, 255, 255, 0.35);
        font-size: 0.8rem;
    }
}