From 93180d31bcc1d71544253966c8fc8bb33085bf4c Mon Sep 17 00:00:00 2001
From: HT <glenthemes@noreply@froggi.es>
Date: Fri, 18 Aug 2023 01:36:43 +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

---
 08-Kami-no-Himegoto | 155 +++++++++++++++++++++++++++++++++++---------
 1 file changed, 126 insertions(+), 29 deletions(-)

diff --git a/08-Kami-no-Himegoto b/08-Kami-no-Himegoto
index 4b22a5d..e7f71ad 100644
--- a/08-Kami-no-Himegoto
+++ b/08-Kami-no-Himegoto
@@ -4,7 +4,10 @@ Made by glenthemes
  
 Initial release: 2016/11/02
 Remake date: 2021/07/25
-Last updated: 2023/05/06
+Last updated: 2023/08/17
+
+What's new:
+✱ NPF audio post support
 
 TERMS OF USE:
 1) Do not remove the theme credit.
@@ -61,12 +64,14 @@ a.post_media_photo_anchor, a.post_media_photo_anchor:hover {
 }
 </style>
 
+<script src="//static.tumblr.com/gtjt4bo/sgMrymui0/waitforelement.js"></script>
 <script src="//glen-themes.gitlab.io/thms/08/yabonku.js"></script>
+<script src="//glen-themes.gitlab.io/thms/08/bonks.js"></script>
 
 <!-- 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: var(--Body-Font-Size);
     
@@ -94,6 +99,87 @@ a.post_media_photo_anchor, a.post_media_photo_anchor:hover {
 }
 </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: var(--Audio-Post-Buttons-Color);
+    --NPF-Audio-Buttons-Padding: calc(var(--Audio-Post-PlayButton-Padding) + (var(--Audio-Post-PlayButton-Size) * 0.2));
+    --NPF-Audio-Buttons-Spacing: calc(var(--p) + 12px);
+    --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;
+    background:{color:post background 2};
+    z-index:0;
+}
+ 
+.npf-audio-background {
+    margin-left:var(--p);
+}
+ 
+.npf-audio-play, .npf-audio-pause {
+	position:relative;
+	z-index:0;
+}
+ 
+.npf-audio-play:after, .npf-audio-pause:after {
+    content:"";
+    position:absolute;
+    top:0;left:0;
+    margin-top:calc(0px - var(--NPF-Audio-Buttons-Padding) - 1px);
+    margin-left:calc(0px - var(--NPF-Audio-Buttons-Padding) - 1px);
+    width:calc(100% + (var(--NPF-Audio-Buttons-Padding) * 2));
+    height:calc(100% + (var(--NPF-Audio-Buttons-Padding) * 2));
+    background:var(--Audio-Post-Buttons-BG);
+    border:1px solid var(--Audio-Post-Buttons-Border);
+    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;
+    z-index:-1;
+}
+ 
+.npf-audio-details {
+    color:{color:special text};
+}
+ 
+.npf-audio-details > * + * {
+    margin-top:-2.5px;
+}
+</style>
+
 <script src="//glen-npf.gitlab.io/other/neue.js"></script>
 <link href="//glen-npf.gitlab.io/other/neue.css" rel="stylesheet">
 
