Vertikala ID-Karto

AVIZO

Ĉi tiu estas ŝablona paĝo uzata en la SCP Vikio.

BONVOLE NE MODIFU ĈI TIUN PAĜON SEN PERMESO DE LA ADMINISTRANTOJ

---

• 

  close

  Info

  ---

  X

  Aŭtoro: Dr Talcite

  Dankon al: ID-Karto Komponanto de EstrellaYoshte

  Vidi alie: Angla versio, Ĉina versio

  ---

  Informo de Dosieroj

  1. https://scp-wiki.wdfiles.com/local--files/component:v-id-card/scp-logo-alternate.svg, adaptis de https://commons.wikimedia.org/wiki/File:SCP_Foundation_(emblem).svg, CC BY-SA 3.0 Unported
  2. https://area-cn-02.wdfiles.com/local--files/component:v-id-card/alexis-talcite.png, propra verko
  3. https://area-cn-02.wdfiles.com/local--files/component:v-id-card/placeholder.svg, propra verko
  4. https://scp-sandbox-3.wdfiles.com/local--files/component:v-id-card/lillian-lillihammer.gif, adaptis de artaĵo de Fenmoth.
  5. https://area-cn-02.wdfiles.com/local--files/component:v-id-card/merry-dashmere.png, propra verko

  ---

Kio ĝi estas?

Tajloreblaj dungitaraj ID-kartoj, kiuj povas servi ambaŭe kiel ornamajn & informajn intencojn.

Dum ĝi estas ĉefe inspirita per ID-Karto Komponanto, ĝi alprenas vertikalan kaj pli kompaktan aranĝon, kaj la plia "institucio" kampo.

---

Ekzemplo

---

C-4

*4951855*

4951855

DONITA-ĜIS
12/2018
12/2028

PLENA NOMO
Alexis Asriel Talcite

FAKO
IT & Memetiko

OFICO
Esplora Direktoro

INSTITUCIO
Area-CN-02

---

Kiel uzi?

---

Por uzi ĉi tiun komponanton, kopiu la sekvan kodon, kaj algluu ĝin en vian paĝon ĉe iu ajn loko, ĉe nova linio. Poste legu la kurtan instruon jenan, kaj plenigu la kampojn kiel vi bezonas.

[[include :scp-esperanto:component:v-id-card
|portrait=
|portrait-bg-color=
|portrait-gradient=
|name=
|department=
|position=
|facility=
|class=
|level=
|number=
|issue= MM/YYYY
|exp= MM/YYYY
]]

Vi povas enmeti plurajn ID-kartojn en unuopa paĝo, kaj ĉiuj povas havi malsaman informon.

[[include :scp-esperanto:component:v-id-card
|portrait= URL de la foto. Se restas malplena, ĝi montriĝos kiel rompita bildsimbolo.
|portrait-bg-color= Mankeble. Akceptas nomoj de koloroj, RGB (Ruĝa/Verda/Blua), aŭ HEX (deksesumaj) valoroj. Fona koloro por la ID foto (Defaŭlta koloro estas travida). Estas utile, se via bildo havas travidan fonon.
|portrait-gradient= Mankeble. 1/2/3 aŭ aliaj klavvortoj. Fona kolortransira antaŭagordo por la ID foto. Vidu la antaŭrigardojn malsupre.
|name= Plena nomo. Vi povas malpermesi aŭtomatan linisalton (legu malsupre por detaloj), aŭ fari novan linion, se la vorto estas disrompita ĉe maldezirita loko. Same sekvanten.
|department= Fako (departemento de ofico)
|position= Ofico de Okupo
|facility= Institucio de Servo
|class= A/B/C/D/E, specifu la personaran klasadon. Vidu ĉi tiun paĝon por referenco.
|level= 0-5, specifu la sekurecan permeson
|number= Seria Numero
|issue= MM/YYYY Tempo kiam la karto estis disdonita.
|exp= MM/YYYY Tempo kiam la karto malvalidiĝos.
]]

▷ Kolora Elektilo

Se ĝi funkcias laŭ anticipo, la strikodo devas esti skandebla.

La defaŭlta larĝo de la karto estas respondema, kiu signifas ĝi ŝanĝos laŭ la dimensio de via ekrano, por sekurigi la plej bonan legeblecon. La minimuma alto de la karto estas $\sqrt{2}$ × (Karto Larĝo), kiu konservas la saman bildformaton kun normaj A paperaj dimensioj, kaj ĉi tio faciligas preso.

---

Kolortransiraj Antaŭagordoj

---

Por uzi ĉi tion, enmetu la respektivan klavon en la |portrait-gradient= kampo.

