sox
محبت
[class=bkgd]
position: relative;
overflow: hidden;
margin-right: auto;
margin-left: auto;
width: 20em;
height: 30.5em;
border: 2px solid #d62026;
padding-top: 2em;
border-radius: 1em;
[/class]
[class=ghost]
position: relative;
overflow: visible;
margin-right: auto;
margin-left: auto;
width: 6em;
height: 6em;
background: url(https://imgur.com/H2Sramh.png);
background-size: 100%;
animation: {post_id}hover 5s linear infinite;
[/class]
[class=shaker]
animation: {post_id}shake 10s linear infinite;
[/class]
[class=shadow]
position: relative;
overflow: visible;
margin-right: auto;
margin-left: auto;
width: 2.8em;
height: .3em;
top: 8em;
background: #000;
border-radius: 100%;
animation: {post_id}resize 5s linear infinite;
[/class]
[class=text]
position: relative;
overflow: auto;
margin-right: auto;
margin-left: auto;
width: 108%;
height: 30em;
text-align: center;
font-size: 10px;
[/class]
[class=credit]
position: relative;
overflow: hidden;
width: 100%;
height: 10px;
text-align: center;
font-style: normal;
font-weight: normal;
font-size: 8px;
color: #707070;
opacity: 0.3;
[/class]
[animation=hover]
[keyframe=0]transform: translateY(0.5em);[/keyframe]
[keyframe=50]transform: translateY(-0.5em);[/keyframe]
[keyframe=100]transform: translateY(0.5em);[/keyframe]
[/animation]
[animation=resize]
[keyframe=0]transform: scale(1.1);[/keyframe]
[keyframe=50]transform: scale(0.9);[/keyframe]
[keyframe=100]transform: scale(1.1);[/keyframe]
[/animation]
[animation=shake]
[keyframe=0]transform: translate(1px, 1px) rotate(5deg);[/keyframe]
[keyframe=10]transform: translate(-1px, -2px) rotate(-5deg);[/keyframe]
[keyframe=20]transform: translate(1px, 1px) rotate(5deg);[/keyframe]
[keyframe=30]transform: translate(-1px, -2px) rotate(-5deg);[/keyframe]
[keyframe=40]transform: translate(1px, 1px) rotate(5deg);[/keyframe]
[keyframe=50]transform: translate(-1px, -2px) rotate(-5deg);[/keyframe]
[keyframe=60]transform: translate(1px, 1px) rotate(5deg);[/keyframe]
[keyframe=70]transform: translate(-1px, -2px) rotate(-5deg);[/keyframe]
[keyframe=80]transform: translate(1px, 1px) rotate(5deg);[/keyframe]
[keyframe=90]transform: translate(-1px, -2px) rotate(-5deg);[/keyframe]
[keyframe=100]transform: translate(1px, 1px) rotate(5deg);[/keyframe]
[/animation]
[div class=bkgd][div class=shadow][/div][div class=shaker][div class=ghost][/div][/div]
[div class=text]
Basics
Name:
Nickname: (opt.)
Age:
Gender:
Sexuality:
Birthday:
Role:
Appearance
Hair Color:
Eye Color:
Height/Weight:
Body Type:
Distinguishing Features:
Body Mods:
Faceclaim: (realistic only)
Persona
Vices: (5+, each described or in paragraph form)
Virtues: (5+, each described or in paragraph form)
Likes: (3+)
Dislikes: (3+)
Habits/Quirks:
Fears/Weaknesses: (3+)
Background
Family:
Residence:
Education:
History: 5+ sentences
Misc.
Theme Song: (opt.)
Favorites: (such as drink, food, movie, book, etc.) (opt.)
Enneagram type: (opt.)
Alignment: (opt.)
Other:
Relationships: (leave blank for now)
[/div]
[/div][div class=credit]code by
sox
[/div]
[div class=bkgd][div class=shadow][/div][div class=shaker][div class=ghost][/div][/div]
[div class=text]
Basics
Name:
Nickname: (opt.)
Age:
Gender:
Sexuality:
Birthday:
Role:
Appearance
Hair Color:
Eye Color:
Height/Weight:
Body Type:
Distinguishing Features:
Body Mods:
Faceclaim: (realistic only)
Persona
Vices: (5+, each described or in paragraph form)
Virtues: (5+, each described or in paragraph form)
Likes: (3+)
Dislikes: (3+)
Habits/Quirks:
Fears/Weaknesses: (3+)
Background
Family:
Residence:
Education:
History: 5+ sentences
Misc.
Theme Song: (opt.)
Favorites: (such as drink, food, movie, book, etc.) (opt.)
Enneagram type: (opt.)
Alignment: (opt.)
Other:
Relationships: (leave blank for now)
[/div]
[/div][div class=credit]code by
sox
[/div]
blique;
box-sizing:border-box;
[/class]
[class=postshare]
height:50%;
width:30%;
font-size:11.5px;
color: #9393ad;
letter-spacing:2px;
text-align:right;
padding-right:5px;
box-sizing:border-box;
cursor:pointer;
[/class]
[class=postcaption]
height:50%;
width:100%;
overflow:hidden;
font-size:11px;
color: var(--t-color);
[/class]
[class=postusername]
font-size: 12px;
font-weight:bold;
letter-spacing:0.5px;
color: var(--color-3);
display:inline;
margin-right:4px;
cursor:pointer;
[/class]
[class=postatperson]
display:inline;
transition:0.2s;
[/class]
[class name=postatperson state=hover]
text-decoration:underline;
color: var(--color-3);
transition:0.2s;
cursor:pointer;
[/class]
[class=postatpersond]
display:inline;
transition:0.2s;
[/class]
[class name=postatpersond state=hover]
text-decoration:underline;
color: var(--color-3);
transition:0.2s;
cursor:pointer;
[/class]
[script class=postatpersond on=mouseenter]
fadeIn 300 dog
[/script]
[script class=postatpersond on=mouseleave]
fadeOut 300 dog
[/script]
[class=dog]
height:80px;
width:80px;
position:absolute;
z-index:8;
right:-10px;
top:35px;
border-radius:2px;
display:none;
background: url('https://pbs.twimg.com/media/DgQFUXDUYAArXSY.jpg');
background-size:100%;
[/class]
[class=picturecon]
height:83%;
width:200%;
display:flex;
flex-flow: row nowrap;
position:relative;
[/class]
[class=hovertitle]
height:100%;
width:100%;
position:absolute;
font-size:25px;
color: white;
text-shadow:2px 2px var(--color-2);
font-weight:bold;
letter-spacing:0.3px;
text-align:left;
left:10px;
top:-5px;
opacity:0;
transition: 0.8s;
padding-left:100px;
box-sizing:border-box;
[/class]
[class name=hovertitle state=hover]
padding-left:0px;
opacity:0.9;
transition: 0.5s;
[/class]
[class=rightarrow]
font-size:33px;
height:20%;
width:10%;
color:white;
opacity:0.8;
position:absolute;
right:10px;
cursor:pointer;
top:50%;
margin-top: -10%;
text-align:right;
[/class]
[class=leftarrow]
font-size:33px;
height:20%;
width:10%;
color: var(--border);
opacity:0.8;
position:absolute;
left:10px;
cursor:pointer;
top:50%;
margin-top: -10%;
[/class]
[class=postmover]
transform: translate(-278px);
transition:1s all ease-in-out;
[/class]
[class=postmovel]
transform: translate(0px);
transition:1s all ease-in-out;
[/class]
[script class=rightarrow on=click version=2]
(= currentTab (index (split (getText) "#") 0 ))
(addClass "postmover" (+ currentTab "post"))
(removeClass "postmovel" (+ currentTab "post"))
[/script]
[script class=leftarrow on=click version=2]
(= currentTab (index (split (getText) "#") 0 ))
(addClass "postmovel" (+ currentTab "post"))
(removeClass "postmover" (+ currentTab "post"))
[/script]
[class=postblock]
height:10%;
width:100%;
[/class]
[class=picture1]
height:100%;
width:50%;
background: var(--pimg-1);
background-size:100%;
background-position:50% 10%;
position:relative;
[/class]
[class=picture2]
height:100%;
width:50%;
background: var(--pimg-2);
background-size:100%;
background-position:50% 40%;
position:relative;
[/class]
[class=picture3]
height:100%;
width:50%;
background: var(--pimg-3);
background-size:100%;
background-position:50% 40%;
position:relative;
[/class]
[class=picture4]
height:100%;
width:50%;
background: var(--pimg-4);
background-size:100%;
background-position:50% 40%;
position:relative;
[/class]
[class=piccontent]
height:100%;
width:50%;
padding:5px;
box-sizing:border-box;
position:relative;
text-align:justify;
overflow:hidden;
border:1px solid var(--border);
font-size:11px;
color: var(--t-color);
[/class]
[class=picscroll]
width:92%;
height:100%;
overflow-y:scroll;
padding-right:40px;
[/class]
[class name=picscroll minWidth="500px"]
width:92%;
height:100%;
overflow-y:scroll;
padding-right:40px;
margin-left:12%;
[/class]
[class=tag]
display:inline-block;
border-radius:1px;
background-color: var(--color-1);
padding:1px;
padding-right:4px;
padding-left:4px;
letter-spacing:0.5px;
margin-right:3px;
margin-top:5px;
font-weight:bold;
color: var(--color-2);
[/class]
[class=asks]
height:100%;
width:100%;
padding:15px;
padding-top:10px;
box-sizing:border-box;
overflow:hidden;
font-size:10px;
color: var(--t-color);
text-align:justify;
[/class]
[class=aboutcon]
height:96%;
width:90%;
display:flex;
flex-flow:row wrap;
margin:auto;
margin-top:-5px;
margin-bottom:10px;
position:relative;
top:-5px;
[/class]
[class=aboutheader]
font-size:22px;
width:100%;
color: var(--color-2);
text-shadow: 2px 2px white;
letter-spacing:1px;
text-transform:lowercase;
font-weight:bold;
z-index:6;
position:relative;
display:inline;
[/class]
[class=aboutbody]
height:91%;
width:100%;
padding:3px;
padding-top:6px;
padding-bottom:6px;
box-sizing:border-box;
background-color: var(--color-1);
border-radius:3px;
text-align:justify;
font-size:10px;
line-height:160%;
overflow:hidden;
position:relative;
top:-13px;
[/class]
[class=question]
min-height:5%;
max-height:50%;
width:100%;
background-color: var(--color-3);
color:white;
text-transform:uppercase;
text-align:justify;
font-size:10px;
position:sticky;
margin-bottom:8px;
margin-top:5px;
top:0px;
padding:5px;
box-sizing:border-box;
border-radius:5px;
display:block;
[/class]
[class=asker]
display:inline;
letter-spacing:1px;
font-weight:bold;
[/class]
[class=replies]
display:inline;
font-weight:bold;
color:var(--color-3);
letter-spacing:0.5px;
[/class]
[class=replyiconb]
height:50px;
width:50px;
border:2px solid var(--color-1);
padding:5px;
border-radius:50%;
float:left;
margin-right:10px;
margin-bottom:3px;
margin-left:5px;
transition:0.3s;
[/class]
[class name=replyiconb state=hover]
transform: scale(1.06);
transition:0.3s;
[/class]
[class=replyicon]
height:100%;
width:100%;
background: var(--img-2);
background-size:100%;
border-radius:50%;
[/class]
[class=friends]
--rs-1: url('https://66.media.tumblr.com/1d54a576b64a64140f25246134f88afe/tumblr_pg4kq6VqpA1tc5gvpo6_250.png');
--rs-2: url('https://66.media.tumblr.com/cf3f6164d9699b9d5956689078c72c56/2df0f76decf25d5b-c4/s400x600/06edc8b6ebc229d435c10610aab18a3890e4f1eb.png');
--rs-3: url('https://i.pinimg.com/originals/df/89/92/df89927c2d4a58580f37f5d5b4141514.jpg');
--rs-4: url('https://66.media.tumblr.com/c78a8ecd73b293863ed753df36ee39cf/tumblr_otxmmh7rAt1w3t9ywo1_250.png');
--rs-5: url('https://66.media.tumblr.com/21d4e9a5ea079a1d80944d3c4d10637b/tumblr_p3v4prrXdo1vzw2uuo5_400.png');
--rs-6: url('https://66.media.tumblr.com/e33bd95cf6238a09f14cba5f59f7c8be/3d77dda6d6031af8-8e/s1280x1920/624f17afdc8ef9ca7c3edcd0ae000a37d28ab627.jpg');
--rs-7: url('https://66.media.tumblr.com/e090f8c58df2f7bf3ff3924f57969243/tumblr_pqf1g4Pl7P1wxi1d9_1280.png');
--rs-8: url('https://66.media.tumblr.com/df3997fc7ffc1219e6e49de3683d1b40/tumblr_pafpe8AIWp1x6lzrbo6_250.png');
--rs-9: url('https://66.media.tumblr.com/05da928d932aec96b8f1ed81169d3c93/tumblr_oj60wigTta1uuv07wo3_250.png');
height:100%;
width:100%;
padding:3px;
box-sizing:border-box;
overflow:hidden;
position:relative;
justify-content: space-between;
[/class]
[class=rscon]
height:100%;
width:100%;
display:flex;
flex-flow:row wrap;
justify-content: space-between;
padding:5px;
[/class]
[class=rsnoclick]
pointer-events:none;
[/class]
[class=rs]
height:120px;
width:30%;
[/class]
[script class=rs on=click version=2]
(= currentTab (index (split (getText) "#") 0 ))
(slideDown 550 (+ currentTab "rs"))
[/script]
[class=rsname]
color: var(--color-4);
font-weight:bold;
letter-spacing:1px;
font-size:13px;
text-align:center;
text-transform:uppercase;
[/class]
[class=rsnames]
color: var(--color-4);
font-weight:bold;
letter-spacing:1px;
font-size:12px;
text-align:center;
text-transform:uppercase;
[/class]
[class=rsnamexs]
color: var(--color-4);
font-weight:bold;
letter-spacing:0.5px;
font-size:11px;
text-align:center;
text-transform:uppercase;
[/class]
[class=rsiconb]
height:72px;
width:72px;
border:1px solid var(--border);
border-radius:50%;
padding:5px;
transition:0.3s;
margin:auto;
margin-bottom:8px;
[/class]
[class name=rsiconb state=hover]
transform: scale(1.05);
transition:0.3s;
cursor:pointer;
[/class]
[class=rsicon1]
height:100%;
width:100%;
border-radius:50%;
background: var(--rs-1);
background-size:100%;
[/class]
[class=rsicon2]
height:100%;
width:100%;
border-radius:50%;
background: var(--rs-2);
background-size:100%;
[/class]
[class=rsicon3]
height:100%;
width:100%;
border-radius:50%;
background: var(--rs-3);
background-size:100%;
[/class]
[class=rsicon4]
height:100%;
width:100%;
border-radius:50%;
background: var(--rs-4);
background-size:100%;
[/class]
[class=rsicon5]
height:100%;
width:100%;
border-radius:50%;
background: var(--rs-5);
background-size:100%;
[/class]
[class=rsicon6]
height:100%;
width:100%;
border-radius:50%;
background: var(--rs-6);
background-size:100%;
[/class]
[class=rsicon7]
height:100%;
width:100%;
border-radius:50%;
background: var(--rs-7);
background-size:100%;
[/class]
[class=rsicon8]
height:100%;
width:100%;
border-radius:50%;
background: var(--rs-8);
background-size:100%;
[/class]
[class=rsicon9]
height:100%;
width:100%;
border-radius:50%;
background: var(--rs-9);
background-size:100%;
[/class]
[class=rsdetails]
height:40%;
width:70%;
border:1px solid var(--color-4);
border-top:33px solid var(--color-4);
border-radius:3px;
position:absolute;
top: 50%;
margin-top: -35%;
left:50%;
margin-left: -35%;
background-color:white;
display:none;
[/class]
[class=rsdname]
font-size:20px;
color:white;
letter-spacing:1px;
position:absolute;
top:-33px;
font-weight:bold;
left:5px;
[/class]
[class=closebutton]
font-size:20px;
color:white;
position:absolute;
right:8px;
top:-33px;
cursor:pointer;
[/class]
[script class=closebutton version=2 on=click]
(= currentTab (index (split (getText) "#") 0 ))
(slideUp 550 (+ currentTab "rs"))
[/script]
[class=rstext]
height:100%;
width:100%;
padding:5px;
box-sizing:border-box;
font-size:10px;
position:relative;
overflow:hidden;
text-align:justify;
line-height:140%;
[/class]
[class=status]
font-size:20px;
color: var(--color-4);
position:absolute;
right:7px;
top:3px;
[/class]
[class=rscroll]
width:94%;
height:100%;
overflow-y:scroll;
padding-right:40px;
[/class]
