竖版身份卡组件 | SCP基金会中文分部

竖版身份卡组件

WikiJump include 未展开： 跨站引用未启用（:scp-wiki:info:start）

作者：

Dr Talcite致谢：

EstrellaYoshte的身份卡组件英文版见此世界语版见此

文件信息

*https://area-cn-02.wdfiles.com/local--files/component:v-id-card/scp-logo-alternate.svg ，修改自https://commons.wikimedia.org/wiki/File:SCP_Foundation_(emblem).svg ，CC BY-SA 3.0 Unported
*https://area-cn-02.wdfiles.com/local--files/component:v-id-card/alexis-talcite.png ，自己画的
*https://area-cn-02.wdfiles.com/local--files/component:v-id-card/placeholder.svg ，自己画的
*https://scp-sandbox-3.wdfiles.com/local--files/component:v-id-card/lillian-lillihammer.gif ，修改自 Fenmoth的艺作
*https://area-cn-02.wdfiles.com/local--files/component:v-id-card/merry-dashmere.png ，自己画的

WikiJump include 未展开： 跨站引用未启用（:scp-wiki:info:end）

这是什么？

可自定义的人员身份卡，既可做装饰组件也可提供人物信息。

其灵感主要源自身份卡组件，但采用了竖向、更紧凑的排版，且增加了“设施”一栏。

示例

C-4

*4951855*

4951855

签发-到期
2018/12
2028/12

姓名
Alexis Asriel Talcite

部门
信息技术与模因学

职位
研究主管

设施
Area-CN-02

如何使用？

复制下面的代码，粘贴到你页面的任何位置（另起一行），然后阅读下面的指南，填入各项信息。

您可以在同一个页面上放入多张身份卡，每一张上的内容都可以不同。每项信息的用途如下：

▷ 选色器▽ 选色器

条形码

ℹ️ 此组件不会裁剪卡片上的条形码，以此来保证条形码可以扫描出来。因此，如果你输入的ID序列号太长，条形码会把卡片竖向拉长。如果你不想让条形码破坏卡片形状，要么保证输入的ID号不超过七位数，要么可以使用|barcode-crop= a 选项。这个选项可以在不截短条形码右侧的数字的前提下，限制条形码的高度。如果你不介意条形码无法扫描，只是用作装饰用途，那这个选项很合适。

模块暂不可用： 此动态功能尚未由只读迁移站支持。

注意在这种情况下，如果你输入的号码依然超级长，可能仍然会把卡面拉长。示例：

[[div style="display: flex;align-items: center;justify-content: center;"]][[div style="width: 50%;text-align: center;font-size: 90%;font-weight: bold;padding: 0 1em;"]]默认（条形码无高度限制）[[/div]][[div style="width: 50%;text-align: center;font-size: 90%;font-weight: bold;padding: 0 1em;"]]设置了barcode-crop之后[[/div]][[/div]][[div style="display: flex;align-items: center;justify-content: center;—v-id-card-width: calc(75px + 7vw);"]]

C-3

*2015-12345-67890*

2015-12345-67890

签发-到期
2015/05
2020/05

姓名
姓名

部门
科学部

职位
研究员

设施
Site-CN-XX

C-3

*2015-12345-67890*

2015-12345-67890

签发-到期
2015/05
2020/05

姓名
姓名

部门
科学部

职位
研究员

设施
Site-CN-XX

[[/div]]

证件照背景预设

