Jewel
spirited
I'm shy so all I do is lurk but I come back to this thread to just behold your BBCode skills every day. I absolutely love everything that you do. You are a BBCode demigod. Obsessed.
-
When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!
Remember to credit artists when using work not your own.
Resource Ami's Lab 2.0 | Mobile Friendly Freebies
- Thread starter Ambiloquous
- Start date
Ambiloquous
Graphic Fanatic
I'm timid so all I do is skulk but I come back to your threads just to behold your trolling skills every day. I completely adore everything that you do. You are a troll semi-deity. Engrossed.
LKDSFL sorry, what I mean is: thank you!
Your threads are formatted very neatly, and I was this close to PMing you for a 1v1 before I realized I didn't have the time.
Jewel
spirited
My heart is bursting right now, I am so flattered, thank you my friend. If you ever find that you do have time, I'd always be overjoyed to receive word from you.I'm timid so all I do is skulk but I come back to your threads just to behold your trolling skills every day. I completely adore everything that you do. You are a troll semi-deity. Engrossed.
LKDSFL sorry, what I mean is: thank you!
cocacola
your mom's side peice
your codes... my fine gentleperson ... they are so exquisite. i love them, they're so pretty!! i became really good w html on other websites for this sort of thing and this only makes me want to learn bbcode even more !! how'd go about learning this?
Ambiloquous
Graphic Fanatic
Thank you sm!
When I first started here, I looked over the Tutorial - RpNation - BBcode Guide thread first — though I'm sure you've seen it, being that it's pinned to this center. There used to be a BBCode+ intro thread or something like that, but then that died, so we all started using CSS injections in background and border tags. Here's a slightly older thread that I think still is pretty relevant: Tutorial - BBCode CSS Injection. If you've used HTML before, you probably know a bit of CSS, so it shouldn't be too unfamiliar (but if it is, MDN and the general internet has a lot of CSS documentation). I believe some other BBCoders have tutorials that you can filter out in the BBCode Center as well? Also, I think the thing that helped me the most was looking at other people's code and breaking down the components, so feel free to take apart, break, wreck, sift through any of my codes if you feel like that's your jam.
The_Googly_Eyes
The Googly Eyes are watching you
I'm just thinking, but will you ever do a mytholagy one? like Norse mythology or Egyptian mythology, or Greek?
Or better, ones that would do well on role-calling roleplays?
Also, your stuff is A- MAZ-ING
Or better, ones that would do well on role-calling roleplays?
Also, your stuff is A- MAZ-ING
Ambiloquous
Graphic Fanatic
I might! I'm honestly not sure where or what my inspiration comes from sometimes, so I can't say for certain, but it's definitely not off the table. On the other hand, it's hard to embody such a specific style like that in a general code, especially since the elements that separate those mythologies from other stuff are likely the art (and possibly font) used than anything else.
For role-calling roleplays, I assume you mean ones with a set role to fill? I'm probably not going to design one exactly for that, but there are codes you could use for that purpose anyway if you change the placeholder text. I think Starry Sky has a section for something like that when you click on the second tab? You could probably repurpose some of the CS codes as well, since the text I put in code is just whatever I felt like putting in at the time of making.
Thank you sm!
Ambiloquous
Graphic Fanatic
Toggle Tabs
Non-toggling tabs code. Ignore the name.I have arisen from the BBCode grave. I'm not entirely satisfied with this inconsistent looking layout, but I finished it, so I thought I'd put it out anyway. In the process, I have reminded myself again how difficult it is to put in understandable comments. (Not that my comments are understandable. :v)
Tabs
Hidden Scroll
Click Tabs
Scroll
Code:
[comment]-- Fonts --> [font=Macondo][font=Heebo]:>[/font][/font][/comment][border=0;
/* Probably best if you don't change anything I haven't commented next to */
margin: auto;
max-width: 950px;
padding: 0;
--h: clamp(380px, 90vh, 900px);
/* Colours */
--base: #4A6491; /* #3f98c9 */
--outline: #D0E4F2;
--accent: #30395C; /* #12619D */
--accent-2: #85A5CC; /* #89C2E1 */
/* Images -- image URL in url(''), percentages are x-value y-value image positioning */
/* Tab 1 Image */
--img-1: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/c9aa5b64-52aa-4d3f-85c2-366bd57804bc/ddatbzg-bb7eb3a5-ff48-4edf-bbd8-6860c9df322b.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2M5YWE1YjY0LTUyYWEtNGQzZi04NWMyLTM2NmJkNTc4MDRiY1wvZGRhdGJ6Zy1iYjdlYjNhNS1mZjQ4LTRlZGYtYmJkOC02ODYwYzlkZjMyMmIucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.bWn_j0HI_JgX_II9d0OUx9pGYF8QDP6yVPesmNSsyjk') 50% 100% / cover;
/* Tab 3 Images */
--img-2: url('https://pbs.twimg.com/media/ErkL6MHW8AIheQn?format=jpg&name=large') 50% 25% / cover;
--img-3: url('https://pbs.twimg.com/media/ErkL6NNXAAExA29?format=jpg&name=large') 50% 70% / cover;
--img-4: url('https://images.squarespace-cdn.com/content/v1/5f15cec690ad1413ae255f7e/1601332574045-P8HM3NEM3W08PP9TTG5A/image-asset.png?format=1500w') 50% 30% / cover;
/* Border Properties */
--b-r: 8px; /* Border radius -- a greater number makes it rounder and vice versa */
--b-w: 8px; /* Border width */
--bg-w: (var(--icon-s) + (2 * var(--b-w)));
--tabs-h: 250px;
--tab-f-s: 25px;
/* Icon Properties */
--icon-s: 90px; /* Background box size -- changing it might mess up code */
--icon-f-s: 55px; /* Icon size */
--bar-w: 72px;
/* Title Properties */
--title-f-s: 2em; /* Font size -- change by .1 increments, increasing size might mess it up on smaller screens */
--title-f: 'Macondo', sans-serif; /* Font family -- change font tag above if you change this */
--title-p: max(10px, 5%);
/* Gradient Opacity */
--grad-o: 50%;
/* Content Properties */
--con-p: clamp(10px, 2%, 20px); /* Padding */
--con-c: azure; /* Text colour */
--con-f-s: 1.05em; /* Font size -- change by .1 increments */
--con-f: 'Heebo', sans-serif; /* Font family -- change font tag above if you change this */
/* Divider Height */
--div-h: 2px;
/* Header Properties */
--head-f-s: 1.3em; /* Font size -- change by .1 increments */
--head-p: 6px;
][comment]-- Tab Note --[/comment][border=0;
padding: 0;
color: var(--outline);
font-family: var(--con-f);
line-height: 1.8;]Click Tabs [fa]fa-solid fa-arrow-down[/fa][/border][comment]-- Main --[/comment][border=0;
position: relative;
display: flex;
flex-flow: row nowrap;
align-items: center;
box-sizing: border-box;
width: 100%;
height: var(--h);
padding: calc(var(--bg-w)) 0 0 0;][comment]-- Icon Border --[/comment][border=0;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
width: calc(var(--bg-w));
height: calc(var(--bg-w));
border-radius: var(--b-r);
background: var(--outline);
padding: 0;][comment]
-- Icon Box --[/comment][border=0;
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
width: var(--icon-s);
height: var(--icon-s);
border-radius: var(--b-r);
background: var(--base);
padding: 0;][/border][comment]
-- Icon Box End --[/comment][/border][comment]
-- Icon Border End --[/comment][comment]
-- Title Box --[/comment][border=0;
box-sizing: border-box;
position: absolute;
top: calc((var(--bg-w) - var(--bar-w)) / 2);
left: calc(var(--bg-w));
border-top-right-radius: var(--b-r);
border-bottom-right-radius: var(--b-r);
background: var(--accent-2);
width: calc(100% - var(--bg-w));
height: var(--bar-w);
padding: 0;
overflow: hidden;][comment]-- Title Gradient --[/comment][border=0;
opacity: var(--grad-o);
box-sizing: border-box;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--accent) -80%, rgba(0, 0, 0, 0), var(--accent));
padding: 0;][/border][/border][comment]
-- Header Box End --[/comment][comment]
-- Tab Bar Background --[/comment][border=0;
position: absolute;
top: calc(var(--bg-w));
left: calc((var(--bg-w) - var(--bar-w)) / 2);
padding: 0;
width: var(--bar-w);
height: calc(100% - var(--bg-w));
border-bottom-right-radius: var(--b-r);
border-bottom-left-radius: var(--b-r);
background: var(--accent-2);
pointer-events: none;][/border][comment]
-- Tab Bar Background End --[/comment][comment]
-- Actual Tabs --[/comment][border=0;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-start;
margin-left: 20px;
box-sizing: border-box;
width: 66px;
height: var(--tabs-h);
padding: 0;
line-height: 60px;
overflow: hidden;][tabs]
[tab=0][comment]
------------ Tab 1 Body ------------
[/comment][border=0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: var(--h);
box-sizing: border-box;
padding: 0;
pointer-events: none;][comment]
-- Icon --[/comment][border=0;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
width: calc(var(--bg-w));
height: calc(var(--bg-w));
color: var(--accent);
font-size: var(--icon-f-s);
padding: 0;][fa]fa-solid fa-key-skeleton[/fa][/border][comment]
-- Icon End --[/comment][comment]
-- Title --[/comment][border=0;
box-sizing: border-box;
position: absolute;
top: calc((var(--bg-w) - var(--bar-w)) / 2);
left: calc(var(--bg-w));
display: flex;
flex-flow: row nowrap;
align-items: center;
width: calc(100% - var(--bg-w));
height: var(--bar-w);
padding: 0 var(--title-p);
color: var(--outline);
font-size: var(--title-f-s);
font-family: var(--title-f);
line-height: 1;
pointer-events: auto;]LOREM IPSUM[/border][comment]
-- Title End --[/comment][comment]
-- Tabs Bar --[/comment][border=0;
box-sizing: border-box;
position: absolute;
top: calc(var(--bg-w));
left: calc((var(--bg-w) - var(--bar-w)) / 2);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
padding: 0;
width: var(--bar-w);
height: calc(100% - var(--bg-w));][comment]-- Tabs Gradient --[/comment][border=0;
opacity: var(--grad-o);
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-bottom-right-radius: var(--b-r);
border-bottom-left-radius: var(--b-r);
background: linear-gradient(var(--accent) -20%, rgba(0, 0, 0, 0) 40%, var(--accent));
padding: 0;][/border][comment]-- Tabs --[/comment][border=0;
position: relative;
box-sizing: border-box;
width: 100%;
height: var(--tabs-h);
color: var(--accent);
font-size: var(--tab-f-s);
text-align: center;
padding: 0;][comment]
-- Tab Border --[/comment][border=0;
position: absolute;
top: calc(0px - 14px);
left: calc(0px - var(--b-w));
box-sizing: border-box;
border-radius: var(--b-r);
width: calc(var(--bar-w) + (2 * var(--b-w)));
height: calc(var(--bar-w) + (2 * var(--b-w)));
border: var(--b-w) solid var(--base);
padding: 0;][/border][comment]-- Tab Border End --[/comment][comment]
-- Tab Covers --[/comment][border=0;
position: absolute;
top: 0px;
width: 100%;
color: var(--outline);
font-size: 1.5em;
--fa-fade-opacity: 0.5;
--fa-animation-duration: 1.6s;
padding: 0;][fa]fa-solid fa-user fa-fade[/fa][/border][border=0;
position: absolute;
top: 65px;
width: 100%;
padding: 0;][fa]fa-solid fa-clock[/fa][/border][border=0;
position: absolute;
top: 130px;
width: 100%;
padding: 0;][fa]fa-solid fa-users[/fa][/border][border=0;
position: absolute;
top: 195px;
width: 100%;
padding: 0;][fa]fa-solid fa-list[/fa][/border][/border][/border][comment]
-- Tabs Bar End --[/comment][comment]
-- Content Box --[/comment][border=0;
box-sizing: border-box;
position: absolute;
top: calc(var(--bg-w));
left: calc(var(--bg-w));
width: calc(100% - var(--bg-w));
height: calc(100% - var(--bg-w));
border-radius: var(--b-r);
background: var(--base);
padding: 0;
color: var(--con-c);
font-size: var(--con-f-s);
font-family: var(--con-f);
line-height: 1.5;
overflow: hidden;
pointer-events: auto;][comment]-- Hidden Scroll --[/comment][border=0;
box-sizing: border-box;
width: calc(100% + 30px);
height: 100%;
padding: 0;
overflow: auto;][comment]-- Image + Text --[/comment][border=0;
box-sizing: border-box;
width: calc(100% - 30px);
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: stretch;
padding: calc(var(--con-p) / 2);][comment]-- Image --[/comment][border=0;
box-sizing: border-box;
margin: calc(var(--con-p) / 2);
flex: 1 1 200px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
min-height: 280px;
border-radius: var(--b-r);
background: var(--outline);
padding: 0;][border=0;
box-sizing: border-box;
width: calc(100% - (2 * var(--b-w)));
height: calc(100% - (2 * var(--b-w)));
border-radius: var(--b-r);
background: linear-gradient(rgba(0, 0, 0, 0) 70%, var(--accent)), var(--img-1);
padding: 0;][/border][/border][comment]-- Text --[/comment][border=0;
box-sizing: border-box;
margin: calc(var(--con-p) / 1.75);
flex: 2 1 300px;
padding: 0;][comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ALIAS[/border] Blue Moon [fa]fa-solid fa-moon[/fa]
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ROLE[/border] Point
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]TIER[/border] II–III
[comment]-- Divider --[/comment][border=0; padding: 0;
position: relative;
top: -4px;
display: inline-block;
width: 100%;
height: var(--div-h);
border-radius: var(--b-r);
background: var(--accent-2);][/border][comment]-- Divider End --[/comment]
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]GROUP[/border] Amores III
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]BRANCH[/border] Little Latonia
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]BATCH[/border] Noche
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]MENTOR[/border] Daybreak
[comment]-- Divider --[/comment][border=0; padding: 0;
position: relative;
top: -4px;
display: inline-block;
width: 100%;
height: var(--div-h);
border-radius: var(--b-r);
background: var(--accent-2);][/border][comment]-- Divider End --[/comment]
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]NOTABLE SKILLS[/border] Aqua Scrying, Birdspeak
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]NOTES[/border] Check [i]Report on Operation Rose Train[/i] for details on patterns and expertise
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ARTIST[/border] PicardLouis[/border][/border][comment]
-- Image + Text End --[/comment][comment]
-- More Text --[/comment][border=0;
box-sizing: border-box;
width: calc(100% - 30px);
padding: var(--con-p);][comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]DESCRIPTION[/border]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam quam nulla porttitor massa. Bibendum neque egestas congue quisque egestas diam. Feugiat vivamus at augue eget arcu dictum varius. Leo integer malesuada nunc vel risus commodo viverra. Fermentum dui faucibus in ornare. Ut aliquam purus sit amet luctus venenatis. Sagittis aliquam malesuada bibendum arcu vitae elementum. Ut faucibus pulvinar elementum integer enim neque volutpat ac tincidunt. Elementum tempus egestas sed sed risus pretium quam. Magna etiam tempor orci eu lobortis elementum nibh. Vitae elementum curabitur vitae nunc.
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]EXPANDED[/border]
Netus et malesuada fames ac turpis egestas integer. Netus et malesuada fames ac turpis. Tortor dignissim convallis aenean et. Tortor pretium viverra suspendisse potenti nullam. Tincidunt augue interdum velit euismod in pellentesque massa placerat duis. Pharetra sit amet aliquam id diam maecenas. Nisi porta lorem mollis aliquam ut porttitor. Tellus elementum sagittis vitae et. Gravida arcu ac tortor dignissim convallis. Massa ultricies mi quis hendrerit dolor magna eget. Sed cras ornare arcu dui vivamus arcu felis bibendum ut.
Massa tincidunt dui ut ornare lectus sit amet est. Hac habitasse platea dictumst vestibulum rhoncus est. Sit amet massa vitae tortor condimentum lacinia quis. Metus dictum at tempor commodo ullamcorper. Pulvinar sapien et ligula ullamcorper. Tristique senectus et netus et malesuada fames ac turpis egestas. Vitae semper quis lectus nulla at. Viverra tellus in hac habitasse platea dictumst. Faucibus pulvinar elementum integer enim neque volutpat. Odio aenean sed adipiscing diam.[/border][comment]-- More Text End --[/comment][/border][/border][comment]
-- Content Box End --[/comment][/border][/tab]
[tab=0][comment]
------------ Tab 2 Body ------------
[/comment][border=0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: var(--h);
box-sizing: border-box;
padding: 0;
pointer-events: none;][comment]
-- Icon --[/comment][border=0;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
width: calc(var(--bg-w));
height: calc(var(--bg-w));
color: var(--accent);
font-size: var(--icon-f-s);
padding: 0;][fa]fa-solid fa-key-skeleton[/fa][/border][comment]
-- Icon End --[/comment][comment]
-- Title --[/comment][border=0;
box-sizing: border-box;
position: absolute;
top: calc((var(--bg-w) - var(--bar-w)) / 2);
left: calc(var(--bg-w));
display: flex;
flex-flow: row nowrap;
align-items: center;
width: calc(100% - var(--bg-w));
height: var(--bar-w);
padding: 0 var(--title-p);
color: var(--outline);
font-size: var(--title-f-s);
font-family: var(--title-f);
line-height: 1;
pointer-events: auto;]IPSUM LOREM[/border][comment]
-- Title End --[/comment][comment]
-- Tabs Bar --[/comment][border=0;
box-sizing: border-box;
position: absolute;
top: calc(var(--bg-w));
left: calc((var(--bg-w) - var(--bar-w)) / 2);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
padding: 0;
width: var(--bar-w);
height: calc(100% - var(--bg-w));][comment]-- Tabs Gradient --[/comment][border=0;
opacity: var(--grad-o);
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-bottom-right-radius: var(--b-r);
border-bottom-left-radius: var(--b-r);
background: linear-gradient(var(--accent) -10%, rgba(0, 0, 0, 0) 50%, var(--accent));
padding: 0;][/border][comment]-- Tabs --[/comment][border=0;
position: relative;
box-sizing: border-box;
width: 100%;
height: var(--tabs-h);
color: var(--accent);
font-size: var(--tab-f-s);
text-align: center;
padding: 0;][comment]
-- Tab Border --[/comment][border=0;
position: absolute;
top: 50px;
left: calc(0px - var(--b-w));
box-sizing: border-box;
border-radius: var(--b-r);
width: calc(var(--bar-w) + (2 * var(--b-w)));
height: calc(var(--bar-w) + (2 * var(--b-w)));
border: var(--b-w) solid var(--base);
padding: 0;][/border][comment]-- Tab Border End --[/comment][comment]
-- Tab Covers --[/comment][border=0;
position: absolute;
top: 0px;
width: 100%;
padding: 0;][fa]fa-solid fa-user[/fa][/border][border=0;
position: absolute;
top: 65px;
width: 100%;
color: var(--outline);
font-size: 1.5em;
--fa-fade-opacity: 0.5;
--fa-animation-duration: 1.6s;
padding: 0;][fa]fa-solid fa-clock fa-fade[/fa][/border][border=0;
position: absolute;
top: 130px;
width: 100%;
padding: 0;][fa]fa-solid fa-users[/fa][/border][border=0;
position: absolute;
top: 195px;
width: 100%;
padding: 0;][fa]fa-solid fa-list[/fa][/border][/border][/border][comment]
-- Tabs Bar End --[/comment][comment]
-- Content Box --[/comment][border=0;
box-sizing: border-box;
position: absolute;
top: calc(var(--bg-w));
left: calc(var(--bg-w));
width: calc(100% - var(--bg-w));
height: calc(100% - var(--bg-w));
border-radius: var(--b-r);
background: var(--base);
padding: 0;
color: var(--con-c);
font-size: var(--con-f-s);
font-family: var(--con-f);
line-height: 1.5;
overflow: hidden;
pointer-events: auto;][comment]-- Hidden Scroll --[/comment][border=0;
box-sizing: border-box;
width: calc(100% + 30px);
height: 100%;
padding: 0;
overflow: auto;][comment]-- Text --[/comment][border=0;
box-sizing: border-box;
width: calc(100% - 30px);
padding: var(--con-p);][comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]HISTORY[/border]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam quam nulla porttitor massa. Bibendum neque egestas congue quisque egestas diam. Feugiat vivamus at augue eget arcu dictum varius. Leo integer malesuada nunc vel risus commodo viverra. Fermentum dui faucibus in ornare. Ut aliquam purus sit amet luctus venenatis. Sagittis aliquam malesuada bibendum arcu vitae elementum. Ut faucibus pulvinar elementum integer enim neque volutpat ac tincidunt. Elementum tempus egestas sed sed risus pretium quam. Magna etiam tempor orci eu lobortis elementum nibh. Vitae elementum curabitur vitae nunc.
Nullam non nisi est sit amet. Massa eget egestas purus viverra accumsan. Neque viverra justo nec ultrices dui. Tellus mauris a diam maecenas sed enim ut. Sed adipiscing diam donec adipiscing. Adipiscing tristique risus nec feugiat in fermentum. Lectus nulla at volutpat diam ut venenatis tellus in. Consequat mauris nunc congue nisi vitae. Venenatis a condimentum vitae sapien pellentesque habitant morbi tristique. Enim ut sem viverra aliquet eget sit amet tellus.
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]EXPANDED[/border]
Netus et malesuada fames ac turpis egestas integer. Netus et malesuada fames ac turpis. Tortor dignissim convallis aenean et. Tortor pretium viverra suspendisse potenti nullam. Tincidunt augue interdum velit euismod in pellentesque massa placerat duis. Pharetra sit amet aliquam id diam maecenas. Nisi porta lorem mollis aliquam ut porttitor. Tellus elementum sagittis vitae et. Gravida arcu ac tortor dignissim convallis. Massa ultricies mi quis hendrerit dolor magna eget. Sed cras ornare arcu dui vivamus arcu felis bibendum ut.
Massa tincidunt dui ut ornare lectus sit amet est. Hac habitasse platea dictumst vestibulum rhoncus est. Sit amet massa vitae tortor condimentum lacinia quis. Metus dictum at tempor commodo ullamcorper. Pulvinar sapien et ligula ullamcorper. Tristique senectus et netus et malesuada fames ac turpis egestas. Vitae semper quis lectus nulla at. Viverra tellus in hac habitasse platea dictumst. Faucibus pulvinar elementum integer enim neque volutpat. Odio aenean sed adipiscing diam.[/border][comment]-- Text End --[/comment][/border][/border][comment]
-- Content Box End --[/comment][/border][/tab]
[tab=0][comment]
------------ Tab 3 Body ------------
[/comment][border=0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: var(--h);
box-sizing: border-box;
padding: 0;
pointer-events: none;][comment]
-- Icon --[/comment][border=0;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
width: calc(var(--bg-w));
height: calc(var(--bg-w));
color: var(--accent);
font-size: var(--icon-f-s);
padding: 0;][fa]fa-solid fa-key-skeleton[/fa][/border][comment]
-- Icon End --[/comment][comment]
-- Title --[/comment][border=0;
box-sizing: border-box;
position: absolute;
top: calc((var(--bg-w) - var(--bar-w)) / 2);
left: calc(var(--bg-w));
display: flex;
flex-flow: row nowrap;
align-items: center;
width: calc(100% - var(--bg-w));
height: var(--bar-w);
padding: 0 var(--title-p);
color: var(--outline);
font-size: var(--title-f-s);
font-family: var(--title-f);
line-height: 1;
pointer-events: auto;]DOLOR SIT[/border][comment]
-- Title End --[/comment][comment]
-- Tabs Bar --[/comment][border=0;
box-sizing: border-box;
position: absolute;
top: calc(var(--bg-w));
left: calc((var(--bg-w) - var(--bar-w)) / 2);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
padding: 0;
width: var(--bar-w);
height: calc(100% - var(--bg-w));][comment]-- Tabs Gradient --[/comment][border=0;
opacity: var(--grad-o);
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-bottom-right-radius: var(--b-r);
border-bottom-left-radius: var(--b-r);
background: linear-gradient(var(--accent), rgba(0, 0, 0, 0) 60%, var(--accent));
padding: 0;][/border][comment]-- Tabs --[/comment][border=0;
position: relative;
box-sizing: border-box;
width: 100%;
height: var(--tabs-h);
color: var(--accent);
font-size: var(--tab-f-s);
text-align: center;
padding: 0;][comment]
-- Tab Border --[/comment][border=0;
position: absolute;
top: 115px;
left: calc(0px - var(--b-w));
box-sizing: border-box;
border-radius: var(--b-r);
width: calc(var(--bar-w) + (2 * var(--b-w)));
height: calc(var(--bar-w) + (2 * var(--b-w)));
border: var(--b-w) solid var(--base);
padding: 0;][/border][comment]-- Tab Border End --[/comment][comment]
-- Tab Covers --[/comment][border=0;
position: absolute;
top: 0px;
width: 100%;
padding: 0;][fa]fa-solid fa-user[/fa][/border][border=0;
position: absolute;
top: 65px;
width: 100%;
padding: 0;][fa]fa-solid fa-clock[/fa][/border][border=0;
position: absolute;
top: 130px;
width: 100%;
color: var(--outline);
font-size: 1.5em;
--fa-fade-opacity: 0.5;
--fa-animation-duration: 1.6s;
padding: 0;][fa]fa-solid fa-users fa-fade[/fa][/border][border=0;
position: absolute;
top: 195px;
width: 100%;
padding: 0;][fa]fa-solid fa-list[/fa][/border][/border][/border][comment]
-- Tabs Bar End --[/comment][comment]
-- Content Box --[/comment][border=0;
box-sizing: border-box;
position: absolute;
top: calc(var(--bg-w));
left: calc(var(--bg-w));
width: calc(100% - var(--bg-w));
height: calc(100% - var(--bg-w));
border-radius: var(--b-r);
background: var(--base);
padding: 0;
color: var(--con-c);
font-size: var(--con-f-s);
font-family: var(--con-f);
line-height: 1.5;
overflow: hidden;
pointer-events: auto;][comment]-- Hidden Scroll --[/comment][border=0;
box-sizing: border-box;
width: calc(100% + 30px);
height: 100%;
padding: 0;
overflow: auto;][comment]
-- Image + Header + Text 1 --[/comment][border=0;
box-sizing: border-box;
width: calc(100% - 30px);
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: stretch;
padding: var(--con-p);][comment]-- Image --[/comment][border=0;
box-sizing: border-box;
flex: 1 1 160px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
max-width: 240px;
min-height: 180px;
border-radius: var(--b-r);
background: var(--outline);
padding: 0;][border=0;
box-sizing: border-box;
width: calc(100% - (2 * var(--b-w)));
height: calc(100% - (2 * var(--b-w)));
border-radius: var(--b-r);
background: linear-gradient(rgba(0, 0, 0, 0) 70%, var(--accent)), var(--img-2);
padding: 0;][/border][/border][comment]-- Header + Text --[/comment][border=0;
box-sizing: border-box;
flex: 3 1 320px;
padding: 0;][comment]-- Header --[/comment][border=0;
position: relative;
margin-top: var(--b-w);
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
border-top-right-radius: var(--b-r);
border-bottom-right-radius: var(--b-r);
background: var(--accent-2);
padding: var(--head-p) var(--title-p);
overflow: hidden;][comment]-- Header Gradient --[/comment][border=0;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
opacity: var(--grad-o);
box-sizing: border-box;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--accent), rgba(0, 0, 0, 0), var(--accent) 180%);
padding: 0;
z-index: 1;][/border][comment]-- Header Text --[/comment][border=0;
padding: 0;
color: var(--outline);
font-size: var(--head-f-s);
font-family: var(--title-f);
z-index: 2;]ONE WHO GUARDS THE NIGHT[/border][/border][comment]-- Text --[/comment][border=0;
box-sizing: border-box;
margin: var(--con-p) 0 0 var(--con-p);
padding: 0;][comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ALIAS[/border] Nightingale [fa]fa-solid fa-crow[/fa]
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ROLE[/border] Shield
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]RELATIONSHIP[/border]
Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Ultricies lacus sed turpis tincidunt id aliquet risus. Pretium viverra suspendisse potenti nullam ac. Faucibus scelerisque eleifend donec pretium vulputate sapien nec. Ipsum suspendisse ultrices gravida dictum fusce ut.
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ARTIST[/border] Eliot Baum[/border][/border][/border][comment]
-- Image + Header + Text 1 End --[/comment][comment]
-- Header + Text + Image 2 --[/comment][border=0;
box-sizing: border-box;
width: calc(100% - 30px);
display: flex;
flex-flow: row wrap-reverse;
justify-content: center;
align-items: stretch;
padding: var(--con-p);][comment]-- Header + Text --[/comment][border=0;
box-sizing: border-box;
flex: 3 1 320px;
padding: 0;][comment]-- Header --[/comment][border=0;
position: relative;
margin-top: var(--b-w);
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
border-top-left-radius: var(--b-r);
border-bottom-left-radius: var(--b-r);
background: var(--accent-2);
padding: var(--head-p) var(--title-p);
overflow: hidden;][comment]-- Header Gradient --[/comment][border=0;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
opacity: var(--grad-o);
box-sizing: border-box;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--accent) -80%, rgba(0, 0, 0, 0), var(--accent));
padding: 0;
z-index: 1;][/border][comment]-- Header Text --[/comment][border=0;
padding: 0;
color: var(--outline);
font-size: var(--head-f-s);
font-family: var(--title-f);
z-index: 2;]ONE WHO PONDERS THE DUSK[/border][/border][comment]-- Text --[/comment][border=0;
box-sizing: border-box;
margin: var(--con-p) var(--con-p) 0 0;
padding: 0;][comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ALIAS[/border] Sundown [fa]fa-solid fa-sun-haze[/fa]
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ROLE[/border] Core
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]RELATIONSHIP[/border]
Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Ultricies lacus sed turpis tincidunt id aliquet risus. Pretium viverra suspendisse potenti nullam ac. Faucibus scelerisque eleifend donec pretium vulputate sapien nec. Ipsum suspendisse ultrices gravida dictum fusce ut.
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ARTIST[/border] Eliot Baum[/border][/border][comment]-- Header + Text End --[/comment][comment]-- Image --[/comment][border=0;
box-sizing: border-box;
flex: 1 1 160px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
max-width: 240px;
min-height: 180px;
border-radius: var(--b-r);
background: var(--outline);
padding: 0;][border=0;
box-sizing: border-box;
width: calc(100% - (2 * var(--b-w)));
height: calc(100% - (2 * var(--b-w)));
border-radius: var(--b-r);
background: linear-gradient(rgba(0, 0, 0, 0) 70%, var(--accent)), var(--img-3);
padding: 0;][/border][/border][/border][comment]
-- Header + Text + Image 2 End --[/comment][comment]
-- Image + Header + Text 3 --[/comment][border=0;
box-sizing: border-box;
width: calc(100% - 30px);
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: stretch;
padding: var(--con-p);][comment]-- Image --[/comment][border=0;
box-sizing: border-box;
flex: 1 1 160px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
max-width: 240px;
min-height: 180px;
border-radius: var(--b-r);
background: var(--outline);
padding: 0;][border=0;
box-sizing: border-box;
width: calc(100% - (2 * var(--b-w)));
height: calc(100% - (2 * var(--b-w)));
border-radius: var(--b-r);
background: linear-gradient(rgba(0, 0, 0, 0) 70%, var(--accent)), var(--img-4);
padding: 0;][/border][/border][comment]-- Header + Text --[/comment][border=0;
box-sizing: border-box;
flex: 3 1 320px;
padding: 0;][comment]-- Header --[/comment][border=0;
position: relative;
margin-top: var(--b-w);
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
border-top-right-radius: var(--b-r);
border-bottom-right-radius: var(--b-r);
background: var(--accent-2);
padding: var(--head-p) var(--title-p);
overflow: hidden;][comment]-- Header Gradient --[/comment][border=0;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
opacity: var(--grad-o);
box-sizing: border-box;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--accent), rgba(0, 0, 0, 0), var(--accent) 180%);
padding: 0;
z-index: 1;][/border][comment]-- Header Text --[/comment][border=0;
padding: 0;
color: var(--outline);
font-size: var(--head-f-s);
font-family: var(--title-f);
z-index: 2;]ONE WHO WALKS AMONG CLOUDS[/border][/border][comment]-- Text --[/comment][border=0;
box-sizing: border-box;
margin: var(--con-p) 0 0 var(--con-p);
padding: 0;][comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ALIAS[/border] Nimbus [fa]fa-solid fa-cloud[/fa]
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ROLE[/border] Step
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]RELATIONSHIP[/border]
Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Ultricies lacus sed turpis tincidunt id aliquet risus. Pretium viverra suspendisse potenti nullam ac. Faucibus scelerisque eleifend donec pretium vulputate sapien nec. Ipsum suspendisse ultrices gravida dictum fusce ut.
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ARTIST[/border] Eliot Baum[/border][/border][/border][comment]
-- Image + Header + Text 3 End --[/comment][/border][/border][comment]
-- Content Box End --[/comment][/border][/tab]
[tab=0][comment]
------------ Tab 4 Body ------------
[/comment][border=0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: var(--h);
box-sizing: border-box;
padding: 0;
pointer-events: none;][comment]
-- Icon --[/comment][border=0;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
width: calc(var(--bg-w));
height: calc(var(--bg-w));
color: var(--accent);
font-size: var(--icon-f-s);
padding: 0;][fa]fa-solid fa-key-skeleton[/fa][/border][comment]
-- Icon End --[/comment][comment]
-- Title --[/comment][border=0;
box-sizing: border-box;
position: absolute;
top: calc((var(--bg-w) - var(--bar-w)) / 2);
left: calc(var(--bg-w));
display: flex;
flex-flow: row nowrap;
align-items: center;
width: calc(100% - var(--bg-w));
height: var(--bar-w);
padding: 0 var(--title-p);
color: var(--outline);
font-size: var(--title-f-s);
font-family: var(--title-f);
line-height: 1;
pointer-events: auto;]SIT DOLOR[/border][comment]
-- Title End --[/comment][comment]
-- Tabs Bar --[/comment][border=0;
box-sizing: border-box;
position: absolute;
top: calc(var(--bg-w));
left: calc((var(--bg-w) - var(--bar-w)) / 2);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
padding: 0;
width: var(--bar-w);
height: calc(100% - var(--bg-w));][comment]-- Tabs Gradient --[/comment][border=0;
opacity: var(--grad-o);
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-bottom-right-radius: var(--b-r);
border-bottom-left-radius: var(--b-r);
background: linear-gradient(var(--accent) 10%, rgba(0, 0, 0, 0) 70%, var(--accent));
padding: 0;][/border][comment]-- Tabs --[/comment][border=0;
position: relative;
box-sizing: border-box;
width: 100%;
height: var(--tabs-h);
color: var(--accent);
font-size: var(--tab-f-s);
text-align: center;
padding: 0;][comment]
-- Tab Border --[/comment][border=0;
position: absolute;
top: 180px;
left: calc(0px - var(--b-w));
box-sizing: border-box;
border-radius: var(--b-r);
width: calc(var(--bar-w) + (2 * var(--b-w)));
height: calc(var(--bar-w) + (2 * var(--b-w)));
border: var(--b-w) solid var(--base);
padding: 0;][/border][comment]-- Tab Border End --[/comment][comment]
-- Tab Covers --[/comment][border=0;
position: absolute;
top: 0px;
width: 100%;
padding: 0;][fa]fa-solid fa-user[/fa][/border][border=0;
position: absolute;
top: 65px;
width: 100%;
padding: 0;][fa]fa-solid fa-clock[/fa][/border][border=0;
position: absolute;
top: 130px;
width: 100%;
padding: 0;][fa]fa-solid fa-users[/fa][/border][border=0;
position: absolute;
top: 195px;
width: 100%;
color: var(--outline);
font-size: 1.5em;
--fa-fade-opacity: 0.5;
--fa-animation-duration: 1.6s;
padding: 0;][fa]fa-solid fa-list fa-fade[/fa][/border][/border][/border][comment]
-- Tabs Bar End --[/comment][comment]
-- Content Box --[/comment][border=0;
box-sizing: border-box;
position: absolute;
top: calc(var(--bg-w));
left: calc(var(--bg-w));
width: calc(100% - var(--bg-w));
height: calc(100% - var(--bg-w));
border-radius: var(--b-r);
background: var(--base);
padding: 0;
color: var(--con-c);
font-size: var(--con-f-s);
font-family: var(--con-f);
line-height: 1.5;
overflow: hidden;
pointer-events: auto;][comment]-- Hidden Scroll --[/comment][border=0;
box-sizing: border-box;
width: calc(100% + 30px);
height: 100%;
padding: 0;
overflow: auto;][comment]-- Text --[/comment][border=0;
box-sizing: border-box;
width: calc(100% - 30px);
padding: var(--con-p);][comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]QUOTES[/border]
"There is a moon sole in the blue night."
"Ultricies lacus sed turpis tincidunt id aliquet risus. Pretium viverra suspendisse potenti nullam ac."
"In tellus integer feugiat scelerisque varius morbi enim nunc faucibus."
[comment]-- Divider --[/comment][border=0; padding: 0;
position: relative;
top: -4px;
display: inline-block;
width: 100%;
height: var(--div-h);
border-radius: var(--b-r);
background: var(--accent-2);][/border][comment]-- Divider End --[/comment]
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]MUSIC[/border] [MEDIA=youtube]4kVO6PQyVhY[/MEDIA]
[comment]-- Divider --[/comment][border=0; padding: 0;
position: relative;
top: -4px;
display: inline-block;
width: 100%;
height: var(--div-h);
border-radius: var(--b-r);
background: var(--accent-2);][/border][comment]-- Divider End --[/comment]
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]MISC[/border] Lorem ipsum dolor sit amet elit, sed do eiusmod aliqua.[/border][comment]-- Text End --[/comment][/border][/border][comment]
-- Content Box End --[/comment][/border][/tab]
[/tabs][/border][comment]
-- Actual Tabs End --[/comment][/border][comment]
-- Main End --[/comment][comment]-- Scroll Note --[/comment][border=0;
padding: 0;
color: var(--base);
font-family: var(--con-f);
text-align: right;
line-height: 1.8;]Scroll [fa]fa-solid fa-arrow-down[/fa][/border][/border]
Last edited:
Little_Chaos
Dead Moon
I love this code! e_e!
Ambiloquous
Graphic Fanatic
Thank you!
Ayama
Enthusiast
Omg I was going through the thread looking for codes to tear into tiny incomprehensible pieces decompose and analyze, and when I came across the Login Error one I laughed out loud for nearly a full minute x.x
Your eye for design and coding skills are undeniable, but that sense of humor is SUPERLATIVE xD
Your eye for design and coding skills are undeniable, but that sense of humor is SUPERLATIVE xD
Ambiloquous
Graphic Fanatic
I’m glad my angry humour made you laugh. It’s the first time someone has told me my sense of comedy beats out my coding skills.
Ayama
Enthusiast
Haha more like the exquisite cherry on top ;P
Yonsisac
Local-super-mega-Potassium-cyborg Ninja!
I just wanted to say amazing work!
Love them!
Love them!
Ambiloquous
Graphic Fanatic
No, love you. Jk, thank you!
CabbageAngel
these greens eat y o u
Literally these are all insane I can't just go without leaving a comment they're all so fun and creative and beautiful!!!
Ambiloquous
Graphic Fanatic
Thank you!!
ManicMuse
I ax-o-lotl questions.
I just wanted to share a little post that your coding gave life too. Thank you for sharing this stuff. It really adds so much to the site.
Silence enveloped the space.
Draped in the pleasant company of darkness.
A large plastic mixing bowl with books stacked up on either side sat ten feet from a slumbering Isabella Chase. There she lay on the cold thin sheet metal with nothing but a light blanket and pillow for comfort. The screen on her phone lit up, reflecting the time of almost 5:30 PM.
Further down the duct, a soft hum started. Then vibration as the fan on the condenser kicked on. A mighty cool wind ripped away Izzy's blanket as she groaned and rolled over quickly, grabbing her phone. Flicking the phone unlocked, she tapped open the smart app and selected the bubble, 'Daddy's Office.' The air system shutting down was a welcome sound as the howling winds stopped.
This time the silence did not return. Further down the metal boxy maze was the soft pattering of tiny paws. Isabella's pupils dilated wide in the darkness as she slowly rolled from her back onto her belly. The little rustling of life moved closer. Isabella nearly quivered with excitement.
'Could it be?'
-Ping Bing Bong- -Ping Bing Bong- Startled, Izzy dropped her phone. The phone vibrated across the thin metal, causing it to only echo louder.
'Shiiiit'
Slapping both hands over the phone, she fumbled with the buttons and managed to answer.
"Iiiiiizzy, why are you still at my office? You said this would be a simple job," Richard Chase sounded a bit concerned, if not annoyed.
"Dad now is not a great time. I'll call you back. Byeee." Izzy smashed the END button just as something at the corner of the corridor caught her eye. There in the dark, she could just make out a tiny set of whiskers.
Watching the small nose twitch, she leaned toward the plastic bowl, still eight feet away, and blew softly. The set of whiskers and pink nose twitched faster. Then a paw came into view. Izzy turned into a statue, except for her ears that honed in on the sound of the tiny creature emerging.
The plastic bowl was lubed with vegetable oil along the side and a prize-winning scoop of peanut butter in the middle.
Pitter-patter. Pitter-patter.
'YES.' -Ping Bing Bong- 'NO.'
Izzy smashed her phone into the pillow she had brought up with her. Folding it in half, she pressed down like she was hoping that the cell would make its last beep. Then the chubby teddy bear hamster turned to inspect the noise with one paw in the air as if already ready to flee.
"Bee Hawww don't you dare run."
The plump little rodent was off, darting back the way it came. Izzy had waited all night for this little brat. He was not getting away, AGAIN. Crawling like a mad woman, Izzy pursued.
"Bee Hawww, get back here!"
The hamster was fast, which would have been surprising for how fat he looked, though 90% of him was long cream fur. It looked as though he was going to get away and disappear down the maze of commercial venting until he made a sudden right, heading for the air return. The air return that Izzy had pulled the filter out of last night. This was an issue because tiny hamsters did not do rather well with twelve-foot falls.
Out of desperation, Izzy dove toward the hamster with arms outstretched, sliding across the thin, warping metal. Hearing a loud crash of metal sheets popping from behind, the hamster's butt began to shake faster as it tried to run from the booming noises.
The cell phone echoed in duct from where it had been left behind slightly muted by the crackling of metal. -Ping Bing Bong- It was only then that Izzy remembered the laws of gravity. Outstretched fingers plucked at a ball of fluff as the sound of snapping plastic joined in on the smashing metal. Down they went, tumbling like Alice down the hole. Only unlike Alice, Izzy had a self-righting reflex. Plastic bits of the industrial air return crashed down as Isabella swung around and landed crouching on her feet, tail erect and flickering at the tip. Carefully unfurling her hands, a tiny little fuzzy head with rounded ears popped up.
A light fixture, the air return, and part of the ceiling tiles hung precariously above her. The dust settled as a now almost ominous sound continued from the opened ceiling.
-Ping Bing Bong-
"This is going to be a long night, Bee Hawww."
Izzy
NAME:
Isabella Chase (Izzy)
GENDER:
Female
AGE:
20
HOBBIES:
Climbing, Lockpicking, Hacking security systems
DETAILS:
@: N/A Nearby: ---Mood: Crafty
POST:
Silence enveloped the space.
Draped in the pleasant company of darkness.
A large plastic mixing bowl with books stacked up on either side sat ten feet from a slumbering Isabella Chase. There she lay on the cold thin sheet metal with nothing but a light blanket and pillow for comfort. The screen on her phone lit up, reflecting the time of almost 5:30 PM.
Further down the duct, a soft hum started. Then vibration as the fan on the condenser kicked on. A mighty cool wind ripped away Izzy's blanket as she groaned and rolled over quickly, grabbing her phone. Flicking the phone unlocked, she tapped open the smart app and selected the bubble, 'Daddy's Office.' The air system shutting down was a welcome sound as the howling winds stopped.
This time the silence did not return. Further down the metal boxy maze was the soft pattering of tiny paws. Isabella's pupils dilated wide in the darkness as she slowly rolled from her back onto her belly. The little rustling of life moved closer. Isabella nearly quivered with excitement.
'Could it be?'
-Ping Bing Bong- -Ping Bing Bong- Startled, Izzy dropped her phone. The phone vibrated across the thin metal, causing it to only echo louder.
'Shiiiit'
Slapping both hands over the phone, she fumbled with the buttons and managed to answer.
"Iiiiiizzy, why are you still at my office? You said this would be a simple job," Richard Chase sounded a bit concerned, if not annoyed.
"Dad now is not a great time. I'll call you back. Byeee." Izzy smashed the END button just as something at the corner of the corridor caught her eye. There in the dark, she could just make out a tiny set of whiskers.
Watching the small nose twitch, she leaned toward the plastic bowl, still eight feet away, and blew softly. The set of whiskers and pink nose twitched faster. Then a paw came into view. Izzy turned into a statue, except for her ears that honed in on the sound of the tiny creature emerging.
The plastic bowl was lubed with vegetable oil along the side and a prize-winning scoop of peanut butter in the middle.
Pitter-patter. Pitter-patter.
'YES.' -Ping Bing Bong- 'NO.'
Izzy smashed her phone into the pillow she had brought up with her. Folding it in half, she pressed down like she was hoping that the cell would make its last beep. Then the chubby teddy bear hamster turned to inspect the noise with one paw in the air as if already ready to flee.
"Bee Hawww don't you dare run."
The plump little rodent was off, darting back the way it came. Izzy had waited all night for this little brat. He was not getting away, AGAIN. Crawling like a mad woman, Izzy pursued.
"Bee Hawww, get back here!"
The hamster was fast, which would have been surprising for how fat he looked, though 90% of him was long cream fur. It looked as though he was going to get away and disappear down the maze of commercial venting until he made a sudden right, heading for the air return. The air return that Izzy had pulled the filter out of last night. This was an issue because tiny hamsters did not do rather well with twelve-foot falls.
Out of desperation, Izzy dove toward the hamster with arms outstretched, sliding across the thin, warping metal. Hearing a loud crash of metal sheets popping from behind, the hamster's butt began to shake faster as it tried to run from the booming noises.
The cell phone echoed in duct from where it had been left behind slightly muted by the crackling of metal. -Ping Bing Bong- It was only then that Izzy remembered the laws of gravity. Outstretched fingers plucked at a ball of fluff as the sound of snapping plastic joined in on the smashing metal. Down they went, tumbling like Alice down the hole. Only unlike Alice, Izzy had a self-righting reflex. Plastic bits of the industrial air return crashed down as Isabella swung around and landed crouching on her feet, tail erect and flickering at the tip. Carefully unfurling her hands, a tiny little fuzzy head with rounded ears popped up.
A light fixture, the air return, and part of the ceiling tiles hung precariously above her. The dust settled as a now almost ominous sound continued from the opened ceiling.
-Ping Bing Bong-
"This is going to be a long night, Bee Hawww."
--
EXTRA:
N/A
Ambiloquous
Graphic Fanatic
Hehe, it always makes me happy to see what people use my coding for, so thank you for sharing!
Ambiloquous
Graphic Fanatic
Character Cards
Card(?) accordion.I finished this a while back but got lazy because I didn't want to comment and so only posted now. I didn't implement any scroll feature so you have to be careful with how much text you use.
Originally, I created this with those GMs who like to put little character summaries at the top of CS threads in mind, but now I realize that there probably aren't that many of those, and this'll likely be used as a placeholder if at all.
Wrap code in [center] tag to center, and wrap it around multiple without hitting newline to center a group (like the multi-card example spoiler).
Accordion
No Scroll
Code:
[comment]Fonts -->[font=Sarala][font=Kolker Brush]:S[/font][/font][/comment][border=0;
/* Probably best if you don't change anything I haven't commented next to */
margin-right: 5px;
display: inline-block;
box-sizing: border-box;
padding: 0;
overflow: hidden;
--h: 250px; /* Height and width for background */
--w: calc(var(--h) + var(--gap));
--gap: 12px; /* Subtitle overflow, i.e., the amount the subtitle sticks past the background */
/* Background Variables */
--g-c: rgba(0, 0, 0, 0.5); /* Gradient base colour */
/* Image: first two percentages are x% y% position / last percentage is image size */
--img: url('https://i.pinimg.com/originals/80/cc/de/80ccdedb60dfd52638f80e6ff96bcc81.jpg') 50% 20% / 200%;
/* Icon Variables */
--i-c: #f56423; /* Colour */
--i-s: 3em; /* Size (can be decimal) */
--i-o: 0.8; /* Opacity, between 0 and 1 */
/* Title Variables */
--t-c: #fbfdf5; /* Text colour */
--t-f-s: 4.9em; /* Font size (can be decimal) */
--t-f: 'Kolker Brush', cursive; /* Font family (change font tag above if you change this) */
--t-l-h: 1; /* Line height, change to change spacing above + below title */
/* Subtitle Variables */
--s-p: 2px 5px; /* Padding: top-bottom left-right */
--s-b-r: 3px; /* Border radius */
--s-bg: #f56423; /* Background colour */
/* Subtitle Text Variables */
--s-c: #340d22; /* Text colour */
--s-f-s: 1.2em; /* Font size (can be decimal) */
--s-f: 'Sarala', sans-serif; /* Font family (change font tag above if you change this) */
/* Body Variables */
--b-c: #eef0e9; /* Text colour */
--b-f-s: 1.1em; /* Font size (can be decimal) */
][comment]
-- Note --[/comment][border=0;
padding: 0;
font-size: 0.8em;
font-family: var(--s-f);
opacity: 0.8;]Click Below[/border][comment]
-- Main Container --[/comment][border=0;
visibility: hidden;
position: relative;
box-sizing: border-box;
max-width: var(--w);
height: var(--h);
display: flex;
flex-flow: row nowrap;
align-items: center;
padding: 0;
overflow: hidden;][comment]
-- Image --[/comment][border=0;
visibility: visible;
position: absolute;
top: 0;
left: 0;
padding: 0;
width: calc(100% - var(--gap));
height: var(--h);
background: var(--img);][/border][accordion=100%]
{slide=[comment]
-- Content Container --[/comment][border=0;
margin: 0 -7px;
box-sizing: border-box;
width: var(--w);
height: calc(var(--h) * 3);
padding: 0;
font-variant: normal;
font-weight: normal;][comment]
-- First Page --[/comment][border=0;
visibility: visible;
position: relative;
top: calc(var(--h) + 1px);
left: 0;
width: 100%;
height: var(--h);
background: linear-gradient(rgba(0, 0, 0, 0) 70%, var(--g-c));
background-size: calc(100% - var(--gap)) 100%;
background-repeat: no-repeat;
padding: 0;
display: flex;
flex-flow: column nowrap;
justify-content: flex-end;
align-items: flex-end;][comment]
-- Icon --[/comment][border=0;
position: absolute;
top: 8px;
left: 12px;
padding: 0;
color: var(--i-c);
font-size: var(--i-s);
opacity: var(--i-o);][fa]fas fa-feather[/fa][/border][comment]
-- Subtitle --[/comment][border=0;
box-sizing: border-box;
padding: var(--s-p);
border-radius: var(--s-b-r);
background: var(--s-bg);
color: var(--s-c);
font-size: var(--s-f-s);
font-family: var(--s-f);]Troubadour of Yonai[/border][comment]
-- Title --[/comment][border=0;
box-sizing: border-box;
width: 100%;
padding: 0 calc(var(--gap) + 10px) 5px 10px;
color: var(--t-c);
font-size: var(--t-f-s);
font-family: var(--t-f);
line-height: var(--t-l-h);
text-align: end;]Koki Najin-Oe[/border][/border][comment]
-- Second Page --[/comment][border=0;
visibility: visible;
position: relative;
top: var(--h);
left: 0;
width: 100%;
height: var(--h);
padding: 0;][comment]
-- Text Container --[/comment][border=0;
margin: 0 15px;
box-sizing: border-box;
width: calc(100% - var(--gap) - 30px);
height: var(--h);
padding: 15px 10px;
background: linear-gradient(rgba(0, 0, 0, 0) 2%, var(--g-c) 15% 85%, rgba(0, 0, 0, 0) 98%);
color: var(--b-c);
font-size: var(--b-f-s);
font-family: var(--s-f);
display: flex;
flex-flow: row nowrap;
align-items: center;]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.[/border][/border][/border]}[comment]
-- Placeholder --[/comment][border=0;
margin: -6px 0;
padding: 0;
height: calc(var(--h) * 2);][/border]{/slide}
[/accordion][/border][comment]
-- Note --[/comment][border=0;
padding: 0;
font-size: 0.8em;
font-family: var(--s-f);
opacity: 0.8;]Artist — GUWEIZ[/border][/border]
Last edited:
Songstress
Divine Vocalist
AMI MARRY ME UR SO GOODCytus IIFirst is a character display based off of the character selection screen of Cytus II. Second is a D&D CS based off the interface after one chooses a character.
The reason why I copied Cytus II is as summarized: long car trip, no data, much play, brain lightbulb. It's also the one genre of games that I don't suck at — that one genre being rhythm games. The reason why the second code is a dice sheet is because the Cytus II interface suits stats, and the only thing I could relate to stats in a RP setting was TTRPGs. That and I've never seen anyone make a full layout for one of them (and now I understand why). It's D&D because D&D is the only TTRPG I can say more than one sentence about, but after I started coding the components, I realized that I didn't actually remember much of it. This led to a lot of web surfing, and I even ended up making an account on D&DBeyond for some reason.
Second code was Pain™. Layouts made using BBCode and CSS injection is agony — especially when it's something like a TTRPG sheet and your coding habits are like mine. In other words, using a new line for every CSS property stops being clean after a certain point, and I'd hit it long ago.This code actually scrolls for 20+ seconds. It hurts. Ctrl+F saves lives. Also, if you're wondering why the sheet starts looking more ugly the more you scroll, it's because my motivation died on the second "page", which ended up not really being one because scroll-snap makes mobile reading frustrating.
Honestly, I don't even know if this is a useful layout for D&D, but I spent way too much effort in this to not post so... here it is. Please give me validation.
If someone actually plans to use it (imagine someone using it, hah), I could probably make a version with a spell section.
Edit: This may have no spacing between elements if you're on an older version of any browser (since they don't support gap), which I didn't realize until now.
CharactersScroll
Code:[font=Electrolize][border=transparent; padding: 0px; /* Probably best if you don't change anything I haven't commented next to */ --w: 1100px; /* Max width */ --p: 30px; --bg: radial-gradient(circle at 50%, rgba(140, 140, 140, 0.8), rgba(var(--color-b), 0.9)); --b-s: 0px -40px rgba(60, 60, 60, 0.3); /* Main colours, use RGB numbers */ --color-b: 0, 0, 0; /* Background colour */ --color-a: 255, 255, 230; /* Text and accent colour */ --title-f: hue-rotate(210deg); /* Title hue, change number for a different colour */ --icon-m: 38px; --icon-w: 155px; --icon-h: min(70vh, 400px); --icon-b: 10px; --icon-g: linear-gradient(rgba(var(--color-b), 0.6), rgba(0, 0, 0, 0) 40%); --head-p: 12px 0px 6px 0px; --head-s: 1.45em; --bar-h: 3px; --lv-m: 2px; --lv-b: 1px; --lv-p: 1px 8px 1px 8px; --lv-s: 0.8em; --lv-b-s: 0px 4px rgba(var(--color-a), 0.3); --lv-n-m: 4px; --lv-n-s: 1.2em; /* Icon variables below in order are: -- XP bar colour -- XP bar percentage -- XP bar gradient; best not to touch this -- Image URL, change % (x-axis) and px or vh (y-axis) before / to shift image position in icon, change % after / to change image size in icon */ /* Icon 1 variables */ --color-1: #5abf97; --bar-p-1: 35%; --bar-g-1: linear-gradient(to right, var(--color-1) var(--bar-p-1), rgba(var(--color-a), 0.3) var(--bar-p-1)); --img-1: url('https://vignette.wikia.nocookie.net/cytus/images/3/35/Paff.png/revision/latest?cb=20180121100521') no-repeat 35% 20px / 215%; /* Icon 2 variables */ --color-2: #c481a1; --bar-p-2: 25%; --bar-g-2: linear-gradient(to right, var(--color-2) var(--bar-p-2), rgba(var(--color-a), 0.3) var(--bar-p-2)); --img-2: url('https://vignette.wikia.nocookie.net/cytus/images/f/fd/Neko.png/revision/latest?cb=20180121105710') no-repeat 50% min(3.7vh, 30px) / 190%; /* Icon 3 variables */ --color-3: #83b5be; --bar-p-3: 18%; --bar-g-3: linear-gradient(to right, var(--color-3) var(--bar-p-3), rgba(var(--color-a), 0.3) var(--bar-p-3)); --img-3: url('https://vignette.wikia.nocookie.net/cytus/images/f/f3/ROBO_Head.png/revision/latest?cb=20180121105711') no-repeat 50% 35px / 220%; /* Icon 4 variables */ --color-4: #ba1d1e; --bar-p-4: 64%; --bar-g-4: linear-gradient(to right, var(--color-4) var(--bar-p-4), rgba(var(--color-a), 0.3) var(--bar-p-4)); --img-4: url('https://vignette.wikia.nocookie.net/cytus/images/2/28/Ivy001_-05621.png/revision/latest?cb=20190113095915') no-repeat 45% 10px / 190%; /* Icon 5 variables */ --color-5: #a0505e; --bar-p-5: 50%; --bar-g-5: linear-gradient(to right, var(--color-5) var(--bar-p-5), rgba(var(--color-a), 0.3) var(--bar-p-5)); --img-5: url('https://vignette.wikia.nocookie.net/cytus/images/3/3e/Crystal_PuNK2.png/revision/latest?cb=20190904225142') no-repeat 48% 10px / 280%; /* Icon 6 variables */ --color-6: #82ac35; --bar-p-6: 40%; --bar-g-6: linear-gradient(to right, var(--color-6) var(--bar-p-6), rgba(var(--color-a), 0.3) var(--bar-p-6)); --img-6: url('https://vignette.wikia.nocookie.net/cytus/images/2/2e/BoBo.png/revision/latest?cb=20200819113732') no-repeat 5% 0px / 210%; /* Icon 7 variables */ --color-7: #c79b4e; --bar-p-7: 78%; --bar-g-7: linear-gradient(to right, var(--color-7) var(--bar-p-7), rgba(var(--color-a), 0.3) var(--bar-p-7)); --img-7: url('https://i.imgur.com/wHbPkah.png') no-repeat 30% 15px / 240%;][comment]-- Title --[/comment][border=transparent; position: relative; margin: auto; box-sizing: border-box; max-width: var(--w); padding: 0px; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; z-index: 2;][border=transparent; margin-left: calc(var(--p) / 2); margin-right: var(--lv-n-m); padding: 0px; font-size: 1.8em; line-height: 1.5; filter: var(--title-f);]Characters[/border][border=transparent; margin-left: var(--lv-n-m); border-radius: var(--lv-b); background: rgb(var(--color-a)); padding: var(--lv-p); color: rgba(var(--color-b), 0.8); font-size: var(--lv-s); line-height: 1; box-shadow: var(--lv-b-s);]Scroll [fa]fas fa-caret-right[/fa][/border][/border][comment]-- Profile Container --[/comment][border=transparent; margin: auto; box-sizing: border-box; max-width: var(--w); height: calc(var(--icon-h) + (2 * var(--p))); padding: var(--p) 0px var(--p) 0px; border-radius: var(--icon-b); background: var(--bg); box-shadow: var(--b-s); overflow: hidden;][comment]-- Hidden Scroll --[/comment][border=transparent; box-sizing: border-box; width: 100%; height: calc(var(--icon-h) + (2 * var(--p))); padding: 0px; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: flex-start; overflow-x: auto; overflow-y: hidden;] [comment]-- Icon 1 --[/comment][border=transparent; flex: 0 0 var(--icon-w); margin-left: var(--icon-m); box-sizing: border-box; height: var(--icon-h); border-radius: var(--icon-b); background: var(--icon-g), var(--img-1), rgb(var(--color-b)); padding: 0px; display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: center;][comment]-- Header --[/comment][border=transparent; box-sizing: border-box; padding: var(--head-p); color: rgb(var(--color-a)); font-size: var(--head-s); font-kerning: normal; line-height: 1; text-align: center;]PAFF[/border][comment]-- XP Bar --[/comment][border=transparent; width: 100%; height: var(--bar-h); background: var(--bar-g-1); padding: 0px;][/border][comment]-- Lv --[/comment][border=transparent; margin-top: var(--lv-m); padding: 0px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center;][comment]-- Lv Box --[/comment][border=transparent; border-radius: var(--lv-b); background: rgb(var(--color-a)); padding: var(--lv-p); color: rgba(var(--color-b), 0.8); font-size: var(--lv-s); line-height: 1; box-shadow: var(--lv-b-s);]Lv[/border][comment]-- Lv Number --[/comment][border=transparent; margin-left: var(--lv-n-m); padding: 0px; color: rgb(var(--color-a)); font-size: var(--lv-n-s); font-variant: normal; font-weight: normal;]7[/border][/border][/border] [comment]-- Icon 2 --[/comment][border=transparent; flex: 0 0 var(--icon-w); margin-left: var(--icon-m); box-sizing: border-box; height: var(--icon-h); border-radius: var(--icon-b); background: var(--icon-g), var(--img-2), rgb(var(--color-b)); padding: 0px; display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: center;][comment]-- Header --[/comment][border=transparent; box-sizing: border-box; padding: var(--head-p); color: rgb(var(--color-a)); font-size: var(--head-s); font-kerning: normal; line-height: 1; text-align: center;]NEKO[/border][comment]-- XP Bar --[/comment][border=transparent; width: 100%; height: var(--bar-h); background: var(--bar-g-2); padding: 0px;][/border][comment]-- Lv --[/comment][border=transparent; margin-top: var(--lv-m); padding: 0px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center;][comment]-- Lv Box --[/comment][border=transparent; border-radius: var(--lv-b); background: rgb(var(--color-a)); padding: var(--lv-p); color: rgba(var(--color-b), 0.8); font-size: var(--lv-s); line-height: 1; box-shadow: var(--lv-b-s);]Lv[/border][comment]-- Lv Number --[/comment][border=transparent; margin-left: var(--lv-n-m); padding: 0px; color: rgb(var(--color-a)); font-size: var(--lv-n-s); font-variant: normal; font-weight: normal;]15[/border][/border][/border] [comment]-- Icon 3 --[/comment][border=transparent; flex: 0 0 var(--icon-w); margin-left: var(--icon-m); box-sizing: border-box; height: var(--icon-h); border-radius: var(--icon-b); background: var(--icon-g), var(--img-3), rgb(var(--color-b)); padding: 0px; display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: center;][comment]-- Header --[/comment][border=transparent; box-sizing: border-box; padding: var(--head-p); color: rgb(var(--color-a)); font-size: var(--head-s); font-kerning: normal; line-height: 1; text-align: center;]ROBO_Head[/border][comment]-- XP Bar --[/comment][border=transparent; width: 100%; height: var(--bar-h); background: var(--bar-g-3); padding: 0px;][/border][comment]-- Lv --[/comment][border=transparent; margin-top: var(--lv-m); padding: 0px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center;][comment]-- Lv Box --[/comment][border=transparent; border-radius: var(--lv-b); background: rgb(var(--color-a)); padding: var(--lv-p); color: rgba(var(--color-b), 0.8); font-size: var(--lv-s); line-height: 1; box-shadow: var(--lv-b-s);]Lv[/border][comment]-- Lv Number --[/comment][border=transparent; margin-left: var(--lv-n-m); padding: 0px; color: rgb(var(--color-a)); font-size: var(--lv-n-s); font-variant: normal; font-weight: normal;]8[/border][/border][/border] [comment]-- Icon 4 --[/comment][border=transparent; flex: 0 0 var(--icon-w); margin-left: var(--icon-m); box-sizing: border-box; height: var(--icon-h); border-radius: var(--icon-b); background: var(--icon-g), var(--img-4), rgb(var(--color-b)); padding: 0px; display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: center;][comment]-- Header --[/comment][border=transparent; box-sizing: border-box; padding: var(--head-p); color: rgb(var(--color-a)); font-size: var(--head-s); font-kerning: normal; line-height: 1; text-align: center;]Ivy[/border][comment]-- XP Bar --[/comment][border=transparent; width: 100%; height: var(--bar-h); background: var(--bar-g-4); padding: 0px;][/border][comment]-- Lv --[/comment][border=transparent; margin-top: var(--lv-m); padding: 0px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center;][comment]-- Lv Box --[/comment][border=transparent; border-radius: var(--lv-b); background: rgb(var(--color-a)); padding: var(--lv-p); color: rgba(var(--color-b), 0.8); font-size: var(--lv-s); line-height: 1; box-shadow: var(--lv-b-s);]Lv[/border][comment]-- Lv Number --[/comment][border=transparent; margin-left: var(--lv-n-m); padding: 0px; color: rgb(var(--color-a)); font-size: var(--lv-n-s); font-variant: normal; font-weight: normal;]13[/border][/border][/border] [comment]-- Icon 5 --[/comment][border=transparent; flex: 0 0 var(--icon-w); margin-left: var(--icon-m); box-sizing: border-box; height: var(--icon-h); border-radius: var(--icon-b); background: var(--icon-g), var(--img-5), rgb(var(--color-b)); padding: 0px; display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: center;][comment]-- Header --[/comment][border=transparent; box-sizing: border-box; padding: var(--head-p); color: rgb(var(--color-a)); font-size: var(--head-s); font-kerning: normal; line-height: 1; text-align: center;]Crystal PuNK[/border][comment]-- XP Bar --[/comment][border=transparent; width: 100%; height: var(--bar-h); background: var(--bar-g-5); padding: 0px;][/border][comment]-- Lv --[/comment][border=transparent; margin-top: var(--lv-m); padding: 0px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center;][comment]-- Lv Box --[/comment][border=transparent; border-radius: var(--lv-b); background: rgb(var(--color-a)); padding: var(--lv-p); color: rgba(var(--color-b), 0.8); font-size: var(--lv-s); line-height: 1; box-shadow: var(--lv-b-s);]Lv[/border][comment]-- Lv Number --[/comment][border=transparent; margin-left: var(--lv-n-m); padding: 0px; color: rgb(var(--color-a)); font-size: var(--lv-n-s); font-variant: normal; font-weight: normal;]11[/border][/border][/border] [comment]-- Icon 6 --[/comment][border=transparent; flex: 0 0 var(--icon-w); margin-left: var(--icon-m); box-sizing: border-box; height: var(--icon-h); border-radius: var(--icon-b); background: var(--icon-g), var(--img-6), rgb(var(--color-b)); padding: 0px; display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: center;][comment]-- Header --[/comment][border=transparent; box-sizing: border-box; padding: var(--head-p); color: rgb(var(--color-a)); font-size: var(--head-s); font-kerning: normal; line-height: 1; text-align: center;]Bo Bo[/border][comment]-- XP Bar --[/comment][border=transparent; width: 100%; height: var(--bar-h); background: var(--bar-g-6); padding: 0px;][/border][comment]-- Lv --[/comment][border=transparent; margin-top: var(--lv-m); padding: 0px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center;][comment]-- Lv Box --[/comment][border=transparent; border-radius: var(--lv-b); background: rgb(var(--color-a)); padding: var(--lv-p); color: rgba(var(--color-b), 0.8); font-size: var(--lv-s); line-height: 1; box-shadow: var(--lv-b-s);]Lv[/border][comment]-- Lv Number --[/comment][border=transparent; margin-left: var(--lv-n-m); padding: 0px; color: rgb(var(--color-a)); font-size: var(--lv-n-s); font-variant: normal; font-weight: normal;]14[/border][/border][/border] [comment]-- Icon 7 --[/comment][border=transparent; flex: 0 0 var(--icon-w); margin-left: var(--icon-m); margin-right: var(--icon-m); box-sizing: border-box; height: var(--icon-h); border-radius: var(--icon-b); background: var(--icon-g), var(--img-7), rgb(var(--color-b)); padding: 0px; display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: center;][comment]-- Header --[/comment][border=transparent; box-sizing: border-box; padding: var(--head-p); color: rgb(var(--color-a)); font-size: var(--head-s); font-kerning: normal; line-height: 1; text-align: center;]Graff.J[/border][comment]-- XP Bar --[/comment][border=transparent; width: 100%; height: var(--bar-h); background: var(--bar-g-7); padding: 0px;][/border][comment]-- Lv --[/comment][border=transparent; margin-top: var(--lv-m); padding: 0px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center;][comment]-- Lv Box --[/comment][border=transparent; border-radius: var(--lv-b); background: rgb(var(--color-a)); padding: var(--lv-p); color: rgba(var(--color-b), 0.8); font-size: var(--lv-s); line-height: 1; box-shadow: var(--lv-b-s);]Lv[/border][comment]-- Lv Number --[/comment][border=transparent; margin-left: var(--lv-n-m); padding: 0px; color: rgb(var(--color-a)); font-size: var(--lv-n-s); font-variant: normal; font-weight: normal;]69[/border][/border][/border] [/border][/border][/border][/font]
PAFFScroll
Code:[font=Electrolize][border=transparent; padding: 0px; /* Probably best if you don't change anything I haven't commented next to */ --w: 1100px; /* Max width */ --p: min(28px, 7vw); --b-r: 10px; --bg: radial-gradient(circle at 50%, rgba(140, 140, 140, 0.8), rgba(var(--color-b), 0.9)); --b-s: 0px -40px rgba(60, 60, 60, 0.3); /* Main colours, use RGB numbers */ --color-b: 0, 0, 0; /* Background colour */ --color-a: 255, 255, 230; /* Text and accent colour */ --color-1: #5abf97; /* Accent colour, don't use just rgb numbers here, use the full rgb() if you plan to use it or stick with hex code */ --title-f: hue-rotate(210deg); /* Name title hue, change number for a different colour */ --note-m: 8px; --basic-gap: 0 8px; --img-flex: 2 1; --img-m: 40px; --img-w: 210px; --img-h: min(70vh, 450px); --img: url('https://vignette.wikia.nocookie.net/cytus/images/3/35/Paff.png/revision/latest?cb=20180121100521') no-repeat 35% 2% / cover; /* Image URL, change % (x-axis) and px or vh (y-axis) before / to shift image position in icon */ --f-s: 1em; --stats-flex: 3 1; --stats-w: 220px; --stats-b: 1px solid rgba(var(--color-a), 0.4); --stats-gap: 10px 20px; --stats-p: 12px; --class-p: 20px; --class-s: 1.6em; --lv-box-b: 1px; --lv-box-p: 1px 8px 1px 8px; --lv-box-s: 0.8em; --lv-box-b-s: 0px 4px rgba(var(--color-a), 0.3); --lv-num-m: 18px; --lv-num-s: 2.2em; --bar-gap: 6px; --bar-t-gap: 2px; --bar-c: rgba(var(--color-a), 0.75); --bar-s: 0.9em; --bar-h: 10px; --xp-per: 35%; /* EXP bar percentage */ --xp-g: linear-gradient(to right, var(--color-1) var(--xp-per), rgba(var(--color-a), 0.3) var(--xp-per)); --field-p: 6px 10px; --field-bg: rgba(var(--color-b), 0.3); --field-c: rgba(var(--color-a), 0.7); --stat-flex: 1 1 145px; --stat-w: 40px; --sav-bon-ins-flex: 1 1 120px; --pro-bon-s: 30px; --pro-s: var(--bar-h); --pro-b-r: 50%; /* Proficiency circles, change value to var(--color-1); if proficient, else put rgba(var(--color-a), 0.45); */ --pro-str: rgba(var(--color-a), 0.45); --pro-dex: var(--color-1); --pro-con: rgba(var(--color-a), 0.45); --pro-int: rgba(var(--color-a), 0.45); --pro-wis: rgba(var(--color-a), 0.45); --pro-cha: var(--color-1); --skills-gap: 2px 20px; --skill-flex: 1 1 175px; --skill-body-flex: 1 1; --skill-body-w: 175px; --skill-s: 0.98em; --skill-l-h: 1.4; /* Proficiency circles, change value to var(--color-1); if proficient, else put rgba(var(--color-a), 0.45); */ --skill-athletic: rgba(var(--color-a), 0.45); --skill-acrobat: rgba(var(--color-a), 0.45); --skill-sleight: rgba(var(--color-a), 0.45); --skill-stealth: rgba(var(--color-a), 0.45); --skill-arcana: var(--color-1); --skill-history: rgba(var(--color-a), 0.45); --skill-invest: var(--color-1); --skill-nature: rgba(var(--color-a), 0.45); --skill-religion: rgba(var(--color-a), 0.45); --skill-animal: rgba(var(--color-a), 0.45); --skill-insight: rgba(var(--color-a), 0.45); --skill-medicine: rgba(var(--color-a), 0.45); --skill-percept: rgba(var(--color-a), 0.45); --skill-survival: rgba(var(--color-a), 0.45); --skill-decept: var(--color-1); --skill-intimidat: rgba(var(--color-a), 0.45); --skill-perform: var(--color-1); --skill-persuasion: rgba(var(--color-a), 0.45); --pas-flex: 1 1 280px; --pas-t-a: left; --hp-per: 68%; /* HP percentage */ --hp-g: linear-gradient(to right, var(--color-1) var(--hp-per), rgba(var(--color-a), 0.3) var(--hp-per)); --com-atk-prof-flex: 1 1 200px; --com-atk-prof-gap: 20px; --com-flex: 1 1 100px; --box-field-l-h: 1.3; --field-block-m: 3px 0px 5px 12px; --field-block-b: 3px solid var(--color-1); --field-block-p: 0px 0px 0px 8px; --p-flex: 1 1 70px; --p-gap: 8px 12px; /* Money circles, change value to var(--color-1); if character has that piece, else put rgba(var(--color-a), 0.45); */ --cp: var(--color-1); --sp: rgba(var(--color-a), 0.45); --ep: rgba(var(--color-a), 0.45); --gp: var(--color-1); --pp: rgba(var(--color-a), 0.45); --pers-gap: 11px; --pers-field-l-h: 1.4;][comment]-- Title --[/comment][border=transparent; position: relative; margin: auto; box-sizing: border-box; max-width: var(--w); padding: 0px; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; z-index: 2;][border=transparent; margin-left: calc(var(--p) / 2); padding: 0px; font-size: 1.8em; line-height: 1.5; filter: var(--title-f);]PAFF[/border][border=transparent; margin-left: var(--note-m); border-radius: var(--lv-box-b); background: rgb(var(--color-a)); padding: var(--lv-box-p); color: rgba(var(--color-b), 0.8); font-size: var(--lv-box-s); line-height: 1; box-shadow: var(--lv-box-b-s);]Scroll [fa]fas fa-caret-down[/fa][/border][/border][comment]-- CS Container --[/comment][border=transparent; position: relative; margin: auto; box-sizing: border-box; max-width: var(--w); height: calc(var(--img-h) + (2 * var(--p))); padding: 0px var(--p); border-radius: var(--b-r); background: var(--bg); box-shadow: var(--b-s); overflow: hidden;][comment]-- Hidden Scroll --[/comment][border=transparent; position: relative; top: 0px; left: 0px; box-sizing: border-box; width: calc(100% + (2 * var(--p))); height: calc(var(--img-h) + (2 * var(--p))); padding: 0px; overflow-y: auto;][comment]-- Content Container --[/comment][border=transparent; position: relative; box-sizing: border-box; width: calc(100% - (2 * var(--p))); height: auto; padding: 0px;][comment] -- Basics Page --[/comment][border=transparent; position: relative; box-sizing: border-box; width: 100%; height: auto; padding: var(--p) 0px; display: flex; flex-flow: row wrap; justify-content: center; align-items: flex-start; gap: var(--basic-gap);][comment] -- Image --[/comment][border=transparent; flex: var(--img-flex); box-sizing: border-box; min-width: var(--img-w); height: var(--img-h); background: var(--img); padding: 0px; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center;][/border][comment] -- Overall Stats Container --[/comment][border=transparent; flex: var(--stats-flex); box-sizing: border-box; min-width: var(--stats-w); height: auto; padding: 0px; display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start;][comment] -- Class Container --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: var(--class-p) 0px; border-top: var(--stats-b); border-bottom: var(--stats-b); color: rgb(var(--color-a)); font-size: var(--class-s); text-align: center;]BARD[/border][comment] -- Lv + EXP Container --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: var(--stats-p) 0px; border-bottom: var(--stats-b); display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; gap: var(--stats-gap);][comment]-- Lv Container --[/comment][border=transparent; flex: 0 0; box-sizing: border-box; padding: 0px; color: rgb(var(--color-a)); display: flex; flex-flow: row nowrap; justify-content: center; align-items: center;][comment]-- Lv Box --[/comment][border=transparent; box-sizing: border-box; padding: var(--lv-box-p); border-radius: var(--lv-box-b); background: rgb(var(--color-a)); color: rgba(var(--color-b), 0.8); font-size: var(--lv-box-s); line-height: 1; box-shadow: var(--lv-box-b-s);]Lv[/border][comment]-- Lv Number --[/comment][border=transparent; margin-left: var(--lv-num-m); box-sizing: border-box; padding: 0px; color: rgb(var(--color-a)); font-size: var(--lv-num-s); font-variant: normal; font-weight: normal; line-height: 1;]7[/border][/border][comment]-- EXP Container --[/comment][border=transparent; flex: 1 1 50%; box-sizing: border-box; padding: 0px; display: flex; flex-flow: column nowrap; justify-content: center; align-items: flex-start; gap: var(--bar-gap);][comment]-- EXP Text --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: 0px; color: var(--bar-c); font-size: var(--bar-s); line-height: 1.3; display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; gap: var(--bar-t-gap);][border=transparent; padding: 0px;]EXP [fa]fas fa-caret-right[/fa][/border][comment]-- Points --[/comment][border=transparent; padding: 0px;]11 900/34 000[/border][/border][comment]-- EXP Bar --[/comment][border=transparent; width: 100%; box-sizing: border-box; height: var(--bar-h); padding: 0px; background: var(--xp-g);][/border][/border][/border][comment] -- Race + Alignment + Background Container --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: var(--stats-p) 0px; border-bottom: var(--stats-b); display: flex; flex-flow: row wrap; justify-content: space-between; align-items: flex-start; gap: var(--stats-gap);][comment]-- Race Container --[/comment][border=transparent; flex: 1 1; padding: 0px; display: flex; flex-flow: column nowrap; justify-content: center; align-items: flex-start; gap: var(--bar-gap);][comment]-- Race Label --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1;]Race[/border][comment]-- Race Field --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: var(--field-p); background: var(--field-bg); color: var(--field-c); font-size: var(--f-s); line-height: 1;]HUMAN[/border][/border][comment]-- Alignment Container --[/comment][border=transparent; flex: 1 1; padding: 0px; display: flex; flex-flow: column nowrap; justify-content: center; align-items: flex-start; gap: var(--bar-gap);][comment]-- Alignment Label --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1;]Alignment[/border][comment]-- Alignment Field --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: var(--field-p); background: var(--field-bg); color: var(--field-c); font-size: var(--f-s); line-height: 1;]LAWFUL NEUTRAL[/border][/border][comment]-- Background Container --[/comment][border=transparent; flex: 1 1; padding: 0px; display: flex; flex-flow: column nowrap; justify-content: center; align-items: flex-start; gap: var(--bar-gap);][comment]-- Background Label --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1;]Background[/border][comment]-- Background Field --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: var(--field-p); background: var(--field-bg); color: var(--field-c); font-size: var(--f-s); line-height: 1;]ENTERTAINER[/border][/border][/border][comment] -- Ability Score Container --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: var(--stats-p) 0px; border-bottom: var(--stats-b); display: flex; flex-flow: row wrap; justify-content: space-between; align-items: flex-start; gap: var(--stats-gap);][comment]-- STR Container --[/comment][border=transparent; flex: var(--stat-flex); box-sizing: border-box; padding: 0px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; gap: var(--bar-gap);][comment]-- STR Label --[/comment][border=transparent; flex: 0 0 var(--stat-w); box-sizing: border-box; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1;]STR[/border][comment]-- STR Field --[/comment][border=transparent; flex: 1 1; box-sizing: border-box; padding: var(--field-p); background: var(--field-bg); color: var(--field-c); font-size: var(--f-s); line-height: 1; display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; gap: var(--bar-t-gap);][comment]-- Modifier --[/comment][border=transparent; padding: 0px;]+0 [fa]fas fa-caret-right[/fa][/border][comment]-- Score --[/comment][border=transparent; padding: 0px;]10[/border][/border][/border][comment]-- DEX Container --[/comment][border=transparent; flex: var(--stat-flex); box-sizing: border-box; padding: 0px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; gap: var(--bar-gap);][comment]-- DEX Label --[/comment][border=transparent; flex: 0 0 var(--stat-w); box-sizing: border-box; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1;]DEX[/border][comment]-- DEX Field --[/comment][border=transparent; flex: 1 1; box-sizing: border-box; padding: var(--field-p); background: var(--field-bg); color: var(--field-c); font-size: var(--f-s); line-height: 1; display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; gap: var(--bar-t-gap);][comment]-- Modifier --[/comment][border=transparent; padding: 0px;]+0 [fa]fas fa-caret-right[/fa][/border][comment]-- Score --[/comment][border=transparent; padding: 0px;]10[/border][/border][/border][comment]-- CON Container --[/comment][border=transparent; flex: var(--stat-flex); box-sizing: border-box; padding: 0px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; gap: var(--bar-gap);][comment]-- CON Label --[/comment][border=transparent; flex: 0 0 var(--stat-w); box-sizing: border-box; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1;]CON[/border][comment]-- CON Field --[/comment][border=transparent; flex: 1 1; box-sizing: border-box; padding: var(--field-p); background: var(--field-bg); color: var(--field-c); font-size: var(--f-s); line-height: 1; display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; gap: var(--bar-t-gap);][comment]-- Modifier --[/comment][border=transparent; padding: 0px;]+0 [fa]fas fa-caret-right[/fa][/border][comment]-- Score --[/comment][border=transparent; padding: 0px;]10[/border][/border][/border][comment]-- INT Container --[/comment][border=transparent; flex: var(--stat-flex); box-sizing: border-box; padding: 0px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; gap: var(--bar-gap);][comment]-- INT Label --[/comment][border=transparent; flex: 0 0 var(--stat-w); box-sizing: border-box; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1;]INT[/border][comment]-- INT Field --[/comment][border=transparent; flex: 1 1; box-sizing: border-box; padding: var(--field-p); background: var(--field-bg); color: var(--field-c); font-size: var(--f-s); line-height: 1; display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; gap: var(--bar-t-gap);][comment]-- Modifier --[/comment][border=transparent; padding: 0px;]+0 [fa]fas fa-caret-right[/fa][/border][comment]-- Score --[/comment][border=transparent; padding: 0px;]10[/border][/border][/border][comment]-- WIS Container --[/comment][border=transparent; flex: var(--stat-flex); box-sizing: border-box; padding: 0px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; gap: var(--bar-gap);][comment]-- WIS Label --[/comment][border=transparent; flex: 0 0 var(--stat-w); box-sizing: border-box; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1;]WIS[/border][comment]-- WIS Field --[/comment][border=transparent; flex: 1 1; box-sizing: border-box; padding: var(--field-p); background: var(--field-bg); color: var(--field-c); font-size: var(--f-s); line-height: 1; display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; gap: var(--bar-t-gap);][comment]-- Modifier --[/comment][border=transparent; padding: 0px;]+0 [fa]fas fa-caret-right[/fa][/border][comment]-- Score --[/comment][border=transparent; padding: 0px;]10[/border][/border][/border][comment]-- CHA Container --[/comment][border=transparent; flex: var(--stat-flex); box-sizing: border-box; padding: 0px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; gap: var(--bar-gap);][comment]-- CHA Label --[/comment][border=transparent; flex: 0 0 var(--stat-w); box-sizing: border-box; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1;]CHA[/border][comment]-- CHA Field --[/comment][border=transparent; flex: 1 1; box-sizing: border-box; padding: var(--field-p); background: var(--field-bg); color: var(--field-c); font-size: var(--f-s); line-height: 1; display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; gap: var(--bar-t-gap);][comment]-- Modifier --[/comment][border=transparent; padding: 0px;]+0 [fa]fas fa-caret-right[/fa][/border][comment]-- Score --[/comment][border=transparent; padding: 0px;]10[/border][/border][/border][/border][comment] -- Saving Throws Container --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: var(--stats-p) 0px; border-bottom: var(--stats-b); display: flex; flex-flow: row wrap; justify-content: space-between; align-items: flex-start; gap: var(--stats-gap);][comment]-- Saving Throw Label + Bonus + Inspiration Container[/comment][border=transparent; flex: 0 0 100%; box-sizing: border-box; padding: 0px; display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; gap: var(--stats-gap);][comment]-- Saving Throws Label --[/comment][border=transparent; flex: var(--sav-bon-ins-flex); box-sizing: border-box; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1;]Saving Throws[/border][comment]-- Proficiency Bonus Container --[/comment][border=transparent; flex: var(--sav-bon-ins-flex); box-sizing: border-box; padding: 0px; font-size: var(--f-s); line-height: 1; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; gap: var(--lv-num-m);][comment]-- Proficiency Bonus Label --[/comment][border=transparent; flex: 1 1; padding: 0px; color: rgb(var(--color-a)); text-align: right;]Proficiency Bonus[/border][comment]-- Proficiency Bonus Circle --[/comment][border=transparent; flex: 0 0 var(--pro-bon-s); height: var(--pro-bon-s); border-radius: var(--pro-b-r); box-sizing: border-box; background: var(--color-1); padding: 0px; color: rgb(var(--color-b)); display: flex; flex-flow: row nowrap; justify-content: center; align-items: center;]+3[/border][/border][comment]-- Inspiration Container --[/comment][border=transparent; flex: var(--sav-bon-ins-flex); box-sizing: border-box; padding: 0px; font-size: var(--f-s); line-height: 1; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; gap: var(--lv-num-m);][comment]-- Inspiration Label --[/comment][border=transparent; flex: 1 1; padding: 0px; color: rgb(var(--color-a)); text-align: right;]Inspiration[/border][comment]-- Inspiration Circle --[/comment][border=transparent; flex: 0 0 var(--pro-bon-s); height: var(--pro-bon-s); border-radius: var(--pro-b-r); box-sizing: border-box; background: var(--color-1); padding: 0px; color: rgb(var(--color-b)); display: flex; flex-flow: row nowrap; justify-content: center; align-items: center;]0[/border][/border][/border][comment]-- STR Container --[/comment][border=transparent; flex: var(--stat-flex); box-sizing: border-box; padding: 0px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; gap: var(--bar-gap);][comment]-- STR Proficiency --[/comment][border=transparent; flex: 0 0 var(--pro-s); box-sizing: border-box; height: var(--pro-s); border-radius: var(--pro-b-r); box-sizing: border-box; background: var(--pro-str); padding: 0px;][/border][comment]-- STR Label --[/comment][border=transparent; flex: 0 0 var(--stat-w); box-sizing: border-box; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1;]STR[/border][comment]-- STR Field --[/comment][border=transparent; flex: 1 1; box-sizing: border-box; padding: var(--field-p); background: var(--field-bg); color: var(--field-c); font-size: var(--f-s); line-height: 1; text-align: right;]+0[/border][/border][comment]-- DEX Container --[/comment][border=transparent; flex: var(--stat-flex); box-sizing: border-box; padding: 0px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; gap: var(--bar-gap);][comment]-- DEX Proficiency --[/comment][border=transparent; flex: 0 0 var(--pro-s); box-sizing: border-box; height: var(--pro-s); border-radius: var(--pro-b-r); box-sizing: border-box; background: var(--pro-dex); padding: 0px;][/border][comment]-- DEX Label --[/comment][border=transparent; flex: 0 0 var(--stat-w); box-sizing: border-box; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1;]DEX[/border][comment]-- DEX Field --[/comment][border=transparent; flex: 1 1; box-sizing: border-box; padding: var(--field-p); background: var(--field-bg); color: var(--field-c); font-size: var(--f-s); line-height: 1; text-align: right;]+3[/border][/border][comment]-- CON Container --[/comment][border=transparent; flex: var(--stat-flex); box-sizing: border-box; padding: 0px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; gap: var(--bar-gap);][comment]-- CON Proficiency --[/comment][border=transparent; flex: 0 0 var(--pro-s); box-sizing: border-box; height: var(--pro-s); border-radius: var(--pro-b-r); box-sizing: border-box; background: var(--pro-con); padding: 0px;][/border][comment]-- CON Label --[/comment][border=transparent; flex: 0 0 var(--stat-w); box-sizing: border-box; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1;]CON[/border][comment]-- CON Field --[/comment][border=transparent; flex: 1 1; box-sizing: border-box; padding: var(--field-p); background: var(--field-bg); color: var(--field-c); font-size: var(--f-s); line-height: 1; text-align: right;]+0[/border][/border][comment]-- INT Container --[/comment][border=transparent; flex: var(--stat-flex); box-sizing: border-box; padding: 0px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; gap: var(--bar-gap);][comment]-- INT Proficiency --[/comment][border=transparent; flex: 0 0 var(--pro-s); box-sizing: border-box; height: var(--pro-s); border-radius: var(--pro-b-r); box-sizing: border-box; background: var(--pro-int); padding: 0px;][/border][comment]-- INT Label --[/comment][border=transparent; flex: 0 0 var(--stat-w); box-sizing: border-box; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1;]INT[/border][comment]-- INT Field --[/comment][border=transparent; flex: 1 1; box-sizing: border-box; padding: var(--field-p); background: var(--field-bg); color: var(--field-c); font-size: var(--f-s); line-height: 1; text-align: right;]+0[/border][/border][comment]-- WIS Container --[/comment][border=transparent; flex: var(--stat-flex); box-sizing: border-box; padding: 0px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; gap: var(--bar-gap);][comment]-- WIS Proficiency --[/comment][border=transparent; flex: 0 0 var(--pro-s); box-sizing: border-box; height: var(--pro-s); border-radius: var(--pro-b-r); box-sizing: border-box; background: var(--pro-wis); padding: 0px;][/border][comment]-- WIS Label --[/comment][border=transparent; flex: 0 0 var(--stat-w); box-sizing: border-box; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1;]WIS[/border][comment]-- WIS Field --[/comment][border=transparent; flex: 1 1; box-sizing: border-box; padding: var(--field-p); background: var(--field-bg); color: var(--field-c); font-size: var(--f-s); line-height: 1; text-align: right;]+0[/border][/border][comment]-- CHA Container --[/comment][border=transparent; flex: var(--stat-flex); box-sizing: border-box; padding: 0px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; gap: var(--bar-gap);][comment]-- CHA Proficiency --[/comment][border=transparent; flex: 0 0 var(--pro-s); box-sizing: border-box; height: var(--pro-s); border-radius: var(--pro-b-r); box-sizing: border-box; background: var(--pro-cha); padding: 0px;][/border][comment]-- CHA Label --[/comment][border=transparent; flex: 0 0 var(--stat-w); box-sizing: border-box; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1;]CHA[/border][comment]-- CHA Field --[/comment][border=transparent; flex: 1 1; box-sizing: border-box; padding: var(--field-p); background: var(--field-bg); color: var(--field-c); font-size: var(--f-s); line-height: 1; text-align: right;]+3[/border][/border][/border][/border][comment] -- Overall Stats End --[/comment][/border][comment] -- Basics Page End --[/comment][comment] ---------------------- NEW PAGE ---------------------- -- Skills + Combat + Attacks + Prof Page --[/comment][border=transparent; position: relative; box-sizing: border-box; width: 100%; min-height: calc((var(--p) * 2) + var(--img-h)); padding: var(--p) 0px;][comment] -- Skills Container --[/comment][border=transparent; flex: 3 1 100%; box-sizing: border-box; padding: 0px 0px calc(var(--stats-p) / 2) 0px; display: flex; flex-flow: row wrap; justify-content: center; align-items: flex-start; gap: var(--skills-gap);][comment]-- STR Skills --[/comment][border=transparent; flex: var(--skill-flex); box-sizing: border-box; padding: 0px; display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-end;][comment]-- STR Header Container --[/comment][border=transparent; flex: 0 0; width: 100%; box-sizing: border-box; padding: 0px; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; gap: var(--bar-gap);][comment]-- STR Box --[/comment][border=transparent; box-sizing: border-box; padding: var(--lv-box-p); border-radius: var(--lv-box-b); background: rgb(var(--color-a)); color: rgba(var(--color-b), 0.8); font-size: var(--lv-box-s); line-height: 1; box-shadow: var(--lv-box-b-s);]STR[/border][border=transparent; flex: 1 1; box-sizing: border-box; border: var(--stats-b); padding: 0px;][/border][/border][comment]-- STR Header End --[/comment][border=transparent; flex: var(--skill-body-flex); box-sizing: border-box; width: var(--skill-body-w); color: rgb(var(--color-a)); font-size: var(--skill-s); line-height: var(--skill-l-h);][comment]-- Athletics Proficiency --[/comment][border=transparent; display: inline-block; margin-right: var(--bar-gap); box-sizing: border-box; width: var(--pro-s); height: var(--pro-s); border-radius: var(--pro-b-r); box-sizing: border-box; background: var(--skill-athletic); padding: 0px;][/border]Athletics [comment]-- Athletics Number --[/comment][border=transparent; display: inline; padding: 0px; color: var(--bar-c);]+0[/border][/border][/border][comment]-- STR Skills End --[/comment][comment]-- DEX Skills --[/comment][border=transparent; flex: var(--skill-flex); box-sizing: border-box; padding: 0px; display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-end;][comment]-- DEX Header Container --[/comment][border=transparent; flex: 0 0; width: 100%; box-sizing: border-box; padding: 0px; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; gap: var(--bar-gap);][comment]-- DEX Box --[/comment][border=transparent; box-sizing: border-box; padding: var(--lv-box-p); border-radius: var(--lv-box-b); background: rgb(var(--color-a)); color: rgba(var(--color-b), 0.8); font-size: var(--lv-box-s); line-height: 1; box-shadow: var(--lv-box-b-s);]DEX[/border][border=transparent; flex: 1 1; box-sizing: border-box; border: var(--stats-b); padding: 0px;][/border][/border][comment]-- DEX Header End --[/comment][border=transparent; flex: var(--skill-body-flex); box-sizing: border-box; width: var(--skill-body-w); color: rgb(var(--color-a)); font-size: var(--skill-s); line-height: var(--skill-l-h);][comment]-- Acrobatics Proficiency --[/comment][border=transparent; display: inline-block; margin-right: var(--bar-gap); box-sizing: border-box; width: var(--pro-s); height: var(--pro-s); border-radius: var(--pro-b-r); box-sizing: border-box; background: var(--skill-acrobat); padding: 0px;][/border]Acrobatics [comment]-- Acrobatics Number --[/comment][border=transparent; display: inline; padding: 0px; color: var(--bar-c);]+0[/border] [comment]-- Sleight of Hand Proficiency --[/comment][border=transparent; display: inline-block; margin-right: var(--bar-gap); box-sizing: border-box; width: var(--pro-s); height: var(--pro-s); border-radius: var(--pro-b-r); box-sizing: border-box; background: var(--skill-sleight); padding: 0px;][/border]Sleight of Hand [comment]-- Sleight of Hand Number --[/comment][border=transparent; display: inline; padding: 0px; color: var(--bar-c);]+0[/border] [comment]-- Stealth Proficiency --[/comment][border=transparent; display: inline-block; margin-right: var(--bar-gap); box-sizing: border-box; width: var(--pro-s); height: var(--pro-s); border-radius: var(--pro-b-r); box-sizing: border-box; background: var(--skill-stealth); padding: 0px;][/border]Stealth [comment]-- Stealth Number --[/comment][border=transparent; display: inline; padding: 0px; color: var(--bar-c);]+0[/border][/border][/border][comment]-- DEX Skills End --[/comment][comment]-- INT Skills --[/comment][border=transparent; flex: var(--skill-flex); box-sizing: border-box; padding: 0px; display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-end;][comment]-- INT Header Container --[/comment][border=transparent; flex: 0 0; width: 100%; box-sizing: border-box; padding: 0px; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; gap: var(--bar-gap);][comment]-- INT Box --[/comment][border=transparent; box-sizing: border-box; padding: var(--lv-box-p); border-radius: var(--lv-box-b); background: rgb(var(--color-a)); color: rgba(var(--color-b), 0.8); font-size: var(--lv-box-s); line-height: 1; box-shadow: var(--lv-box-b-s);]INT[/border][border=transparent; flex: 1 1; box-sizing: border-box; border: var(--stats-b); padding: 0px;][/border][/border][comment]-- INT Header End --[/comment][border=transparent; flex: var(--skill-body-flex); box-sizing: border-box; width: var(--skill-body-w); color: rgb(var(--color-a)); font-size: var(--skill-s); line-height: var(--skill-l-h);][comment]-- Arcana Proficiency --[/comment][border=transparent; display: inline-block; margin-right: var(--bar-gap); box-sizing: border-box; width: var(--pro-s); height: var(--pro-s); border-radius: var(--pro-b-r); box-sizing: border-box; background: var(--skill-arcana); padding: 0px;][/border]Arcana [comment]-- Arcana Number --[/comment][border=transparent; display: inline; padding: 0px; color: var(--bar-c);]+3[/border] [comment]-- History Proficiency --[/comment][border=transparent; display: inline-block; margin-right: var(--bar-gap); box-sizing: border-box; width: var(--pro-s); height: var(--pro-s); border-radius: var(--pro-b-r); box-sizing: border-box; background: var(--skill-history); padding: 0px;][/border]History [comment]-- History Number --[/comment][border=transparent; display: inline; padding: 0px; color: var(--bar-c);]+0[/border] [comment]-- Investigation Proficiency --[/comment][border=transparent; display: inline-block; margin-right: var(--bar-gap); box-sizing: border-box; width: var(--pro-s); height: var(--pro-s); border-radius: var(--pro-b-r); box-sizing: border-box; background: var(--skill-invest); padding: 0px;][/border]Investigation [comment]-- Investigation Number --[/comment][border=transparent; display: inline; padding: 0px; color: var(--bar-c);]+3[/border] [comment]-- Nature Proficiency --[/comment][border=transparent; display: inline-block; margin-right: var(--bar-gap); box-sizing: border-box; width: var(--pro-s); height: var(--pro-s); border-radius: var(--pro-b-r); box-sizing: border-box; background: var(--skill-nature); padding: 0px;][/border]Nature [comment]-- Nature Number --[/comment][border=transparent; display: inline; padding: 0px; color: var(--bar-c);]+0[/border] [comment]-- Religion Proficiency --[/comment][border=transparent; display: inline-block; margin-right: var(--bar-gap); box-sizing: border-box; width: var(--pro-s); height: var(--pro-s); border-radius: var(--pro-b-r); box-sizing: border-box; background: var(--skill-religion); padding: 0px;][/border]Religion [comment]-- Religion Number --[/comment][border=transparent; display: inline; padding: 0px; color: var(--bar-c);]+0[/border][/border][/border][comment]-- INT Skills End --[/comment][comment]-- WIS Skills --[/comment][border=transparent; flex: var(--skill-flex); box-sizing: border-box; padding: 0px; display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-end;][comment]-- WIS Header Container --[/comment][border=transparent; flex: 0 0; width: 100%; box-sizing: border-box; padding: 0px; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; gap: var(--bar-gap);][comment]-- WIS Box --[/comment][border=transparent; box-sizing: border-box; padding: var(--lv-box-p); border-radius: var(--lv-box-b); background: rgb(var(--color-a)); color: rgba(var(--color-b), 0.8); font-size: var(--lv-box-s); line-height: 1; box-shadow: var(--lv-box-b-s);]WIS[/border][border=transparent; flex: 1 1; box-sizing: border-box; border: var(--stats-b); padding: 0px;][/border][/border][comment]-- WIS Header End --[/comment][border=transparent; flex: var(--skill-body-flex); box-sizing: border-box; width: var(--skill-body-w); color: rgb(var(--color-a)); font-size: var(--skill-s); line-height: var(--skill-l-h);][comment]-- Animal Handling Proficiency --[/comment][border=transparent; display: inline-block; margin-right: var(--bar-gap); box-sizing: border-box; width: var(--pro-s); height: var(--pro-s); border-radius: var(--pro-b-r); box-sizing: border-box; background: var(--skill-animal); padding: 0px;][/border]Animal Handling [comment]-- Animal Handling Number --[/comment][border=transparent; display: inline; padding: 0px; color: var(--bar-c);]+0[/border] [comment]-- Insight Proficiency --[/comment][border=transparent; display: inline-block; margin-right: var(--bar-gap); box-sizing: border-box; width: var(--pro-s); height: var(--pro-s); border-radius: var(--pro-b-r); box-sizing: border-box; background: var(--skill-insight); padding: 0px;][/border]Insight [comment]-- Insight Number --[/comment][border=transparent; display: inline; padding: 0px; color: var(--bar-c);]+0[/border] [comment]-- Medicine Proficiency --[/comment][border=transparent; display: inline-block; margin-right: var(--bar-gap); box-sizing: border-box; width: var(--pro-s); height: var(--pro-s); border-radius: var(--pro-b-r); box-sizing: border-box; background: var(--skill-medicine); padding: 0px;][/border]Medicine [comment]-- Medicine Number --[/comment][border=transparent; display: inline; padding: 0px; color: var(--bar-c);]+0[/border] [comment]-- Perception Proficiency --[/comment][border=transparent; display: inline-block; margin-right: var(--bar-gap); box-sizing: border-box; width: var(--pro-s); height: var(--pro-s); border-radius: var(--pro-b-r); box-sizing: border-box; background: var(--skill-percept); padding: 0px;][/border]Perception [comment]-- Perception Number --[/comment][border=transparent; display: inline; padding: 0px; color: var(--bar-c);]+0[/border] [comment]-- Survival Proficiency --[/comment][border=transparent; display: inline-block; margin-right: var(--bar-gap); box-sizing: border-box; width: var(--pro-s); height: var(--pro-s); border-radius: var(--pro-b-r); box-sizing: border-box; background: var(--skill-survival); padding: 0px;][/border]Survival [comment]-- Survival Number --[/comment][border=transparent; display: inline; padding: 0px; color: var(--bar-c);]+0[/border][/border][/border][comment]-- WIS Skills End --[/comment][comment]-- CHA Skills --[/comment][border=transparent; flex: var(--skill-flex); box-sizing: border-box; padding: 0px; display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-end;][comment]-- CHA Header Container --[/comment][border=transparent; flex: 0 0; width: 100%; box-sizing: border-box; padding: 0px; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; gap: var(--bar-gap);][comment]-- CHA Box --[/comment][border=transparent; box-sizing: border-box; padding: var(--lv-box-p); border-radius: var(--lv-box-b); background: rgb(var(--color-a)); color: rgba(var(--color-b), 0.8); font-size: var(--lv-box-s); line-height: 1; box-shadow: var(--lv-box-b-s);]CHA[/border][border=transparent; flex: 1 1; box-sizing: border-box; border: var(--stats-b); padding: 0px;][/border][/border][comment]-- CHA Header End --[/comment][border=transparent; flex: var(--skill-body-flex); box-sizing: border-box; width: var(--skill-body-w); color: rgb(var(--color-a)); font-size: var(--skill-s); line-height: var(--skill-l-h);][comment]-- Deception Proficiency --[/comment][border=transparent; display: inline-block; margin-right: var(--bar-gap); box-sizing: border-box; width: var(--pro-s); height: var(--pro-s); border-radius: var(--pro-b-r); box-sizing: border-box; background: var(--skill-decept); padding: 0px;][/border]Deception [comment]-- Deception Number --[/comment][border=transparent; display: inline; padding: 0px; color: var(--bar-c);]+3[/border] [comment]-- Intimidation Proficiency --[/comment][border=transparent; display: inline-block; margin-right: var(--bar-gap); box-sizing: border-box; width: var(--pro-s); height: var(--pro-s); border-radius: var(--pro-b-r); box-sizing: border-box; background: var(--skill-intimidat); padding: 0px;][/border]Intimidation [comment]-- Intimidation Number --[/comment][border=transparent; display: inline; padding: 0px; color: var(--bar-c);]+0[/border] [comment]-- Performance Proficiency --[/comment][border=transparent; display: inline-block; margin-right: var(--bar-gap); box-sizing: border-box; width: var(--pro-s); height: var(--pro-s); border-radius: var(--pro-b-r); box-sizing: border-box; background: var(--skill-perform); padding: 0px;][/border]Performance [comment]-- Performance Number --[/comment][border=transparent; display: inline; padding: 0px; color: var(--bar-c);]+3[/border] [comment]-- Persuasion Proficiency --[/comment][border=transparent; display: inline-block; margin-right: var(--bar-gap); box-sizing: border-box; width: var(--pro-s); height: var(--pro-s); border-radius: var(--pro-b-r); box-sizing: border-box; background: var(--skill-persuasion); padding: 0px;][/border]Persuasion [comment]-- Persuasion Number --[/comment][border=transparent; display: inline; padding: 0px; color: var(--bar-c);]+0[/border][/border][/border][comment]-- CHA Skills End --[/comment][/border][comment] -- Skills End --[/comment][comment] -- Passives Container --[/comment][border=transparent; flex: 1 1 100%; box-sizing: border-box; border-top: var(--stats-b); border-bottom: var(--stats-b); padding: var(--stats-p) 0px; display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; gap: var(--stats-gap);][comment]-- Passive Perception Container --[/comment][border=transparent; flex: var(--pas-flex); padding: 0px; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; gap: var(--stats-gap);][comment]-- Text --[/comment][border=transparent; flex: 1 1; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1; text-align: var(--pas-t-a);]Passive Wisdom [border=transparent; display: inline; padding: 0px; color: var(--bar-c);](Perception)[/border][/border][comment]-- Passive Perception Circle --[/comment][border=transparent; flex: 0 0 var(--pro-bon-s); box-sizing: border-box; height: var(--pro-bon-s); border-radius: var(--pro-b-r); background: var(--color-1); padding: 0px; color: rgb(var(--color-b)); font-size: var(--f-s); display: flex; flex-flow: row nowrap; justify-content: center; align-items: center;]10[/border][/border][comment]-- Passive Investigation Container --[/comment][border=transparent; flex: var(--pas-flex); padding: 0px; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; gap: var(--stats-gap);][comment]-- Text --[/comment][border=transparent; flex: 1 1; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1; text-align: var(--pas-t-a);]Passive Intelligence [border=transparent; display: inline; padding: 0px; color: var(--bar-c);](Investigation)[/border][/border][comment]-- Passive Investigation Circle --[/comment][border=transparent; flex: 0 0 var(--pro-bon-s); box-sizing: border-box; height: var(--pro-bon-s); border-radius: var(--pro-b-r); background: var(--color-1); padding: 0px; color: rgb(var(--color-b)); font-size: var(--f-s); display: flex; flex-flow: row nowrap; justify-content: center; align-items: center;]13[/border][/border][comment]-- Passive Insight Container --[/comment][border=transparent; flex: var(--pas-flex); padding: 0px; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; gap: var(--stats-gap);][comment]-- Text --[/comment][border=transparent; flex: 1 1; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1; text-align: var(--pas-t-a);]Passive Wisdom [border=transparent; display: inline; padding: 0px; color: var(--bar-c);](Insight)[/border][/border][comment]-- Passive Insight Circle --[/comment][border=transparent; flex: 0 0 var(--pro-bon-s); box-sizing: border-box; height: var(--pro-bon-s); border-radius: var(--pro-b-r); background: var(--color-1); padding: 0px; color: rgb(var(--color-b)); font-size: var(--f-s); display: flex; flex-flow: row nowrap; justify-content: center; align-items: center;]10[/border][/border][/border][comment] -- Passives End --[/comment][comment] -- Combat + Attacks + Prof Container --[/comment][border=transparent; flex: 3 1 100%; box-sizing: border-box; border-bottom: var(--stats-b); padding: var(--stats-p) 0px; display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: flex-start; gap: var(--com-atk-prof-gap);][comment] -- Combat Container --[/comment][border=transparent; flex: var(--com-atk-prof-flex); padding: 0px; display: flex; flex-flow: column nowrap; justify-content: center; align-items: flex-start;][comment] -- HP Container --[/comment][border=transparent; box-sizing: border-box; width: 100%; border-bottom: var(--stats-b); padding: 0px 0px var(--stats-p) 0px; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; gap: var(--stats-gap);][comment]-- HP Bar Container --[/comment][border=transparent; flex: 1 1 50%; box-sizing: border-box; padding: 0px; display: flex; flex-flow: column nowrap; justify-content: center; align-items: flex-start; gap: var(--bar-gap);][comment]-- HP Bar Text --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: 0px; color: var(--bar-c); font-size: var(--bar-s); line-height: 1.3; display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; gap: var(--bar-t-gap);][border=transparent; padding: 0px;]HP [fa]fas fa-caret-right[/fa][/border][comment]-- Points --[/comment][border=transparent; padding: 0px;]26/38[/border][/border][comment]-- HP Bar --[/comment][border=transparent; width: 100%; box-sizing: border-box; height: var(--bar-h); padding: 0px; background: var(--hp-g);][/border][/border][comment]-- Temp HP Container --[/comment][border=transparent; padding: 0px; display: flex; flex-flow: row nowrap; justify-items: flex-end; align-items: center; gap: var(--bar-gap);][comment]-- Temp HP --[/comment][border=transparent; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1;]Temp HP[/border][comment]-- Temp HP Circle --[/comment][border=transparent; box-sizing: border-box; width: var(--pro-bon-s); height: var(--pro-bon-s); border-radius: var(--pro-b-r); box-sizing: border-box; background: var(--field-bg); padding: 0px; color: var(--field-c); font-size: var(--f-s); display: flex; flex-flow: row nowrap; justify-content: center; align-items: center;]0[/border][/border][/border][comment] -- SPD + INIT + Armour + Hit Container --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: var(--stats-p) 0px 0px 0px; display: flex; flex-flow: row wrap; justify-content: space-between; align-items: flex-start; gap: var(--stats-gap);][comment]-- SPD Class Container --[/comment][border=transparent; flex: var(--com-flex); box-sizing: border-box; padding: 0px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; gap: var(--bar-gap);][comment]-- SPD Class Label --[/comment][border=transparent; flex: 0 0 var(--stat-w); box-sizing: border-box; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1;]SPD[/border][comment]-- SPD Class Field --[/comment][border=transparent; flex: 1 1; box-sizing: border-box; padding: var(--field-p); background: var(--field-bg); color: var(--field-c); font-size: var(--f-s); line-height: 1; text-align: right;]30ft[/border][/border][comment]-- INIT Container --[/comment][border=transparent; flex: var(--com-flex); box-sizing: border-box; padding: 0px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; gap: var(--bar-gap);][comment]-- INIT Label --[/comment][border=transparent; flex: 0 0 var(--stat-w); box-sizing: border-box; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1;]INIT[/border][comment]-- INIT Field --[/comment][border=transparent; flex: 1 1; box-sizing: border-box; padding: var(--field-p); background: var(--field-bg); color: var(--field-c); font-size: var(--f-s); line-height: 1; text-align: right;]0[/border][/border][comment]-- Armour Class Container --[/comment][border=transparent; flex: var(--com-flex); box-sizing: border-box; padding: 0px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; gap: var(--bar-gap);][comment]-- Armour Class Label --[/comment][border=transparent; flex: 0 0 100px; box-sizing: border-box; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1;]Armour Class[/border][comment]-- Armour Class Field --[/comment][border=transparent; flex: 1 1; box-sizing: border-box; padding: var(--field-p); background: var(--field-bg); color: var(--field-c); font-size: var(--f-s); line-height: 1; text-align: right;]10[/border][/border][comment]-- Hit Dice Container --[/comment][border=transparent; flex: 1 1 100%; box-sizing: border-box; padding: 0px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; gap: var(--bar-gap);][comment]-- Hit Dice Label --[/comment][border=transparent; flex: 0 0 100px; box-sizing: border-box; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1;]Hit Dice[/border][comment]-- Hit Dice Field --[/comment][border=transparent; flex: 1 1; box-sizing: border-box; padding: var(--field-p); background: var(--field-bg); color: var(--field-c); font-size: var(--f-s); line-height: 1; text-align: right;]1D8[/border][/border][comment]-- Extra Field --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: var(--field-p); background: var(--field-bg); color: var(--field-c); font-size: var(--f-s); line-height: var(--box-field-l-h);]"A quote or something — whatever you want; this is here to fill space."[/border][/border][comment]-- SPD + INIT + Armour + Hit End --[/comment][/border][comment] -- Combat End --[/comment][comment] -- Attacks + Spells Container --[/comment][border=transparent; flex: var(--com-atk-prof-flex); padding: 0px; display: flex; flex-flow: column nowrap; justify-content: center; align-items: flex-start; gap: var(--bar-gap);][comment]-- Attacks Label --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1;]Attacks & Spells[/border][comment]-- Attack Field 1 --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: var(--field-p); background: var(--field-bg); color: var(--field-c); font-size: var(--f-s); line-height: var(--box-field-l-h); display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; gap: var(--bar-t-gap);][comment]-- Attack --[/comment][border=transparent; padding: 0px;]ATTACK 1 [fa]fas fa-caret-right[/fa][/border][comment]-- ATK Bonus --[/comment][border=transparent; padding: 0px;]ATK BONUS [fa]fas fa-caret-right[/fa][/border][comment]-- DMG/TYPE --[/comment][border=transparent; padding: 0px;]DMG/TYPE[/border][/border][comment]-- Attack Field 2 --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: var(--field-p); background: var(--field-bg); color: var(--field-c); font-size: var(--f-s); line-height: var(--box-field-l-h); display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; gap: var(--bar-t-gap);][comment]-- Attack --[/comment][border=transparent; padding: 0px;]ATTACK 2 [fa]fas fa-caret-right[/fa][/border][comment]-- ATK Bonus --[/comment][border=transparent; padding: 0px;]ATK BONUS [fa]fas fa-caret-right[/fa][/border][comment]-- DMG/TYPE --[/comment][border=transparent; padding: 0px;]DMG/TYPE[/border][/border][comment]-- Attack Field 3 --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: var(--field-p); background: var(--field-bg); color: var(--field-c); font-size: var(--f-s); line-height: var(--box-field-l-h); display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; gap: var(--bar-t-gap);][comment]-- Attack --[/comment][border=transparent; padding: 0px;]ATTACK 3 [fa]fas fa-caret-right[/fa][/border][comment]-- ATK Bonus --[/comment][border=transparent; padding: 0px;]ATK BONUS [fa]fas fa-caret-right[/fa][/border][comment]-- DMG/TYPE --[/comment][border=transparent; padding: 0px;]DMG/TYPE[/border][/border][comment]-- Attack Field 4 --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: var(--field-p); background: var(--field-bg); color: var(--field-c); font-size: var(--f-s); line-height: var(--box-field-l-h); display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; gap: var(--bar-t-gap);][comment]-- Attack --[/comment][border=transparent; padding: 0px;]ATTACK 4 [fa]fas fa-caret-right[/fa][/border][comment]-- ATK Bonus --[/comment][border=transparent; padding: 0px;]ATK BONUS [fa]fas fa-caret-right[/fa][/border][comment]-- DMG/TYPE --[/comment][border=transparent; padding: 0px;]DMG/TYPE[/border][/border][comment]-- Notes Field --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: var(--field-p); background: var(--field-bg); color: var(--field-c); font-size: var(--f-s); line-height: var(--box-field-l-h);]Notes about attacks here Another line[/border][/border][comment] -- Attacks End --[/comment][comment] -- Combat End --[/comment][comment] -- Proficiencies Container --[/comment][border=transparent; flex: var(--com-atk-prof-flex); padding: 0px; display: flex; flex-flow: column nowrap; justify-content: center; align-items: flex-start; gap: var(--bar-gap);][comment]-- Proficiencies Label --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1;]Proficiencies[/border][comment]-- Proficiencies Field --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: var(--field-p); background: var(--field-bg); color: var(--field-c); font-size: var(--f-s); line-height: var(--box-field-l-h);]ARMOUR [border=transparent; display: inline-block; margin: var(--field-block-m); border-left: var(--field-block-b); padding: var(--field-block-p);]Armour 1[/border] WEAPONS [border=transparent; display: inline-block; margin: var(--field-block-m); border-left: var(--field-block-b); padding: var(--field-block-p);]Weapon 1, Weapon 2[/border] TOOLS [border=transparent; display: inline-block; margin: var(--field-block-m); border-left: var(--field-block-b); padding: var(--field-block-p);]Tool 1, Tool 2[/border] LANGUAGES [border=transparent; display: inline-block; margin: var(--field-block-m); border-left: var(--field-block-b); padding: var(--field-block-p);]Language 1, Language 2[/border][/border][/border][comment] -- Proficiencies End --[/comment][/border][comment] -- Combat + Attacks + Prof End --[/comment][/border][comment] -- Skills + Combat + Attacks + Prof End --[/comment][comment] ---------------------- NEW PAGE ---------------------- -- Equip + Persona + Features Page --[/comment][border=transparent; position: relative; box-sizing: border-box; width: 100%; min-height: calc((var(--p) * 2) + var(--img-h)); padding: var(--p) 0px;][comment] -- Equip + Persona + Features Container --[/comment][border=transparent; box-sizing: border-box; width: 100%; min-height: var(--img-h); border-top: var(--stats-b); border-bottom: var(--stats-b); padding: var(--stats-p) 0px; display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: flex-start; gap: var(--com-atk-prof-gap);][comment] -- Features Container --[/comment][border=transparent; flex: 2 1 260px; padding: 0px; display: flex; flex-flow: column nowrap; justify-content: center; align-items: flex-start; gap: var(--bar-gap);][comment]-- Features Label --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1;]Features & Traits[/border][comment]-- Features Field --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: var(--field-p); background: var(--field-bg); color: var(--field-c); font-size: var(--f-s); line-height: var(--box-field-l-h);]CLASS FEATURES [border=transparent; display: inline-block; margin: var(--field-block-m); border-left: var(--field-block-b); padding: var(--field-block-p);]Feature 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Feature 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Feature 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/border] RACIAL TRAITS [border=transparent; display: inline-block; margin: var(--field-block-m); border-left: var(--field-block-b); padding: var(--field-block-p);]Trait 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Trait 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Trait 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/border] FEATS [border=transparent; display: inline-block; margin: var(--field-block-m); border-left: var(--field-block-b); padding: var(--field-block-p);]Feat 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Feat 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/border][/border][/border][comment] -- Features End --[/comment][comment] -- Equip Container --[/comment][border=transparent; flex: var(--com-atk-prof-flex); padding: 0px; display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: center; gap: var(--pers-gap);][comment] -- Money Container --[/comment][border=transparent; flex: 1 1; width: 100%; border-bottom: var(--stats-b); padding: 4px 0px var(--stats-p) 0px; display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; gap: var(--p-gap);][comment]-- CP Container --[/comment][border=transparent; flex: var(--p-flex); padding: 0px; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; gap: var(--bar-gap);][comment]-- CP Label --[/comment][border=transparent; flex: 1 1; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1; text-align: var(--pas-t-a);]CP[/border][comment]-- CP Circle --[/comment][border=transparent; flex: 0 0 var(--pro-bon-s); box-sizing: border-box; height: var(--pro-bon-s); border-radius: var(--pro-b-r); background: var(--cp); padding: 0px; color: rgb(var(--color-b)); font-size: var(--f-s); display: flex; flex-flow: row nowrap; justify-content: center; align-items: center;]5[/border][/border][comment]-- CP End --[/comment][comment]-- SP Container --[/comment][border=transparent; flex: var(--p-flex); padding: 0px; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; gap: var(--bar-gap);][comment]-- SP Label --[/comment][border=transparent; flex: 1 1; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1; text-align: var(--pas-t-a);]SP[/border][comment]-- SP Circle --[/comment][border=transparent; flex: 0 0 var(--pro-bon-s); box-sizing: border-box; height: var(--pro-bon-s); border-radius: var(--pro-b-r); background: var(--sp); padding: 0px; color: rgb(var(--color-b)); font-size: var(--f-s); display: flex; flex-flow: row nowrap; justify-content: center; align-items: center;]0[/border][/border][comment]-- SP End --[/comment][comment]-- EP Container --[/comment][border=transparent; flex: var(--p-flex); padding: 0px; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; gap: var(--bar-gap);][comment]-- EP Label --[/comment][border=transparent; flex: 1 1; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1; text-align: var(--pas-t-a);]EP[/border][comment]-- EP Circle --[/comment][border=transparent; flex: 0 0 var(--pro-bon-s); box-sizing: border-box; height: var(--pro-bon-s); border-radius: var(--pro-b-r); background: var(--ep); padding: 0px; color: rgb(var(--color-b)); font-size: var(--f-s); display: flex; flex-flow: row nowrap; justify-content: center; align-items: center;]0[/border][/border][comment]-- EP End --[/comment][comment]-- GP Container --[/comment][border=transparent; flex: var(--p-flex); padding: 0px; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; gap: var(--bar-gap);][comment]-- GP Label --[/comment][border=transparent; flex: 1 1; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1; text-align: var(--pas-t-a);]GP[/border][comment]-- GP Circle --[/comment][border=transparent; flex: 0 0 var(--pro-bon-s); box-sizing: border-box; height: var(--pro-bon-s); border-radius: var(--pro-b-r); background: var(--gp); padding: 0px; color: rgb(var(--color-b)); font-size: var(--f-s); display: flex; flex-flow: row nowrap; justify-content: center; align-items: center;]20[/border][/border][comment]-- GP End --[/comment][comment]-- PP Container --[/comment][border=transparent; flex: var(--p-flex); padding: 0px; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; gap: var(--bar-gap);][comment]-- PP Label --[/comment][border=transparent; flex: 1 1; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1; text-align: var(--pas-t-a);]PP[/border][comment]-- PP Circle --[/comment][border=transparent; flex: 0 0 var(--pro-bon-s); box-sizing: border-box; height: var(--pro-bon-s); border-radius: var(--pro-b-r); background: var(--pp); padding: 0px; color: rgb(var(--color-b)); font-size: var(--f-s); display: flex; flex-flow: row nowrap; justify-content: center; align-items: center;]0[/border][/border][comment]-- PP End --[/comment][/border][comment]- - Money End --[/comment][comment] -- Equipment Container --[/comment][border=transparent; flex: 1 1; width: 100%; padding: 0px; display: flex; flex-flow: column nowrap; justify-content: center; align-items: flex-start; gap: var(--bar-gap);][comment]-- Equipment Label --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1;]Equipment[/border][comment]-- Equipment Field --[/comment][comment]-- Attack Field 1 --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: var(--field-p); background: var(--field-bg); color: var(--field-c); font-size: var(--f-s); line-height: var(--box-field-l-h); display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; gap: var(--bar-t-gap);][comment]-- Armour --[/comment][border=transparent; padding: 0px;]ARMOUR [fa]fas fa-caret-right[/fa][/border][comment]-- AC--[/comment][border=transparent; padding: 0px;]AC[/border][/border][border=transparent; flex: 1 1; box-sizing: border-box; width: 100%; padding: var(--field-p); background: var(--field-bg); color: var(--field-c); font-size: var(--f-s); line-height: var(--pers-field-l-h);]Equipment 1 Equipment 2 Equipment 3 Equipment 4 Equipment 5 Equipment 6 Equipment 7 Equipment 8 Equipment 9 Equipment 10 Equipment 11 Equipment 12[/border][/border][/border][comment] -- Equip End --[/comment][comment] -- Persona Container --[/comment][border=transparent; flex: var(--com-atk-prof-flex); padding: 0px; display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: center; gap: var(--pers-gap);][comment]-- Personality Container --[/comment][border=transparent; flex: 1 1; width: 100%; padding: 0px; display: flex; flex-flow: column nowrap; justify-content: center; align-items: flex-start; gap: var(--bar-gap);][comment]-- Personality Label --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1;]Personality Traits[/border][comment]-- Personality Field --[/comment][border=transparent; flex: 1 1; box-sizing: border-box; width: 100%; padding: var(--field-p); background: var(--field-bg); color: var(--field-c); font-size: var(--f-s); line-height: var(--pers-field-l-h);]I like to read and memorize poetry. It keeps me calm and brings me fleeting moments of happiness. I don’t talk about the thing that torments me. I’d rather not burden others with my curse.[/border][/border][comment]-- Ideals Container --[/comment][border=transparent; flex: 1 1; width: 100%; padding: 0px; display: flex; flex-flow: column nowrap; justify-content: center; align-items: flex-start; gap: var(--bar-gap);][comment]-- Ideals Label --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1;]Ideals[/border][comment]-- Ideals Field --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: var(--field-p); background: var(--field-bg); color: var(--field-c); font-size: var(--f-s); line-height: var(--pers-field-l-h);]I’ll stop the spirits that haunt me or die trying.[/border][/border][comment]-- Bonds Container --[/comment][border=transparent; flex: 1 1; width: 100%; padding: 0px; display: flex; flex-flow: column nowrap; justify-content: center; align-items: flex-start; gap: var(--bar-gap);][comment]-- Bonds Label --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1;]Bonds[/border][comment]-- Bonds Field --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: var(--field-p); background: var(--field-bg); color: var(--field-c); font-size: var(--f-s); line-height: var(--pers-field-l-h);]I keep my thoughts and discoveries in a journal. My journal is my legacy.[/border][/border][comment]-- Flaws Container --[/comment][border=transparent; flex: 1 1; width: 100%; padding: 0px; display: flex; flex-flow: column nowrap; justify-content: center; align-items: flex-start; gap: var(--bar-gap);][comment]-- Flaws Label --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: 0px; color: rgb(var(--color-a)); font-size: var(--f-s); line-height: 1;]Flaws[/border][comment]-- Flaws Field --[/comment][border=transparent; box-sizing: border-box; width: 100%; padding: var(--field-p); background: var(--field-bg); color: var(--field-c); font-size: var(--f-s); line-height: var(--pers-field-l-h);]I have certain rituals that I must follow every day. I can never break them.[/border][/border][/border][comment] -- Persona End --[/comment][/border][comment] --Equip + Persona + Features Container End --[/comment][/border][comment] --Equip + Persona + Features Page End --[/comment][/border][/border] [/border][/border][/font]
Ambiloquous
Graphic Fanatic
Thank you! 
Irakma
Lovable Mystery Man
How is this even possible?! I swear, I spent like 6 hours learning BBcoding and I made a incredibly basic tabs folder and thought I was doing okay, and then I find this. What the heck dude, you made me question what you could do with this stuff. (I'm definitely going to just read through the code and see what I can learn from that. Should be helpful.)
Ambiloquous
Graphic Fanatic
Honestly, that's hella impressive for six hours!
I mean, I certainly spent more than 6 hours learning how to code tabs at all. 
Most of the fancy stuff we do with "BBCode" on RPN is actually just CSS injections in a BBCode tag, so if you search up CSS properties on the interwebs (and don't go into animations territory) you can basically figure out what can and can't be done. (Feel free! I wouldn't say my code follows best practices or is the cleanest way of doing things, but I don't think many people are judging that on RPN either.)
Irakma
Lovable Mystery Man
Thanks for all the info! I'll be sure to put it to good use!
