2607 lines
70 KiB
Plaintext
2607 lines
70 KiB
Plaintext
<!----------------------------------------------------
|
|
Theme [15]: Monster
|
|
Made by glenthemes
|
|
|
|
Initial release: 2015/12/21
|
|
Rework date: 2021/08/21
|
|
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/monster
|
|
----------------------------------------------------->
|
|
<!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>
|
|
|
|
<!------ THEME SCRIPTS ------->
|
|
<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="//glen-themes.gitlab.io/thms/15/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/15/sweat-blvvd-tears.js"></script>
|
|
<script src="//glen-themes.gitlab.io/thms/15/love-and-loss.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: transparent;
|
|
--Poll-Option-Corner-Rounding: 4px;
|
|
--Poll-Option-Border-Size: 1px;
|
|
--Poll-Option-Border-Color: {color:post borders inner};
|
|
--Poll-Option-Padding: 10px;
|
|
--Poll-Option-Font-Size: var(--Body-Font-Size);
|
|
--Poll-Option-Spacing: 10px;
|
|
--Poll-Option-Text-Color: {color:text};
|
|
|
|
--Poll-Option-HOVER-Border-Color: {color:post borders inner};
|
|
--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:headings};
|
|
--NPF-Audio-Buttons-Padding: calc(var(--Audio-Post-PlayButton-Padding) + (var(--Audio-Post-PlayButton-Size) * (1 - 0.6)));
|
|
--NPF-Audio-Buttons-Spacing: calc(var(--p) + var(--Captions-Gap));
|
|
--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;
|
|
padding:var(--Captions-Gap);
|
|
padding-right:0;
|
|
border:1px solid {color:post borders inner};
|
|
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:{color:post 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],
|
|
.npf-audio-album {
|
|
display:none;
|
|
}
|
|
|
|
.npf-audio-image {
|
|
position:absolute;
|
|
top:0;left:0;
|
|
padding:var(--Captions-Gap);
|
|
z-index:-1;
|
|
}
|
|
|
|
.npf-audio-details {
|
|
display:flex;
|
|
flex-direction:column;
|
|
justify-content:center;
|
|
padding-left:calc(var(--Captions-Gap) * 1.5);
|
|
margin-right:var(--Captions-Gap);
|
|
height:calc(100% + (var(--Captions-Gap) * 2));
|
|
border-left:1px solid {color:post borders inner};
|
|
}
|
|
</style>
|
|
|
|
<script src="//glen-npf.gitlab.io/other/neue.js"></script>
|
|
<link href="//glen-npf.gitlab.io/other/neue.css" rel="stylesheet">
|
|
|
|
<!------ FONTS ------->
|
|
<link href="//fonts.googleapis.com/css?family=Karla|Roboto+Mono|Inter|Rubik|Libre+Franklin|Open+Sans|Manrope:500|Vollkorn|PT+Serif|Andada+Pro|Prata|Poppins" 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">
|
|
|
|
<link href="//static.tumblr.com/gtjt4bo/tQkr83ou4/cappuccicons.css" rel="stylesheet">
|
|
|
|
<!------------ THEME OPTIONS ------------>
|
|
<meta name="image:background image" content="">
|
|
<meta name="image:sidebar image" content="//64.media.tumblr.com/554602f545f6eb28cb3b9b17e5abd0d0/9540ddd9bd6ce7e5-32/s2048x3072/328de2fffd8217188a75cc29d9c43ed94c60d63d.png">
|
|
<meta name="image:music player image" content="//64.media.tumblr.com/4d89ed9c4c2aafdaa5bf4c73bb61f203/9540ddd9bd6ce7e5-f3/s2048x3072/e00ef09c81d73c81181b26d09c82a5624d0c078b.png">
|
|
|
|
<meta name="color:top bar" content="#161516">
|
|
<meta name="color:customlinks" content="#e5e5e5">
|
|
|
|
<meta name="color:background" content="#000">
|
|
|
|
<meta name="color:music player buttons" content="#d5d5d5">
|
|
<meta name="color:music player circle" content="#000">
|
|
<meta name="color:music player text" content="#d5d5d5">
|
|
|
|
<meta name="color:description border" content="#363636">
|
|
<meta name="color:description" content="#d8d8d8">
|
|
|
|
<meta name="color:sidebar links border" content="#333">
|
|
<meta name="color:sidebar links background" content="#090909">
|
|
<meta name="color:sidebar links icon" content="#bbb">
|
|
|
|
<meta name="color:sidebar title border" content="#333">
|
|
<meta name="color:sidebar title" content="#ccc">
|
|
|
|
<meta name="color:post background" content="#090909">
|
|
<meta name="color:post borders outer" content="#333">
|
|
<meta name="color:post borders inner" content="#353535">
|
|
<meta name="color:post date" content="#e5e5e5">
|
|
<meta name="color:text" content="#ccc">
|
|
<meta name="color:headings" content="#d5d5d5">
|
|
<meta name="color:bold" content="#ccc">
|
|
<meta name="color:link" content="#ff4656">
|
|
<meta name="color:reblogger" content="#ccc">
|
|
<meta name="color:tags" content="#aaa">
|
|
<meta name="color:permalink" content="#ccc">
|
|
<meta name="color:permalink background" content="#090909">
|
|
<meta name="color:post buttons" content="#c5c5c5">
|
|
<meta name="color:like button liked" content="#ff4656">
|
|
<meta name="color:scrollbar background" content="#000">
|
|
<meta name="color:scrollbar" content="#666">
|
|
<meta name="color:pagination" content="#bbb">
|
|
|
|
<meta name="color:highlight" content="#81000b">
|
|
<meta name="color:highlighted text" content="#e5e5e5">
|
|
|
|
<!--------- TOP BAR OPTIONS --------->
|
|
<meta name="select:top bar height" title="60px" content="60px">
|
|
<meta name="select:top bar height" title="50px" content="50px">
|
|
<meta name="select:top bar height" title="70px" content="70px">
|
|
<meta name="select:top bar height" title="80px" content="80px">
|
|
|
|
<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">
|
|
|
|
<meta name="select:customlinks size" title="10px" content="10px">
|
|
<meta name="select:customlinks size" title="9px" content="9px">
|
|
<meta name="select:customlinks size" title="11px" content="11px">
|
|
<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">
|
|
|
|
<!--------- MUSIC PLAYER VISIBILITY --------->
|
|
<meta name="select:show music player" title="show" content="show">
|
|
<meta name="select:show music player" title="hide" content="hide">
|
|
|
|
<!--------- GENERAL OPTIONS --------->
|
|
<meta name="select:window margin" title="45px" content="45px">
|
|
<meta name="select:window margin" title="30px" content="30px">
|
|
<meta name="select:window margin" title="35px" content="35px">
|
|
<meta name="select:window margin" title="40px" content="40px">
|
|
<meta name="select:window margin" title="50px" content="50px">
|
|
<meta name="select:window margin" title="55px" content="55px">
|
|
<meta name="select:window margin" title="60px" content="60px">
|
|
<meta name="select:window margin" title="65px" content="65px">
|
|
<meta name="select:window margin" title="70px" content="70px">
|
|
|
|
<!--------- SIDEBAR OPTIONS --------->
|
|
<meta name="select:sidebar width" title="325px" content="325px">
|
|
<meta name="select:sidebar width" title="250px" content="250px">
|
|
<meta name="select:sidebar width" title="275px" content="275px">
|
|
<meta name="select:sidebar width" title="300px" content="300px">
|
|
<meta name="select:sidebar width" title="350px" content="350px">
|
|
<meta name="select:sidebar width" title="375px" content="375px">
|
|
|
|
<meta name="select:description font size" title="12px" content="12px">
|
|
<meta name="select:description font size" title="10px" content="10px">
|
|
<meta name="select:description font size" title="11px" content="11px">
|
|
<meta name="select:description font size" title="13px" content="13px">
|
|
<meta name="select:description font size" title="14px" content="14px">
|
|
|
|
<meta name="select:description padding" title="14px" content="14px">
|
|
<meta name="select:description padding" title="8px" content="8px">
|
|
<meta name="select:description padding" title="10px" content="10px">
|
|
<meta name="select:description padding" title="12px" content="12px">
|
|
<meta name="select:description padding" title="16px" content="16px">
|
|
<meta name="select:description padding" title="18px" content="18px">
|
|
<meta name="select:description padding" title="20px" content="20px">
|
|
|
|
<meta name="select:sidebar links size" title="14px" content="14px">
|
|
<meta name="select:sidebar links size" title="12px" content="12px">
|
|
<meta name="select:sidebar links size" title="16px" content="16px">
|
|
|
|
<meta name="select:sidebar links padding" title="8px" content="8px">
|
|
<meta name="select:sidebar links padding" title="10px" content="10px">
|
|
|
|
<meta name="select:sidebar links spacing" title="6px" content="6px">
|
|
<meta name="select:sidebar links spacing" title="4px" content="4px">
|
|
<meta name="select:sidebar links spacing" title="8px" content="8px">
|
|
|
|
<meta name="select:sidebar title size" title="16px" content="16px">
|
|
<meta name="select:sidebar title size" title="10px" content="10px">
|
|
<meta name="select:sidebar title size" title="12px" content="12px">
|
|
<meta name="select:sidebar title size" title="14px" content="14px">
|
|
<meta name="select:sidebar title size" title="18px" content="18px">
|
|
<meta name="select:sidebar title size" title="20px" content="20px">
|
|
|
|
<meta name="select:center gap" title="70px" content="70px">
|
|
<meta name="select:center gap" title="60px" content="60px">
|
|
<meta name="select:center gap" title="80px" content="80px">
|
|
<meta name="select:center gap" title="90px" content="90px">
|
|
|
|
<!--------- MAIN POSTS OPTIONS --------->
|
|
<meta name="select:body font" title="PT Serif" content="PT Serif">
|
|
<meta name="select:body font" title="Andada Pro" content="Andada Pro">
|
|
<meta name="select:body font" title="Manrope" content="Manrope">
|
|
<meta name="select:body font" title="Inter" content="Inter">
|
|
<meta name="select:body font" title="Karla" content="Karla">
|
|
<meta name="select:body font" title="Libre Franklin" content="Libre Franklin">
|
|
<meta name="select:body font" title="Open Sans" content="Open Sans">
|
|
|
|
<meta name="select:post width" title="500px" content="500px">
|
|
<meta name="select:post width" title="450px" content="450px">
|
|
<meta name="select:post width" title="400px" content="400px">
|
|
<meta name="select:post width" title="540px" content="540px">
|
|
<meta name="select:post width" title="600px" content="600px">
|
|
|
|
<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 padding" title="25px" content="25px">
|
|
<meta name="select:post padding" title="30px" content="30px">
|
|
|
|
<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="10px" content="10px">
|
|
|
|
<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 date font size" title="14px" content="14px">
|
|
<meta name="select:post date font size" title="11px" content="11px">
|
|
<meta name="select:post date font size" title="12px" content="12px">
|
|
<meta name="select:post date font size" title="13px" content="13px">
|
|
<meta name="select:post date font size" title="15px" content="15px">
|
|
<meta name="select:post date font size" title="16px" content="16px">
|
|
|
|
<meta name="select:post text line height" title="normal" content="1.7em">
|
|
<meta name="select:post text line height" title="compact" content="1.5em">
|
|
<meta name="select:post text line height" title="tall" content="1.9em">
|
|
|
|
<meta name="select:reblogger picture style" title="round" content="100%">
|
|
<meta name="select:reblogger picture style" title="soft" content="3px">
|
|
<meta name="select:reblogger picture style" title="square" content="0px">
|
|
|
|
<meta name="select:reblog separators" title="yes" content="yes">
|
|
<meta name="select:reblog separators" title="none" content="rb-none">
|
|
|
|
<!-- black-and-white options -->
|
|
<meta name="select:grayscale photos" title="reblogger icon only" content="grayico">
|
|
<meta name="select:grayscale photos" title="no (normal)" content="no">
|
|
<meta name="select:grayscale photos" title="yes" content="yes">
|
|
|
|
<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="6px" content="6px">
|
|
<meta name="select:post buttons spacing" title="4px" content="4px">
|
|
<meta name="select:post buttons spacing" title="8px" content="8px">
|
|
<meta name="select:post buttons spacing" title="10px" content="10px">
|
|
|
|
<!-- clicktags or normal tags -->
|
|
<meta name="select:tags" title="click toggle + fade" content="yesclick withfade">
|
|
<meta name="select:tags" title="click toggle" content="yesclick">
|
|
<meta name="select:tags" title="always show" content="default">
|
|
|
|
<!--------- [BOTTOM] PERMA OPTIONS --------->
|
|
<meta name="select:permalink padding" title="18px" content="18px">
|
|
<meta name="select:permalink padding" title="10px" content="10px">
|
|
<meta name="select:permalink padding" title="12px" content="12px">
|
|
<meta name="select:permalink padding" title="14px" content="14px">
|
|
<meta name="select:permalink padding" title="16px" content="16px">
|
|
<meta name="select:permalink padding" title="20px" content="20px">
|
|
<meta name="select:permalink padding" title="22px" content="22px">
|
|
<meta name="select:permalink padding" title="24px" content="24px">
|
|
|
|
<meta name="select:permalink border" title="yes" content="yes">
|
|
<meta name="select:permalink border" title="no" content="no">
|
|
|
|
<meta name="select:post spacing" title="40px" content="40px">
|
|
<meta name="select:post spacing" title="30px" content="30px">
|
|
<meta name="select:post spacing" title="50px" content="50px">
|
|
<meta name="select:post spacing" title="60px" content="60px">
|
|
|
|
<!--------- 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:custom description" content="Type whatever you like here! If you want to use your default description, clear the text in this box!">
|
|
<meta name="text:sidebar title" content="monster.">
|
|
|
|
<meta name="text:how to link music" content="linktr.ee/direct_file_links">
|
|
<meta name="text:music song name" content="monster">
|
|
<meta name="text:music song artist" content="✝ PVRIS ✝">
|
|
<meta name="text:music song mp3" content="https://rhizo.gitlab.io/m/PVRIS-Monster.mp3">
|
|
|
|
<meta name="text:customlink 1 name" content="link one">
|
|
<meta name="text:customlink 1 url" content="//www.youtube.com/watch?v=qfxDEZX9K0o">
|
|
<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="">
|
|
<meta name="text:customlink 7 name" content="">
|
|
<meta name="text:customlink 7 url" content="">
|
|
<meta name="text:customlink 8 name" content="">
|
|
<meta name="text:customlink 8 url" content="">
|
|
|
|
<!----------------------------------->
|
|
|
|
<style type="text/css">
|
|
|
|
@font-face{ font-family:"agrandir bold"; src: url('//glen-assets.github.io/fonts/Agrandir Text Bold 700.otf'); }
|
|
|
|
/*------------ TOOLTIPS ------------*/
|
|
#s-m-t-tooltip {
|
|
margin:16px;
|
|
max-width:{select:post width};
|
|
padding:8px 10px;
|
|
background:{color:sidebar links background};
|
|
border:1px solid {color:sidebar links border};
|
|
border-radius:3px;
|
|
font-family:rubik;
|
|
font-size:calc({select:post font size} - 3.5px)!important;
|
|
letter-spacing:1px;
|
|
word-spacing:1px;
|
|
text-transform:uppercase;
|
|
color:{color:sidebar links icon};
|
|
z-index:99;
|
|
}
|
|
|
|
/*------------ TUMBLR CONTROLS ------------*/
|
|
iframe#tumblr_controls, .iframe-controls--desktop {
|
|
top:calc(5px + {select:top bar height})!important;
|
|
right:calc(5px + var(--Scrollbar-Padding))!important;
|
|
position:fixed!important;
|
|
|
|
transform:scale(0.7,0.7);
|
|
-webkit-transform:scale(0.7,0.7);
|
|
|
|
transform-origin:100% 0;
|
|
z-index:999999!important;
|
|
visibility:hidden;
|
|
opacity:0;
|
|
user-select:none;
|
|
}
|
|
|
|
.tc-black {
|
|
filter:invert(100%) hue-rotate(180deg)!important;
|
|
-webkit-filter:invert(100%) hue-rotate(180deg)!important;
|
|
}
|
|
|
|
.t-opac {
|
|
opacity:1!important;
|
|
transition:opacity 0.269s ease-in-out;
|
|
}
|
|
|
|
/*---------------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;
|
|
}
|
|
|
|
::selection {
|
|
background:{color:highlight};
|
|
color:{color:highlighted text};
|
|
}
|
|
|
|
::-moz-selection {
|
|
background:{color:highlight};
|
|
color:{color:highlighted text};
|
|
}
|
|
|
|
/*------------ BASICS ------------*/
|
|
body {
|
|
margin:0;
|
|
background-color:{color:background};
|
|
background-image:url({image:background image});
|
|
background-repeat:repeat;
|
|
background-attachment:fixed;
|
|
font-family:{select:body font}, 'system-ui';
|
|
color:{color:text};
|
|
overflow:hidden;
|
|
overscroll-behavior-y:none;
|
|
}
|
|
|
|
img, iframe {
|
|
vertical-align:middle;
|
|
image-rendering:-webkit-optimize-contrast;
|
|
}
|
|
|
|
iframe {
|
|
max-width:100%;
|
|
border:none;
|
|
}
|
|
|
|
figure {
|
|
margin-left:0;
|
|
margin-right:0;
|
|
}
|
|
|
|
a, a:visited {
|
|
color:{color:link};
|
|
text-decoration:none;
|
|
}
|
|
|
|
a[title]:not([href]):hover {cursor:help;}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
margin:var(--Heading-Margins) 0;
|
|
font-family:agrandir bold;
|
|
font-size:calc({select:post font size} + 1px);
|
|
text-transform:uppercase;
|
|
font-weight:normal;
|
|
letter-spacing:1px;
|
|
word-spacing:.3px;
|
|
}
|
|
|
|
h1.title, a.read_more {
|
|
display:block;
|
|
margin-top:2px;
|
|
padding:0.69em 0.8em;
|
|
border:1px solid {color:post borders inner};
|
|
font-size:calc({select:post font size} + 1.5px)!important;
|
|
font-weight:normal;
|
|
color:{color:headings}!important;
|
|
text-align:center;
|
|
line-height:calc({select:post text line height} * 0.8);
|
|
}
|
|
|
|
h1.h1c, a.read_more {
|
|
display:block;
|
|
padding:0!important;
|
|
background:transparent!important;
|
|
border:none!important;
|
|
margin:calc(var(--Heading-Margins) * 1.5) 0;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6, a.read_more {
|
|
font-size:calc({select:post font size} + 1.5px);
|
|
line-height:{select:post text line height};
|
|
}
|
|
|
|
a.read_more {
|
|
padding-bottom:0;
|
|
border:none;
|
|
font-size:calc({select:post font size} + 1px);
|
|
color:{color:link}!important;
|
|
}
|
|
|
|
h1 + p, h2 + p {
|
|
margin-top:calc(0px - var(--Heading-Margins));
|
|
}
|
|
|
|
p {
|
|
margin:var(--Paragraph-Margins) 0;
|
|
}
|
|
|
|
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(({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) - 0px);
|
|
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:calc(var(--Captions-Gap) - 3px) var(--Captions-Gap);
|
|
border:1px solid {color:post borders inner};
|
|
border-radius:3px;
|
|
margin:1em 0;
|
|
}
|
|
|
|
pre, code {
|
|
font-family:roboto mono;
|
|
font-size:calc({select:post font size} - 1.5px);
|
|
letter-spacing:0px;
|
|
}
|
|
|
|
p code {
|
|
margin:0 1px;
|
|
padding:5px;
|
|
padding-bottom:4px;
|
|
border:1px solid {color:post borders inner};
|
|
border-radius:3px;
|
|
}
|
|
|
|
hr {
|
|
width:100%;
|
|
border-width:0px;
|
|
height:1px;
|
|
background:{color:post borders inner};
|
|
}
|
|
|
|
/*---- npf b*llshttery ----*/
|
|
p.npf_quirky {
|
|
font-size:calc({select:post font size} * 1.4)!important;
|
|
line-height:calc({select:post text line height} * 0.7)!important;
|
|
}
|
|
|
|
p.npf_quote, p.npf_chat {
|
|
font-family:inherit!important;
|
|
font-size:inherit!important;
|
|
line-height:inherit!important;
|
|
}
|
|
|
|
.npf_chat:only-of-type {
|
|
margin:0;
|
|
}
|
|
|
|
.npf_color_joey {color:#f8747b!important} /* red */
|
|
.npf_color_monica {color:#fe9e89!important} /* orange */
|
|
.npf_color_phoebe {color:#facc48!important} /* yellow */
|
|
.npf_color_ross {color:#75ca9b!important} /* green */
|
|
.npf_color_rachel {color:#8dbfd9!important} /* blue */
|
|
.npf_color_chandler {color:#c0a0dc!important} /* purple */
|
|
.npf_color_niles {color:#fb94b4!important} /* pink */
|
|
|
|
.npf-link-block {
|
|
border:1px solid {color:post borders inner}!important;
|
|
border-radius:0!important;
|
|
margin:auto!important;
|
|
}
|
|
|
|
.npf-link-block .title {
|
|
font-family:agrandir bold;
|
|
font-size:calc({select:post font size} + 2px);
|
|
text-transform:uppercase;
|
|
letter-spacing:1.3px;
|
|
text-shadow:1px 1px 1.5px rgba(0,0,0,0.07);
|
|
color:{color:headings}!important;
|
|
}
|
|
|
|
.npf-link-block .poster {
|
|
height:200px;
|
|
}
|
|
|
|
[grayscale="yes"] .npf-link-block .poster {
|
|
filter:var(--Grayscale-Settings);
|
|
-webkit-filter:var(--Grayscale-Settings);
|
|
transition:filter var(--Grayscale-Hover-Speed) ease-in-out;
|
|
}
|
|
|
|
[grayscale="yes"] .postman:hover .npf-link-block .poster {
|
|
filter:initial;
|
|
-webkit-filter:initial;
|
|
}
|
|
|
|
.npf-link-block .poster + .bottom {
|
|
border-top:1px solid {color:post borders inner};
|
|
}
|
|
|
|
.npf-link-block .bottom {
|
|
line-height:inherit!important;
|
|
padding:calc(var(--Captions-Gap) - 4px) var(--Captions-Gap)!important;
|
|
}
|
|
|
|
.npf-link-block .description {
|
|
padding-top:1px;
|
|
font-family:agrandir bold;
|
|
font-size:calc({select:post font size} + 1px)!important;
|
|
text-transform:uppercase;
|
|
letter-spacing:1.3px;
|
|
color:{color:headings}!important;
|
|
}
|
|
|
|
.npf-link-block .description + .site-name {
|
|
margin-top:3px!important;
|
|
}
|
|
|
|
.npf-link-block .site-name {
|
|
margin-bottom:-5px;
|
|
font-family:vollkorn;
|
|
font-size:{select:post font size}!important;
|
|
font-weight:normal!important;
|
|
letter-spacing:.7px;
|
|
color:{color:link}!important;
|
|
}
|
|
|
|
/*-------------------------*/
|
|
|
|
.flex {
|
|
display:flex;
|
|
align-items:center;
|
|
}
|
|
|
|
.flex.space-between {
|
|
justify-content:space-between;
|
|
}
|
|
|
|
.block {display:block}
|
|
|
|
.allcaps {
|
|
letter-spacing:1px;
|
|
font-size:90%;
|
|
}
|
|
|
|
:root {
|
|
--MusicPlayer-Edge-Offset:21px;
|
|
--MusicPlayer-Album-Size:50px;
|
|
--MPAC:{image:music player image};
|
|
--MusicPlayer-Buttons-Size:30px;
|
|
|
|
--Scrollbar-Padding:21px;
|
|
|
|
--Sidebar-Sections-Spacing:20px;
|
|
|
|
--Photos-Spacing:{select:photoset spacing};
|
|
|
|
--Posts-Avatar-Size:25px;
|
|
--Captions-Gap:13px;
|
|
|
|
--Headings:{color:headings};
|
|
--Link:{color:link};
|
|
--Blockquote-Border-Color:{color:post borders inner};
|
|
|
|
--Paragraph-Margins:0.8em;
|
|
--Heading-Margins:0.6em;
|
|
|
|
--NPF-Caption-Spacing:var(--Captions-Gap);
|
|
--NPF-Image-Spacing:{select:photoset spacing};
|
|
|
|
--Grayscale-Settings:grayscale(100%) contrast(110%) brightness(104%);
|
|
--Grayscale-Hover-Speed:0.420s;
|
|
|
|
--Audio-Post-Album-Image-Size:64px;
|
|
--Audio-Post-PlayButton-Size:18px;
|
|
--Audio-Post-PlayButton-Padding:8px;
|
|
|
|
--AskPost-Avatar-Size:48px;
|
|
|
|
--Text-LineHeight:{select:post text line height};
|
|
|
|
--Permalink-Background:{color:permalink background};
|
|
|
|
--Post-Buttons-Color:{color:post buttons};
|
|
|
|
--TumblrControls-Color:{select:tumblr controls color};
|
|
}
|
|
|
|
/*------------ TOP LINKS ------------*/
|
|
.toplinks {
|
|
position:fixed;
|
|
top:0;left:0;
|
|
width:100%;
|
|
height:{select:top bar height};
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
text-align:center;
|
|
overflow:hidden;
|
|
z-index:69;
|
|
}
|
|
|
|
.toplinks a {
|
|
position:relative;
|
|
display:block;
|
|
margin:0 calc({select:customlinks spacing} / 2);
|
|
font-family:Vollkorn;
|
|
font-size:{select:customlinks size};
|
|
text-transform:uppercase;
|
|
letter-spacing:.7px;
|
|
word-spacing:.3px;
|
|
color:{color:customlinks};
|
|
padding:calc(({select:top bar height} - {select:customlinks size}) / 2) calc({select:customlinks spacing} / 2);
|
|
}
|
|
|
|
.toplinks a:after {
|
|
content:"";
|
|
position:absolute;
|
|
top:calc(50% - 1px);
|
|
right:0;
|
|
width:0;
|
|
height:1px;
|
|
background:linear-gradient(to left, rgba({RGBcolor:customlinks},0.69) -20%, {color:customlinks}, rgba({RGBcolor:customlinks},0.69) 120%);
|
|
z-index:9;
|
|
|
|
/* mouse OUT */
|
|
transition:width .420s ease-in-out;
|
|
}
|
|
|
|
.toplinks a:hover:after {
|
|
left:0;
|
|
width:100%;
|
|
|
|
/* mouse IN */
|
|
transition:width .420s ease-in-out, left .420s ease-in-out;
|
|
}
|
|
|
|
/*------------ MAIN CONTAINER ------------*/
|
|
.bigcont {
|
|
position:absolute;
|
|
top:0;left:0;
|
|
width:100%;
|
|
height:100%;
|
|
border-top:{select:top bar height} solid {color:top bar};
|
|
box-sizing:border-box;
|
|
overflow:auto;
|
|
overflow-x:hidden;
|
|
}
|
|
|
|
.mcwrap {
|
|
margin:0 auto;
|
|
width:calc({select:post width} + ({select:post padding} * 2) + 2px + {select:sidebar width} + {select:center gap});
|
|
}
|
|
|
|
.sighbar {
|
|
position:fixed;
|
|
margin-top:-{select:window margin};
|
|
margin-left:calc(-{select:center gap} / 2);
|
|
width:{select:sidebar width};
|
|
height:calc(100vh - {select:window margin});
|
|
display:table;
|
|
z-index:9;
|
|
}
|
|
|
|
.vmid {
|
|
display:table-cell;
|
|
vertical-align:middle;
|
|
}
|
|
|
|
.vmid > *:first-child {
|
|
margin-top:calc(0px - {select:window margin});
|
|
}
|
|
|
|
.sb-img {
|
|
margin:var(--Sidebar-Sections-Spacing) 0;
|
|
width:100%;
|
|
}
|
|
|
|
.descwrap {
|
|
display:table-row;
|
|
}
|
|
|
|
.dleft {
|
|
width:7px;
|
|
height:100%;
|
|
border:1px solid {color:description border};
|
|
border-right:none;
|
|
display:table-cell;
|
|
}
|
|
|
|
.desc {
|
|
padding:calc({select:description padding} - 2px) {select:description padding};
|
|
font-size:{select:description font size};
|
|
color:{color:description};
|
|
line-height:160%;
|
|
}
|
|
|
|
.dright {
|
|
width:7px;
|
|
height:100%;
|
|
border:1px solid {color:description border};
|
|
border-left:none;
|
|
display:table-cell;
|
|
}
|
|
|
|
.deflinks {
|
|
margin-top:var(--Sidebar-Sections-Spacing);
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
}
|
|
|
|
.lynns {
|
|
display:flex;
|
|
}
|
|
|
|
.lynns a {
|
|
display:block;
|
|
margin-right:{select:sidebar links spacing};
|
|
padding:{select:sidebar links padding};
|
|
border:1px solid {color:sidebar links border};
|
|
border-radius:3px;
|
|
background:{color:sidebar links background};
|
|
line-height:0;
|
|
}
|
|
|
|
.lynns .cp {
|
|
font-size:{select:sidebar links size};
|
|
color:{color:sidebar links icon};
|
|
line-height:{select:sidebar links size};
|
|
}
|
|
|
|
.lynns .cp-calendar-o {
|
|
font-size:calc({select:sidebar links size} - 2px);
|
|
padding:1px;
|
|
}
|
|
|
|
.lynns .glenny {
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
width:calc({select:sidebar links size} + ({select:sidebar links padding} * 2));
|
|
height:calc({select:sidebar links size} + ({select:sidebar links padding} * 2));
|
|
padding:0;
|
|
}
|
|
|
|
.couillon {
|
|
margin-top:-.5px;
|
|
margin-left:.5px;
|
|
width:calc({select:sidebar links size} + 1px);
|
|
height:calc({select:sidebar links size} + 1px);
|
|
-webkit-mask-repeat:no-repeat;
|
|
-webkit-mask-position:center;
|
|
-webkit-mask-size:contain;
|
|
-webkit-mask-image:var(--glenSVG);
|
|
background:{color:sidebar links icon};
|
|
}
|
|
|
|
.lynns a:last-child {
|
|
margin-right:0;
|
|
}
|
|
|
|
.deflinks .line-fill {
|
|
flex:1;
|
|
height:1px;
|
|
background:{color:sidebar title border};
|
|
margin:0 10px;
|
|
}
|
|
|
|
.deflinks [title]{
|
|
font-family:agrandir bold;
|
|
font-size:{select:sidebar title size};
|
|
text-transform:uppercase;
|
|
letter-spacing:1px;
|
|
color:{color:sidebar title};
|
|
}
|
|
|
|
/*------------ MAIN POSTS ------------*/
|
|
.postscont {
|
|
margin:{select:window margin} 0;
|
|
margin-left:calc({select:sidebar width} + ({select:center gap} / 2));
|
|
width:calc({select:post width} + ({select:post padding} * 2) + 2px); /* fallback for if no posts are found */
|
|
font-size:{select:post font size};
|
|
color:{color:text};
|
|
line-height:{select:post text line height};
|
|
}
|
|
|
|
[font='Libre Franklin'], [font='Manrope']{
|
|
letter-spacing:0.3px;
|
|
}
|
|
|
|
[font='Manrope'] {
|
|
font-size:calc({select:post font size} - .5px);
|
|
line-height:calc({select:post text line height} * 1.069);
|
|
}
|
|
|
|
.desc[font='Manrope'] {
|
|
font-size:calc({select:description font size} - .5px);
|
|
line-height:calc({select:description line height} * 1.069);
|
|
}
|
|
|
|
.postman {
|
|
position:relative;
|
|
}
|
|
|
|
.posts {
|
|
position:relative;
|
|
margin-bottom:{select:post spacing};
|
|
width:{select:post width};
|
|
padding:{select:post padding};
|
|
background:{color:post background};
|
|
border:1px solid {color:post borders outer};
|
|
overflow:hidden;
|
|
}
|
|
|
|
.postside {
|
|
display:block;
|
|
position:absolute;
|
|
margin-top:calc({select:post padding} / 2);
|
|
margin-left:calc({select:post width} + ({select:post padding} * 2) + 2px);
|
|
padding-left:calc({select:post padding} + 5px);
|
|
font-family:prata;
|
|
color:{color:post date}!important;
|
|
text-align:center;
|
|
}
|
|
|
|
.postside [p-type]{
|
|
margin:auto;
|
|
margin-bottom:10px;
|
|
width:calc({select:post date font size} * 2);
|
|
height:calc({select:post date font size} * 2);
|
|
-webkit-mask-repeat:no-repeat;
|
|
-webkit-mask-size:contain;
|
|
-webkit-mask-position:center;
|
|
background:{color:post date};
|
|
}
|
|
|
|
[p-type="text"]{
|
|
-webkit-mask-image:var(--text-t);
|
|
}
|
|
|
|
[p-type="photo"]{
|
|
-webkit-mask-image:var(--camera);
|
|
}
|
|
|
|
[p-type="quote"]{
|
|
-webkit-mask-image:var(--quote-q);
|
|
}
|
|
|
|
[p-type="audio"]{
|
|
margin-bottom:calc(10px + 3px)!important;
|
|
width:calc({select:post date font size} * 1.69)!important;
|
|
height:calc({select:post date font size} * 1.69)!important;
|
|
-webkit-mask-image:var(--headphones);
|
|
}
|
|
|
|
[p-type="link"]{
|
|
-webkit-mask-image:var(--www);
|
|
}
|
|
|
|
[p-type="chat"]{
|
|
width:calc({select:post date font size} * 1.9)!important;
|
|
height:calc({select:post date font size} * 1.9)!important;
|
|
-webkit-mask-image:var(--chatbub);
|
|
}
|
|
|
|
[p-type="answer"]{
|
|
width:calc({select:post date font size} * 1.69)!important;
|
|
height:calc({select:post date font size} * 1.69)!important;
|
|
-webkit-mask-image:var(--askmail);
|
|
}
|
|
|
|
[p-type="video"]{
|
|
margin-bottom:calc(10px + 1px)!important;
|
|
-webkit-mask-image:var(--vid);
|
|
}
|
|
|
|
.postside [wkday]{
|
|
font-size:calc({select:post font size} + 2px);
|
|
text-transform:uppercase;
|
|
letter-spacing:.5px;
|
|
}
|
|
|
|
.postside [time]{
|
|
font-family:prata;
|
|
font-size:{select:post date font size};
|
|
letter-spacing:.3px;
|
|
white-space:nowrap;
|
|
}
|
|
|
|
[time] [c]{
|
|
margin:0 1px;
|
|
}
|
|
|
|
[lane]{
|
|
margin:8px auto;
|
|
width:1px;
|
|
height:69px;
|
|
background:{color:post borders outer};
|
|
}
|
|
|
|
[full-d]{
|
|
display:flex;
|
|
align-items:center;
|
|
width:100%;
|
|
writing-mode:vertical-rl;
|
|
text-orientation:mixed;
|
|
}
|
|
|
|
.body[original] > *:first-child {
|
|
margin-top:0px!important;
|
|
}
|
|
|
|
.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);
|
|
margin-right:0;
|
|
}
|
|
|
|
.posts img {
|
|
max-width:100%;
|
|
}
|
|
|
|
[grayscale="yes"] .postman img:not(.nofilter) {
|
|
filter:var(--Grayscale-Settings);
|
|
-webkit-filter:var(--Grayscale-Settings);
|
|
transition:filter var(--Grayscale-Hover-Speed) ease-in-out;
|
|
}
|
|
|
|
[grayscale="yes"] .postman:hover img:not(.nofilter) {
|
|
filter:initial;
|
|
-webkit-filter:initial;
|
|
}
|
|
|
|
.postinner {
|
|
margin-bottom:{select:post padding};
|
|
}
|
|
|
|
.comment_container:first-of-type .commenter {
|
|
padding-top:2px;
|
|
}
|
|
|
|
[post-type="audio"] .body .ccfirst .comment,
|
|
[post-type="chat"] .body .ccfirst .comment {
|
|
margin:0!important;
|
|
padding:0!important;
|
|
border:none!important;
|
|
}
|
|
|
|
.ccfirst .comment:not(.line-exist) {
|
|
margin-top:0;
|
|
margin-left:calc(var(--Posts-Avatar-Size) / 2);
|
|
padding-left:calc(var(--Posts-Avatar-Size) / 2);
|
|
border-left:1px solid var(--Blockquote-Border-Color);
|
|
margin-right:0;
|
|
}
|
|
|
|
/* hyperlinks in post */
|
|
.comment a, [original] a {
|
|
color:{color:link};
|
|
padding-bottom:2px;
|
|
border-bottom:.7px solid rgba({RGBcolor:link},0.169);
|
|
}
|
|
|
|
a.post_media_photo_anchor {
|
|
padding-bottom:0px!important;
|
|
border-bottom:none!important;
|
|
}
|
|
|
|
.comment b, .comment strong, .body b, .body strong {
|
|
color:{color:bold};
|
|
}
|
|
|
|
.posts a b {
|
|
color:{color:link};
|
|
}
|
|
|
|
/*----- PINNED POST -----*/
|
|
.pi-n {
|
|
display:flex;
|
|
align-items:center;
|
|
margin-top:calc(var(--Paragraph-Margins) * 2);
|
|
margin-bottom:-2px;
|
|
}
|
|
|
|
.pi-n span {
|
|
display:block;
|
|
}
|
|
|
|
.pinny {
|
|
margin-right:6px;
|
|
width:calc({select:post font size} + 3px);
|
|
height:calc({select:post font size} + 3px);
|
|
-webkit-mask-image:var(--pushpin);
|
|
-webkit-mask-repeat:no-repeat;
|
|
-webkit-mask-size:contain;
|
|
background:{color:reblogger};
|
|
}
|
|
|
|
.pinny ~ span {
|
|
margin-top:.5px;
|
|
font-family:rubik;
|
|
text-transform:uppercase;
|
|
font-size:calc({select:post font size} - 2px);
|
|
letter-spacing:.7px;
|
|
color:{color:reblogger};
|
|
}
|
|
|
|
/*------------ REBLOG STYLING ------------*/
|
|
.caption {
|
|
margin-top:var(--Captions-Gap);
|
|
}
|
|
|
|
[reblog-borders*='yes'] .comment_container {
|
|
margin:0 -{select:post padding};
|
|
padding:calc(var(--Captions-Gap) / 2.5) {select:post padding};
|
|
border-bottom:1px solid {color:post borders inner};
|
|
}
|
|
|
|
.comment_container:first-of-type, .ccfirst {
|
|
padding-top:0px;
|
|
border-top:0px solid transparent;
|
|
}
|
|
|
|
.body .ccfirst {
|
|
margin-top:calc(var(--Captions-Gap) / -2);
|
|
}
|
|
|
|
.comment_container:last-of-type, .cclast {
|
|
padding-bottom:0px;
|
|
border-bottom:0px solid transparent;
|
|
}
|
|
|
|
.commenter {
|
|
padding-top:0.69em;
|
|
margin-bottom:0.69em;
|
|
display:flex;
|
|
align-items:center;
|
|
backface-visibility:hidden;
|
|
}
|
|
|
|
.commenter img {
|
|
width:var(--Posts-Avatar-Size);
|
|
height:var(--Posts-Avatar-Size);
|
|
border-radius:{select:reblogger picture style};
|
|
}
|
|
|
|
.photo_origin + .commenter,
|
|
.caption .commenter {margin-top:-3px}
|
|
|
|
.comment_container + .comment_container .commenter {
|
|
margin-top:2px;
|
|
}
|
|
|
|
[grayscale='grayico'] .commenter img {
|
|
filter:var(--Grayscale-Settings);
|
|
-webkit-filter:var(--Grayscale-Settings);
|
|
}
|
|
|
|
.commenter a {
|
|
padding-left:8px;
|
|
}
|
|
|
|
.commenter a, .tumblr_blog, .tmblr-attribution a, .asker span {
|
|
font-family:andada pro!important;
|
|
font-size:calc({select:post font size} - 2px)!important;
|
|
text-transform:uppercase!important;
|
|
letter-spacing:.5px!important;
|
|
color:{color:reblogger}!important;
|
|
}
|
|
|
|
.tmblr-attribution a {
|
|
color:{color:link};
|
|
}
|
|
|
|
.nosrc {
|
|
display:none;
|
|
margin-top:0;
|
|
padding-top:0;
|
|
margin-bottom:var(--Captions-Gap);
|
|
}
|
|
|
|
/*----- QUOTE POSTS -----*/
|
|
.pq {
|
|
margin-top:1.2em;
|
|
text-align:center;
|
|
}
|
|
|
|
.quote-words {
|
|
padding:0 1em;
|
|
font-family:agrandir bold;
|
|
font-size:calc({select:post font size} + 2.5px);
|
|
text-transform:uppercase;
|
|
letter-spacing:.7px;
|
|
line-height:{select:post text line height};
|
|
}
|
|
|
|
.quote-source {
|
|
padding-top:1em;
|
|
margin-bottom:1.2em;
|
|
}
|
|
|
|
/*----- ASK POSTS -----*/
|
|
.as {
|
|
padding-bottom:0!important;
|
|
margin:-{select:post padding}!important;
|
|
margin-bottom:0!important;
|
|
padding:0!important;
|
|
border-bottom:1px solid {color:post borders inner};
|
|
}
|
|
|
|
.askcont {
|
|
display:table-row;
|
|
margin-bottom:calc(var(--Captions-Gap) / 2.5);
|
|
padding:var(--Captions-Gap);
|
|
}
|
|
|
|
[reblog-borders*='yes'] .askcont {
|
|
/*margin:calc(var(--Captions-Gap) / 2) 0;*/
|
|
}
|
|
|
|
[reblog-borders*='rb-none'] .anscont > .commenter {
|
|
margin-top:calc(0px - var(--Captions-Gap) / 2)!important;
|
|
}
|
|
|
|
.asker {
|
|
margin:0!important;
|
|
margin-top:-2px!important;
|
|
padding-top:0!important;
|
|
font-family:rubik!important;
|
|
text-transform:uppercase;
|
|
font-size:calc({select:post font size} - 1.5px)!important;
|
|
letter-spacing:.7px!important;
|
|
transform:none!important;
|
|
}
|
|
|
|
.asker b {
|
|
font-weight:normal;
|
|
margin-left:.5px;
|
|
}
|
|
|
|
.askimgcont {
|
|
display:table-cell;
|
|
border-right:1px solid {color:post borders inner};
|
|
padding:var(--Captions-Gap);
|
|
}
|
|
|
|
.askimg {
|
|
max-width:initial!important;
|
|
width:var(--AskPost-Avatar-Size);
|
|
height:var(--AskPost-Avatar-Size);
|
|
border-radius:{select:reblogger picture style};
|
|
border:1px solid {color:post borders inner};
|
|
}
|
|
|
|
.anon-img {
|
|
border:none!important;
|
|
}
|
|
|
|
.asker i {
|
|
font-size:calc({select:post font size} * 1.5);
|
|
}
|
|
|
|
.asker span {
|
|
margin-top:0;
|
|
padding-left:0;
|
|
}
|
|
|
|
.asker span a {
|
|
padding-left:0!important;
|
|
}
|
|
|
|
.asker a, .asker b {
|
|
color:{color:reblogger}!important;
|
|
}
|
|
|
|
[reblog-borders*='yes'] .as + .anscont {
|
|
margin-top:0;
|
|
}
|
|
|
|
[reblog-borders*='rb-none'] .as + .anscont {
|
|
margin-top:var(--Captions-Gap);
|
|
}
|
|
|
|
.askright {
|
|
display:table-cell;
|
|
vertical-align:middle;
|
|
padding:calc(({select:post padding} * 0.69) + 2px);
|
|
}
|
|
|
|
.answerer a, .answerer b {
|
|
color:{color:reblogger}!important;
|
|
}
|
|
|
|
.answerer b {
|
|
font-weight:normal;
|
|
margin-left:4px;
|
|
}
|
|
|
|
.question_text {
|
|
margin:0;
|
|
}
|
|
|
|
.question_text p:first-child {margin-top:0}
|
|
.question_text p:last-child {margin-bottom:0}
|
|
.question_text p:only-child {margin:0}
|
|
|
|
/*----- LINK POSTS -----*/
|
|
.bogcheese {
|
|
display:table;
|
|
border:1px solid {color:post borders inner};
|
|
width:100%;
|
|
box-sizing:border-box;
|
|
}
|
|
|
|
.linkcont {
|
|
display:table-row;
|
|
}
|
|
|
|
.sitename {
|
|
display:table-cell;
|
|
vertical-align:middle;
|
|
padding:8px 10px;
|
|
font-family:agrandir bold;
|
|
font-size:calc({select:post font size} + 1px);
|
|
text-transform:uppercase;
|
|
letter-spacing:1px;
|
|
color:{color:headings};
|
|
}
|
|
|
|
.bloom {
|
|
display:table-cell;
|
|
vertical-align:middle;
|
|
border-left:1px solid {color:post borders inner};
|
|
width:calc({select:post font size} + 4px + 20px);
|
|
height:calc({select:post font size} + 4px + 20px);
|
|
}
|
|
|
|
.fingergun {
|
|
margin:auto;
|
|
width:calc({select:post font size} + 4px);
|
|
height:calc({select:post font size} + 4px);
|
|
-webkit-mask-size:contain;
|
|
-webkit-mask-repeat:no-repeat;
|
|
-webkit-mask-position:center;
|
|
-webkit-mask-image:var(--fingergun);
|
|
background:{color:headings};
|
|
}
|
|
|
|
.link-excerpt {
|
|
padding:10px 12px;
|
|
border:1px solid {color:post borders outer};
|
|
border-top:0px solid transparent;
|
|
}
|
|
|
|
.link-description > .ccfirst {
|
|
margin-top:calc(var(--Captions-Gap) - 2px);
|
|
}
|
|
|
|
/*----- PHOTO POSTS -----*/
|
|
.photopic {
|
|
width:100%;
|
|
cursor:pointer;
|
|
}
|
|
|
|
/*----- PHOTOSETS -----*/
|
|
[photoset-layout] {
|
|
grid-gap:{select:photoset spacing};
|
|
}
|
|
|
|
[photoset-layout] div {
|
|
cursor:pointer;
|
|
backface-visibility:hidden;
|
|
}
|
|
|
|
/*------- LIGHTBOX BS -------*/
|
|
.vignette, #vignette {
|
|
opacity:0;
|
|
}
|
|
|
|
.tmblr-lightbox, #tumblr_lightbox {
|
|
background:rgba({RGBcolor:post background},0.69)!important;
|
|
box-shadow:none!important;
|
|
}
|
|
|
|
.lightbox-image, #tumblr_lightbox_center_image {
|
|
margin-top:calc(-{select:post padding} - 1px)!important;
|
|
padding:{select:post padding}!important;
|
|
background:{color:post background}!important;
|
|
border:1px solid {color:post borders outer}!important;
|
|
box-shadow:none!important;
|
|
border-radius:0px!important;
|
|
}
|
|
|
|
/*----- CHAT POSTS -----*/
|
|
.chatholder:first-child, .commenter + .chatholder {
|
|
margin-top:0.8em;
|
|
}
|
|
|
|
.chatholder {
|
|
padding:0.69em 0.8em;
|
|
border:1px solid {color:post borders inner};
|
|
margin-bottom:-1px;
|
|
}
|
|
|
|
.chatholder:not(:first-child){
|
|
border-top:none;
|
|
}
|
|
|
|
.commenter + .chatholder, .chatholder:only-of-type {
|
|
border-top:1px solid {color:post borders inner};
|
|
}
|
|
|
|
.chat_label {
|
|
margin-right:3px;
|
|
font-family:agrandir bold;
|
|
font-size:calc({select:post font size} - 1px);
|
|
font-weight:bold;
|
|
text-transform:uppercase;
|
|
letter-spacing:.7px;
|
|
}
|
|
|
|
.chat_content {
|
|
}
|
|
|
|
/*----- AUDIO POSTS -----*/
|
|
.tumblr_audio_player[width] {
|
|
width:100%!important;
|
|
height:0!important;
|
|
}
|
|
|
|
.ogre {
|
|
}
|
|
|
|
.audiocont {
|
|
position:absolute;
|
|
display:none;
|
|
overflow:hidden;
|
|
width:0!important;
|
|
height:0!important;
|
|
opacity:0;
|
|
}
|
|
|
|
.is_spotify, .spotify_audio_player, .is_soundcloud {
|
|
width:100%;
|
|
}
|
|
|
|
[grayscale="yes"] iframe[src*="spotify.com"],
|
|
[grayscale="yes"] iframe[src*="soundcloud.com"]{
|
|
filter:var(--Grayscale-Settings);
|
|
-webkit-filter:var(--Grayscale-Settings);
|
|
transition:filter var(--Grayscale-Hover-Speed) ease-in-out;
|
|
}
|
|
|
|
[grayscale="yes"] .postman:hover iframe[src*="spotify.com"],
|
|
[grayscale="yes"] .postman:hover iframe[src*="soundcloud.com"]{
|
|
filter:initial;
|
|
-webkit-filter:initial;
|
|
}
|
|
|
|
.comment > p:first-child + figure[data-npf*="spotify"]{
|
|
overflow:hidden;
|
|
}
|
|
|
|
.comment > p:first-child + figure[data-npf*="spotify"] + * {
|
|
margin-top:var(--Captions-Gap);
|
|
}
|
|
|
|
iframe[src*='open.spotify.com'][src*='track'], figure[data-npf*='open.spotify.com'][data-npf*='track']{
|
|
height:80px!important;
|
|
}
|
|
|
|
.is_soundcloud {
|
|
border-radius:4px;
|
|
overflow:hidden;
|
|
}
|
|
|
|
.niqtamere {
|
|
border:1px solid {color:post borders inner};
|
|
}
|
|
|
|
.alcove {
|
|
position:relative;
|
|
width:var(--Audio-Post-Album-Image-Size);
|
|
height:var(--Audio-Post-Album-Image-Size);
|
|
padding:var(--Captions-Gap);
|
|
|
|
border-right:1px solid {color:post borders inner};
|
|
}
|
|
|
|
.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 {color:post borders inner};
|
|
width:100%;
|
|
height:100%;
|
|
background:{color:post background};
|
|
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:headings};
|
|
}
|
|
|
|
.spause {
|
|
display:none;
|
|
margin-top:2px;
|
|
}
|
|
|
|
.spause i {
|
|
font-size:calc(var(--Audio-Post-PlayButton-Size) - 1px);
|
|
}
|
|
|
|
.a-lbum-img {
|
|
width:var(--Audio-Post-Album-Image-Size);
|
|
height:var(--Audio-Post-Album-Image-Size);
|
|
max-width:initial!important;
|
|
visibility:hidden;
|
|
}
|
|
|
|
.tin {
|
|
width:calc(100% - var(--Audio-Post-Album-Image-Size));
|
|
height:var(--Audio-Post-Album-Image-Size);
|
|
padding:calc(var(--Captions-Gap) - 2px) calc(var(--Captions-Gap) * 1.5);
|
|
box-sizing:border-box;
|
|
}
|
|
|
|
.trackinfo {
|
|
}
|
|
|
|
.t-name, .npf-audio-title {
|
|
font-family:andada pro;
|
|
font-size:calc({select:post font size} - 1px);
|
|
font-weight:bold;
|
|
text-transform:uppercase;
|
|
letter-spacing:.7px;
|
|
}
|
|
|
|
.dongload {
|
|
text-transform:initial!important;
|
|
}
|
|
|
|
.dong {
|
|
width:calc({select:post font size} + 4px);
|
|
height:calc({select:post font size} + 4px);
|
|
-webkit-mask-image:var(--dongload);
|
|
-webkit-mask-repeat:no-repeat;
|
|
-webkit-mask-size:contain;
|
|
background:{color:headings};
|
|
}
|
|
|
|
/*----- VIDEOS -----*/
|
|
video {
|
|
position:relative;
|
|
display:block;
|
|
outline:none;
|
|
cursor:default;
|
|
width:100%;
|
|
}
|
|
|
|
[grayscale="yes"] .postman video {
|
|
filter:var(--Grayscale-Settings);
|
|
transition:filter var(--Grayscale-Hover-Speed) ease-in-out;
|
|
}
|
|
|
|
[grayscale="yes"] .postman:hover video {
|
|
filter:initial;
|
|
-webkit-filter:initial;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
/*--------*/
|
|
|
|
[grayscale="yes"] .tumblr_video_container {
|
|
filter:var(--Grayscale-Settings)!important;
|
|
transition:filter var(--Grayscale-Hover-Speed) ease-in-out!important;
|
|
}
|
|
|
|
[grayscale="yes"] .postman:hover .tumblr_video_container {
|
|
filter:initial!important;
|
|
-webkit-filter:initial!important;
|
|
}
|
|
|
|
.tumblr_video_container {
|
|
width:initial!important;
|
|
height:initial!important;
|
|
}
|
|
|
|
.tumblr_video_iframe {
|
|
width:100%!important;
|
|
}
|
|
|
|
/*----- TAGS -----*/
|
|
.tagcont[tags-opt*='yesclick']{
|
|
{block:IndexPage}
|
|
display:none;
|
|
{/block:IndexPage}
|
|
}
|
|
|
|
.tagcont[tags-opt*='withfade']{
|
|
{block:IndexPage}
|
|
opacity:0;
|
|
{/block:IndexPage}
|
|
}
|
|
|
|
.tagcont {
|
|
padding-bottom:{select:post padding};
|
|
margin:-3px 0;
|
|
}
|
|
|
|
.tagcont, .tagsfade {
|
|
transition:opacity 400ms ease-in-out;
|
|
}
|
|
|
|
.tagsfade {
|
|
opacity:1!important;
|
|
}
|
|
|
|
.tagholder {
|
|
display:flex;
|
|
flex-wrap:wrap;
|
|
justify-content:flex-end;
|
|
text-align:right;
|
|
margin:0 -5px;
|
|
font-family:rubik;
|
|
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;
|
|
padding:{select:permalink padding};
|
|
background:{color:permalink background};
|
|
margin:-{select:post padding};
|
|
margin-top:0;
|
|
margin-bottom:calc(-{select:post padding} - 1.3px);
|
|
min-height:{select:post buttons size};
|
|
text-transform:uppercase;
|
|
font-family:andada pro;
|
|
font-size:calc({select:post font size} - 2.5px);
|
|
letter-spacing:1px;
|
|
line-height:1em;
|
|
}
|
|
|
|
[perma-border="yes"]{
|
|
border-top:1px solid {color:post borders inner};
|
|
}
|
|
|
|
[perma-border="no"]{
|
|
margin-top:calc((-{select:post padding} / 2) + 4px);
|
|
}
|
|
|
|
.permaleft {
|
|
/*flex:1;*/
|
|
}
|
|
|
|
.p_thelink {
|
|
padding:{select:permalink padding} 0;
|
|
margin:-{select:permalink padding} 0;
|
|
}
|
|
|
|
.permarow, .permarow a {
|
|
color:{color:permalink};
|
|
}
|
|
|
|
.viasrc a {
|
|
display:block;
|
|
margin-left:4px;
|
|
letter-spacing:1.3px;
|
|
}
|
|
|
|
.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[tags-opt='default']{
|
|
display:none;
|
|
}
|
|
|
|
.viewtags {
|
|
cursor:help;
|
|
}
|
|
|
|
.hashtag {
|
|
display:block;
|
|
width:{select:post buttons size};
|
|
height:{select:post buttons size};
|
|
-webkit-mask-image:var(--Hashtag);
|
|
-webkit-mask-repeat:no-repeat;
|
|
-webkit-mask-size:contain;
|
|
background:{color:post buttons};
|
|
}
|
|
|
|
.retweet, .heart {
|
|
display:block;
|
|
width:{select:post buttons size};
|
|
height:{select:post buttons size};
|
|
-webkit-mask-repeat:no-repeat;
|
|
-webkit-mask-size:contain;
|
|
background:var(--Post-Buttons-Color);
|
|
}
|
|
|
|
.retweet {
|
|
-webkit-mask-image:var(--Reblog-Icon);
|
|
transform:scaleX(-1);
|
|
}
|
|
|
|
.heart {
|
|
-webkit-mask-image:var(--Heart-Icon);
|
|
}
|
|
|
|
.likecont {
|
|
position:relative;
|
|
cursor:pointer;
|
|
}
|
|
|
|
.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 {
|
|
background-color:{color:like button liked}!important;
|
|
}
|
|
|
|
.viasrc a {
|
|
margin-left:0;
|
|
}
|
|
|
|
/*----- POST NOTES -----*/
|
|
.notescont {
|
|
width:calc({select:post width} + ({select:post padding} * 2) + 2px);
|
|
background:{color:post background};
|
|
padding:{select:post padding} calc({select:post padding} * 1.269);
|
|
border:1px solid {color:post borders outer};
|
|
box-sizing:border-box;
|
|
}
|
|
|
|
.notescont h1 {
|
|
margin-top:4px;
|
|
margin-bottom:calc(var(--Captions-Gap) + 4px);
|
|
font-family:prata;
|
|
text-transform:uppercase;
|
|
font-weight:normal;
|
|
font-size:calc({select:post font size} + 1px);
|
|
letter-spacing:1.3px;
|
|
color:{color:headings};
|
|
text-align:center;
|
|
}
|
|
|
|
ol.notes {
|
|
margin:0;
|
|
list-style:none;
|
|
color:rgba({RGBcolor:text},0.8);
|
|
}
|
|
|
|
ol.notes .avatar {
|
|
display:none;
|
|
}
|
|
|
|
ol.notes li {
|
|
margin-bottom:0.9rem;
|
|
padding:0;
|
|
}
|
|
|
|
ol.notes blockquote {
|
|
margin:1em;
|
|
padding-left:1em;
|
|
border-left:1px solid var(--Blockquote-Border-Color);
|
|
}
|
|
|
|
ol.notes .action a[rel='nofollow'] {
|
|
font-family:vollkorn;
|
|
font-size:calc({select:post font size} - 2px);
|
|
text-transform:uppercase;
|
|
letter-spacing:.7px;
|
|
color:{color:reblogger};
|
|
}
|
|
|
|
.more_notes_link_container {
|
|
margin-top:{select:post padding};
|
|
margin-bottom:calc({select:post padding} * 0.420)!important;
|
|
font-family:vollkorn;
|
|
font-size:calc({select:post font size} - 1px);
|
|
text-transform:uppercase;
|
|
letter-spacing:.7px;
|
|
}
|
|
|
|
.more_notes_link_container a {cursor:help}
|
|
|
|
/*-------------- PAGINATION --------------*/
|
|
.botpagi {
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:space-between;
|
|
width:calc({select:post width} + ({select:post padding} * 2) + 2px);
|
|
line-height:1em;
|
|
}
|
|
|
|
.botpagi a {
|
|
padding:0.69em;
|
|
margin:-0.69em;
|
|
color:{color:pagination}!important;
|
|
}
|
|
|
|
.botpagi span {
|
|
padding:0 4px;
|
|
font-family:andada pro;
|
|
font-size:calc({select:post font size} - 2.5px);
|
|
text-transform:uppercase;
|
|
letter-spacing:.7px;
|
|
}
|
|
|
|
.prev-svg {
|
|
margin-top:-.5px;
|
|
width:calc({select:post font size} + 3px);
|
|
height:calc({select:post font size} + 3px);
|
|
-webkit-mask-image:var(--BackSVG);
|
|
-webkit-mask-repeat:no-repeat;
|
|
-webkit-mask-size:contain;
|
|
background:{color:pagination};
|
|
}
|
|
|
|
.next-svg {
|
|
margin-top:-.5px;
|
|
width:calc({select:post font size} + 3px);
|
|
height:calc({select:post font size} + 3px);
|
|
-webkit-mask-image:var(--NextSVG);
|
|
-webkit-mask-repeat:no-repeat;
|
|
-webkit-mask-size:contain;
|
|
background:{color:pagination};
|
|
}
|
|
|
|
.pn {
|
|
margin-left:auto!important;
|
|
}
|
|
|
|
/*----- CORNER MUSIC PLAYER -----*/
|
|
.swheat {
|
|
position:fixed;
|
|
display:flex;
|
|
align-items:center;
|
|
bottom:0;margin-bottom:var(--MusicPlayer-Edge-Offset);
|
|
left:0;margin-left:var(--MusicPlayer-Edge-Offset);
|
|
z-index:10;
|
|
}
|
|
|
|
.swheat[mp-vis="hide"]{display:none!important}
|
|
|
|
.albatross {
|
|
position:relative;
|
|
width:var(--MusicPlayer-Album-Size);
|
|
height:var(--MusicPlayer-Album-Size);
|
|
overflow:hidden;
|
|
}
|
|
|
|
.albpic {
|
|
width:var(--MusicPlayer-Album-Size);
|
|
height:var(--MusicPlayer-Album-Size);
|
|
border-radius:2px;
|
|
background-repeat:no-repeat;
|
|
background-size:cover;
|
|
background-position:center;
|
|
background-image:url('{image:music player image}');
|
|
}
|
|
|
|
.alfig {
|
|
position:absolute;
|
|
top:0;left:0;
|
|
width:100%;
|
|
height:100%;
|
|
opacity:0;
|
|
z-index:2;
|
|
}
|
|
|
|
.albatross + .blaze {
|
|
margin-left:calc(0px - var(--MusicPlayer-Album-Size));
|
|
width:var(--MusicPlayer-Album-Size);
|
|
height:var(--MusicPlayer-Album-Size);
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
}
|
|
|
|
.blaze {
|
|
position:relative;
|
|
z-index:2;
|
|
cursor:pointer;
|
|
}
|
|
|
|
.jouer {
|
|
position:relative;
|
|
width:var(--MusicPlayer-Buttons-Size);
|
|
height:var(--MusicPlayer-Buttons-Size);
|
|
background:rgba({RGBcolor:music player circle},0.69);
|
|
border-radius:100%;
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
box-sizing:border-box;
|
|
overflow:hidden;
|
|
}
|
|
|
|
.jouer:after {
|
|
content:"";
|
|
position:absolute;
|
|
top:0;left:0;
|
|
width:100%;
|
|
height:100%;
|
|
border-radius:100%;
|
|
border:1px solid rgba({RGBcolor:music player buttons},.420);
|
|
box-sizing:border-box;
|
|
z-index:3;
|
|
}
|
|
|
|
.j-tri, .j-pas {
|
|
-webkit-mask-size:contain;
|
|
-webkit-mask-repeat:no-repeat;
|
|
-webkit-mask-position:center;
|
|
background:{color:music player buttons};
|
|
}
|
|
|
|
.j-tri {
|
|
width:36%;
|
|
height:36%;
|
|
-webkit-mask-image:var(--mp-play);
|
|
margin-left:1.5px;
|
|
}
|
|
|
|
.j-pas {
|
|
display:none;
|
|
width:33%;
|
|
height:33%;
|
|
-webkit-mask-image:var(--mp-pause);
|
|
}
|
|
|
|
.beff {display:none;}
|
|
.aff {display:block;}
|
|
|
|
.albatross + .blaze + .mtxtb {
|
|
margin-left:12px;
|
|
}
|
|
|
|
.blaze + .mtxtb {
|
|
margin-left:10px;
|
|
}
|
|
|
|
.mp-songname {
|
|
font-family:poppins;
|
|
font-size:{select:post font size};
|
|
text-transform:uppercase;
|
|
letter-spacing:1px;
|
|
color:{color:music player text};
|
|
line-height:1em;
|
|
}
|
|
|
|
.mp-songname + .mp-artist {
|
|
margin-top:5px;
|
|
}
|
|
|
|
.mp-artist {
|
|
font-family:vollkorn;
|
|
font-size:calc({select:post font size} - 2px);
|
|
text-transform:uppercase;
|
|
letter-spacing:.5px;
|
|
word-spacing:.3px;
|
|
color:rgba({RGBcolor:music player text},0.8);
|
|
line-height:1em;
|
|
}
|
|
|
|
{CustomCSS}
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="everything">
|
|
|
|
<!-- corner music player | inspired by spotify-->
|
|
<div class="swheat" mp-vis="{select:show music player}">
|
|
<div class="albatross">
|
|
<div class="albpic"></div>
|
|
</div>
|
|
|
|
<div class="blaze">
|
|
<div class="jouer">
|
|
<div class="j-tri"></div>
|
|
<div class="j-pas"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mtxtb">
|
|
<div class="mp-songname">{text:music song name}</div>
|
|
<div class="mp-artist">{text:music song artist}</div>
|
|
</div>
|
|
|
|
<audio id="on9aku" src="{text:music song mp3}"></audio>
|
|
</div>
|
|
|
|
<div class="toplinks">
|
|
{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}
|
|
|
|
{block:ifcustomlink7name}
|
|
<a href="{text:customlink 7 url}">{text:customlink 7 name}</a>
|
|
{/block:ifcustomlink7name}
|
|
|
|
{block:ifcustomlink8name}
|
|
<a href="{text:customlink 8 url}">{text:customlink 8 name}</a>
|
|
{/block:ifcustomlink8name}
|
|
</div><!--end toplinks-->
|
|
|
|
<div class="bigcont">
|
|
<div class="mcwrap">
|
|
|
|
<div class="sighbar">
|
|
<div class="vmid">
|
|
<img class="sb-img" src="{image:sidebar image}">
|
|
|
|
<div class="descwrap">
|
|
<div class="dleft"></div>
|
|
|
|
{block:ifcustomdescription}
|
|
<div class="desc" font="{select:body font}">{text:custom description}</div>
|
|
{/block:ifcustomdescription}
|
|
|
|
{block:ifnotcustomdescription}
|
|
{block:Description}
|
|
<div class="desc" font="{select:body font}">{Description}</div>
|
|
{/block:Description}
|
|
{/block:ifnotcustomdescription}
|
|
|
|
<div class="dright"></div>
|
|
</div><!--descwrap-->
|
|
|
|
<div class="deflinks">
|
|
<div class="lynns">
|
|
<a href="/" title="home">
|
|
<i class="cp cp-home-o"></i>
|
|
</a>
|
|
|
|
<a href="/ask" title="askbox">
|
|
<i class="cp cp-envelope-o"></i>
|
|
</a>
|
|
|
|
<a href="/archive" title="archive">
|
|
<i class="cp cp-calendar-o"></i>
|
|
</a>
|
|
|
|
<a href="//glenthemes.tumblr.com" class="glenny" title="theme by glenthemes">
|
|
<div class="couillon"></div>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="line-fill"></div>
|
|
<div title>{text:sidebar title}</div>
|
|
</div><!--end sidebar links-->
|
|
</div><!--vmid-->
|
|
</div><!--end sidebar-->
|
|
|
|
<div class="postscont" font="{select:body font}" grayscale="{select:grayscale photos}">
|
|
|
|
{block:Posts inlineMediaWidth="1280" inlineNestedMediaWidth="1280"}
|
|
|
|
<div class="postman">
|
|
|
|
{block:Date}
|
|
<a class="postside" href="{Permalink}">
|
|
<div p-type="{PostType}"></div>
|
|
<div wkday>{ShortDayOfWeek}</div>
|
|
<div time>{24HourWithZero}<span c>:</span>{Minutes}</div>
|
|
<div lane></div>
|
|
<div full-d>{Year} / {MonthNumberWithZero} / {DayOfMonthWithZero}</div>
|
|
</a>
|
|
{/block:Date}
|
|
|
|
<div class="posts" reblog-borders="{select:reblog separators}" id="{PostID}" post-type="{PostType}" {block:PermalinkPage}on-permapage{/block:PermalinkPage}>
|
|
|
|
<div class="postinner">
|
|
|
|
<!------ POST TITLE ------>
|
|
{block:Title}
|
|
<h1 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}original{/block:NotReblog}>
|
|
{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="pq">
|
|
<div class="quote-words">{Quote}</div>
|
|
{block:Source}<div class="quote-source comment">— {Source}</div>{/block:Source}
|
|
</div>
|
|
{/block:Quote}
|
|
<!------ END QUOTE POSTS ------>
|
|
|
|
|
|
<!------ LINK POSTS ------>
|
|
{block:Link}
|
|
<div class="bogcheese">
|
|
<a href="{URL}" class="linkcont" {Target} title="{URL}">
|
|
<div class="sitename">{Name}</div>
|
|
<div class="bloom">
|
|
<div class="fingergun"></div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="link-excerpt">
|
|
{block:Excerpt}{Excerpt}{/block:Excerpt}
|
|
</div>
|
|
|
|
{block:Description}
|
|
<div class="link-description" {block:NotReblog}original{/block:NotReblog}>
|
|
{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}
|
|
{block:Lines}
|
|
<div class="chatholder">
|
|
{block:Label}
|
|
<span class="chat_label">{Label}</span>
|
|
{/block:Label}
|
|
|
|
<span class="chat_content">{Line}</span>
|
|
|
|
</div>
|
|
{/block:Lines}
|
|
{/block:Chat}
|
|
<!------ END CHAT ------>
|
|
|
|
|
|
|
|
<!------ AUDIO POSTS ------>
|
|
{block:Audio}
|
|
<div class="flex ogre">
|
|
<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">
|
|
<div class="dong"></div>
|
|
</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 as">
|
|
<div class="askcont">
|
|
<div class="askimgcont">
|
|
<img class="askimg" src="{AskerPortraitURL-48}">
|
|
</div>
|
|
|
|
<div class="askright">
|
|
<div class="asker commenter">
|
|
<span>{Asker} <b>asked:</b></span>
|
|
</div>
|
|
|
|
<div class="question_text">{Question}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{block:Answerer}
|
|
<div class="comment_container anscont">
|
|
<div class="answerer commenter">
|
|
<img src="{AnswererPortraitURL-48}"/>
|
|
{Answerer}<a class="response">answered:</a>
|
|
</div>
|
|
<div class="answer_text comment">{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} answered:</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}original{/block:NotReblog}>
|
|
{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:HomePage}
|
|
{block:PinnedPostLabel}
|
|
<p class="pi-n">
|
|
<span class="pinny"></span>
|
|
<span>{PinnedPostLabel}</span>
|
|
</p>
|
|
{/block:PinnedPostLabel}
|
|
{/block:HomePage}
|
|
|
|
</div><!--postinner-->
|
|
|
|
|
|
{block:HasTags}
|
|
<div class="tagcont" tags-opt="{select:tags}">
|
|
<div class="tagholder">
|
|
{block:Tags}
|
|
<a href="{TagURL}" init-tags>#{Tag}</a>
|
|
{/block:Tags}
|
|
</div>
|
|
</div>
|
|
{/block:HasTags}
|
|
|
|
|
|
|
|
{block:Date}
|
|
<div class="permarow" perma-border="{select:permalink border}">
|
|
<div class="permaleft">
|
|
{block:IndexPage}
|
|
<a href="{Permalink}" class="flex p_thelink">
|
|
{NoteCountWithLabel}
|
|
</a>
|
|
{/block:IndexPage}
|
|
|
|
{block:PermalinkPage}
|
|
{block:NotReblog}Posted{/block:NotReblog}
|
|
{block:RebloggedFrom}Reblogged{/block:RebloggedFrom}
|
|
on {Month} {DayOfMonth}{DayOfMonthSuffix}, {Year}
|
|
 {TimeAgo}
|
|
{/block:PermalinkPage}
|
|
</div>
|
|
|
|
<div class="permaright">
|
|
{block:IndexPage}
|
|
<div class="les-controls flex">
|
|
|
|
{block:HasTags}
|
|
<a class="viewtags" tags-opt="{select:tags}">
|
|
<span class="hashtag"></span>
|
|
</a>
|
|
{/block:HasTags}
|
|
|
|
<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}
|
|
<div class="viasrc flex">
|
|
<a href="{ReblogParentURL}" title="{ReblogParentName}">via</a>
|
|
<a href="{ReblogRootURL}" title="{ReblogRootName}">source</a>
|
|
</div><!--viasrc-->
|
|
{/block:RebloggedFrom}
|
|
{/block:PermalinkPage}
|
|
</div>
|
|
</div><!--permarow-->
|
|
{/block:Date}
|
|
|
|
</div><!--posts-->
|
|
</div><!--postman-->
|
|
|
|
{block:PostNotes}
|
|
<div class="notescont">
|
|
<h1>{NoteCountWithLabel}</h1>
|
|
{PostNotes}
|
|
</div>
|
|
{/block:PostNotes}
|
|
{/block:Posts}
|
|
|
|
<!------- PAGINATION ------->
|
|
{block:Pagination}
|
|
<div class="botpagi">
|
|
{block:PreviousPage}
|
|
<a class="flex" href="{PreviousPage}">
|
|
<div class="prev-svg"></div>
|
|
<span>previous page</span>
|
|
</a>
|
|
{/block:PreviousPage}
|
|
|
|
{block:NextPage}
|
|
<a class="flex pn" href="{NextPage}">
|
|
<span>next page</span>
|
|
<div class="next-svg"></div>
|
|
</a>
|
|
{/block:NextPage}
|
|
</div>
|
|
{/block:Pagination}
|
|
|
|
</div><!--postscont-->
|
|
</div><!--mcwrap-->
|
|
</div><!--bigcont-->
|
|
</div><!--everything-->
|
|
|
|
<script src="//static.tumblr.com/0podkko/jfMplm3f8/modified_photosets.js"></script>
|
|
|
|
</body>
|
|
</html> |