Text Templater
Menu
Home
About
Documentation
GitHub
Toggle theme
Pastebin URL
Get Template
GitHub Gist URL
Get Template
Input Template
[nobr] [div=display: none;] ui assets by cup nooble (https://cupnooble.itch.io/) with modifications please keep above credit i don't care about my own [font='Jersey 15']@fluticasone[/font] [font='Nunito']@fluticasone[/font] [font='PT Mono']@fluticasone[/font] [/div] [div=display: flex; /* main variables */ --tFont: 'Jersey 15', monospace; --bfont: 'Nunito', sans-serif; --sfont: 'PT Mono', monospace; &Main Variables \ group&--bcolor: &Body Text Color \ text \ #212121&; /* body text color */ --inner: &Inner Border Color \ text \ #f3f4e7&; /* inner border color */ --mcolor: &Main Box Color \ text \ #bfd5e2&; /* main color of box */ --shadow: &Shadow and Subtitle Color \ text \ #54b5e5&; /* shadow seen at the bottom + subtitle */ --lborder: &Top Border and Name Color \ text \ #e33863&; /* top side border + name */ --dborder: &Bottom Border Color \ text \ #a12253&; /* bottom side border */ --aratio: &Aspect Ratio of Image (1, 3/4, 16/9, etc.) \ text \ 1&; /* aspect ratio of image */ --icon: url(&URL of Image \ text \ https://i.imgur.com/eUpPVHu.jpeg&) center center/cover; /* image */ --heartnumber: &Total Number of Hearts (must be whole) \ number \ 5&; /* total number of hearts */ --filledhearts: &Number of Filled Hearts (can have decimal) \ text \ 2.5&;&end& /* number of filled hearts with decimals accepted*/ flex-flow: row nowrap; align-items: flex-start; gap: 5px; position: relative; box-sizing: border-box; font-size: 0; margin: 1rem auto; width: clamp(250px,100% - 2rem,650px); height: auto; overflow: hidden; /* DO NOT TOUCH ANY VARIABLES PAST THIS POINT */ --tcBorder: url(https://i.imgur.com/BONdqXn.gif) left top / 4px 4px no-repeat; --tcInner: url(https://i.imgur.com/40B4xZK.gif) left top / 4px 4px no-repeat; --tcColor: url(https://i.imgur.com/QzifRY2.gif) left top / 4px 4px no-repeat; --icon_mask: url(https://i.imgur.com/6gjxUkc.gif) left top / 4px 4px no-repeat; --tBorder: url(https://i.imgur.com/UF3iEsA.gif) left top / 4px 4px repeat-x; --tInner: url(https://i.imgur.com/1V92zJ3.gif) left top / 4px 4px repeat-x; --tColor: url(https://i.imgur.com/TqYdcZL.gif) left top / 4px 4px repeat-x; --vBorder: url(https://i.imgur.com/XHm31Pv.gif) left top / 4px 2px repeat-y; --vInner: url(https://i.imgur.com/gFEPyyj.gif) left top / 4px 2px repeat-y; --vColor: url(https://i.imgur.com/4DHwKzQ.gif) left top / 4px 2px repeat-y; --bcBorder: url(https://i.imgur.com/60PPtAo.gif) left top / 4px 6px no-repeat; --bcInner: url(https://i.imgur.com/NAiuiqS.gif) left top / 4px 6px no-repeat; --bcColor: url(https://i.imgur.com/UlpJcSL.gif) left top / 4px 6px no-repeat; --bcShadow: url(https://i.imgur.com/rk8zYNW.gif) left top / 4px 6px no-repeat; --bBorder: url(https://i.imgur.com/zLZK1eM.gif) left top / 6px 6px repeat-x; --bInner: url(https://i.imgur.com/xaOk8Tj.gif) left top / 6px 6px repeat-x; --bShadow: url(https://i.imgur.com/SUgivm7.gif) left top / 6px 6px repeat-x; --sdBorder: url(https://i.imgur.com/0cPAyoP.gif) left top / 10px 14px no-repeat; --slBorder: url(https://i.imgur.com/QPtPipL.gif) left top / 10px 14px no-repeat; --sInner: url(https://i.imgur.com/KoSJFDO.gif) left top / 10px 14px no-repeat; --sColor: url(https://i.imgur.com/cKin38I.gif) left top / 10px 14px no-repeat; --sShadow: url(https://i.imgur.com/E48sOAM.gif) left top / 10px 14px no-repeat; --eHeart: url(https://i.imgur.com/Fh7mDOr.gif) left top / 12px 12px repeat-x; --Heart: url(https://i.imgur.com/n9wQcqb.gif) left top / 12px 12px repeat-x; --dialborder: url(https://i.imgur.com/rl4kJWL.gif) left top / 8px 10px no-repeat; --diadborder: url(https://i.imgur.com/8xHHqMG.gif) left top / 8px 10px no-repeat; --diainner: url(https://i.imgur.com/N7HuEjd.gif) left top / 8px 10px no-repeat; --diacolor: url(https://i.imgur.com/mZyxh4K.gif) left top / 8px 10px no-repeat; --diashadow: url(https://i.imgur.com/vLs5XVw.gif) left top / 8px 10px no-repeat; --diacorner: url(https://i.imgur.com/rQ87mwz.gif) left top / 4px 2px repeat-y;] [div=flex: 0 10px; height: auto;] [div=display: block; position: relative; margin-top: 35px; height: 15px; width: 100%;] [div=position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; image-rendering: pixelated; mask: var(--sdBorder); background: var(--dborder);] select dark border [/div] [div=position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; image-rendering: pixelated; mask: var(--slBorder); background: var(--lborder);] select light border [/div] [div=position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; image-rendering: pixelated; mask: var(--sInner); background: var(--inner);] select inner [/div] [div=position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; image-rendering: pixelated; mask: var(--sColor); background: var(--mcolor);] select main color [/div] [div=position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; image-rendering: pixelated; mask: var(--sShadow); background: var(--shadow);] select shadow [/div] [/div] [/div] [div=flex: 1 85px; max-width: 250px; height: auto; box-sizing: border-box; display: flex; flex-flow: column nowrap; align-items: flex-end;] [div=flex: 0 auto; position: relative; container-type: inline-size; width: 100%; height: auto;] [div=position: absolute; top: 0px; left: 0px; height: 4px; width: 4px; image-rendering: pixelated; mask: var(--tcBorder); background-color: var(--lborder);] top left border [/div] [div=position: absolute; top: 0px; left: 0px; height: 4px; width: 4px; image-rendering: pixelated; mask: var(--tcInner); background: var(--inner);] top left inner [/div] [div=position: absolute; top: 0px; left: 0px; height: 4px; width: 4px; image-rendering: pixelated; mask: var(--tcColor); background: var(--mcolor);] top left color [/div] [div=position: absolute; top: 0px; left: 4px; height: 4px; width: calc(100% - 8px); image-rendering: pixelated; mask: var(--tBorder); background-color: var(--lborder);] top center border [/div] [div=position: absolute; top: 0px; left: 4px; height: 4px; width: calc(100% - 8px); image-rendering: pixelated; mask: var(--tInner); background: var(--inner);] top center inner [/div] [div=position: absolute; top: 0px; right: 0px; height: 4px; width: 4px; transform: scaleX(-1); image-rendering: pixelated; mask: var(--tcBorder); background-color: var(--lborder);] top right border [/div] [div=position: absolute; top: 0px; right: 0px; height: 4px; width: 4px; transform: scaleX(-1); image-rendering: pixelated; mask: var(--tcInner); background: var(--inner);] top right inner [/div] [div=position: absolute; top: 0px; right: 0px; height: 4px; width: 4px; transform: scaleX(-1); image-rendering: pixelated; mask: var(--tcColor); background: var(--mcolor);] top right color [/div] [div=position: absolute; top: 4px; left: 0px; height: calc(100% - 10px); width: 4px; image-rendering: pixelated; mask: var(--vBorder); background-color: var(--lborder);] left center border [/div] [div=position: absolute; top: 4px; left: 0px; height: calc(100% - 10px); width: 4px; image-rendering: pixelated; mask: var(--vInner); background: var(--inner);] left center Inner [/div] [div=position: absolute; top: 4px; right: 0px; height: calc(100% - 10px); width: 4px; transform: scaleX(-1); image-rendering: pixelated; mask: var(--vBorder); background-color: var(--lborder);] right center border [/div] [div=position: absolute; top: 4px; right: 0px; height: calc(100% - 10px); width: 4px; transform: scaleX(-1); image-rendering: pixelated; mask: var(--vInner); background: var(--inner);] right center inner [/div] [div=position: absolute; bottom: 0px; right: 0px; height: 6px; width: 4px; image-rendering: pixelated; mask: var(--bcBorder); background-color: var(--dborder);] bottom right corner border [/div] [div=position: absolute; bottom: 0px; right: 0px; height: 6px; width: 4px; image-rendering: pixelated; mask: var(--bcInner); background-color: var(--inner);] bottom right corner inner [/div] [div=position: absolute; bottom: 0px; right: 0px; height: 6px; width: 4px; image-rendering: pixelated; mask: var(--bcColor); background-color: var(--mcolor);] bottom left corner color [/div] [div=position: absolute; bottom: 0px; right: 0px; height: 6px; width: 4px; image-rendering: pixelated; mask: var(--bcShadow); background-color: var(--shadow);] bottom right corner shadow [/div] [div=position: absolute; bottom: 0px; left: 0px; width: 4px; height: 6px; transform: scaleX(-1); image-rendering: pixelated; mask: var(--bcBorder); background-color: var(--dborder);] bottom left corner border [/div] [div=position: absolute; bottom: 0px; left: 0px; height: 6px; width: 4px; transform: scaleX(-1); image-rendering: pixelated; mask: var(--bcInner); background-color: var(--inner);] bottom left corner inner [/div] [div=position: absolute; bottom: 0px; left: 0px; height: 6px; width: 4px; transform: scaleX(-1); image-rendering: pixelated; mask: var(--bcShadow); background-color: var(--shadow);] bottom left corner shadow [/div] [div=position: absolute; bottom: 0px; left: 0px; height: 6px; width: 4px; transform: scaleX(-1); image-rendering: pixelated; mask: var(--bcColor); background-color: var(--mcolor);] bottom left corner color [/div] [div=position: absolute; bottom: 0px; left: 4px; width: calc(100% - 8px); height: 6px; image-rendering: pixelated; mask: var(--bBorder); background-color: var(--dborder);] bottom center border [/div] [div=position: absolute; bottom: 0px; left: 4px; width: calc(100% - 8px); height: 6px; image-rendering: pixelated; mask: var(--bInner); background-color: var(--inner);] bottom center inner [/div] [div=position: absolute; bottom: 0px; left: 4px; width: calc(100% - 8px); height: 6px; image-rendering: pixelated; mask: var(--bShadow); background-color: var(--shadow);] bottom center shadow [/div] [div=display: block; position: relative; z-index: 3; width: calc(100% - 6px); aspect-ratio: var(--aratio); background: var(--icon); margin: 3px auto; margin-bottom: 5px; clip-path: polygon(1px 0,calc(100% - 1px) 0,100% 1px,100% calc(100% - 1px),calc(100% - 1px) 100%,1px 100%,0 calc(100% - 1px), 0 1px);] main image [/div] [/div] [div=flex: 0 12px; margin-top: 8px; width: calc(12px * var(--heartnumber)); position: relative; right: clamp(5px,5%,15px); background: var(--eHeart); image-rendering: pixelated;] [div=display: block; top: 0px; left: 0px; height: 12px; width: calc(12px * var(--filledhearts)); background: var(--Heart); image-rendering: pixelated;] [/div] [/div] [div=flex: 0 auto; margin-top: 4px; font-family: var(--sfont); text-transform: uppercase; font-size: .55rem; padding: 0px clamp(7px,7%,15px); box-sizing: border-box; letter-spacing: .25em; line-height: 1; text-align: right;] &Under Icon \ group& &Tiny Text (use 'br' to create new lines) \ content& [/div] [div=flex: 0 auto; margin-top: 7px; text-transform: uppercase; padding: 0px clamp(7px,7%,15px); box-sizing: border-box; display: flex; flex-flow: row wrap; align-items: center; justify-content: space-evenly; gap: 2px;] tags / wrap each tag in the div &Tags \ group \ repeat&[div=flex: 0 auto;]@&Tag (include @) \ text \ @fluticasone&[/div]&end&&end& [/div] [/div] [div=flex: 4 150px; height: auto; box-sizing: border-box; display: flex; flex-flow: column nowrap; align-items: flex-start; justify-coontent: flex-start; gap: clamp(15px,1cqw,100px); container-type: inline-size; padding: clamp(15px,1cqw,100px) 0px;] [div=flex: 0 auto; width: 100%; font-size: clamp(14px,10cqw,80px); text-transform: uppercase; font-family: var(--tFont); color: var(--lborder); padding: 0px calc(8px + .5em); box-sizing: inherit; line-height: .75;] &Main Content Area \ group&&Name \ text \ hatsune miku& [div=display: block; color: var(--shadow); font-size: 75%; box-sizing: inherit;] &Subtitle \ text \ idol senshi (18)& [/div] [/div] [div=flex: 0 auto; height: auto; display: block; width: 100%; position: relative; padding: 4px 4px 6px 4px; box-sizing: border-box;] [div=position: absolute; top: 0px; left: 4px; height: 4px; width: 4px; image-rendering: pixelated; mask: var(--tcBorder); background-color: var(--lborder);] top left border [/div] [div=position: absolute; top: 0px; left: 4px; height: 4px; width: 4px; image-rendering: pixelated; mask: var(--tcInner); background: var(--inner);] top left inner [/div] [div=position: absolute; top: 0px; left: 4px; height: 4px; width: 4px; image-rendering: pixelated; mask: var(--tcColor); background: var(--mcolor);] top left color [/div] [div=position: absolute; top: 0px; left: 8px; height: 4px; width: calc(100% - 12px); image-rendering: pixelated; mask: var(--tBorder); background-color: var(--lborder);] top center border [/div] [div=position: absolute; top: 0px; left: 8px; height: 4px; width: calc(100% - 12px); image-rendering: pixelated; mask: var(--tInner); background: var(--inner);] top center inner [/div] [div=position: absolute; top: 0px; left: 8px; height: 4px; width: calc(100% - 12px); image-rendering: pixelated; mask: var(--tColor); background: var(--mcolor);] top center color [/div] [div=position: absolute; top: 0px; right: 0px; height: 4px; width: 4px; transform: scaleX(-1); image-rendering: pixelated; mask: var(--tcBorder); background-color: var(--lborder);] top right border [/div] [div=position: absolute; top: 0px; right: 0px; height: 4px; width: 4px; transform: scaleX(-1); image-rendering: pixelated; mask: var(--tcInner); background: var(--inner);] top right inner [/div] [div=position: absolute; top: 0px; right: 0px; height: 4px; width: 4px; transform: scaleX(-1); image-rendering: pixelated; mask: var(--tcColor); background: var(--mcolor);] top right color [/div] [div=position: absolute; top: 4px; right: 0px; height: calc(100% - 10px); width: 4px; transform: scaleX(-1); image-rendering: pixelated; mask: var(--vBorder); background-color: var(--lborder);] right center border [/div] [div=position: absolute; top: 4px; right: 0px; height: calc(100% - 10px); width: 4px; transform: scaleX(-1); image-rendering: pixelated; mask: var(--vInner); background: var(--inner);] right center inner [/div] [div=position: absolute; top: 4px; right: 0px; height: calc(100% - 10px); width: 4px; transform: scaleX(-1); image-rendering: pixelated; mask: var(--vColor); background: var(--mcolor);] right center color [/div] [div=position: absolute; top: 4px; left: 4px; height: 20px; width: 4px; image-rendering: pixelated; mask: var(--vBorder); background-color: var(--lborder);] left center border [/div] [div=position: absolute; top: 4px; left: 4px; height: calc(100% - 10px); width: 4px; image-rendering: pixelated; mask: var(--vInner); background: var(--inner);] left center Inner [/div] [div=position: absolute; top: 4px; left: 4px; height: calc(100% - 10px); width: 4px; image-rendering: pixelated; mask: var(--vColor); background: var(--mcolor);] left center color [/div] [div=position: absolute; top: 24px; left: 0px; height: 10px; width: 8px; image-rendering: pixelated; mask: var(--dialborder); background-color: var(--lborder);] dialogue light border [/div] [div=position: absolute; top: 24px; left: 0px; height: 10px; width: 8px; image-rendering: pixelated; mask: var(--diadborder); background-color: var(--dborder);] dialogue dark border [/div] [div=position: absolute; top: 24px; left: 0px; height: 10px; width: 8px; image-rendering: pixelated; mask: var(--diainner); background-color: var(--inner);] dialogue inner [/div] [div=position: absolute; top: 24px; left: 0px; height: 10px; width: 8px; image-rendering: pixelated; mask: var(--diashadow); background-color: var(--shadow);] dialogue shadow [/div] [div=position: absolute; top: 24px; left: 0px; height: 10px; width: 8px; image-rendering: pixelated; mask: var(--diacolor); background-color: var(--mcolor);] dialogue color [/div] [div=position: absolute; top: 34px; left: 4px; height: calc(100% - 40px); width: 8px; image-rendering: pixelated; mask: var(--diacorner); background-color: var(--dborder);] dialogue lower border [/div] [div=position: absolute; bottom: 0px; right: 0px; height: 6px; width: 4px; image-rendering: pixelated; mask: var(--bcBorder); background-color: var(--dborder);] bottom right corner border [/div] [div=position: absolute; bottom: 0px; right: 0px; height: 6px; width: 4px; image-rendering: pixelated; mask: var(--bcInner); background-color: var(--inner);] bottom right corner inner [/div] [div=position: absolute; bottom: 0px; right: 0px; height: 6px; width: 4px; image-rendering: pixelated; mask: var(--bcColor); background-color: var(--mcolor);] bottom right corner color [/div] [div=position: absolute; bottom: 0px; right: 0px; height: 6px; width: 4px; image-rendering: pixelated; mask: var(--bcShadow); background-color: var(--shadow);] bottom right corner shadow [/div] [div=position: absolute; bottom: 0px; left: 4px; width: 4px; height: 6px; transform: scaleX(-1); image-rendering: pixelated; mask: var(--bcBorder); background-color: var(--dborder);] bottom left corner border [/div] [div=position: absolute; bottom: 0px; left: 4px; height: 6px; width: 4px; transform: scaleX(-1); image-rendering: pixelated; mask: var(--bcInner); background-color: var(--inner);] bottom left corner inner [/div] [div=position: absolute; bottom: 0px; left: 4px; height: 6px; width: 4px; transform: scaleX(-1); image-rendering: pixelated; mask: var(--bcColor); background-color: var(--mcolor);] bottom left corner color [/div] [div=position: absolute; bottom: 0px; left: 4px; height: 6px; width: 4px; transform: scaleX(-1); image-rendering: pixelated; mask: var(--bcShadow); background-color: var(--shadow);] bottom left corner shadow [/div] [div=position: absolute; bottom: 0px; right: 4px; width: calc(100% - 12px); height: 6px; image-rendering: pixelated; mask: var(--bShadow); background-color: var(--shadow);] bottom center shadow [/div] [div=position: absolute; bottom: 0px; right: 4px; width: calc(100% - 12px); height: 6px; image-rendering: pixelated; mask: var(--bBorder); background-color: var(--dborder);] bottom center border [/div] [div=position: absolute; bottom: 0px; right: 4px; width: calc(100% - 12px); height: 6px; image-rendering: pixelated; mask: var(--bInner); background-color: var(--inner);] bottom center inner [/div] [div=position: absolute; bottom: 5px; right: 4px; height: 1px; width: calc(100% - 12px); background-color: var(--mcolor);] bottom center color [/div] [div=display: block; width: 100%; height: auto; background: var(--mcolor); container-type: inline-size; box-sizing: border-box; padding: calc(6px + 8cqw); padding-bottom: calc(8px + 8cqw); overflow: hidden;] [div=display: block; box-sizing: border-box; position: relative; width: 100%; height: auto; container-type: inline-size; overflow: hidden;] [div=display: block; box-sizing: border-box; width: calc(100cqw + 75px); padding-right: 75px; height: auto; overflow-x: hidden; overflow-y: auto; font-size: .975rem; font-family: var(--bfont); color: var(--bcolor); text-align: justify; max-height: 400px;] &Text Area (use 'br' or 'display: block' to make new lines) \ content& &end& [/div] [/div] [/div] [/div] [/div] [/div] [/nobr]
Generate Form Fields
Debug Mode
[ "[nobr]\r\n [div=display: none;]\r\n ui assets by cup nooble (https://cupnooble.itch.io/) with modifications\r\n please keep above credit i don't care about my own\r\n [font='Jersey 15']@fluticasone[/font]\r\n [font='Nunito']@fluticasone[/font]\r\n [font='PT Mono']@fluticasone[/font]\r\n [/div]\r\n [div=display: flex; /* main variables */\r\n --tFont: 'Jersey 15', monospace;\r\n --bfont: 'Nunito', sans-serif;\r\n --sfont: 'PT Mono', monospace;\r\n ", { "type": "group", "description": "Main Variables", "markerStart": { "type": "group", "description": "Main Variables", "original": "&Main Variables \\ group&", "repeat": false, "indices": [ 466, 489 ] }, "repeat": false, "originalChildren": [ "--bcolor: ", { "type": "text", "description": "Body Text Color", "marker": { "type": "text", "description": "Body Text Color", "defaultValue": "#212121", "original": "&Body Text Color \\ text \\ #212121&", "indices": [ 500, 533 ] }, "value": "#212121" }, "; /* body text color */\r\n --inner: ", { "type": "text", "description": "Inner Border Color", "marker": { "type": "text", "description": "Inner Border Color", "defaultValue": "#f3f4e7", "original": "&Inner Border Color \\ text \\ #f3f4e7&", "indices": [ 571, 607 ] }, "value": "#f3f4e7" }, "; /* inner border color */\r\n --mcolor: ", { "type": "text", "description": "Main Box Color", "marker": { "type": "text", "description": "Main Box Color", "defaultValue": "#bfd5e2", "original": "&Main Box Color \\ text \\ #bfd5e2&", "indices": [ 649, 681 ] }, "value": "#bfd5e2" }, "; /* main color of box */\r\n --shadow: ", { "type": "text", "description": "Shadow and Subtitle Color", "marker": { "type": "text", "description": "Shadow and Subtitle Color", "defaultValue": "#54b5e5", "original": "&Shadow and Subtitle Color \\ text \\ #54b5e5&", "indices": [ 722, 765 ] }, "value": "#54b5e5" }, "; /* shadow seen at the bottom + subtitle */\r\n --lborder: ", { "type": "text", "description": "Top Border and Name Color", "marker": { "type": "text", "description": "Top Border and Name Color", "defaultValue": "#e33863", "original": "&Top Border and Name Color \\ text \\ #e33863&", "indices": [ 826, 869 ] }, "value": "#e33863" }, "; /* top side border + name */\r\n --dborder: ", { "type": "text", "description": "Bottom Border Color", "marker": { "type": "text", "description": "Bottom Border Color", "defaultValue": "#a12253", "original": "&Bottom Border Color \\ text \\ #a12253&", "indices": [ 916, 953 ] }, "value": "#a12253" }, "; /* bottom side border */\r\n --aratio: ", { "type": "text", "description": "Aspect Ratio of Image (1, 3/4, 16/9, etc.)", "marker": { "type": "text", "description": "Aspect Ratio of Image (1, 3/4, 16/9, etc.)", "defaultValue": "1", "original": "&Aspect Ratio of Image (1, 3/4, 16/9, etc.) \\ text \\ 1&", "indices": [ 995, 1049 ] }, "value": "1" }, "; /* aspect ratio of image */\r\n --icon: url(", { "type": "text", "description": "URL of Image", "marker": { "type": "text", "description": "URL of Image", "defaultValue": "https://i.imgur.com/eUpPVHu.jpeg", "original": "&URL of Image \\ text \\ https://i.imgur.com/eUpPVHu.jpeg&", "indices": [ 1096, 1151 ] }, "value": "https://i.imgur.com/eUpPVHu.jpeg" }, ") center center/cover; /* image */\r\n --heartnumber: ", { "type": "number", "description": "Total Number of Hearts (must be whole)", "marker": { "type": "number", "description": "Total Number of Hearts (must be whole)", "defaultValue": 5, "min": null, "max": null, "original": "&Total Number of Hearts (must be whole) \\ number \\ 5&", "indices": [ 1206, 1258 ] }, "value": 5 }, "; /* total number of hearts */\r\n --filledhearts: ", { "type": "text", "description": "Number of Filled Hearts (can have decimal)", "marker": { "type": "text", "description": "Number of Filled Hearts (can have decimal)", "defaultValue": "2.5", "original": "&Number of Filled Hearts (can have decimal) \\ text \\ 2.5&", "indices": [ 1310, 1366 ] }, "value": "2.5" }, ";" ], "children": [], "markerEnd": { "type": "end", "description": "end", "original": "&end&", "indices": [ 1368, 1372 ] } }, " /* number of filled hearts with decimals accepted*/\r\n flex-flow: row nowrap;\r\n align-items: flex-start;\r\n gap: 5px;\r\n position: relative;\r\n box-sizing: border-box;\r\n font-size: 0;\r\n margin: 1rem auto;\r\n width: clamp(250px,100% - 2rem,650px);\r\n height: auto;\r\n overflow: hidden; /* DO NOT TOUCH ANY VARIABLES PAST THIS POINT */\r\n --tcBorder: url(https://i.imgur.com/BONdqXn.gif) left top / 4px 4px no-repeat;\r\n --tcInner: url(https://i.imgur.com/40B4xZK.gif) left top / 4px 4px no-repeat;\r\n --tcColor: url(https://i.imgur.com/QzifRY2.gif) left top / 4px 4px no-repeat;\r\n --icon_mask: url(https://i.imgur.com/6gjxUkc.gif) left top / 4px 4px no-repeat;\r\n --tBorder: url(https://i.imgur.com/UF3iEsA.gif) left top / 4px 4px repeat-x;\r\n --tInner: url(https://i.imgur.com/1V92zJ3.gif) left top / 4px 4px repeat-x;\r\n --tColor: url(https://i.imgur.com/TqYdcZL.gif) left top / 4px 4px repeat-x;\r\n --vBorder: url(https://i.imgur.com/XHm31Pv.gif) left top / 4px 2px repeat-y;\r\n --vInner: url(https://i.imgur.com/gFEPyyj.gif) left top / 4px 2px repeat-y;\r\n --vColor: url(https://i.imgur.com/4DHwKzQ.gif) left top / 4px 2px repeat-y;\r\n --bcBorder: url(https://i.imgur.com/60PPtAo.gif) left top / 4px 6px no-repeat;\r\n --bcInner: url(https://i.imgur.com/NAiuiqS.gif) left top / 4px 6px no-repeat;\r\n --bcColor: url(https://i.imgur.com/UlpJcSL.gif) left top / 4px 6px no-repeat;\r\n --bcShadow: url(https://i.imgur.com/rk8zYNW.gif) left top / 4px 6px no-repeat;\r\n --bBorder: url(https://i.imgur.com/zLZK1eM.gif) left top / 6px 6px repeat-x;\r\n --bInner: url(https://i.imgur.com/xaOk8Tj.gif) left top / 6px 6px repeat-x;\r\n --bShadow: url(https://i.imgur.com/SUgivm7.gif) left top / 6px 6px repeat-x;\r\n --sdBorder: url(https://i.imgur.com/0cPAyoP.gif) left top / 10px 14px no-repeat;\r\n --slBorder: url(https://i.imgur.com/QPtPipL.gif) left top / 10px 14px no-repeat;\r\n --sInner: url(https://i.imgur.com/KoSJFDO.gif) left top / 10px 14px no-repeat;\r\n --sColor: url(https://i.imgur.com/cKin38I.gif) left top / 10px 14px no-repeat;\r\n --sShadow: url(https://i.imgur.com/E48sOAM.gif) left top / 10px 14px no-repeat;\r\n --eHeart: url(https://i.imgur.com/Fh7mDOr.gif) left top / 12px 12px repeat-x;\r\n --Heart: url(https://i.imgur.com/n9wQcqb.gif) left top / 12px 12px repeat-x;\r\n --dialborder: url(https://i.imgur.com/rl4kJWL.gif) left top / 8px 10px no-repeat;\r\n --diadborder: url(https://i.imgur.com/8xHHqMG.gif) left top / 8px 10px no-repeat;\r\n --diainner: url(https://i.imgur.com/N7HuEjd.gif) left top / 8px 10px no-repeat;\r\n --diacolor: url(https://i.imgur.com/mZyxh4K.gif) left top / 8px 10px no-repeat;\r\n --diashadow: url(https://i.imgur.com/vLs5XVw.gif) left top / 8px 10px no-repeat;\r\n --diacorner: url(https://i.imgur.com/rQ87mwz.gif) left top / 4px 2px repeat-y;]\r\n [div=flex: 0 10px;\r\n height: auto;]\r\n [div=display: block;\r\n position: relative;\r\n margin-top: 35px;\r\n height: 15px;\r\n width: 100%;]\r\n [div=position: absolute;\r\n top: 0px;\r\n left: 0px;\r\n height: 100%;\r\n width: 100%;\r\n image-rendering: pixelated;\r\n mask: var(--sdBorder);\r\n background: var(--dborder);]\r\n select dark border\r\n [/div]\r\n [div=position: absolute;\r\n top: 0px;\r\n left: 0px;\r\n height: 100%;\r\n width: 100%;\r\n image-rendering: pixelated;\r\n mask: var(--slBorder);\r\n background: var(--lborder);]\r\n select light border\r\n [/div]\r\n [div=position: absolute;\r\n top: 0px;\r\n left: 0px;\r\n height: 100%;\r\n width: 100%;\r\n image-rendering: pixelated;\r\n mask: var(--sInner);\r\n background: var(--inner);]\r\n select inner\r\n [/div]\r\n [div=position: absolute;\r\n top: 0px;\r\n left: 0px;\r\n height: 100%;\r\n width: 100%;\r\n image-rendering: pixelated;\r\n mask: var(--sColor);\r\n background: var(--mcolor);]\r\n select main color\r\n [/div]\r\n [div=position: absolute;\r\n top: 0px;\r\n left: 0px;\r\n height: 100%;\r\n width: 100%;\r\n image-rendering: pixelated;\r\n mask: var(--sShadow);\r\n background: var(--shadow);]\r\n select shadow\r\n [/div]\r\n [/div]\r\n [/div]\r\n [div=flex: 1 85px;\r\n max-width: 250px;\r\n height: auto;\r\n box-sizing: border-box;\r\n display: flex;\r\n flex-flow: column nowrap;\r\n align-items: flex-end;]\r\n [div=flex: 0 auto;\r\n position: relative;\r\n container-type: inline-size;\r\n width: 100%;\r\n height: auto;]\r\n [div=position: absolute;\r\n top: 0px;\r\n left: 0px;\r\n height: 4px;\r\n width: 4px;\r\n image-rendering: pixelated;\r\n mask: var(--tcBorder);\r\n background-color: var(--lborder);]\r\n top left border\r\n [/div]\r\n [div=position: absolute;\r\n top: 0px;\r\n left: 0px;\r\n height: 4px;\r\n width: 4px;\r\n image-rendering: pixelated;\r\n mask: var(--tcInner);\r\n background: var(--inner);]\r\n top left inner\r\n [/div]\r\n [div=position: absolute;\r\n top: 0px;\r\n left: 0px;\r\n height: 4px;\r\n width: 4px;\r\n image-rendering: pixelated;\r\n mask: var(--tcColor);\r\n background: var(--mcolor);]\r\n top left color\r\n [/div]\r\n [div=position: absolute;\r\n top: 0px;\r\n left: 4px;\r\n height: 4px;\r\n width: calc(100% - 8px);\r\n image-rendering: pixelated;\r\n mask: var(--tBorder);\r\n background-color: var(--lborder);]\r\n top center border\r\n [/div]\r\n [div=position: absolute;\r\n top: 0px;\r\n left: 4px;\r\n height: 4px;\r\n width: calc(100% - 8px);\r\n image-rendering: pixelated;\r\n mask: var(--tInner);\r\n background: var(--inner);]\r\n top center inner\r\n [/div]\r\n [div=position: absolute;\r\n top: 0px;\r\n right: 0px;\r\n height: 4px;\r\n width: 4px;\r\n transform: scaleX(-1);\r\n image-rendering: pixelated;\r\n mask: var(--tcBorder);\r\n background-color: var(--lborder);]\r\n top right border\r\n [/div]\r\n [div=position: absolute;\r\n top: 0px;\r\n right: 0px;\r\n height: 4px;\r\n width: 4px;\r\n transform: scaleX(-1);\r\n image-rendering: pixelated;\r\n mask: var(--tcInner);\r\n background: var(--inner);]\r\n top right inner\r\n [/div]\r\n [div=position: absolute;\r\n top: 0px;\r\n right: 0px;\r\n height: 4px;\r\n width: 4px;\r\n transform: scaleX(-1);\r\n image-rendering: pixelated;\r\n mask: var(--tcColor);\r\n background: var(--mcolor);]\r\n top right color\r\n [/div]\r\n [div=position: absolute;\r\n top: 4px;\r\n left: 0px;\r\n height: calc(100% - 10px);\r\n width: 4px;\r\n image-rendering: pixelated;\r\n mask: var(--vBorder);\r\n background-color: var(--lborder);]\r\n left center border\r\n [/div]\r\n [div=position: absolute;\r\n top: 4px;\r\n left: 0px;\r\n height: calc(100% - 10px);\r\n width: 4px;\r\n image-rendering: pixelated;\r\n mask: var(--vInner);\r\n background: var(--inner);]\r\n left center Inner\r\n [/div]\r\n [div=position: absolute;\r\n top: 4px;\r\n right: 0px;\r\n height: calc(100% - 10px);\r\n width: 4px;\r\n transform: scaleX(-1);\r\n image-rendering: pixelated;\r\n mask: var(--vBorder);\r\n background-color: var(--lborder);]\r\n right center border\r\n [/div]\r\n [div=position: absolute;\r\n top: 4px;\r\n right: 0px;\r\n height: calc(100% - 10px);\r\n width: 4px;\r\n transform: scaleX(-1);\r\n image-rendering: pixelated;\r\n mask: var(--vInner);\r\n background: var(--inner);]\r\n right center inner\r\n [/div]\r\n [div=position: absolute;\r\n bottom: 0px;\r\n right: 0px;\r\n height: 6px;\r\n width: 4px;\r\n image-rendering: pixelated;\r\n mask: var(--bcBorder);\r\n background-color: var(--dborder);]\r\n bottom right corner border\r\n [/div]\r\n [div=position: absolute;\r\n bottom: 0px;\r\n right: 0px;\r\n height: 6px;\r\n width: 4px;\r\n image-rendering: pixelated;\r\n mask: var(--bcInner);\r\n background-color: var(--inner);]\r\n bottom right corner inner\r\n [/div]\r\n [div=position: absolute;\r\n bottom: 0px;\r\n right: 0px;\r\n height: 6px;\r\n width: 4px;\r\n image-rendering: pixelated;\r\n mask: var(--bcColor);\r\n background-color: var(--mcolor);]\r\n bottom left corner color\r\n [/div]\r\n [div=position: absolute;\r\n bottom: 0px;\r\n right: 0px;\r\n height: 6px;\r\n width: 4px;\r\n image-rendering: pixelated;\r\n mask: var(--bcShadow);\r\n background-color: var(--shadow);]\r\n bottom right corner shadow\r\n [/div]\r\n [div=position: absolute;\r\n bottom: 0px;\r\n left: 0px;\r\n width: 4px;\r\n height: 6px;\r\n transform: scaleX(-1);\r\n image-rendering: pixelated;\r\n mask: var(--bcBorder);\r\n background-color: var(--dborder);]\r\n bottom left corner border\r\n [/div]\r\n [div=position: absolute;\r\n bottom: 0px;\r\n left: 0px;\r\n height: 6px;\r\n width: 4px;\r\n transform: scaleX(-1);\r\n image-rendering: pixelated;\r\n mask: var(--bcInner);\r\n background-color: var(--inner);]\r\n bottom left corner inner\r\n [/div]\r\n [div=position: absolute;\r\n bottom: 0px;\r\n left: 0px;\r\n height: 6px;\r\n width: 4px;\r\n transform: scaleX(-1);\r\n image-rendering: pixelated;\r\n mask: var(--bcShadow);\r\n background-color: var(--shadow);]\r\n bottom left corner shadow\r\n [/div]\r\n [div=position: absolute;\r\n bottom: 0px;\r\n left: 0px;\r\n height: 6px;\r\n width: 4px;\r\n transform: scaleX(-1);\r\n image-rendering: pixelated;\r\n mask: var(--bcColor);\r\n background-color: var(--mcolor);]\r\n bottom left corner color\r\n [/div]\r\n [div=position: absolute;\r\n bottom: 0px;\r\n left: 4px;\r\n width: calc(100% - 8px);\r\n height: 6px;\r\n image-rendering: pixelated;\r\n mask: var(--bBorder);\r\n background-color: var(--dborder);]\r\n bottom center border\r\n [/div]\r\n [div=position: absolute;\r\n bottom: 0px;\r\n left: 4px;\r\n width: calc(100% - 8px);\r\n height: 6px;\r\n image-rendering: pixelated;\r\n mask: var(--bInner);\r\n background-color: var(--inner);]\r\n bottom center inner\r\n [/div]\r\n [div=position: absolute;\r\n bottom: 0px;\r\n left: 4px;\r\n width: calc(100% - 8px);\r\n height: 6px;\r\n image-rendering: pixelated;\r\n mask: var(--bShadow);\r\n background-color: var(--shadow);]\r\n bottom center shadow\r\n [/div]\r\n [div=display: block;\r\n position: relative;\r\n z-index: 3;\r\n width: calc(100% - 6px);\r\n aspect-ratio: var(--aratio);\r\n background: var(--icon);\r\n margin: 3px auto;\r\n margin-bottom: 5px;\r\n clip-path: polygon(1px 0,calc(100% - 1px) 0,100% 1px,100% calc(100% - 1px),calc(100% - 1px) 100%,1px 100%,0 calc(100% - 1px), 0 1px);]\r\n main image\r\n [/div]\r\n [/div]\r\n [div=flex: 0 12px;\r\n margin-top: 8px;\r\n width: calc(12px * var(--heartnumber));\r\n position: relative;\r\n right: clamp(5px,5%,15px);\r\n background: var(--eHeart);\r\n image-rendering: pixelated;]\r\n [div=display: block;\r\n top: 0px;\r\n left: 0px;\r\n height: 12px;\r\n width: calc(12px * var(--filledhearts));\r\n background: var(--Heart);\r\n image-rendering: pixelated;]\r\n [/div]\r\n [/div]\r\n [div=flex: 0 auto;\r\n margin-top: 4px;\r\n font-family: var(--sfont);\r\n text-transform: uppercase;\r\n font-size: .55rem;\r\n padding: 0px clamp(7px,7%,15px);\r\n box-sizing: border-box;\r\n letter-spacing: .25em;\r\n line-height: 1;\r\n text-align: right;]\r\n ", { "type": "group", "description": "Under Icon", "markerStart": { "type": "group", "description": "Under Icon", "original": "&Under Icon \\ group&", "repeat": false, "indices": [ 15349, 15368 ] }, "repeat": false, "originalChildren": [ "\r\n ", { "type": "content", "description": "Tiny Text (use 'br' to create new lines)", "marker": { "type": "content", "description": "Tiny Text (use 'br' to create new lines)", "original": "&Tiny Text (use 'br' to create new lines) \\ content&", "indices": [ 15383, 15434 ] } }, "\r\n [/div]\r\n [div=flex: 0 auto;\r\n margin-top: 7px;\r\n text-transform: uppercase;\r\n padding: 0px clamp(7px,7%,15px);\r\n box-sizing: border-box;\r\n display: flex;\r\n flex-flow: row wrap;\r\n align-items: center;\r\n justify-content: space-evenly;\r\n gap: 2px;]\r\n tags / wrap each tag in the div\r\n ", { "type": "group", "description": "Tags", "markerStart": { "type": "group", "description": "Tags", "original": "&Tags \\ group \\ repeat&", "repeat": true, "indices": [ 15830, 15852 ] }, "repeat": true, "originalChildren": [ "[div=flex: 0 auto;]@", { "type": "text", "description": "Tag (include @)", "marker": { "type": "text", "description": "Tag (include @)", "defaultValue": "@fluticasone", "original": "&Tag (include @) \\ text \\ @fluticasone&", "indices": [ 15873, 15911 ] }, "value": "@fluticasone" }, "[/div]" ], "children": [], "markerEnd": { "type": "end", "description": "end", "original": "&end&", "indices": [ 15918, 15922 ] } }, "" ], "children": [], "markerEnd": { "type": "end", "description": "end", "original": "&end&", "indices": [ 15923, 15927 ] } }, "\r\n [/div]\r\n [/div]\r\n [div=flex: 4 150px;\r\n height: auto;\r\n box-sizing: border-box;\r\n display: flex;\r\n flex-flow: column nowrap;\r\n align-items: flex-start;\r\n justify-coontent: flex-start;\r\n gap: clamp(15px,1cqw,100px);\r\n container-type: inline-size;\r\n padding: clamp(15px,1cqw,100px) 0px;]\r\n [div=flex: 0 auto;\r\n width: 100%;\r\n font-size: clamp(14px,10cqw,80px);\r\n text-transform: uppercase;\r\n font-family: var(--tFont);\r\n color: var(--lborder);\r\n padding: 0px calc(8px + .5em);\r\n box-sizing: inherit;\r\n line-height: .75;]\r\n ", { "type": "group", "description": "Main Content Area", "markerStart": { "type": "group", "description": "Main Content Area", "original": "&Main Content Area \\ group&", "repeat": false, "indices": [ 16598, 16624 ] }, "repeat": false, "originalChildren": [ "", { "type": "text", "description": "Name", "marker": { "type": "text", "description": "Name", "defaultValue": "hatsune miku", "original": "&Name \\ text \\ hatsune miku&", "indices": [ 16625, 16652 ] }, "value": "hatsune miku" }, "\r\n [div=display: block;\r\n color: var(--shadow);\r\n font-size: 75%;\r\n box-sizing: inherit;]\r\n ", { "type": "text", "description": "Subtitle", "marker": { "type": "text", "description": "Subtitle", "defaultValue": "idol senshi (18)", "original": "&Subtitle \\ text \\ idol senshi (18)&", "indices": [ 16803, 16838 ] }, "value": "idol senshi (18)" }, "\r\n [/div]\r\n [/div]\r\n [div=flex: 0 auto;\r\n height: auto;\r\n display: block;\r\n width: 100%;\r\n position: relative;\r\n padding: 4px 4px 6px 4px;\r\n box-sizing: border-box;]\r\n [div=position: absolute;\r\n top: 0px;\r\n left: 4px;\r\n height: 4px;\r\n width: 4px;\r\n image-rendering: pixelated;\r\n mask: var(--tcBorder);\r\n background-color: var(--lborder);]\r\n top left border\r\n [/div]\r\n [div=position: absolute;\r\n top: 0px;\r\n left: 4px;\r\n height: 4px;\r\n width: 4px;\r\n image-rendering: pixelated;\r\n mask: var(--tcInner);\r\n background: var(--inner);]\r\n top left inner\r\n [/div]\r\n [div=position: absolute;\r\n top: 0px;\r\n left: 4px;\r\n height: 4px;\r\n width: 4px;\r\n image-rendering: pixelated;\r\n mask: var(--tcColor);\r\n background: var(--mcolor);]\r\n top left color\r\n [/div]\r\n [div=position: absolute;\r\n top: 0px;\r\n left: 8px;\r\n height: 4px;\r\n width: calc(100% - 12px);\r\n image-rendering: pixelated;\r\n mask: var(--tBorder);\r\n background-color: var(--lborder);]\r\n top center border\r\n [/div]\r\n [div=position: absolute;\r\n top: 0px;\r\n left: 8px;\r\n height: 4px;\r\n width: calc(100% - 12px);\r\n image-rendering: pixelated;\r\n mask: var(--tInner);\r\n background: var(--inner);]\r\n top center inner\r\n [/div]\r\n [div=position: absolute;\r\n top: 0px;\r\n left: 8px;\r\n height: 4px;\r\n width: calc(100% - 12px);\r\n image-rendering: pixelated;\r\n mask: var(--tColor);\r\n background: var(--mcolor);]\r\n top center color\r\n [/div]\r\n [div=position: absolute;\r\n top: 0px;\r\n right: 0px;\r\n height: 4px;\r\n width: 4px;\r\n transform: scaleX(-1);\r\n image-rendering: pixelated;\r\n mask: var(--tcBorder);\r\n background-color: var(--lborder);]\r\n top right border\r\n [/div]\r\n [div=position: absolute;\r\n top: 0px;\r\n right: 0px;\r\n height: 4px;\r\n width: 4px;\r\n transform: scaleX(-1);\r\n image-rendering: pixelated;\r\n mask: var(--tcInner);\r\n background: var(--inner);]\r\n top right inner\r\n [/div]\r\n [div=position: absolute;\r\n top: 0px;\r\n right: 0px;\r\n height: 4px;\r\n width: 4px;\r\n transform: scaleX(-1);\r\n image-rendering: pixelated;\r\n mask: var(--tcColor);\r\n background: var(--mcolor);]\r\n top right color\r\n [/div]\r\n [div=position: absolute;\r\n top: 4px;\r\n right: 0px;\r\n height: calc(100% - 10px);\r\n width: 4px;\r\n transform: scaleX(-1);\r\n image-rendering: pixelated;\r\n mask: var(--vBorder);\r\n background-color: var(--lborder);]\r\n right center border\r\n [/div]\r\n [div=position: absolute;\r\n top: 4px;\r\n right: 0px;\r\n height: calc(100% - 10px);\r\n width: 4px;\r\n transform: scaleX(-1);\r\n image-rendering: pixelated;\r\n mask: var(--vInner);\r\n background: var(--inner);]\r\n right center inner\r\n [/div]\r\n [div=position: absolute;\r\n top: 4px;\r\n right: 0px;\r\n height: calc(100% - 10px);\r\n width: 4px;\r\n transform: scaleX(-1);\r\n image-rendering: pixelated;\r\n mask: var(--vColor);\r\n background: var(--mcolor);]\r\n right center color\r\n [/div]\r\n [div=position: absolute;\r\n top: 4px;\r\n left: 4px;\r\n height: 20px;\r\n width: 4px;\r\n image-rendering: pixelated;\r\n mask: var(--vBorder);\r\n background-color: var(--lborder);]\r\n left center border\r\n [/div]\r\n [div=position: absolute;\r\n top: 4px;\r\n left: 4px;\r\n height: calc(100% - 10px);\r\n width: 4px;\r\n image-rendering: pixelated;\r\n mask: var(--vInner);\r\n background: var(--inner);]\r\n left center Inner\r\n [/div]\r\n [div=position: absolute;\r\n top: 4px;\r\n left: 4px;\r\n height: calc(100% - 10px);\r\n width: 4px;\r\n image-rendering: pixelated;\r\n mask: var(--vColor);\r\n background: var(--mcolor);]\r\n left center color\r\n [/div]\r\n [div=position: absolute;\r\n top: 24px;\r\n left: 0px;\r\n height: 10px;\r\n width: 8px;\r\n image-rendering: pixelated;\r\n mask: var(--dialborder);\r\n background-color: var(--lborder);]\r\n dialogue light border\r\n [/div]\r\n [div=position: absolute;\r\n top: 24px;\r\n left: 0px;\r\n height: 10px;\r\n width: 8px;\r\n image-rendering: pixelated;\r\n mask: var(--diadborder);\r\n background-color: var(--dborder);]\r\n dialogue dark border\r\n [/div]\r\n [div=position: absolute;\r\n top: 24px;\r\n left: 0px;\r\n height: 10px;\r\n width: 8px;\r\n image-rendering: pixelated;\r\n mask: var(--diainner);\r\n background-color: var(--inner);]\r\n dialogue inner\r\n [/div]\r\n [div=position: absolute;\r\n top: 24px;\r\n left: 0px;\r\n height: 10px;\r\n width: 8px;\r\n image-rendering: pixelated;\r\n mask: var(--diashadow);\r\n background-color: var(--shadow);]\r\n dialogue shadow\r\n [/div]\r\n [div=position: absolute;\r\n top: 24px;\r\n left: 0px;\r\n height: 10px;\r\n width: 8px;\r\n image-rendering: pixelated;\r\n mask: var(--diacolor);\r\n background-color: var(--mcolor);]\r\n dialogue color\r\n [/div]\r\n [div=position: absolute;\r\n top: 34px;\r\n left: 4px;\r\n height: calc(100% - 40px);\r\n width: 8px;\r\n image-rendering: pixelated;\r\n mask: var(--diacorner);\r\n background-color: var(--dborder);]\r\n dialogue lower border\r\n [/div]\r\n [div=position: absolute;\r\n bottom: 0px;\r\n right: 0px;\r\n height: 6px;\r\n width: 4px;\r\n image-rendering: pixelated;\r\n mask: var(--bcBorder);\r\n background-color: var(--dborder);]\r\n bottom right corner border\r\n [/div]\r\n [div=position: absolute;\r\n bottom: 0px;\r\n right: 0px;\r\n height: 6px;\r\n width: 4px;\r\n image-rendering: pixelated;\r\n mask: var(--bcInner);\r\n background-color: var(--inner);]\r\n bottom right corner inner\r\n [/div]\r\n [div=position: absolute;\r\n bottom: 0px;\r\n right: 0px;\r\n height: 6px;\r\n width: 4px;\r\n image-rendering: pixelated;\r\n mask: var(--bcColor);\r\n background-color: var(--mcolor);]\r\n bottom right corner color\r\n [/div]\r\n [div=position: absolute;\r\n bottom: 0px;\r\n right: 0px;\r\n height: 6px;\r\n width: 4px;\r\n image-rendering: pixelated;\r\n mask: var(--bcShadow);\r\n background-color: var(--shadow);]\r\n bottom right corner shadow\r\n [/div]\r\n [div=position: absolute;\r\n bottom: 0px;\r\n left: 4px;\r\n width: 4px;\r\n height: 6px;\r\n transform: scaleX(-1);\r\n image-rendering: pixelated;\r\n mask: var(--bcBorder);\r\n background-color: var(--dborder);]\r\n bottom left corner border\r\n [/div]\r\n [div=position: absolute;\r\n bottom: 0px;\r\n left: 4px;\r\n height: 6px;\r\n width: 4px;\r\n transform: scaleX(-1);\r\n image-rendering: pixelated;\r\n mask: var(--bcInner);\r\n background-color: var(--inner);]\r\n bottom left corner inner\r\n [/div]\r\n [div=position: absolute;\r\n bottom: 0px;\r\n left: 4px;\r\n height: 6px;\r\n width: 4px;\r\n transform: scaleX(-1);\r\n image-rendering: pixelated;\r\n mask: var(--bcColor);\r\n background-color: var(--mcolor);]\r\n bottom left corner color\r\n [/div]\r\n [div=position: absolute;\r\n bottom: 0px;\r\n left: 4px;\r\n height: 6px;\r\n width: 4px;\r\n transform: scaleX(-1);\r\n image-rendering: pixelated;\r\n mask: var(--bcShadow);\r\n background-color: var(--shadow);]\r\n bottom left corner shadow\r\n [/div]\r\n [div=position: absolute;\r\n bottom: 0px;\r\n right: 4px;\r\n width: calc(100% - 12px);\r\n height: 6px;\r\n image-rendering: pixelated;\r\n mask: var(--bShadow);\r\n background-color: var(--shadow);]\r\n bottom center shadow\r\n [/div]\r\n [div=position: absolute;\r\n bottom: 0px;\r\n right: 4px;\r\n width: calc(100% - 12px);\r\n height: 6px;\r\n image-rendering: pixelated;\r\n mask: var(--bBorder);\r\n background-color: var(--dborder);]\r\n bottom center border\r\n [/div]\r\n [div=position: absolute;\r\n bottom: 0px;\r\n right: 4px;\r\n width: calc(100% - 12px);\r\n height: 6px;\r\n image-rendering: pixelated;\r\n mask: var(--bInner);\r\n background-color: var(--inner);]\r\n bottom center inner\r\n [/div]\r\n [div=position: absolute;\r\n bottom: 5px;\r\n right: 4px;\r\n height: 1px;\r\n width: calc(100% - 12px);\r\n background-color: var(--mcolor);]\r\n bottom center color\r\n [/div]\r\n [div=display: block;\r\n width: 100%;\r\n height: auto;\r\n background: var(--mcolor);\r\n container-type: inline-size;\r\n box-sizing: border-box;\r\n padding: calc(6px + 8cqw);\r\n padding-bottom: calc(8px + 8cqw);\r\n overflow: hidden;]\r\n [div=display: block;\r\n box-sizing: border-box;\r\n position: relative;\r\n width: 100%;\r\n height: auto;\r\n container-type: inline-size;\r\n overflow: hidden;]\r\n [div=display: block;\r\n box-sizing: border-box;\r\n width: calc(100cqw + 75px);\r\n padding-right: 75px;\r\n height: auto;\r\n overflow-x: hidden;\r\n overflow-y: auto;\r\n font-size: .975rem;\r\n font-family: var(--bfont);\r\n color: var(--bcolor);\r\n text-align: justify;\r\n max-height: 400px;]\r\n ", { "type": "content", "description": "Text Area (use 'br' or 'display: block' to make new lines)", "marker": { "type": "content", "description": "Text Area (use 'br' or 'display: block' to make new lines)", "original": "&Text Area (use 'br' or 'display: block' to make new lines) \\ content&", "indices": [ 29040, 29109 ] } }, "\r\n " ], "children": [], "markerEnd": { "type": "end", "description": "end", "original": "&end&", "indices": [ 29133, 29137 ] } }, "\r\n [/div]\r\n [/div]\r\n [/div]\r\n [/div]\r\n [/div]\r\n [/div]\r\n[/nobr]" ]
[]
idolsenshi.template 1.1
By glucoseguardian
Main Variables
Body Text Color
Inner Border Color
Main Box Color
Shadow and Subtitle Color
Top Border and Name Color
Bottom Border Color
Aspect Ratio of Image (1, 3/4, 16/9, etc.)
URL of Image
Total Number of Hearts (must be whole)
Number of Filled Hearts (can have decimal)
Under Icon
Tiny Text (use 'br' to create new lines)
Tags
Duplicate
Tag (include @)
Main Content Area
Name
Subtitle
Text Area (use 'br' or 'display: block' to make new lines)
Generate Final Output
Output
idolsenshi.template 1.1 - Text Templater