Chibi Magician likes this
Jun 19, 2020 20:22:10 GMT -6
[nospaces]
[googlefont=Barlow Condensed:400,600,700]
[googlefont=Barlow:400,500]
[googlefont=Bree Serif:400]
[newclass=".flare-l"]color: rgba(100,100,100,1); width:385px; margin: 20px 0; --typeface-cond: 'Barlow Condensed', sans-serif; --typeface-serif: 'Bree Serif', serif; --slow: all .75s ease; --fast: all 0.2s ease; font: 400 11px/14px 'Barlow', sans-serif; --bgcolor: white; background: transparent; position: relative [/newclass]
[newclass=".flare-l table td"]padding: 0;[/newclass]
[newclass=".flare-l .tab"]font: 400 24px/0px var(--typeface-cond); position:absolute; z-index:20; line-height:10px; padding: 15px 0 0; height: 30px; background: var(--bgcolor); opacity: .25; [/newclass]
[newclass=".flare-l .tabcontent"]width: 45px; color: rgba(100,100,100,1); margin: 1px 0 0 1px[/newclass]
[newclass=".flare-l .PT_table .PT_tabs_selected .tab"]font-weight: 600; opacity: 1; -webkit-transition: var(--fast); -moz-transition: var(--fast); -o-transition: var(--fast); box-shadow: -2px 3px 3px rgba(0,0,0,.1);[/newclass]
[newclass=".flare-l .PT_table .PT_tabs_hover .tab"] opacity: .5; -webkit-transition: var(--fast); -moz-transition: var(--fast); -o-transition: var(--fast);[/newclass]
[newclass=".flare-l .PT_table .PT_tabs_selected_hover .tab"]opacity: 1; font-weight: 600; -webkit-transition: var(--fast); -moz-transition: var(--fast); -o-transition: var(--fast);[/newclass]
[newclass=".flare-l .PT_table .PT_tabs,.flare-l .PT_table .PT_tabs_hover,.flare-l .PT_table .PT_tabs_selected,.flare-l .PT_table .PT_tabs_selected_hover"]color: #666; margin: -10px 0 0 0; border: 0px; text-align:center; text-transform:uppercase; line-height:10px; position:absolute; z-index:20; -webkit-transition: all 1s ease; -moz-transition: var(--fast); -o-transition: var(--fast); cursor:pointer;[/newclass]
[newclass=".flare-l .left"] [/newclass]
[newclass=".flare-l .right"]margin-left:45px; background: var(--bgcolor); box-shadow: 0px 3px 3px rgba(0,0,0,.1);[/newclass]
[newclass=".flare-l h1"]font: 700 96px/53px var(--typeface-cond); text-align: left; letter-spacing: 3px; color: var(--accent); text-align: center; [/newclass]
[newclass=".flare-l h2"]font: 700 48px/46px var(--typeface-cond); text-transform: uppercase; letter-spacing: 0px; padding-bottom: 8px; color: var(--accent); text-align: left[/newclass]
[newclass=".flare-l h3"]font: 700 22px/22px var(--typeface-cond); text-transform: uppercase; letter-spacing: .3px; white-space: nowrap; overflow: hidden; color: var(--accent); text-align: center; [/newclass]
[newclass=".flare-l h4"]font: 700 15px/15px var(--typeface-cond); text-transform: uppercase; letter-spacing: 1.5px; color: var(--accent)[/newclass]
[newclass=".flare-l h5"]font: 400 9px/14px var(--typeface-serif); text-transform: uppercase; letter-spacing: .9px; color: var(--accent) [/newclass]
[newclass=".flare-l p"] font: 500 11px/13px 'Barlow', sans-serif; color: var(--accent); [/newclass]
[newclass=".flare-l a"]font: inherit; color: var(--accent) !important; text-decoration: none !important; -webkit-transition: var(--fast); -moz-transition: var(--fast); -o-transition: var(--fast);[/newclass]
[newclass=".flare-l a:hover"]opacity: .75; -webkit-transition: var(--fast); -moz-transition: var(--fast); -o-transition: var(--fast);[/newclass]
[newclass=".flare-l .credit"] text-align: right; padding-right: 20px; padding-top: 4px; [/newclass]
[newclass=".flare-l .credit a"]font: 500 8px/10px 'Barlow',sans-serif; letter-spacing: .8px; text-decoration: none; text-transform: uppercase; [/newclass]
[newclass=".flare-l .plotcoverbox"]height: 490px; overflow-y: hidden; position: relative;[/newclass]
[newclass=".flare-l .plotcover .imgbox"]width: 300px; height: 350px; overflow: hidden; position: relative; z-index: 5; [/newclass]
[newclass=".flare-l .plotcover .imgbox img"]width: 300px; [/newclass]
[newclass=".flare-l .plotcover"]height: 448px; width: 300px; padding: 0 20px; position: absolute; top: 30px;-webkit-transition: var(--slow); -moz-transition: var(--slow); -o-transition: var(--slow);[/newclass]
[newclass=".flare-l .plotcoverbox:hover .plotcover"]padding: 0 20px; position: absolute; top: -490px; opacity: 0; -webkit-transition: var(--slow); -moz-transition: var(--slow); -o-transition: var(--slow);[/newclass]
[newclass=".flare-l .plottext"]width: 300px; padding: 20px; background: var(--bgcolor); position: absolute; top: 490px; opacity: 0;-webkit-transition: var(--slow); -moz-transition: var(--slow); -o-transition: var(--slow);[/newclass]
[newclass=".flare-l .plotcoverbox:hover .plottext"]padding: 20px; position: absolute; top: 0; opacity: 1; -webkit-transition: var(--slow); -moz-transition: var(--slow); -o-transition: var(--slow);[/newclass]
[newclass=".flare-l .infotable"]width: 100%; position: relative; z-index: 10;[/newclass]
[newclass=".flare-l .infotable td"]border-bottom: .25px dotted #e2e2e2; height: 34px; vertical-align: middle; text-align: center; [/newclass]
[newclass=".flare-l .plottext .infotable tr:first-child td"]height: 27px [/newclass]
[newclass=".flare-l .plottext .infotable tr:not(:first-child) td:first-child"]vertical-align: text-top; text-align: right; border-right: .25px dotted #e2e2e2; padding: 10px 10px 0 0[/newclass]
[newclass=".flare-l .plottext .infotable tr:not(:first-child) td"]height: auto; vertical-align: middle; text-align: left; padding: 10px 0px 10px 12px;[/newclass]
[newclass=".flare-l .plottext .infotable tr:not(:first-child) td:not(:first-child)"] [/newclass]
[newclass=".flare-l .plottext .infotable tr:last-child td"]border-bottom: 0; [/newclass]
[newclass=".flare-l .plottext"]height: calc(100% - 40px); display: grid; grid-template-rows: auto 1fr; justify-content: stretch [/newclass]
[newclass=".flare-l .plottext h2"]grid-row: 1; align-self: start; width: 289px; [/newclass]
[newclass=".flare-l .scrollbox"]/* height: 318px; */ padding-right: 10px; overflow: auto; grid-row: 2; align-self: stretch;[/newclass]
[newclass=".flare-l .scrollbox::-webkit-scrollbar"]-webkit-appearance: none; width: 3px; float: right[/newclass]
[newclass=".flare-l .scrollbox::-webkit-scrollbar-thumb"]background: var(--accent);[/newclass]
[newclass=".flare-l .scrollbox::-webkit-scrollbar-track"]background: var(--bgcolor); border: 1px solid var(--bgcolor);
[/newclass]
[newclass=".flare-l .plotcover td"]color: var(--accent); border-color: var(--accent) !important [/newclass]
[newclass=".flare-l .PT_spots .plottext td"]border-color: var(--accent) !important [/newclass]
[attr="class","flare-l"]
[PTabbedContent]
[PTab=
[/PTab={background-color:transparent; width:385px; height:490px; padding:0px!important; margin: -20px 0 0 0; position:absolute; z-index:0; --accent: #607ba2; }]
[PTab=
[/PTab={background-color:transparent; width:385px; height:490px; padding:0px!important; margin: -20px 0 0 0; position:absolute; z-index:0; --accent: #7f558e; }]
[PTab=
[/PTab={background-color:transparent; width:385px; height:490px; padding:0px!important; margin: -20px 0 0 0; position:absolute; z-index:0; --accent: #6ab185; }]
[PTab=
[/PTab={background-color:transparent; width:385px; height:490px; padding:0px!important; margin: -20px 0 0 0; position:absolute; z-index:0; --accent: #639e7b; }]
[PTab=
[/PTab={background-color:transparent; width:385px; height:490px; padding:0px!important; margin: -20px 0 0 0; position:absolute; z-index:0; --accent: #639e7b; }]
[PTab=
[/PTab={background-color:transparent; width:385px; height:490px; padding:0px!important; margin: -20px 0 0 0; position:absolute; z-index:0; --accent: #639e7b; }]
[PTab=
[/PTab={background-color:transparent; width:385px; height:490px; padding:0px!important; margin: -20px 0 0 0; position:absolute; z-index:0; --accent: #639e7b; }]
[PTab=
[/PTab={background-color:transparent; width:385px; height:490px; padding:0px!important; margin: -20px 0 0 0; position:absolute; z-index:0; --accent: #639e7b; }]
[/PTabbedContent={width:385px;background-color:transparent;height:490px;padding:0px!important;border:0px!important;margin-left:0px;margin-top: 0px; }]
[PTabbedContent]
[PTab=
[attr="class","tab"]
][attr="class","tabcontent"]01
[attr="class","left"]
[attr="class","right"]
[attr="class","plotcoverbox"]
[attr="class","plotcover"]
[attr="class","imgbox"]
[attr="class","infotable"]
03 | Daichi Takeshi |
JOROGUMO | 480 | MALE |
[attr="class","plottext"]
Daichi Takeshi
[attr="class","scrollbox"]
Disciple of the Black Order, a ruthless assassin guild. Daichi originates from feudal Japan where he trained as a ninja. He's a bit of a jerk but his priorities aren't terrible.
[attr="class","infotable"]
relations | |||
friends | @ Anzu ~ sister | ||
foes | NONE YET | ||
other | @calliope ~ babysits |
[attr="class","infotable"]
romances | |||
current | Mikaela Lye ~ future romance | ||
former | NONE YET |
[attr="class","infotable"]
searching for | |||
plot | N/A | ||
plot | N/A |
[/PTab={background-color:transparent; width:385px; height:490px; padding:0px!important; margin: -20px 0 0 0; position:absolute; z-index:0; --accent: #607ba2; }]
[PTab=
[attr="class","tab"]
][attr="class","tabcontent"]02
[attr="class","left"]
[attr="class","right"]
[attr="class","plotcoverbox"]
[attr="class","plotcover"]
[attr="class","imgbox"]
[attr="class","infotable"]
04 | Xia Feng |
Water Elemental | 2,121 | Female |
[attr="class","plottext"]
Xia Feng
[attr="class","scrollbox"]
Head doctor of the Assembly of Phantoms, Xia mostly keeps to herself. She doesn't let people close. Those who know her from the Assembly can attest to her ruthlessness. Those who know her from elsewhere only see the facade.
[attr="class","infotable"]
relations | |||
friends | NONE YET | ||
foes | NONE YET | ||
other | NONE YET |
[attr="class","infotable"]
romances | |||
current | NONE YET | ||
former | NONE YET |
[attr="class","infotable"]
searching for | |||
Wrecked | Xia's fake dating this person, mostly to use them or teach them a lesson | ||
Hatemance | As the name reads. Love may or may not be involved but this will be spicy. |
[/PTab={background-color:transparent; width:385px; height:490px; padding:0px!important; margin: -20px 0 0 0; position:absolute; z-index:0; --accent: #7f558e; }]
[PTab=
[attr="class","tab"]
][attr="class","tabcontent"]03
[attr="class","left"]
[attr="class","right"]
[attr="class","plotcoverbox"]
[attr="class","plotcover"]
[attr="class","imgbox"]
[attr="class","infotable"]
04 | Third Character |
RACE| AGE | GENDER |
[attr="class","plottext"]
Character Name
[attr="class","scrollbox"]
Overview
[attr="class","infotable"]
relations | |||
friends | NONE YET | ||
foes | NONE YET | ||
family | @tag ~ relationship[break] @tag ~ relationship[break] @tag ~ relationship[break] |
[attr="class","infotable"]
romances | |||
current | NONE YET | ||
former | NONE YET |
[attr="class","infotable"]
searching for | |||
Plot 1 | plot overview | ||
Plot 2 | second plot overview. |
[/PTab={background-color:transparent; width:385px; height:490px; padding:0px!important; margin: -20px 0 0 0; position:absolute; z-index:0; --accent: #6ab185; }]
[PTab=
[attr="class","tab"]
][attr="class","tabcontent"]04
[attr="class","left"]
[attr="class","right"]
[attr="class","plotcoverbox"]
[attr="class","plotcover"]
[attr="class","imgbox"]
[attr="class","infotable"]
04 | sixth name |
SPECIES| AGE | GENDER |
[attr="class","plottext"]
character six
[attr="class","scrollbox"]
character info here, box six
[attr="class","infotable"]
relations | |||
friends | NONE YET | ||
foes | NONE YET | ||
other | NONE YET |
[attr="class","infotable"]
romances | |||
current | NONE YET | ||
former | NONE YET |
[attr="class","infotable"]
searching for | |||
olot | N/A | ||
plot | N/A |
[/PTab={background-color:transparent; width:385px; height:490px; padding:0px!important; margin: -20px 0 0 0; position:absolute; z-index:0; --accent: #639e7b; }]
[PTab=
[attr="class","tab"]
][attr="class","tabcontent"]05
[attr="class","left"]
[attr="class","right"]
[attr="class","plotcoverbox"]
[attr="class","plotcover"]
[attr="class","imgbox"]
[attr="class","infotable"]
04 | seventh name |
SPECIES| AGE | GENDER |
[attr="class","plottext"]
character seven
[attr="class","scrollbox"]
character info here, box seven
[attr="class","infotable"]
relations | |||
friends | NONE YET | ||
foes | NONE YET | ||
other | NONE YET |
[attr="class","infotable"]
romances | |||
current | NONE YET | ||
former | NONE YET |
[attr="class","infotable"]
searching for | |||
plot | N/A | ||
plot | N/A |
[/PTab={background-color:transparent; width:385px; height:490px; padding:0px!important; margin: -20px 0 0 0; position:absolute; z-index:0; --accent: #639e7b; }]
[PTab=
[attr="class","tab"]
][attr="class","tabcontent"]06
[attr="class","left"]
[attr="class","right"]
[attr="class","plotcoverbox"]
[attr="class","plotcover"]
[attr="class","imgbox"]
[attr="class","infotable"]
04 | eighth name |
SPECIES| AGE | GENDER |
[attr="class","plottext"]
character eight
[attr="class","scrollbox"]
character info here, box eight
[attr="class","infotable"]
relations | |||
friends | NONE YET | ||
foes | NONE YET | ||
other | NONE YET |
[attr="class","infotable"]
romances | |||
current | NONE YET | ||
former | NONE YET |
[attr="class","infotable"]
searching for | |||
plot | N/A | ||
plot | N/A |
[/PTab={background-color:transparent; width:385px; height:490px; padding:0px!important; margin: -20px 0 0 0; position:absolute; z-index:0; --accent: #639e7b; }]
[PTab=
[attr="class","tab"]
][attr="class","tabcontent"]07
[attr="class","left"]
[attr="class","right"]
[attr="class","plotcoverbox"]
[attr="class","plotcover"]
[attr="class","imgbox"]
[attr="class","infotable"]
04 | ninth name |
SPECIES| AGE | GENDER |
[attr="class","plottext"]
character nine
[attr="class","scrollbox"]
character info here, box nine
[attr="class","infotable"]
relations | |||
friends | NONE YET | ||
foes | NONE YET | ||
other | NONE YET |
[attr="class","infotable"]
romances | |||
current | NONE YET | ||
former | NONE YET |
[attr="class","infotable"]
searching for | |||
plot | N/A | ||
plot | N/A |
[/PTab={background-color:transparent; width:385px; height:490px; padding:0px!important; margin: -20px 0 0 0; position:absolute; z-index:0; --accent: #639e7b; }]
[PTab=
[attr="class","tab"]
][attr="class","tabcontent"]08
[attr="class","left"]
[attr="class","right"]
[attr="class","plotcoverbox"]
[attr="class","plotcover"]
[attr="class","imgbox"]
[attr="class","infotable"]
04 | tenthname |
SPECIES| AGE | GENDER |
[attr="class","plottext"]
character ten
[attr="class","scrollbox"]
character info here, box ten
[attr="class","infotable"]
relations | |||
friends | NONE YET | ||
foes | NONE YET | ||
other | NONE YET |
[attr="class","infotable"]
romances | |||
current | NONE YET | ||
former | NONE YET |
[attr="class","infotable"]
searching for | |||
plot | N/A | ||
plot | N/A |
[/PTab={background-color:transparent; width:385px; height:490px; padding:0px!important; margin: -20px 0 0 0; position:absolute; z-index:0; --accent: #639e7b; }]
[/PTabbedContent={width:385px;background-color:transparent;height:490px;padding:0px!important;border:0px!important;margin-left:0px;margin-top: 0px; }]
[attr="class","credit"]made by gimmick
[googlefont=Barlow Condensed:400,600,700]
[googlefont=Barlow:400,500]
[googlefont=Bree Serif:400]
[newclass=".flare-l"]color: rgba(100,100,100,1); width:385px; margin: 20px 0; --typeface-cond: 'Barlow Condensed', sans-serif; --typeface-serif: 'Bree Serif', serif; --slow: all .75s ease; --fast: all 0.2s ease; font: 400 11px/14px 'Barlow', sans-serif; --bgcolor: white; background: transparent; position: relative [/newclass]
[newclass=".flare-l table td"]padding: 0;[/newclass]
[newclass=".flare-l .tab"]font: 400 24px/0px var(--typeface-cond); position:absolute; z-index:20; line-height:10px; padding: 15px 0 0; height: 30px; background: var(--bgcolor); opacity: .25; [/newclass]
[newclass=".flare-l .tabcontent"]width: 45px; color: rgba(100,100,100,1); margin: 1px 0 0 1px[/newclass]
[newclass=".flare-l .PT_table .PT_tabs_selected .tab"]font-weight: 600; opacity: 1; -webkit-transition: var(--fast); -moz-transition: var(--fast); -o-transition: var(--fast); box-shadow: -2px 3px 3px rgba(0,0,0,.1);[/newclass]
[newclass=".flare-l .PT_table .PT_tabs_hover .tab"] opacity: .5; -webkit-transition: var(--fast); -moz-transition: var(--fast); -o-transition: var(--fast);[/newclass]
[newclass=".flare-l .PT_table .PT_tabs_selected_hover .tab"]opacity: 1; font-weight: 600; -webkit-transition: var(--fast); -moz-transition: var(--fast); -o-transition: var(--fast);[/newclass]
[newclass=".flare-l .PT_table .PT_tabs,.flare-l .PT_table .PT_tabs_hover,.flare-l .PT_table .PT_tabs_selected,.flare-l .PT_table .PT_tabs_selected_hover"]color: #666; margin: -10px 0 0 0; border: 0px; text-align:center; text-transform:uppercase; line-height:10px; position:absolute; z-index:20; -webkit-transition: all 1s ease; -moz-transition: var(--fast); -o-transition: var(--fast); cursor:pointer;[/newclass]
[newclass=".flare-l .left"] [/newclass]
[newclass=".flare-l .right"]margin-left:45px; background: var(--bgcolor); box-shadow: 0px 3px 3px rgba(0,0,0,.1);[/newclass]
[newclass=".flare-l h1"]font: 700 96px/53px var(--typeface-cond); text-align: left; letter-spacing: 3px; color: var(--accent); text-align: center; [/newclass]
[newclass=".flare-l h2"]font: 700 48px/46px var(--typeface-cond); text-transform: uppercase; letter-spacing: 0px; padding-bottom: 8px; color: var(--accent); text-align: left[/newclass]
[newclass=".flare-l h3"]font: 700 22px/22px var(--typeface-cond); text-transform: uppercase; letter-spacing: .3px; white-space: nowrap; overflow: hidden; color: var(--accent); text-align: center; [/newclass]
[newclass=".flare-l h4"]font: 700 15px/15px var(--typeface-cond); text-transform: uppercase; letter-spacing: 1.5px; color: var(--accent)[/newclass]
[newclass=".flare-l h5"]font: 400 9px/14px var(--typeface-serif); text-transform: uppercase; letter-spacing: .9px; color: var(--accent) [/newclass]
[newclass=".flare-l p"] font: 500 11px/13px 'Barlow', sans-serif; color: var(--accent); [/newclass]
[newclass=".flare-l a"]font: inherit; color: var(--accent) !important; text-decoration: none !important; -webkit-transition: var(--fast); -moz-transition: var(--fast); -o-transition: var(--fast);[/newclass]
[newclass=".flare-l a:hover"]opacity: .75; -webkit-transition: var(--fast); -moz-transition: var(--fast); -o-transition: var(--fast);[/newclass]
[newclass=".flare-l .credit"] text-align: right; padding-right: 20px; padding-top: 4px; [/newclass]
[newclass=".flare-l .credit a"]font: 500 8px/10px 'Barlow',sans-serif; letter-spacing: .8px; text-decoration: none; text-transform: uppercase; [/newclass]
[newclass=".flare-l .plotcoverbox"]height: 490px; overflow-y: hidden; position: relative;[/newclass]
[newclass=".flare-l .plotcover .imgbox"]width: 300px; height: 350px; overflow: hidden; position: relative; z-index: 5; [/newclass]
[newclass=".flare-l .plotcover .imgbox img"]width: 300px; [/newclass]
[newclass=".flare-l .plotcover"]height: 448px; width: 300px; padding: 0 20px; position: absolute; top: 30px;-webkit-transition: var(--slow); -moz-transition: var(--slow); -o-transition: var(--slow);[/newclass]
[newclass=".flare-l .plotcoverbox:hover .plotcover"]padding: 0 20px; position: absolute; top: -490px; opacity: 0; -webkit-transition: var(--slow); -moz-transition: var(--slow); -o-transition: var(--slow);[/newclass]
[newclass=".flare-l .plottext"]width: 300px; padding: 20px; background: var(--bgcolor); position: absolute; top: 490px; opacity: 0;-webkit-transition: var(--slow); -moz-transition: var(--slow); -o-transition: var(--slow);[/newclass]
[newclass=".flare-l .plotcoverbox:hover .plottext"]padding: 20px; position: absolute; top: 0; opacity: 1; -webkit-transition: var(--slow); -moz-transition: var(--slow); -o-transition: var(--slow);[/newclass]
[newclass=".flare-l .infotable"]width: 100%; position: relative; z-index: 10;[/newclass]
[newclass=".flare-l .infotable td"]border-bottom: .25px dotted #e2e2e2; height: 34px; vertical-align: middle; text-align: center; [/newclass]
[newclass=".flare-l .plottext .infotable tr:first-child td"]height: 27px [/newclass]
[newclass=".flare-l .plottext .infotable tr:not(:first-child) td:first-child"]vertical-align: text-top; text-align: right; border-right: .25px dotted #e2e2e2; padding: 10px 10px 0 0[/newclass]
[newclass=".flare-l .plottext .infotable tr:not(:first-child) td"]height: auto; vertical-align: middle; text-align: left; padding: 10px 0px 10px 12px;[/newclass]
[newclass=".flare-l .plottext .infotable tr:not(:first-child) td:not(:first-child)"] [/newclass]
[newclass=".flare-l .plottext .infotable tr:last-child td"]border-bottom: 0; [/newclass]
[newclass=".flare-l .plottext"]height: calc(100% - 40px); display: grid; grid-template-rows: auto 1fr; justify-content: stretch [/newclass]
[newclass=".flare-l .plottext h2"]grid-row: 1; align-self: start; width: 289px; [/newclass]
[newclass=".flare-l .scrollbox"]/* height: 318px; */ padding-right: 10px; overflow: auto; grid-row: 2; align-self: stretch;[/newclass]
[newclass=".flare-l .scrollbox::-webkit-scrollbar"]-webkit-appearance: none; width: 3px; float: right[/newclass]
[newclass=".flare-l .scrollbox::-webkit-scrollbar-thumb"]background: var(--accent);[/newclass]
[newclass=".flare-l .scrollbox::-webkit-scrollbar-track"]background: var(--bgcolor); border: 1px solid var(--bgcolor);
[/newclass]
[newclass=".flare-l .plotcover td"]color: var(--accent); border-color: var(--accent) !important [/newclass]
[newclass=".flare-l .PT_spots .plottext td"]border-color: var(--accent) !important [/newclass]