From 551784b466106f1763bb53f7c7d6e78015a336d0 Mon Sep 17 00:00:00 2001
From: HT <glenthemes.exe@gmail.com>
Date: Sat, 29 Jul 2023 00:49:05 +0100
Subject: [PATCH] =?UTF-8?q?=E2=82=8A=E2=81=BA=E2=9C=BF=CB=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 16-Blue-Moon-BLACK | 274 +++++++++++++++++++++++++++++++++------------
 1 file changed, 205 insertions(+), 69 deletions(-)

diff --git a/16-Blue-Moon-BLACK b/16-Blue-Moon-BLACK
index 5162ee1..2a93551 100644
--- a/16-Blue-Moon-BLACK
+++ b/16-Blue-Moon-BLACK
@@ -6,7 +6,10 @@ Blue version:  pastebin.com/tsqprL8v
 
 Initial release: 2015/12/23
 Major code update: 2018/05/25
-Last updated: 2023/05/06
+Last updated: 2023/07/28
+
+What's new:
+✱ NPF audio post support
 
 TERMS OF USE:
 1) Do not remove the theme credit.
@@ -59,7 +62,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',
@@ -97,7 +100,7 @@ $(document).ready(function(){
 <style tmblr-npf>
 :root {
     --NPF-Caption-Spacing:1em;
-    --NPF-Image-Spacing:{text:photoset gutter width}px;
+    --NPF-Image-Spacing:{select:photos spacing};
 }
  
 a.post_media_photo_anchor, a.post_media_photo_anchor:hover {
@@ -124,16 +127,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: transparent;
     --Poll-Option-Corner-Rounding: 4px;
     --Poll-Option-Border-Size: 1px;
     --Poll-Option-Border-Color: rgba({RGBcolor:text},0.25);
     --Poll-Option-Padding: 10px;
-    --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};
  
@@ -152,8 +155,75 @@ $(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:bold};
+    --NPF-Audio-Buttons-Padding: 10px;
+    --NPF-Audio-Buttons-Spacing: calc((var(--NPF-Audio-Buttons-Padding) * 2) + 10px);
+    --NPF-Audio-Image-Spacing: 0.9rem;
+}
+ 
+.npf-audio-background {
+    margin-left:calc(18px + 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:rgba({RGBcolor:bold},0.2);
+    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/c0a4e7cc4f5c2882a7779a37b63132bf/2pnwama/q63p92nj4/tumblr_static_ai4gisbrduoksss8sokkk0kww.png"/>
+<meta name="image:sidebar image" content="//static.tumblr.com/c38fa56037a6145b7b7a54ea4d343418/gtjt4bo/mTyp9a43i/tumblr_static_9xczv23qs7k8ok88cwwcc8ggs.png"/>
  
 <!--------------------COLORS-------------------->
 <meta name="color:background" content="#f7f7f7"/>
@@ -205,8 +275,83 @@ $(document).ready(function(){
  
 <meta name="color:highlight" content="#f3f3f3"/>
 <meta name="color:highlighted text" content="#888"/>
+
+<!-----------------DROPDOWN OPTS----------------->
+<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:sidebar width" title="500px" content="500px">
+<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="375px">
+<meta name="select:sidebar width" title="400px" content="400px">
+<meta name="select:sidebar width" title="450px" content="450px">
+<meta name="select:sidebar width" title="540px" content="540px">
+<meta name="select:sidebar width" title="600px" content="600px">
+
+<meta name="select:desc transparency" title="30%" content="0.7">
+<meta name="select:desc transparency" title="0% (solid color)" content="1">
+<meta name="select:desc transparency" title="10%" content="0.9">
+<meta name="select:desc transparency" title="20%" content="0.8">
+<meta name="select:desc transparency" title="40%" content="0.6">
+<meta name="select:desc transparency" title="50%" content="0.5">
+<meta name="select:desc transparency" title="60%" content="0.4">
+<meta name="select:desc transparency" title="70%" content="0.3">
+<meta name="select:desc transparency" title="80%" content="0.2">
+<meta name="select:desc transparency" title="90%" content="0.1">
+<meta name="select:desc transparency" title="100% (no color)" content="0">
+
+<meta name="select:center gap" title="40px" content="40px">
+<meta name="select:center gap" title="25px" content="25px">
+<meta name="select:center gap" title="30px" content="30px">
+<meta name="select:center gap" title="35px" content="35px">
+<meta name="select:center gap" title="45px" content="45px">
+<meta name="select:center gap" title="50px" content="50px">
+<meta name="select:center gap" title="55px" content="55px">
+<meta name="select:center gap" title="60px" content="60px">
+<meta name="select:center gap" title="65px" content="65px">
+<meta name="select:center gap" title="70px" content="70px">
+<meta name="select:center gap" title="75px" content="75px">
+<meta name="select:center gap" title="80px" content="80px">
+<meta name="select:center gap" title="85px" content="85px">
+
+<meta name="select:post width" title="500px" content="500px">
+<meta name="select:post width" title="300px" content="300px">
+<meta name="select:post width" title="350px" content="375px">
+<meta name="select:post width" title="400px" content="400px">
+<meta name="select:post width" title="450px" content="450px">
+<meta name="select:post width" title="540px" content="540px">
+<meta name="select:post width" title="600px" content="600px">
+
+<meta name="select:post padding" title="20px" content="20px">
+<meta name="select:post padding" title="5px" content="5px">
+<meta name="select:post padding" title="10px" content="10px">
+<meta name="select:post padding" title="15px" content="15px">
+<meta name="select:post padding" title="25px" content="25px">
+<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:post spacing" title="40px" content="40px">
+<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="45px" content="45px">
+<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">
  
-<!--------------------OPTIONS-------------------->
+<!--------------------TOGGLES-------------------->
 <meta name="if:show music player" content="1" />
 
 <meta name="if:photo fade" content="0" />
@@ -216,24 +361,14 @@ $(document).ready(function(){
 <meta name="if:smooth scrolling" content="0" />
 <meta name="if:dark tumblr controls" content="0" />
  
-<!--------------------IMAGES-------------------->
-<meta name="image:background image" content="//static.tumblr.com/c0a4e7cc4f5c2882a7779a37b63132bf/2pnwama/q63p92nj4/tumblr_static_ai4gisbrduoksss8sokkk0kww.png"/>
-<meta name="image:sidebar image" content="//static.tumblr.com/c38fa56037a6145b7b7a54ea4d343418/gtjt4bo/mTyp9a43i/tumblr_static_9xczv23qs7k8ok88cwwcc8ggs.png"/>
- 
-<!--------------------TITLES-------------------->
+<!-----------------TEXT FIELDS----------------->
 <meta name="text:how to link music" content="linktr.ee/direct_file_links">
 <meta name="text:music player mp3 URL" content="https://rhizo.gitlab.io/m/The_Relief.mp3">
 <meta name="text:music player song name" content="The Relief">
-<meta name="text:font size" content="12">
-<meta name="text:post width" content="500">
-<meta name="text:post padding" content="20">
-<meta name="text:photoset gutter width" content="10">
-<meta name="text:post margin" content="40">
-<meta name="text:sidebar right margin" content="40">
-<meta name="text:sidebar width" content="500">
-<meta name="text:description opacity" content="0.7">
+
+
 <meta name="text:Link 1" content="Sample link 1">
-<meta name="text:Link 1 URL" content="/">
+<meta name="text:Link 1 URL" content="https://www.youtube.com/watch?v=6opktP4VBN0">
 <meta name="text:Link 2" content="">
 <meta name="text:Link 2 URL" content="">
 <meta name="text:Link 3" content="">
@@ -257,12 +392,12 @@ $(document).ready(function(){
     border-radius:5px;
     border:1px solid rgba({RGBcolor:text},0.2);
     font-family: open sans;
-    font-size: calc({text:font size}px - 3px);
+    font-size: calc({select:font size} - 3px);
     letter-spacing: 1px;
     text-transform: uppercase;
     color: {color:text};
     z-index:99999999999999999999999999998!important;
-    max-width: calc({text:post width}px * 1.25);
+    max-width: calc({select:post width} * 1.25);
     -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
     -o-transition: all 0.3s ease-in-out;
@@ -326,7 +461,7 @@ color:{color:text};
 cursor:normal;
 font-family:open sans;
 line-height:1.6em;
-font-size:{text:font size}px;
+font-size:{select:font size};
 text-align:left;
 }
  
@@ -363,7 +498,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 {
@@ -380,7 +515,7 @@ a:hover {text-decoration:none;}
 img {opacity:1;text-decoration:none;}
  
 h1, h2, h3, h4, h5, h6 {
-    font-size:calc({text:font size}px + 1px);
+    font-size:calc({select:font size} + 1px);
     font-family:quicksand;
     text-transform:uppercase;
     letter-spacing:2px;
@@ -393,10 +528,9 @@ h1, h2, h3, h4, h5, h6 {
 #container {
     position:absolute;
     top:0;left:0;
-    margin-left:calc(25px + {text:sidebar width}px + 30px + {text:sidebar right margin}px);
-    margin-top:{text:post margin}px;
-    margin-bottom:{text:post margin}px;
-    /* width:calc({text:post width}px + ({text:post padding}px * 2) + {text:sidebar left margin}px + {text:sidebar width}px); */
+    margin-left:calc(25px + {select:sidebar width} + 30px + {select:center gap});
+    margin-top:{select:post spacing};
+    margin-bottom:{select:post spacing};
 }
  
  
@@ -409,7 +543,7 @@ h1, h2, h3, h4, h5, h6 {
     position:fixed;
     top:0;margin-top:0px;
     left:0;margin-left:25px;
-    width:{text:sidebar width}px;
+    width:{select:sidebar width};
     height:100%;
     background-image:url('{image:sidebar image}');
     background-size:cover;
@@ -430,13 +564,13 @@ h1, h2, h3, h4, h5, h6 {
 }
  
 #strip2 {
-    margin-left:calc(25px + {text:sidebar width}px);
+    margin-left:calc(25px + {select:sidebar width});
     width:15px;
     background-color:{color:sidebar bar 2};
 }
  
 #strip3 {
-    margin-left:calc(25px + {text:sidebar width}px + 15px);
+    margin-left:calc(25px + {select:sidebar width} + 15px);
     width:15px;
     background-color:{color:sidebar bar 3};
 }
@@ -444,15 +578,16 @@ h1, h2, h3, h4, h5, h6 {
 .descwrap {
     position:fixed;
     bottom:0;margin-bottom:35px;
-    left:0;margin-left:calc((({text:sidebar width}px - ({text:sidebar width}px * 0.65)) / 2) + 30px);
+    left:0;margin-left:calc((({select:sidebar width} - ({select:sidebar width} * 0.65)) / 2) + 30px);
 }
  
 .desc {
-    width:calc({text:sidebar width}px * 0.65);
-    height:120px;overflow:auto;
+    width:calc({select:sidebar width} * 0.65);
+    height:120px;
+    overflow:auto;
     padding:10px;
-    background-color:rgba({RGBcolor:description background},{text:description opacity});
-    font-size:calc({text:font size}px - 1px);
+    background-color:rgba({RGBcolor:description background},{select:desc transparency});
+    font-size:calc({select:font size} - 1px);
     color:{color:desc text};
     text-align:center;
 }
@@ -478,7 +613,7 @@ h1, h2, h3, h4, h5, h6 {
  
 .tiddy {
     margin-bottom:-3px;
-    width:calc({text:sidebar width}px * 0.65);
+    width:calc({select:sidebar width} * 0.65);
     text-align:left;
     font-family:economica;
     text-transform:uppercase;
@@ -547,10 +682,10 @@ h1, h2, h3, h4, h5, h6 {
 /*--------------------POSTS--------------------*/
 .posts {
 overflow:hidden;
-margin-bottom:{text:post margin}px;
+margin-bottom:{select:post spacing};
 {/block:PermalinkPage}
-width:{text:post width}px;
-padding:{text:post padding}px;
+width:{select:post width};
+padding:{select:post padding};
 background-color:{color:post};
  
 {block:ifpostborders}
@@ -577,7 +712,7 @@ border-left:1px solid {color:post borders};
 .photos, .photos img {
     position:relative;
     overflow:hidden;
-    width:{text:post width}px;
+    width:{select:post width};
  
     {block:IndexPage}
     {block:ifphotofade}
@@ -642,7 +777,7 @@ border-left:1px solid {color:post borders};
 .perma {
     text-transform:uppercase;
     letter-spacing:1px;
-    font-size:calc({text:font size}px - 2.5px);
+    font-size:calc({select:font size} - 2.5px);
 }
  
 .perma a, .perma b {
@@ -662,7 +797,7 @@ border-left:1px solid {color:post borders};
     font-style:italic;
     letter-spacing:1.3px;
     line-height:1.5em;
-    font-size:calc({text:font size}px - 3.5px);
+    font-size:calc({select:font size} - 3.5px);
     text-align:right;
 }
  
@@ -680,7 +815,7 @@ border-left:1px solid {color:post borders};
 /* -- mikedidthis from StackOverflow: //stackoverflow.com/users/2312574/mikedidthis -- */
 /* -- and tutorial by shythemes: //shythemes.tumblr.com/post/147903463743/custom-like-and-reblog-buttons -- */
 .controls {
-    margin-right:calc({text:post padding}px + 6px);
+    margin-right:calc({select:post padding} + 6px);
     margin-top:-20px;
     height:0px;
 }
@@ -695,27 +830,27 @@ border-left:1px solid {color:post borders};
  
 .controls .rb .sf {
     position:absolute;
-    margin-top:calc(({text:font size}px - 1px) * -1);
+    margin-top:calc(({select:font size} - 1px) * -1);
     margin-left:2px;
-    font-size:{text:font size}px;
+    font-size:{select:font size};
 }
  
 .controls .like .sf {
     position:absolute;
-    margin-top:calc(({text:font size}px - 2px) * -1);
-    margin-left:calc(({text:font size}px + 4px) * -1);
-    font-size:calc({text:font size}px + 1px);
-    max-height:calc({text:font size}px + 1px);
+    margin-top:calc(({select:font size} - 2px) * -1);
+    margin-left:calc(({select:font size} + 4px) * -1);
+    font-size:calc({select:font size} + 1px);
+    max-height:calc({select:font size} + 1px);
 }
  
 .controls .like .liked + .sf {color:#ec5a5a;}
  
 .controls .like .like_button {
     position:absolute;
-    margin-top:calc(({text:font size}px - 1px) * -1);
-    margin-left:calc(({text:font size}px + 5px) * -1);
-    width:calc({text:font size}px + 3px);
-    height:calc({text:font size}px + 3px);
+    margin-top:calc(({select:font size} - 1px) * -1);
+    margin-left:calc(({select:font size} + 5px) * -1);
+    width:calc({select:font size} + 3px);
+    height:calc({select:font size} + 3px);
 }
  
 .controls .like .like_button iframe {
@@ -732,7 +867,7 @@ border-left:1px solid {color:post borders};
  
 /*--------------------POST NOTES--------------------*/
 ol.notes {
-width:{text:post width}px;
+width:{select:post width};
 padding:0px;
 margin-top:30px;
 list-style-type:none;
@@ -775,7 +910,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 rgba({RGBcolor:text},0.15) !important;
 }
@@ -795,15 +931,15 @@ text-align:center;
 .daydreamer .sf {
 color:{color:text};
 padding:7px 10px 2px 10px;
-font-size:calc({text:font size}px + 5px);
+font-size:calc({select:font size} + 5px);
 }
  
 .daydreamer::before {
 content:"";
 position:absolute;
 margin-top:8px;
-margin-left:calc(-{text:post width}px / 4);
-width:calc({text:post width}px / 4);
+margin-left:calc(-{select:post width} / 4);
+width:calc({select:post width} / 4);
 height:1px;
 background:-webkit-linear-gradient(left, transparent 0%, {color:text} 80%, transparent 100%);
 }
@@ -813,7 +949,7 @@ content:"";
 position:absolute;
 margin-top:8px;
 margin-left:0px;
-width:calc({text:post width}px / 4);
+width:calc({select:post width} / 4);
 height:1px;
 background:-webkit-linear-gradient(right, transparent 0%, {color:text} 80%, transparent 100%);
 }
@@ -821,7 +957,7 @@ background:-webkit-linear-gradient(right, transparent 0%, {color:text} 80%, tran
 .quote {
 font-family:Quicksand;
 text-transform:uppercase;letter-spacing:1px;
-font-size:calc({text:font size}px + 1px);
+font-size:calc({select:font size} + 1px);
 font-weight:bold;
 text-align:center;
 }
@@ -859,7 +995,7 @@ font-weight:bold;
 .label.odd {color:{color:question and chat text};}
 .label.even {color:{color:text};}
  
-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 {
@@ -919,7 +1055,7 @@ height:0px;
  
 /*---------------------------VIDEO---------------------------*/
 .tumblr_video_container {
-    width:{text:post width}px!important;
+    width:{select:post width}!important;
     height:auto!important;
     max-height:540px!important;
     overflow:hidden!important;
@@ -949,17 +1085,17 @@ height:0px;
  
 /*------------------------BOT PAGI------------------------*/
 .botpagi {
-        width:calc({text:post width}px + ({text:post padding}px * 2));
+        width:calc({select:post width} + ({select:post padding} * 2));
         text-align:center;
         padding-top:15px;
         border-top:1px solid rgba({RGBcolor:text},0.15);
-        margin-bottom:calc(0px - 10px + {text:post margin}px);
+        margin-bottom:calc(0px - 10px + {select:post spacing});
 }
  
 /* 'Current page' number */
 .botpagi span {
         background-color:{color:post};
-        font-size:calc({text:font size}px - 1px);
+        font-size:calc({select:font size} - 1px);
         color:{color:Text};
         padding:3px 5px;
         width:9px;
@@ -971,7 +1107,7 @@ height:0px;
 /* Other page numbers */
 .botpagi a {
         background-color:{color:post};
-        font-size:calc({text:font size}px - 1px);
+        font-size:calc({select:font size} - 1px);
         color:{color:link};
         padding:3px 5px;
         width:9px;