₊⁺✿˚

This commit is contained in:
HT 2023-07-28 04:00:21 +01:00
parent 540dbe046b
commit ae63d22657
1 changed files with 272 additions and 112 deletions

View File

@ -4,7 +4,11 @@ Made by glenthemes
Initial release: 2015/08/29
Remake date: 2019/02/05
Last updated: 2023/05/06
Last updated: 2023/07/27
What's new:
✱ NPF audio post support
✱ improved NPF post types detection
TERMS OF USE:
1) Do not remove the theme credit.
@ -81,7 +85,7 @@ $(document).ready(function(){
$('.photo-slideshow').pxuPhotoset({
lightbox: true,
rounded: false,
gutter: '{text:photoset gutter width}px',
gutter: '{select:photos spacing}',
borderRadius: '0px',
photoset: '.photo-slideshow',
photoWrap: '.photo-data',
@ -135,10 +139,10 @@ if (june.length > kar) {
<style tmblr-npf>
:root {
--NPF-Caption-Spacing:1em;
--NPF-Image-Spacing:{text:photoset gutter width}px;
--NPF-Image-Spacing:{select:photos spacing};
--Sidebar-Image-Width:{text:sidebar image width}px;
--Sidebar-Width:{text:sidebar total width}px;
--Sidebar-Image-Width:{select:sidebar image width};
--Sidebar-Width:{select:sidebar total width};
}
a.post_media_photo_anchor, a.post_media_photo_anchor:hover {
@ -180,16 +184,16 @@ $(document).ready(function(){
<!-- unblue polls -->
<!-- glenthemes.tumblr.com/post/708014819571302400 -->
<link href="//static.tumblr.com/gtjt4bo/mXBrpdj0n/unblue-polls.css" rel="stylesheet">
<style>
<style unblue-polls>
.poll-post {
--Poll-Question-Font-Size: {text:font size}px;
--Poll-Question-Font-Size: {select:font size};
--Poll-Option-Background-Color: {color:post};
--Poll-Option-Corner-Rounding: 0px;
--Poll-Option-Border-Size: 1px;
--Poll-Option-Border-Color: {color:post borders};
--Poll-Option-Padding: 8px;
--Poll-Option-Font-Size: {text:font size}px;
--Poll-Option-Font-Size: {select:font size};
--Poll-Option-Spacing: 10px;
--Poll-Option-Text-Color: {color:text};
@ -208,8 +212,76 @@ $(document).ready(function(){
}
</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: "Track:",
artistLabel: "Artist:",
albumLabel: "Album:"
});
</script>
<style edit-npf-audio-player>
.npf-audio-wrapper {
--NPF-Audio-Buttons-Size: {select:font size};
--NPF-Audio-Buttons-Color: {color:post};
--NPF-Audio-Buttons-Padding: 10px;
--NPF-Audio-Buttons-Spacing: calc((var(--NPF-Audio-Buttons-Padding) * 2) + 14px);
--NPF-Audio-Image-Spacing: 0.9rem;
}
.npf-audio-background {
margin-left:calc(15px + var(--NPF-Audio-Buttons-Padding));
}
.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 box shadow};
border-radius:100%;
z-index:-1;
}
.npf-audio-play svg { margin-left:1px; }
.npf-audio-pause svg { margin-left:0; }
.npf-audio-title-label,
.npf-audio-artist-label,
.npf-audio-album-label {
color:{color:bold};
text-transform:uppercase;
}
figcaption.audio-caption,
figcaption.audio-caption ~ audio[controls],
figcaption.audio-caption img, .npf-audio-image {
display:none;
}
</style>
<script src="//glen-npf.gitlab.io/other/neue.js"></script>
<link href="//glen-npf.gitlab.io/other/neue.css" rel="stylesheet">
<!--------------------IMAGES-------------------->
<meta name="image:background image" content="//static.tumblr.com/d40eae727a79de74c5b3c4cb5c8e9fd5/2pnwama/mW8pmgswh/tumblr_static_2ddnvvrhh78k4ogc880kokg8c.png"/>
<meta name="image:sidebar image" content="//static.tumblr.com/2ea4a1fad481c84fc2ea8d9ef2ac743d/2pnwama/m4Lpmgsh7/tumblr_static_8mbbntkkf7k00swwcgccososw.gif"/>
<meta name="image:corner image" content="//static.tumblr.com/fd8db8d5cb0f9311af276d4fb6b9fff9/2pnwama/uB6pmgsol/tumblr_static_6rad1tctxs84w4w48444ookws.gif"/>
<!--------------------COLORS-------------------->
<meta name="color:background" content="#fefefe"/>
@ -262,31 +334,133 @@ $(document).ready(function(){
<meta name="color:highlight" content="#fff"/>
<meta name="color:highlighted text" content="#f8a096"/>
<!--------------------OPTIONS-------------------->
<meta name="select:description text align" title="center" content="center"/>
<meta name="select:description text align" title="left" content="left"/>
<meta name="select:description text align" title="justify" content="justify"/>
<meta name="select:description text align" title="right" content="right"/>
<!-----------------DROPDOWN OPTS----------------->
<meta name="select:body font family" title="Muli" content="Muli"/>
<meta name="select:body font family" title="Karla" content="Karla"/>
<meta name="select:body font family" title="Lato" content="Lato"/>
<meta name="select:body font family" title="Open Sans" content="Open Sans"/>
<meta name="select:body font family" title="Quicksand" content="Quicksand"/>
<meta name="select:font size" title="12px" content="12px">
<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:font size" title="16px" content="16px">
<meta name="select:post width" title="400px" content="400px">
<meta name="select:post width" title="300px" content="300px">
<meta name="select:post width" title="350px" content="375px">
<meta name="select:post width" title="450px" content="450px">
<meta name="select:post width" title="500px" content="500px">
<meta name="select:post width" title="540px" content="540px">
<meta name="select:post width" title="600px" content="600px">
<meta name="select:post padding" title="25px" content="25px">
<meta name="select:post padding" title="10px" content="10px">
<meta name="select:post padding" title="15px" content="15px">
<meta name="select:post padding" title="20px" content="20px">
<meta name="select:post padding" title="30px" content="30px">
<meta name="select:photos spacing" title="10px" content="10px">
<meta name="select:photos spacing" title="0px" content="0px">
<meta name="select:photos spacing" title="2px" content="2px">
<meta name="select:photos spacing" title="4px" content="4px">
<meta name="select:photos spacing" title="6px" content="6px">
<meta name="select:photos spacing" title="8px" content="8px">
<meta name="select:permalink padding" title="10px" content="10px">
<meta name="select:permalink padding" title="15px" content="15px">
<meta name="select:permalink padding" title="20px" content="20px">
<meta name="select:permalink padding" title="25px" content="25px">
<meta name="select:permalink padding" title="30px" content="30px">
<meta name="select:post spacing" title="45px" content="45px">
<meta name="select:post spacing" title="20px" content="20px">
<meta name="select:post spacing" title="25px" content="25px">
<meta name="select:post spacing" title="30px" content="30px">
<meta name="select:post spacing" title="35px" content="35px">
<meta name="select:post spacing" title="40px" content="40px">
<meta name="select:post spacing" title="50px" content="50px">
<meta name="select:post spacing" title="55px" content="55px">
<meta name="select:post spacing" title="60px" content="60px">
<meta name="select:side gaps" title="80px" content="80px">
<meta name="select:side gaps" title="30px" content="30px">
<meta name="select:side gaps" title="40px" content="40px">
<meta name="select:side gaps" title="50px" content="50px">
<meta name="select:side gaps" title="60px" content="60px">
<meta name="select:side gaps" title="70px" content="70px">
<meta name="select:side gaps" title="90px" content="90px">
<meta name="select:side gaps" title="100px" content="100px">
<meta name="select:side gaps" title="110px" content="110px">
<meta name="select:side gaps" title="120px" content="120px">
<meta name="select:side gaps" title="130px" content="130px">
<meta name="select:top gap" title="60px" content="60px">
<meta name="select:top gap" title="30px" content="30px">
<meta name="select:top gap" title="40px" content="40px">
<meta name="select:top gap" title="50px" content="50px">
<meta name="select:top gap" title="80px" content="80px">
<meta name="select:top gap" title="70px" content="70px">
<meta name="select:top gap" title="90px" content="90px">
<meta name="select:top gap" title="100px" content="100px">
<meta name="select:description text align" title="center" content="center"/>
<meta name="select:description text align" title="left" content="left"/>
<meta name="select:description text align" title="justify" content="justify"/>
<meta name="select:description text align" title="right" content="right"/>
<meta name="select:sidebar image width" title="100px" content="100px">
<meta name="select:sidebar image width" title="75px" content="75px">
<meta name="select:sidebar image width" title="125px" content="125px">
<meta name="select:sidebar image width" title="150px" content="150px">
<meta name="select:sidebar image width" title="175px" content="175px">
<meta name="select:sidebar image width" title="200px" content="200px">
<meta name="select:sidebar total width" title="225px" content="225px">
<meta name="select:sidebar total width" title="175px" content="175px">
<meta name="select:sidebar total width" title="200px" content="200px">
<meta name="select:sidebar total width" title="250px" content="250px">
<meta name="select:sidebar total width" title="275px" content="275px">
<meta name="select:sidebar total width" title="300px" content="300px">
<meta name="select:sidebar total width" title="325px" content="325px">
<meta name="select:sidebar total width" title="350px" content="350px">
<meta name="select:sidebar total width" title="375px" content="375px">
<meta name="select:sidebar total width" title="400px" content="400px">
<meta name="select:sidebar total width" title="425px" content="425px">
<meta name="select:sidebar total width" title="450px" content="450px">
<meta name="select:corner image width" title="120px" content="120px">
<meta name="select:corner image width" title="80px" content="80px">
<meta name="select:corner image width" title="160px" content="160px">
<meta name="select:corner image width" title="200px" content="200px">
<meta name="select:corner image width" title="240px" content="240px">
<meta name="select:corner image width" title="280px" content="280px">
<meta name="select:corner image width" title="320px" content="320px">
<meta name="select:corner image width" title="360px" content="360px">
<meta name="select:corner image from bottom" title="60px" content="60px">
<meta name="select:corner image from bottom" title="0px" content="0px">
<meta name="select:corner image from bottom" title="20px" content="20px">
<meta name="select:corner image from bottom" title="40px" content="40px">
<meta name="select:corner image from bottom" title="80px" content="80px">
<meta name="select:corner image from bottom" title="100px" content="100px">
<!-----------------TOGGLE OPTS----------------->
<meta name="if:photo fade" content="0" />
<meta name="if:monochrome posts" content="0" />
<meta name="if:hide music player" content="0" />
<meta name="if:dark tumblr controls" content="0" />
<!--------------------IMAGES-------------------->
<meta name="image:background image" content="//static.tumblr.com/d40eae727a79de74c5b3c4cb5c8e9fd5/2pnwama/mW8pmgswh/tumblr_static_2ddnvvrhh78k4ogc880kokg8c.png"/>
<meta name="image:sidebar image" content="//static.tumblr.com/2ea4a1fad481c84fc2ea8d9ef2ac743d/2pnwama/m4Lpmgsh7/tumblr_static_8mbbntkkf7k00swwcgccososw.gif"/>
<meta name="image:corner image" content="//static.tumblr.com/fd8db8d5cb0f9311af276d4fb6b9fff9/2pnwama/uB6pmgsol/tumblr_static_6rad1tctxs84w4w48444ookws.gif"/>
<!--------------------TITLES-------------------->
<meta name="text:top gap" content="60">
<meta name="text:how to link music" content="linktr.ee/direct_file_links">
<meta name="text:music name" content="Peaceful Sleep">
<meta name="text:music file URL" content="https://rhizo.gitlab.io/nier/Peaceful_Sleep__Music_Box_.mp3">
<meta name="text:description title" content="C:\ welcome!">
<meta name="text:Link 1" content="Sample link 1">
<meta name="text:Link 1 URL" content="/">
@ -300,22 +474,6 @@ $(document).ready(function(){
<meta name="text:Link 5 URL" content="">
<meta name="text:Link 6" content="">
<meta name="text:Link 6 URL" content="">
<meta name="text:how to link music" content="linktr.ee/direct_file_links">
<meta name="text:music name" content="Peaceful Sleep">
<meta name="text:music file URL" content="https://rhizo.gitlab.io/nier/Peaceful_Sleep__Music_Box_.mp3">
<meta name="text:side margins" content="80">
<meta name="text:sidebar image width" content="100">
<meta name="text:sidebar total width" content="225">
<meta name="text:font size" content="12">
<meta name="text:post width" content="400">
<meta name="text:post padding" content="25">
<meta name="text:permalink padding" content="10">
<meta name="text:photoset gutter width" content="10">
<meta name="text:post margin" content="45">
<meta name="text:corner image width" content="120">
<meta name="text:corner image from bottom" content="60">
<!-------------------------------------------------------------------->
@ -341,7 +499,7 @@ $(document).ready(function(){
font-size:9px;
letter-spacing:-1px;
color: {color:text};
max-width: calc({text:post width}px * 1.25);
max-width: calc({select:post width} * 1.25);
}
/*--------------------TUMBLR CONTROLS--------------------*/
@ -405,7 +563,7 @@ color:{color:text};
cursor:normal;
font-family:{select:body font family};
line-height:1.6em;
font-size:{text:font size}px;
font-size:{select:font size};
text-align:left;
overflow-x:hidden;
}
@ -443,7 +601,7 @@ hr {
background-color:rgba({RGBcolor:text},0.3);
}
p.npf_quirky, p.npf_quote {font-size:calc({text:font size}px + 5px);line-height:1em;}
p.npf_quirky, p.npf_quote {font-size:calc({select:font size} + 5px);line-height:1em;}
/*--------------------LINKS--------------------*/
a {
@ -461,7 +619,7 @@ a:hover {text-decoration:none;}
img {opacity:1;text-decoration:none;}
h1 {
font-size:calc({text:font size}px + 1px);
font-size:calc({select:font size} + 1px);
font-family:quicksand regular;
text-transform: uppercase;
letter-spacing: 2px;
@ -478,22 +636,22 @@ h1:first-child {margin-top:0px}
#container {
position:absolute;
margin:0 auto;
margin-top:{text:top gap}px;
margin-bottom:{text:top gap}px;
margin-top:{select:top gap};
margin-bottom:{select:top gap};
top:0;left:0;right:0;
width:calc(var(--Sidebar-Width) + {text:side margins}px + {text:post width}px + ({text:post padding}px * 2) + (({text:post width}px + ({text:post padding}px * 2)) * 0.025) + {text:side margins}px + {text:corner image width}px);
width:calc(var(--Sidebar-Width) + {select:side gaps} + {select:post width} + ({select:post padding} * 2) + (({select:post width} + ({select:post padding} * 2)) * 0.025) + {select:side gaps} + {select:corner image width});
}
#nudge {
margin-left:calc(var(--Sidebar-Width) + {text:side margins}px);
margin-left:calc(var(--Sidebar-Width) + {select:side gaps});
}
#c0rner {
position:fixed;
margin-left:calc((var(--Sidebar-Width) + {text:side margins}px + {text:post width}px + ({text:post padding}px * 2) + (({text:post width}px + ({text:post padding}px * 2)) * 0.025)) + {text:side margins}px);
bottom:0;margin-bottom:{text:corner image from bottom}px;
width:{text:corner image width}px;
margin-left:calc((var(--Sidebar-Width) + {select:side gaps} + {select:post width} + ({select:post padding} * 2) + (({select:post width} + ({select:post padding} * 2)) * 0.025)) + {select:side gaps});
bottom:0;margin-bottom:{select:corner image from bottom};
width:{select:corner image width};
height:auto;
}
@ -821,18 +979,18 @@ h1:first-child {margin-top:0px}
.pcontent {
margin-top:0px;
padding-top:{text:post padding}px;
padding-top:{select:post padding};
}
.posts {
overflow:hidden;
margin-bottom:{text:post margin}px;
width:{text:post width}px;
margin-bottom:{select:post spacing};
width:{select:post width};
min-width:210px;
padding:{text:post padding}px;
padding:{select:post padding};
background-color:{color:post};
border:1px solid {color:post borders};
box-shadow:calc(({text:post width}px + ({text:post padding}px * 2)) * 0.025) calc(({text:post width}px + ({text:post padding}px * 2)) * 0.025) {color:post box shadow};
box-shadow:calc(({select:post width} + ({select:post padding} * 2)) * 0.025) calc(({select:post width} + ({select:post padding} * 2)) * 0.025) {color:post box shadow};
}
.posts:last-of-type {margin-bottom:0px;}
@ -856,7 +1014,7 @@ a.post_media_photo_anchor {
.photos, .photos img {
position:relative;
overflow:hidden;
width:{text:post width}px;
width:{select:post width};
{block:IndexPage}
{block:ifphotofade}
@ -913,15 +1071,15 @@ a.post_media_photo_anchor {
/*--------------------PERMALINK--------------------*/
.permawrap {
margin-top:{text:post padding}px;
margin-left:-{text:post padding}px;
margin-bottom:-{text:post padding}px;
width:calc({text:post width}px + ({text:post padding}px * 2));
margin-top:{select:post padding};
margin-left:-{select:post padding};
margin-bottom:-{select:post padding};
width:calc({select:post width} + ({select:post padding} * 2));
border-top:1px solid {color:post borders};
}
.poof{
padding:{text:permalink padding}px;
padding:{select:permalink padding};
overflow:auto;
}
@ -1015,21 +1173,21 @@ a.post_media_photo_anchor {
/*--------------------POST NOTES--------------------*/
ol.notes {
margin-top:-2px;
margin-bottom:{text:post margin}px;
width:{text:post width}px;
padding:{text:post padding}px;
margin-bottom:{select:post spacing};
width:{select:post width};
padding:{select:post padding};
background:{color:post};
border:1px solid {color:post borders};
list-style-type:none;
box-shadow:calc(({text:post width}px + ({text:post padding}px * 2)) * 0.025) calc(({text:post width}px + ({text:post padding}px * 2)) * 0.025) {color:post box shadow};
box-shadow:calc(({select:post width} + ({select:post padding} * 2)) * 0.025) calc(({select:post width} + ({select:post padding} * 2)) * 0.025) {color:post box shadow};
}
.heyho {
width:calc(({text:post width}px + ({text:post padding}px * 2)) - ({text:permalink padding}px * 2));
padding:{text:permalink padding}px;
width:calc(({select:post width} + ({select:post padding} * 2)) - ({select:permalink padding} * 2));
padding:{select:permalink padding};
background:{color:post};
border:1px solid {color:post borders};
box-shadow:calc(({text:post width}px + ({text:post padding}px * 2)) * 0.025) calc(({text:post width}px + ({text:post padding}px * 2)) * 0.025) {color:post box shadow};
box-shadow:calc(({select:post width} + ({select:post padding} * 2)) * 0.025) calc(({select:post width} + ({select:post padding} * 2)) * 0.025) {color:post box shadow};
}
ol.notes li.note {
@ -1069,7 +1227,8 @@ text-decoration:none;
box-shadow:none !important;
border-radius:0px !important;
max-width:none;
padding:{text:post padding}px !important;
margin-top:-{select:post padding}!important;
padding:{select:post padding} !important;
background:{color:post} !important;
border:1px solid {color:post borders} !important;
}
@ -1090,7 +1249,7 @@ text-decoration:none;
}
.glae {
width:calc((({text:post width}px + ({text:post padding}px * 2)) - 38px) / 2);
width:calc((({select:post width} + ({select:post padding} * 2)) - 38px) / 2);
height:1px;
background:{color:post borders};
}
@ -1098,19 +1257,19 @@ text-decoration:none;
.glae.g1 {
float:left;
margin-top:calc(-20px);
margin-left:calc(-{text:post padding}px);
margin-left:calc(-{select:post padding});
}
.glae.g2 {
float:right;
margin-top:calc(-20px);
margin-right:calc(-{text:post padding}px);
margin-right:calc(-{select:post padding});
}
.quote {
margin-top:{text:post padding}px;
margin-top:{select:post padding};
font-family:domine;letter-spacing:0.5px;
font-size:{text:font size}px;
font-size:{select:font size};
font-style:italic;
line-height:2em;
text-align:center;
@ -1151,7 +1310,7 @@ text-transform:uppercase;
font-weight:bold;
}
p.npf_chat { font-family:Courier; font-size:{text:font size}px; }
p.npf_chat { font-family:Courier; font-size:{select:font size}; }
/*---------------------------ASKS---------------------------*/
.q-wrap {
@ -1211,7 +1370,7 @@ height:0px;
/*---------------------------VIDEO---------------------------*/
.tumblr_video_container {
width:{text:post width}px!important;
width:{select:post width}!important;
min-width:210px!important;
height:auto!important;
max-height:540px!important;
@ -1247,12 +1406,12 @@ video {
/*------------------------BOT PAGI------------------------*/
.botpagi {
margin-bottom:{text:post margin}px;
width:calc(({text:post width}px + ({text:post padding}px * 2)) - ({text:permalink padding}px * 2));
margin-bottom:{select:post spacing};
width:calc(({select:post width} + ({select:post padding} * 2)) - ({select:permalink padding} * 2));
background:{color:post};
padding:{text:permalink padding}px;
padding:{select:permalink padding};
border:1px solid {color:post borders};
box-shadow:calc(({text:post width}px + ({text:post padding}px * 2)) * 0.025) calc(({text:post width}px + ({text:post padding}px * 2)) * 0.025) {color:post box shadow};
box-shadow:calc(({select:post width} + ({select:post padding} * 2)) * 0.025) calc(({select:post width} + ({select:post padding} * 2)) * 0.025) {color:post box shadow};
text-align:center;
}
@ -1467,43 +1626,44 @@ video {
<div class="velvet">
{block:Date}
<a class="titboy non" href="{Permalink}">
{block:Text}
{PostType} &mdash; {Timestamp}
{/block:Text}
{block:Photo}
image &mdash; {Timestamp}
{/block:Photo}
{block:Photoset}
photoset &mdash; {Timestamp}
{/block:Photoset}
{block:Quote}
{PostType} &mdash; {Timestamp}
{/block:Quote}
{block:Link}
{PostType} &mdash; {Timestamp}
{/block:Link}
{block:Chat}
{PostType} &mdash; {Timestamp}
{/block:Chat}
{block:Audio}
{PostType} &mdash; {Timestamp}
{/block:Audio}
{block:Video}
{PostType} &mdash; {Timestamp}
{/block:Video}
{block:Answer}
{PostType} &mdash; {Timestamp}
{/block:Answer}
{block:Text}
<span class="post-type-display">{PostType}</span> &mdash; {Timestamp}
{/block:Text}
{block:Photo}
image &mdash; {Timestamp}
{/block:Photo}
{block:Photoset}
photoset &mdash; {Timestamp}
{/block:Photoset}
{block:Quote}
{PostType} &mdash; {Timestamp}
{/block:Quote}
{block:Link}
{PostType} &mdash; {Timestamp}
{/block:Link}
{block:Chat}
{PostType} &mdash; {Timestamp}
{/block:Chat}
{block:Audio}
{PostType} &mdash; {Timestamp}
{/block:Audio}
{block:Video}
{PostType} &mdash; {Timestamp}
{/block:Video}
{block:Answer}
{PostType} &mdash; {Timestamp}
{/block:Answer}
</a>
{/block:Date}
<div class="niceboy">
<div class="smallbox p-min">