themes/07-Wonder-Duo

2993 lines
88 KiB
Plaintext

<!----------------------------------------------------
Theme [07]: Wonder Duo
Made by glenthemes
Initial release: 2017/01/22
Revamp date: 2021/10/28
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.
CREDITS:
(๑•̀ㅂ•́)و✧ ~ glencredits.tumblr.com/wonderduo
----------------------------------------------------->
<!DOCTYPE html>
<html font="{select:font}" tumblr-controls="{select:tumblr controls color}" bg-type="{select:background image type}" portrait="{PortraitURL-64}">
<head>
<title>{Title}{block:PostSummary} | "{PostSummary}"{/block:PostSummary}{block:TagPage} | #{Tag}{/block:TagPage}</title>
<link rel="shortcut icon" href="{Favicon}">
<!-------- FONTS -------->
<!-- google fonts -->
<link href="//fonts.googleapis.com/css?family=Work+Sans|Public+Sans:400,500,600|Cousine|Libre+Franklin|Open+Sans|Manrope:500|Karla|Bai+Jamjuree|Nova+Square|Klee+One:600|Poppins:500|Montserrat|Quantico|Be+Vietnam+Pro:700" rel="stylesheet">
<!-------- ICON FONTS -------->
<!-- phosphor icons -->
<link rel="stylesheet" href="//unpkg.com/phosphor-icons@1.3.2/src/css/phosphor.css">
<!-- basicons -->
<script src="//glenthemes.github.io/basicons/init-icons.js"></script>
<link href="//glenthemes.github.io/basicons/style.css" rel="stylesheet">
<!-------- JQUERY -------->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<!-------- THEME SCRIPTS -------->
<script src="//npf-images-v3.github.io/script.js"></script>
<link rel="stylesheet" href="//npf-images-v3.github.io/recon.css">
<script src="//rawgit.com/robinpx/tumblr/master/scripts/flexibleFrames/flexibleFrames.min.js"></script>
<link href="//static.tumblr.com/0podkko/oDSpg7y88/photosets.css" rel="stylesheet">
<script src="//static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
<script src="//static.tumblr.com/gtjt4bo/sgMrymui0/waitforelement.js"></script>
<script src="//glen-themes.gitlab.io/thms/07/w-pain.js"></script>
<script src="//glen-themes.gitlab.io/thms/07/w-beurre.js"></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: var(--Body-Font-Size);
--Poll-Option-Background-Color: {color:post};
--Poll-Option-Corner-Rounding: var(--Post-Corner-Roundness);
--Poll-Option-Border-Size: 1px;
--Poll-Option-Border-Color: {color:post borders inner};
--Poll-Option-Padding: 8px;
--Poll-Option-Font-Size: var(--Body-Font-Size);
--Poll-Option-Spacing: 10px;
--Poll-Option-Text-Color: {color:text};
--Poll-Option-HOVER-Border-Color: {color:special border};
--Poll-Option-HOVER-Background-Color: {color:special background};
--Poll-Option-HOVER-Text-Color: {color:special text};
--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: var(--Audio-Post-Buttons-Size);
--NPF-Audio-Buttons-Color: var(--Audio-Post-Buttons-Color);
--NPF-Audio-Buttons-Padding: var(--Audio-Post-Buttons-Padding);
--NPF-Audio-Buttons-Spacing: calc(var(--p) + var(--Audio-Post-Album-Right-Gap));
--NPF-Audio-Image-Size: var(--Audio-Post-Album-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;
background:{color:special background};
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));
margin-left:calc(0px - var(--NPF-Audio-Buttons-Padding));
width:calc(100% + (var(--NPF-Audio-Buttons-Padding) * 2));
height:calc(100% + (var(--NPF-Audio-Buttons-Padding) * 2));
background:var(--Audio-Post-Buttons-Background);
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]{
display:none;
}
.npf-audio-image {
position:absolute;
top:0;left:0;
z-index:-1;
}
</style>
<script src="//glen-npf.gitlab.io/other/neue.js"></script>
<link href="//glen-npf.gitlab.io/other/neue.css" rel="stylesheet">
<!-------- CUSTOMIZE PANEL OPTIONS -------->
<!-- hi if you're reading this click the back arrow to edit! -->
<meta name="image:header image 1" content="//64.media.tumblr.com/aac03688737eee07cddf23646abb41f1/aa56c24116a90bd2-de/s2048x3072/1630639a3e95bcc2f4848994f808b9616faaee7e.png">
<meta name="image:header image 2" content="//64.media.tumblr.com/4674ae1c59c7015f339a8ed35269905c/aa56c24116a90bd2-f3/s2048x3072/50b96fddf0a9e5d6a3114e9543a4856fc8d1bf7c.png">
<meta name="image:sidebar icon" content="//64.media.tumblr.com/2cfd0ceb8464e6b1fb213f1bb1d197cc/aa56c24116a90bd2-58/s2048x3072/205c9894ae31cf1b18ef5922b8031b016595fca3.png">
<meta name="image:background image" content="//64.media.tumblr.com/adcad89e8a50ef13493239604c88330a/aa56c24116a90bd2-0f/s2048x3072/7b1f703fb72a0cba80f784af3d8be13ca41612a9.png">
<meta name="color:topbar background" content="#171717">
<meta name="color:customlinks" content="#d5d5d5">
<meta name="color:customlinks hover A" content="#a1c38c">
<meta name="color:customlinks hover B" content="#c3ad8c">
<meta name="color:music player bg" content="#191919">
<meta name="color:music player text" content="#d5d5d5">
<meta name="color:header background" content="#f8f8f8">
<meta name="color:header panel title" content="#222">
<meta name="color:header desc bg" content="#fcfcfc">
<meta name="color:header desc text" content="#666">
<meta name="color:header desc hyperlinks" content="#c29379">
<meta name="color:header button" content="#333">
<meta name="color:header bottom border" content="#222">
<!----------------------->
<meta name="color:background" content="#f9f9f9">
<meta name="color:sidebar title background" content="#222">
<meta name="color:sidebar title" content="#d5d5d5">
<meta name="color:sidebar icon background" content="#f2f2f2">
<meta name="color:sidebar icon border" content="#e5e5e5">
<meta name="color:sidebar subtitle background" content="#fcfcfc">
<meta name="color:sidebar subtitle" content="#333">
<meta name="color:sidebar boxes bg" content="#fcfcfc">
<meta name="color:sidebar boxes text" content="#333">
<meta name="color:sidebar hyperlinks" content="#a1c38c">
<meta name="color:updates symbol A" content="#97b971">
<meta name="color:updates symbol B" content="#f2b26d">
<meta name="color:updates label bg" content="#efefef">
<meta name="color:updates label text" content="#222">
<meta name="color:post" content="#fff">
<meta name="color:text" content="#444">
<meta name="color:special background" content="#fafafa">
<meta name="color:special text" content="#222">
<meta name="color:special border" content="#e9e9e9">
<meta name="color:link" content="#b99c86">
<meta name="color:post borders outer" content="#eee">
<meta name="color:post borders inner" content="#f2f2f2">
<meta name="color:reblogger" content="#222">
<meta name="color:tags" content="#333">
<meta name="color:permalink background" content="#191919">
<meta name="color:permalink border" content="#191919">
<meta name="color:permalink" content="#d5d5d5">
<meta name="color:post buttons" content="#d5d5d5">
<meta name="color:like button liked" content="#ff8b7c">
<meta name="color:scrollbar" content="#999">
<meta name="color:scrollbar background" content="#f9f9f9">
<meta name="color:text selection background" content="#f1f1f1">
<meta name="color:text selected" content="#222">
<meta name="color:bottom bar border" content="#f0f0f0">
<meta name="color:bottom bar background" content="#fbfbfb">
<meta name="color:bottom bar text" content="#666">
<meta name="color:searchbar bg" content="#f2f2f2">
<meta name="color:searchbar border" content="#ddd">
<meta name="color:searchbar text" content="#666">
<!----------------------->
<meta name="select:background image type" title="small" content="repeat">
<meta name="select:background image type" title="large" content="full">
<meta name="select:-------------------">
<meta name="select:topbar padding" title="20px" content="20px">
<meta name="select:topbar padding" title="15px" content="15px">
<meta name="select:topbar padding" title="25px" content="25px">
<meta name="select:customlinks font size" title="9px" content="9px">
<meta name="select:customlinks font size" title="8px" content="8px">
<meta name="select:customlinks font size" title="10px" content="10px">
<meta name="select:customlinks font size" title="11px" content="11px">
<meta name="select:customlinks font size" title="12px" content="12px">
<meta name="select:customlinks font size" title="13px" content="13px">
<meta name="select:customlinks spacing" title="10px" content="10px">
<meta name="select:customlinks spacing" title="6px" content="6px">
<meta name="select:customlinks spacing" title="8px" content="8px">
<meta name="select:customlinks spacing" title="12px" content="12px">
<meta name="select:customlinks spacing" title="14px" content="14px">
<!-------- HEADER OPTIONS -------->
<meta name="select:--------------------">
<meta name="select:header height" title="375px" content="375px">
<meta name="select:header height" title="350px" content="350px">
<meta name="select:header height" title="400px" content="400px">
<meta name="select:header height" title="425px" content="425px">
<meta name="select:header height" title="450px" content="450px">
<meta name="select:header image 1 size" title="130%" content="1.3">
<meta name="select:header image 1 size" title="80%" content="0.8">
<meta name="select:header image 1 size" title="90%" content="0.9">
<meta name="select:header image 1 size" title="100%" content="1">
<meta name="select:header image 1 size" title="110%" content="1.1">
<meta name="select:header image 1 size" title="120%" content="1.2">
<meta name="select:header image 1 size" title="140%" content="1.4">
<meta name="select:header image 1 size" title="150%" content="1.5">
<meta name="select:header image 1 adjust X" title="5%" content="0.05">
<meta name="select:header image 1 adjust X" title="-25%" content="-0.25">
<meta name="select:header image 1 adjust X" title="-20%" content="-0.2">
<meta name="select:header image 1 adjust X" title="-15%" content="-0.15">
<meta name="select:header image 1 adjust X" title="-10%" content="-0.1">
<meta name="select:header image 1 adjust X" title="-5%" content="-0.05">
<meta name="select:header image 1 adjust X" title="0%" content="0">
<meta name="select:header image 1 adjust X" title="10%" content="0.1">
<meta name="select:header image 1 adjust X" title="15%" content="0.15">
<meta name="select:header image 1 adjust X" title="20%" content="0.2">
<meta name="select:header image 1 adjust X" title="25%" content="0.25">
<meta name="select:header image 1 adjust Y" title="5%" content="0.05">
<meta name="select:header image 1 adjust Y" title="-25%" content="-0.25">
<meta name="select:header image 1 adjust Y" title="-20%" content="-0.2">
<meta name="select:header image 1 adjust Y" title="-15%" content="-0.15">
<meta name="select:header image 1 adjust Y" title="-10%" content="-0.1">
<meta name="select:header image 1 adjust Y" title="-5%" content="-0.05">
<meta name="select:header image 1 adjust Y" title="0%" content="0">
<meta name="select:header image 1 adjust Y" title="10%" content="0.1">
<meta name="select:header image 1 adjust Y" title="15%" content="0.15">
<meta name="select:header image 1 adjust Y" title="20%" content="0.2">
<meta name="select:header image 1 adjust Y" title="25%" content="0.25">
<meta name="select:header image 1 adjust Y" title="30%" content="0.3">
<meta name="select:header image 1 adjust Y" title="35%" content="0.35">
<meta name="select:header image 1 adjust Y" title="40%" content="0.4">
<!---------------->
<meta name="select:header image 2 size" title="130%" content="1.3">
<meta name="select:header image 2 size" title="80%" content="0.8">
<meta name="select:header image 2 size" title="90%" content="0.9">
<meta name="select:header image 2 size" title="100%" content="1">
<meta name="select:header image 2 size" title="110%" content="1.1">
<meta name="select:header image 2 size" title="120%" content="1.2">
<meta name="select:header image 2 size" title="140%" content="1.4">
<meta name="select:header image 1 size" title="150%" content="1.5">
<meta name="select:header image 2 adjust X" title="5%" content="0.05">
<meta name="select:header image 2 adjust X" title="-25%" content="-0.25">
<meta name="select:header image 2 adjust X" title="-20%" content="-0.2">
<meta name="select:header image 2 adjust X" title="-15%" content="-0.15">
<meta name="select:header image 2 adjust X" title="-10%" content="-0.1">
<meta name="select:header image 2 adjust X" title="-5%" content="-0.05">
<meta name="select:header image 2 adjust X" title="0%" content="0">
<meta name="select:header image 2 adjust X" title="10%" content="0.1">
<meta name="select:header image 2 adjust X" title="15%" content="0.15">
<meta name="select:header image 2 adjust X" title="20%" content="0.2">
<meta name="select:header image 2 adjust X" title="25%" content="0.25">
<meta name="select:header image 2 adjust Y" title="0%" content="0">
<meta name="select:header image 2 adjust Y" title="-25%" content="-0.25">
<meta name="select:header image 2 adjust Y" title="-20%" content="-0.2">
<meta name="select:header image 2 adjust Y" title="-15%" content="-0.15">
<meta name="select:header image 2 adjust Y" title="-10%" content="-0.1">
<meta name="select:header image 2 adjust Y" title="-5%" content="-0.05">
<meta name="select:header image 2 adjust Y" title="5%" content="0.05">
<meta name="select:header image 2 adjust Y" title="10%" content="0.1">
<meta name="select:header image 2 adjust Y" title="15%" content="0.15">
<meta name="select:header image 2 adjust Y" title="20%" content="0.2">
<meta name="select:header image 2 adjust Y" title="25%" content="0.25">
<meta name="select:header image 2 adjust Y" title="30%" content="0.3">
<meta name="select:header image 2 adjust Y" title="35%" content="0.35">
<meta name="select:header image 2 adjust Y" title="40%" content="0.4">
<!---------------->
<meta name="select:header panel side gap" title="10%" content="0.1">
<meta name="select:header panel side gap" title="5%" content="0.05">
<meta name="select:header panel side gap" title="15%" content="0.15">
<meta name="select:header panel side gap" title="20%" content="0.2">
<meta name="select:header panel side gap" title="25%" content="0.25">
<meta name="select:header panel width" title="275px" content="275px">
<meta name="select:header panel width" title="200px" content="200px">
<meta name="select:header panel width" title="225px" content="225px">
<meta name="select:header panel width" title="250px" content="250px">
<meta name="select:header panel width" title="300px" content="300px">
<meta name="select:header panel width" title="325px" content="325px">
<meta name="select:header panel title size" title="14px" content="14px">
<meta name="select:header panel title size" title="12px" content="12px">
<meta name="select:header panel title size" title="16px" content="16px">
<meta name="select:header panel title size" title="18px" content="18px">
<!-------- SIDEBAR OPTIONS -------->
<meta name="select:---------------------">
<meta name="select:sidebar width" title="250px" content="250px">
<meta name="select:sidebar width" title="200px" content="200px">
<meta name="select:sidebar width" title="225px" content="225px">
<meta name="select:sidebar width" title="275px" content="275px">
<meta name="select:sidebar width" title="300px" content="300px">
<meta name="select:sidebar width" title="325px" content="325px">
<meta name="select:sidebar width" title="350px" content="350px">
<meta name="select:sidebar title text align" title="left" content="left">
<meta name="select:sidebar title text align" title="right" content="right">
<meta name="select:sidebar title text align" title="center" content="center">
<meta name="select:sidebar title text align" title="justify" content="justify">
<meta name="select:sidebar title font" title="Hatsukoi Friends" content="hatsukoi">
<meta name="select:sidebar title font" title="Poppins" content="poppins">
<meta name="select:sidebar title size" title="12px" content="13px">
<meta name="select:sidebar title size" title="9px" content="10px">
<meta name="select:sidebar title size" title="10px" content="11px">
<meta name="select:sidebar title size" title="11px" content="12px">
<meta name="select:sidebar title size" title="13px" content="14px">
<meta name="select:sidebar title size" title="14px" content="15px">
<meta name="select:sidebar title size" title="15px" content="16px">
<meta name="select:sidebar title size" title="16px" content="17px">
<meta name="select:sidebar icon position" title="right" content="right">
<meta name="select:sidebar icon position" title="left" content="left">
<meta name="select:sidebar icon overlap" title="35%" content="0.35">
<meta name="select:sidebar icon overlap" title="20%" content="0.2">
<meta name="select:sidebar icon overlap" title="25%" content="0.25">
<meta name="select:sidebar icon overlap" title="30%" content="0.3">
<meta name="select:sidebar icon overlap" title="40%" content="0.4">
<meta name="select:sidebar icon overlap" title="45%" content="0.45">
<meta name="select:sidebar icon size" title="50px" content="50px">
<meta name="select:sidebar icon size" title="40px" content="40px">
<meta name="select:sidebar icon size" title="45px" content="45px">
<meta name="select:sidebar icon size" title="55px" content="55px">
<meta name="select:sidebar icon size" title="60px" content="60px">
<meta name="select:sidebar icon size" title="65px" content="65px">
<meta name="select:sidebar subtitle font" title="Honya Ji" content="honyaji">
<meta name="select:sidebar subtitle font" title="Klee One" content="klee-one">
<meta name="select:sidebar subtitle font" title="Quantico" content="quantico">
<meta name="select:sidebar subtitle size" title="12px" content="12px">
<meta name="select:sidebar subtitle size" title="10px" content="10px">
<meta name="select:sidebar subtitle size" title="11px" content="11px">
<meta name="select:sidebar subtitle size" title="13px" content="13px">
<meta name="select:sidebar subtitle size" title="14px" content="14px">
<meta name="select:sidebar subtitle size" title="15px" content="15px">
<meta name="select:sidebar subtitle size" title="16px" content="16px">
<meta name="select:sidebar desc text align" title="justify" content="justify">
<meta name="select:sidebar desc text align" title="left" content="left">
<meta name="select:sidebar desc text align" title="center" content="center">
<meta name="select:sidebar desc text align" title="right" content="right">
<meta name="select:updates box symbol" title="star" content="star-ratings">
<meta name="select:updates box symbol" title="moon" content="moon-night">
<meta name="select:updates box symbol" title="dash" content="subtract-minus-remove">
<meta name="select:updates box symbol" title="plus" content="add-plus">
<meta name="select:updates box symbol" title="heart" content="heart-love-like">
<meta name="select:updates box symbol" title="thumbs up" content="thumbs-up">
<meta name="select:updates box symbol" title="user" content="user-account-profile">
<meta name="select:updates box symbol" title="activity" content="activity-graph">
<meta name="select:updates box symbol" title="bookmark" content="bookmark-save">
<meta name="select:updates box symbol" title="write" content="edit-write">
<meta name="select:sidebar boxes spacing" title="20px" content="20px">
<meta name="select:sidebar boxes spacing" title="15px" content="15px">
<meta name="select:sidebar boxes spacing" title="25px" content="25px">
<meta name="select:sidebar boxes spacing" title="30px" content="30px">
<meta name="select:sidebar boxes spacing" title="35px" content="35px">
<!-------- SIDEBAR VS POSTS GUTTER -------->
<meta name="select:----------------------">
<meta name="select:center gap" title="40px" content="40px">
<meta name="select:center gap" title="25px" content="25px">
<meta name="select:center gap" title="10px" content="10px">
<meta name="select:center gap" title="15px" content="15px">
<meta name="select:center gap" title="20px" content="20px">
<meta name="select:center gap" title="30px" content="30px">
<meta name="select:center gap" title="35px" content="35px">
<meta name="select:center gap" title="45px" content="45px">
<meta name="select:center gap" title="55px" content="55px">
<meta name="select:center gap" title="50px" content="50px">
<meta name="select:center gap" title="55px" content="55px">
<meta name="select:center gap" title="60px" content="60px">
<meta name="select:center gap" title="65px" content="65px">
<meta name="select:center gap" title="70px" content="70px">
<!-------- POST OPTIONS -------->
<meta name="select:-----------------------">
<meta name="select:font" title="Libre Franklin" content="Libre Franklin">
<meta name="select:font" title="Open Sans" content="Open Sans">
<meta name="select:font" title="Manrope" content="Manrope">
<meta name="select:font" title="Karla" content="Karla">
<meta name="select:font" title="Bai Jamjuree" content="Bai Jamjuree">
<meta name="select:font size" title="12px" content="12px">
<meta name="select:font size" title="10px" content="10px">
<meta name="select:font size" title="11px" content="11px">
<meta name="select:font size" title="13px" content="13px">
<meta name="select:font size" title="14px" content="14px">
<meta name="select:font size" title="15px" content="15px">
<meta name="select:post width" title="500px" content="500px">
<meta name="select:post width" title="380px" content="380px">
<meta name="select:post width" title="420px" content="420px">
<meta name="select:post width" title="460px" content="460px">
<meta name="select:post width" title="540px" content="540px">
<meta name="select:post width" title="580px" content="580px">
<meta name="select:post padding" title="12px" content="12px">
<meta name="select:post padding" title="10px" content="10px">
<meta name="select:post padding" title="14px" content="14px">
<meta name="select:post padding" title="16px" content="16px">
<meta name="select:post padding" title="18px" content="18px">
<meta name="select:post padding" title="20px" content="20px">
<meta name="select:photoset spacing" title="4px" content="4px">
<meta name="select:photoset spacing" title="2px" content="2px">
<meta name="select:photoset spacing" title="6px" content="6px">
<meta name="select:photoset spacing" title="8px" content="8px">
<meta name="select:photoset spacing" title="10px" content="10px">
<meta name="select:grayscale images" title="reblogger icon only" content="rb-ico">
<meta name="select:grayscale images" title="everything in posts" content="everything">
<meta name="select:grayscale images" title="off" content="off">
<meta name="select:click tags" title="yes" content="yes">
<meta name="select:click tags" title="no" content="no">
<meta name="select:post spacing" title="30px" content="30px">
<meta name="select:post spacing" title="25px" content="25px">
<meta name="select:post spacing" title="35px" content="35px">
<meta name="select:post spacing" title="40px" content="40px">
<meta name="select:post spacing" title="45px" content="45px">
<meta name="select:post spacing" title="50px" content="50px">
<meta name="select:post spacing" title="55px" content="55px">
<!-------- BOTTOM BAR OPTIONS -------->
<meta name="select:------------------------">
<meta name="select:bottom bar padding" title="16px" content="16px">
<meta name="select:bottom bar padding" title="12px" content="12px">
<meta name="select:bottom bar padding" title="14px" content="14px">
<meta name="select:bottom bar padding" title="18px" content="18px">
<meta name="select:bottom bar padding" title="20px" content="20px">
<meta name="select:bottom bar padding" title="22px" content="22px">
<meta name="select:bottom bar font size" title="10px" content="7px">
<meta name="select:bottom bar font size" title="9px" content="6px">
<meta name="select:bottom bar font size" title="11px" content="8px">
<meta name="select:bottom bar font size" title="12px" content="9px">
<meta name="select:bottom bar font size" title="13px" content="10px">
<meta name="select:-------------------------">
<!--------- TUMBLR CONTROLS OPTIONS --------->
<meta name="select:tumblr controls color" title="white" content="white">
<meta name="select:tumblr controls color" title="black" content="black">
<!--------- TEXT FIELDS --------->
<meta name="text:how to link music" content="linktr.ee/direct_file_links">
<meta name="text:music player song name" content="&#11816; Valiant &#11817; &mdash; Dream Cave">
<meta name="text:music player song mp3" content="//rhizo.gitlab.io/m/Valiant_by_Dream_Cave.mp3">
<meta name="text:header panel title" content="Wonder Duo">
<meta name="text:header desc" content="The hardest kind of resistance is when you're resisting yourself. When your heart wants something, and your brain prevents it. When you want to cry, but you smile instead to protect your pride. When you feel like blowing up, but prefer to explode in your deepest depths, so no one around you can feel it.">
<meta name="text:header image 1 button" content="Fear, pride, denial">
<meta name="text:header image 2 button" content="Envy, antipathy, pursuit">
<meta name="text:sidebar title" content="「 負けた方がマシだなんて 」、
&lt;br&gt;&emsp; 君が言うなよ">
<meta name="text:sidebar subtitle" content="誰がてめェなんかと!!">
<meta name="text:sidebar desc" content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.">
<meta name="text:updates box" content="* Name: your name&NewLine;* Tip 1: use square brackets to make small capitalized text, like [this]&NewLine;* Tip 2: here is a &nbsp;&lt;a href=&quot;//tumblr.com&quot;&gt;sample link&lt;/a&gt;">
<meta name="text:customlink 1 name" content="sample link">
<meta name="text:customlink 1 url" content="//youtu.be/ZkNMZlkrzaU">
<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: "hatsukoi friends"; src: url('//glen-assets.github.io/fonts/HatsukoiFriends.otf'); }
@font-face { font-family: "honya ji"; src: url('//glen-assets.github.io/fonts/HonyaJi.ttf'); }
/*-------- TUMBLR CONTROLS --------*/
iframe#tumblr_controls, .iframe-controls--desktop {
top:calc(((var(--topbarH) - (34px * var(--Tumblr-Controls-Resize))) / 2) - (10px * var(--Tumblr-Controls-Resize)))!important;
right:calc(5px + (var(--Scrollbar-Padding) / 2))!important;
position:fixed!important;
transform:scale(var(--Tumblr-Controls-Resize),var(--Tumblr-Controls-Resize));
transform-origin:100% 0;
z-index:999999!important;
user-select:none;
}
[tumblr-controls="black"] iframe#tumblr_controls,
[tumblr-controls="black"] .iframe-controls--desktop {
filter:invert(100%) hue-rotate(180deg)!important;
-webkit-filter:invert(100%) hue-rotate(180deg)!important;
}
/*------- SCROLLBAR --------*/
::-webkit-scrollbar {
width:var(--Scrollbar-Padding);
height:var(--Scrollbar-Padding);
background-color:{color:scrollbar background};
}
::-webkit-scrollbar-thumb {
background-color:{color:scrollbar};
border:calc((var(--Scrollbar-Padding) - 1px) / 2) solid transparent;
border-top:calc(var(--Scrollbar-Padding) / 2.69) solid transparent;
border-bottom:calc(var(--Scrollbar-Padding) / 2.69) solid transparent;
background-clip:padding-box;
}
::-webkit-scrollbar-corner {
background:transparent;
}
/*------- TOOLTIPS --------*/
#s-m-t-tooltip {
padding:6px 9px;
margin:17px;
background-color:{color:post};
border-radius:2px;
border:1px solid {color:post borders outer};
font-family:var(--SmallCaps-Font-Family);
font-size:calc(var(--SmallCaps-Font-Size) - .5px);
letter-spacing:0.5px;
text-transform:uppercase;
color:{color:text};
line-height:var(--Line-Height);
z-index:99;
max-width:40vw;
box-shadow:.5px .5px 6px rgba(0,0,0,0.07);
}
/*---- GLOBAL FONT SETTINGS -----*/
[font]{
font-family:var(--Body-Font-Family);
font-size:var(--Body-Font-Size);
color:var(--Body-Text-Color);
}
[font="Libre Franklin"]{
font-size:calc(var(--Body-Font-Size) - .5px)!important;
letter-spacing:0.1px;
}
[font="Manrope"]{
font-size:calc(var(--Body-Font-Size) - 1px)!important;
letter-spacing:0.3px;
}
/*------- TEXT HIGHLIGHT --------*/
::selection {
background:{color:text selection background};
color:{color:text selected};
}
::-moz-selection {
background:{color:text selection background};
color:{color:text selected};
}
/*------- BASICS --------*/
body {
margin:0;
background-color:{color:background};
background-image:url('{image:background image}');
background-attachment:fixed;
overflow:hidden;
overscroll-behavior-y:none;
}
[bg-type="repeat"] body {
background-repeat:repeat;
}
[bg-type="full"] body {
background-repeat:no-repeat;
background-size:cover;
background-position:center;
}
a {
text-decoration:none;
color:var(--Link);
}
a[title][class*="smt-current-element"]:not([href]){
cursor:help;
}
a[title=""]:not([href]){
cursor:initial;
}
p {
margin:var(--Paragraph-Margins) 0;
}
blockquote {
margin:var(--Paragraph-Margins);
margin-right:0;
padding-left:var(--Paragraph-Margins);
border-left:1px solid rgba({RGBcolor:text},0.169);
}
h1, h2, h3, h4, h5, h6, .linkpost-title {
margin:var(--Heading-Margins) 0;
font-family:var(--Heading-Font-Family);
font-size:var(--Body-Font-Size);
text-transform:uppercase;
letter-spacing:.3px;
line-height:calc(var(--Line-Height) * 1.1);
}
img, iframe {
vertical-align:middle;
max-width:100%;
}
figure {
margin:0;
}
pre, code {
white-space:pre-wrap;
font-family:cousine;
font-size:calc(var(--Body-Font-Size) - 2px);
background:{color:special background};
border:1px solid {color:special border};
color:{color:special text};
}
pre {
padding:0.8em 1em;
}
code {
padding:3px 4px;
}
hr {
display:block;
margin:var(--Heading-Margins) auto;
border-width:0px;
width:69%;
height:1px;
background:{color:post borders inner};
}
a.read_more {
padding-bottom:1.5px!important;
font-family:var(--SmallCaps-Font-Family);
font-size:var(--SmallCaps-Font-Size);
text-transform:uppercase;
letter-spacing:.7px;
}
a.read_more:before {
content:"\f82d";
display:inline-block;
margin-top:-1.5px;
font-family:phosphor;
margin-right:4px;
vertical-align:middle;
}
ul, ol {
margin:var(--Paragraph-Margins) 0;
margin-left:1.69em;
padding:0;
}
ol li {
padding-left:0.420em;
}
ul li {
position:relative;
padding-left:0.25em;
margin-left:calc((var(--Body-Font-Size) * 1.420) - 3px);
list-style:none;
}
ul li:before {
content:"";
position:absolute;
margin-top:calc(((var(--Body-Font-Size) * var(--Line-Height-INT)) / 2) - 0px);
transform:translateY(-50%);
left:0;margin-left:calc((var(--Body-Font-Size) * -1.420) - 3px);
width:var(--Body-Font-Size);
height:.7px;
background:rgba({RGBcolor:text},0.420);
}
.flex {
display:flex!important;
align-items:center;
}
.basicons [stroke-width]{
stroke-width:2!important;
}
:root {
--Tumblr-Controls-Resize:0.6;
--topbarH:calc({select:customlinks font size} + ({select:topbar padding} * 2));
--CustomLinks-Spacing:{select:customlinks spacing};
--botbarH:calc({select:bottom bar font size} + ({select:bottom bar padding} * 2));
--ugh:calc(var(--Post-Width) + (var(--Post-Padding) * 2) + 2px + var(--Center-Gap) + var(--Sidebar-Width) + (var(--Sidebar-Padding) * 2));
/*--- HEADER SETTINGS ---*/
--Header-Height:calc({select:header height} + var(--Header-Bottom-Border-Size));
--Header-IMG-1-Adjust-X:{select:header image 1 adjust X};
--Header-IMG-2-Adjust-X:{select:header image 2 adjust X};
--Header-Panel-Width:{select:header panel width};
--Header-Panel-Side-Gap:{select:header panel side gap};
--Header-Desc-Padding:12px;
--Header-Desc-Line-Height:170%;
--Header-Desc-Rounding:4px;
--Header-Transition-Speed:0.420s;
--Header-Bottom-Border-Size:5px;
/*--- SIDEBAR SETTINGS ---*/
--Sidebar-Width:{select:sidebar width};
--Sidebar-Padding:16px;
--Sidebar-Header-Rounding:5px;
--Sidebar-Icon-Edge-Offset:14px;
--Sidebar-Icon-Padding:4px;
--SBICO-WT:calc({select:sidebar icon size} + (var(--Sidebar-Icon-Padding) * 2) + 2px);
--Sidebar-Icon-Text-Margin:10px;
--Sidebar-Desc-Padding:12px;
--Updates-Symbol:{select:updates box symbol};
--Updates-Row-Spacing:4px;
/*--- POST SETTINGS ---*/
--Post-Corner-Roundness:4px;
--Paragraph-Margins:1em;
--Heading-Margins:1em;
--Body-Font-Family:{select:font};
--Body-Font-Size:{select:font size};
--Body-Text-Color:{color:text};
--Line-Height:1.7em; /* line-height with suffix */
--Line-Height-INT:1.7; /* line-height without suffix */
--Heading-Font-Family:"be vietnam pro";
--Heading-Font-Size:calc(var(--Body-Font-Size) + 2px);
--SmallCaps-Font-Family:"public sans";
--SmallCaps-Font-Size:calc(var(--Body-Font-Size) - 3px);
--Special-Font-Family:"nova square";
--Special-Font-Size:calc(var(--Body-Font-Size) - 3px);
--Post-Width:{select:post width};
--Post-Padding:{select:post padding};
--Post-Spacing:{select:post spacing};
--Reblogger-Avatar-Size:22px;
--Reblogger-Avatar-Gap-Right:8px;
--Reblogger-Username-Color:{color:reblogger};
--Reblogger-Avatar-Bottom-Gap:10px;
--Reblogs-Spacing:12px;
--Reblogs-Border:{color:post borders inner};
--Captions-Gap:12px;
--NPF-Caption-Spacing:var(--Captions-Gap);
--Photoset-Spacing:{select:photoset spacing};
--NPF-Image-Spacing:var(--Photoset-Spacing);
--Grayscale-Settings:grayscale(100%) contrast(110%) brightness(104%);
--Grayscale-Transition-Speed:0.269s;
--AskerPortrait-Size:42px;
--AskerPortrait-Padding:6px;
--Audio-Post-Album-Size:64px;
--Audio-Post-Album-Right-Gap:13px;
--Audio-Post-Buttons-Size:11px;
--Audio-Post-Buttons-Color:{color:permalink};
--Audio-Post-Buttons-Padding:11px;
--Audio-Post-Buttons-Background:{color:permalink background};
--Link:{color:link};
--Post-Borders-Inner:{color:post borders inner};
--Quote-Font-Family:var(--Heading-Font-Family);
--Quote-Font-Size:calc(var(--Body-Font-Size));
/*--- TAGS SETTINGS ---*/
--Tags-Fade-Speed-MS:269; /* fade speed without suffix */
--Tags-Fade-Speed-MS-SFX:269ms; /* fade speed with suffix */
--Tags-Spacing:4px;
/*--- PERMALINK BAR ---*/
--Permalink-Padding:13px;
--Permalink-Bar-Rounding:3px;
--Post-Buttons-Size:calc(var(--Body-Font-Size) + 1px);
--Post-Buttons-Color:{color:post buttons};
--Like-Button-Liked:{color:like button liked};
--Post-Buttons-Spacing:6px;
/*--- POST NOTES SETTINGS ---*/
--Notes-Indicator-Size:14px;
--Notes-Indicator-Gap-Right:7px;
--Notes-Row-Spacing:11px;
/*--- BOTTOM BAR SETTINGS ---*/
--Searchbar-Width:120px;
--Pagination-Spacing:8px;
--Bottom-Bar-Text-Color:{color:bottom bar text};
/*--- MISC ---*/
--Center-Gap:{select:center gap};
--Pagination-Color:{color:text};
--TumblrControls-Color:{select:tumblr controls color};
--Scrollbar-Padding:13px;
/*---- MUSIC PLAYER ----*/
--MusicPlayer-Edge-Offset:18px;
--MusicPlayer-Icon-Size:calc(var(--SmallCaps-Font-Size) + 1.5px);
--MusicPlayer-Icon-Color:{color:music player text};
--MusicPlayer-Circle-Background:{color:music player bg};
--MusicPlayer-Circle-Padding:10px;
--MusicPlayer-Bar-Length:18px;
--MusicPlayer-Bar-Color:{color:music player bg};
--MusicPlayer-Buttons-Size:calc(var(--SmallCaps-Font-Size) - .5px);
--MusicPlayer-Buttons-Color:{color:music player text};
--MusicPlayer-Text-Color:{color:music player text};
--MusicPlayer-Main-Background:{color:music player bg};
--MusicPlayer-Main-Padding:10px;
--MusicPlayer-Main-Roundness:3px;
}
.tout {
position:absolute;
top:0;margin-top:var(--topbarH);
left:0;
width:100%;
height:calc(100% - var(--topbarH) - var(--botbarH));
overflow-x:hidden;
overflow-y:auto;
scroll-behavior:smooth;
overscroll-behavior-y:none;
scrollbar-width:thin; /* firefox only */
}
.clownfest {
position:relative;
margin:auto;
width:var(--ugh);
}
/*---- TOP BAR ----*/
.topbar {
position:fixed;
top:0;left:0;
width:100%;
height:var(--topbarH);
background:{color:topbar background};
overflow:hidden;
z-index:69;
}
.tp-mid {
display:flex;
align-items:center;
justify-content:center;
width:100%;
height:100%;
}
.customlinks {
display:flex;
align-items:center;
flex-wrap:nowrap;
font-family:var(--Special-Font-Family);
font-size:{select:customlinks font size};
text-transform:uppercase;
letter-spacing:1.3px;
word-spacing:-.5px;
line-height:{select:customlinks font size};
}
.customlinks a {
display:block;
margin:0 calc(var(--CustomLinks-Spacing) / 2);
padding:{select:topbar padding} calc(var(--CustomLinks-Spacing) / 2);
color:{color:customlinks};
transition:color 0.25s ease-in-out;
}
.customlinks a:nth-child(odd):hover {
color:{color:customlinks hover A};
}
.customlinks a:nth-child(even):hover {
color:{color:customlinks hover B};
}
/*---- BOTTOM BAR ----*/
.botbar {
position:fixed;
bottom:0;left:0;
width:100%;
height:calc(var(--botbarH) - 1px);
background:{color:bottom bar background};
border-top:1px solid {color:bottom bar border};
font-family:var(--SmallCaps-Font-Family);
font-size:{select:bottom bar font size};
text-transform:uppercase;
letter-spacing:1px;
z-index:69;
}
.martini {
position:absolute;
top:0;margin-top:-1px;
left:0;margin-left:calc({select:bottom bar padding} - 2px);
height:calc(100% + 1px);
display:flex;
align-items:center;
color:{color:searchbar text};
overflow:hidden;
z-index:3;
}
.martini {
--Basicons-Icon-Size:calc({select:bottom bar font size} * 1.3);
--Basicons-Icon-Color:{color:searchbar text};
}
.martini [stroke-width]{
stroke-width:2!important;
}
.martini .basicons {
display:block;
padding:4px 3.5px 4px 4.5px;
background:{color:searchbar bg};
border:1px solid {color:searchbar border};
}
.turnip {
margin:0;
margin-left:3px;
display:flex;
align-items:center;
height:calc(var(--Basicons-Icon-Size) + (4px * 2) + (1px * 2));
}
.martini input {
padding:5px;
background:{color:searchbar bg};
height:100%;
font-family:var(--SmallCaps-Font-Family);
font-size:calc({select:bottom bar font size});
text-transform:uppercase;
letter-spacing:.7px;
color:{color:searchbar text};
border-radius:0;
border:1px solid {color:searchbar border};
outline:none;
box-sizing:border-box;
}
.martini input + input {
margin-left:3px;
}
.martini input[type="text" i]{
width:var(--Searchbar-Width);
}
.martini input[type="submit" i]{
cursor:pointer;
padding:1px 5px;
}
.martini input:focus::placeholder {
color:transparent!important;
}
/*---- PAGINATION ----*/
.midpagi {
position:absolute;
margin:auto;
top:0;margin-top:-1px;
left:0;right:0;
height:calc(100% + 1px);
display:flex;
align-items:center;
justify-content:center;
font-family:Quantico;
color:{color:bottom bar text};
font-size:calc({select:bottom bar font size} + 2px);
}
.midpagi a, .cur-page {
display:block;
color:{color:bottom bar text};
}
.midpagi > * {
margin:0 calc(var(--Pagination-Spacing) / 2);
padding:0 calc(var(--Pagination-Spacing) / 2);
}
.midpagi [pvn]{
font-size:calc({select:bottom bar font size} + 3px);
}
/*-------*/
.crouton {
position:absolute;
top:0;margin-top:-1px;
right:0;
height:calc(100% + 1px);
display:flex;
align-items:center;
overflow:hidden;
z-index:3;
}
.crouton a {
display:block;
padding:{select:bottom bar padding};
padding-left:5px;
color:{color:searchbar text};
}
/*---- HEADER ----*/
.headerkun {
position:relative;
width:100%;
height:{select:header height};
background:{color:header background};
border-bottom:var(--Header-Bottom-Border-Size) solid {color:header bottom border};
overflow:hidden;
}
/*-------------------------*/
.chara-pic-1 {
position:absolute;
top:0;margin-top:calc({select:header height} * {select:header image 1 adjust Y});
left:0;margin-left:calc(var(--ugh) * var(--Header-IMG-1-Adjust-X));
height:100%;
display:grid;
place-items:center;
transition:margin-left var(--Header-Transition-Speed) ease-in-out;
}
.chara-pic-1:before, .chara-pic-2:before {
content:"";
position:absolute;
top:0;left:0;
width:100%;
height:100%;
z-index:1;
}
.chara-pic-1 img {
height:calc({select:header height} * {select:header image 1 size});
width:auto;
}
/*-------------------------*/
.chara-pic-2 {
position:absolute;
top:0;margin-top:calc({select:header height} * {select:header image 2 adjust Y});
right:0;
/*margin-right:calc(var(--ugh) * var(--Header-IMG-2-Adjust-X));*/
height:100%;
display:grid;
place-items:center;
visibility:hidden;
transition:margin-right var(--Header-Transition-Speed) ease-in-out;
}
.bugger {
margin-right:0px!important;
}
.chara-pic-2 img {
margin-right:calc(0px + (var(--ugh) * var(--Header-IMG-2-Adjust-X)));
height:calc({select:header height} * {select:header image 2 size});
width:auto;
}
/*-------------------------*/
.main-panel {
position:absolute;
top:0;right:0;
margin-right:calc(var(--ugh) * var(--Header-Panel-Side-Gap));
width:{select:header panel width};
height:100%;
display:table;
transition:margin-right var(--Header-Transition-Speed) ease-in-out;
z-index:9;
}
.mpm {
display:table-cell;
vertical-align:middle;
}
.mp-title {
font-family:montserrat;
font-size:{select:header panel title size};
text-transform:uppercase;
letter-spacing:1.3px;
color:{color:header panel title};
text-align:center;
}
.mp-title + .mp-desc {
margin-top:14px;
}
.mp-desc {
padding:calc(var(--Header-Desc-Padding) - 2px) var(--Header-Desc-Padding);
background:{color:header desc bg};
border-radius:var(--Header-Desc-Rounding);
font-size:calc(var(--Body-Font-Size) - 1px);
color:{color:header desc text};
line-height:var(--Header-Desc-Line-Height);
box-shadow:.5px .5px 6px rgba(0,0,0,0.07);
}
.mp-desc a {
padding-bottom:1px;
border-bottom:1px solid rgba({RGBcolor:header desc hyperlinks},0.1);
text-transform:uppercase;
font-size:calc(var(--Body-Font-Size) - 3px);
letter-spacing:.5px;
color:{color:header desc hyperlinks};
}
.mov-button {
display:block;
margin-top:10px;
padding:5px 0;
font-family:var(--Special-Font-Family);
font-size:var(--Special-Font-Size);
text-transform:uppercase;
letter-spacing:1px;
color:{color:header button};
text-align:center;
cursor:help;
}
.mov-button * {
pointer-events:none;
}
.mov-button span[two]{
display:none;
}
.mov-button span[v]{
font-size:calc(var(--Special-Font-Size) + 2px);
vertical-align:middle;
}
.mov-button [one] span[v]{
padding-left:5px;
padding-right:8px;
}
.mov-button [two] span[v]{
padding-left:8px;
padding-right:5px;
}
/*---- POSTS + SIDEBAR CONTAINER ----*/
.alicont {
position:relative;
margin-top:var(--Post-Spacing);
}
/*---- LEFT SIDEBAR ----*/
.le-sidebar {
position:absolute;
top:0;left:0;
width:calc(var(--Sidebar-Width) + (var(--Sidebar-Padding) * 2));
}
.pancake {
width:calc(var(--Sidebar-Width) + (var(--Sidebar-Padding) * 2));
}
.pancake.stickpls {
position:fixed!important;
top:0;margin-top:calc(var(--topbarH) + var(--Post-Spacing));
}
.sb-head {
padding-bottom:var(--Sidebar-Icon-Text-Margin);
border-radius:var(--Sidebar-Header-Rounding);
box-shadow:.5px .5px 6px rgba(0,0,0,0.07);
}
.sb-title {
padding:calc(var(--Sidebar-Padding) - 2px) var(--Sidebar-Padding);
background:{color:sidebar title background};
border-radius:var(--Sidebar-Header-Rounding) var(--Sidebar-Header-Rounding) 0 0;
text-transform:uppercase;
color:{color:sidebar title};
text-align:{select:sidebar title text align};
}
.sb-title[sb-tt-font="hatsukoi"]{
font-family:hatsukoi friends;
font-size:{select:sidebar title size};
letter-spacing:.7px;
word-spacing:-2px;
}
.sb-title[sb-tt-font="poppins"]{
font-family:poppins;
font-size:calc({select:sidebar title size} - 2px);
letter-spacing:1px;
}
.ceylon {
position:relative;
}
.ceylon:after {
content:"";
position:absolute;
top:0;left:0;
width:100%;
height:calc(100% + var(--Sidebar-Icon-Text-Margin));
background:{color:sidebar subtitle background};
border-radius:0 0 var(--Sidebar-Header-Rounding) var(--Sidebar-Header-Rounding);
z-index:-1;
}
.sb-img-cont[pos="left"]{
margin-left:var(--Sidebar-Icon-Edge-Offset);
}
.sb-img-cont[pos="right"]{
margin-left:auto;
margin-right:var(--Sidebar-Icon-Edge-Offset);
}
.sb-img-cont {
margin-top:calc({select:sidebar icon size} * -{select:sidebar icon overlap});
width:{select:sidebar icon size};
height:{select:sidebar icon size};
padding:var(--Sidebar-Icon-Padding);
border-radius:100%;
background:{color:sidebar icon background};
border:1px solid {color:sidebar icon border};
box-shadow:.5px .5px 6px rgba(0,0,0,0.07);
overflow:hidden;
}
.sb-img-cont img {
width:100%;
height:100%;
border-radius:100%;
}
.le-sidebar img::-moz-selection {
background:transparent;
}
.le-sidebar img::selection {
background:transparent;
}
.icotxt {
position:absolute;
top:0;margin-top:calc({select:sidebar icon size} * {select:sidebar icon overlap});
height:calc(var(--SBICO-WT) - ({select:sidebar icon size} * {select:sidebar icon overlap}) + (var(--Sidebar-Icon-Text-Margin) / 2));
display:table;
text-transform:uppercase;
color:{color:sidebar subttile};
line-height:140%;
}
.icotxt[sb-sub-font="honyaji"]{
font-family:honya ji;
font-size:{select:sidebar subtitle size};
letter-spacing:.5px;
word-spacing:-.5px;
}
.icotxt[sb-sub-font="klee-one"]{
font-family:klee one;
font-size:calc({select:sidebar subtitle size} - 1.5px);
letter-spacing:.5px;
word-spacing:-.5px;
}
.icotxt[sb-sub-font="quantico"]{
font-family:quantico;
font-size:calc({select:sidebar subtitle size} - 2px);
letter-spacing:.5px;
}
.vn {
display:table-cell;
vertical-align:middle;
}
.sb-img-cont[pos="right"] + .icotxt {
right:0;
margin-right:calc(var(--Sidebar-Icon-Edge-Offset) + var(--SBICO-WT));
padding-right:var(--Sidebar-Icon-Text-Margin);
margin-left:var(--Sidebar-Icon-Text-Margin);
text-align:right;
}
.sb-img-cont[pos="left"] + .icotxt {
left:0;
margin-left:calc(var(--Sidebar-Icon-Edge-Offset) + var(--SBICO-WT));
padding-left:var(--Sidebar-Icon-Text-Margin);
margin-right:var(--Sidebar-Icon-Text-Margin);
text-align:left;
}
/*-----------------*/
.sb-desc {
text-align:{select:sidebar desc text align};
}
.pancake [box]{
padding:calc(var(--Sidebar-Desc-Padding) - 2px) var(--Sidebar-Desc-Padding);
background:{color:sidebar boxes bg};
border-radius:var(--Sidebar-Header-Rounding);
font-size:calc(var(--Body-Font-Size) - 1px);
color:{color:sidebar boxes text};
line-height:170%;
box-shadow:.5px .5px 6px rgba(0,0,0,0.07);
}
.pancake [box] a {
color:{color:sidebar hyperlinks};
padding-bottom:.5px;
border-bottom:1px solid rgba({RGBcolor:sidebar hyperlinks},0.25);
}
.sb-head + .sb-desc,
.pancake [box] + [box]{
margin-top:{select:sidebar boxes spacing};
}
.pancake > *:last-child {
margin-bottom:{select:sidebar boxes spacing};
}
[box] .basicons {
margin-top:2px;
margin-right:5px;
--Basicons-Icon-Size:calc(var(--Body-Font-Size) + 1px);
vertical-align:middle;
}
.updt-box .basicons [stroke-width]{
stroke-width:1.5!important;
}
.star-right {
vertical-align:middle;
}
.starwrap {
display:flex;
}
.starwrap + .starwrap {
margin-top:var(--Updates-Row-Spacing);
}
[box] .starwrap:nth-child(odd) .basicons {
--Basicons-Icon-Color:{color:updates symbol A};
}
[box] .starwrap:nth-child(even) .basicons {
--Basicons-Icon-Color:{color:updates symbol B};
}
.updt-box label {
padding:2px 4px;
padding-right:3px;
background:{color:updates label bg};
border-radius:2px;
font-family:var(--SmallCaps-Font-Family);
font-size:var(--SmallCaps-Font-Size);
font-weight:600;
text-transform:uppercase;
letter-spacing:.7px;
color:{color:updates label text};
cursor:inherit;
}
.updt-box label + .star-detail {
margin-left:4px;
}
.updt-box small {
font-size:calc(var(--Body-Font-Size) - 2px);
text-transform:uppercase;
letter-spacing:.5px;
}
/*---- POST CONTAINER ----*/
.postscont {
position:absolute;
top:0;right:0;
}
/*------- POSTS --------*/
.posts {
width:calc(var(--Post-Width) + (var(--Post-Padding) * 2) + 2px);
}
.posts:first-child, .posts + * {
margin-bottom:var(--Post-Spacing);
}
[black-and-white="rb-ico"] .reblog-head img {
transition:filter var(--Grayscale-Transition-Speed) ease-in-out;
filter:var(--Grayscale-Settings);
}
[black-and-white="everything"] img,
[black-and-white="everything"] iframe,
[black-and-white="everything"] video {
transition:filter var(--Grayscale-Transition-Speed) ease-in-out;
filter:var(--Grayscale-Settings);
}
[black-and-white="everything"] .posts:hover img,
[black-and-white="everything"] .posts:hover iframe,
[black-and-white="everything"] .posts:hover video {
filter:none;
}
.postinner {
padding:var(--Post-Padding);
width:var(--Post-Width);
border-radius:var(--Post-Corner-Roundness);
background:{color:post};
border:1px solid {color:post borders outer};
line-height:var(--Line-Height);
box-shadow:.5px 2px 8px rgba(0,0,0,0.07);
overflow:hidden;
}
.postinner a:not(.reblog-url a, .tumblr_blog, .linkpost-title, .single-photo, .post_media_photo_anchor, .npf_inst a, .inari, .tagsdiv a), .tmblr-attribution a {
padding-bottom:.5px;
border-bottom:1px solid rgba({RGBcolor:link},0.420);
}
/*---- REBLOG HEAD ----*/
.reblog-wrap {
margin:0 calc(0px - var(--Post-Padding));
padding:0 var(--Post-Padding);
}
.reblog-wrap + .reblog-wrap {
margin-top:var(--Reblogs-Spacing);
padding-top:var(--Reblogs-Spacing);
border-top:1px solid var(--Reblogs-Border);
}
.reblog-head {
display:flex;
align-items:center;
}
.reblog-head img {
width:var(--Reblogger-Avatar-Size);
height:var(--Reblogger-Avatar-Size);
border-radius:100%;
}
.reblog-head img + .reblog-url {
margin-left:var(--Reblogger-Avatar-Gap-Right);
}
.reblog-url, .reblog-url a, p > a.tumblr_blog[target='_blank']{
font-family:var(--SmallCaps-Font-Family);
font-size:var(--SmallCaps-Font-Size);
font-weight:500;
text-transform:uppercase;
letter-spacing:.5px;
color:var(--Reblogger-Username-Color);
}
.reblog-url .deac {
margin-left:3px;
color:var(--Body-Text-Color);
}
.reblog-head + .reblog-comment {
margin-top:calc(0px - var(--Paragraph-Margins) + var(--Reblogger-Avatar-Bottom-Gap));
}
/*---- NPF... STUFF ----*/
figure[data-orig-src] + figure[data-orig-src]{
margin-top:var(--Photoset-Spacing);
}
.tmblr-full video {
cursor:pointer;
}
video::-webkit-media-controls-panel {
position:absolute;
bottom:0;
background:transparent!important;
width:100%;
box-sizing:border-box;
opacity:1!important;
}
video::-webkit-media-controls-volume-slider, video::-webkit-media-controls-timeline {
display:none!important;
}
.tmblr-attribution {
font-family:var(--SmallCaps-Font-Family);
font-size:var(--SmallCaps-Font-Size);
text-transform:uppercase;
letter-spacing:.7px;
line-height:var(--Line-Height);
}
* + .npf-link-block {
margin-top:10px;
}
.npf-link-block {
margin-top:0px;
margin-bottom:0;
border-color:{color:special border}!important;
border-radius:0!important;
}
.npf-link-block + * {
margin-bottom:var(--Paragraph-Margins);
}
.npf-link-block a {
padding:0!important;
border:none!important;
}
.npf-link-block .title {
position:relative;
font-family:var(--Heading-Font-Family)!important;
font-size:calc(var(--Heading-Font-Size) - 2px)!important;
text-transform:uppercase;
letter-spacing:.5px;
color:{color:link}!important;
line-height:1.7em!important;
text-shadow:1px 1px 1px rgba(0,0,0,0.1);
display:flex!important;
align-items:center;
}
.npf-link-block .title:after {
content:"\f0c0";
position:absolute;
top:50%;
transform:translateY(-50%);
right:0;margin-right:0.8em;
font-family:"Phosphor"!important;
line-height:1;
}
.npf-link-block .bottom {
background:{color:special background}!important;
}
.npf-link-block .description {
font-family:var(--SmallCaps-Font-Family)!important;
font-weight:bold;
font-size:calc(var(--SmallCaps-Font-Size) + 2px)!important;
text-transform:uppercase;
letter-spacing:.5px;
color:{color:link}!important;
line-height:1.7em!important;
}
.npf-link-block .site-name {
text-transform:initial!important;
font-family:var(--SmallCaps-Font-Family)!important;
font-size:var(--SmallCaps-Font-Size)!important;
font-weight:normal!important;
text-transform:uppercase!important;
letter-spacing:.5px;
color:{color:special text}!important;
line-height:var(--SmallCaps-Font-Size)!important;
}
.npf-link-block .description + .site-name {
margin-top:8px;
}
.npf-link-block.no-poster .title {
padding:0.8em!important;
text-shadow:none!important;
}
.npf-link-block.no-poster .title + .bottom {
border-top:1px solid {color:special border};
}
/*---- TEXT POSTS (TITLE) ----*/
.post-title, .linkpost-title {
margin-top:2px;
margin-bottom:0;
padding:0.69em;
background:{color:special background};
border:1px solid {color:special border};
font-size:var(--Heading-Font-Size);
font-weight:bold;
word-spacing:1.5px;
color:{color:special text};
text-align:center;
}
.post-title + *, .linkpost-title + * {
margin-top:var(--Heading-Margins);
}
/*---- LINK POSTS (TITLE) ----*/
.linkpost-title {
display:flex;
align-items:center;
justify-content:space-between;
color:{color:special text};
text-align:left;
}
.linkpost-title span {
display:block;
max-width:calc(100% - (var(--Heading-Font-Size) * 1.1) - 10px - 2px);
}
span + .linksym {
margin-left:10px;
margin-right:2px;
}
.linksym {
width:calc(var(--Heading-Font-Size) * 1.1);
height:calc(var(--Heading-Font-Size) * 1.1);
-webkit-mask-size:contain;
-webkit-mask-repeat:no-repeat;
-webkit-mask-position:center;
-webkit-mask-image:var(--ext);
background:{color:special text};
}
.linkpost-title + .link-excerpt {
margin-top:-1px;
}
.link-excerpt {
padding:0.8em calc(0.8em + 2px);
border:1px solid {color:post borders inner};
}
.link-excerpt + * {
margin-top:var(--Heading-Margins);
}
.le-host {
font-family:var(--SmallCaps-Font-Family);
font-size:var(--SmallCaps-Font-Size);
text-transform:uppercase;
letter-spacing:.7px;
}
/*---- PHOTO POSTS ----*/
.single-photo {
cursor:pointer;
}
[photoset-layout] {
grid-gap:var(--Photoset-Spacing);
}
[photoset-layout] div {
cursor:pointer;
backface-visibility:hidden;
}
.caption {
margin-top:var(--Captions-Gap);
}
/*----- LIGHTBOX BS -----*/
.tmblr-lightbox, #tumblr_lightbox {
background-color:rgba({RGBcolor:post},0.69)!important;
}
.tmblr-lightbox .vignette {
background-image:none!important;
}
#vignette {display:none!important}
.lightbox-image, #tumblr_lightbox_left_image, #tumblr_lightbox_center_image, #tumblr_lightbox_right_image {
margin-top:calc(0px - var(--Post-Padding));
}
.tmblr-lightbox img, #tumblr_lightbox img {
max-width:initial;
box-shadow:none!important;
border-radius:0px!important;
padding:var(--Post-Padding);
background:{color:post}!important;
}
/*----- QUOTE POSTS -----*/
.quote-words, .npf_quote {
margin-top:3px;
padding:0 var(--Post-Padding);
font-family:var(--Quote-Font-Family)!important;
font-size:var(--Quote-Font-Size)!important;
text-transform:uppercase;
letter-spacing:.3px;
text-align:center;
line-height:169%;
}
.quote-words + .quote-source,
.npf_quote + p[style*="margin-bottom: 0px;"]{
margin-top:var(--Paragraph-Margins);
text-align:center;
}
/*----- VIDEO POSTS -----*/
.tmblr-video {
max-width:initial;
}
.tumblr_video_container, .tumblr_video_iframe {
width:100%!important;
}
/*---- CHAT POSTS ----*/
.chatwrap {
border:1px solid var(--Post-Borders-Inner);
}
.chat_row {
position:relative;
display:table-row;
overflow:hidden;
}
.chat_row:after {
content:"";
position:absolute;
bottom:0;left:0;
transform:translateY(-.5px);
width:100%;
height:1px;
background:var(--Post-Borders-Inner);
}
.chatwrap .chat_row:last-child:after {
display:none;
}
.chat_row code:only-child {
display:block;
padding:0.8em;
border:none;
background:transparent;
}
.chat_label {
display:table-cell;
padding:1em;
white-space:nowrap;
padding-right:1em;
}
.chat_content {
display:table-cell;
padding:1em;
width:100%;
}
.chat_label + .chat_content {
border-left:1px solid var(--Post-Borders-Inner);
}
/*---- AUDIO POSTS ----*/
.audio-post .npf_inst img {
width:100%;
}
.aud-emb {display:none}
.audiowrap {
display:flex;
align-items:center;
}
.albumwrap {
position:relative;
width:var(--Audio-Post-Album-Size);
height:var(--Audio-Post-Album-Size);
display:flex;
align-items:center;
justify-content:center;
}
.albumwrap[has-cover] .audplac {display:none}
.butts {
width:calc(var(--Audio-Post-Buttons-Size) + (var(--Audio-Post-Buttons-Padding) * 2));
height:calc(var(--Audio-Post-Buttons-Size) + (var(--Audio-Post-Buttons-Padding) * 2));
background:var(--Audio-Post-Buttons-Background);
border-radius:100%;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
z-index:2;
}
.overplay, .overpause {
width:var(--Audio-Post-Buttons-Size);
height:var(--Audio-Post-Buttons-Size);
-webkit-mask-size:contain;
-webkit-mask-repeat:no-repeat;
-webkit-mask-position:center;
background:var(--Audio-Post-Buttons-Color);
}
.overplay {
margin-left:2px;
-webkit-mask-image:var(--audioplay);
}
.overpause {
display:none;
-webkit-mask-image:var(--audiopause);
}
.ov-y {display:block}
.ov-z {display:none}
.audplac {
position:absolute;
top:0;left:0;
width:var(--Audio-Post-Album-Size);
height:var(--Audio-Post-Album-Size);
background:var(--Audio-Post-Buttons-Background);
}
.albumwrap img {
position:absolute;
top:0;left:0;
width:100%;
height:100%;
}
.audiotxt {
flex:1;
height:var(--Audio-Post-Album-Size);
padding:var(--Audio-Post-Album-Right-Gap);
background:{color:special background};
display:flex;
align-items:center;
box-sizing:border-box;
display:flex;
align-items:center;
justify-content:space-between;
font-size:calc(var(--Body-Font-Size) - 1px);
color:{color:special text};
}
.odin > div + div, .npf-audio-details > * + * {
margin-top:-1px;
}
.aud-song-name, .npf-audio-title {
font-family:var(--SmallCaps-Font-Family);
font-size:calc(var(--SmallCaps-Font-Size) + 1px);
text-transform:uppercase;
letter-spacing:.7px;
font-weight:600;
}
.aud-song-name[has-name] .untit {
display:none;
}
.aud-artist[has-artist] .unart {
display:none;
}
.inari {
display:block;
padding:6px;
margin-right:-6px;
cursor:pointer;
}
.int-all {
display:block;
width:calc(var(--Audio-Post-Buttons-Size) + 6px);
height:calc(var(--Audio-Post-Buttons-Size) + 6px);
-webkit-mask-size:contain;
-webkit-mask-repeat:no-repeat;
-webkit-mask-position:center;
-webkit-mask-image:var(--install);
background:{color:special text};
}
/*---- SPOTIFY ----*/
iframe[src*='open.spotify.com'][src*='track'], figure[data-npf*='open.spotify.com'][data-npf*='track']{
height:80px!important;
}
.spotify_audio_player {
width:100%;
}
/*---- SOUNDCLOUD ----*/
.tmblr-video iframe[src*='soundcloud.com']{
}
.audio-soundcloud {
max-height:113px;
border-radius:4px;
overflow:hidden;
}
.soundcloud_audio_player {
margin:-1px;
margin-bottom:0;
width:calc(100% + 2px);
max-width:initial;
}
/*---- ASK/ANSWER POSTS ----*/
.une_question {
display:flex;
}
.asker-person {
align-self:baseline;
}
.une_question .reblog-comment {
flex:1;
margin-left:12px;
}
.askpot {
padding:var(--AskerPortrait-Padding);
background:{color:special background};
border:1px solid {color:special border};
}
.asker-person img {
width:var(--AskerPortrait-Size);
height:var(--AskerPortrait-Size);
border-radius:0;
}
.une_question .reblog-url {
margin-top:1px;
padding:3px 4px;
background:{color:special background};
border:1px solid {color:special border};
border-radius:2px;
color:{color:special text};
}
.question_text > p:first-child {
margin-top:4px;
}
.question_text > p:only-child {
margin-bottom:0;
}
.answerer + * {
margin-top:var(--Captions-Gap);
}
.une_question + .une_reponse {
margin-top:var(--Paragraph-Margins);
}
/*---- TAGS SECTION ----*/
.tagsdiv {
margin-top:var(--Captions-Gap);
}
.tagsdiv[clicktags="yes"] {
{block:IndexPage}
display:none;
opacity:0;
transition:opacity var(--Tags-Fade-Speed-MS-SFX) ease-in-out;
{/block:IndexPage}
}
.tagsfade {
opacity:1!important;
}
.tagsin {
display:flex;
flex-wrap:wrap;
justify-content:flex-end;
margin:calc(0px - var(--Tags-Spacing));
/*margin-top:calc(var(--Captions-Gap) - var(--Tags-Spacing));*/
margin-bottom:calc((((var(--SmallCaps-Font-Size) - 1px) * var(--Line-Height-INT)) / 2) * -1);
}
.tagsin a {
position:relative;
display:block;
margin:var(--Tags-Spacing);
font-family:var(--SmallCaps-Font-Family);
font-size:calc(var(--SmallCaps-Font-Size) - 1px);
text-transform:uppercase;
letter-spacing:.7px;
color:{color:tags};
}
.tagsin a:before {
content:"#";
font-family:work sans;
margin-right:.5px;
}
/*---- PERMALINK BAR ----*/
.permadiv {
display:flex;
align-items:center;
justify-content:space-between;
margin-top:12px;
padding:calc(var(--Permalink-Padding) - 1px) var(--Permalink-Padding);
background:{color:permalink background};
border:1px solid {color:permalink border};
border-radius:var(--Permalink-Bar-Rounding);
font-family:var(--SmallCaps-Font-Family);
font-size:calc(var(--SmallCaps-Font-Size) - .5px);
text-transform:uppercase;
letter-spacing:.5px;
box-shadow:.5px .5px 6px rgba(0,0,0,0.07);
}
.permadiv, .permadiv a {
color:{color:permalink};
}
.permaleft {
text-transform:uppercase;
letter-spacing:.7px;
word-spacing:1px;
}
.permaleft a {
display:flex;
align-items:center;
margin:calc(0px - var(--Post-Padding));
margin-right:0;
padding:var(--Post-Padding);
padding-right:2px;
}
.permaleft .basicons {
margin-right:6px;
--Basicons-Icon-Size:calc(var(--Body-Font-Size) + 1.5px);
--Basicons-Icon-Color:{color:permalink};
}
.permaright {
display:flex;
align-items:center;
justify-content:center;
letter-spacing:1px;
}
.permaright a {
display:block;
position:relative;
{block:IndexPage}
width:var(--Post-Buttons-Size);
height:var(--Post-Buttons-Size);
{/block:IndexPage}
}
.permaright span {display:block}
.permaright a + a {
margin-left:var(--Post-Buttons-Spacing);
}
.permaright[clicktags="no"] .clicktags {
display:none;
}
.permaright [class^="ph"]{
font-size:var(--Post-Buttons-Size);
color:var(--Post-Buttons-Color)
}
.clicktags + .root-src {
margin-left:calc(var(--Post-Buttons-Spacing) - 2px);
}
.rb-ico {
display:flex!important;
align-items:center;
justify-content:center;
margin-top:-.5px;
--FC-EN:calc(var(--Post-Buttons-Size) * 1.3);
width:var(--FC-EN);
height:var(--FC-EN);
line-height:var(--FC-EN);
}
.rb-ico svg {
display:block;
width:var(--FC-EN);
height:var(--FC-EN);
transform-origin:center;
transform:scaleX(1.069);
}
.hash {
cursor:help;
}
.rb-ico + .suki {
margin-left:calc(var(--Post-Buttons-Spacing) - 1px);
}
.like_button {
position:absolute;
top:0;left:0;
width:100%;
height:100%;
z-index:2;
}
.like_button iframe {
width:100%;
height:100%;
vertical-align:initial;
opacity:0;
}
.like_button.liked + .ph-heart {
color:var(--Like-Button-Liked);
}
.permaright a[dash]{
font-size:calc(var(--SmallCaps-Font-Size) + 1px);
}
/*---- POST NOTES ----*/
.notescont {
margin-top:var(--Post-Spacing);
padding:var(--Post-Padding);
background:{color:post};
border:1px solid {color:post borders outer};
border-radius:var(--Post-Corner-Roundness);
box-shadow:.5px 2px 8px rgba(0,0,0,0.07);
}
.notescont h1 {
margin-top:5px;
margin-bottom:calc(var(--Heading-Margins) + 4px);
letter-spacing:1px;
text-align:center;
}
.notescont ol.notes {
padding:0;
margin:0;
}
.notescont li {
list-style-type:none;
padding:0!important;
}
.notescont li + li {
margin-top:var(--Notes-Row-Spacing);
}
.notescont li:before {
font-family:phosphor;
font-size:var(--Notes-Indicator-Size);
color:{color:text};
vertical-align:middle;
}
.notescont li.like:before {
content:"\f1ca";
}
.notescont li.reblog:before {
content:"\f2c3";
}
.notescont li.reply:before,
.notescont li.with_commentary:before {
content:"\f0db"!important;
}
.notescont .avatar_frame {
display:none;
}
.notescont .avatar_frame + .action {
margin-left:var(--Notes-Indicator-Gap-Right);
}
.notescont .action a {
font-family:var(--SmallCaps-Font-Family);
font-size:calc(var(--SmallCaps-Font-Size) - .5px);
text-transform:uppercase;
letter-spacing:.7px;
color:{color:reblogger};
}
.notescont blockquote {
margin-left:calc(var(--Notes-Indicator-Size) / 2);
padding-left:calc((var(--Notes-Indicator-Size) / 2) + var(--Notes-Indicator-Gap-Right));
}
.more_notes_link_container {
margin-top:1em!important;
margin-bottom:calc(var(--Paragraph-Margins) / 2);
}
.more_notes_link {
font-family:var(--SmallCaps-Font-Family);
font-size:var(--SmallCaps-Font-Size);
text-transform:uppercase;
letter-spacing:.5px;
}
/*---- CORNER MUSIC PLAYER ----*/
.mplayer {
position:fixed;
top:0;margin-top:calc(var(--topbarH) + var(--MusicPlayer-Edge-Offset));
left:0;margin-left:var(--MusicPlayer-Edge-Offset);
display:flex;
align-items:center;
z-index:70;
filter:drop-shadow(2px 2px 1px rgba(0,0,0,4%))
}
.zirc {
position:relative;
margin-right:-1px;
padding:var(--MusicPlayer-Circle-Padding);
background:var(--MusicPlayer-Circle-Background);
border-radius:100%;
overflow:hidden;
/*line-height:var(--MusicPlayer-Icon-Size);*/
line-height:0;
z-index:2;
}
/* hover stuff */
.potatowrap {
opacity:0;
transition:opacity .420s ease-in-out;
transition-delay:0s;
}
.mplayer:hover .mline {
width:var(--MusicPlayer-Bar-Length);
transition-delay:0s; /* delay when mouseleave */
}
.mplayer:hover .potatowrap {
opacity:1;
transition-delay:.420s;
}
.blay, .bause {
display:block;
--Basicons-Icon-Size:calc(var(--MusicPlayer-Buttons-Size) * 1.25);
--Basicons-Icon-Color:var(--MusicPlayer-Buttons-Color);
}
.msym {
--Basicons-Icon-Size:var(--MusicPlayer-Icon-Size);
--Basicons-Icon-Color:var(--MusicPlayer-Icon-Color);
}
.mline {
margin-right:-3px;
width:0px;
height:3px;
background:var(--MusicPlayer-Bar-Color);
border-radius:6px;
transition:width .420s ease-in-out;
transition-delay:.420s; /* delay when mouseenter */
}
.potatowrap {
display:flex;
align-items:center;
padding:calc(var(--MusicPlayer-Main-Padding) - 2px) var(--MusicPlayer-Main-Padding);
background:var(--MusicPlayer-Main-Background);
border-radius:var(--MusicPlayer-Main-Roundness);
}
.music-controls {
margin:-6px;
padding:6px;
cursor:pointer;
}
.songtext {
margin-left:6px;
font-family:var(--SmallCaps-Font-Family);
font-size:calc(var(--SmallCaps-Font-Size) - 1px);
text-transform:uppercase;
letter-spacing:.5px;
word-spacing:.5px;
color:var(--MusicPlayer-Text-Color);
}
.pausee {display:none;}
.beff {display:none;}
.aff {display:block;}
{CustomCSS}
</style>
</head>
<!--------------------------------------------------->
<body>
<!---- TOP BAR ---->
<div class="topbar">
<div class="tp-mid">
<div class="customlinks">
<a href="//{Name}.tumblr.com">home</a>
<a href="//{Name}.tumblr.com/ask">askbox</a>
{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}
<a href="//{Name}.tumblr.com/archive">archive</a>
</div><!--end customlinks-->
</div>
</div>
<!---- BOTTOM BAR ---->
<div class="botbar">
<div class="martini">
<i class="bsc-search"></i>
<form action="/search" method="get" class="turnip">
<input type="text" name="q" value="{SearchQuery}" placeholder="search this blog..." autocomplete="off">
<input type="submit" value="Search">
</form>
</div>
{block:Pagination}
<div class="midpagi">
{block:PreviousPage}
<a pvn href="{PreviousPage}" title="previous page">«</a>
{/block:PreviousPage}
{block:JumpPagination length="9"}
{block:CurrentPage}
<span class="cur-page">✗</span>
{/block:CurrentPage}
{block:JumpPage}
<a href="{URL}" title="page {PageNumber}">{PageNumber}</a>
{/block:JumpPage}
{/block:JumpPagination}
{block:NextPage}
<a pvn href="{NextPage}" title="next page">»</a>
{/block:NextPage}
</div>
{/block:Pagination}
<!--- please do not remove the credit thank you ♡ --->
<div class="crouton">
<a href="//glenthemes.tumblr.com">theme by glenthemes</a>
</div>
</div>
<!---- CORNER MUSIC PLAYER ---->
{block:ifmusicplayersongname}
<div class="mplayer">
<div class="zirc">
<i class="msym bsc-headphone-music"></i>
</div>
<div class="mline"></div>
<div class="potatowrap">
<div class="music-controls">
<i class="blay bsc-play playy"></i>
<i class="bause bsc-pause pausee"></i>
</div>
<div class="songtext">{text:music player song name}</div>
</div>
<audio src="{text:music player song mp3}" id="musique"></audio>
</div>
{/block:ifmusicplayersongname}
<!---- MAIN CONTAINER ---->
<!-- jeez that's a lot of containers -->
<div class="tout">
<div class="clownfest">
<div class="headerkun">
<div class="chara-pic-1">
<img src="{image:header image 1}">
</div>
<div class="chara-pic-2">
<img src="{image:header image 2}">
</div>
<div class="main-panel">
<div class="mpm">
<div class="mp-title">{text:header panel title}</div>
<div class="mp-desc">{text:header desc}</div>
{block:ifheaderimage1button}
<a class="mov-button" href="javascript:void(0)" title="click me!">
<span one>
<span v>«</span>{text:header image 1 button}
</span>
<span two>
{text:header image 2 button}<span v>»</span>
</span>
</a>
{/block:ifheaderimage1button}
</div>
</div>
</div>
<!---- POSTS + SIDEBAR ---->
<div class="alicont">
<!---- SIDEBAR ---->
<div class="le-sidebar" sb-border="{select:sidebar image border}">
<div class="pancake">
<div class="sb-head">
<div class="sb-title" sb-tt-font="{select:sidebar title font}">{text:sidebar title}</div>
<div class="ceylon">
<div class="sb-img-cont" pos="{select:sidebar icon position}">
<img src="{image:sidebar icon}">
</div>
<div class="icotxt" sb-sub-font="{select:sidebar subtitle font}">
<div class="vn">
{text:sidebar subtitle}
</div>
</div>
</div>
</div><!--sb-head-->
{block:ifsidebardesc}
<div box class="sb-desc">{text:sidebar desc}</div>
{/block:ifsidebardesc}
{block:ifnotsidebardesc}
{block:Description}
<div box class="sb-desc">{Description}</div>
{block:Description}
{/block:ifnotsidebardesc}
{block:ifupdatesbox}
<div box class="updt-box">{text:updates box}</div>
{/block:ifupdatesbox}
</div><!--pancake-->
</div><!--le-sidebar-->
<!---- POSTS ---->
<div class="postscont" black-and-white="{select:grayscale images}">
{block:Posts inlineMediaWidth="1280" inlineNestedMediaWidth="1280"}
<div class="posts {PostType}-post" id="{PostID}" post-type="{PostType}">
<div class="postinner">
<!------ POST TITLE ------>
{block:Title}
<h1 class="post-title">{Title}</h1>
{/block:Title}
<!------ TEXT POSTS ------>
{block:Text}
{block:NotReblog}{Body}{/block:NotReblog}
{block:RebloggedFrom}
{block:Reblogs}
<div class="reblog-wrap">
<div class="reblog-head source-head">
<img src="{PortraitURL-64}">
<span class="reblog-url">
<a href="{Permalink}">{Username}</a>
</span>
</div>
<div class="reblog-comment">{Body}</div>
</div>
{/block:Reblogs}
{/block:RebloggedFrom}
{/block:Text}
<!------ SINGLE PHOTO ------>
{block:Photo}
<a class="single-photo" 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}
<!------ 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}
<!------ QUOTE POSTS ------>
{block:Quote}
<div class="quote-words">{Quote}</div>
{block:Source}
<div class="quote-source">
<span mdash>&mdash;</span>
{Source}
</div>{/block:Source}
{/block:Quote}
<!------ LINK POSTS ------>
{block:Link}
<a class="linkpost-title" href="{URL}" {Target}>
<span>{Name}</span>
<div class="linksym"></div>
</a>
{block:Excerpt}
<div class="link-excerpt">
{Excerpt}
{block:Host}— <a class="le-host" href="{URL}" {Target}>{Host}</a>{/block:Host}
</div>
{/block:Excerpt}
{block:Description}
<div class="link-description">
{block:NotReblog}{Description}{/block:NotReblog}
{block:RebloggedFrom}
{block:Reblogs}
<div class="reblog-wrap">
<div class="reblog-head">
<img src="{PortraitURL-64}">
<span class="reblog-url">
<a href="{Permalink}">{Username}</a>
</span>
</div>
<div class="reblog-comment">{Body}</div>
</div>
{/block:Reblogs}
{/block:RebloggedFrom}
</div>
{/block:Description}
{/block:Link}
<!------ CHAT POSTS ------>
{block:Chat}
{block:Lines}
<div class="chat_row">
{block:Label}
<div class="chat_label">{Label}</div>
{/block:Label}
<div class="chat_content">
{Line}
</div>
</div>
{/block:Lines}
{/block:Chat}
<!------ AUDIO POSTS ------>
{block:Audio}
<div class="audiowrap">
{block:AudioPlayer}
<div class="aud-emb">
{AudioPlayer}
</div>
{/block:AudioPlayer}
<div class="albumwrap" {block:AlbumArt}has-cover{/block:AlbumArt}>
{block:AlbumArt}
<img src="{AlbumArtURL}">
{/block:AlbumArt}
<div class="audplac"></div>
<div class="butts">
<div class="overplay"></div>
<div class="overpause"></div>
</div>
</div>
<div class="audiotxt">
<div class="odin">
<div class="aud-song-name" {block:TrackName}has-name{/block:TrackName}>
<div class="untit">Untitled track</div>
{block:TrackName}
<div class="hastit">{TrackName}</div>
{/block:TrackName}
</div>
{block:Album}
<div class="aud-album-name">{Album}</div>
{/block:Album}
<div class="aud-artist" {block:Artist}has-artist{/block:Artist}>
<div class="unart">Unknown artist</div>
{block:Artist}
<div class="hasart">{Artist}</div>
{/block:Artist}
</div>
</div><!--odin-->
<a class="inari" title="download" target="_blank">
<span class="int-all"></span>
</a>
</div><!--audiotxt-->
</div><!--audiowrap-->
{/block:Audio}
<!------ VIDEO POSTS ------>
{block:Video}
<div class="tmblr-video">{Video-500}</div>
{/block:Video}
<!------ ANSWER POSTS ------>
{block:Answer}
<!-- who asked? -->
<div class="reblog-wrap une_question">
<div class="asker-person reblog-head">
<div class="askpot">
<img src="{AskerPortraitURL-64}">
</div>
</div>
<div class="reblog-comment">
<span class="reblog-url">{Asker} asked:</span>
<div class="question_text">{Question}</div>
</div>
</div>
<!--------------------------------------->
<!-- who answered? -->
{block:Answerer}
<div class="reblog-wrap une_reponse">
<div class="answerer reblog-head">
<img src="{AnswererPortraitURL-64}">
<span class="reblog-url">{Answerer} answered:</span>
</div>
<p class="answer_text">{Answer}</p>
</div>
<!-- additional reblogs to the ask post -->
{block:Reblogs}
<div class="reblog-wrap reply_container">
<div class="replier reblog-head">
<img src="{PortraitURL-64}">
<span class="reblog-url">
<a href="{Permalink}">{Username}</a>
</span>
</div>
<div class="reply">{Body}</div>
</div>
{/block:Reblogs}
{/block:Answerer}
<!--------------------------------------->
<!-- original answer post -->
{block:NotReblog}
<div class="reblog-wrap une-reponse">
<div class="answerer reblog-head">
<img src="{PortraitURL-64}">
<span class="reblog-url">
<a href="{Permalink}">{Name}</a>
</span>
</div>
<div class="answer_text">{Answer}</div>
</div><!--answer-container-->
{/block:NotReblog}
{/block:Answer}
<!------ END ANSWER ------>
<!------ 'CAPTION'? ------>
{block:Caption}
<div class="caption">
{block:NotReblog}{Caption}{/block:NotReblog}
{block:RebloggedFrom}
{block:Reblogs}
<div class="reblog-wrap">
<div class="reblog-head">
<img src="{PortraitURL-64}">
<span class="reblog-url">
<a href="{Permalink}">{Username}</a>
</span>
</div><!--reblog-head-->
<div class="reblog-comment">{Body}</div>
</div><!--comment-container-->
{/block:Reblogs}
{/block:RebloggedFrom}
</div><!--caption-->
{/block:Caption}
<!------ TAGS ------>
{block:HasTags}
<div class="tagsdiv" clicktags="{select:click tags}">
<div class="tagsin">
{block:Tags}
<a href="{TagURL}">{Tag}</a>
{/block:Tags}
</div>
</div>
{/block:HasTags}
</div><!--postinner-->
<!------ PERMALINK ------>
{block:Date}
<div class="permadiv">
<div class="permaleft">
<a {block:IndexPage}href="{Permalink}"{/block:IndexPage}>
<i class="bsc-clock-time"></i>
{block:IndexPage}
{Month} {DayOfMonthWithZero}{DayOfMonthSuffix}&ensp;{24HourWithZero}:{Minutes}&emsp;{TimeAgo}
{/block:IndexPage}
{block:PermalinkPage}
{Month} {DayOfMonthWithZero}{DayOfMonthSuffix} {Year}&emsp;{TimeAgo}&emsp;{DayOfWeek}
{/block:PermalinkPage}
{block:IndexPage}
&emsp;<span nc>{NoteCountWithLabel}</span>
{block:PinnedPostLabel}&emsp;Pinned Post{/block:PinnedPostLabel}
{/block:IndexPage}
</a>
</div>
<!------------------------------>
{block:IndexPage}
<div class="permaright" clicktags="{select:click tags}">
{block:HasTags}
<a class="clicktags hash">
<i class="ph-hash"></i>
</a>
{/block:HasTags}
{block:RebloggedFrom}
<a href="{ReblogRootURL}" title="source: @{ReblogRootName}" class="root-src">
<i class="ph-user"></i>
</a>
{/block:RebloggedFrom}
<a href="{ReblogURL}" title="reblog this post" class="rb-ico">
<span>
<svg width="48px" height="48px" viewBox="0 0 24 24" stroke="var(--Post-Buttons-Color)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="miter" fill="none" color="var(--Post-Buttons-Color)"> <path d="M13 18L6 18L6 7"/> <path d="M3 9L6 6L9 9"/> <path d="M11 6L18 6L18 17"/> <path d="M21 15L18 18L15 15"/> </svg>
</span>
</a>
<a title="like this post" class="suki">
{LikeButton}
<i class="ph-heart"></i>
</a>
</div>
{/block:IndexPage}
<!------------------------------>
{block:PermalinkPage}
<div class="permaright">
{block:NotReblog}
original post
{/block:NotReblog}
{block:RebloggedFrom}
<a href="{ReblogParentURL}" title="@{ReblogParentName}">via</a>
<a dash>/</a>
<a href="{ReblogRootURL}" title="@{ReblogRootName}">source</a>
{/block:RebloggedFrom}
</div>
{/block:PermalinkPage}
</div><!--permadiv-->
{/block:Date}
{block:PostNotes}
<div class="notescont">
<h1>{NoteCountWithLabel}</h1>
{PostNotes}
</div>
{/block:PostNotes}
</div><!--posts-->
{/block:Posts}
</div><!--postscont-->
</div><!--alicont-->
</div><!--clownfest-->
</div><!--tout-->
<!-- fix visual bug with invisible imgs -->
<script>
var imgs = document.querySelectorAll("img");
Array.prototype.forEach.call(imgs, function(i){
if(i.src.indexOf("assets.tumblr.com/images/x.gif") > -1){
i.setAttribute("src","//cdn.glitch.global/bdf00c8f-434a-46d9-a514-ec8332ec176a/1x1.png")
}
});
</script>
<script src="//static.tumblr.com/0podkko/jfMplm3f8/modified_photosets.js"></script>
</body>
</html>