Kolortransiro 1

1

Kolortransiro 2

2

Kolortransiro 3

3

Ankaŭ iom da fierflagoj estas uzeblaj. Nun ĝi inkluzivas pride (bazan 6-strian ĉielarkon) kaj phil (kiu inkluzivas BIPOC), kaj certe plu (en alfabeta ordo):

abrofluseksema，agendersengenra，aroacesenromantikema+senseksema，aromanticsenromantikema，asexualsenseksema，bidugenrema，bigenderdugenra，demiboypartiĉa，demigenderpartgenra，demigirlpartina，enbiansamneduumgenrema， gaymenvirgeja，genderfluidflugenra，genderfluxfluktugenra，genderqueerkvirgenra，lesbianlesba，nbneduumgenra，neutroisneŭtra，omniĉiogenrema，pantutgenrema，pangendertutgenra，polymultgenrema，qprkvirplatona，transtransgenra. Eble aldonos pli poste.

Kliku la klavvortojn, kaj rigardi kiel ili sajnas malsupre.

▷ Antaŭrigardo

C-3

*0000000*

0000000

DONITA-ĜIS
MM/YYYY
MM/YYYY

PLENA NOMO
[Lokokupilo]

FAKO
[Lokokupilo]

OFICO
[Lokokupilo]

INSTITUCIO
[Lokokupilo]

---

▷ Ekzemploj de Uzo

[[include :scp-esperanto:component:v-id-card
|portrait= https://scp-sandbox-3.wdfiles.com/local--files/component:v-id-card/lillian-lillihammer.gif
|portrait-gradient= 3
|name= Lillian Shelby
Lillihammer
|department= Memetiko &
Kontraŭmemetiko
|dept-nowrap= a
|position= Sekcia Prezidanto
|facility= Site-43
|class= C
|level= 4
|number= 19990011
|issue= 01/1995
|exp= 01/2035
]]

C-4

*19990011*

19990011

DONITA-ĜIS
01/1995
01/2035

PLENA NOMO
Lillian Shelby
Lillihammer

FAKO
Memetiko &
Kontraŭmemetiko

OFICO
Sekcia Prezidanto

INSTITUCIO
Site-43

---

[[include :scp-esperanto:component:v-id-card
|portrait= https://scp-wiki.wdfiles.com/local--files/component:v-id-card/alex-thorley.png
|portrait-gradient= nb
|name= Alex Thorley
|department= Nerealeco
|position= [ENŜOVU TEKSTON]
|facility= Site-0
|class= E
|level= 0
|number= NaN
|issue= Nekonata
|exp= ∞
]]

E-0

*NaN*

NaN

DONITA-ĜIS
Nekonata
∞

PLENA NOMO
Alex Thorley

FAKO
Nerealeco

OFICO
[ENŜOVU TEKSTON]

INSTITUCIO
Site-0

(La portreto restis malplena pro intenco.)

---

Malpermesi Linisalton

---

Ĉi tio preventas ke vortoj en specifa(j) tekst-kampo(j) rompi.

Averto: Ĉi tio kaŭzos elrandiĝon, se via teksto estas tro longa.

Malebligi aŭtomatan linisalton en la…

Noma kampo:

|name-nowrap= a

Faka kampo:

|dept-nowrap= a

Ofica kampo:

|position-nowrap= a

institucia kampo:

|facility-nowrap= a

▷ Montri Komparon

Originala (Aŭtomata Linifaldo)

[[include :scp-esperanto:component:v-id-card
|portrait= https://area-cn-02.wdfiles.com/local--files/component:v-id-card/merry-dashmere.png
|portrait-gradient= 2
|name= Merry S. Dashmere
|department= Scienca Dept-o
|position= HMCL Kontrolanto
|facility= Area-03
|class= B
|level= 5
|number= 001811
|issue= 05/2009
|exp= 05/2039
]]

B-5

*001811*

001811

DONITA-ĜIS
05/2009
05/2039

PLENA NOMO
Merry S. Dashmere

FAKO
Scienca Dept-o

OFICO
HMCL Kontrolanto

INSTITUCIO
Area-03

Kun sen-linifaldo

[[include :scp-esperanto:component:v-id-card
|portrait= https://area-cn-02.wdfiles.com/local--files/component:v-id-card/merry-dashmere.png
|portrait-gradient= 2
|name= Merry S. Dashmere
|name-nowrap= a
|department= Scienca Dept-o
|position= HMCL Kontrolanto
|position-nowrap= a
|facility= Area-03
|class= B
|level= 5
|number= 001811
|issue= 05/2009
|exp= 05/2039
]]

B-5

*001811*

