跳转到内容
打开/关闭菜单
  • 1 条目
  • 2 文件
  • 8 用户
  • 590 编辑
ANACHRONISM
打开/关闭外观设置菜单
打开/关闭个人菜单
未登录
未登录用户的IP地址会在进行任意编辑后公开展示。

模板:标识符/styles.css:修订间差异

来自ANACHRONISM
Ancimen​(留言 | 贡献)
无编辑摘要
Ancimen​(留言 | 贡献)
无编辑摘要
第1行: 第1行:
/* ============================================
.wiki-marker {
  标识符条:Template:标识符 的专属样式
     /* 定位:给四角箭头做参照 */
  ============================================ */
 
.id-tag {
     /* 容器:宽度跟随父元素,高度由内容决定 */
     position: relative;
     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,居中,保持单行 */
    /* 布局:横向 flex,宽度撑满容器,永不换行 */
.id-tag__content {
     display: flex;
     display: flex;
     align-items: center;
     align-items: center;
     justify-content: center;
     gap: 0.5rem;
     gap: 0.75rem;
    width: 100%;
    min-height: 2.25rem;
     padding: 0.45rem 2.25rem;
    box-sizing: border-box;
     white-space: nowrap;
     white-space: nowrap;
     overflow: hidden;
     overflow: hidden;
    font-size: 0.9rem;
    line-height: 1.4;
}


/* 说明文字:占据剩余空间,超出显示省略号 */
    /* 视觉:暗红渐变底色 + 圆角 */
.id-tag__desc {
     border-radius: 0.4rem;
    flex: 1 1 auto;
     background: linear-gradient(90deg, #56000d 0%, #8b1a2b 50%, #56000d 100%);
     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;
     color: #fff;
    text-decoration: none;
}


.id-tag__author {
     font-size: 0.88rem;
     font-size: 0.85rem;
     line-height: 1.4;
     opacity: 0.85;
}
}


/* 链接悬停 */
/* 四角箭头:纯装饰 */
.id-tag a {
.wiki-marker__corner {
    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;
     position: absolute;
     color: rgba(255, 255, 255, 0.5);
     display: inline-flex;
     font-size: 0.85rem;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
     font-size: 1.5rem;
     line-height: 1;
     line-height: 1;
    color: rgba(255, 255, 255, 0.55);
     user-select: none;
     user-select: none;
}
}


.id-tag__arrow--tl {
.wiki-marker__corner--tl {
     top: 2px;
     top: 0;
     left: 2px;
     left: 0;
    transform-origin: top left;
}
}
 
.wiki-marker__corner--tr {
.id-tag__arrow--tr {
     top: 0;
     top: 2px;
     right: 0;
     right: 2px;
    transform-origin: top right;
     transform: scaleX(-1);
     transform: rotate(90deg);
}
}
 
.wiki-marker__corner--br {
.id-tag__arrow--bl {
     bottom: 0;
     bottom: 2px;
     right: 0;
     left: 2px;
     transform-origin: bottom right;
     transform: scaleY(-1);
    transform: rotate(180deg);
}
}
 
.wiki-marker__corner--bl {
.id-tag__arrow--br {
     bottom: 0;
     bottom: 2px;
     left: 0;
     right: 2px;
     transform-origin: bottom left;
     transform: scale(-1, -1);
    transform: rotate(-90deg);
}
}


/* ============================================
/* 说明文字(可点击) */
  主题色:通过传入 theme 参数切换
.wiki-marker__label {
  ============================================ */
    flex: 1 1 auto;
 
    min-width: 0;
/* 默认:暗红(二创作者) */
    text-align: center;
 
    color: #fff;
/* 收编作者:深蓝 */
    text-decoration: none;
.id-tag--official {
     overflow: hidden;
     background: linear-gradient(90deg, #1a3d5c 0%, #0d2440 50%, #1a3d5c 100%);
    text-overflow: ellipsis;
}
}
 
.wiki-marker__label:hover {
/* 测试:橙金 */
     color: #ffd7dd;
.id-tag--test {
    text-decoration: none;
     background: linear-gradient(90deg, #8b5a1a 0%, #5c3a0d 50%, #8b5a1a 100%);
}
}


/* 草稿:深灰 */
/* 作者栏 */
.id-tag--draft {
.wiki-marker__author {
     background: linear-gradient(90deg, #555 0%, #333 50%, #555 100%);
     flex: 0 0 auto;
    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;
}
}
 
.wiki-marker__author a {
/* 创意:紫 */
     color: #fff;
.id-tag--idea {
     text-decoration: underline;
     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 .wiki-marker,
  ============================================ */
html.skin-theme-clientpref-pureblack .wiki-marker {
html.skin-theme-clientpref-night .id-tag {
     background: linear-gradient(90deg, #3a0008 0%, #6b1010 50%, #3a0008 100%);
     filter: brightness(0.85);
}
}

2026年9月29日 (二) 20:51的版本

.wiki-marker {
    /* 定位:给四角箭头做参照 */
    position: relative;

    /* 布局:横向 flex,宽度撑满容器,永不换行 */
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 2.25rem;
    padding: 0.45rem 2.25rem;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;

    /* 视觉:暗红渐变底色 + 圆角 */
    border-radius: 0.4rem;
    background: linear-gradient(90deg, #56000d 0%, #8b1a2b 50%, #56000d 100%);
    color: #fff;

    font-size: 0.88rem;
    line-height: 1.4;
}

/* 四角箭头:纯装饰 */
.wiki-marker__corner {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    font-size: 1.5rem;
    line-height: 1;
    color: rgba(255, 255, 255, 0.55);
    user-select: none;
}

.wiki-marker__corner--tl {
    top: 0;
    left: 0;
    transform-origin: top left;
}
.wiki-marker__corner--tr {
    top: 0;
    right: 0;
    transform-origin: top right;
    transform: rotate(90deg);
}
.wiki-marker__corner--br {
    bottom: 0;
    right: 0;
    transform-origin: bottom right;
    transform: rotate(180deg);
}
.wiki-marker__corner--bl {
    bottom: 0;
    left: 0;
    transform-origin: bottom left;
    transform: rotate(-90deg);
}

/* 说明文字(可点击) */
.wiki-marker__label {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    color: #fff;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wiki-marker__label:hover {
    color: #ffd7dd;
    text-decoration: none;
}

/* 作者栏 */
.wiki-marker__author {
    flex: 0 0 auto;
    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;
}
.wiki-marker__author a {
    color: #fff;
    text-decoration: underline;
}

/* 夜间模式:加深一层底色,白字保持可读 */
html.skin-theme-clientpref-night .wiki-marker,
html.skin-theme-clientpref-pureblack .wiki-marker {
    background: linear-gradient(90deg, #3a0008 0%, #6b1010 50%, #3a0008 100%);
}