如果要使用这个，请将相应的关键字填入|portrait-gradient= 后面。[[div_ style="display: flex;align-items: center;justify-content: center;gap: 1em;"]][[div_ style="width: 47vw; aspect-ratio: 3/4; background-image: var(—v-id-card-gradient-1);"]][[/div]][[div_ style="width: 47vw; aspect-ratio: 3/4; background-image: var(—v-id-card-gradient-2);"]][[/div]][[div_ style="width: 47vw; aspect-ratio: 3/4; background-image: var(—v-id-card-gradient-3);"]][[/div]][[/div]][[div_ style="display: flex;align-items: center;justify-content: center;gap: 1em;"]][[div style="width: 21vw;text-align: center;font-size: 90%;padding: 1em;"]]渐变11[[/div]][[div style="width: 21vw;text-align: center;font-size: 90%;padding: 1em;"]]渐变22[[/div]][[div style="width: 21vw;text-align: center;font-size: 90%;padding: 1em;"]]渐变33[[/div]][[/div]]亦有一些骄傲旗可用。现在可用的包括pride（基本六色彩虹）以及phil费城骄傲旗（包括有色人种），当然还有更多（按字母顺序）：abro流性恋，agender无性别，aroace无浪漫+无性吸引，aromantic无浪漫，asexual无性吸引，bi双性恋，bigender双性别，demiboy部分男性，demigender部分性别，demigirl部分女性，enbian非二元同性恋， gaymen男同性恋，genderfluid流动性别，genderflux波动性别，genderqueer性别酷儿，lesbian女同性恋，nb非二元性别，neutrois中性，omni全性恋，pan泛性恋，pangender泛性别，poly多性恋，qpr酷儿柏拉图，trans跨性别。以后可能会加入更多。点击这些关键词按钮，可以在下面预览其显示效果。

▷ 预览▽ 预览

C-3

*0000000*

0000000

签发-到期
YYYY/MM
YYYY/MM

姓名
[Placeholder]

部门
[Placeholder]

职位
[Placeholder]

设施
[Placeholder]

使用示例

○ 展示● 收起使用示例

除了条形码ID号和人员等级/权限等级之外，其它字段里都可以换行。

C-4

*19990011*

19990011

签发-到期
1995/01
2035/01

姓名
Lillian Shelby
Lillihammer

部门
模因与反模因部

职位
分部主席

设施
Site-43

E-0

*NaN*

NaN

签发-到期
未知
∞

姓名
Alex Thorley

部门
非现实部

职位
[在此插入文字]

设施
Site-0

(肖像照片为故意留空。)

● 收起使用示例

禁止换行

此选项可以防止特定某（几）项信息里的文字自动换行。警告：如果输入的文字内容过长，选择此项会导致溢出。

禁用……项的文字换行：

姓名项：

|name-nowrap= a

部门项：

|dept-nowrap= a

职位项：

|position-nowrap= a

设施项：

|facility-nowrap= a

示例：

[[div style="display: flex;align-items: center;justify-content: center;"]][[div style="width: 50%;text-align: center;font-size: 90%;font-weight: bold;padding: 0 1em;"]]默认（自动换行）[[/div]][[div style="width: 50%;text-align: center;font-size: 90%;font-weight: bold;padding: 0 1em;"]]禁止换行[[/div]][[/div]][[div style="display: flex;align-items: center;justify-content: center;—v-id-card-width: calc(75px + 7vw);"]]

B-5

*001811*

001811

签发-到期
2009/05
2039/05

姓名
Merry S. Dashmere

部门
科学部

职位
HMCL监督员

设施
Area-03

B-5

*001811*

001811

签发-到期
2009/05
2039/05

姓名
Merry S. Dashmere

部门
科学部

职位
HMCL监督员

设施
Area-03

[[/div]]如果每项信息只占一行，那么显示出的就是卡片的最小高度。

技术小细节

○ 显示更多可自定义属性● 隐藏更多可自定义属性

CSS变量

鉴于代码可能太复杂，以及有一些可能用不着，这个组件没有把所有卡面小细节都实装到[[include]]里以供直接自定义。

但是，如果你懂一点CSS的话，下列这些变量在源代码里刻意留了出来，可以用来修改默认值（括号里的值）。

加粗的可能是最有用的几个。

--v-id-card-width：卡片宽度（150px + 15vw）。因为包含一个vw（视口宽度百分比）单位，这个默认值会随着屏幕宽度不同而变化。其它所有值都是自动根据宽度计算的，但是你也可以用其它值覆盖。

[[span class="keycap"]]@@--v-id-card-height@@[[/span]]：卡片高度。最小值是宽度的141.4%（[[$ \sqrt{2} $]]倍），也就是标准A系列纸张的长宽比。这个值最初目的是为了方便打印。如果高度设置为固定值，卡面内容可能会溢出，多出的内容会被裁剪。

--v-id-card-radius：卡片圆角大小（宽度的5%）。

--v-id-card-margin：卡片外边距（2em auto）。默认值2em auto会使得卡片在页面上水平居中，如果不想要居中，可以改成其它值。

