• 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

Jewel

spirited
Roleplay Type(s)
My Interest Check
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.
 

Ambiloquous

Graphic Fanatic
Roleplay Type(s)
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.
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
Roleplay Type(s)
My Interest Check
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.
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. :csmile:
 

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
Roleplay Type(s)
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?
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
Roleplay Availability
Roleplay Type(s)
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
 

Ambiloquous

Graphic Fanatic
Roleplay Type(s)
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
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
Roleplay Type(s)
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)


Click Tabs
  • LOREM IPSUM
    ALIAS
    Blue Moon
    ROLE
    Point
    TIER
    II–III

    GROUP
    Amores III
    BRANCH
    Little Latonia
    BATCH
    Noche
    MENTOR
    Daybreak

    NOTABLE SKILLS
    Aqua Scrying, Birdspeak
    NOTES
    Check Report on Operation Rose Train for details on patterns and expertise
    ARTIST
    PicardLouis
    DESCRIPTION

    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.

    EXPANDED

    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.
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:

Mori_Luna

Dead Moon
Roleplay Availability
Roleplay Type(s)
Toggle Tabs
Non-toggling tabs code. Ignore the name.

I have arisen from the BBCode grave — for a bit, I'mma move back in right now. 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)


Click Tabs
  • LOREM IPSUM
    ALIAS
    Blue Moon
    ROLE
    Point
    TIER
    II–III

    GROUP
    Amores III
    BRANCH
    Little Latonia
    BATCH
    Noche
    MENTOR
    Daybreak

    NOTABLE SKILLS
    Aqua Scrying, Birdspeak
    NOTES
    Check Report on Operation Rose Train for details on patterns and expertise
    ARTIST
    PicardLouis
    DESCRIPTION

    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.

    EXPANDED

    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.
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]

I love this code! e_e!
 

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
 

Ambiloquous

Graphic Fanatic
Roleplay Type(s)
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
😂 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.
 

ManicMuse

Magic doesn't come from talent, it comes from pain
Supporter
Roleplay Availability
Roleplay Type(s)
My Interest Check
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.





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."

--
Coded by: Ambiloquous Ambiloquous
EXTRA:
N/A

 

Ambiloquous

Graphic Fanatic
Roleplay Type(s)
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 features 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. Oh well.

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).


Click Below
Artist — GUWEIZ

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 */

/* 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]

Click Below
Artist — GUWEIZ
Click Below
Artist — Astri Lohne
Click Below
Artist — gyxycn
 
Last edited:

Users who are viewing this thread

  • yak
Top