₊⁺✿˚

This commit is contained in:
HT 2023-07-30 02:39:03 +01:00
parent b87b354cb3
commit 4c0610e0e3
1 changed files with 268 additions and 178 deletions

View File

@ -3,7 +3,11 @@ Theme [24]: Lachesis
Made by glenthemes
Initial release: 2017/10/16
Last updated: 2023/05/12
Last updated: 2023/07/29
What's new:
✱ NPF audio post support
✱ reworked music player (Billy to HTML5)
TERMS OF USE:
1) Do not remove the theme credit.
@ -12,14 +16,14 @@ TERMS OF USE:
4) Do not use my themes as a base code.
5) Do not mix my themes together.
------------------------------------------------------------------------>
<!DOCTYPE html>
<html>
<html mplayer="{select:music player}">
<head>
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<!--------------------JAVASCRIPTS-------------------->
@ -57,7 +61,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',
@ -69,7 +73,7 @@ $(document).ready(function(){
<script src ="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
{block:ifsmoothscrolling}
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.4/SmoothScroll.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.4/SmoothScroll.js"></script>
{/block:ifsmoothscrolling}
<link rel="stylesheet" href="//static.tumblr.com/2pnwama/WRtoonba6/nozomi.css">
@ -90,7 +94,7 @@ $(document).ready(function(){
<style tmblr-npf>
:root {
--NPF-Caption-Spacing:1em;
--NPF-Image-Spacing:4px;
--NPF-Image-Spacing:{select:photos spacing};
}
a.post_media_photo_anchor, a.post_media_photo_anchor:hover {
@ -122,16 +126,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};
@ -150,8 +154,79 @@ $(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:permalink text};
--NPF-Audio-Buttons-Padding: 14px;
--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:{color:permalink background};
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="//static.tumblr.com/gtjt4bo/18Vryl30c/glenplayer0.js"></script>
<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:header image" content="//rhizo.gitlab.io/random/images/VZMLqLE.png"/>
<meta name="image:header background" content="//static.tumblr.com/8bce221c74914ab8eaeaf5036e0dce0f/2pnwama/TGpoxwd94/tumblr_static_420lfm53wkao4cw8k8kccww80.png"/>
<meta name="image:background image" content="//rhizo.gitlab.io/random/images/isewwsp.png"/>
<!--------------------COLORS-------------------->
@ -179,10 +254,56 @@ $(document).ready(function(){
<meta name="color:scrollbar bg" content="#f5f5f5"/>
<meta name="color:highlight" content="#f8f8f9">
<meta name="color:highlighted text" content="#777">
<!--------------------OPTIONS-------------------->
<meta name="if:header content" content="1" />
<!-----------------DROPDOWN OPTS----------------->
<meta name="select:music player" title="show" content="show">
<meta name="select:music player" title="hide" content="hide">
<meta name="select:searchbar width" title="150px" content="150px">
<meta name="select:searchbar width" title="100px" content="100px">
<meta name="select:searchbar width" title="200px" content="200px">
<meta name="select:searchbar width" title="250px" content="250px">
<meta name="select:header gap" title="50px" content="50px">
<meta name="select:header gap" title="0px" content="0px">
<meta name="select:header gap" title="5px" content="5px">
<meta name="select:header gap" title="10px" content="10px">
<meta name="select:header gap" title="15px" content="15px">
<meta name="select:header gap" title="20px" content="20px">
<meta name="select:header gap" title="25px" content="25px">
<meta name="select:header gap" title="30px" content="30px">
<meta name="select:header gap" title="35px" content="35px">
<meta name="select:header gap" title="40px" content="40px">
<meta name="select:header gap" title="45px" content="45px">
<meta name="select:header gap" title="55px" content="55px">
<meta name="select:header gap" title="60px" content="60px">
<meta name="select:header gap" title="65px" content="65px">
<meta name="select:header gap" title="70px" content="70px">
<meta name="select:header gap" title="75px" content="75px">
<meta name="select:header gap" title="80px" content="80px">
<meta name="select:header gap" title="85px" content="85px">
<meta name="select:header gap" title="90px" content="90px">
<meta name="select:header gap" title="95px" content="95px">
<meta name="select:header gap" title="100px" content="100px">
<meta name="select:header image height" title="400px" content="400px">
<meta name="select:header image height" title="200px" content="200px">
<meta name="select:header image height" title="250px" content="250px">
<meta name="select:header image height" title="300px" content="300px">
<meta name="select:header image height" title="350px" content="350px">
<meta name="select:header image height" title="450px" content="450px">
<meta name="select:header image height" title="500px" content="500px">
<meta name="select:header image height" title="550px" content="550px">
<meta name="select:header image height" title="600px" content="600px">
<meta name="select:layout spacing" title="45px" content="45px">
<meta name="select:layout spacing" title="25px" content="25px">
<meta name="select:layout spacing" title="30px" content="30px">
<meta name="select:layout spacing" title="35px" content="35px">
<meta name="select:layout spacing" title="40px" content="40px">
<meta name="select:layout spacing" title="50px" content="50px">
<meta name="select:layout spacing" title="55px" content="55px">
<meta name="select:layout spacing" title="60px" content="60px">
<meta name="select:body font family" title="Karla" content="Karla"/>
<meta name="select:body font family" title="Lato" content="Lato"/>
@ -191,8 +312,47 @@ $(document).ready(function(){
<meta name="select:body font family" title="Open Sans" content="Open Sans"/>
<meta name="select:body font family" title="Raleway" content="Raleway"/>
<meta name="if:pagination in sidebar" content="1" />
<meta name="if:show music player" content="0" />
<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="540px" content="540px">
<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="500px" content="500px">
<meta name="select:post width" title="600px" content="600px">
<meta name="select:post padding" title="15px" content="15px">
<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: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="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">
<!-----------------TOGGLE OPTS----------------->
<meta name="if:header content" content="1" />
<meta name="if:pagination in sidebar" content="1" />
<meta name="if:photo fade" content="0" />
<meta name="if:monochrome posts" content="0" />
<meta name="if:post borders" content="0" />
@ -200,13 +360,13 @@ $(document).ready(function(){
<meta name="if:dark tumblr controls" content="0" />
<meta name="if:dark theme credit" content="0" />
<!--------------------IMAGES-------------------->
<meta name="image:header image" content="//rhizo.gitlab.io/random/images/VZMLqLE.png"/>
<meta name="image:header background" content="//static.tumblr.com/8bce221c74914ab8eaeaf5036e0dce0f/2pnwama/TGpoxwd94/tumblr_static_420lfm53wkao4cw8k8kccww80.png"/>
<meta name="image:background image" content="//rhizo.gitlab.io/random/images/isewwsp.png"/>
<!--------------------TITLES-------------------->
<!----------------TEXT FIELDS---------------->
<meta name="text:&#x29C;&#x1D0F;&#x1D21;&#x20;&#x1D1B;&#x1D0F;&#x20;&#x29F;&#x26A;&#x274;&#x1D0B;&#x20;&#x1D0D;&#x1D1C;&#x73;&#x26A;&#x1D04;&#x3A;" content="linktr.ee/direct_file_links">
<meta name="text:song file mp3" content="https://cdn.discordapp.com/attachments/1001045393498452049/1001046071792893992/Thoughts_of_You.mp3">
<meta name="text:song name" content="Thoughts of You">
<meta name="text:song volume" content="90%">
<meta name="text:&#917536;&#x200B;" content="&#x263D;&#x2727;&#xA8;&#x2A;&#x3003;&#x2E;&#xB8;&#xB8;&#x2727;&#xB8;&#xB8;&#x2E;&#x3003;&#x2A;&#xA8;&#x2727;&#x263E;&NewLine;">
<meta name="text:searchbar width" content="150">
<meta name="text:searchbar placeholder text" content="search this blog">
@ -220,19 +380,17 @@ $(document).ready(function(){
<meta name="text:searchbar suggestion 4 URL" content="">
<meta name="text:searchbar suggestion 5" content="">
<meta name="text:searchbar suggestion 5 URL" content="">
<meta name="text:header image height" content="400">
<meta name="text:header gap" content="50">
<meta name="text:&#917536;&#x200B;&#x200B;" content="&#x263D;&#x2727;&#xA8;&#x2A;&#x3003;&#x2E;&#xB8;&#xB8;&#x2727;&#xB8;&#xB8;&#x2E;&#x3003;&#x2A;&#xA8;&#x2727;&#x263E;&NewLine;">
<meta name="text:header title" content="custom header title goes here">
<meta name="text:header welcome text" content="welcome text goes here. delete this text to exclude it.">
<meta name="text:header scroll button text" content="view posts">
<meta name="text:font size" content="12">
<meta name="text:post width" content="540">
<meta name="text:post padding" content="15">
<meta name="text:photoset gutter width" content="10">
<meta name="text:post margin" content="45">
<meta name="text:sidebar box margin" content="45">
<meta name="text:&#917536;&#x200B;&#x200B;&#x200B;" content="&#x263D;&#x2727;&#xA8;&#x2A;&#x3003;&#x2E;&#xB8;&#xB8;&#x2727;&#xB8;&#xB8;&#x2E;&#x3003;&#x2A;&#xA8;&#x2727;&#x263E;&NewLine;">
<meta name="text:links box title" content="navigation">
<meta name="text:billy music player code" content="">
<meta name="text:Link 1" content="Sample link 1">
<meta name="text:Link 1 URL" content="/">
<meta name="text:Link 2" content="">
@ -257,22 +415,6 @@ $(document).ready(function(){
<!-------------------------------------------------------------------->
<style type="text/css">
@font-face {
font-family: Calluna;
src: url("//assets.tumblr.com/fonts/calluna/Calluna-BoldIt-webfont.eot?3=&v=f685dc881c60c298ea22a73fe505b88a");
src: url("//assets.tumblr.com/fonts/calluna/Calluna-BoldIt-webfont.eot?3%3F=&v=f685dc881c60c298ea22a73fe505b88a#iefix") format("embedded-opentype"),url("//assets.tumblr.com/fonts/calluna/Calluna-BoldIt-webfont.woff?3=&v=760a50f4d098e59aebaf0f0e58ae2cc8") format("woff"),url("//assets.tumblr.com/fonts/calluna/Calluna-BoldIt-webfont.ttf?3=&v=5ace789439bff3b27f8d4112725531da") format("truetype"),url("//assets.tumblr.com/fonts/calluna/Calluna-BoldIt-webfont.svg?3=&v=5b95c481dd7411c6e112143d6646bd9b#_.regular") format("svg");
font-weight: 700;
font-style: italic
}
@font-face {
font-family: Fairwater;
src: url("//assets.tumblr.com/fonts/fairwater/fairwater_script_regular-webfont.woff2?v=b7ab7a58cded3365889a447bfd9e9c45") format("woff2"),url("//assets.tumblr.com/fonts/fairwater/fairwater_script_regular-webfont.woff?v=96e975b7468359e6f67086305577e43e") format("woff");
font-weight: 400;
font-style: normal
}
/*--------------------TOOLTIPS--------------------*/
#s-m-t-tooltip {
@ -280,13 +422,13 @@ $(document).ready(function(){
margin: 26px 9px 0px 15px;
background-color: {color:post};
font-family: {select:body font family};
font-size: calc({text:font size}px - 3px);
font-size: calc({select:font size} - 3px);
letter-spacing: 1px;
text-transform: uppercase;
color: {color:text};
border:0.5px solid rgba({RGBcolor:borders},0.6);
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.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
@ -346,7 +488,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;
}
@ -411,7 +553,7 @@ text-decoration:none;
}
h1 {
font-size:{text:font size}px;
font-size:{select:font size};
font-family:montserrat;
font-weight:bold;
text-transform:uppercase;
@ -502,11 +644,11 @@ border-bottom:0.5px solid rgba({RGBcolor:text},0.2);
text-transform:uppercase;
letter-spacing:1px;
color:{color:top bar text};
font-size:8px;
font-size:calc({select:font size} - 3px);
}
.typing, #searchentries {
width:{text:searchbar width}px;
width:{select:searchbar width};
}
.typing {
@ -535,7 +677,7 @@ border-bottom:0.5px solid rgba({RGBcolor:text},0.2);
content:'\e08f';
margin-right:5px;
font-family:'saturnicons';
font-size:7px;
font-size:calc({select:font size} - 5px);
}
#searchentries a:hover {
@ -556,7 +698,7 @@ border-bottom:0.5px solid rgba({RGBcolor:text},0.2);
top:0;margin-top:65px;
left:0;margin-left:0px;
width:100%;
height:calc({text:header gap}px + {text:header image height}px + {text:header gap}px);
height:calc({select:header gap} + {select:header image height} + {select:header gap});
background-color:{color:header background};
background-image:url('{image:header background}');
background-attachment:scroll;
@ -565,7 +707,7 @@ border-bottom:0.5px solid rgba({RGBcolor:text},0.2);
#cheesecake {
position:absolute;
top:0;margin-top:calc(65px + {text:header gap}px);
top:0;margin-top:calc(65px + {select:header gap});
left:50%;
transform:translateX(-50%);
display:flex;
@ -574,13 +716,13 @@ border-bottom:0.5px solid rgba({RGBcolor:text},0.2);
.blueberry {
width:auto;
height:{text:header image height}px;
height:{select:header image height};
}
#toast {
margin-left:25px;
color:black;
height:{text:header image height}px;
height:{select:header image height};
display:table;
}
@ -602,7 +744,7 @@ border-bottom:0.5px solid rgba({RGBcolor:text},0.2);
width:350px;
font-family:Lora;
font-weight:300;
font-size:calc({text:font size}px + 1px);
font-size:calc({select:font size} + 1px);
line-height:1.6em;
color:{color:header text};
}
@ -631,20 +773,21 @@ border-bottom:0.5px solid rgba({RGBcolor:text},0.2);
content:'\e08d';
{block:ifheaderscrollbuttontext}margin-left:7px;{/block:ifheaderscrollbuttontext}
font-family:'saturnicons';
font-size:calc({text:font size}px - 3px);
font-size:calc({select:font size} - 3px);
}
/*--------------------POST CONTAINER--------------------*/
#container, #cabbage {
position:absolute;
/* top */
top:0;
{block:ifheadercontent}margin-top:calc(65px + {text:header gap}px + {text:header image height}px + {text:header gap}px);
padding-top:{text:sidebar box margin}px;{/block:ifheadercontent}
{block:ifnotheadercontent}margin-top:calc(65px + {text:sidebar box margin}px);{/block:ifnotheadercontent}
{block:ifheadercontent}
margin-top:calc(65px + {select:header gap} + {select:header image height} + {select:header gap});
padding-top:{select:layout spacing};
{/block:ifheadercontent}
{block:ifnotheadercontent}margin-top:calc(65px + {select:layout spacing});{/block:ifnotheadercontent}
/* left */
left:50%;
transform:translateX(-50%);
}
@ -657,21 +800,21 @@ z-index:300;
#cabbage {
{block:ifheadercontent}position:absolute;{/block:ifheadercontent}
{block:ifnotheadercontent}position:fixed;{/block:ifnotheadercontent}
margin-left:calc((-{text:post width}px / 2.08) - {text:post margin}px);
margin-left:calc((-{select:post width} / 2.08) - {select:post spacing});
z-index:300;
}
.stew {
position:fixed!important;
padding-top:0px!Important;
margin-top:calc(65px + {text:sidebar box margin}px)!important;
margin-top:calc(65px + {select:layout spacing})!important;
}
.turnip {
width:320px;
background-color:{color:post};
padding:20px;
margin-bottom:calc({text:sidebar box margin}px * 0.7);
margin-bottom:calc({select:layout spacing} * 0.7);
}
.casserole {
@ -679,7 +822,7 @@ z-index:300;
font-family:playfair display;
text-transform:uppercase;
letter-spacing:1px;
font-size:calc({text:font size}px + 5px);
font-size:calc({select:font size} + 5px);
padding-bottom:7px;
border-bottom:0.5px solid rgba({RGBcolor:text},0.4);
}
@ -712,10 +855,10 @@ z-index:300;
/*--------------------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}border:1px solid {color:borders};{/block:ifpostborders}
}
@ -727,7 +870,7 @@ background-color:{color:post};
.photos, .photos img {
position:relative;
overflow:hidden;
width:{text:post width}px;
width:{select:post width};
{block:IndexPage}
{block:ifphotofade}
@ -791,7 +934,7 @@ margin-top:15px;
letter-spacing: 1px;
padding:6px 10px;
text-transform:uppercase;
font-size:calc({text:font size}px - 2px);
font-size:calc({select:font size} - 2px);
height:auto;
background-color:{color:permalink background};
}
@ -809,7 +952,7 @@ border-bottom:0px solid transparent;
.perma .sf {
position:absolute;
margin:1px 7px 0px 4px;
font-size:calc({text:font size}px + 2px);
font-size:calc({select:font size} + 2px);
color:inherit;
}
@ -819,7 +962,7 @@ border-bottom:0px solid transparent;
text-transform:uppercase;
letter-spacing:1px;
text-align:right;
font-size:calc({text:font size}px - 3px);
font-size:calc({select:font size} - 3px);
line-height:1.5;
margin-top:10px;
}
@ -838,7 +981,7 @@ color:rgba({RGBcolor:link},0.8);
/*--------------------POST NOTES--------------------*/
ol.notes {
width:{text:post width}px;
width:{select:post width};
padding:0px;
margin-top:30px;
list-style-type:none;
@ -881,7 +1024,7 @@ text-decoration:none;
box-shadow:none !important;
border-radius:0px !important;
max-width:none;
padding:{text:post padding}px !important;
padding:{select:post padding} !important;
background:{color:post} !important;
border:1px solid rgba({RGBcolor:text},0.2) !important;
}
@ -895,7 +1038,7 @@ text-decoration:none;
.quote {
text-transform:uppercase;
font-size:calc({text:font size}px + 1px);
font-size:calc({select:font size} + 1px);
font-weight:bold;
text-align:center;
}
@ -988,7 +1131,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;
@ -1020,10 +1163,9 @@ height:0px;
/* 'Current page' number */
.sbpagi span {
margin:7px 0;
font-size:9px;
font-size:calc({select:font size} - 2px);
color:{color:Text};
padding:5px;
width:9px;
display:inline-block;
margin-left:2px;
text-align:center;
@ -1033,11 +1175,10 @@ height:0px;
.sbpagi a {
margin:7px 0;
background-color:{color:sidebar custom links BG};
font-size:9px;
font-size:calc({select:font size} - 2px);
color:{color:sidebar custom links text};
border-bottom:0.5px solid rgba({RGBcolor:sidebar custom links text},0.8);
padding:5px;
width:9px;
display:inline-block;
margin-left:2px;
text-align:center;
@ -1051,10 +1192,10 @@ height:0px;
/*------------------------BOT PAGI------------------------*/
.botpagi {
width:calc({text:post width}px + ({text: post padding} * 2));
width:calc({select:post width} + ({text: post padding} * 2));
text-align:center;
padding:2px 0px 7px 0px;
margin-bottom:{text:post margin}px;
margin-bottom:{select:post spacing};
background-color:{color:post};
border-bottom:2px solid {color:sidebar custom links BG};
}
@ -1062,10 +1203,9 @@ height:0px;
/* 'Current page' number */
.botpagi span {
margin:7px 0;
font-size:9px;
font-size:calc({select:font size} - 2px);
color:{color:Text};
padding:5px;
width:9px;
display:inline-block;
margin-left:5px;
text-align:center;
@ -1074,11 +1214,10 @@ height:0px;
/* Other page numbers */
.botpagi a {
margin:7px 0;
font-size:9px;
font-size:calc({select:font size} - 2px);
color:{color:link};
border-bottom:0.5px solid rgba({RGBcolor:link},0.8);
padding:5px;
width:9px;
display:inline-block;
margin-left:2px;
text-align:center;
@ -1088,80 +1227,34 @@ height:0px;
color:{color:text};
border-bottom:0.5px solid rgba({RGBcolor:link},0.5);
}
{block:ifshowmusicplayer}
#musicplayer {
[mplayer="hide"] #musicplayer { display:none; }
[mplayer="show"] #musicplayer {
position: fixed;
z-index: 999999;
top: 15px;
margin-left: 15px;
width: 31px;
height: 31px;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
background: {color:top bar background background}; /* icon background */
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
top:0;left:0;
padding-left:calc((65px - {select:font size}) * 0.5);
height:65px;
background: {color:top bar background};
padding-right:calc((65px - {select:font size}) * 0.25);
display:flex;
align-items:center;
}
#musicplayer img {
width: 15px;
padding: 8px 0px 0px 8px;
[mplayer="show"] #musicplayer [music-player]{
font-family:montserrat;
text-transform:uppercase;
letter-spacing:1px;
font-size:calc({select:font size} - 3px);
color:rgba({RGBcolor:top bar text},0.9);
}
#linerrr {
position:absolute;
background:{color:top bar background}; /* middle line color*/
[mplayer="show"] [music-player] .player-text {
line-height:1;
margin-top:calc({select:font size} * 0.15);
}
.linerrr {
top: 13px;
left: 30px;
width: 0px;
height: 3px;
-webkit-transition:all .4s ease;
-moz-transition:all .4s ease;
-o-transition:all .4s ease;
transition-delay: 0s;
-webkit-transition-delay: 0s;
}
#musicplayer:hover .linerrr {
width: 20px;
-webkit-transition-delay: 0s;
}
.play {
z-index: 9999;
top: 0px;
left: 50px;
width: 120px;
height: 0px;
padding: 0px 5px 5px 5px;
overflow: hidden;
position: absolute;
text-align: center;
background: {color:top bar background}; /* player background */
border-left: 3px solid {color:top bar background}; /* player border */
opacity: 0;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
transition-delay: .4s;
-webkit-transition-delay: .4s;
}
#musicplayer:hover .play {
height: 25px;
opacity: 1;
transition-delay: .6s;
-webkit-transition-delay: .6s;
}
{/block:ifshowmusicplayer}
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@ -1242,23 +1335,20 @@ svg {
</head>
<body>
{block:ifshowmusicplayer}
<div id="musicplayer" class="box fade-in one">
{block:ifdarktumblrcontrols}
<img src="//68.media.tumblr.com/tumblr_m7w2p9qThT1r6o8v2.gif">
{/block:ifdarktumblrcontrols}
{block:ifnotdarktumblrcontrols}
<img src="//68.media.tumblr.com/tumblr_m7w2o3N94I1r6o8v2.gif">
{/block:ifnotdarktumblrcontrols}
<div id="linerrr" class="linerrr"></div>
<div class="play">
{text:billy music player code}
</div>
<div id="musicplayer">
<div music-player btn-color="rgba({RGBcolor:top bar text},0.9)" btn-size="calc({select:font size} - 2px)" gap="11px">
<div music-btn>
<div btn-play></div>
<div btn-pause hidden></div>
</div>
<audio src="{text:song file mp3}" {text:ifsongvolume}volume="{text:song volume}"{/block:ifsongvolume}></audio>
{block:ifsongname}
<div class="player-text">{text:song name}</div>
{/block:ifsongname}
</div>
</div>
{/block:ifshowmusicplayer}
@ -1281,7 +1371,7 @@ svg {
<div id="kanata"></div>
<!---*SEARCH BAR START*--->
<script type="text/javascript">
<script>
$(document).ready(function(){
$('.expand').click(function(list){
list.stopPropagation();
@ -1339,7 +1429,7 @@ $(document).click(function(outside){
</div><!--toast-->
</div><!--cheesecake-->
<script type="text/javascript">
<script>
$(document).ready(function(){
$(".yohane").click(function() {
$('html, body').animate({
@ -1588,7 +1678,7 @@ $(window).scroll(function() {
</div><!--cont-->
<div id="dishonoronyourcow" class="box fade-in one"><a href="//glenthemes.tumblr.com" title="theme by glenthemes"><img src="//68.media.tumblr.com/avatar_dbde10ce662e_64.png" ondragstart='return false;'></a></div>
<div id="dishonoronyourcow" class="box fade-in one"><a href="//glenthemes.tumblr.com" title="theme by glenthemes"><img src="https://static.tumblr.com/gtjt4bo/U3eryhev4/glenthemes_logo_gray_light.png" ondragstart='return false;'></a></div>
</body>