themes/21-Punchline

2361 lines
67 KiB
Plaintext

<!----------------------------------------------------
Theme [21]: Punchline
Made by glenthemes
Initial release: 2016/12/23
Major facelift: 2021/02/20
Last updated: 2023/09/04
What's new:
✱ NPF audio post support
TERMS OF USE:
1) Do not remove the theme credit.
2) Do not repost/redistribute my themes.
3) Do not take parts of the code and use it as your own.
4) Do not use my themes as a base code.
5) Do not mix my themes together.
----------------------------------------------------->
<!DOCTYPE html>
<html>
<head>
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<!------------------------------------->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="//static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
<script>
(function($){
$(document).ready(function(){
$("a[title]").style_my_tooltips({
tip_follows_cursor:true,
tip_delay_time:0,
tip_fade_speed:69,
attribute:"title"
});
});
})(jQuery);
</script>
<!------ FONTS ------->
<link href="//fonts.googleapis.com/css?family=Karla|Cousine|Libre+Franklin|Chakra+Petch|K2D" rel="stylesheet">
<link rel="stylesheet" href="//static.tumblr.com/2pnwama/IUZoyg6qw/specialfonts.css">
<!------ ICON FONTS ------->
<link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="//static.tumblr.com/2pnwama/DLppehqvd/feathericons.js"></script>
<!------ THEME SCRIPTS ------->
<script src="//rawgit.com/robinpx/tumblr/master/scripts/flexibleFrames/flexibleFrames.min.js"></script>
<link href="https://static.tumblr.com/0podkko/oDSpg7y88/photosets.css" rel="stylesheet">
<script src="//glen-themes.gitlab.io/thms/21/fkn-audio.js"></script>
<link rel="stylesheet" media="screen" href="//assets.tumblr.com/client/prod/standalone/blog-network-npf/index.build.css">
<script src="//npf-images-v3.github.io/script.js"></script>
<link rel="stylesheet" href="//npf-images-v3.github.io/recon.css">
<script src="//static.tumblr.com/gtjt4bo/sgMrymui0/waitforelement.js"></script>
<script src="//glen-themes.gitlab.io/thms/21/viceps.js"></script>
<script src="//glen-themes.gitlab.io/thms/21/her-cupcake.js"></script>
{block:ifshowmusicplayer}
<script src="//glenthemes.github.io/-music-/glenplayer06.js"></script>
{/block:ifshowmusicplayer}
<script>
// minimal soundcloud player @ shythemes.tumblr
// shythemes.tumblr.com/post/114792480648
$(document).ready(function(){
var soundcloud_btn = '{color:link}';
$('.soundcloud_audio_player').each(function(){
$(this).attr({ src: $(this).attr('src').split('&')[0] + '&amp;liking=false&amp;sharing=false&amp;auto_play=false&amp;show_comments=false&amp;continuous_play=false&amp;buying=false&amp;show_playcount=false&amp;show_artwork=true&amp;origin=tumblr&amp;color=' + soundcloud_btn.split('#')[1], height: 116, width: '100%' });
});
});
</script>
<!-- unblue polls -->
<!-- glenthemes.tumblr.com/post/708014819571302400 -->
<link href="//static.tumblr.com/gtjt4bo/mXBrpdj0n/unblue-polls.css" rel="stylesheet">
<style unblue-polls>
.poll-post {
--Poll-Question-Font-Size: {select:post font size};
--Poll-Option-Background-Color: transparent;
--Poll-Option-Corner-Rounding: 5px;
--Poll-Option-Border-Size: 1px;
--Poll-Option-Border-Color: rgba({RGBcolor:text},0.25);
--Poll-Option-Padding: 10px;
--Poll-Option-Font-Size: {select:post font size};
--Poll-Option-Spacing: 10px;
--Poll-Option-Text-Color: {color:text};
--Poll-Option-HOVER-Border-Color: rgba({RGBcolor:text},0.25);
--Poll-Option-HOVER-Background-Color: transparent;
--Poll-Option-HOVER-Text-Color: {color:link};
--Poll-Option-HOVER-Speed: 0.4s;
}
.poll-see-results {
padding-bottom:0!important;
border-bottom:none!important;
font-size:calc(var(--Poll-Option-Font-Size) - 1px)!important;
text-transform:uppercase;
letter-spacing:0.5px;
}
</style>
<!-- npf audio player -->
<!-- glenthemes.tumblr.com/post/722160746171072512 -->
<script src="//tmblr-npf-audio.gitlab.io/s/init.js"></script>
<link href="//tmblr-npf-audio.gitlab.io/s/base.css" rel="stylesheet">
<script>
tumblr_npf_audio({
emptyTitleText: "Untitled track",
emptyArtistText: "Untitled artist",
emptyAlbumText: "Untitled album",
titleLabel: "",
artistLabel: "",
albumLabel: ""
});
</script>
<style edit-npf-audio-player>
.npf-audio-wrapper {
--NPF-Audio-Buttons-Size: calc(var(--Audio-Post-PlayButton-Size) * 0.6);
--NPF-Audio-Buttons-Color: {color:text};
--NPF-Audio-Buttons-Padding: calc(var(--Audio-Post-PlayButton-Padding) + (var(--Audio-Post-PlayButton-Size) * (1 - 0.6)) - 3px);
--NPF-Audio-Buttons-Spacing: calc(var(--p) + 14px);
--NPF-Audio-Image-Size: var(--Audio-Post-Album-Image-Size);
--NPF-Audio-Image-Spacing: 0px;
--t:calc((var(--NPF-Audio-Buttons-Padding) * 2) + var(--NPF-Audio-Buttons-Size));
--p:calc(var(--NPF-Audio-Buttons-Padding) + ((var(--NPF-Audio-Image-Size) - var(--t)) / 2));
}
.npf-audio-wrapper {
position:relative;
z-index:0;
}
.npf-audio-background {
margin-left:var(--p);
}
.npf-audio-play, .npf-audio-pause {
position:relative;
z-index:0;
}
.npf-audio-play:after, .npf-audio-pause:after {
content:"";
position:absolute;
top:0;left:0;
margin-top:calc(0px - var(--NPF-Audio-Buttons-Padding) - 1px);
margin-left:calc(0px - var(--NPF-Audio-Buttons-Padding) - 1px);
width:calc(100% + (var(--NPF-Audio-Buttons-Padding) * 2));
height:calc(100% + (var(--NPF-Audio-Buttons-Padding) * 2));
background:{color:post};
border:1px solid rgba({RGBcolor:text},0.420);
border-radius:100%;
z-index:-1;
}
.npf-audio-play svg { margin-left:1px; }
.npf-audio-pause svg { margin-left:0; }
figcaption.audio-caption,
figcaption.audio-caption ~ audio[controls],
.npf-audio-album {
display:none;
}
.npf-audio-image {
position:absolute;
top:0;left:0;
border-radius:3px;
z-index:-1;
}
.npf-audio-image-shadow {
width:var(--NPF-Audio-Image-Size);
height:var(--NPF-Audio-Image-Size);
}
</style>
<script src="//glen-npf.gitlab.io/other/neue.js"></script>
<link href="//glen-npf.gitlab.io/other/neue.css" rel="stylesheet">
<!------------ THEME OPTIONS ------------>
<meta name="image:background image" content="//64.media.tumblr.com/2ed40da241cd7d18ca2a32f325dcec9b/89fd344281db72fc-9a/s2048x3072/90d13dd929b0491dd8a5eacb175b84243b0317b3.jpg">
<meta name="image:topleft icon" content="https://static.tumblr.com/2pnwama/ZFMs1x7up/pktrbwt.png">
<meta name="color:background" content="#121116">
<meta name="color:top bar background" content="#1a1e29">
<meta name="color:topleft arrow" content="#b3aeac">
<meta name="color:topleft icon border" content="#3e414d">
<meta name="color:top title 1" content="#b3aeac">
<meta name="color:top title 2" content="#b3aeac">
<meta name="color:top links" content="#aaa19f">
<meta name="color:top links glow" content="#5f504e">
<meta name="color:descbox background" content="#191c1f">
<meta name="color:descbox text" content="#979597">
<meta name="color:descbox links" content="#b59a8e">
<meta name="color:corner title" content="#b4aba3">
<meta name="color:corner subtitle" content="#b4aba3">
<meta name="color:bottom bar background" content="#171a24">
<meta name="color:music player" content="#9d9187">
<meta name="color:customlinks" content="#a8a09f">
<meta name="color:customlinks glow" content="#5f504e">
<meta name="color:post" content="#16171f">
<meta name="color:text" content="#908e91">
<meta name="color:link" content="#c7a190">
<meta name="color:reblogger" content="#b59a8e">
<meta name="color:reblog separators" content="#262a32">
<meta name="color:tags" content="#a78d81">
<meta name="color:permalink" content="#a78d81">
<meta name="color:post buttons" content="#a78d81">
<meta name="color:permalink background" content="#191c1f">
<meta name="color:scrollbar" content="#4c4b50">
<!------------ TOP BAR OPTIONS ------------>
<meta name="select:topleft arrow size" title="16px" content="16px">
<meta name="select:topleft arrow size" title="12px" content="12px">
<meta name="select:topleft arrow size" title="14px" content="14px">
<meta name="select:topleft arrow size" title="18px" content="18px">
<meta name="select:topleft arrow size" title="20px" content="20px">
<meta name="select:topleft icon size" title="35px" content="35px">
<meta name="select:topleft icon size" title="30px" content="30px">
<meta name="select:topleft icon size" title="40px" content="40px">
<meta name="select:topleft icon size" title="45px" content="45px">
<meta name="select:topleft icon size" title="50px" content="50px">
<meta name="select:topleft icon padding" title="4px" content="4px">
<meta name="select:topleft icon padding" title="none" content="0">
<meta name="select:topleft icon padding" title="2px" content="2px">
<meta name="select:topleft icon padding" title="6px" content="6px">
<meta name="select:topleft icon padding" title="8px" content="8px">
<meta name="select:topleft icon padding" title="10px" content="10px">
<meta name="select:topleft icon padding" title="12px" content="12px">
<meta name="select:topleft icon margin" title="8px" content="8px">
<meta name="select:topleft icon margin" title="4px" content="4px">
<meta name="select:topleft icon margin" title="6px" content="6px">
<meta name="select:topleft icon margin" title="10px" content="10px">
<meta name="select:topleft icon margin" title="12px" content="12px">
<meta name="select:topleft icon margin" title="14px" content="14px">
<meta name="select:top title 1 size" title="10px" content="10px">
<meta name="select:top title 1 size" title="8px" content="8px">
<meta name="select:top title 1 size" title="9px" content="9px">
<meta name="select:top title 1 size" title="11px" content="11px">
<meta name="select:top title 1 size" title="12px" content="12px">
<meta name="select:top title 1 size" title="14px" content="14px">
<meta name="select:top title 2 size" title="14px" content="14px">
<meta name="select:top title 2 size" title="11px" content="11px">
<meta name="select:top title 2 size" title="12px" content="12px">
<meta name="select:top title 2 size" title="13px" content="13px">
<meta name="select:top title 2 size" title="15px" content="15px">
<meta name="select:top links font size" title="11px" content="11px">
<meta name="select:top links font size" title="10px" content="10px">
<meta name="select:top links font size" title="12px" content="12px">
<meta name="select:top links font size" title="13px" content="13px">
<meta name="select:top links spacing" title="16px" content="16px">
<meta name="select:top links spacing" title="10px" content="10px">
<meta name="select:top links spacing" title="12px" content="12px">
<meta name="select:top links spacing" title="14px" content="14px">
<meta name="select:top links spacing" title="18px" content="18px">
<meta name="select:top links spacing" title="20px" content="20px">
<meta name="select:top bar padding" title="15px" content="15px">
<meta name="select:top bar padding" title="10px" content="10px">
<meta name="select:top bar padding" title="20px" content="20px">
<meta name="select:top bar padding" title="25px" content="25px">
<meta name="select:top bar padding" title="30px" content="30px">
<meta name="select:top bar transparency" title="40%" content="0.6">
<meta name="select:top bar transparency" title="none" content="1">
<meta name="select:top bar transparency" title="10%" content="0.9">
<meta name="select:top bar transparency" title="20%" content="0.8">
<meta name="select:top bar transparency" title="30%" content="0.7">
<meta name="select:top bar transparency" title="50%" content="0.5">
<meta name="select:top bar transparency" title="60%" content="0.4">
<meta name="select:top bar transparency" title="70%" content="0.3">
<meta name="select:top bar transparency" title="80%" content="0.2">
<meta name="select:top bar transparency" title="90%" content="0.1">
<meta name="select:top bar transparency" title="100%" content="0">
<meta name="select:descbox margin" title="25px" content="25px">
<meta name="select:descbox margin" title="10px" content="10px">
<meta name="select:descbox margin" title="15px" content="15px">
<meta name="select:descbox margin" title="20px" content="20px">
<meta name="select:descbox margin" title="30px" content="30px">
<meta name="select:descbox margin" title="35px" content="35px">
<meta name="select:descbox margin" title="40px" content="40px">
<meta name="select:descbox width" title="325px" content="325px">
<meta name="select:descbox width" title="200px" content="200px">
<meta name="select:descbox width" title="225px" content="225px">
<meta name="select:descbox width" title="250px" content="250px">
<meta name="select:descbox width" title="275px" content="275px">
<meta name="select:descbox width" title="300px" content="300px">
<meta name="select:descbox width" title="350px" content="350px">
<meta name="select:descbox width" title="375px" content="375px">
<meta name="select:descbox padding" title="20px" content="20px">
<meta name="select:descbox padding" title="8px" content="8px">
<meta name="select:descbox padding" title="12px" content="12px">
<meta name="select:descbox padding" title="16px" content="16px">
<meta name="select:descbox padding" title="24px" content="24px">
<meta name="select:descbox padding" title="28px" content="28px">
<meta name="select:descbox font size" title="12px" content="12px">
<meta name="select:descbox font size" title="9px" content="9px">
<meta name="select:descbox font size" title="10px" content="10px">
<meta name="select:descbox font size" title="11px" content="11px">
<meta name="select:descbox font size" title="13px" content="13px">
<meta name="select:descbox font size" title="14px" content="14px">
<meta name="select:descbox line height" title="1.6em" content="1.6em">
<meta name="select:descbox line height" title="1.5em" content="1.5em">
<meta name="select:descbox line height" title="1.7em" content="1.7em">
<meta name="select:descbox line height" title="1.8em" content="1.8em">
<meta name="select:descbox line height" title="1.9em" content="1.9em">
<meta name="select:descbox transparency" title="30%" content="0.7">
<meta name="select:descbox transparency" title="none" content="1">
<meta name="select:descbox transparency" title="10%" content="0.9">
<meta name="select:descbox transparency" title="20%" content="0.8">
<meta name="select:descbox transparency" title="40%" content="0.6">
<meta name="select:descbox transparency" title="50%" content="0.5">
<meta name="select:descbox transparency" title="60%" content="0.4">
<meta name="select:descbox transparency" title="70%" content="0.3">
<meta name="select:descbox transparency" title="80%" content="0.2">
<meta name="select:descbox transparency" title="90%" content="0.1">
<meta name="select:descbox transparency" title="100%" content="0">
<meta name="select:descbox text align" title="left" content="left">
<meta name="select:descbox text align" title="justify" content="justify">
<meta name="select:descbox text align" title="right" content="right">
<meta name="select:descbox text align" title="center" content="center">
<meta name="select:descbox hover" title="on hover" content="dhov">
<meta name="select:descbox hover" title="always show" content="dstill">
<!------------ BACKGROUND OPTIONS ------------>
<meta name="select:background size" title="full screen" content="bg-full">
<meta name="select:background size" title="pattern" content="bg-small">
<meta name="select:screen margin" title="60px" content="60px">
<meta name="select:screen margin" title="40px" content="40px">
<meta name="select:screen margin" title="50px" content="50px">
<meta name="select:screen margin" title="70px" content="70px">
<!------------ CORNER TEXT OPTIONS ------------>
<meta name="select:corner text margin" title="30px" content="30px">
<meta name="select:corner text margin" title="10px" content="10px">
<meta name="select:corner text margin" title="20px" content="20px">
<meta name="select:corner text margin" title="40px" content="40px">
<meta name="select:corner text margin" title="50px" content="50px">
<meta name="select:corner title size" title="58px" content="58px">
<meta name="select:corner title size" title="14px" content="14px">
<meta name="select:corner title size" title="18px" content="18px">
<meta name="select:corner title size" title="22px" content="22px">
<meta name="select:corner title size" title="26px" content="26px">
<meta name="select:corner title size" title="30px" content="30px">
<meta name="select:corner title size" title="34px" content="34px">
<meta name="select:corner title size" title="38px" content="38px">
<meta name="select:corner title size" title="42px" content="42px">
<meta name="select:corner title size" title="46px" content="46px">
<meta name="select:corner title size" title="50px" content="50px">
<meta name="select:corner title size" title="54px" content="54px">
<meta name="select:corner title size" title="62px" content="62px">
<meta name="select:corner title size" title="66px" content="66px">
<meta name="select:corner subtitle size" title="22px" content="22px">
<meta name="select:corner subtitle size" title="14px" content="14px">
<meta name="select:corner subtitle size" title="18px" content="18px">
<meta name="select:corner subtitle size" title="26px" content="26px">
<meta name="select:corner subtitle size" title="30px" content="30px">
<meta name="select:corner subtitle size" title="34px" content="34px">
<meta name="select:corner subtitle size" title="38px" content="38px">
<meta name="select:corner text spacing" title="10px" content="10px">
<meta name="select:corner text spacing" title="5px" content="5px">
<meta name="select:corner text spacing" title="15px" content="15px">
<!------------ BOTTOM BAR OPTIONS ------------>
<meta name="select:bottom bar padding" title="30px" content="30px">
<meta name="select:bottom bar padding" title="10px" content="10px">
<meta name="select:bottom bar padding" title="20px" content="20px">
<meta name="select:bottom bar padding" title="40px" content="40px">
<meta name="select:bottom bar transparency" title="40%" content="0.6">
<meta name="select:bottom bar transparency" title="none" content="1">
<meta name="select:bottom bar transparency" title="10%" content="0.9">
<meta name="select:bottom bar transparency" title="20%" content="0.8">
<meta name="select:bottom bar transparency" title="30%" content="0.7">
<meta name="select:bottom bar transparency" title="50%" content="0.5">
<meta name="select:bottom bar transparency" title="60%" content="0.4">
<meta name="select:bottom bar transparency" title="70%" content="0.3">
<meta name="select:bottom bar transparency" title="80%" content="0.2">
<meta name="select:bottom bar transparency" title="90%" content="0.1">
<meta name="select:bottom bar transparency" title="100%" content="0">
<meta name="select:customlinks size" title="11px" content="11px">
<meta name="select:customlinks size" title="9px" content="9px">
<meta name="select:customlinks size" title="10px" content="10px">
<meta name="select:customlinks size" title="12px" content="12px">
<meta name="select:customlinks size" title="13px" content="13px">
<meta name="select:customlinks size" title="14px" content="14px">
<meta name="select:customlinks spacing" title="16px" content="16px">
<meta name="select:customlinks spacing" title="10px" content="10px">
<meta name="select:customlinks spacing" title="12px" content="12px">
<meta name="select:customlinks spacing" title="14px" content="14px">
<meta name="select:customlinks spacing" title="18px" content="18px">
<meta name="select:customlinks spacing" title="20px" content="20px">
<!------------ POST OPTIONS ------------>
<meta name="select:photoset spacing" title="4px" content="4px">
<meta name="select:photoset spacing" title="6px" content="6px">
<meta name="select:photoset spacing" title="10px" content="10px">
<meta name="select:post width" title="500px" content="500px">
<meta name="select:post width" title="400px" content="400px">
<meta name="select:post width" title="450px" content="450px">
<meta name="select:post width" title="540px" content="540px">
<meta name="select:post transparency" title="40%" content="0.6">
<meta name="select:post transparency" title="none" content="1">
<meta name="select:post transparency" title="10%" content="0.9">
<meta name="select:post transparency" title="20%" content="0.8">
<meta name="select:post transparency" title="30%" content="0.7">
<meta name="select:post transparency" title="50%" content="0.5">
<meta name="select:post transparency" title="60%" content="0.4">
<meta name="select:post transparency" title="70%" content="0.3">
<meta name="select:post transparency" title="80%" content="0.2">
<meta name="select:post transparency" title="90%" content="0.1">
<meta name="select:post transparency" title="100%" content="0">
<meta name="select:semitransparent images" title="yes" content="0.8">
<meta name="select:semitransparent images" title="no" content="1">
<meta name="select:post padding" title="15px" content="15px">
<meta name="select:post padding" title="none" content="0px">
<meta name="select:post padding" title="10px" content="10px">
<meta name="select:post padding" title="20px" content="20px">
<meta name="select:post font size" title="12px" content="12px">
<meta name="select:post font size" title="11px" content="11px">
<meta name="select:post font size" title="13px" content="13px">
<meta name="select:post font size" title="14px" content="14px">
<meta name="select:post buttons size" title="12px" content="12px">
<meta name="select:post buttons size" title="14px" content="14px">
<meta name="select:post buttons size" title="16px" content="16px">
<meta name="select:post buttons spacing" title="8px" content="8px">
<meta name="select:post buttons spacing" title="4px" content="4px">
<meta name="select:post buttons spacing" title="6px" content="6px">
<meta name="select:post buttons spacing" title="10px" content="10px">
<meta name="select:permalink padding" title="14px" content="14px">
<meta name="select:permalink padding" title="10px" content="10px">
<meta name="select:permalink padding" title="12px" content="12px">
<meta name="select:permalink padding" title="16px" content="16px">
<meta name="select:permalink padding" title="18px" content="18px">
<meta name="select:post spacing" title="45px" content="45px">
<meta name="select:post spacing" title="30px" content="30px">
<meta name="select:post spacing" title="35px" content="35px">
<meta name="select:post spacing" title="45px" content="45px">
<meta name="select:post spacing" title="50px" content="50px">
<meta name="select:post text line height" title="1.7em" content="1.7em">
<meta name="select:post text line height" title="1.5em" content="1.5em">
<meta name="select:post text line height" title="1.9em" content="1.9em">
<meta name="if:background gradient" content="1">
<meta name="if:reblog separators" content="1">
<meta name="if:full width reblog separators" content="1">
<meta name="if:tags on click" content="1">
<meta name="if:show music player" content="1">
<meta name="if:black tumblr controls" content="0">
<meta name="text:top title 1" content="">
<meta name="text:top title 2" content="">
<meta name="text:corner title" content="vi">
<meta name="text:corner subtitle" content="the piltover enforcer">
<meta name="text:how to link music" content="linktr.ee/direct_file_links">
<meta name="text:music name" content="never back down">
<meta name="text:music artist" content="Jeremiah Kane&lt;br&gt;(BlazerJacket remix)">
<meta name="text:music file mp3" content="https://rhizo.gitlab.io/m/Never_Back_Down__BlazerJacket_Remix_.mp3">
<meta name="text:customlink 1 name" content="dashboard">
<meta name="text:customlink 1 URL" content="//tumblr.com/dashboard">
<meta name="text:customlink 2 name" content="">
<meta name="text:customlink 2 URL" content="">
<meta name="text:customlink 3 name" content="">
<meta name="text:customlink 3 URL" content="">
<meta name="text:customlink 4 name" content="">
<meta name="text:customlink 4 URL" content="">
<meta name="text:customlink 5 name" content="">
<meta name="text:customlink 5 URL" content="">
<meta name="text:customlink 6 name" content="">
<meta name="text:customlink 6 URL" content="">
<!-------------------------------------->
<style type="text/css">
@font-face { font-family: "beaufort"; src: url('//glen-assets.github.io/fonts/Beaufort W01 Regular.ttf'); }
/*------------ TOOLTIPS ------------*/
#s-m-t-tooltip {
margin:24px 18px;
max-width:{select:post width};
padding:7px 9px;
background:{color:post};
border:1px solid rgba({RGBcolor:text},0.2);
font-family:karla;
font-size:calc({select:post font size} - 4px);
letter-spacing:1px;
text-transform:uppercase;
color:{color:text};
z-index:100;
}
/*------------ TUMBLR CONTROLS ------------*/
iframe#tumblr_controls, .iframe-controls--desktop {
position:fixed!important;
top:calc(var(--TBH) + 2px)!important;
right:5px!important;
filter:brightness(102%) contrast(0.69);
-webkit-filter:brightness(102%) contrast(0.69);
{block:ifblacktumblrcontrols}
filter:invert(100%) hue-rotate(180deg);
-webkit-filter:invert(100%) hue-rotate(180deg);
{/block:ifblacktumblrcontrols}
transform:scale(0.69,0.69);
transform-origin:100% 0;
z-index:99!important;
}
/*------------ BASICS ------------*/
* {
margin:0;
padding:0;
}
body {
background:{color:background};
/*
if you're looking to edit the background image,
search for .wallpaper
*/
font-family:karla;
color:{color:text};
overscroll-behavior-y:none;
overflow-x:hidden;
}
.plsstop {
overflow-y:scroll!important;
}
/*--------------------SCROLLBAR--------------------*/
::-webkit-scrollbar {
width:var(--Scrollbar-Padding);
height:var(--Scrollbar-Padding);
background:{color:background};
}
::-webkit-scrollbar-thumb {
background:{color:scrollbar};
border:calc((var(--Scrollbar-Padding) - 1px) / 2) solid {color:background};
border-top-width:calc(var(--Scrollbar-Padding) * 0.69);
border-bottom-width:calc(var(--Scrollbar-Padding) * 0.69);
}
::-webkit-scrollbar-corner {
background:{color:background};
}
img {
vertical-align:middle;
}
a, a:visited {
color:{color:link};
text-decoration:none;
}
h1, h2, h3, h4, h5, h6 {
margin:var(--Heading-Margins) 0;
font-family:beaufort;
font-weight:bold;
text-transform:uppercase;
font-size:{select:post font size};
letter-spacing:1.5px;
}
h1.title, .linkpath, a.read_more {
display:block;
border:1px solid rgba({RGBcolor:text},0.2);
background:rgba({RGBcolor:post},0.420);
border-radius:5px;
padding:0.8em 0.95em;
font-family:beaufort;
font-weight:bold;
font-size:calc({select:post font size} + 1px);
text-transform:uppercase;
letter-spacing:1.5px;
line-height:calc({select:post text line height} * 0.69);
text-align:center;
}
h1.title {
margin-top:0;
margin-bottom:calc(var(--Heading-Margins) * 2);
}
p:first-child {
margin-top:0;
}
p:last-child {
margin-bottom:0;
}
p {
margin:var(--Paragraph-Margins) 0;
}
ul, ol {
margin:1em 0;
margin-left:1.69em;
}
ol li {
padding-left:0.420em;
}
ul li {
position:relative;
padding-left:0.25em;
margin-left:calc(({select:post font size} * 1.420) - 3px);
list-style:none;
}
ul li:before {
content:"";
position:absolute;
margin-top:calc(({select:post font size} * var(--LH)) / 2);
transform:translateY(-50%);
left:0;margin-left:calc(({select:post font size} * -1.420) - 3px);
width:{select:post font size};
height:.7px;
background:rgba({RGBcolor:text},0.8);
}
pre {
display:block;
white-space:break-spaces;
padding:var(--Captions-Gap);
border:1px solid rgba({RGBcolor:text},0.420);
border-radius:3px;
margin:1em 0;
}
pre, code {
font-family:cousine;
font-size:calc({select:post font size} - 1.5px);
}
hr {
margin:var(--Heading-Margins) 0;
width:69%;
border-width:0px;
height:1px;
background:rgba({RGBcolor:text},0.25);
}
.flex {
display:flex;
align-items:center;
}
.flex.space-between {
justify-content:space-between;
}
:root {
--TBH:calc({select:topleft icon size} + ({select:topleft icon padding} * 2) + ({select:top bar padding} * 2));
--Scrollbar-Padding:13px;
--Post-Padding:{select:post padding};
--Photos-Spacing:{select:photoset spacing};
--Posts-Avatar-Size:23px;
--Captions-Gap:12px;
--Blockquote-Border-Color:rgba({RGBcolor:text},0.7);
--Paragraph-Margins:0.69em;
--Heading-Margins:0.5em;
--NPF-Image-Spacing:{select:photoset spacing};
--NPF-Caption-Spacing:1em;
--Audio-Post-Album-Image-Size:64px;
--Audio-Post-PlayButton-Size:18px;
--Audio-Post-PlayButton-Padding:8px;
--Text-LineHeight:{select:post text line height};
--Like-Button-Liked:#f75c64;
/* music player opts */
--Music-Player-Vinyl:{color:music player};
--Vinyl-Icon-Size:17px;
--Vinyl-Spin-Speed:2.69s;
--Music-Controls:{color:music player};
--Music-Controls-Size:12px;
--Music-Title-Font-Size:9px;
--Music-Title-Color:{color:music player};
}
.spotify_audio_player {
height:80px!important;
}
/*--------- BACKGROUND/WALLPAPER ---------*/
.wallpaper {
position:fixed;
top:0;left:0;
width:100%;
height:100%;
background-image:url({image:background image});
display:none;
z-index:-69;
}
.wallpaper[type="bg-full"] {
background-repeat:no-repeat;
background-size:cover;
background-position:center;
}
.wallpaper[type="bg-small"] {
background-repeat:repeat;
}
.botgradient {
position:fixed;
bottom:0;left:0;
width:100%;
height:30vh;
background:linear-gradient(to bottom, transparent, {color:background});
opacity:0.8;
z-index:-68;
}
.boxshad {
position:fixed;
top:0;left:0;
width:100%;
height:100%;
box-shadow:inset 0 0 var(--TBH) {color:background};
z-index:-68;
}
.sidegrad {
position:fixed;
top:0;right:0;
width:calc({select:screen margin} + {select:post width} + ({select:post padding} * 2));
height:100%;
background:linear-gradient(to right, transparent, {color:background} 30%);
z-index:-68;
}
/*--------- TOP BAR ---------*/
.topbar {
position:fixed;
top:0;left:0;
width:100%;
display:table;
background:rgba({RGBcolor:top bar background},{select:top bar transparency});
padding:calc({select:top bar padding} / 1) 0;
z-index:2;
}
.tbm {
display:table-cell;
vertical-align:middle;
}
.jhin-n-tonic {
position:relative;
height:100%;
display:flex;
align-items:center;
}
/*------ TOPLEFT THING ------*/
.topleft {
margin-top:1px;
margin:-{select:top bar padding} 0;
display:flex;
align-items:center;
margin-top:-{select:top bar padding};
padding:{select:top bar padding} 0;
padding-left:calc({select:top bar padding} + 5px);
padding-right:calc({select:top bar padding} - 5px);
}
.chev {
margin-left:-5px;
filter:drop-shadow(1px 1px 1px rgba({RGBcolor:top bar background}, 0.420));
width:{select:topleft arrow size};
height:{select:topleft arrow size};
}
.chev svg {
width:{select:topleft arrow size};
height:{select:topleft arrow size};
color:{color:topleft arrow};
}
.dothething {
transform:scaleY(-1);
}
.chevhov, .dothething {
transition:transform 0.69s ease-in-out; /* fade-in */
}
.wayback {
transition-duration:1s; /* fade-out */
}
.icoe-a, .icoe-b, .icon-act {
border-radius:100%;
}
.icoe-a {
position:relative;
margin-left:{select:topleft icon margin};
margin-right:calc({select:topleft icon margin} * 1.269);
width:calc({select:topleft icon size} + ({select:topleft icon padding} * 2) + 1px);
height:calc({select:topleft icon size} + ({select:topleft icon padding} * 2) + 1px);
border:.5px solid {color:topleft icon border};
filter:drop-shadow(1px 1px 1px rgba({RGBcolor:top bar background}, 0.420));
}
.icoe-b {
position:absolute;
top:0;left:0;
width:calc({select:topleft icon size} + ({select:topleft icon padding} * 2) + 1px);
height:calc({select:topleft icon size} + ({select:topleft icon padding} * 2) + 1px);
background:{color:top bar background};
}
.icon-act {
position:absolute;
margin-top:calc({select:topleft icon padding} + .5px);
margin-left:calc({select:topleft icon padding} + .5px);
width:{select:topleft icon size};
height:{select:topleft icon size};
background-image:url({image:topleft icon});
background-position:center;
background-size:cover;
background-repeat:no-repeat;
}
.tl-text {
font-family:beaufort;
font-weight:bold;
text-transform:uppercase;
text-shadow:2px 3px 2px rgba({RGBcolor:top bar background},0.69);
cursor:default;
}
.tl-top, .tl-bot {
margin:2px 0;
}
.tl-top {
font-size:{select:top title 1 size};
color:{color:top title 1};
letter-spacing:1.5px;
word-spacing:-1px;
}
.tl-bot {
font-size:{select:top title 2 size};
color:{color:top title 2};
letter-spacing:2px;
word-spacing:-1.5px;
}
/*------ CUSTOM LINKS ------*/
.linqhoe {
position:absolute;
right:0;margin-right:calc({select:top bar padding} - {select:top links spacing} + 0px);
height:calc(100% + ({select:top bar padding} * 2));
overflow:hidden;
display:flex;
align-items:center;
}
.linqhoe a {
position:relative;
display:block;
padding:calc({select:top bar padding} * 2.5) calc({select:top links spacing} / 1);
font-family:beaufort;
font-weight:bold;
font-size:{select:top links font size};
text-transform:uppercase;
letter-spacing:1.5px;
color:{color:top links};
text-shadow:2px 2px 3px rgba({RGBcolor:top bar background},0.69);
}
.linqhoe a:after {
content:"";
position:absolute;
top:50%;left:50%;
transform:translate(-50%,-50%);
width:100%;
height:100%;
background:radial-gradient(circle at bottom, {color:top links glow} 0%, transparent 55%);
opacity:0;
z-index:-1;
}
.linqhoe a:hover:after {
opacity:0.420;
}
/*--------- DESCRIPTION BOX ---------*/
.descbox {
position:fixed;
top:0;padding-top:calc(var(--TBH) + {select:descbox margin});
left:0;padding-left:{select:descbox margin};
padding-right:{select:descbox padding};
padding-bottom:{select:descbox padding};
}
.descbox[hover="dhov"] {
visibility:hidden;
}
.desc {
width:calc({select:descbox width} - ({select:descbox padding} * 2));
padding:{select:descbox padding} calc({select:descbox padding} * 1.069);
background:rgba({RGBcolor:descbox background},{select:descbox transparency});
box-shadow:0 4px 30px rgba({RGBcolor:descbox background},0.25);
/* description text styling: */
font-family:libre franklin;
letter-spacing:0.3px;
font-size:{select:descbox font size};
color:{color:descbox text};
text-shadow:1px 2px 2px rgba({RGBcolor:descbox background},0.420);
line-height:{select:descbox line height};
text-align:{select:descbox text align};
}
.desc a {
color:{color:descbox links};
}
.deschov {
padding-top:calc(var(--TBH) / 2);
cursor:default;
opacity:0;
visibility:visible!important;
}
.dix {
padding-top:calc(var(--TBH) + {select:descbox margin});
opacity:1;
}
.deschov, .dix {
transition:all 0.69s ease-in-out; /* fade-in */
}
.okboomer {
transition-duration:1s; /* fade-out */
}
/*------ CORNER TITLE, CORNER TEXT ------*/
.cornerside {
position:fixed;
bottom:0;margin-bottom:calc(({select:bottom bar padding} * 2) + {select:customlinks size} + {select:corner text margin});
left:0;margin-left:calc({select:corner text margin} * 1.2);
font-family:beaufort;
font-weight:bold;
text-transform:uppercase;
letter-spacing:0.069em;
font-style:italic;
text-shadow:2px 2px 3px rgba({RGBcolor:background},0.69);
}
.corner-title {
font-size:{select:corner title size};
color:{color:corner title};
}
.corner-sub {
margin-top:{select:corner text spacing};
margin-left:5px;
font-size:{select:corner subtitle size};
color:{color:corner subtitle};
}
/*--------- BOTTOM BAR ---------*/
.botbar {
position:fixed;
bottom:0;left:0;
width:100%;
padding:{select:bottom bar padding} 0;
background:rgba({RGBcolor:bottom bar background},{select:bottom bar transparency});
z-index:2;
}
/* music player */
{/block:ifshowmusicplayer}
.sike {
position:absolute;
top:0;left:0;
height:100%;
display:flex;
align-items:center;
}
.glenjams-06 {
margin-left:calc({select:bottom bar padding} - 5px);
padding:{select:bottom bar padding} 0;
}
.pasta {
display:flex;
align-items:center;
}
.vinyl-spin {
animation:recordspin var(--Vinyl-Spin-Speed) linear infinite;
-webkit-animation:recordspin var(--Vinyl-Spin-Speed) linear infinite;
-moz-animation:recordspin var(--Vinyl-Spin-Speed) linear infinite;
-o-animation:recordspin var(--Vinyl-Spin-Speed) linear infinite;
}
.vinyl-pause {
animation-play-state:paused;
-webkit-animation-play-state:paused;
-moz-animation-play-state:paused;
-o-animation-play-state:paused;
}
@-webkit-keyframes recordspin {
from {
-webkit-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);
}
to {
-webkit-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);
}
}
@keyframes recordspin {
from {
-ms-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);
}
to {
-ms-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);
}
}
.vinyl, .vinyl svg {
width:var(--Vinyl-Icon-Size);
height:var(--Vinyl-Icon-Size);
}
.music-controls {
margin-left:10px;
width:var(--Music-Controls-Size);
overflow:hidden;
cursor:pointer;
}
.music-controls svg {
width:var(--Music-Controls-Size);
height:var(--Music-Controls-Size);
color:var(--Music-Controls);
stroke-width:1.5px;
}
.pausee {display:none;}
.beff {display:none;}
.aff {display:block;}
.klutch {
position:relative;
margin-left:8px;
font-family:chakra petch;
font-size:var(--Music-Title-Font-Size);
text-transform:uppercase;
letter-spacing:1px;
color:var(--Music-Title-Color);
height:100%;
display:flex;
align-items:center;
cursor:default;
line-height:160%;
white-space:nowrap;
}
.klutch > * {
position:absolute;
padding:{select:bottom bar padding} 0;
transition:opacity 0.269s ease-in-out;
text-shadow:1px 1px 2px rgba({RGBcolor:bottom bar background},0.69);
}
.music-artist {
opacity:0;
}
.glenjams-06:hover .music-title {
{block:ifmusicartist}
opacity:0;
{/block:ifmusicartist}
}
.glenjams-06:hover .music-artist {
opacity:1;
}
{/block:ifshowmusicplayer}
/* custom links */
.botlinks {
margin:-{select:bottom bar padding} auto;
display:flex;
align-items:center;
justify-content:center;
}
.botlinks a {
position:relative;
display:block;
padding:{select:bottom bar padding} {select:customlinks spacing};
font-family:beaufort;
font-weight:bold;
font-size:{select:customlinks size};
text-transform:uppercase;
letter-spacing:1.5px;
color:{color:customlinks};
text-shadow:2px 2px 3px rgba({RGBcolor:bottom bar background},0.69);
}
.botlinks a:after {
content:"";
position:absolute;
top:50%;left:50%;
transform:translate(-50%,-50%);
width:100%;
height:100%;
background:radial-gradient(circle at top, {color:customlinks glow} 0%, transparent 55%);
opacity:0;
z-index:-1;
}
.botlinks a:hover:after {
opacity:0.420;
}
/*----- BACKTOTOP BUTTON -----*/
.tangerine {
position:absolute;
top:0;right:0;
margin-right:calc({select:bottom bar padding} * 0.69);
height:100%;
line-height:1;
display:none;
}
.bork {
display:flex;
align-items:center;
height:100%;
cursor:pointer;
text-shadow:1px 1px 2px rgba({RGBcolor:bottom bar background},0.69);
}
.bork span {
display:block;
margin-top:1px;
margin-right:9px;
font-family:chakra petch;
font-size:9px;
text-transform:uppercase;
letter-spacing:1.5px;
color:rgba({RGBcolor:customlinks},0.9);
opacity:0;
}
.bork span, .tangerine:hover {
transition:opacity 0.269s ease-in-out;
}
.tangerine:hover .bork span {
opacity:1;
}
.bork i {
font-size:15px;
color:rgba({RGBcolor:customlinks},0.9);
}
/*------------ MAIN POSTS ------------*/
.postscont {
position:absolute;
right:0;margin-right:{select:screen margin};
top:0;margin-top:calc(var(--TBH) + {select:screen margin});
min-width:calc({select:post width} + ({select:post padding} * 2));
/* post text styling: */
font-family:libre franklin;
font-size:{select:post font size};
letter-spacing:.3px;
color:{color:text};
text-shadow:1px 2px 2px rgba({RGBcolor:post},0.420);
line-height:{select:post text line height};
}
.posts {
position:relative;
margin-bottom:{select:post spacing};
padding:{select:post padding};
background:rgba({RGBcolor:post},{select:post transparency});
width:{select:post width};
overflow:hidden;
}
.posts:last-of-type {
{block:IndexPage}
margin-bottom:calc({select:customlinks size} + ({select:bottom bar padding} * 2) + ({select:screen margin} * 0.8));
{/block:IndexPage}
}
.posts img, .lightbox-image, #tumblr_lightbox_center_image {
opacity:{select:semitransparent images};
}
/*--------- LIGHTBOX BS ---------*/
.vignette, #vignette {
opacity:0;
}
.tmblr-lightbox, #tumblr_lightbox {
background:rgba({RGBcolor:background},0.69)!important;
box-shadow:inset 0 0 69px rgba({RGBcolor:background},0.69)!important;
}
.lightbox-image, #tumblr_lightbox_center_image {
box-shadow:0 4px 30px rgba({RGBcolor:background},0.69)!important;
border-radius:0px!important;
}
/*------------ REBLOG STYLING ------------*/
.caption {
margin-top:var(--NPF-Caption-Spacing);
}
.comment_container {
{block:ifreblogseparators}
padding:calc(var(--Captions-Gap) / 2) 0;
border-bottom:1px solid {color:reblog separators};
{block:iffullwidthreblogseparators}
margin:0 -{select:post padding};
padding-left:{select:post padding};
padding-right:{select:post padding};
{/block:iffullwidthreblogseparators}
{/block:ifreblogseparators}
{block:ifnotreblogseparators}
padding:calc(var(--Captions-Gap) / 2.5) 0;
{/block:ifnotreblogseparators}
}
.comment_container:first-of-type, .ccfirst {
padding-top:0px;
border-top:0px solid transparent;
}
.comment_container:last-of-type, .cclast {
padding-bottom:0px;
border-bottom:0px solid transparent;
}
.commenter {
margin:0.69em 0;
display:flex;
align-items:center;
}
.sfr {position:relative}
.commenter img {
width:var(--Posts-Avatar-Size);
height:var(--Posts-Avatar-Size);
border-radius:100%;
border:.5px solid rgba({RGBcolor:reblogger},0.5);
}
.sfr:before {
content:"";
position:absolute;
top:0;left:0;
width:100%;
height:100%;
border-radius:100%;
background:linear-gradient(to bottom, transparent, transparent 69%, rgba({RGBcolor:post},0.269) 100%);
}
.sfr:after {
content:"";
position:absolute;
top:0;left:0;
width:100%;
height:100%;
border-radius:100%;
box-shadow:inset 0 0 4px {color:post};
z-index:1;
}
.commenter a, a.tumblr_blog, .asker_ .commenter {
font-family:beaufort;
font-weight:bold;
font-size:calc({select:post font size} - 2px);
text-transform:uppercase;
letter-spacing:1.5px;
color:{color:reblogger};
}
.commenter a {
padding-left:7px;
}
.nosrc {
display:none;
margin-top:0;
}
/* note: may need to remove the ">" if inconsistencies occur */
.comment > :last-child:not([data-npf*='audio'], .spotify_audio_player, .soundcloud_audio_player){
margin-bottom:{select:post padding};
}
/*----- TEXT STUFF -----*/
.allcaps, a.read_more {
font-family:beaufort;
font-weight:bold;
font-size:calc({select:post font size} - 1px);
text-transform:uppercase;
letter-spacing:1.5px;
}
a.read_more {
display:block;
text-align:center;
}
.posts blockquote {
margin:calc(var(--Posts-Avatar-Size) / 2);
padding-left:calc(var(--Posts-Avatar-Size) / 2);
border-left:1px solid var(--Blockquote-Border-Color);
}
/*----- LINK POSTS -----*/
.linkpath {
color:{color:reblogger}!important;
}
.linkdesc {
margin-top:calc(var(--Heading-Margins) * 1.269);
padding:0.69em 0.8em;
border:1px solid rgba({RGBcolor:text},0.169);
background:rgba({RGBcolor:post},0.25);
border-radius:5px;
}
.genlinkbase {
margin-top:calc(var(--Paragraph-Margins) / 2);
font-family:chakra petch;
font-size:calc({select:post font size} - 2.5px);
text-transform:uppercase;
letter-spacing:1px;
}
.genlinkbase .et {
padding-right:1px;
}
.linkcapt {
margin-top:var(--Paragraph-Margins);
}
/*----- QUOTE POSTS -----*/
.quote-words {
padding:0 1.269em;
font-family:beaufort;
font-weight:bold;
text-transform:uppercase;
font-size:calc({select:post font size} + 1px);
letter-spacing:1.5px;
line-height:calc({select:post text line height} * 1.2);
text-align:center;
}
.quote-source {
margin-top:var(--Heading-Margins);
text-align:center;
}
/*----- PHOTO POSTS -----*/
.photopic {
width:100%;
cursor:pointer;
}
.posts img {
max-width:100%;
}
/*----- PHOTOSETS -----*/
[photoset-layout] {
grid-gap:{select:photoset spacing};
}
[photoset-layout] div {
cursor:pointer;
}
/*----- CHAT POSTS -----*/
.chatholder {
}
.chat_label {
margin-right:4px;
font-weight:bold;
}
.chat_content {
}
/*----- ASK POSTS -----*/
.askhold {
}
.askhold span {
display:block;
margin-left:4px;
margin-top:-2px;
font-family:libre franklin;
font-weight:normal;
letter-spacing:.3px;
font-size:{select:post font size};
text-transform:none;
color:{color:text};
}
.asker_ {
padding-bottom:0;
border-bottom:0px solid transparent;
}
.asker_ .commenter {
{block:ifreblogseparators}
margin-top:;
{/block:ifreblogseparators}
{block:ifnotreblogseparators}
margin-top:0;
{/block:ifnotreblogseparators}
justify-content:center;
}
.asker_ .sfr {
margin-bottom:calc(0.069em / -2);
}
.asker_ .commenter img {
width:calc(var(--Posts-Avatar-Size) + 3px);
height:calc(var(--Posts-Avatar-Size) + 3px);
}
.asker_ .commenter a {
padding-left:0;
}
.question_text {
padding:0.69em 0.8em;
border:1px solid rgba({RGBcolor:text},0.2);
background:rgba({RGBcolor:post},0.420);
border-radius:5px;
}
.answer_text {
}
/*----- AUDIO -----*/
.tumblr_audio_player[width] {
width:100%!important;
height:0!important;
}
.audiocont {
position:absolute;
display:none;
overflow:hidden;
width:0!important;
height:0!important;
opacity:0;
}
.alcove {
position:relative;
width:var(--Audio-Post-Album-Image-Size);
height:var(--Audio-Post-Album-Image-Size);
}
.strawberries {
position:absolute;
top:0;margin-top:calc((100% - (var(--Audio-Post-PlayButton-Size) + (var(--Audio-Post-PlayButton-Padding) * 2) + 2px)) / 2);
left:0;margin-left:calc((100% - (var(--Audio-Post-PlayButton-Size) + (var(--Audio-Post-PlayButton-Padding) * 2) + 2px)) / 2);
width:calc(var(--Audio-Post-PlayButton-Size) + (var(--Audio-Post-PlayButton-Padding) * 2) + 2px);
height:calc(var(--Audio-Post-PlayButton-Size) + (var(--Audio-Post-PlayButton-Padding) * 2) + 2px);
}
.summer {
border:1px solid rgba({RGBcolor:text},0.420);
width:100%;
height:100%;
background:{color:post};
box-sizing:border-box;
border-radius:100%;
display:flex;
align-items:center;
justify-content:center;
line-height:1em;
cursor:pointer;
user-select:none;
}
.splay {
margin-top:2px;
}
.splay i, .spause i {
font-size:var(--Audio-Post-PlayButton-Size);
color:{color:text};
}
.spause {
display:none;
margin-top:2px;
}
.spause i {
font-size:calc(var(--Audio-Post-PlayButton-Size) - 1px);
}
.a-lbum-img {
width:100%;
height:100%;
border-radius:3px;
visibility:hidden;
}
.vingt, .npf-audio-image-shadow {
position:absolute;
top:0;left:0;
border-radius:3px;
box-shadow:inset 0 0 15px rgba({RGBcolor:post},0.69);
}
.vingt {
width:100%;
height:100%;
}
.tin {
width:calc(100% - var(--Audio-Post-Album-Image-Size));
height:var(--Audio-Post-Album-Image-Size);
}
.trackinfo {
margin-left:14px;
}
.t-name, .npf-audio-title {
font-family:beaufort;
font-weight:bold;
font-size:calc({select:post font size} - .5px);
text-transform:uppercase;
letter-spacing:1.5px;
}
.dongload {
text-transform:initial!important;
}
.dongload svg {
width:calc({select:post font size} + 4px);
height:calc({select:post font size} + 4px);
stroke:{color:text};
stroke-width:1.5px;
pointer-events:none;
}
/*----- VIDEOS -----*/
video {
display:block;
outline:none;
cursor:default;
width:100%;
}
/*----- TAGS -----*/
.tagcont {
{block:IndexPage}
{block:iftagsonclick}
display:none;
padding-bottom:{select:post padding};
margin:-3px 0;
{/block:iftagsonclick}
{/block:IndexPage}
}
.tagholder {
display:flex;
flex-wrap:wrap;
justify-content:flex-end;
text-align:right;
margin:0 -5px;
font-family:k2d;
font-size:calc({select:post font size} - 3px);
text-transform:uppercase;
letter-spacing:1px;
}
.tagholder a {
display:block;
margin:0 3.5px;
color:{color:tags};
}
/*------------ PERMALINK ------------*/
.permarow {
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:-{select:post padding};
margin-left:-{select:post padding};
width:calc(100% + ({select:post padding} * 2));
padding:calc({select:permalink padding} * 0.8) 0;
background:rgba({RGBcolor:permalink background},{select:post transparency});
font-family:beaufort;
font-weight:bold;
text-transform:uppercase;
{block:IndexPage}
font-size:calc({select:post font size} - 2px);
{/block:IndexPage}
{block:PermalinkPage}
font-size:calc({select:post font size} - 2.5px);
{/block:PermalinkPage}
letter-spacing:1.5px;
text-shadow:1px 2px 2px rgba({RGBcolor:permalink background},0.420);
}
.posts, .permarow {
border-radius:0 0 5px 5px;
}
.permarow a {
color:{color:permalink};
}
.permaleft {
flex:1;
margin-left:{select:permalink padding};
}
.permaright {
margin-right:{select:permalink padding};
}
.permaright, .les-controls {
display:flex;
align-items:center;
}
.les-controls > a {
display:block;
margin-right:{select:post buttons spacing};
width:{select:post buttons size};
height:{select:post buttons size};
}
.les-controls svg {
display:block;
width:100%;
height:100%;
fill:{color:post buttons};
}
.permaright a {margin-right:{select:post buttons spacing};}
.permaright a:last-of-type {margin-right:0;}
.viewtags {
cursor:help;
}
.viewtags svg {
width:{select:post buttons size};
height:{select:post buttons size};
color:{color:post buttons};
stroke-width:1.5px;
}
.retweet svg {
transform:scaleX(-1);
}
.likecont {
position:relative;
}
.like_button {
position:absolute;
width:100%;
height:100%;
}
.like_button iframe {
position:absolute;
top:0;left:0;
width:100%;
height:100%;
opacity:0;
z-index:2;
}
.like_button.liked + .heart svg {
fill:var(--Like-Button-Liked)!important;
}
/*----- POST NOTES -----*/
.notescont {
width:calc({select:post width} + ({select:post padding} * 2));
margin-bottom:calc({select:customlinks size} + ({select:bottom bar padding} * 2) + ({select:screen margin} * 0.8));
}
ol.notes {
margin:0;
padding:0 {select:post padding};
list-style:none;
}
ol.notes .avatar {
display:none;
}
ol.notes li {
margin-bottom:1.25em;
padding:0;
}
ol.notes blockquote {
margin:1em;
padding-left:1em;
border-left:var(--Blockquote-Border-Color);
}
.more_notes_link_container {
margin-top:{select:post padding};
}
ol.notes a, .more_notes_link {
font-family:beaufort;
font-weight:bold;
text-transform:uppercase;
font-size:calc({select:post font size} - 2px);
letter-spacing:1.5px;
color:{color:reblogger};
}
.more_notes_link {
color:{color:link}!important;
}
/*------- PAGINATION -------*/
.botpagi {
margin-top:calc(({select:screen margin} * -0.8) + {select:post spacing} + {select:post padding});
margin-bottom:calc({select:customlinks size} + ({select:bottom bar padding} * 2) + ({select:screen margin} * 0.8));
}
.botpagi span {
padding:0 4px;
font-family:beaufort;
font-size:calc({select:post font size} - 1px);
font-weight:bold;
text-transform:uppercase;
letter-spacing:1.5px;
color:{color:text};
}
.botpagi svg {
width:calc({select:post font size} + 2px);
height:calc({select:post font size} + 2px);
color:{color:text};
}
.pn {
margin-left:auto;
}
{CustomCSS}
</style>
</head>
<body>
<!----- BACKGROUND IMAGE ----->
<div class="wallpaper" type="{select:background size}"></div>
{block:ifbackgroundgradient}
<div class="botgradient"></div>
<div class="boxshad"></div>
<div class="sidegrad"></div>
{/block:ifbackgroundgradient}
<!----- TOP BAR ----->
<div class="topbar">
<div class="tbm">
<div class="jhin-n-tonic">
<div class="topleft">
<div class="chev">
<i data-feather="chevron-down"></i>
</div>
<div class="icoe-a">
<div class="icoe-b">
<div class="icon-act"></div>
</div>
</div>
<div class="tl-text">
<div class="tl-top">
{block:iftoptitle1}
{text:top title 1}
{/block:iftoptitle1}
{block:ifnottoptitle1}
{Name}
{/block:ifnottoptitle1}
</div>
<div class="tl-bot">
{block:iftoptitle2}
{text:top title 2}
{/block:iftoptitle2}
{block:ifnottoptitle2}
{Title}
{/block:ifnottoptitle2}
</div>
</div>
</div><!--topleft-->
<div class="linqhoe">
<a href="/">home</a>
<a href="/ask" title="{AskLabel}">ask</a>
<a href="/submit" title="{SubmitLabel}">submit</a>
<a href="/archive">archive</a>
<a href="//glenthemes.tumblr.com" title="theme by glenthemes">theme</a>
</div><!--end toplinks-->
</div><!--jhin-n-tonic-->
</div><!--tbm-->
</div><!--end topbar-->
<!----- DESCRIPTION BOX ----->
{block:Description}
<div class="descbox" hover="{select:descbox hover}">
<div class="desc">
{Description}
</div><!--end description-->
</div><!--end description box-->
{/block:Description}
<!----- BOTTOM LEFT CORNER TEXT ----->
<div class="cornerside">
<div class="corner-title">{text:corner title}</div>
<div class="corner-sub">{text:corner subtitle}</div>
</div>
<!----- BOTTOM BAR ----->
<div class="botbar">
{block:ifshowmusicplayer}
<div class="sike">
<div class="glenjams-06">
<div class="pasta">
<div class="vinyl"></div>
<div class="music-controls">
<div class="playy"><i data-feather="play"></i></div>
<div class="pausee"><i data-feather="pause"></i></div>
</div>
<div class="klutch">
<div class="music-title">{text:music name}</div>
<div class="music-artist">{text:music artist}</div>
</div>
<audio id="audio" src="{text:music file mp3}" type="audio"></audio>
</div><!--pasta-->
</div><!--glenjams-06-->
</div><!--sike-->
{/block:ifshowmusicplayer}
<div class="botlinks">
{block:ifcustomlink1name}
<a href="{text:customlink 1 URL}">{text:customlink 1 name}</a>
{/block:ifcustomlink1name}
{block:ifcustomlink2name}
<a href="{text:customlink 2 URL}">{text:customlink 2 name}</a>
{/block:ifcustomlink2name}
{block:ifcustomlink3name}
<a href="{text:customlink 3 URL}">{text:customlink 3 name}</a>
{/block:ifcustomlink3name}
{block:ifcustomlink4name}
<a href="{text:customlink 4 URL}">{text:customlink 4 name}</a>
{/block:ifcustomlink4name}
{block:ifcustomlink5name}
<a href="{text:customlink 5 URL}">{text:customlink 5 name}</a>
{/block:ifcustomlink5name}
{block:ifcustomlink6name}
<a href="{text:customlink 6 URL}">{text:customlink 6 name}</a>
{/block:ifcustomlink6name}
</div><!--end customlinks-->
<div class="tangerine">
<div class="bork">
<span>scroll to top</span>
<i class="material-icons">arrow_upward</i>
</div>
</div>
</div><!--botbar-->
<!----- MAIN POSTS ----->
<div class="postscont">
{block:Posts inlineMediaWidth="1280" inlineNestedMediaWidth="1280"}
<div class="posts {block:ifreblogseparators}oui{/block:ifreblogseparators}" id="{PostID}" post-type="{PostType}">
<!------ POST TITLE ------>
{block:Title}
<h1 href="{Permalink}" class="title">{Title}</h1>
{/block:Title}
<!------ END POST TITLE ------>
{block:RebloggedFrom}
<div class="commenter nosrc">
<img src="{ReblogRootPortraitURL-64}">
<a href="{ReblogRootURL}">{ReblogRootName}</a>
</div>
{/block:RebloggedFrom}
<!------ TEXT POSTS ------>
{block:Text}
<div class="body">
{block:NotReblog}{Body}{/block:NotReblog}
{block:RebloggedFrom}
{block:Reblogs}
<div class="comment_container">
<div class="commenter source-head">
<img src="{PortraitURL-64}">
<a href="{block:HasPermalink}{Permalink}{/block:HasPermalink}">{Username}</a>
</div>
<div class="comment">{Body}</div>
</div>
{/block:Reblogs}
{/block:RebloggedFrom}
</div>
{/block:Text}
<!------ END TEXT POSTS ------>
<!------ SINGLE PHOTO ------>
{block:Photo}
<a class="single" onclick="Tumblr.Lightbox.init([{ width:{PhotoWidth-HighRes}, height:{PhotoHeight-HighRes}, low_res:'{PhotoURL-500}', high_res:'{PhotoURL-HighRes}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false"><img class="photopic" src="{PhotoURL-HighRes}" alt="{PhotoAlt}"></a>
{/block:Photo}
<!------ END SINGLE PHOTO ------>
<!------ PHOTOSETS ------>
{block:Photoset}<div class="photoset-grid" photoset-layout="{PhotosetLayout}">{block:Photos}<div data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" data-lowres="{PhotoURL-500}" data-highres="{PhotoURL-HighRes}" onclick="lightbox(this)"><img src="{PhotoURL-HighRes}" /></div>{/block:Photos}</div>{/block:Photoset}
<!------ END PHOTOSETS ------>
<!------ QUOTE POSTS ------>
{block:Quote}
<div class="quote-words">{Quote}</div>
{block:Source}<div class="quote-source">&mdash; {Source}</div>{/block:Source}
{/block:Quote}
<!------ END QUOTE POSTS ------>
<!------ LINK POSTS ------>
{block:Link}
<a href="{URL}" class="linkpath" {Target}>{Name} »</a>
{block:Excerpt}
<div class="linkdesc">
{Excerpt}
<div class="genlinkbase">{Host}</div>
</div>
{/block:Excerpt}
{block:Description}
<div class="linkcapt">
{block:NotReblog}{Description}{/block:NotReblog}
{block:RebloggedFrom}
{block:Reblogs}
<div class="comment_container">
<div class="commenter">
<img src="{PortraitURL-64}">
<a href="{block:HasPermalink}{Permalink}{/block:HasPermalink}">{Username}</a>
</div>
<div class="comment">{Body}</div>
</div>
{/block:Reblogs}
{/block:RebloggedFrom}
</div>
{/block:Description}
{/block:Link}
<!------ END LINK POSTS ------>
<!------ CHAT POSTS ------>
{block:Chat}
<div>
{block:Lines}
<div class="chatholder">
{block:Label}
<span class="chat_label">{Label}</span>
{/block:Label}
<span class="chat_content">{Line}</span>
</div>
{/block:Lines}
</div>
{/block:Chat}
<!------ END CHAT ------>
<!------ AUDIO POSTS ------>
{block:Audio}
<div class="flex">
<div class="audiocont">
{AudioEmbed}
</div>
<div class="alcove">
<img class="a-lbum-img">
<div class="strawberries">
<div class="summer">
<div class="splay">
<i class="material-icons">play_arrow</i>
</div>
<div class="spause">
<i class="material-icons">pause</i>
</div>
</div><!--summer-->
</div>
</div>
<div class="tin flex space-between">
<div class="trackinfo">
{block:TrackName}
<div class="t-name">{TrackName}</div>
{/block:TrackName}
{block:Artist}
<div class="t-artist">{Artist}</div>
{/block:Artist}
</div><!--trackinfo-->
<a class="dongload" title="download">
<i data-feather="download"></i>
</a>
</div><!--flex-->
</div><!--oofy-->
{/block:Audio}
<!------ END AUDIO ------>
<!------ VIDEO POSTS ------>
{block:Video}<div class="video">{Video-500}</div>{/block:Video}
<!------ END VIDEOS ------>
<!------ ANSWER POSTS ------>
{block:Answer}
<div class="comment_container askhold asker_">
<div class="commenter">
<img src="{AskerPortraitURL-48}">
</div>
<div class="commenter">
{Asker}<span>asked:</span>
</div>
<div class="question_text">{Question}</div>
</div>
{block:Answerer}
<div class="comment_container askhold answerer_">
<div class="commenter">
<img src="{AnswererPortraitURL-48}">
{Answerer}<span>answered:</span>
</div>
<div class="answer_text body">{Answer}</div>
</div>
{block:Reblogs}
<div class="comment_container">
<div class="replier commenter">
<img src="{PortraitURL-64}">
<a href="{block:HasPermalink}{Permalink}{/block:HasPermalink}">{Username}</a>
</div>
<div class="reply">{Body}</div>
</div>
{/block:Reblogs}
{/block:Answerer}
{block:NotReblog}
<div class="comment_container">
<div class="answerer commenter">
<img src="{PortraitURL-48}">
<a href="{Permalink}">{Name}</a>
</div><!--answerer-->
<div class="answer_text">{Answer}</div>
</div><!--answer-container-->
{/block:NotReblog}
{/block:Answer}
<!------ END ANSWER ------>
{block:Caption}
<div class="caption">
{block:NotReblog}{Caption}{/block:NotReblog}
{block:RebloggedFrom}
{block:Reblogs}
<div class="comment_container">
<div class="commenter">
<img src="{PortraitURL-64}">
<a href="{block:HasPermalink}{Permalink}{/block:HasPermalink}">{Username}</a>
</div><!--commenter-->
<div class="comment">{Body}</div>
</div><!--comment-container-->
{/block:Reblogs}
{/block:RebloggedFrom}
</div><!--caption-->
{/block:Caption}
{block:HasTags}
<div class="tagcont">
<div class="tagholder">
{block:Tags}
<a href="{TagURL}">#{Tag}</a>
{/block:Tags}
</div>
</div>
{/block:HasTags}
{block:Date}
<div class="permarow">
<div class="permaleft">
{block:IndexPage}
<a href="{Permalink}">{NoteCountWithLabel}</a>
{/block:IndexPage}
{block:PermalinkPage}
{block:NotReblog}Posted{/block:NotReblog}
{block:RebloggedFrom}Reblogged{/block:RebloggedFrom}
on {Month} {DayOfMonth}{DayOfMonthSuffix}, {Year}
&middot; {NoteCountWithLabel}
{/block:PermalinkPage}
</div>
<div class="permaright">
{block:IndexPage}
<div class="les-controls flex">
{block:iftagsonclick}
{block:HasTags}
<a class="viewtags">
<i data-feather="hash"></i>
</a>
{/block:HasTags}
{/block:iftagsonclick}
<a href="{ReblogURL}" target="_blank">
<span class="retweet"></span>
</a>
<a class="likecont like">
{LikeButton}
<span class="heart"></span>
</a>
</div>
{/block:IndexPage}
{block:PermalinkPage}
{block:RebloggedFrom}
<a href="{ReblogParentURL}" title="{ReblogParentName}">via</a>
<a href="{ReblogRootURL}" title="{ReblogRootName}">source</a>
{/block:RebloggedFrom}
{/block:PermalinkPage}
</div>
</div><!--permarow-->
{/block:Date}
</div><!--posts-->
{block:PostNotes}
<div class="notescont">
{PostNotes}
</div>
{/block:PostNotes}
{/block:Posts}
<!------- PAGINATION ------->
{block:Pagination}
<div class="botpagi flex space-between">
{block:PreviousPage}
<a class="flex" href="{PreviousPage}">
<i data-feather="chevron-left"></i>
<span>previous</span>
</a>
{/block:PreviousPage}
{block:NextPage}
<a class="flex pn" href="{NextPage}">
<span>next</span>
<i data-feather="chevron-right"></i>
</a>
{/block:NextPage}
</div><!--botpagi-->
{/block:Pagination}
</div><!--postscont-->
<script src="//static.tumblr.com/0podkko/jfMplm3f8/modified_photosets.js"></script>
<script>
feather.replace();
</script>
<script>
$(document).ready(function(){
$('img[src*="media.tumblr.com"]').each(function(){
var newsrc = $(this).attr('src').replace('gifv','gif');
$(this).attr('src', newsrc);
});
$('a[href*="media.tumblr.com"]').each(function(){
var newhref = $(this).attr('href').replace('gifv','gif');
$(this).attr('href', newhref);
});
$('div[data-lowres*="media.tumblr.com').each(function(){
var newdata = $(this).attr('data-lowres').replace('gifv','gif');
$(this).attr('data-lowres', newdata);
});
$('div[data-highres*="media.tumblr.com').each(function(){
var newdata = $(this).attr('data-highres').replace('gifv','gif');
$(this).attr('data-highres', newdata);
});
});
</script>
</body>
</html>