posted Dec 3, 2018 18:26:17 GMT -6 in leave the lights on
[nospaces][googlefont=Roboto:400,600,700|Raleway:200|Roboto+Condensed:400,700]
[newclass=.selk-leavethelightson .abc-selk-contain h1, .selk-leavethelightson .abc-selk-hash a, .selk-leavethelightson .abc-selk-rules h2]color:#7C6795!important;[/newclass]
[newclass=.selk-leavethelightson .abc-selk-link]background-color:#7C6795!important;[/newclass]
[newclass=.abc-selk-contain, .selk-code] --abc-selk-accent:#CCCCCC; [/newclass]
[newclass=.abc-selk-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 wrap; justify-content:space-between; position:relative; overflow:hidden; [/newclass]
[newclass=.abc-selk-contain h1] margin:0px; width:100%; display:flex; flex-flow:row wrap; align-items:center; font:200 32px/32px Raleway; color:var(--abc-selk-accent); [/newclass]
[newclass=.abc-selk-contain h1:after] content:''; width:10px; height:1px; background-color:#ccc; flex-grow:2; margin-left:25px; [/newclass]
[newclass=.abc-selk-contain h1:before] content:'A-B-'; color:#ccc; [/newclass]
[newclass=.abc-selk-body] width:350px; border-radius:5px; color:#aaa; font:400 11px roboto; text-align:justify; margin-top:25px; [/newclass]
[newclass=.abc-selk-text] background-color:#fafafa; padding:25px; border-radius:5px; [/newclass]
[newclass=.abc-selk-hash] margin:25px 0px; text-align:left; [/newclass]
[newclass=.abc-selk-hash a] display:inline-block; height:10px; padding:5px 7px; margin:0px 3px 5px 0px; color:var(--abc-selk-accent); background-color:#ddd; border-radius:2px; text-transform:uppercase; font:600 10px/10px roboto; [/newclass]
[newclass=.abc-selk-colorpickers] width:309px; display:flex; flex-flow:row wrap; align-items:flex-start; [/newclass]
[newclass=.abc-selk-color] display:flex; flex-flow:row nowrap; width:309px; [/newclass]
[newclass=.abc-selk-color div] height:10px; display:inline-block; margin-right:5px; background-color:#ccc; [/newclass]
[newclass=.abc-selk-color span] height:10px; width:0px; display:flex; font:600 9px/10px Roboto; color:#ccc; [/newclass]
[newclass=.abc-selk-var] width:340px; font:400 10px/13px roboto; margin-top:25px; padding-right:10px; height:25px; overflow:auto; [/newclass]
[newclass=.abc-selk-var::-webkit-scrollbar] width:5px; border:0px; [/newclass]
[newclass=.abc-selk-var::-webkit-scrollbar-thumb] background-color:#999; border:0px; [/newclass]
[newclass=.abc-selk-var::-webkit-scrollbar-track] background-color:#ddd; border:0px; [/newclass]
[newclass=.abc-selk-rules] margin:25px 0px 0px 0px; text-align:left; width:125px; display:flex; justify-content:flex-start; align-self:stretch; flex-flow:column nowrap; border-right:1px solid #ddd; [/newclass]
[newclass=.abc-selk-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-link] position:absolute; bottom:0px; right:0px; height:45px; width:45px!important; background-color:var(--abc-selk-accent); display:flex!important; align-items:center!important; justify-content:center!important; border-radius:0px; [/newclass]
[newclass=.abc-selk-link i] font-size:20px; color:#fafafa; [/newclass] [break][break]
[googlefont=Montserrat:300,700,800|Roboto:400,400i,700]
[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","selk-leavethelightson"]
[attr="class","abc-selk-contain"]
leave the lights on
[attr="class","abc-selk-rules"]
[attr="class","abc-selk-body"]
[attr="class","abc-selk-text"]
did y'all know that i hate coding trackers, because i'm awful at designing them? completely unrelated, here's a tracker. [break][break] the header image is 200 by 200 pixels, and both accents are -- you guessed it -- at the top of the post.
did y'all know that i hate coding trackers, because i'm awful at designing them? completely unrelated, here's a tracker. [break][break] 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-hash"]
[HASH]lighttracking [HASH]bigimage [HASH]animation [HASH]noscroll [HASH]montserrat [HASH]roboto [HASH]abcsofcode
[HASH]lighttracking [HASH]bigimage [HASH]animation [HASH]noscroll [HASH]montserrat [HASH]roboto [HASH]abcsofcode
[attr="class","abc-selk-colorpickers"]
[attr="class","abc-selk-color"]
#6F588A
#6F588A
[attr="class","abc-selk-color"]
#7C6795
#7C6795
[attr="class","abc-selk-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.
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"]
edit as much as you want!
don't touch the credits!
i'd love to see how you use it!
edit as much as you want!
don't touch the credits!
i'd love to see how you use it!
[nospaces][googlefont=Montserrat:300,700,800|Roboto:400,400i,700]
[newclass=.ltloTrack] --ltloAccent:#7C6795!important; --ltloBorder:#6F588A!important; [/newclass]
[div align="center"][div][attr="class","ltloTrack"]
[div][attr="class","ltloHeader"]
[img src="https://image.ibb.co/jEpSbz/image.png"]
[div][/div]
[span]
firstname's tracker
[/span]
[/div]
[div][attr="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][attr="class","ltloCredit"][a href="http://pixel-perfect.boards.net/user/15"]SELKIE[/a][/div]
[/div]
[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-link"]
[attr="class","lnr lnr-link"]
[attr="class","lnr lnr-link"]
[newclass=.selk-leavethelightson .abc-selk-contain h1, .selk-leavethelightson .abc-selk-hash a, .selk-leavethelightson .abc-selk-rules h2]color:#7C6795!important;[/newclass]
[newclass=.selk-leavethelightson .abc-selk-link]background-color:#7C6795!important;[/newclass]
[newclass=.abc-selk-contain, .selk-code] --abc-selk-accent:#CCCCCC; [/newclass]
[newclass=.abc-selk-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 wrap; justify-content:space-between; position:relative; overflow:hidden; [/newclass]
[newclass=.abc-selk-contain h1] margin:0px; width:100%; display:flex; flex-flow:row wrap; align-items:center; font:200 32px/32px Raleway; color:var(--abc-selk-accent); [/newclass]
[newclass=.abc-selk-contain h1:after] content:''; width:10px; height:1px; background-color:#ccc; flex-grow:2; margin-left:25px; [/newclass]
[newclass=.abc-selk-contain h1:before] content:'A-B-'; color:#ccc; [/newclass]
[newclass=.abc-selk-body] width:350px; border-radius:5px; color:#aaa; font:400 11px roboto; text-align:justify; margin-top:25px; [/newclass]
[newclass=.abc-selk-text] background-color:#fafafa; padding:25px; border-radius:5px; [/newclass]
[newclass=.abc-selk-hash] margin:25px 0px; text-align:left; [/newclass]
[newclass=.abc-selk-hash a] display:inline-block; height:10px; padding:5px 7px; margin:0px 3px 5px 0px; color:var(--abc-selk-accent); background-color:#ddd; border-radius:2px; text-transform:uppercase; font:600 10px/10px roboto; [/newclass]
[newclass=.abc-selk-colorpickers] width:309px; display:flex; flex-flow:row wrap; align-items:flex-start; [/newclass]
[newclass=.abc-selk-color] display:flex; flex-flow:row nowrap; width:309px; [/newclass]
[newclass=.abc-selk-color div] height:10px; display:inline-block; margin-right:5px; background-color:#ccc; [/newclass]
[newclass=.abc-selk-color span] height:10px; width:0px; display:flex; font:600 9px/10px Roboto; color:#ccc; [/newclass]
[newclass=.abc-selk-var] width:340px; font:400 10px/13px roboto; margin-top:25px; padding-right:10px; height:25px; overflow:auto; [/newclass]
[newclass=.abc-selk-var::-webkit-scrollbar] width:5px; border:0px; [/newclass]
[newclass=.abc-selk-var::-webkit-scrollbar-thumb] background-color:#999; border:0px; [/newclass]
[newclass=.abc-selk-var::-webkit-scrollbar-track] background-color:#ddd; border:0px; [/newclass]
[newclass=.abc-selk-rules] margin:25px 0px 0px 0px; text-align:left; width:125px; display:flex; justify-content:flex-start; align-self:stretch; flex-flow:column nowrap; border-right:1px solid #ddd; [/newclass]
[newclass=.abc-selk-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-link] position:absolute; bottom:0px; right:0px; height:45px; width:45px!important; background-color:var(--abc-selk-accent); display:flex!important; align-items:center!important; justify-content:center!important; border-radius:0px; [/newclass]
[newclass=.abc-selk-link i] font-size:20px; color:#fafafa; [/newclass] [break][break]
[googlefont=Montserrat:300,700,800|Roboto:400,400i,700]
[newclass=.ltloTrack] --ltloAccent:#7C6795!important; --ltloBorder:#6F588A!important; [/newclass]
[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
[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]