--v-id-card-padding：卡面内边距（宽度的4.5%）。

--v-id-card-logo：背景水印logo的链接（基金会默认logo）。
[[span class="keycap"]]@@--v-id-card-logo-opacity@@[[/span]]：logo不透明度（0.08）。

--v-id-card-bg-color：卡面背景色（白色）。
--v-id-card-text-color：主要文字颜色（黑色）。
--v-id-card-secondary-color：信息项标题和证件照边框的颜色（灰色）。
--v-id-card-portrait-horizontal-corner-size：证件照外框四个装饰角的水平方向大小（33%）。
--v-id-card-portrait-vertical-corner-size：证件照外框四个装饰角的垂直方向大小（25%）。
--v-id-card-level0-color：0级权限等级条的颜色（浅灰色）。
--v-id-card-level1-color：1级权限等级条的颜色（绿色）。
--v-id-card-level2-color：2级权限等级条的颜色（蓝色）。
--v-id-card-level3-color：3级权限等级条的颜色（黄色）。
--v-id-card-level4-color：4级权限等级条的颜色（橙色）。
--v-id-card-level5-color：5级权限等级条的颜色（红色）。
--v-id-card-gradient-1（以及其它十几个）：内置的渐变预设值。

以下是使用方法：

如果要同时修改一个页面里所有卡片，把属性写在一个[[module CSS]]里的:root选择器里，然后把代码块放在所有卡片的后面，放在页面源代码末尾。

例如：

[[module CSS]]

/* 把整个页面里所有卡片的基金会logo水印全部改成一个站点的logo */

:root {
--v-id-card-logo: url("你的图片链接");
}

[[/module]]

如果你不想非要把CSS放在页尾，也可以加!important来强行全局覆盖，这样把代码放在哪里都无所谓。例如：

[[module CSS]]

:root {
--v-id-card-logo: url("你的图片链接") !important;
}

[[/module]]

如果只想改某一张卡的样式，把样式写到行内样式里，而不是全局样式[[module CSS]]里。可以把要修改的卡片放进一个[[div]]里，然后在div的style=""里写样式。

例如减小单张卡的宽度：

[[div style="--v-id-card-width: calc(75px + 7vw);"]]

[[/div]]

如果使用静态宽度的话，不建议超过300px（像素）宽，否则在手机端上，卡片内容会被横向挤扁变形。最好使用响应式宽度（动态单位），比如vw（视窗宽度百分比）。

● 隐藏更多可自定义属性

○ 展开源代码● 隐藏源代码

css



/* Lato Black 字体 */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@900&display=swap');

/* 思源黑体 */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@900&family=Noto+Sans+TC:wght@900&display=swap');

/* Libre Barcode 39 字体 */
@import url('https://fonts.googleapis.com/css2?family=Libre+Barcode+39&display=swap');

