Input Template

[nobr]
    [div=display: none;][font=Noto Serif JP]font call[/font][font=Averia Serif Libre]font call[/font][font=Averia Libre]font call[/font][/div]
    [div=&Variable Set-Up \ group&--bgIMG: url('&Background Image URL \ text&');
    --bgPort: url('&Portrait Image URL \ text&');
    --darkColor: rgba(0, 0, 0, 1);
    --lightColor: rgba(255, 255, 255, 1);
    --blendColor: &Main Accent Color \ text&;
    --glowColor: rgba(255, 231, 233, 1);
    --aFont: 'Averia Serif Libre', serif;
    --mFont: 'Averia Libre', sans-serif;&end&
    display: block;
    position: relative;
    width: 100%;
    height: clamp(600px,70vh,800px);
    box-sizing: border-box;
    overflow: hidden;
    isolation: isolate;]
      [div=position: absolute; width: calc(100% + 30px); height: calc(100% + 30px); left: -15px; top: -15px; background-image: linear-gradient(rgba(18, 7, 1, .2), rgba(18, 7, 1, .2)), var(--bgIMG); background-size: cover; background-position: center center; filter: blur(3px);] [/div]
      [div=position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; background: url(https://i.imgur.com/UdjBt1F.png); mix-blend-mode: soft-light; opacity: .5;] [/div]
      [div=display: block; position: relative; width: calc(100% + 50px); padding-right: 50px; box-sizing: border-box; height: 100%; overflow-x: hidden; overflow-y: scroll; scroll-snap-type: both mandatory; padding-left: calc(2.5em - 3px);]
        [div=display: flex; flex-flow: row wrap; position: relative; height: 100%; width: 100%; scroll-snap-align: center; scroll-snap-stop: always; box-sizing: border-box;]
          &Image Area \ group&[div=flex: 1 300px; height: 100%; display: flex; flex-flow: column nowrap; scroll-snap-align: center; scroll-snap-stop: always;]
            [div=flex: 1 30%; background: var(--darkColor); mix-blend-mode: darken;] [/div]
            [div=flex: 3 70%; display: block; background: var(--bgPort) no-repeat right 50px top/auto 100%; position: relative; isolation: isolate;]
              [div=position: absolute; width: 5px; height: 100%; left: 5%; top: 0px; background: var(--darkColor); mix-blend-mode: darken;] [/div]
              [div=position: absolute; bottom: 15%; left: calc(5% + 5px); width: calc(95% - 5px);]
                &Information Line \ group \ repeat&[div=font-size: .9rem; display: inline; background: var(--darkColor); color: var(--lightColor); text-transform: uppercase; padding: 1px 5px; font-family: var(--aFont);]&Information \ text&[/div][br][/br]&end&
              [/div]
              [div=position: absolute; right: 0px; bottom: 13%;]
                [div=display: block; font-size: 3.5rem; text-align: right; letter-spacing: .35em; text-transform: uppercase; font-family: var(--aFont); color: var(--lightColor); text-shadow: 0px 0px 10px var(--glowColor);]&Role \ text&[/div]
              [/div]
            [/div]
          [/div]&end&
          [div=flex: 1.8 300px; height: 100%; position: relative; scroll-snap-align: center; scroll-snap-stop: always; overflow: hidden;]
            [div=position: absolute; height: 100%; width: 100%; top: 0px; left: 0px; background: var(--darkColor); mix-blend-mode: darken; display: flex; flex-flow: column nowrap; align-items: flex-start; transform: translate3d(0,0,0);]
              [div=flex: 1 30%; width: 100%;] [/div]
              [div=flex: 3 70%; width: 50px; background: var(--lightColor);] [/div]
              [div=position: absolute; width: 80%; right: 5%; bottom: 5%; font-size: 4rem; text-align: right; line-height: .9; font-family: var(--aFont); color: var(--blendColor); text-transform: uppercase;]&Quote or Lyric \ text&[/div]
            [/div]
            [div=position: absolute; top: 10%; right: 50px; writing-mode: vertical-lr; color: var(--glowColor); font-family: 'Noto Serif JP', serif; font-size: 3rem; font-weight: bold;]&Name \ text&[/div]
            [div=position: absolute; overflow: hidden; height: 100%; width: 75%;]
              [div=display: block; width: calc(100% + 50px); height: 100%; overflow-x: hidden; overflow-y: scroll; padding-right: 50px; color: var(--lightColor); text-shadow: -1px -1px 0px var(--darkColor); font-family: var(--mFont); text-align: justify; font-size: 1rem; line-height: 1.4; box-sizing: border-box; padding-left: 5px;]
                [div=display: block; height: 50px;][/div]
                &Text Content \ group \ repeat&[div=display: block; margin-bottom: .5em;]&Paragraph \ content&[/div]&end&
                [div=display: block; height: 50px;][/div]
              [/div]
            [/div]
          [/div]
          [div=flex: .25 25px; width: 7.5%] [/div]
        [/div]
      [/div]
      &Credits \ group&[div=position: absolute;
      z-index: 4;
      bottom: 0px;
      left: 0px;
      width: 100%;
      background: var(--darkColor);
      font-family: var(--aFont);
      text-transform: uppercase;
      letter-spacing: .15em;
      font-size: .95rem;
      box-sizing: border-box;
      text-align: right;
      padding: 8px 3%;
      mix-blend-mode: darken;]
        [url=&Image Source URL \ text&][div=display: inline-block; color: var(--lightColor);]&Artist \ text&[/div][/url]
      [/div]
      [div=position: absolute; z-index: 5; top: 0px; left: 0px; height: 100%; background: var(--darkColor); color: var(--darkColor); font-family: var(--aFont); text-transform: uppercase; writing-mode: vertical-lr; font-size: .95rem; letter-spacing: .15em; box-sizing: border-box; padding: 0px 8px 15% 8px; gap: 5px; display: flex; flex-flow: row nowrap; justify-content: space-evenly; align-items: center; mix-blend-mode: darken;]&Roleplay Title \ text&[/div]&end&
    [/div]
  [/nobr]

Debug Mode

[
  "[nobr]\r\n    [div=display: none;][font=Noto Serif JP]font call[/font][font=Averia Serif Libre]font call[/font][font=Averia Libre]font call[/font][/div]\r\n    [div=",
  {
    "type": "group",
    "description": "Variable Set-Up",
    "markerStart": {
      "type": "group",
      "description": "Variable Set-Up",
      "original": "&Variable Set-Up \\ group&",
      "repeat": false,
      "indices": [
        161,
        185
      ]
    },
    "repeat": false,
    "originalChildren": [
      "--bgIMG: url('",
      {
        "type": "text",
        "description": "Background Image URL",
        "marker": {
          "type": "text",
          "description": "Background Image URL",
          "defaultValue": "",
          "original": "&Background Image URL \\ text&",
          "indices": [
            200,
            228
          ]
        }
      },
      "');\r\n    --bgPort: url('",
      {
        "type": "text",
        "description": "Portrait Image URL",
        "marker": {
          "type": "text",
          "description": "Portrait Image URL",
          "defaultValue": "",
          "original": "&Portrait Image URL \\ text&",
          "indices": [
            253,
            279
          ]
        }
      },
      "');\r\n    --darkColor: rgba(0, 0, 0, 1);\r\n    --lightColor: rgba(255, 255, 255, 1);\r\n    --blendColor: ",
      {
        "type": "text",
        "description": "Main Accent Color",
        "marker": {
          "type": "text",
          "description": "Main Accent Color",
          "defaultValue": "",
          "original": "&Main Accent Color \\ text&",
          "indices": [
            382,
            407
          ]
        }
      },
      ";\r\n    --glowColor: rgba(255, 231, 233, 1);\r\n    --aFont: 'Averia Serif Libre', serif;\r\n    --mFont: 'Averia Libre', sans-serif;"
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        536,
        540
      ]
    }
  },
  "\r\n    display: block;\r\n    position: relative;\r\n    width: 100%;\r\n    height: clamp(600px,70vh,800px);\r\n    box-sizing: border-box;\r\n    overflow: hidden;\r\n    isolation: isolate;]\r\n      [div=position: absolute; width: calc(100% + 30px); height: calc(100% + 30px); left: -15px; top: -15px; background-image: linear-gradient(rgba(18, 7, 1, .2), rgba(18, 7, 1, .2)), var(--bgIMG); background-size: cover; background-position: center center; filter: blur(3px);] [/div]\r\n      [div=position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; background: url(https://i.imgur.com/UdjBt1F.png); mix-blend-mode: soft-light; opacity: .5;] [/div]\r\n      [div=display: block; position: relative; width: calc(100% + 50px); padding-right: 50px; box-sizing: border-box; height: 100%; overflow-x: hidden; overflow-y: scroll; scroll-snap-type: both mandatory; padding-left: calc(2.5em - 3px);]\r\n        [div=display: flex; flex-flow: row wrap; position: relative; height: 100%; width: 100%; scroll-snap-align: center; scroll-snap-stop: always; box-sizing: border-box;]\r\n          ",
  {
    "type": "group",
    "description": "Image Area",
    "markerStart": {
      "type": "group",
      "description": "Image Area",
      "original": "&Image Area \\ group&",
      "repeat": false,
      "indices": [
        1614,
        1633
      ]
    },
    "repeat": false,
    "originalChildren": [
      "[div=flex: 1 300px; height: 100%; display: flex; flex-flow: column nowrap; scroll-snap-align: center; scroll-snap-stop: always;]\r\n            [div=flex: 1 30%; background: var(--darkColor); mix-blend-mode: darken;] [/div]\r\n            [div=flex: 3 70%; display: block; background: var(--bgPort) no-repeat right 50px top/auto 100%; position: relative; isolation: isolate;]\r\n              [div=position: absolute; width: 5px; height: 100%; left: 5%; top: 0px; background: var(--darkColor); mix-blend-mode: darken;] [/div]\r\n              [div=position: absolute; bottom: 15%; left: calc(5% + 5px); width: calc(95% - 5px);]\r\n                ",
      {
        "type": "group",
        "description": "Information Line",
        "markerStart": {
          "type": "group",
          "description": "Information Line",
          "original": "&Information Line \\ group \\ repeat&",
          "repeat": true,
          "indices": [
            2271,
            2305
          ]
        },
        "repeat": true,
        "originalChildren": [
          "[div=font-size: .9rem; display: inline; background: var(--darkColor); color: var(--lightColor); text-transform: uppercase; padding: 1px 5px; font-family: var(--aFont);]",
          {
            "type": "text",
            "description": "Information",
            "marker": {
              "type": "text",
              "description": "Information",
              "defaultValue": "",
              "original": "&Information \\ text&",
              "indices": [
                2474,
                2493
              ]
            }
          },
          "[/div][br][/br]"
        ],
        "children": [],
        "markerEnd": {
          "type": "end",
          "description": "end",
          "original": "&end&",
          "indices": [
            2509,
            2513
          ]
        }
      },
      "\r\n              [/div]\r\n              [div=position: absolute; right: 0px; bottom: 13%;]\r\n                [div=display: block; font-size: 3.5rem; text-align: right; letter-spacing: .35em; text-transform: uppercase; font-family: var(--aFont); color: var(--lightColor); text-shadow: 0px 0px 10px var(--glowColor);]",
      {
        "type": "text",
        "description": "Role",
        "marker": {
          "type": "text",
          "description": "Role",
          "defaultValue": "",
          "original": "&Role \\ text&",
          "indices": [
            2826,
            2838
          ]
        }
      },
      "[/div]\r\n              [/div]\r\n            [/div]\r\n          [/div]"
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        2905,
        2909
      ]
    }
  },
  "\r\n          [div=flex: 1.8 300px; height: 100%; position: relative; scroll-snap-align: center; scroll-snap-stop: always; overflow: hidden;]\r\n            [div=position: absolute; height: 100%; width: 100%; top: 0px; left: 0px; background: var(--darkColor); mix-blend-mode: darken; display: flex; flex-flow: column nowrap; align-items: flex-start; transform: translate3d(0,0,0);]\r\n              [div=flex: 1 30%; width: 100%;] [/div]\r\n              [div=flex: 3 70%; width: 50px; background: var(--lightColor);] [/div]\r\n              [div=position: absolute; width: 80%; right: 5%; bottom: 5%; font-size: 4rem; text-align: right; line-height: .9; font-family: var(--aFont); color: var(--blendColor); text-transform: uppercase;]",
  {
    "type": "text",
    "description": "Quote or Lyric",
    "marker": {
      "type": "text",
      "description": "Quote or Lyric",
      "defaultValue": "",
      "original": "&Quote or Lyric \\ text&",
      "indices": [
        3635,
        3657
      ]
    }
  },
  "[/div]\r\n            [/div]\r\n            [div=position: absolute; top: 10%; right: 50px; writing-mode: vertical-lr; color: var(--glowColor); font-family: 'Noto Serif JP', serif; font-size: 3rem; font-weight: bold;]",
  {
    "type": "text",
    "description": "Name",
    "marker": {
      "type": "text",
      "description": "Name",
      "defaultValue": "",
      "original": "&Name \\ text&",
      "indices": [
        3871,
        3883
      ]
    }
  },
  "[/div]\r\n            [div=position: absolute; overflow: hidden; height: 100%; width: 75%;]\r\n              [div=display: block; width: calc(100% + 50px); height: 100%; overflow-x: hidden; overflow-y: scroll; padding-right: 50px; color: var(--lightColor); text-shadow: -1px -1px 0px var(--darkColor); font-family: var(--mFont); text-align: justify; font-size: 1rem; line-height: 1.4; box-sizing: border-box; padding-left: 5px;]\r\n                [div=display: block; height: 50px;][/div]\r\n                ",
  {
    "type": "group",
    "description": "Text Content",
    "markerStart": {
      "type": "group",
      "description": "Text Content",
      "original": "&Text Content \\ group \\ repeat&",
      "repeat": true,
      "indices": [
        4385,
        4415
      ]
    },
    "repeat": true,
    "originalChildren": [
      "[div=display: block; margin-bottom: .5em;]",
      {
        "type": "content",
        "description": "Paragraph",
        "marker": {
          "type": "content",
          "description": "Paragraph",
          "original": "&Paragraph \\ content&",
          "indices": [
            4458,
            4478
          ]
        }
      },
      "[/div]"
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        4485,
        4489
      ]
    }
  },
  "\r\n                [div=display: block; height: 50px;][/div]\r\n              [/div]\r\n            [/div]\r\n          [/div]\r\n          [div=flex: .25 25px; width: 7.5%] [/div]\r\n        [/div]\r\n      [/div]\r\n      ",
  {
    "type": "group",
    "description": "Credits",
    "markerStart": {
      "type": "group",
      "description": "Credits",
      "original": "&Credits \\ group&",
      "repeat": false,
      "indices": [
        4699,
        4715
      ]
    },
    "repeat": false,
    "originalChildren": [
      "[div=position: absolute;\r\n      z-index: 4;\r\n      bottom: 0px;\r\n      left: 0px;\r\n      width: 100%;\r\n      background: var(--darkColor);\r\n      font-family: var(--aFont);\r\n      text-transform: uppercase;\r\n      letter-spacing: .15em;\r\n      font-size: .95rem;\r\n      box-sizing: border-box;\r\n      text-align: right;\r\n      padding: 8px 3%;\r\n      mix-blend-mode: darken;]\r\n        [url=",
      {
        "type": "text",
        "description": "Image Source URL",
        "marker": {
          "type": "text",
          "description": "Image Source URL",
          "defaultValue": "",
          "original": "&Image Source URL \\ text&",
          "indices": [
            5106,
            5130
          ]
        }
      },
      "][div=display: inline-block; color: var(--lightColor);]",
      {
        "type": "text",
        "description": "Artist",
        "marker": {
          "type": "text",
          "description": "Artist",
          "defaultValue": "",
          "original": "&Artist \\ text&",
          "indices": [
            5186,
            5200
          ]
        }
      },
      "[/div][/url]\r\n      [/div]\r\n      [div=position: absolute; z-index: 5; top: 0px; left: 0px; height: 100%; background: var(--darkColor); color: var(--darkColor); font-family: var(--aFont); text-transform: uppercase; writing-mode: vertical-lr; font-size: .95rem; letter-spacing: .15em; box-sizing: border-box; padding: 0px 8px 15% 8px; gap: 5px; display: flex; flex-flow: row nowrap; justify-content: space-evenly; align-items: center; mix-blend-mode: darken;]",
      {
        "type": "text",
        "description": "Roleplay Title",
        "marker": {
          "type": "text",
          "description": "Roleplay Title",
          "defaultValue": "",
          "original": "&Roleplay Title \\ text&",
          "indices": [
            5659,
            5681
          ]
        }
      },
      "[/div]"
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        5688,
        5692
      ]
    }
  },
  "\r\n    [/div]\r\n  [/nobr]"
]

[]

nightowl(cs).template 1.0

By glucoseguardian

Variable Set-Up

Background Image URL

Portrait Image URL

Main Accent Color

Image Area

Information Line

Information

Role

Quote or Lyric

Name

Text Content

Paragraph

Credits

Image Source URL

Artist

Roleplay Title

Output