posted Dec 3, 2018 18:39:59 GMT -6 in [JCINK] leave the lights on
[googlefont=Roboto:400,600,700|Raleway:200|Roboto+Condensed:400,700]
[attr="class","selk-jc-leavethelightson"]
[googlefont=Montserrat:700,800] [newclass=.ltloTrack] --ltloAccent:#7C6795!important; --ltloBorder:#6F588A!important; [/newclass] [newclass=.ltloTrack] width:550px; background-color:#fcfcfc; display:flex; flex-flow:row wrap; border-radius:5px; border:1px solid #ddd; overflow:hidden; [/newclass] [newclass=.ltloHeader] width:100%; height:150px; position:relative; overflow:hidden; background-color:#aaa; background-color:var(--ltloAccent); display:flex; align-items:center; justify-content:space-between; [/newclass] [newclass=.ltloHeader img] width:200px; height:200px; border-radius:100%; padding:10px; margin-left:25px; background-color:#fafafa; border:25px solid #ccc; border:25px solid var(--ltloBorder); [/newclass] [newclass=.ltloHeader div:nth-child(2)] width:270px; height:270px; margin-left:24px; border:1px solid transparent; border-bottom:1px solid #fff; border-radius:100%; position:absolute; animation:spinner 1.5s linear infinite; animation-play-state: paused; } @keyframes spinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); } [/newclass] [newclass=.ltloTrack:hover .ltloHeader div:nth-child(2)] animation-play-state: running; [/newclass] [newclass=.ltloHeader span] margin:0px 0px 0px 25px; font:300 32px/32px montserrat; text-align:left; color:#fafafa; [/newclass] [newclass=.ltloBody] width: 100%; padding:25px; position:relative; display:flex; flex-flow:row wrap; [/newclass] [newclass=.ltloBody div] display:flex; width:500px; background-color:#; text-align:left; [/newclass] [newclass=.ltloBody div div] background-color:#; padding:10px 10px 10px 25px; display:flex; flex-flow:column nowrap; [/newclass] [newclass=.ltloBody div h1] margin:0px; font:300 20px montserrat; color:#ccc; [/newclass] [newclass=.ltloBody div h1 a] color:var(--ltloAccent); font:300 20px montserrat!important;[/newclass] [newclass=.ltloBody div h2] margin:10px; padding:0px 10px; font:400 10px roboto; color:#bbb; text-transform:uppercase; border-left:1px solid #ddd; border-right:1px solid #ddd; text-align:justify; [/newclass] [newclass=.ltloBody div h2 a] font:400 10px roboto; [/newclass] [newclass=.ltloBody h3] margin:0px; margin-top:auto; font:700 48px/48px montserrat; writing-mode: vertical-rl; margin-left:-35px; color:#ccc; opacity:.25; align-self:flex-start; cursor:default; [/newclass] [newclass=.ltloCredit] font:bold 7px roboto; margin-left:450px; [/newclass] [newclass=.ltloCredit a] font:bold 7px roboto!important; [/newclass]
[attr="class","abc-selk-jc-contain"]
leave the lights on
[attr="class","abc-selk-jc-rules"] 
[attr="class","abc-selk-jc-body"]
[attr="class","abc-selk-jc-text"] apparently the version of this song i had in mind while coding this song is a remix? you learn something new every day, i guess.
the header image is 200 by 200 pixels, and both accents are -- you guessed it -- at the top of the post.
the header image is 200 by 200 pixels, and both accents are -- you guessed it -- at the top of the post.
[attr="class","abc-selk-jc-hash"] [HASH]jcink [HASH]jcinktracking [HASH]jcinklighttracking
[attr="class","abc-selk-jc-colorpickers"]
[attr="class","abc-selk-jc-color"] #6F588A
[attr="class","abc-selk-jc-color"] #7C6795
[attr="class","abc-selk-jc-var"] this template uses css variables for easier editing and is therefore incompatible with internet explorer. if you need this cross-compatibility, use a search and replace to change var(--ltloAccent) and var(--ltloBorder) to the desired hex codes.
[attr="class","selk-code"]
[newclass=.selk-jc-leavethelightson .abc-selk-jc-contain h1, .selk-jc-leavethelightson .abc-selk-jc-hash a, .selk-jc-leavethelightson .abc-selk-jc-rules h2]color:#6F588A!important;[/newclass] [newclass=.selk-jc-leavethelightson .abc-selk-jc-link]background-color:#6F588A!important;[/newclass] [newclass=.abc-selk-jc-contain, .selk-code] --abc-selk-jc-accent:#CCCCCC; [/newclass] [newclass=.abc-selk-jc-contain] width:500px; padding:25px; -webkit-border-top-left-radius: 5px;-webkit-border-top-right-radius: 5px;border-top-left-radius: 5px;border-top-right-radius: 5px; background-color:#eee; display:flex; flex-flow:row-reverse wrap; justify-content:space-between; position:relative; overflow:hidden; [/newclass] [newclass=.abc-selk-jc-contain h1] margin:0px; width:100%; display:flex; flex-flow:row wrap; align-items:center; font:200 32px/32px Raleway; color:var(--abc-selk-jc-accent); [/newclass] [newclass=.abc-selk-jc-contain h1:before] content:''; width:10px; height:1px; background-color:#ccc; flex-grow:2; margin-right:25px; [/newclass] [newclass=.abc-selk-jc-contain h1:after] content:'-Y-Z'; color:#ccc; [/newclass] [newclass=.abc-selk-jc-body] width:350px; border-radius:5px; color:#aaa; font:400 11px roboto; text-align:justify; margin-top:25px; [/newclass] [newclass=.abc-selk-jc-text] background-color:#fafafa; padding:25px; border-radius:5px; [/newclass] [newclass=.abc-selk-jc-hash] margin:25px 0px; text-align:left; [/newclass] [newclass=.abc-selk-jc-hash a] display:inline-block; height:10px; padding:5px 7px; margin:0px 3px 5px 0px; color:var(--abc-selk-jc-accent); background-color:#ddd; border-radius:2px; text-transform:uppercase; font:600 10px/10px roboto; [/newclass] [newclass=.abc-selk-jc-colorpickers] width:350px; display:flex; flex-flow:row-reverse wrap; align-items:flex-start; [/newclass] [newclass=.abc-selk-jc-color] display:flex; flex-flow:row-reverse nowrap; width:350px; [/newclass] [newclass=.abc-selk-jc-color div] height:10px; display:inline-block; margin-left:41px; background-color:#ccc; [/newclass] [newclass=.abc-selk-jc-color span] height:10px; width:0px; display:flex; font:600 9px/10px Roboto; color:#ccc; [/newclass] [newclass=.abc-selk-jc-var] width:340px; font:400 10px/13px roboto; margin-top:25px; padding-right:10px; height:25px; overflow:auto; [/newclass] [newclass=.abc-selk-jc-var::-webkit-scrollbar] width:5px; border:0px; [/newclass] [newclass=.abc-selk-jc-var::-webkit-scrollbar-thumb] background-color:#999; border:0px; [/newclass] [newclass=.abc-selk-jc-var::-webkit-scrollbar-track] background-color:#ddd; border:0px; [/newclass] [newclass=.abc-selk-jc-rules] margin:25px 0px 0px 0px; text-align:left; width:125px; display:flex; justify-content:flex-start; align-self:stretch; align-items:flex-end; flex-flow:column nowrap; border-left:1px solid #ddd; [/newclass] [newclass=.abc-selk-jc-rules h2] margin:0px; display:block; width:50px; height:50px; background-color:var(--abc-selk-jc-accent); border-radius:5px; [/newclass] [newclass=.abc-selk-jc-rules img] width:100px; height:100px; border-radius:5px; [/newclass] [newclass=.selk-code] background-color:#eee; width:500px; padding:25px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; margin-top:-25px; position:relative; overflow:hidden; [/newclass] [newclass=.selk-code div] margin:0px!important; display:flex; flex-flow:row wrap; align-items:center; justify-content:center; [/newclass] [newclass=.selk-code div span] display:inline-block; font:700 9px roboto; color:#333; text-transform:uppercase; background-color:#ddd; margin:0px 5px 25px 0px; padding:5px 8px; border-radius:3px; [/newclass] [newclass=.selk-code code] display:block; width:400px!important; height:100px!important;overflow:auto!important; padding:25px!important; text-align:justify; border-radius:5px; font:11px roboto; color:#aaa; background-color:#f7f7f7; border:0px!important; [/newclass] [newclass=.selk-code .code_tag_toggle]margin-top:25px; border:0px!important; color:#333!important; font:700 9px/9px roboto!important; padding:5px 10px!important; border-radius:3px!important;[/newclass] [newclass=.abc-selk-jc-link] position:absolute; bottom:0px; left:0px; height:45px; width:45px!important; background-color:var(--abc-selk-jc-accent); display:flex!important; align-items:center!important; justify-content:center!important; border-radius:0px; [/newclass] [newclass=.abc-selk-jc-link i] font-size:20px; color:#fafafa; [/newclass] edit as much as you want! don't touch the credits! i'd love to see how you use it!
[dohtml]<style>
.ltloTrack { --ltloAccent:#7C6795!important; --ltloBorder:#6F588A!important; }
</style>
<div align="center"><div class="ltloTrack">
<div class="ltloHeader">
<img src="https://image.ibb.co/jEpSbz/image.png">
<div></div>
<span>
firstname's tracker
</span>
</div>
<div class="ltloBody">
<div>
<h3><i>active</i></h3>
<div>
<h1><a href="thread-link">
i know that it's a secret
</a></h1>
<h2>
and that i gotta keep it, with @admin
</h2>
<h1><a href="thread-link">
but i want the lights on
</a></h1>
<h2>
yeah i want the lights on
</h2>
<h1><a href="thread-link">
i don't want to run away anymore
</a></h1>
<h2>
leave the lights on, leave the lights on
</h2>
</div>
</div>
<div>
<h3><i>ended</i></h3>
<div>
<h1><a href="thread-link">
what would they say
</a></h1>
<h2>
what would they do?
</h2>
<h1><a href="thread-link">
would it be trouble
</a></h1>
<h2>
if they knew?
</h2>
<h1><a href="thread-link">
i'm trying hard to make you see
</a></h1>
<h2>
all that you are is all that i need
</h2>
</div>
</div>
<div>
<h3><i>inactive</i></h3>
<div>
<h1><a href="thread-link">
i know that it's a secret
</a></h1>
<h2>
and that i gotta keep it
</h2>
<h1><a href="thread-link">
but i want the lights on
</a></h1>
<h2>
yeah i want the lights on
</h2>
<h1><a href="thread-link">
i don't want to run away anymore
</a></h1>
<h2>
leave the lights on, leave the lights on
</h2>
<h1><a href="thread-link">
i know that it's a secret
</a></h1>
<h2>
and that i gotta keep it but i want the lights on yeah i want the lights on, i don't want to run away anymore leave the lights on leave the lights on
</h2>
</div>
</div>
</div>
</div>
<div class="ltloCredit"><a href="http://pixel-perfect.boards.net/user/15">SELKIE</a></div>
</div>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700|Montserrat:300,700,800" rel="stylesheet">
</head>
<style>
.ltloTrack { width:550px; background-color:#fcfcfc; display:flex; flex-flow:row wrap; border-radius:5px; border:1px solid #ddd; overflow:hidden; }
.ltloHeader { width:100%; height:150px; position:relative; overflow:hidden; background-color:#aaa; background-color:var(--ltloAccent); display:flex; align-items:center; justify-content:space-between; }
.ltloHeader img { width:200px; height:200px; border-radius:100%; padding:10px; margin-left:25px; background-color:#fafafa; border:25px solid #ccc; border:25px solid var(--ltloBorder); }
.ltloHeader div:nth-child(2) { width:270px; height:270px; margin-left:24px; border:1px solid transparent; border-bottom:1px solid #fff; border-radius:100%; position:absolute; animation:spinner 1.5s linear infinite; animation-play-state: paused; }
@keyframes spinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); } }
.ltloTrack:hover .ltloHeader div:nth-child(2) { animation-play-state: running; }
.ltloHeader span { margin:0px 0px 0px 25px; font:300 32px/32px montserrat; text-align:left; color:#fafafa; }
.ltloBody { width: 100%; padding:25px; position:relative; display:flex; flex-flow:row wrap; }
.ltloBody div { display:flex; width:500px; background-color:#; text-align:left; }
.ltloBody div div { background-color:#; padding:10px 10px 10px 25px; display:flex; flex-flow:column nowrap; }
.ltloBody div h1 { margin:0px; font:300 20px montserrat; color:#ccc; }
.ltloBody div h1 a { color:var(--ltloAccent); font:300 20px montserrat!important;}
.ltloBody div h2 { margin:10px; padding:0px 10px; font:400 10px roboto; color:#bbb; text-transform:uppercase; border-left:1px solid #ddd; border-right:1px solid #ddd; text-align:justify; }
.ltloBody div h2 a { font:400 10px roboto; }
.ltloBody h3 { margin:0px; margin-top:auto; font:700 48px/48px montserrat; writing-mode: vertical-rl; margin-left:-35px; color:#ccc; opacity:.25; align-self:flex-start; cursor:default; }
.ltloCredit { font:bold 7px roboto; margin-left:450px; }
.ltloCredit a { font:bold 7px roboto!important; }
</style>[/dohtml] [attr="class","abc-selk-jc-link"] [attr="class","lnr lnr-link"]
[googlefont=Montserrat:700,800]
[attr="class","ltloTrack"]
[attr="class","ltloHeader"] 
firstname's tracker
firstname's tracker [attr="class","ltloBody"]
active
i know that it's a secret
and that i gotta keep it, with vriska
but i want the lights on
yeah i want the lights on
i don't want to run away anymore
leave the lights on, leave the lights on
ended
what would they say
what would they do?
would it be trouble
if they knew?
i'm trying hard to make you see
all that you are is all that i need
inactive
i know that it's a secret
and that i gotta keep it
but i want the lights on
yeah i want the lights on
i don't want to run away anymore
leave the lights on, leave the lights on
i know that it's a secret
and that i gotta keep it but i want the lights on yeah i want the lights on, i don't want to run away anymore leave the lights on leave the lights on
[attr="class","ltloCredit"]SELKIE