/* 全局设置 */
:root {
    --v-id-card-width: calc(150px + 15vw);

    --v-id-card-logo: url(https://area-cn-02.wdfiles.com/local--files/component:v-id-card/scp-logo-alternate.svg);

    --v-id-card-bg-color: rgb(255, 255, 255);
    --v-id-card-text-color: rgb(0, 0, 0);
    --v-id-card-secondary-color: rgb(175, 175, 175);
    --v-id-card-level0-color: rgb(230, 230, 230);
    --v-id-card-level1-color: rgb(58, 214, 55);
    --v-id-card-level2-color: rgb(50, 148, 255);
    --v-id-card-level3-color: rgb(255, 200, 38);
    --v-id-card-level4-color: rgb(255, 131, 38);
    --v-id-card-level5-color: rgb(255, 38, 0);

    --v-id-card-gradient-1: linear-gradient(to bottom, rgb(50, 134, 224), 40%, rgb(255, 255, 255));
    --v-id-card-gradient-2: radial-gradient(rgb(255, 255, 255), rgb(226, 224, 233));
    --v-id-card-gradient-3: radial-gradient(ellipse 100% 120% at bottom, rgb(200, 200, 200), rgb(21, 21, 30));
}

@media only screen and (max-width: 167px) {
    :root {
        --v-id-card-width: 90vw;
    }
}

.id-card-vertical {
    position: relative;
    z-index: 0;
    overflow: hidden;
    margin: var(--v-id-card-margin, 2em auto);
    box-sizing: border-box;
    width: var(--v-id-card-width);
    height: var(--v-id-card-height, auto);
    min-height: calc(var(--v-id-card-width)* 1.414);
    padding: var(--v-id-card-padding, calc(var(--v-id-card-width) * 0.045));
    border-radius: var(--v-id-card-radius, calc(var(--v-id-card-width) * 0.05));

    box-shadow: 0 0 calc(var(--v-id-card-width) * 0.025) gray;
    font-family: 'Lato', "Noto Sans SC", "Noto Sans TC", Tahoma, sans-serif;
    font-size: calc(var(--v-id-card-width) * 0.06);
    line-height: initial;
    background-color: var(--v-id-card-bg-color);
    color: var(--v-id-card-text-color);

    display: grid;
    grid-template-areas: "level level portrait"
                                   "data . portrait"
                                   "data . ."
                                   "data info info";
    grid-template-columns: 25% 1fr 46%;
    grid-template-rows: 
                                   calc(var(--v-id-card-width) * 0.4) 
                                   calc(var(--v-id-card-width) * 0.1) 
                                   calc(var(--v-id-card-width) * 0.1) 
                                   1fr;
}

/* 水印 */

.id-card-vertical::after {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: var(--v-id-card-logo-opacity, 0.08);
    background-image: var(--v-id-card-logo);
    background-repeat: no-repeat;
    background-size: 75% 75%;
    background-position: 186% 146%;
    pointer-events: none;
}

/* ↖️左上角部分 */

.id-card-vertical .level {
    grid-area: level;
    display: flex;
    flex-direction: column;
    position: relative;
}

.id-card-vertical .level-bar-container {
    display: flex;
    flex-direction: column;
    gap: calc(var(--v-id-card-width) * 0.013);
    width: calc(var(--v-id-card-width) * 0.39);
    margin-left: calc(var(--v-id-card-padding, calc(var(--v-id-card-width) * 0.045)) * -1);
}

.id-card-vertical .level-bar {
    width: 100%;
    height: calc(var(--v-id-card-width) * 0.0267);
    background-color: var(--v-id-card-level0-color);
}

.id-card-vertical .level-1 .level-bar:nth-child(1) {
    background-color: var(--v-id-card-level1-color);
}
.id-card-vertical .level-2 .level-bar:is(:nth-child(1), :nth-child(2)) {
    background-color: var(--v-id-card-level2-color);
}
.id-card-vertical .level-3 .level-bar:is(:nth-child(1), :nth-child(2), :nth-child(3)) {
    background-color: var(--v-id-card-level3-color);
}
.id-card-vertical .level-4 .level-bar:is(:nth-child(1), :nth-child(2), :nth-child(3), :nth-child(4)) {
    background-color: var(--v-id-card-level4-color);
}
.id-card-vertical .level-5 .level-bar {
    background-color: var(--v-id-card-level5-color);
}

.id-card-vertical .level-name {
    font-weight: 900;
    font-size: calc(var(--v-id-card-width) * 0.19);
    position: absolute;
    bottom: 0;
}

/* ↙️左下角部分 */

.id-card-vertical .data {
    grid-area: data;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: calc(var(--v-id-card-width)* 0.02);
}

.id-card-vertical .barcode-wrap {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    justify-content: space-between;
    gap: calc(var(--v-id-card-width)* 0.02);
    white-space: nowrap;
    writing-mode: vertical-lr;
    text-align: right;
}

.id-card-vertical .barcode {
    font-family: 'Libre Barcode 39', sans-serif;
    font-size: calc(var(--v-id-card-width) * 0.167);
    font-weight: normal;     /* Barcode cannot display properly on higher font weights */
    margin-left: -0.38em;
    transform: scaleX(1.2);
    overflow: hidden;
}

.id-card-vertical .barcode-num {
    font-weight: 900;
    font-size: calc(var(--v-id-card-width) * 0.067);
}

.id-card-vertical .issue-exp {
    display: flex;
    flex-direction: column;
    white-space: nowrap;
    font-size: 0;    /* Remove <br> which takes up space */
}

.id-card-vertical span.issue-exp-title {
    font-weight: 900;
    font-size: calc(var(--v-id-card-width) * 0.043);
    color: var(--v-id-card-secondary-color);
}

.id-card-vertical span.issue-exp-content {
    font-weight: 900;
    font-size: calc(var(--v-id-card-width) * 0.056);
}

/* ↗️右上角部分 */

.id-card-vertical .portrait {
    grid-area: portrait;
    border: solid calc(var(--v-id-card-width) * 0.019) var(--v-id-card-secondary-color);
    aspect-ratio: 3 / 4;
    position: relative;
    margin: calc(var(--v-id-card-width)* 0.01);
}

.id-card-vertical .portrait::after {
    content: "";
    display: block;
    pointer-events: none;
    position: absolute;
    top: calc(var(--v-id-card-width)* -0.03);
    bottom: calc(var(--v-id-card-width)* -0.03);
    left: calc(var(--v-id-card-width)* -0.03);
    right: calc(var(--v-id-card-width)* -0.03);
    border: calc(var(--v-id-card-width)* 0.005) solid var(--v-id-card-secondary-color);
    clip-path: polygon(
0% 0%, 
var(--v-id-card-portrait-horizontal-corner-size, 33.3%) 0%, 
var(--v-id-card-portrait-horizontal-corner-size, 33.3%) var(--v-id-card-portrait-vertical-corner-size, 25%), 
calc(100% - var(--v-id-card-portrait-horizontal-corner-size, 33.3%)) var(--v-id-card-portrait-vertical-corner-size, 25%), 
calc(100% - var(--v-id-card-portrait-horizontal-corner-size, 33.3%)) 0%, 
100% 0%, 
100% var(--v-id-card-portrait-vertical-corner-size, 25%), 
calc(100% - var(--v-id-card-portrait-horizontal-corner-size, 33.3%)) var(--v-id-card-portrait-vertical-corner-size, 25%), 
calc(100% - var(--v-id-card-portrait-horizontal-corner-size, 33.3%)) calc(100% - var(--v-id-card-portrait-vertical-corner-size, 25%)), 
100% calc(100% - var(--v-id-card-portrait-vertical-corner-size, 25%)), 
100% 100%, 
calc(100% - var(--v-id-card-portrait-horizontal-corner-size, 33.3%)) 100%, 
calc(100% - var(--v-id-card-portrait-horizontal-corner-size, 33.3%)) calc(100% - var(--v-id-card-portrait-vertical-corner-size, 25%)), 
var(--v-id-card-portrait-horizontal-corner-size, 33.3%) calc(100% - var(--v-id-card-portrait-vertical-corner-size, 25%)), 
var(--v-id-card-portrait-horizontal-corner-size, 33.3%) 100%, 
0% 100%, 
0% calc(100% - var(--v-id-card-portrait-vertical-corner-size, 25%)), 
var(--v-id-card-portrait-horizontal-corner-size, 33.3%) calc(100% - var(--v-id-card-portrait-vertical-corner-size, 25%)), 
var(--v-id-card-portrait-horizontal-corner-size, 33.3%) var(--v-id-card-portrait-vertical-corner-size, 25%), 
0% var(--v-id-card-portrait-vertical-corner-size, 25%), 
0% 0%);
}

.id-card-vertical .portrait img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    font-size: calc(var(--v-id-card-width) * 0.03); /* 防止加载不出时的图片链接文字撑大照片框 */
}

