Text Templater
Menu
Home
About
Documentation
GitHub
Toggle theme
Pastebin URL
Get Template
GitHub Gist URL
Get Template
Input Template
[nobr] [div=display: none;] [font=Oxanium][USER=32692]@fluticasone[/USER][/font] [font=Micro 5][USER=32692]@fluticasone[/USER][/font] feel free to replace any FA icons with ones of your choosing [/div] [div=&Initial Variables \ group&font-size: initial; /* root class */ --bwFilter: &Filter (leave as is if unsure) \ text \ saturate(0%) contrast(110%)&; /* adjust as needed for your images */ &Main Images \ group&--charaIMG: url('&Main Character IMG URL \ text&'); /* nav image for first */ --charaIMGbwp: &Image Position (leave as is if unsure) \ text \ center center&; /* position of desaturated IMG. use 'center center' if unsure */ --charaIMGbws: &Image Size (leave as is if unsure) \ text \ cover&; /* size of desaturated IMG. use 'cover' if unsure */ --charaIMG2: url('&Basic Details IMG URL \ text&'); /* image right of basic deets */ --charaIMG3: url('&End IMG URL \ text&'); /* last image in first tab */&end&&Secondary Images \ group& --mechIMG: url('&Secondary Image URL \ text&'); /* main image for second tab */ --mechIMGbwp: &Image Position (leave as is if unsure) \ text \ center center&; /* position of desaturated IMG. use 'center center' if unsure */ --mechIMGbws: &Image Size (leave as is if unsure) \ text \ cover&; /* size of desaturated IMG. use 'cover' if unsure */&end& &Navigation Images \ group&--navcharapos: &Main Character Image Position (leave as is if unsure) \ text \ center center&; /* position of IMG on navigation button. use 'center center' if unsure */ --navcharas: &Main Character Image Size (leave as is if unsure) \ text \ cover&; /* size of IMG on navigation button. use 'cover' if unsure */ --navmechpos: &Secondary Image Position (leave as is if unsure) \ text \ center center&; /* position of IMG on navigation button. use 'center center' if unsure */ --navmechs: &Secondary Image Size (leave as is if unsure) \ text \ cover&; /* size of IMG on navigation button. use 'cover' if unsure */&end& &Colors \ group&--bgColor: &Background Color \ text \ #f3f3f3&; /* main bg color */ --txtColor: &Text Color \ text \ #1d1d1d&; /* color of text */ --borderColor: &Border Color \ text \ #a8a8a8&; /* color of grid borders */&end&&end& --txtFont: 'Oxanium', sans-serif; --accFont: 'Micro 5', sans-serif; position: relative; overflow: hidden; margin: 1rem auto; width: clamp(250px,calc(100% - 2rem),1000px); display: flex; flex-flow: row wrap; align-items: stretch; gap: 10px; color: var(--txtColor); container-type: inline-size; --noiseIMG: url('https://i.imgur.com/UdjBt1F.png'); --gridIMG: url('https://i.imgur.com/6Kp74bp.png'); --border: 1px solid var(--borderColor); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;] [div=flex: 2 300px; min-height: 20rem; display: flex; flex-flow: column nowrap; justify-content: center; box-sizing: border-box; padding-left: 75px; padding-top: calc(15cqw + 2.25rem); overflow: hidden; line-height: calc(3.4rem + 5px);] [tabs] [tab=testingforpartonexxxxxx] [div=position: absolute; /* first tab container */ top: 0px; height: 100%; left: 0px; width: 100%; line-height: normal; pointer-events: none;] [div=position: relative; display: flex; flex-flow: row wrap; align-items: stretch; gap: 10px;] [div=flex: 2 300px; min-height: 20rem; display: flex; flex-flow: row nowrap; align-items: stretch; gap: 10px; position: relative;] [div=flex: 0 50px; box-sizing: border-box; background: var(--bgColor); border: var(--border); height: 100%; position: relative;] [div=display: flex; box-sizing: border-box; width: 100%; height: 100%; flex-flow: column nowrap; align-items: center; padding: 15px 10px; gap: 1rem;] [div=flex: 0 auto; /* FA icon or you can use a mask here */ box-sizing: border-box; width: 100%; aspect-ratio: 1; text-align: center;] [div=display: none;] replace with desired FA icon[/div] &Main Tab \ group&[fa]fal &Preferred FA Icon \ text \ fa-sparkles&[/fa] [/div] [div=flex: 1 50px; width: 1px; background: var(--borderColor);] [/div] [/div] [/div] [div=flex: 1 200px; box-sizing: border-box; background: var(--bgColor); border: var(--border);] [div=position: absolute; box-sizing: border-box; border: var(--border); left: 70px; top: 10px; width: calc(100% - 80px); height: calc(100% - 20px); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='675' height='900'%3E%3Cpath fill='%231d1d1d' d='m0 269 11.3 19.7c11.4 19.6 34 59 56.5 52s44.9-60.4 67.4-57.9c22.5 2.5 45.1 60.9 67.6 79.7 22.5 18.8 44.9-1.8 67.4-18.8 22.5-17 45.1-30.4 67.6 6.5C360.3 387 382.7 474 405 530.5c22.3 56.5 44.7 82.5 67.2 37.3 22.5-45.1 45.1-161.5 67.8-177 22.7-15.5 45.3 69.9 67.8 105.2s44.9 20.7 56 13.3L675 502V0H0Z'/%3E%3C/svg%3E%0A"),var(--gridIMG),linear-gradient(180deg, var(--borderColor), rgba(255,255,255,0) 100%); background-position: center top, center center,center center; background-size: 110% auto,auto,cover; background-repeat: no-repeat,repeat,no-repeat; background-blend-mode: darken;] [/div] [div=position: absolute; right: 10%; width: 45%; bottom: 15%; height: clamp(12rem,50%,400px); border: var(--border); box-sizing: border-box; background: var(--borderColor);] [div=position: relative; display: block; height: 100%; width: 100%; background-image: var(--charaIMG); background-position: var(--charaIMGbwp); background-size: var(--charaIMGbws); filter: var(--bwFilter); mix-blend-mode: multiply;] [/div] [/div] [div=position: absolute; /* artist credit */ right: calc(10% + 10px); width: 45%; bottom: clamp(12rem + 15%,50% + 15%,400px + 15%); font-size: 18px; font-family: var(--accFont); color: var(--bgColor); text-align: right; text-transform: uppercase;] art: &Artist Name \ text& [/div] [div=position: relative; width: 100%; height: 100%; box-sizing: border-box; display: flex; flex-flow: column nowrap; justify-content: center; gap: 10px; padding-left: 1.75rem; padding-top: 15cqw; padding-right: 50%;] [div=flex: 0 auto; width: 100%; height: 3.5rem; pointer-events: none; background-image: var(--charaIMG); background-position: var(--navcharapos); background-size: var(--navcharas); box-sizing: border-box; border: var(--border); position: relative;] [/div] [div=flex: 0 auto; width: 100%; height: 3.5rem; pointer-events: none; box-sizing: border-box; border: var(--border); background: var(--borderColor); position: relative;] [div=display: block; height: 100%; width: 100%; background-image: var(--mechIMG); background-position: var(--navmechpos); background-size: var(--navmechs); filter: saturate(0%) contrast(110%) blur(2px); mix-blend-mode: multiply;] [/div] [div=display: block; height: 100%; width: 100%; position: absolute; top: 0px; left: 0px; background: var(--noiseIMG); mix-blend-mode: soft-light; opacity: .4;] [/div] [/div] [/div] [/div] [/div] [div=flex: 3 300px; height: 33rem; min-height: 33rem; box-sizing: border-box; background: var(--bgColor); border: var(--border); position: relative; overflow: hidden; box-sizing: border-box; padding: 5cqw; pointer-events: auto;] [div=position: relative; width: 100%; container-type: inline-size; height: 100%; box-sizing: border-box; border: var(--border); overflow: hidden;] [div=position: absolute; height: 100%; width: calc(100% + 25px); top: 0px; left: 0px; box-sizing: border-box; background: var(--txtColor); overflow-x: hidden; overflow-y: scroll; pointer-events: auto; padding-right: 25px; scroll-snap-type: y proximity;] [div=display: flex; scroll-snap-align: start; flex-flow: row wrap-reverse; align-items: stretch; gap: 1px; background: var(--borderColor); border-bottom: var(--border);] [div=flex: 2 150px; background: var(--bgColor); padding: 1rem 1.25rem; font-size: .9rem; color: var(--txtColor); display: flex; flex-flow: column nowrap; align-items: flex-start; justify-content: center; gap: 8px;] &Basic Details \ group \ repeat&[div=flex: 0 auto;] [div=display: block; font-family: var(--accFont); text-transform: uppercase; font-size: 16px;] &Detail (ex. Full Name) \ text& [/div] [div=display: block; font-family: var(--txtFont);] &Detail Answer (Ex. John Smith) \ text& [/div] [/div]&end& [/div] [div=flex: 1 125px; min-height: 15rem; background: var(--bgColor); position: relative; box-sizing: border-box;] [div=position: absolute; box-sizing: border-box; border: var(--border); background: var(--charaIMG2) no-repeat center center/cover; top: 10px; left: 10px; height: calc(100% - 20px); width: calc(100% - 20px);] [/div] [/div] [/div] [div=display: flex; scroll-snap-align: start; flex-flow: row wrap-reverse; align-items: stretch; gap: 1px; background: var(--borderColor); border-bottom: var(--border);] [div=flex: 0 2.5rem; background: var(--bgColor); padding: 1rem 1.25rem; font-size: .9rem; color: var(--txtColor); display: flex; flex-flow: column nowrap; align-items: center; justify-content: center;] [div=flex: 0 auto; text-align: center; color: var(--borderColor);] [fa]&Preferred FA Icon \ text \fa-search&[/fa] [/div] [/div] [div=flex: 1 150px; /* appearance section */ background: var(--bgColor); padding: 1rem 1.25rem; font-size: .9rem; color: var(--txtColor); font-family: var(--txtFont); box-sizing: border-box; text-align: justify;] &Phsical Description \ content& [/div] [/div] [div=display: block; /* personality section */ scroll-snap-align: start; box-sizing: border-box; background: var(--bgColor); border-bottom: var(--border); padding: 1rem 1.25rem; font-size: .9rem; color: var(--txtColor); font-family: var(--txtFont); text-align: justify;] &Personality Content \ content& [/div] [div=display: flex; width: 100%; flex-flow: column nowrap; justify-content: flex-start; box-sizing: border-box; scroll-snap-align: start; background: var(--bgColor); border-bottom: var(--border); padding: 1rem;] [div=display: block; visibility: hidden;] [accordion=100%] &Accordion Slide \ group \ repeat& {slide=[div=display: flex; width: 100%; flex-flow: row wrap; visibility: visible; align-items: center; font-weight: normal; font-variant: normal; gap: 1rem; box-sizing: border-box;][div=flex: 0 4rem; aspect-ratio: 1; border: var(--border); box-sizing: border-box; position: relative; color: var(--borderColor); display: flex; flex-flow: row wrap; align-items: center; justify-content: center;font-size: 1.5rem;][fa]fal &Preferred FA Icon \ text \ fa-fingerprint&[/fa][/div][div=flex: 5 5rem; color: var(--txtColor); font-family: var(--accFont); text-transform: uppercase; font-size: 32px; padding: 0px .5rem; white-space: normal;]&Heading \ text \ advanced record&[div=display: block; font-size: .9rem; font-family: var(--txtFont);]&Subheading \ text \ additional information&[/div][/div][/div]}[div=display: block; line-height: 0px;visibility: visible; white-space: normal; padding-bottom: 1rem;] [div=display: block; box-sizing: border-box; padding: .5rem 1.25rem; position: relative; margin-left: 2rem; width: calc(100% - 2rem); border-left: var(--border); text-align: justify;] [div=display: block; font-size: .9rem;text-align: justify; line-height: normal;font-family: var(--txtFont); position: relative;]&Slide Content \ content&[/div] [/div] [/div]{/slide}&end&&end& [/accordion] [/div] [/div] [div=display: block; padding: 10px; height: 100%; box-sizing: border-box; scroll-snap-align: start; background: var(--bgColor);] [div=display: block; height: 100%; border: var(--border); background: var(--charaIMG3) no-repeat center center/cover;] [/div] [/div] [/div] [/div] [/div] [/div] [/div] [/tab] [tab=testingforparttwoxxxxxx] [div=position: absolute; /* second tab container */ top: 0px; height: 100%; left: 0px; width: 100%; line-height: normal; pointer-events: none;] [div=position: relative; display: flex; flex-flow: row wrap; align-items: stretch; gap: 10px;] [div=flex: 2 300px; min-height: 20rem; display: flex; flex-flow: row nowrap; align-items: stretch; gap: 10px; position: relative;] [div=flex: 0 50px; box-sizing: border-box; background: var(--bgColor); border: var(--border); height: 100%; position: relative;] [div=display: flex; width: 100%; height: 100%; flex-flow: column nowrap; align-items: center; box-sizing: border-box; padding: 15px 10px; gap: 1rem;] [div=flex: 0 auto; /* FA icon or you can use a mask here */ box-sizing: border-box; width: 100%; aspect-ratio: 1; text-align: center;] [div=display: none;] replace with desired FA icon[/div] [fa]fal &Secondary Tab \ group&&Preferred FA Icon \ text \ fa-wrench&[/fa] [/div] [div=flex: 1 50px; width: 1px; background: var(--borderColor);] [/div] [/div] [/div] [div=flex: 1 200px; box-sizing: border-box; background: var(--bgColor); border: var(--border);] [div=position: absolute; box-sizing: border-box; border: var(--border); left: 70px; top: 10px; width: calc(100% - 80px); height: calc(100% - 20px); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='675' height='900'%3E%3Cpath fill='%231d1d1d' d='m0 269 11.3 19.7c11.4 19.6 34 59 56.5 52s44.9-60.4 67.4-57.9c22.5 2.5 45.1 60.9 67.6 79.7 22.5 18.8 44.9-1.8 67.4-18.8 22.5-17 45.1-30.4 67.6 6.5C360.3 387 382.7 474 405 530.5c22.3 56.5 44.7 82.5 67.2 37.3 22.5-45.1 45.1-161.5 67.8-177 22.7-15.5 45.3 69.9 67.8 105.2s44.9 20.7 56 13.3L675 502V0H0Z'/%3E%3C/svg%3E%0A"),var(--gridIMG),linear-gradient(180deg, var(--borderColor), rgba(255,255,255,0) 100%); background-position: center top, center center,center center; background-size: 110% auto,auto,cover; background-repeat: no-repeat,repeat,no-repeat; background-blend-mode: darken;] [/div] [div=position: absolute; right: 10%; width: 45%; bottom: 15%; height: clamp(12rem,50%,400px); border: var(--border); box-sizing: border-box; background: var(--borderColor);] [div=position: relative; display: block; height: 100%; width: 100%; background-image: var(--mechIMG); background-size: var(--mechIMGbws); background-position: var(--mechIMGbwp); filter: var(--bwFilter); mix-blend-mode: multiply;] [/div] [/div] [div=position: absolute; /* artist credit */ right: calc(10% + 10px); width: 45%; bottom: clamp(12rem + 15%,50% + 15%,400px + 15%); font-size: 18px; font-family: var(--accFont); color: var(--bgColor); text-align: right; text-transform: uppercase;] art: &Artist Name \ text& [/div] [div=position: relative; width: 100%; height: 100%; box-sizing: border-box; display: flex; flex-flow: column nowrap; justify-content: center; gap: 10px; padding-left: 1.75rem; padding-top: 15cqw; padding-right: 50%;] [div=flex: 0 auto; width: 100%; height: 3.5rem; pointer-events: none; box-sizing: border-box; border: var(--border); background: var(--borderColor); position: relative;] [div=display: block; height: 100%; width: 100%; background-image: var(--charaIMG); background-position: var(--navcharapos); background-size: var(--navcharas); filter: saturate(0%) contrast(110%) blur(2px); mix-blend-mode: multiply;] [/div] [div=display: block; height: 100%; width: 100%; position: absolute; top: 0px; left: 0px; background: var(--noiseIMG); mix-blend-mode: soft-light; opacity: .4;] [/div] [/div] [div=flex: 0 auto; width: 100%; height: 3.5rem; pointer-events: none; box-sizing: border-box; border: var(--border); background-image: var(--mechIMG); background-position: var(--navmechpos); background-size: var(--navmechs); position: relative;] [/div] [/div] [/div] [/div] [div=flex: 3 300px; height: 33rem; min-height: 33rem; box-sizing: border-box; background: var(--bgColor); border: var(--border); position: relative; overflow: hidden; box-sizing: border-box; padding: 5cqw; pointer-events: auto;] [div=position: relative; width: 100%; container-type: inline-size; height: 100%; box-sizing: border-box; border: var(--border); overflow: hidden;] [div=position: absolute; height: 100%; width: calc(100% + 25px); top: 0px; left: 0px; box-sizing: border-box; background: var(--txtColor); overflow-x: hidden; overflow-y: scroll; pointer-events: auto; padding-right: 25px; scroll-snap-type: y proximity;] [div=display: flex; width: 100%; height: 100%; flex-flow: column nowrap; align-items: stretch; gap: 1px; background: var(--borderColor); border-bottom: var(--border);] [div=flex: 1 100px; box-sizing: border-box; background: var(--bgColor); position: relative; scroll-snap-align: start;] [div=position: absolute; top: 10px; left: 10px; box-sizing: border-box; border: var(--border); height: calc(100% - 20px); width: calc(100% - 20px); background: var(--mechIMG) no-repeat center center/cover;] [/div] [/div] [div=flex: 0 auto; /* title area */ box-sizing: border-box; background: var(--bgColor); padding: 1rem 1.5rem; display: flex; flex-flow: row wrap; align-items: center; color: var(--txtColor); gap: 3px 1rem; scroll-snap-align: start;] [div=flex: 0 auto; /* heading */ font-family: var(--accFont); font-size: 24px; text-transform: uppercase;] &Heading \ text& [/div] [div=flex: 0 auto; /* subheading */ font-family: var(--txtFont); font-size: .85rem; text-transform: uppercase;] [i]&Subheading \ text&[/i] [/div] [/div] [/div] [div=display: flex; /* equip list */ scroll-snap-align: start; flex-flow: column nowrap; align-items: stretch; gap: 1px; background: var(--borderColor); border-bottom: var(--border); border-left: 10cqw solid var(--txtColor);] &Equip \ group \ repeat&[div=flex: 0 auto; /* equip */ display: flex; flex-flow: row wrap; align-items: stretch; gap: 1px;] [div=flex: 0 2rem; font-family: var(--accFont); color: var(--txtColor); display: flex; flex-flow: row nowrap; align-items: center; justify-content: center;] [div=display: none;]you can use numbers or FA icons[/div] [fa]fal &Preferred FA Icon \ text \ fa-stars&[/fa] [/div] [div=flex: 1 100px; font-family: var(--txtFont); color: var(--txtColor); padding: 10px; background: var(--bgColor); font-size: .85rem; display: grid; align-items: center;] &Equip Detail \ text& [/div] [/div]&end& [/div] [div=display: flex; scroll-snap-align: start; flex-flow: row nowrap; align-items: stretch; gap: 1px; background: var(--borderColor);] [div=flex: 1 150px; /* text area */ background: var(--bgColor); padding: 1rem 1.25rem; font-size: .9rem; color: var(--txtColor); font-family: var(--txtFont); box-sizing: border-box; text-align: justify;] &Additional Information / Description \ content& [/div] [div=flex: 0 2.5rem; background: var(--bgColor); padding: 1rem 1.25rem; font-size: .9rem; color: var(--txtColor); display: flex; flex-flow: column nowrap; align-items: center; justify-content: center;] [div=flex: 0 auto; text-align: center; color: var(--borderColor);] [fa]far &Preferred FA Icon \ text \ fa-cog&&end&[/fa] [/div] [/div] [/div] [/div] [/div] [/div] [/div] [/div] [/tab] [/tabs] [/div] [div=flex: 3 300px; height: 33rem; min-height: 33rem;] [/div] [/div] [/nobr]
Generate Form Fields
Debug Mode
[ "[nobr]\r\n [div=display: none;]\r\n [font=Oxanium][USER=32692]@fluticasone[/USER][/font]\r\n [font=Micro 5][USER=32692]@fluticasone[/USER][/font]\r\n feel free to replace any FA icons with ones of your choosing\r\n [/div]\r\n [div=", { "type": "group", "description": "Initial Variables", "markerStart": { "type": "group", "description": "Initial Variables", "original": "&Initial Variables \\ group&", "repeat": false, "indices": [ 231, 257 ] }, "repeat": false, "originalChildren": [ "font-size: initial; /* root class */\r\n --bwFilter: ", { "type": "text", "description": "Filter (leave as is if unsure)", "marker": { "type": "text", "description": "Filter (leave as is if unsure)", "defaultValue": "saturate(0%) contrast(110%)", "original": "&Filter (leave as is if unsure) \\ text \\ saturate(0%) contrast(110%)&", "indices": [ 310, 378 ] }, "value": "saturate(0%) contrast(110%)" }, "; /* adjust as needed for your images */\r\n ", { "type": "group", "description": "Main Images", "markerStart": { "type": "group", "description": "Main Images", "original": "&Main Images \\ group&", "repeat": false, "indices": [ 423, 443 ] }, "repeat": false, "originalChildren": [ "--charaIMG: url('", { "type": "text", "description": "Main Character IMG URL", "marker": { "type": "text", "description": "Main Character IMG URL", "defaultValue": "", "original": "&Main Character IMG URL \\ text&", "indices": [ 461, 491 ] } }, "'); /* nav image for first */\r\n --charaIMGbwp: ", { "type": "text", "description": "Image Position (leave as is if unsure)", "marker": { "type": "text", "description": "Image Position (leave as is if unsure)", "defaultValue": "center center", "original": "&Image Position (leave as is if unsure) \\ text \\ center center&", "indices": [ 540, 602 ] }, "value": "center center" }, "; /* position of desaturated IMG. use 'center center' if unsure */\r\n --charaIMGbws: ", { "type": "text", "description": "Image Size (leave as is if unsure)", "marker": { "type": "text", "description": "Image Size (leave as is if unsure)", "defaultValue": "cover", "original": "&Image Size (leave as is if unsure) \\ text \\ cover&", "indices": [ 688, 738 ] }, "value": "cover" }, "; /* size of desaturated IMG. use 'cover' if unsure */\r\n --charaIMG2: url('", { "type": "text", "description": "Basic Details IMG URL", "marker": { "type": "text", "description": "Basic Details IMG URL", "defaultValue": "", "original": "&Basic Details IMG URL \\ text&", "indices": [ 815, 844 ] } }, "'); /* image right of basic deets */\r\n --charaIMG3: url('", { "type": "text", "description": "End IMG URL", "marker": { "type": "text", "description": "End IMG URL", "defaultValue": "", "original": "&End IMG URL \\ text&", "indices": [ 903, 922 ] } }, "'); /* last image in first tab */" ], "children": [], "markerEnd": { "type": "end", "description": "end", "original": "&end&", "indices": [ 956, 960 ] } }, "", { "type": "group", "description": "Secondary Images", "markerStart": { "type": "group", "description": "Secondary Images", "original": "&Secondary Images \\ group&", "repeat": false, "indices": [ 961, 986 ] }, "repeat": false, "originalChildren": [ "\r\n --mechIMG: url('", { "type": "text", "description": "Secondary Image URL", "marker": { "type": "text", "description": "Secondary Image URL", "defaultValue": "", "original": "&Secondary Image URL \\ text&", "indices": [ 1007, 1034 ] } }, "'); /* main image for second tab */\r\n --mechIMGbwp: ", { "type": "text", "description": "Image Position (leave as is if unsure)", "marker": { "type": "text", "description": "Image Position (leave as is if unsure)", "defaultValue": "center center", "original": "&Image Position (leave as is if unsure) \\ text \\ center center&", "indices": [ 1088, 1150 ] }, "value": "center center" }, "; /* position of desaturated IMG. use 'center center' if unsure */\r\n --mechIMGbws: ", { "type": "text", "description": "Image Size (leave as is if unsure)", "marker": { "type": "text", "description": "Image Size (leave as is if unsure)", "defaultValue": "cover", "original": "&Image Size (leave as is if unsure) \\ text \\ cover&", "indices": [ 1235, 1285 ] }, "value": "cover" }, "; /* size of desaturated IMG. use 'cover' if unsure */" ], "children": [], "markerEnd": { "type": "end", "description": "end", "original": "&end&", "indices": [ 1340, 1344 ] } }, "\r\n ", { "type": "group", "description": "Navigation Images", "markerStart": { "type": "group", "description": "Navigation Images", "original": "&Navigation Images \\ group&", "repeat": false, "indices": [ 1349, 1375 ] }, "repeat": false, "originalChildren": [ "--navcharapos: ", { "type": "text", "description": "Main Character Image Position (leave as is if unsure)", "marker": { "type": "text", "description": "Main Character Image Position (leave as is if unsure)", "defaultValue": "center center", "original": "&Main Character Image Position (leave as is if unsure) \\ text \\ center center&", "indices": [ 1391, 1468 ] }, "value": "center center" }, "; /* position of IMG on navigation button. use 'center center' if unsure */\r\n --navcharas: ", { "type": "text", "description": "Main Character Image Size (leave as is if unsure)", "marker": { "type": "text", "description": "Main Character Image Size (leave as is if unsure)", "defaultValue": "cover", "original": "&Main Character Image Size (leave as is if unsure) \\ text \\ cover&", "indices": [ 1561, 1626 ] }, "value": "cover" }, "; /* size of IMG on navigation button. use 'cover' if unsure */\r\n --navmechpos: ", { "type": "text", "description": "Secondary Image Position (leave as is if unsure)", "marker": { "type": "text", "description": "Secondary Image Position (leave as is if unsure)", "defaultValue": "center center", "original": "&Secondary Image Position (leave as is if unsure) \\ text \\ center center&", "indices": [ 1708, 1780 ] }, "value": "center center" }, "; /* position of IMG on navigation button. use 'center center' if unsure */\r\n --navmechs: ", { "type": "text", "description": "Secondary Image Size (leave as is if unsure)", "marker": { "type": "text", "description": "Secondary Image Size (leave as is if unsure)", "defaultValue": "cover", "original": "&Secondary Image Size (leave as is if unsure) \\ text \\ cover&", "indices": [ 1872, 1932 ] }, "value": "cover" }, "; /* size of IMG on navigation button. use 'cover' if unsure */" ], "children": [], "markerEnd": { "type": "end", "description": "end", "original": "&end&", "indices": [ 1996, 2000 ] } }, "\r\n ", { "type": "group", "description": "Colors", "markerStart": { "type": "group", "description": "Colors", "original": "&Colors \\ group&", "repeat": false, "indices": [ 2005, 2020 ] }, "repeat": false, "originalChildren": [ "--bgColor: ", { "type": "text", "description": "Background Color", "marker": { "type": "text", "description": "Background Color", "defaultValue": "#f3f3f3", "original": "&Background Color \\ text \\ #f3f3f3&", "indices": [ 2032, 2066 ] }, "value": "#f3f3f3" }, "; /* main bg color */\r\n --txtColor: ", { "type": "text", "description": "Text Color", "marker": { "type": "text", "description": "Text Color", "defaultValue": "#1d1d1d", "original": "&Text Color \\ text \\ #1d1d1d&", "indices": [ 2104, 2132 ] }, "value": "#1d1d1d" }, "; /* color of text */\r\n --borderColor: ", { "type": "text", "description": "Border Color", "marker": { "type": "text", "description": "Border Color", "defaultValue": "#a8a8a8", "original": "&Border Color \\ text \\ #a8a8a8&", "indices": [ 2173, 2203 ] }, "value": "#a8a8a8" }, "; /* color of grid borders */" ], "children": [], "markerEnd": { "type": "end", "description": "end", "original": "&end&", "indices": [ 2233, 2237 ] } }, "" ], "children": [], "markerEnd": { "type": "end", "description": "end", "original": "&end&", "indices": [ 2238, 2242 ] } }, "\r\n --txtFont: 'Oxanium', sans-serif;\r\n --accFont: 'Micro 5', sans-serif;\r\n position: relative;\r\n overflow: hidden;\r\n margin: 1rem auto;\r\n width: clamp(250px,calc(100% - 2rem),1000px);\r\n display: flex;\r\n flex-flow: row wrap;\r\n align-items: stretch;\r\n gap: 10px;\r\n color: var(--txtColor);\r\n container-type: inline-size;\r\n --noiseIMG: url('https://i.imgur.com/UdjBt1F.png');\r\n --gridIMG: url('https://i.imgur.com/6Kp74bp.png');\r\n --border: 1px solid var(--borderColor);\r\n -webkit-font-smoothing: antialiased;\r\n -moz-osx-font-smoothing: grayscale;]\r\n [div=flex: 2 300px;\r\n min-height: 20rem;\r\n display: flex;\r\n flex-flow: column nowrap;\r\n justify-content: center;\r\n box-sizing: border-box;\r\n padding-left: 75px;\r\n padding-top: calc(15cqw + 2.25rem);\r\n overflow: hidden;\r\n line-height: calc(3.4rem + 5px);]\r\n [tabs]\r\n [tab=testingforpartonexxxxxx]\r\n [div=position: absolute; /* first tab container */\r\n top: 0px;\r\n height: 100%;\r\n left: 0px;\r\n width: 100%;\r\n line-height: normal;\r\n pointer-events: none;]\r\n [div=position: relative;\r\n display: flex;\r\n flex-flow: row wrap;\r\n align-items: stretch;\r\n gap: 10px;]\r\n [div=flex: 2 300px;\r\n min-height: 20rem;\r\n display: flex;\r\n flex-flow: row nowrap;\r\n align-items: stretch;\r\n gap: 10px;\r\n position: relative;]\r\n [div=flex: 0 50px;\r\n box-sizing: border-box;\r\n background: var(--bgColor);\r\n border: var(--border);\r\n height: 100%;\r\n position: relative;]\r\n [div=display: flex;\r\n box-sizing: border-box;\r\n width: 100%;\r\n height: 100%;\r\n flex-flow: column nowrap;\r\n align-items: center;\r\n padding: 15px 10px;\r\n gap: 1rem;]\r\n [div=flex: 0 auto; /* FA icon or you can use a mask here */\r\n box-sizing: border-box;\r\n width: 100%;\r\n aspect-ratio: 1;\r\n text-align: center;]\r\n [div=display: none;] replace with desired FA icon[/div]\r\n ", { "type": "group", "description": "Main Tab", "markerStart": { "type": "group", "description": "Main Tab", "original": "&Main Tab \\ group&", "repeat": false, "indices": [ 4636, 4653 ] }, "repeat": false, "originalChildren": [ "[fa]fal ", { "type": "text", "description": "Preferred FA Icon", "marker": { "type": "text", "description": "Preferred FA Icon", "defaultValue": "fa-sparkles", "original": "&Preferred FA Icon \\ text \\ fa-sparkles&", "indices": [ 4662, 4701 ] }, "value": "fa-sparkles" }, "[/fa]\r\n [/div]\r\n [div=flex: 1 50px;\r\n width: 1px;\r\n background: var(--borderColor);]\r\n\r\n [/div]\r\n [/div]\r\n [/div]\r\n [div=flex: 1 200px;\r\n box-sizing: border-box;\r\n background: var(--bgColor);\r\n border: var(--border);]\r\n [div=position: absolute;\r\n box-sizing: border-box;\r\n border: var(--border);\r\n left: 70px;\r\n top: 10px;\r\n width: calc(100% - 80px);\r\n height: calc(100% - 20px);\r\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='675' height='900'%3E%3Cpath fill='%231d1d1d' d='m0 269 11.3 19.7c11.4 19.6 34 59 56.5 52s44.9-60.4 67.4-57.9c22.5 2.5 45.1 60.9 67.6 79.7 22.5 18.8 44.9-1.8 67.4-18.8 22.5-17 45.1-30.4 67.6 6.5C360.3 387 382.7 474 405 530.5c22.3 56.5 44.7 82.5 67.2 37.3 22.5-45.1 45.1-161.5 67.8-177 22.7-15.5 45.3 69.9 67.8 105.2s44.9 20.7 56 13.3L675 502V0H0Z'/%3E%3C/svg%3E%0A\"),var(--gridIMG),linear-gradient(180deg, var(--borderColor), rgba(255,255,255,0) 100%);\r\n background-position: center top, center center,center center;\r\n background-size: 110% auto,auto,cover;\r\n background-repeat: no-repeat,repeat,no-repeat;\r\n background-blend-mode: darken;]\r\n\r\n [/div]\r\n [div=position: absolute;\r\n right: 10%;\r\n width: 45%;\r\n bottom: 15%;\r\n height: clamp(12rem,50%,400px);\r\n border: var(--border);\r\n box-sizing: border-box;\r\n background: var(--borderColor);]\r\n [div=position: relative;\r\n display: block;\r\n height: 100%;\r\n width: 100%;\r\n background-image: var(--charaIMG);\r\n background-position: var(--charaIMGbwp);\r\n background-size: var(--charaIMGbws);\r\n filter: var(--bwFilter);\r\n mix-blend-mode: multiply;]\r\n\r\n [/div]\r\n [/div]\r\n [div=position: absolute; /* artist credit */\r\n right: calc(10% + 10px);\r\n width: 45%;\r\n bottom: clamp(12rem + 15%,50% + 15%,400px + 15%);\r\n font-size: 18px;\r\n font-family: var(--accFont);\r\n color: var(--bgColor);\r\n text-align: right;\r\n text-transform: uppercase;]\r\n art: ", { "type": "text", "description": "Artist Name", "marker": { "type": "text", "description": "Artist Name", "defaultValue": "", "original": "&Artist Name \\ text&", "indices": [ 7483, 7502 ] } }, "\r\n [/div]\r\n [div=position: relative;\r\n width: 100%;\r\n height: 100%;\r\n box-sizing: border-box;\r\n display: flex;\r\n flex-flow: column nowrap;\r\n justify-content: center;\r\n gap: 10px;\r\n padding-left: 1.75rem;\r\n padding-top: 15cqw;\r\n padding-right: 50%;]\r\n [div=flex: 0 auto;\r\n width: 100%;\r\n height: 3.5rem;\r\n pointer-events: none;\r\n background-image: var(--charaIMG);\r\n background-position: var(--navcharapos);\r\n background-size: var(--navcharas);\r\n box-sizing: border-box;\r\n border: var(--border);\r\n position: relative;]\r\n \r\n [/div]\r\n [div=flex: 0 auto;\r\n width: 100%;\r\n height: 3.5rem;\r\n pointer-events: none;\r\n box-sizing: border-box;\r\n border: var(--border);\r\n background: var(--borderColor);\r\n position: relative;]\r\n [div=display: block;\r\n height: 100%;\r\n width: 100%;\r\n background-image: var(--mechIMG);\r\n background-position: var(--navmechpos);\r\n background-size: var(--navmechs);\r\n filter: saturate(0%) contrast(110%) blur(2px);\r\n mix-blend-mode: multiply;]\r\n\r\n [/div]\r\n [div=display: block;\r\n height: 100%;\r\n width: 100%;\r\n position: absolute;\r\n top: 0px;\r\n left: 0px;\r\n background: var(--noiseIMG);\r\n mix-blend-mode: soft-light;\r\n opacity: .4;]\r\n\r\n [/div]\r\n [/div]\r\n [/div]\r\n [/div]\r\n [/div]\r\n [div=flex: 3 300px;\r\n height: 33rem;\r\n min-height: 33rem;\r\n box-sizing: border-box;\r\n background: var(--bgColor);\r\n border: var(--border);\r\n position: relative;\r\n overflow: hidden;\r\n box-sizing: border-box;\r\n padding: 5cqw;\r\n pointer-events: auto;]\r\n [div=position: relative;\r\n width: 100%;\r\n container-type: inline-size;\r\n height: 100%;\r\n box-sizing: border-box;\r\n border: var(--border);\r\n overflow: hidden;]\r\n [div=position: absolute;\r\n height: 100%;\r\n width: calc(100% + 25px);\r\n top: 0px;\r\n left: 0px;\r\n box-sizing: border-box;\r\n background: var(--txtColor);\r\n overflow-x: hidden;\r\n overflow-y: scroll;\r\n pointer-events: auto;\r\n padding-right: 25px;\r\n scroll-snap-type: y proximity;]\r\n [div=display: flex;\r\n scroll-snap-align: start;\r\n flex-flow: row wrap-reverse;\r\n align-items: stretch;\r\n gap: 1px;\r\n background: var(--borderColor);\r\n border-bottom: var(--border);]\r\n [div=flex: 2 150px;\r\n background: var(--bgColor);\r\n padding: 1rem 1.25rem;\r\n font-size: .9rem;\r\n color: var(--txtColor);\r\n display: flex;\r\n flex-flow: column nowrap;\r\n align-items: flex-start;\r\n justify-content: center;\r\n gap: 8px;]\r\n ", { "type": "group", "description": "Basic Details", "markerStart": { "type": "group", "description": "Basic Details", "original": "&Basic Details \\ group \\ repeat&", "repeat": true, "indices": [ 11679, 11710 ] }, "repeat": true, "originalChildren": [ "[div=flex: 0 auto;]\r\n [div=display: block;\r\n font-family: var(--accFont);\r\n text-transform: uppercase;\r\n font-size: 16px;]\r\n ", { "type": "text", "description": "Detail (ex. Full Name)", "marker": { "type": "text", "description": "Detail (ex. Full Name)", "defaultValue": "", "original": "&Detail (ex. Full Name) \\ text&", "indices": [ 11963, 11993 ] } }, "\r\n [/div]\r\n [div=display: block;\r\n font-family: var(--txtFont);]\r\n ", { "type": "text", "description": "Detail Answer (Ex. John Smith)", "marker": { "type": "text", "description": "Detail Answer (Ex. John Smith)", "defaultValue": "", "original": "&Detail Answer (Ex. John Smith) \\ text&", "indices": [ 12163, 12201 ] } }, "\r\n [/div]\r\n [/div]" ], "children": [], "markerEnd": { "type": "end", "description": "end", "original": "&end&", "indices": [ 12268, 12272 ] } }, "\r\n [/div]\r\n [div=flex: 1 125px;\r\n min-height: 15rem;\r\n background: var(--bgColor);\r\n position: relative;\r\n box-sizing: border-box;]\r\n [div=position: absolute;\r\n box-sizing: border-box;\r\n border: var(--border);\r\n background: var(--charaIMG2) no-repeat center center/cover;\r\n top: 10px;\r\n left: 10px;\r\n height: calc(100% - 20px);\r\n width: calc(100% - 20px);]\r\n\r\n [/div]\r\n [/div]\r\n [/div]\r\n [div=display: flex;\r\n scroll-snap-align: start;\r\n flex-flow: row wrap-reverse;\r\n align-items: stretch;\r\n gap: 1px;\r\n background: var(--borderColor);\r\n border-bottom: var(--border);]\r\n [div=flex: 0 2.5rem;\r\n background: var(--bgColor);\r\n padding: 1rem 1.25rem;\r\n font-size: .9rem;\r\n color: var(--txtColor);\r\n display: flex;\r\n flex-flow: column nowrap;\r\n align-items: center;\r\n justify-content: center;]\r\n [div=flex: 0 auto;\r\n text-align: center;\r\n color: var(--borderColor);]\r\n [fa]", { "type": "text", "description": "Preferred FA Icon", "marker": { "type": "text", "description": "Preferred FA Icon", "defaultValue": "fa-search", "original": "&Preferred FA Icon \\ text \\fa-search&", "indices": [ 13931, 13967 ] }, "value": "fa-search" }, "[/fa]\r\n [/div]\r\n [/div]\r\n [div=flex: 1 150px; /* appearance section */\r\n background: var(--bgColor);\r\n padding: 1rem 1.25rem;\r\n font-size: .9rem;\r\n color: var(--txtColor);\r\n font-family: var(--txtFont);\r\n box-sizing: border-box;\r\n text-align: justify;]\r\n ", { "type": "content", "description": "Phsical Description", "marker": { "type": "content", "description": "Phsical Description", "original": "&Phsical Description \\ content&", "indices": [ 14458, 14488 ] } }, "\r\n [/div]\r\n [/div]\r\n [div=display: block; /* personality section */\r\n scroll-snap-align: start;\r\n box-sizing: border-box;\r\n background: var(--bgColor);\r\n border-bottom: var(--border);\r\n padding: 1rem 1.25rem;\r\n font-size: .9rem;\r\n color: var(--txtColor);\r\n font-family: var(--txtFont);\r\n text-align: justify;]\r\n ", { "type": "content", "description": "Personality Content", "marker": { "type": "content", "description": "Personality Content", "original": "&Personality Content \\ content&", "indices": [ 15052, 15082 ] } }, "\r\n [/div]\r\n [div=display: flex;\r\n width: 100%;\r\n flex-flow: column nowrap;\r\n justify-content: flex-start;\r\n box-sizing: border-box;\r\n scroll-snap-align: start;\r\n background: var(--bgColor);\r\n border-bottom: var(--border);\r\n padding: 1rem;]\r\n [div=display: block;\r\n visibility: hidden;]\r\n [accordion=100%]\r\n ", { "type": "group", "description": "Accordion Slide", "markerStart": { "type": "group", "description": "Accordion Slide", "original": "&Accordion Slide \\ group \\ repeat&", "repeat": true, "indices": [ 15670, 15703 ] }, "repeat": true, "originalChildren": [ " {slide=[div=display: flex; width: 100%; flex-flow: row wrap; visibility: visible; align-items: center; font-weight: normal; font-variant: normal; gap: 1rem; box-sizing: border-box;][div=flex: 0 4rem; aspect-ratio: 1; border: var(--border); box-sizing: border-box; position: relative; color: var(--borderColor); display: flex; flex-flow: row wrap; align-items: center; justify-content: center;font-size: 1.5rem;][fa]fal ", { "type": "text", "description": "Preferred FA Icon", "marker": { "type": "text", "description": "Preferred FA Icon", "defaultValue": "fa-fingerprint", "original": "&Preferred FA Icon \\ text \\ fa-fingerprint&", "indices": [ 16124, 16166 ] }, "value": "fa-fingerprint" }, "[/fa][/div][div=flex: 5 5rem; color: var(--txtColor); font-family: var(--accFont); text-transform: uppercase; font-size: 32px; padding: 0px .5rem; white-space: normal;]", { "type": "text", "description": "Heading", "marker": { "type": "text", "description": "Heading", "defaultValue": "advanced record", "original": "&Heading \\ text \\ advanced record&", "indices": [ 16335, 16368 ] }, "value": "advanced record" }, "[div=display: block; font-size: .9rem; font-family: var(--txtFont);]", { "type": "text", "description": "Subheading", "marker": { "type": "text", "description": "Subheading", "defaultValue": "additional information", "original": "&Subheading \\ text \\ additional information&", "indices": [ 16437, 16480 ] }, "value": "additional information" }, "[/div][/div][/div]}[div=display: block; line-height: 0px;visibility: visible; white-space: normal; padding-bottom: 1rem;]\r\n [div=display: block;\r\n box-sizing: border-box;\r\n padding: .5rem 1.25rem;\r\n position: relative;\r\n margin-left: 2rem;\r\n width: calc(100% - 2rem);\r\n border-left: var(--border);\r\n text-align: justify;]\r\n [div=display: block; font-size: .9rem;text-align: justify; line-height: normal;font-family: var(--txtFont); position: relative;]", { "type": "content", "description": "Slide Content", "marker": { "type": "content", "description": "Slide Content", "original": "&Slide Content \\ content&", "indices": [ 17178, 17202 ] } }, "[/div]\r\n [/div]\r\n [/div]{/slide}" ], "children": [], "markerEnd": { "type": "end", "description": "end", "original": "&end&", "indices": [ 17287, 17291 ] } }, "" ], "children": [], "markerEnd": { "type": "end", "description": "end", "original": "&end&", "indices": [ 17292, 17296 ] } }, "\r\n [/accordion]\r\n [/div]\r\n [/div]\r\n [div=display: block;\r\n padding: 10px;\r\n height: 100%;\r\n box-sizing: border-box;\r\n scroll-snap-align: start;\r\n background: var(--bgColor);]\r\n [div=display: block;\r\n height: 100%;\r\n border: var(--border);\r\n background: var(--charaIMG3) no-repeat center center/cover;]\r\n\r\n [/div]\r\n [/div]\r\n [/div]\r\n [/div]\r\n [/div]\r\n [/div]\r\n [/div]\r\n [/tab]\r\n [tab=testingforparttwoxxxxxx]\r\n [div=position: absolute; /* second tab container */\r\n top: 0px;\r\n height: 100%;\r\n left: 0px;\r\n width: 100%;\r\n line-height: normal;\r\n pointer-events: none;]\r\n [div=position: relative;\r\n display: flex;\r\n flex-flow: row wrap;\r\n align-items: stretch;\r\n gap: 10px;]\r\n [div=flex: 2 300px;\r\n min-height: 20rem;\r\n display: flex;\r\n flex-flow: row nowrap;\r\n align-items: stretch;\r\n gap: 10px;\r\n position: relative;]\r\n [div=flex: 0 50px;\r\n box-sizing: border-box;\r\n background: var(--bgColor);\r\n border: var(--border);\r\n height: 100%;\r\n position: relative;]\r\n [div=display: flex;\r\n width: 100%;\r\n height: 100%;\r\n flex-flow: column nowrap;\r\n align-items: center;\r\n box-sizing: border-box;\r\n padding: 15px 10px;\r\n gap: 1rem;]\r\n [div=flex: 0 auto; /* FA icon or you can use a mask here */\r\n box-sizing: border-box;\r\n width: 100%;\r\n aspect-ratio: 1;\r\n text-align: center;]\r\n [div=display: none;] replace with desired FA icon[/div]\r\n [fa]fal ", { "type": "group", "description": "Secondary Tab", "markerStart": { "type": "group", "description": "Secondary Tab", "original": "&Secondary Tab \\ group&", "repeat": false, "indices": [ 19585, 19607 ] }, "repeat": false, "originalChildren": [ "", { "type": "text", "description": "Preferred FA Icon", "marker": { "type": "text", "description": "Preferred FA Icon", "defaultValue": "fa-wrench", "original": "&Preferred FA Icon \\ text \\ fa-wrench&", "indices": [ 19608, 19645 ] }, "value": "fa-wrench" }, "[/fa]\r\n [/div]\r\n [div=flex: 1 50px;\r\n width: 1px;\r\n background: var(--borderColor);]\r\n\r\n [/div]\r\n [/div]\r\n [/div]\r\n [div=flex: 1 200px;\r\n box-sizing: border-box;\r\n background: var(--bgColor);\r\n border: var(--border);]\r\n [div=position: absolute;\r\n box-sizing: border-box;\r\n border: var(--border);\r\n left: 70px;\r\n top: 10px;\r\n width: calc(100% - 80px);\r\n height: calc(100% - 20px);\r\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='675' height='900'%3E%3Cpath fill='%231d1d1d' d='m0 269 11.3 19.7c11.4 19.6 34 59 56.5 52s44.9-60.4 67.4-57.9c22.5 2.5 45.1 60.9 67.6 79.7 22.5 18.8 44.9-1.8 67.4-18.8 22.5-17 45.1-30.4 67.6 6.5C360.3 387 382.7 474 405 530.5c22.3 56.5 44.7 82.5 67.2 37.3 22.5-45.1 45.1-161.5 67.8-177 22.7-15.5 45.3 69.9 67.8 105.2s44.9 20.7 56 13.3L675 502V0H0Z'/%3E%3C/svg%3E%0A\"),var(--gridIMG),linear-gradient(180deg, var(--borderColor), rgba(255,255,255,0) 100%);\r\n background-position: center top, center center,center center;\r\n background-size: 110% auto,auto,cover;\r\n background-repeat: no-repeat,repeat,no-repeat;\r\n background-blend-mode: darken;]\r\n\r\n [/div]\r\n [div=position: absolute;\r\n right: 10%;\r\n width: 45%;\r\n bottom: 15%;\r\n height: clamp(12rem,50%,400px);\r\n border: var(--border);\r\n box-sizing: border-box;\r\n background: var(--borderColor);]\r\n [div=position: relative;\r\n display: block;\r\n height: 100%;\r\n width: 100%;\r\n background-image: var(--mechIMG);\r\n background-size: var(--mechIMGbws);\r\n background-position: var(--mechIMGbwp);\r\n filter: var(--bwFilter);\r\n mix-blend-mode: multiply;]\r\n\r\n [/div]\r\n [/div]\r\n [div=position: absolute; /* artist credit */\r\n right: calc(10% + 10px);\r\n width: 45%;\r\n bottom: clamp(12rem + 15%,50% + 15%,400px + 15%);\r\n font-size: 18px;\r\n font-family: var(--accFont);\r\n color: var(--bgColor);\r\n text-align: right;\r\n text-transform: uppercase;]\r\n art: ", { "type": "text", "description": "Artist Name", "marker": { "type": "text", "description": "Artist Name", "defaultValue": "", "original": "&Artist Name \\ text&", "indices": [ 22424, 22443 ] } }, "\r\n [/div]\r\n [div=position: relative;\r\n width: 100%;\r\n height: 100%;\r\n box-sizing: border-box;\r\n display: flex;\r\n flex-flow: column nowrap;\r\n justify-content: center;\r\n gap: 10px;\r\n padding-left: 1.75rem;\r\n padding-top: 15cqw;\r\n padding-right: 50%;]\r\n [div=flex: 0 auto;\r\n width: 100%;\r\n height: 3.5rem;\r\n pointer-events: none;\r\n box-sizing: border-box;\r\n border: var(--border);\r\n background: var(--borderColor);\r\n position: relative;]\r\n [div=display: block;\r\n height: 100%;\r\n width: 100%;\r\n background-image: var(--charaIMG);\r\n background-position: var(--navcharapos);\r\n background-size: var(--navcharas);\r\n filter: saturate(0%) contrast(110%) blur(2px);\r\n mix-blend-mode: multiply;]\r\n\r\n [/div]\r\n [div=display: block;\r\n height: 100%;\r\n width: 100%;\r\n position: absolute;\r\n top: 0px;\r\n left: 0px;\r\n background: var(--noiseIMG);\r\n mix-blend-mode: soft-light;\r\n opacity: .4;]\r\n\r\n [/div]\r\n [/div]\r\n [div=flex: 0 auto;\r\n width: 100%;\r\n height: 3.5rem;\r\n pointer-events: none;\r\n box-sizing: border-box;\r\n border: var(--border);\r\n background-image: var(--mechIMG);\r\n background-position: var(--navmechpos);\r\n background-size: var(--navmechs);\r\n position: relative;]\r\n [/div]\r\n [/div]\r\n [/div]\r\n [/div]\r\n [div=flex: 3 300px;\r\n height: 33rem;\r\n min-height: 33rem;\r\n box-sizing: border-box;\r\n background: var(--bgColor);\r\n border: var(--border);\r\n position: relative;\r\n overflow: hidden;\r\n box-sizing: border-box;\r\n padding: 5cqw;\r\n pointer-events: auto;]\r\n [div=position: relative;\r\n width: 100%;\r\n container-type: inline-size;\r\n height: 100%;\r\n box-sizing: border-box;\r\n border: var(--border);\r\n overflow: hidden;]\r\n [div=position: absolute;\r\n height: 100%;\r\n width: calc(100% + 25px);\r\n top: 0px;\r\n left: 0px;\r\n box-sizing: border-box;\r\n background: var(--txtColor);\r\n overflow-x: hidden;\r\n overflow-y: scroll;\r\n pointer-events: auto;\r\n padding-right: 25px;\r\n scroll-snap-type: y proximity;]\r\n [div=display: flex;\r\n width: 100%;\r\n height: 100%;\r\n flex-flow: column nowrap;\r\n align-items: stretch;\r\n gap: 1px;\r\n background: var(--borderColor);\r\n border-bottom: var(--border);]\r\n [div=flex: 1 100px;\r\n box-sizing: border-box;\r\n background: var(--bgColor);\r\n position: relative;\r\n scroll-snap-align: start;]\r\n [div=position: absolute;\r\n top: 10px;\r\n left: 10px;\r\n box-sizing: border-box;\r\n border: var(--border);\r\n height: calc(100% - 20px);\r\n width: calc(100% - 20px);\r\n background: var(--mechIMG) no-repeat center center/cover;]\r\n\r\n [/div]\r\n [/div]\r\n [div=flex: 0 auto; /* title area */\r\n box-sizing: border-box;\r\n background: var(--bgColor);\r\n padding: 1rem 1.5rem;\r\n display: flex;\r\n flex-flow: row wrap;\r\n align-items: center;\r\n color: var(--txtColor);\r\n gap: 3px 1rem;\r\n scroll-snap-align: start;]\r\n [div=flex: 0 auto; /* heading */\r\n font-family: var(--accFont);\r\n font-size: 24px;\r\n text-transform: uppercase;]\r\n ", { "type": "text", "description": "Heading", "marker": { "type": "text", "description": "Heading", "defaultValue": "", "original": "&Heading \\ text&", "indices": [ 27547, 27562 ] } }, "\r\n [/div]\r\n [div=flex: 0 auto; /* subheading */\r\n font-family: var(--txtFont);\r\n font-size: .85rem;\r\n text-transform: uppercase;]\r\n [i]", { "type": "text", "description": "Subheading", "marker": { "type": "text", "description": "Subheading", "defaultValue": "", "original": "&Subheading \\ text&", "indices": [ 27838, 27856 ] } }, "[/i]\r\n [/div]\r\n [/div]\r\n [/div]\r\n [div=display: flex; /* equip list */\r\n scroll-snap-align: start;\r\n flex-flow: column nowrap;\r\n align-items: stretch;\r\n gap: 1px;\r\n background: var(--borderColor);\r\n border-bottom: var(--border);\r\n border-left: 10cqw solid var(--txtColor);]\r\n ", { "type": "group", "description": "Equip", "markerStart": { "type": "group", "description": "Equip", "original": "&Equip \\ group \\ repeat&", "repeat": true, "indices": [ 28369, 28392 ] }, "repeat": true, "originalChildren": [ "[div=flex: 0 auto; /* equip */\r\n display: flex;\r\n flex-flow: row wrap;\r\n align-items: stretch;\r\n gap: 1px;]\r\n [div=flex: 0 2rem;\r\n font-family: var(--accFont);\r\n color: var(--txtColor);\r\n display: flex;\r\n flex-flow: row nowrap;\r\n align-items: center;\r\n justify-content: center;]\r\n [div=display: none;]you can use numbers or FA icons[/div]\r\n [fa]fal ", { "type": "text", "description": "Preferred FA Icon", "marker": { "type": "text", "description": "Preferred FA Icon", "defaultValue": "fa-stars", "original": "&Preferred FA Icon \\ text \\ fa-stars&", "indices": [ 29037, 29073 ] }, "value": "fa-stars" }, "[/fa]\r\n [/div]\r\n [div=flex: 1 100px;\r\n font-family: var(--txtFont);\r\n color: var(--txtColor);\r\n padding: 10px;\r\n background: var(--bgColor);\r\n font-size: .85rem;\r\n display: grid;\r\n align-items: center;]\r\n ", { "type": "text", "description": "Equip Detail", "marker": { "type": "text", "description": "Equip Detail", "defaultValue": "", "original": "&Equip Detail \\ text&", "indices": [ 29511, 29531 ] } }, "\r\n [/div]\r\n [/div]" ], "children": [], "markerEnd": { "type": "end", "description": "end", "original": "&end&", "indices": [ 29594, 29598 ] } }, "\r\n [/div]\r\n [div=display: flex;\r\n scroll-snap-align: start;\r\n flex-flow: row nowrap;\r\n align-items: stretch;\r\n gap: 1px;\r\n background: var(--borderColor);]\r\n [div=flex: 1 150px; /* text area */\r\n background: var(--bgColor);\r\n padding: 1rem 1.25rem;\r\n font-size: .9rem;\r\n color: var(--txtColor);\r\n font-family: var(--txtFont);\r\n box-sizing: border-box;\r\n text-align: justify;]\r\n ", { "type": "content", "description": "Additional Information / Description", "marker": { "type": "content", "description": "Additional Information / Description", "original": "&Additional Information / Description \\ content&", "indices": [ 30301, 30348 ] } }, "\r\n [/div]\r\n [div=flex: 0 2.5rem;\r\n background: var(--bgColor);\r\n padding: 1rem 1.25rem;\r\n font-size: .9rem;\r\n color: var(--txtColor);\r\n display: flex;\r\n flex-flow: column nowrap;\r\n align-items: center;\r\n justify-content: center;]\r\n [div=flex: 0 auto;\r\n text-align: center;\r\n color: var(--borderColor);]\r\n [fa]far ", { "type": "text", "description": "Preferred FA Icon", "marker": { "type": "text", "description": "Preferred FA Icon", "defaultValue": "fa-cog", "original": "&Preferred FA Icon \\ text \\ fa-cog&", "indices": [ 30966, 31000 ] }, "value": "fa-cog" }, "" ], "children": [], "markerEnd": { "type": "end", "description": "end", "original": "&end&", "indices": [ 31001, 31005 ] } }, "[/fa]\r\n [/div]\r\n [/div]\r\n [/div]\r\n [/div]\r\n [/div]\r\n [/div]\r\n [/div]\r\n [/div]\r\n [/tab]\r\n [/tabs]\r\n [/div]\r\n [div=flex: 3 300px;\r\n height: 33rem;\r\n min-height: 33rem;]\r\n \r\n [/div]\r\n [/div]\r\n[/nobr]" ]
[]
absolutezero.template 1.0
By glucoseguardian
Initial Variables
Filter (leave as is if unsure)
Main Images
Main Character IMG URL
Image Position (leave as is if unsure)
Image Size (leave as is if unsure)
Basic Details IMG URL
End IMG URL
Secondary Images
Secondary Image URL
Image Position (leave as is if unsure)
Image Size (leave as is if unsure)
Navigation Images
Main Character Image Position (leave as is if unsure)
Main Character Image Size (leave as is if unsure)
Secondary Image Position (leave as is if unsure)
Secondary Image Size (leave as is if unsure)
Colors
Background Color
Text Color
Border Color
Main Tab
Preferred FA Icon
Artist Name
Basic Details
Duplicate
Detail (ex. Full Name)
Detail Answer (Ex. John Smith)
Preferred FA Icon
Phsical Description
Personality Content
Accordion Slide
Duplicate
Preferred FA Icon
Heading
Subheading
Slide Content
Secondary Tab
Preferred FA Icon
Artist Name
Heading
Subheading
Equip
Duplicate
Preferred FA Icon
Equip Detail
Additional Information / Description
Preferred FA Icon
Generate Final Output
Output
absolutezero.template 1.0 - Text Templater