@@ -167,7 +253,28 @@ a.post_media_photo_anchor, a.post_media_photo_anchor:hover {
 <meta name="color:highlight" content="#e2eef5">
 <meta name="color:highlighted text" content="#252525">
 
+<!--------- GENERAL OPTIONS --------->
+<meta name="select:&#x2727;&#x28;&#x20;&#x941;&#x2022;&#x2304;&#x2022;&#x20;&#x29;&#x25DE;&#x2002;&#x2501;&#x2002;&#x1D406;&#x1D404;&#x1D40D;&#x1D404;&#x1D411;&#x1D400;&#x1D40B;&#x20;&#x2CE;&#x2CA;&#x2D7;" title="" content="">
+
+<meta name="select:tumblr controls color" title="black" content="black">
+<meta name="select:tumblr controls color" title="white" content="white">
+
+<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: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">
+
 <!--------- SIDEBAR 1 OPTIONS --------->
+<meta name="select:&#x2727;&#x28;&#x20;&#x941;&#x2022;&#x2304;&#x2022;&#x20;&#x29;&#x25DE;&#x2002;&#x2501;&#x2002;&#x1D412;&#x1D408;&#x1D403;&#x1D404;&#x1D401;&#x1D400;&#x1D411;&#x20;&#x1D7CF;&#x20;&#x2CE;&#x2CA;&#x2D7;" title="" content="">
+
 <meta name="select:sidebar 1 width" title="370px" content="370px">
 <meta name="select:sidebar 1 width" title="310px" content="310px">
 <meta name="select:sidebar 1 width" title="330px" content="330px">
@@ -199,6 +306,8 @@ a.post_media_photo_anchor, a.post_media_photo_anchor:hover {
 <meta name="select:sidebar 1 desc text align" title="right" content="right">
 
 <!--------- SIDEBAR 2 OPTIONS --------->
+<meta name="select:&#x2727;&#x28;&#x20;&#x941;&#x2022;&#x2304;&#x2022;&#x20;&#x29;&#x25DE;&#x2002;&#x2501;&#x2002;&#x1D412;&#x1D408;&#x1D403;&#x1D404;&#x1D401;&#x1D400;&#x1D411;&#x20;&#x1D7D0;&#x20;&#x2CE;&#x2CA;&#x2D7;" title="" content="">
+
 <meta name="select:sidebar 2 icon size" title="40px" content="40px">
 <meta name="select:sidebar 2 icon size" title="30px" content="30px">
 <meta name="select:sidebar 2 icon size" title="35px" content="35px">
@@ -228,24 +337,8 @@ a.post_media_photo_anchor, a.post_media_photo_anchor:hover {
 <meta name="select:customlinks text size" title="12px" content="10px">
 <meta name="select:customlinks text size" title="13px" content="11px">
 
-<!--------- 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">
-
 <!--------- MAIN POSTS OPTIONS --------->
-<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:photoset spacing" title="4px" content="4px">
-<meta name="select:photoset spacing" title="6px" content="6px">
-<meta name="select:photoset spacing" title="10px" content="10px">
+<meta name="select:&#x2727;&#x28;&#x20;&#x941;&#x2022;&#x2304;&#x2022;&#x20;&#x29;&#x25DE;&#x2002;&#x2501;&#x2002;&#x1D40F;&#x1D40E;&#x1D412;&#x1D413;&#x1D412;&#x20;&#x2CE;&#x2CA;&#x2D7;" title="" content="">
 
 <meta name="select:post width" title="fill remaining space" content="fill">
 <meta name="select:post width" title="400px" content="400px">
@@ -268,6 +361,10 @@ a.post_media_photo_anchor, a.post_media_photo_anchor:hover {
 <meta name="select:post text line height" title="1.5em" content="1.5em">
 <meta name="select:post text line height" title="1.9em" content="1.9em">
 
+<meta name="select:photoset spacing" title="4px" content="4px">
+<meta name="select:photoset spacing" title="6px" content="6px">
+<meta name="select:photoset spacing" title="10px" content="10px">
+
 <!-- reblogger styling -->
 
 <meta name="select:reblogger picture style" title="round" content="100%">
@@ -327,10 +424,6 @@ a.post_media_photo_anchor, a.post_media_photo_anchor:hover {
 <meta name="select:post spacing" title="45px" content="45px">
 <meta name="select:post spacing" title="50px" content="50px">
 
-<!--------- TUMBLR CONTROLS OPTIONS --------->
-<meta name="select:tumblr controls color" title="black" content="black">
-<meta name="select:tumblr controls color" title="white" content="white">
-
 <!--------- TEXT FIELDS --------->
 <meta name="text:how to link music" content="linktr.ee/direct_file_links">
 <meta name="text:music player song name" content="岩崎 琢 – Glorious">
@@ -706,7 +799,11 @@ p.npf_quote, p.npf_chat {
     
     --Audio-Post-Album-Image-Size:64px;
     --Audio-Post-PlayButton-Size:18px;
+    --Audio-Post-Buttons-Color:{color:headings};
     --Audio-Post-PlayButton-Padding:8px;
+    --Audio-Post-Buttons-BG:{color:post background 2};
+    --Audio-Post-Buttons-Border:rgba({RGBcolor:post borders inner},0.420);
+    --Audio-Post-Download-Color:{color:link};
     
     --AskPost-Avatar-Size:48px;
     
@@ -1548,10 +1645,10 @@ p.npf_quote, p.npf_chat {
 }
 
 .summer {
-    border:1px solid rgba({RGBcolor:post borders inner},0.420);
+    border:1px solid var(--Audio-Post-Buttons-Border);
     width:100%;
     height:100%;
-    background:{color:post background 2};
+    background:var(--Audio-Post-Buttons-BG);
     box-sizing:border-box;
     border-radius:100%;
     display:flex;
@@ -1568,7 +1665,7 @@ p.npf_quote, p.npf_chat {
 
 .splay i, .spause i {
     font-size:var(--Audio-Post-PlayButton-Size);
-    color:{color:headings};
+    color:var(--Audio-Post-Buttons-Color);
 }
 
 .spause {
@@ -1596,7 +1693,7 @@ p.npf_quote, p.npf_chat {
 .trackinfo {
 }
 
-.t-name {
+.t-name, .npf-audio-title {
     font-family:rubik;
     font-size:calc({select:post font size} - 1px);
     font-weight:bold;
@@ -1618,7 +1715,7 @@ p.npf_quote, p.npf_chat {
     -webkit-mask-image:var(--dongload);
     -webkit-mask-repeat:no-repeat;
     -webkit-mask-size:contain;
-    background:{color:link};
+    background:var(--Audio-Post-Download-Color);
 }
 
 /*----- VIDEOS -----*/
@@ -2442,4 +2539,4 @@ ol.notes .action a[rel='nofollow'] {
 <script src="//static.tumblr.com/0podkko/jfMplm3f8/modified_photosets.js"></script>
 
 </body>
-</html>
\ No newline at end of file
+</html>