模板:标识符/styles.css

/* ============================================
   标识符条：Template:标识符 的专属样式
   ============================================ */

.id-tag {
    /* 容器：宽度跟随父元素，高度由内容决定 */
    position: relative;
    display: block;
    width: 100%;
    margin: 0.75rem 0;
    padding: 0.7rem 2rem;
    box-sizing: border-box;

    /* 渐变底色 */
    background: linear-gradient(
        90deg,
        #8b1a2b 0%,
        #56000d 50%,
        #8b1a2b 100%
    );
    border-radius: 4px;
    color: #fff;

    /* 隐藏溢出，让四角箭头被裁到容器边缘 */
    overflow: hidden;
}

/* 文字内容：横向 flex，居中，保持单行 */
.id-tag__content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    font-size: 0.9rem;
    line-height: 1.4;
}

/* 说明文字：占据剩余空间，超出显示省略号 */
.id-tag__desc {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

/* 左右两侧的分隔符：不参与收缩 */
.id-tag__sep {
    flex: 0 0 auto;
    color: rgba(255, 255, 255, 0.6);
    font-weight: bold;
    letter-spacing: -0.05em;
}

/* 类型链接：不收缩 */
.id-tag__type,
.id-tag__author {
    flex: 0 0 auto;
    color: #fff;
    text-decoration: none;
}

.id-tag__author {
    font-size: 0.85rem;
    opacity: 0.85;
}

/* 链接悬停 */
.id-tag a {
    color: #fff;
    text-decoration: none;
    border-bottom: 1px dotted rgba(255, 255, 255, 0.45);
}
.id-tag a:hover {
    border-bottom-style: solid;
    border-bottom-color: #fff;
}

/* ============================================
   四角装饰箭头 ⇱
   
   ⇱ 的形态：箭头指向左上角，直角在左上。
   通过镜像变换生成其余三个角。
   定位到容器角落后，直角点正好对准容器顶角。
   ============================================ */

.id-tag__arrow {
    position: absolute;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    line-height: 1;
    user-select: none;
}

.id-tag__arrow--tl {
    top: 2px;
    left: 2px;
}

.id-tag__arrow--tr {
    top: 2px;
    right: 2px;
    transform: scaleX(-1);
}

.id-tag__arrow--bl {
    bottom: 2px;
    left: 2px;
    transform: scaleY(-1);
}

.id-tag__arrow--br {
    bottom: 2px;
    right: 2px;
    transform: scale(-1, -1);
}

/* ============================================
   主题色：通过传入 theme 参数切换
   ============================================ */

/* 默认：暗红（二创作者） */

/* 收编作者：深蓝 */
.id-tag--official {
    background: linear-gradient(90deg, #1a3d5c 0%, #0d2440 50%, #1a3d5c 100%);
}

/* 测试：橙金 */
.id-tag--test {
    background: linear-gradient(90deg, #8b5a1a 0%, #5c3a0d 50%, #8b5a1a 100%);
}

/* 草稿：深灰 */
.id-tag--draft {
    background: linear-gradient(90deg, #555 0%, #333 50%, #555 100%);
}

/* 创意：紫 */
.id-tag--idea {
    background: linear-gradient(90deg, #5c1a5c 0%, #3a0d3a 50%, #5c1a5c 100%);
}

/* ============================================
   窄屏适配
   ============================================ */
@media (max-width: 700px) {
    .id-tag {
        padding: 0.6rem 1.5rem;
    }
    .id-tag__content {
        font-size: 0.8rem;
        gap: 0.4rem;
    }
    .id-tag__arrow {
        font-size: 0.7rem;
    }
}

/* ============================================
   夜间模式：底色加深
   ============================================ */
html.skin-theme-clientpref-night .id-tag {
    filter: brightness(0.85);
}