glenthemes/themes
glenthemes
/
themes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

₊⁺✿˚

This commit is contained in:
HT 2023-07-30 21:32:33 +01:00
parent 7741de82c3
commit 1732f63eba
1 changed files with 281 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

434
33-Sparrow
View File

@ -3,7 +3,11 @@ Theme [33]: Sparrow
Made by glenthemes Made by glenthemes
Initial release: 2018/08/31 Initial release: 2018/08/31
Last updated: 2023/05/08 Last updated: 2023/07/30
What's new:
✱ NPF audio post support
✱ corner music player mini update
TERMS OF USE: TERMS OF USE:
1) Do not remove the theme credit. 1) Do not remove the theme credit.
@ -57,7 +61,7 @@ $(document).ready(function(){
$('.photo-slideshow').pxuPhotoset({ $('.photo-slideshow').pxuPhotoset({
lightbox: true, lightbox: true,
rounded: false, rounded: false,
gutter: '{text:photoset gutter width}px', gutter: '{select:photos spacing}',
borderRadius: '0px', borderRadius: '0px',
photoset: '.photo-slideshow', photoset: '.photo-slideshow',
photoWrap: '.photo-data', photoWrap: '.photo-data',
@ -66,15 +70,13 @@ $(document).ready(function(){
}); });
</script> </script>
<script src ="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script> <script src="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
<script src ="//static.tumblr.com/2pnwama/HGEpacv22/hearts.js"></script>
{block:ifsmoothscrolling} {block:ifsmoothscrolling}
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.4/SmoothScroll.js"></script> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.4/SmoothScroll.js"></script>
{/block:ifsmoothscrolling} {/block:ifsmoothscrolling}
<link href="//fonts.googleapis.com/css?family=Karla|Open+Sans|Quicksand" rel="stylesheet"> <link href="//fonts.googleapis.com/css?family=Karla|Open+Sans|Quicksand|Courier+Prime" rel="stylesheet">
<link rel="stylesheet" href="//static.tumblr.com/2pnwama/IUZoyg6qw/specialfonts.css"> <link rel="stylesheet" href="//static.tumblr.com/2pnwama/IUZoyg6qw/specialfonts.css">
@ -91,7 +93,7 @@ $(document).ready(function(){
<style tmblr-npf> <style tmblr-npf>
:root { :root {
--NPF-Caption-Spacing:1em; --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 { a.post_media_photo_anchor, a.post_media_photo_anchor:hover {
@ -120,14 +122,14 @@ $(document).ready(function(){
<link href="//static.tumblr.com/gtjt4bo/mXBrpdj0n/unblue-polls.css" rel="stylesheet"> <link href="//static.tumblr.com/gtjt4bo/mXBrpdj0n/unblue-polls.css" rel="stylesheet">
<style> <style>
.poll-post { .poll-post {
--Poll-Question-Font-Size: {text:font size}px; --Poll-Question-Font-Size: {select:font size};
--Poll-Option-Background-Color: transparent; --Poll-Option-Background-Color: transparent;
--Poll-Option-Corner-Rounding: 4px; --Poll-Option-Corner-Rounding: 4px;
--Poll-Option-Border-Size: 1px; --Poll-Option-Border-Size: 1px;
--Poll-Option-Border-Color: rgba({RGBcolor:text},0.2); --Poll-Option-Border-Color: rgba({RGBcolor:text},0.2);
--Poll-Option-Padding: 9px; --Poll-Option-Padding: 9px;
--Poll-Option-Font-Size: {text:font size}px; --Poll-Option-Font-Size: {select:font size};
--Poll-Option-Spacing: 10px; --Poll-Option-Spacing: 10px;
--Poll-Option-Text-Color: {color:text}; --Poll-Option-Text-Color: {color:text};
@ -146,8 +148,112 @@ $(document).ready(function(){
} }
</style> </style>
{block:ifmusicplayer}
<!-- music player #02 -->
<!-- glenthpvs.tumblr.com/player02 -->
<link href="//glenthemes.github.io/-music-/glenplayer02.css" rel="stylesheet">
<script src="//glenthemes.github.io/-music-/glenplayer02.js"></script>
<style element="glenplayer02">
:root {
--MusicPlayer-Position:bottom left;
--MusicPlayer-Edge-Offset:20px;
--MusicPlayer-Buttons-Size:calc({select:font size} + 1px);
--MusicPlayer-Buttons-Color:{color:music player color};
--MusicPlayer-Buttons-Fill:yes;
--MusicPlayer-Note-Size:calc({select:font size} - 1px);
--MusicPlayer-Note-Color:{color:music player color};
--MusicPlayer-Spacing-1:7px;
--MusicPlayer-Spacing-2:9px;
--MusicPlayer-Text-Size:calc({select:font size} - 1.5px);
--MusicPlayer-Text-Color:{color:music player color};
}
[glenplayer02], [glenplayer02] [song-name]{
font-family:"courier prime";
}
[glenplayer02] a {
padding-bottom:1px;
border-bottom:1px solid rgba({RGBcolor:music player color},0.25);
}
</style>
{/block:ifmusicplayer}
<!-- 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 buttons};
--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:{color:post buttons 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="//glen-npf.gitlab.io/other/neue.js"></script> <script src="//glen-npf.gitlab.io/other/neue.js"></script>
<link href="//glen-npf.gitlab.io/other/neue.css" rel="stylesheet"> <link href="//glen-npf.gitlab.io/other/neue.css" rel="stylesheet">
<!--------------------IMAGES-------------------->
<meta name="image:background image" content="//static.tumblr.com/c0a4e7cc4f5c2882a7779a37b63132bf/2pnwama/1wspebb34/tumblr_static_3rkx4t9bgaqscw04kw440skgw.png"/>
<meta name="image:sidebar icon" content="//static.tumblr.com/7531309b96679fe34f4db4de875800b8/2pnwama/fL6pebawc/tumblr_static_f1ut6aal6hc84ooosssgs0kw.png"/>
<meta name="image:sidebar name little icon" content="//static.tumblr.com/86ccf4411dfb90009e19771e1c0a0706/2pnwama/P05pebbd4/tumblr_static_16s3xjcm6wg04k8kcwg00c8gs.png"/>
<meta name="image:description image" content="//78.media.tumblr.com/35e780f5e9d6cd5e1affad95627090a4/tumblr_pea8x3iPvi1qg2f5co5_r1_400.gif"/>
<!--------------------COLORS--------------------> <!--------------------COLORS-------------------->
<meta name="color:background" content="#fff"/> <meta name="color:background" content="#fff"/>
@ -174,18 +280,18 @@ $(document).ready(function(){
<meta name="color:custom links hover" content="#fff"> <meta name="color:custom links hover" content="#fff">
<meta name="color:custom links left border hover" content="#dfe7e0"> <meta name="color:custom links left border hover" content="#dfe7e0">
<meta name="color:description title background" content="#f5f6f7"/> <meta name="color:desc title background" content="#f5f6f7"/>
<meta name="color:description title border 1" content="#c2d1c4"/> <meta name="color:desc title border 1" content="#c2d1c4"/>
<meta name="color:description title border 2" content="#d0dcd2"/> <meta name="color:desc title border 2" content="#d0dcd2"/>
<meta name="color:description title border 3" content="#dfe7e0"/> <meta name="color:desc title border 3" content="#dfe7e0"/>
<meta name="color:description title" content="#444"/> <meta name="color:desc title" content="#444"/>
<meta name="color:description background" content="#fcfcfc"/> <meta name="color:desc background" content="#fcfcfc"/>
<meta name="color:description text" content="#999"/> <meta name="color:desc text" content="#999"/>
<meta name="color:description bold" content="#b7c9c1"/> <meta name="color:desc bold" content="#b7c9c1"/>
<meta name="color:description italic" content="#688564"/> <meta name="color:desc italic" content="#688564"/>
<meta name="color:description link" content="#a2c796"/> <meta name="color:desc link" content="#a2c796"/>
<meta name="color:description link hover" content="#333"/> <meta name="color:desc link hover" content="#333"/>
<meta name="color:description bottom border" content="#eaefeb"/> <meta name="color:desc bottom border" content="#eaefeb"/>
<meta name="color:post" content="#fff"/> <meta name="color:post" content="#fff"/>
<meta name="color:posts bottom border" content="#eaefeb"/> <meta name="color:posts bottom border" content="#eaefeb"/>
@ -208,8 +314,77 @@ $(document).ready(function(){
<meta name="color:highlight" content="#f7f7f7"/> <meta name="color:highlight" content="#f7f7f7"/>
<meta name="color:highlighted text" content="#555"/> <meta name="color:highlighted text" content="#555"/>
<!-----------------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:desc height" title="100px" content="100px">
<meta name="select:desc height" title="75px" content="75px">
<meta name="select:desc height" title="125px" content="125px">
<meta name="select:desc height" title="150px" content="150px">
<meta name="select:desc height" title="175px" content="175px">
<meta name="select:desc height" title="200px" content="200px">
<meta name="select:desc height" title="225px" content="225px">
<meta name="select:desc height" title="250px" content="250px">
<meta name="select:desc height" title="275px" content="275px">
<meta name="select:desc height" title="300px" content="300px">
<meta name="select:desc padding" title="20px" content="20px">
<meta name="select:desc padding" title="5px" content="5px">
<meta name="select:desc padding" title="10px" content="10px">
<meta name="select:desc padding" title="15px" content="15px">
<meta name="select:desc padding" title="25px" content="25px">
<meta name="select:desc padding" title="30px" content="30px">
<meta name="select:center gap" title="80px" content="80px">
<meta name="select:center gap" title="30px" content="30px">
<meta name="select:center gap" title="40px" content="40px">
<meta name="select:center gap" title="50px" content="50px">
<meta name="select:center gap" title="60px" content="60px">
<meta name="select:center gap" title="70px" content="70px">
<meta name="select:center gap" title="90px" content="90px">
<meta name="select:center gap" title="100px" content="100px">
<meta name="select:center gap" title="110px" content="110px">
<meta name="select:center gap" title="120px" content="120px">
<meta name="select:center gap" title="130px" content="130px">
<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="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="4px" content="4px">
<meta name="select:photos spacing" title="0px" content="0px">
<meta name="select:photos spacing" title="2px" content="2px">
<meta name="select:photos spacing" title="6px" content="6px">
<meta name="select:photos spacing" title="8px" content="8px">
<meta name="select:photos spacing" title="10px" content="10px">
<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--------------------> <!------------------TOGGLE OPTS------------------>
<meta name="if:music player" content="1" /> <meta name="if:music player" content="1" />
<meta name="if:photo fade" content="0" /> <meta name="if:photo fade" content="0" />
@ -220,18 +395,13 @@ $(document).ready(function(){
<meta name="if:small cursor" content="1" /> <meta name="if:small cursor" content="1" />
<meta name="if:dark tumblr controls" content="0" /> <meta name="if:dark tumblr controls" content="0" />
<!--------------------IMAGES--------------------> <!---------------TEXT FIELDS--------------->
<meta name="image:background image" content="//static.tumblr.com/c0a4e7cc4f5c2882a7779a37b63132bf/2pnwama/1wspebb34/tumblr_static_3rkx4t9bgaqscw04kw440skgw.png"/> <meta name="text:&#x2694;&#x2002;&#xFE0F;&#x29C;&#x1D0F;&#x1D21;&#x20;&#x1D1B;&#x1D0F;&#x20;&#x29F;&#x26A;&#x274;&#x1D0B;&#x20;&#x1D0D;&#x1D1C;&#x73;&#x26A;&#x1D04;" content="linktr.ee/direct_file_links">
<meta name="image:sidebar icon" content="//static.tumblr.com/7531309b96679fe34f4db4de875800b8/2pnwama/fL6pebawc/tumblr_static_f1ut6aal6hc84ooosssgs0kw.png"/>
<meta name="image:sidebar name little icon" content="//static.tumblr.com/86ccf4411dfb90009e19771e1c0a0706/2pnwama/P05pebbd4/tumblr_static_16s3xjcm6wg04k8kcwg00c8gs.png"/>
<meta name="image:description image" content="//78.media.tumblr.com/35e780f5e9d6cd5e1affad95627090a4/tumblr_pea8x3iPvi1qg2f5co5_r1_400.gif"/>
<!--------------------TITLES-------------------->
<meta name="text:how to link music" content="linktr.ee/direct_file_links">
<meta name="text:music name" content="Forest Kingdom (8-bit)"> <meta name="text:music name" content="Forest Kingdom (8-bit)">
<meta name="text:music file URL" content="https://rhizo.gitlab.io/nier/Forest_Kingdom__8-bit_.mp3"> <meta name="text:music file URL" content="https://rhizo.gitlab.io/nier/Forest_Kingdom__8-bit_.mp3">
<meta name="text:music volume" content="100%">
<meta name="text:font size" content="12"> <meta name="text:&#917536;&#x200B;" content="&#x2501;&#x2501;&#x2501;&#x2501;&#x2501;&#x2501;&#x2501;&#x2501;&#xF3A;&#x2740;&#xF3B;&#x2501;&#x2501;&#x2501;&#x2501;&#x2501;&#x2501;&#x2501;&#x2501;&NewLine;">
<meta name="text:sidebar name" content="I need healing"> <meta name="text:sidebar name" content="I need healing">
<meta name="text:HP bar label" content="199/200"> <meta name="text:HP bar label" content="199/200">
@ -244,17 +414,14 @@ $(document).ready(function(){
<meta name="text:7th HP bar fill width" content="100%"> <meta name="text:7th HP bar fill width" content="100%">
<meta name="text:8th HP bar fill width" content="96%"> <meta name="text:8th HP bar fill width" content="96%">
<meta name="text:description title" content=""> <meta name="text:&#917536;&#x200B;&#x200B;" content="&#x2501;&#x2501;&#x2501;&#x2501;&#x2501;&#x2501;&#x2501;&#x2501;&#xF3A;&#x2740;&#xF3B;&#x2501;&#x2501;&#x2501;&#x2501;&#x2501;&#x2501;&#x2501;&#x2501;&NewLine;">
<meta name="text:description height" content="100">
<meta name="text:description padding" content="20"> <meta name="text:desc title" content="">
<meta name="text:&#917536;&#x200B;&#x200B;&#x200B;" content="&#x2501;&#x2501;&#x2501;&#x2501;&#x2501;&#x2501;&#x2501;&#x2501;&#xF3A;&#x2740;&#xF3B;&#x2501;&#x2501;&#x2501;&#x2501;&#x2501;&#x2501;&#x2501;&#x2501;&NewLine;">
<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="80">
<meta name="text:Link 1" content="Sample link 1"> <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=-qygBCOXWYM">
<meta name="text:Link 2" content=""> <meta name="text:Link 2" content="">
<meta name="text:Link 2 URL" content=""> <meta name="text:Link 2 URL" content="">
<meta name="text:Link 3" content=""> <meta name="text:Link 3" content="">
@ -279,16 +446,16 @@ $(document).ready(function(){
#s-m-t-tooltip { #s-m-t-tooltip {
padding: 4px 9px; padding: 4px 9px;
margin: 26px 9px 0px 15px; margin: 26px 9px 0px 15px;
background-color: {color:description background}; background-color: {color:desc background};
border-radius:5px; border-radius:5px;
border:1px solid {color:description bottom border}; border:1px solid {color:desc bottom border};
font-family: karla; font-family: karla;
font-size: calc({text:font size}px - 3px); font-size: calc({select:font size} - 3px);
letter-spacing: 1px; letter-spacing: 1px;
text-transform: uppercase; text-transform: uppercase;
color: {color:description text}; color: {color:desc text};
z-index:99999999999999999999999999998!important; z-index:99999999999999999999999999998!important;
max-width: calc({text:post width}px * 0.8); max-width: calc({select:post width} * 0.8);
-webkit-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out;
@ -355,7 +522,7 @@ color:{color:text};
cursor:normal; cursor:normal;
font-family:open sans; font-family:open sans;
line-height:1.6em; line-height:1.6em;
font-size:{text:font size}px; font-size:{select:font size};
text-align:left; text-align:left;
overflow-x:hidden; overflow-x:hidden;
} }
@ -393,7 +560,7 @@ hr {
background-color:rgba({RGBcolor:text},0.3); 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--------------------*/ /*--------------------LINKS--------------------*/
a { a {
@ -415,7 +582,7 @@ a:hover {text-decoration:none;}
img {opacity:1;text-decoration:none;} img {opacity:1;text-decoration:none;}
h1 { h1 {
font-size:calc({text:font size}px + 1px); font-size:calc({select:font size} + 1px);
font-family:quicksand; font-family:quicksand;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 2px; letter-spacing: 2px;
@ -430,15 +597,15 @@ h1 {
#container { #container {
position:absolute; position:absolute;
margin:0 auto; margin:0 auto;
margin-top:calc({text:post margin}px + 28px); margin-top:calc({select:post spacing} + 28px);
margin-bottom:calc({text:post margin}px + 28px); margin-bottom:calc({select:post spacing} + 28px);
top:0;left:0;right:0; top:0;left:0;right:0;
width:calc(406px + {text:sidebar right margin}px + {text:post width}px + ({text:post padding}px * 2)); width:calc(406px + {select:center gap} + {select:post width} + ({select:post padding} * 2));
} }
#nudge { #nudge {
margin-left:calc(406px + {text:sidebar right margin}px); margin-left:calc(406px + {select:center gap});
} }
#sidehoe { #sidehoe {
@ -613,19 +780,19 @@ h1 {
/*--------------------TOP DESC--------------------*/ /*--------------------TOP DESC--------------------*/
#desk { #desk {
margin-bottom:{text:post margin}px; margin-bottom:{select:post spacing};
width:calc({text:post width}px + ({text:post padding}px * 2)); width:calc({select:post width} + ({select:post padding} * 2));
} }
#title { #title {
width:100%; width:100%;
padding:10px 12px; padding:10px 12px;
background-color:{color:description title background}; background-color:{color:desc title background};
font-family:silkscreen; font-family:silkscreen;
text-transform:uppercase; text-transform:uppercase;
font-size:9px; font-size:9px;
line-height:1em; line-height:1em;
color:{color:description title}; color:{color:desc title};
} }
#titleflex, #bordflex { #titleflex, #bordflex {
@ -638,79 +805,79 @@ h1 {
} }
.bord1 { .bord1 {
background-color:{color:description title border 1}; background-color:{color:desc title border 1};
} }
.bord2 { .bord2 {
background-color:{color:description title border 2}; background-color:{color:desc title border 2};
} }
.bord3 { .bord3 {
background-color:{color:description title border 3}; background-color:{color:desc title border 3};
} }
#descholder { #descholder {
margin-top:0px; margin-top:0px;
width:calc(100% - ({text:description padding}px * 2)); width:calc(100% - ({select:desc padding} * 2));
min-height:calc(100px - ({text:description padding}px * 2)); min-height:calc(100px - ({select:desc padding} * 2));
background-color:{color:description background}; background-color:{color:desc background};
padding:{text:description padding}px; padding:{select:desc padding};
border-bottom:3px solid {color:description bottom border}; border-bottom:3px solid {color:desc bottom border};
} }
.desc-ico { .desc-ico {
float:left; float:left;
margin-right:20px; margin-right:20px;
width:auto; width:auto;
height:{text:description height}px; height:{select:desc height};
} }
.desc { .desc {
height:{text:description height}px; height:{select:desc height};
font-size:12px; font-size:12px;
color:{color:description text}; color:{color:desc text};
line-height:1.7em; line-height:1.7em;
overflow:auto; overflow:auto;
text-align:justify; text-align:justify;
padding-right:10px; padding-right:10px;
} }
.desc b {color:{color:description bold};} .desc b {color:{color:desc bold};}
.desc i {color:{color:description italic};} .desc i {color:{color:desc italic};}
.desc a { .desc a {
padding-bottom:1px; padding-bottom:1px;
border-bottom:1px solid rgba({RGBcolor:description link},0.4); border-bottom:1px solid rgba({RGBcolor:desc link},0.4);
color:{color:description link}; color:{color:desc link};
} }
.desc a:hover { .desc a:hover {
border-bottom:1px solid rgba({RGBcolor:description link hover},0.4); border-bottom:1px solid rgba({RGBcolor:desc link hover},0.4);
color:{color:description link hover}; color:{color:desc link hover};
} }
.desc blockquote { .desc blockquote {
padding-left:10px; padding-left:10px;
margin-left:5px; margin-left:5px;
border-left:1px solid rgba({RGBcolor:description text},0.6); border-left:1px solid rgba({RGBcolor:desc text},0.6);
margin:10px; margin:10px;
} }
.desc p:last-child {margin-bottom:0px;} .desc p:last-child {margin-bottom:0px;}
.desc::-webkit-scrollbar { .desc::-webkit-scrollbar {
background-color:{color:description background}; background-color:{color:desc background};
height:13px; height:13px;
width:13px; width:13px;
} }
.desc::-webkit-scrollbar-thumb { .desc::-webkit-scrollbar-thumb {
background-color:rgba({RGBcolor:description text},0.7); background-color:rgba({RGBcolor:desc text},0.7);
border:6px solid {color:description background}; border:6px solid {color:desc background};
} }
.desc::-webkit-scrollbar-track {background-color:{color:description background};} .desc::-webkit-scrollbar-track {background-color:{color:desc background};}
/*--------------------POSTS--------------------*/ /*--------------------POSTS--------------------*/
@ -718,16 +885,16 @@ h1 {
overflow:hidden; overflow:hidden;
{block:PermalinkPage} {block:PermalinkPage}
margin-bottom:{text:post margin}px; margin-bottom:{select:post spacing};
{/block:PermalinkPage} {/block:PermalinkPage}
{block:IndexPage} {block:IndexPage}
margin-bottom:calc({text:post margin}px + 28px); margin-bottom:calc({select:post spacing} + 28px);
{/block:IndexPage} {/block:IndexPage}
{/block:PermalinkPage} {/block:PermalinkPage}
width:{text:post width}px; width:{select:post width};
padding:{text:post padding}px; padding:{select:post padding};
background-color:{color:post}; background-color:{color:post};
border-bottom:3px solid {color:posts bottom border}; border-bottom:3px solid {color:posts bottom border};
} }
@ -750,7 +917,7 @@ border-bottom:3px solid {color:posts bottom border};
.photos, .photos img { .photos, .photos img {
position:relative; position:relative;
overflow:hidden; overflow:hidden;
width:{text:post width}px; width:{select:post width};
{block:IndexPage} {block:IndexPage}
{block:ifphotofade} {block:ifphotofade}
@ -807,9 +974,9 @@ border-bottom:3px solid {color:posts bottom border};
/*--------------------PERMALINK--------------------*/ /*--------------------PERMALINK--------------------*/
.permawrap { .permawrap {
margin-top:{text:post padding}px; margin-top:{select:post padding};
margin-left:-{text:post padding}px; margin-left:-{select:post padding};
padding:{text:post padding}px {text:post padding}px 0px {text:post padding}px; padding:{select:post padding} {select:post padding} 0px {select:post padding};
width:100%; width:100%;
border-top:1px solid rgba({RGBcolor:posts bottom border},0.8); border-top:1px solid rgba({RGBcolor:posts bottom border},0.8);
} }
@ -817,7 +984,7 @@ border-bottom:3px solid {color:posts bottom border};
.perma { .perma {
text-transform:uppercase; text-transform:uppercase;
letter-spacing:1px; letter-spacing:1px;
font-size:calc({text:font size}px - 2.5px); font-size:calc({select:font size} - 2.5px);
} }
.perma a {{color:link};} .perma a {{color:link};}
@ -829,7 +996,7 @@ border-bottom:3px solid {color:posts bottom border};
text-transform:uppercase; text-transform:uppercase;
letter-spacing:1.3px; letter-spacing:1.3px;
line-height:1.5em; line-height:1.5em;
font-size:calc({text:font size}px - 3.5px); font-size:calc({select:font size} - 3.5px);
text-align:right; text-align:right;
} }
@ -846,8 +1013,8 @@ border-bottom:3px solid {color:posts bottom border};
/*--------------------BOT PERMA--------------------*/ /*--------------------BOT PERMA--------------------*/
.botperma { .botperma {
position:absolute; position:absolute;
margin-top:calc(-{text:post margin}px - 28px); margin-top:calc(-{select:post spacing} - 28px);
margin-left:calc(({text:post width}px + ({text:post padding}px * 2)) - 140px); margin-left:calc(({select:post width} + ({select:post padding} * 2)) - 140px);
width:140px; width:140px;
text-align:right; text-align:right;
} }
@ -894,7 +1061,7 @@ border-bottom:3px solid {color:posts bottom border};
/*--------------------POST NOTES--------------------*/ /*--------------------POST NOTES--------------------*/
ol.notes { ol.notes {
width:calc({text:post width}px + ({text:post padding}px * 2)); width:calc({select:post width} + ({select:post padding} * 2));
padding:0px; padding:0px;
margin-top:30px; margin-top:30px;
list-style-type:none; list-style-type:none;
@ -937,7 +1104,7 @@ text-decoration:none;
box-shadow:none !important; box-shadow:none !important;
border-radius:0px !important; border-radius:0px !important;
max-width:none; max-width:none;
padding:{text:post padding}px !important; padding:{select:post padding} !important;
background:{color:post} !important; background:{color:post} !important;
border:1px solid rgba({RGBcolor:text},0.15) !important; border:1px solid rgba({RGBcolor:text},0.15) !important;
} }
@ -957,15 +1124,15 @@ text-align:center;
.daydreamer .sf { .daydreamer .sf {
color:{color:text}; color:{color:text};
padding:7px 10px 2px 10px; padding:7px 10px 2px 10px;
font-size:calc({text:font size}px + 5px); font-size:calc({select:font size} + 5px);
} }
.daydreamer::before { .daydreamer::before {
content:""; content:"";
position:absolute; position:absolute;
margin-top:8px; margin-top:8px;
margin-left:calc(-{text:post width}px / 4); margin-left:calc(-{select:post width} / 4);
width:calc({text:post width}px / 4); width:calc({select:post width} / 4);
height:1px; height:1px;
background:-webkit-linear-gradient(left, transparent 0%, {color:text} 80%, transparent 100%); background:-webkit-linear-gradient(left, transparent 0%, {color:text} 80%, transparent 100%);
} }
@ -975,7 +1142,7 @@ content:"";
position:absolute; position:absolute;
margin-top:8px; margin-top:8px;
margin-left:0px; margin-left:0px;
width:calc({text:post width}px / 4); width:calc({select:post width} / 4);
height:1px; height:1px;
background:-webkit-linear-gradient(right, transparent 0%, {color:text} 80%, transparent 100%); background:-webkit-linear-gradient(right, transparent 0%, {color:text} 80%, transparent 100%);
} }
@ -983,7 +1150,7 @@ background:-webkit-linear-gradient(right, transparent 0%, {color:text} 80%, tran
.quote { .quote {
font-family:Quicksand; font-family:Quicksand;
text-transform:uppercase;letter-spacing:1px; text-transform:uppercase;letter-spacing:1px;
font-size:calc({text:font size}px + 1px); font-size:calc({select:font size} + 1px);
font-weight:bold; font-weight:bold;
text-align:center; text-align:center;
} }
@ -1021,7 +1188,7 @@ font-weight:bold;
.label.odd {color:{color:question and chat text};} .label.odd {color:{color:question and chat text};}
.label.even {color:{color: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---------------------------*/ /*---------------------------ASKS---------------------------*/
.q-wrap { .q-wrap {
@ -1080,7 +1247,7 @@ height:0px;
/*---------------------------VIDEO---------------------------*/ /*---------------------------VIDEO---------------------------*/
.tumblr_video_container { .tumblr_video_container {
width:{text:post width}px!important; width:{select:post width}!important;
height:auto!important; height:auto!important;
max-height:540px!important; max-height:540px!important;
overflow:hidden!important; overflow:hidden!important;
@ -1109,11 +1276,11 @@ height:0px;
} }
/*------------------------BOT PAGI------------------------*/ /*------------------------BOT PAGI------------------------*/
.botpagi { .botpagi {
width:calc({text:post width}px + ({text:post padding}px * 2)); width:calc({select:post width} + ({select:post padding} * 2));
text-align:center; text-align:center;
padding-top:15px; padding-top:15px;
border-top:1px solid rgba({RGBcolor:text},0.15); 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 */ /* 'Current page' number */
@ -1137,47 +1304,6 @@ height:0px;
margin-left:2px; margin-left:2px;
text-align:center; text-align:center;
} }
/*-------------------MUSIC PLAYER-------------------*/
#glenjamin {
position:fixed;
bottom:0;margin-bottom:20px;
left:0;margin-left:20px;
display:flex;
z-index:2;
}
.playy, .pausee {
font-size:13px;
color:{color:music player color};
cursor:pointer;
}
.pausee {
display:none;
margin-right:1.5px;
}
.sonata {
margin-left:10px;
color:{color:music player color};
}
.labeltext {
margin-left:8px;
font-family:courier new;
font-size:9px;
color:{color:music player color};
}
.labeltext a {
padding-bottom:1px;
border-bottom:1px solid rgba({RGBcolor:music player color},0.25);
}
svg {
pointer-events:none;
}
</style> </style>
@ -1186,19 +1312,21 @@ svg {
<body> <body>
{block:ifmusicplayer} {block:ifmusicplayer}
<div id="glenjamin"> <div glenplayer02>
<div class="buttoms" onclick="kaishi();"> <div controls></div>
<a title="play music"><div class="playy">►</div></a>
<a title="pause music"><div class="pausee">❚❚</div></a> <i class="aa-line-icons" icon-name="music-2"></i>
</div>
<!-- SONG NAME HERE -->
<div class="sonata">♫</div> {text:music name}
<div class="labeltext">{text:music name}</div>
<!-- HOW TO CHANGE THE MUSIC -->
<!-- linktr.ee/direct_file_links -->
<audio src="{text:music file URL}" {block:ifmusicvolume}volume="{text:music volume}"{/block:ifmusicvolume}></audio>
</div> </div>
{/block:ifmusicplayer} {/block:ifmusicplayer}
<audio id="tune" src="{text:music file URL}" onended="restart();" type="audio"></audio>
<!---- main shit ----> <!---- main shit ---->
<div id="container"> <div id="container">
@ -1268,7 +1396,7 @@ svg {
<div id="title"> <div id="title">
{block:ifdescriptiontitle} {block:ifdescriptiontitle}
{text:description title} {text:desc title}
{/block:ifdescriptiontitle} {/block:ifdescriptiontitle}
{block:ifnotdescriptiontitle} {block:ifnotdescriptiontitle}