/* ↘️右下角部分 */

.id-card-vertical .info {
    grid-area: info;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    text-align: right;
    gap: calc(var(--v-id-card-width)* 0.01);
    word-break: break-all;
    max-width: calc((var(--v-id-card-width) - var(--v-id-card-padding, calc(var(--v-id-card-width) * 0.045))* 2)* 0.75) !important;

}

.id-card-vertical span.info-title {
    font-weight: 900;
    font-size: calc(var(--v-id-card-width) * 0.055);
    color: var(--v-id-card-secondary-color);
}

.id-card-vertical span.info-content {
    font-weight: 900;
    font-size: calc(var(--v-id-card-width) * 0.08);
    display: flex;
    flex-direction: row-reverse; /* 防止文字向右溢出 */
}

/* 🌈骄傲旗渐变 */
:root {
    --v-id-card-gradient-pride:
linear-gradient(to bottom,
rgb(228, 0, 0) 16.7%,
rgb(255, 140, 0) 16.7%,
rgb(255, 140, 0) 33.3%,
rgb(255, 237, 0) 33.3%,
rgb(255, 237, 0) 50%,
rgb(0, 128, 38) 50%,
rgb(0, 128, 38) 66.7%,
rgb(0, 77, 255) 66.7%,
rgb(0, 77, 255) 83.3%,
rgb(117, 7, 135) 83.3%);

    --v-id-card-gradient-phil:
linear-gradient(to bottom,
rgb(0, 0, 0) 12.5%,
rgb(121, 78, 16) 12.5%,
rgb(121, 78, 16) 25%,
rgb(228, 0, 0) 25%,
rgb(228, 0, 0) 37.5%,
rgb(255, 140, 0) 37.5%,
rgb(255, 140, 0) 50%,
rgb(255, 237, 0) 50%,
rgb(255, 237, 0) 62.5%,
rgb(0, 128, 38) 62.5%,
rgb(0, 128, 38) 75%,
rgb(0, 77, 255) 75%,
rgb(0, 77, 255) 87.5%,
rgb(117, 7, 135) 87.5%);

    --v-id-card-gradient-abro:
linear-gradient(to bottom,
rgb(101, 194, 134) 20%,
rgb(180, 228, 204) 20%,
rgb(180, 228, 204) 40%,
rgb(255, 255, 255) 40%,
rgb(255, 255, 255) 60%,
rgb(231, 150, 183) 60%,
rgb(231, 150, 183) 80%,
rgb(217, 68, 110) 80%);

    --v-id-card-gradient-agender:
linear-gradient(to bottom,
rgb(0, 0, 0) 14.3%,
rgb(187, 187, 187) 14.3%,
rgb(187, 187, 187) 28.6%,
rgb(255, 255, 255) 28.6%,
rgb(255, 255, 255) 42.9%,
rgb(186, 244, 132) 42.9%,
rgb(186, 244, 132) 57.1%,
rgb(255, 255, 255) 57.1%,
rgb(255, 255, 255) 71.4%,
rgb(187, 187, 187) 71.4%,
rgb(187, 187, 187) 85.7%,
rgb(0, 0, 0) 85.7%);

    --v-id-card-gradient-aroace:
linear-gradient(to bottom,
rgb(226, 140, 0) 20%,
rgb(236, 205, 0) 20%,
rgb(236, 205, 0) 40%,
rgb(255, 255, 255) 40%,
rgb(255, 255, 255) 60%,
rgb(98, 174, 220) 60%,
rgb(98, 174, 220) 80%,
rgb(32, 56, 86) 80%);

    --v-id-card-gradient-aromantic:
linear-gradient(to bottom,
rgb(58, 166, 64) 20%,
rgb(168, 212, 122) 20%,
rgb(168, 212, 122) 40%,
rgb(255, 255, 255) 40%,
rgb(255, 255, 255) 60%,
rgb(171, 171, 171) 60%,
rgb(171, 171, 171) 80%,
rgb(0, 0, 0) 80%);

    --v-id-card-gradient-asexual:
linear-gradient(to bottom,
rgb(0, 0, 0) 25%,
rgb(149, 149, 149) 25%,
rgb(149, 149, 149) 50%,
rgb(255, 255, 255) 50%,
rgb(255, 255, 255) 75%,
rgb(102, 0, 102) 75%);

    --v-id-card-gradient-bi:
linear-gradient(to bottom,
rgb(215, 0, 113) 40%,
rgb(156, 78, 151) 40%,
rgb(156, 78, 151) 60%,
rgb(0, 53, 170) 60%);

    --v-id-card-gradient-bigender:
linear-gradient(to bottom,
rgb(104, 146, 217) 14.3%,
rgb(145, 195, 231) 14.3%,
rgb(145, 195, 231) 28.6%,
rgb(255, 255, 255) 28.6%,
rgb(255, 255, 255) 42.9%,
rgb(197, 164, 236) 42.9%,
rgb(197, 164, 236) 57.1%,
rgb(255, 255, 255) 57.1%,
rgb(255, 255, 525) 71.4%,
rgb(248, 171, 197) 71.4%,
rgb(248, 171, 197) 85.7%,
rgb(237, 121, 168) 85.7%);

    --v-id-card-gradient-demiboy:
linear-gradient(to bottom,
rgb(127, 127, 127) 14.3%,
rgb(195, 195, 195) 14.3%,
rgb(195, 195, 195) 28.6%,
rgb(153, 217, 234) 28.6%,
rgb(153, 217, 234) 42.9%,
rgb(255, 255, 255) 42.9%,
rgb(255, 255, 255) 57.1%,
rgb(153, 217, 234) 57.1%,
rgb(153, 217, 234) 71.4%,
rgb(195, 195, 195) 71.4%,
rgb(195, 195, 195) 85.7%,
rgb(127, 127, 127) 85.7%);

    --v-id-card-gradient-demigender:
linear-gradient(to bottom,
rgb(127, 127, 127) 14.3%,
rgb(195, 195, 195) 14.3%,
rgb(195, 195, 195) 28.6%,
rgb(251, 255, 117) 28.6%,
rgb(251, 255, 117) 42.9%,
rgb(255, 255, 255) 42.9%,
rgb(255, 255, 255) 57.1%,
rgb(251, 255, 117) 57.1%,
rgb(251, 255, 117) 71.4%,
rgb(195, 195, 195) 71.4%,
rgb(195, 195, 195) 85.7%,
rgb(127, 127, 127) 85.7%);

    --v-id-card-gradient-demigirl:
linear-gradient(to bottom,
rgb(127, 127, 127) 14.3%,
rgb(195, 195, 195) 14.3%,
rgb(195, 195, 195) 28.6%,
rgb(255, 176, 202) 28.6%,
rgb(255, 176, 202) 42.9%,
rgb(255, 255, 255) 42.9%,
rgb(255, 255, 255) 57.1%,
rgb(255, 176, 202) 57.1%,
rgb(255, 176, 202) 71.4%,
rgb(195, 195, 195) 71.4%,
rgb(195, 195, 195) 85.7%,
rgb(127, 127, 127) 85.7%);

    --v-id-card-gradient-enbian:
linear-gradient(to bottom,
rgb(62, 75, 198) 14.3%,
rgb(93, 95, 247) 14.3%,
rgb(93, 95, 247) 28.6%,
rgb(146, 159, 247) 28.6%,
rgb(146, 159, 247) 42.9%,
rgb(255, 255, 255) 42.9%,
rgb(255, 255, 255) 57.1%,
rgb(218, 160, 241) 57.1%,
rgb(218, 160, 241) 71.4%,
rgb(131, 66, 186) 71.4%,
rgb(131, 66, 186) 85.7%,
rgb(58, 27, 144) 85.7%);

    --v-id-card-gradient-gaymen:
linear-gradient(to bottom,
rgb(7, 142, 112) 14.3%,
rgb(38, 206, 170) 14.3%,
rgb(38, 206, 170) 28.6%,
rgb(152, 232, 193) 28.6%,
rgb(152, 232, 193) 42.9%,
rgb(255, 255, 255) 42.9%,
rgb(255, 255, 255) 57.1%,
rgb(123, 173, 226) 57.1%,
rgb(123, 173, 226) 71.4%,
rgb(80, 73, 203) 71.4%,
rgb(80, 73, 203) 85.7%,
rgb(61, 26, 120) 85.7%);

    --v-id-card-gradient-genderfluid:
linear-gradient(to bottom,
rgb(254, 117, 161) 20%,
rgb(255, 255, 255) 20%,
rgb(255, 255, 255) 40%,
rgb(190, 24, 214) 40%,
rgb(190, 24, 214) 60%,
rgb(0, 0, 0) 60%,
rgb(0, 0, 0) 80%,
rgb(51, 62, 188) 80%);

    --v-id-card-gradient-genderflux:
linear-gradient(to bottom,
rgb(244, 118, 148) 16.7%,
rgb(242, 162, 185) 16.7%,
rgb(242, 162, 185) 33.3%,
rgb(206, 206, 206) 33.3%,
rgb(206, 206, 206) 50%,
rgb(124, 224, 247) 50%,
rgb(124, 224, 247) 66.7%,
rgb(62, 205, 249) 66.7%,
rgb(62, 205, 249) 83.3%,
rgb(255, 244, 141) 83.3%);

    --v-id-card-gradient-genderqueer:
 linear-gradient(to bottom,
rgb(182, 151, 218) 33.3%,
rgb(255, 255, 255) 33.3%,
rgb(255, 255, 255) 66.7%,
rgb(107, 142, 58) 66.7%);

    --v-id-card-gradient-lesbian:
linear-gradient(to bottom,
rgb(215, 44, 0) 14.3%,
rgb(239, 116, 39) 14.3%,
rgb(239, 116, 39) 28.6%,
rgb(255, 151, 87) 28.6%,
rgb(255, 151, 87) 42.9%,
rgb(255, 255, 255) 42.9%,
rgb(255, 255, 255) 57.1%,
rgb(209, 98, 166) 57.1%,
rgb(209, 98, 166) 71.4%,
rgb(183, 85, 146) 71.4%,
rgb(183, 85, 146) 85.7%,
rgb(165, 1, 98) 85.7%);

    --v-id-card-gradient-nb:
linear-gradient(to bottom,
rgb(254, 244, 51) 25%,
rgb(255, 255, 255) 25%,
rgb(255, 255, 255) 50%,
rgb(154, 89, 207) 50%,
rgb(154, 89, 207) 75%,
rgb(45, 45, 45) 75%);

    --v-id-card-gradient-neutrois:
linear-gradient(to bottom,
rgb(255, 255, 255) 33.3%,
rgb(43, 157, 23) 33.3%,
rgb(43, 157, 23) 66.7%,
rgb(0, 0, 0) 66.7%);

   --v-id-card-gradient-omni:
linear-gradient(to bottom,
rgb(255, 156, 206) 20%,
rgb(255, 82, 191) 20%,
rgb(255, 82, 191) 40%,
rgb(33, 0, 68) 40%,
rgb(33, 0, 68) 60%,
rgb(102, 94, 255) 60%,
rgb(102, 94, 255) 80%,
rgb(141, 167, 255) 80%);

    --v-id-card-gradient-pan:
linear-gradient(to bottom,
rgb(255, 27, 141) 33.3%,
rgb(255, 217, 0) 33.3%,
rgb(255, 217, 0) 66.7%,
rgb(27, 179, 255) 66.7%);

    --v-id-card-gradient-pangender:
linear-gradient(to bottom,
rgb(255, 247, 152) 14.3%,
rgb(254, 221, 204) 14.3%,
rgb(254, 221, 204) 28.6%,
rgb(255, 235, 252) 28.6%,
rgb(255, 235, 252) 42.9%,
rgb(255, 255, 255) 42.9%,
rgb(255, 255, 255) 57.1%,
rgb(255, 235, 252) 57.1%,
rgb(255, 235, 252) 71.4%,
rgb(254, 221, 204) 71.4%,
rgb(254, 221, 204) 85.7%,
rgb(255, 247, 152) 85.7%);

    --v-id-card-gradient-poly:
linear-gradient(to bottom,
rgb(246, 28, 185) 33.3%,
rgb(7, 213, 105) 33.3%,
rgb(7, 213, 105) 66.7%,
rgb(28, 146, 246) 66.7%);

    --v-id-card-gradient-qpr:
linear-gradient(to bottom,
rgb(255, 249, 125) 20%,
rgb(255, 174, 221) 20%,
rgb(255, 174, 221) 40%,
rgb(255, 255, 255) 40%,
rgb(255, 255, 255) 60%,
rgb(127, 127, 127) 60%,
rgb(127, 127, 127) 80%,
rgb(15, 15, 15) 80%);

    --v-id-card-gradient-trans:
linear-gradient(to bottom,
rgb(91, 207, 250) 20%,
rgb(245, 171, 185) 20%,
rgb(245, 171, 185) 40%,
rgb(255, 255, 255) 40%,
rgb(255, 255, 255) 60%,
rgb(245, 171, 185) 60%,
rgb(245, 171, 185) 80%,
rgb(91, 207, 250) 80%);
}

● 隐藏源代码

组件

页面版本：⁨0⁩, 最后编辑于: ⁨2025/3/31 12:22:36⁩ (⁨⁨534⁩ 日前⁩), 现时评分: 16

历史附件 + 选项