001811

DONITA-ĜIS
05/2009
05/2039

PLENA NOMO
Merry S. Dashmere

FAKO
Scienca Dept-o

OFICO
HMCL Kontrolanto

INSTITUCIO
Area-03

Ĉi tiu estas la minimuma alto de la karto, kiam ĉiu kampoj estas falditaj en unuopaj linioj.

---

Pli da Teknikaj Detaloj

---

▷ Montri CSS Variablojn

CSS Variabloj

Ĉi tiuj bagatelaj tajloropcioj ne estas enmetita en la komponanto pro redundo. Tamen, ili ankoraŭ estas konservitaj en la kodo por ebla uzo estonta.

Por CSS-veteranoj - ili povas uzi ĉi tiujn variablojn por mordifi la defaŭltajn valorojn (en la krampoj). Por aparte tajlori, difinu ilin en enliniaj formoj, anstataŭ en la universala stilfolio.

--v-id-card-width: Larĝo de karto (150px + 15vw).
--v-id-card-height: Alto de karto. Se agordas ĝin al fiksa valoro, la karto eble elrandiĝas kaj estos eltondata.
--v-id-card-radius: Radiuso de la kadro de karto (5% de larĝo).
--v-id-card-padding: Ena marĝeno de karto (4.5% de larĝo).

--v-id-card-logo: Ligilo al la fona emblemo (SEP emblemo).
--v-id-card-logo-opacity: Opakeco de la emblemo (0.08).

--v-id-card-bg-color: Fona koloro de karto (blanka).
--v-id-card-text-color: Baza teksa koloro (nigra).
--v-id-card-secondary-color: Akcesora koloro por titoloj de kampoj kaj la kadro de la portreto (griza).
--v-id-card-portrait-horizontal-corner-size: La horizontala larĝo de la angulo de la ekstera ornama kadro de la portreto (33%).
--v-id-card-portrait-vertical-corner-size: La vertikala larĝo de la angulo de la ekstera ornama kadro de la portreto (25%).
--v-id-card-level0-color: Koloro de stangoj de Nivelo 0 (helgriza).
--v-id-card-level1-color: Koloro de stangoj de Nivelo 1 (verda).
--v-id-card-level2-color: Koloro de stangoj de Nivelo 2 (blua).
--v-id-card-level3-color: Koloro de stangoj de Nivelo 3 (flava).
--v-id-card-level4-color: Koloro de stangoj de Nivelo 4 (oranĝa).
--v-id-card-level5-color: Koloro de stangoj de Nivelo 5 (ruĝa).

--v-id-card-gradient-1 (kaj multaj plu): La integritaj antaŭagordoj de kolortransiro.

---

○ Montri Fontkodon

/* Lato Black */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@900&display=swap');
 
/* Libre Barcode 39 */
@import url('https://fonts.googleapis.com/css2?family=Libre+Barcode+39&display=swap');
 
/* Universalaj Agordoj */
:root {
    --v-id-card-width: calc(150px + 15vw);
    --v-id-card-radius: calc(var(--v-id-card-width) * 0.05);
    --v-id-card-padding: calc(var(--v-id-card-width) * 0.045);
    --v-id-card-logo: url(https://scp-wiki.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: 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);
    border-radius: var(--v-id-card-radius);
 
    box-shadow: 0 0 calc(var(--v-id-card-width) * 0.025) gray;
    font-family: 'Lato', 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;
}
 
/* Akvo-marko */
 
.id-card-vertical::after {
    content: "";
    z-index: -1;
    display: block;
    position: absolute;
    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;
}
 
/* ↖️Supra-maldekstra parto */
 
.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) * -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;
}
 
/* ↙️Malsupra-maldekstra parto */
 
.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);
}
 
.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);
}
 
/* ↗️Supra-dekstra parto */
 
.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;
}
 
/* ↘️Malsupra-dekstra parto */
 
.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.022);
    word-break: break-all;
    max-width: calc((var(--v-id-card-width) - var(--v-id-card-padding)* 2)* 0.75) !important;
}
 
.id-card-vertical span.info-title {
    font-weight: 900;
    font-size: calc(var(--v-id-card-width) * 0.057);
    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.082);
    display: flex;
    flex-direction: row-reverse; /* Prevent the text from overflowing rightwards */
}
 
/* 🌈Antaŭagordoj de Kolortransiroj de Fierflagoj */
 
: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%);
}

---

{$class}-{$level}

*{$number}*

{$number}

DONITA-ĜIS
{$issue}
{$exp}

PLENA NOMO
{$name}

FAKO
{$department}

OFICO
{$position}

INSTITUCIO
{$facility}