glenthemes

Theme [33]: Sparrow

Aug 31st, 2018 (edited)
6,128
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 46.44 KB | None | 0 0
  1. <!-----------------------------------------------------------------------
  2. Theme [33]: Sparrow
  3. Made by glenthemes
  4.  
  5. Initial release: 2018/08/31
  6. Last updated: 2025/02/28
  7.  
  8. What's new:
  9. ✱ updated saturnicons sheet link
  10.  
  11. TERMS OF USE:
  12. 1) Do not remove the credit.
  13. 2) Do not remove parts of the code without my permission.
  14. 3) Do not claim my codes as your own.
  15. 4) Do not use my works as base codes.
  16. 5) You may add widgets to my themes and pages.
  17. ------------------------------------------------------------------------>
  18.  
  19. <!DOCTYPE html>
  20. <html>
  21.  
  22. <head>
  23.  
  24. <title>{Title}</title>
  25.  
  26. <link rel="shortcut icon" href="{Favicon}">
  27.  
  28. <!--------------------JAVASCRIPTS-------------------->
  29. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  30. <script src="//static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  31. <script>
  32. (function($){
  33. $(document).ready(function(){
  34. $("a[title]").style_my_tooltips({
  35. tip_follows_cursor:true,
  36. tip_delay_time:120,
  37. tip_fade_speed:120,
  38. attribute:"title"
  39. });
  40. });
  41. })(jQuery);
  42. </script>
  43.  
  44. <script>
  45. $(document).ready(function() {
  46. $('iframe.tumblr_audio_player').load( function() {
  47. $('iframe.tumblr_audio_player').contents().find("head")
  48. .append($("<style type='text/css'> .audio-player{background:{color:post buttons background} !important; padding:5px 10px 5px 0px !important} .play-pause{color:{color:post buttons} !important; font-size:15px!important; padding:0 9.5px!important} </style>"));
  49. });
  50. });
  51. </script>
  52.  
  53. <link href="//static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  54. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  55. <script src="//static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  56.  
  57.  
  58. <script>
  59. $(document).ready(function(){
  60. $('.photo-slideshow').pxuPhotoset({
  61. lightbox: true,
  62. rounded: false,
  63. gutter: '{select:photos spacing}',
  64. borderRadius: '0px',
  65. photoset: '.photo-slideshow',
  66. photoWrap: '.photo-data',
  67. photo: '.pxu-photo'
  68. });
  69. });
  70. </script>
  71.  
  72. <script src="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
  73.  
  74. {block:ifsmoothscrolling}
  75. <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.4/SmoothScroll.js"></script>
  76. {/block:ifsmoothscrolling}
  77.  
  78. <link href="//fonts.googleapis.com/css?family=Karla|Open+Sans|Quicksand|Courier+Prime" rel="stylesheet">
  79.  
  80. <link rel="stylesheet" href="//static.tumblr.com/2pnwama/IUZoyg6qw/specialfonts.css">
  81.  
  82. <link href="//saturnicons.gitlab.io/backup/icons.css" rel="stylesheet" crossorigin>
  83.  
  84. <script src="//static.tumblr.com/2pnwama/DLppehqvd/feathericons.js"></script>
  85.  
  86. <script src="https://static.tumblr.com/snld4jp/rTori7q11/gtresizing.js"></script>
  87.  
  88. <link rel="stylesheet" media="screen" href="//assets.tumblr.com/client/prod/standalone/blog-network-npf/index.build.css">
  89.  
  90. <script src="//npf-images-v3.github.io/script.js"></script>
  91. <link rel="stylesheet" href="//npf-images-v3.github.io/recon.css">
  92. <style tmblr-npf>
  93. :root {
  94. --NPF-Caption-Spacing:1em;
  95. --NPF-Image-Spacing:{select:photos spacing};
  96. }
  97.  
  98. a.post_media_photo_anchor, a.post_media_photo_anchor:hover {
  99. padding-bottom:0!important;
  100. border-bottom:none!important;
  101. }
  102.  
  103. .spotify_audio_player {
  104. height:80px!important;
  105. }
  106. </style>
  107.  
  108. <script>
  109. // minimal soundcloud player @ shythemes.tumblr
  110. // shythemes.tumblr.com/post/114792480648
  111. $(document).ready(function(){
  112. var soundcloud_btn = '{color:link}';
  113. $('.soundcloud_audio_player').each(function(){
  114. $(this).attr({ src: $(this).attr('src').split('&')[0] + '&amp;liking=false&amp;sharing=false&amp;auto_play=false&amp;show_comments=false&amp;continuous_play=false&amp;buying=false&amp;show_playcount=false&amp;show_artwork=true&amp;origin=tumblr&amp;color=' + soundcloud_btn.split('#')[1], height: 116, width: '100%' });
  115. });
  116. });
  117. </script>
  118.  
  119. <!-- unblue polls -->
  120. <!-- glenthemes.tumblr.com/post/708014819571302400 -->
  121. <link href="//static.tumblr.com/gtjt4bo/mXBrpdj0n/unblue-polls.css" rel="stylesheet">
  122. <style>
  123. .poll-post {
  124. --Poll-Question-Font-Size: {select:font size};
  125.  
  126. --Poll-Option-Background-Color: transparent;
  127. --Poll-Option-Corner-Rounding: 4px;
  128. --Poll-Option-Border-Size: 1px;
  129. --Poll-Option-Border-Color: rgba({RGBcolor:text},0.2);
  130. --Poll-Option-Padding: 9px;
  131. --Poll-Option-Font-Size: {select:font size};
  132. --Poll-Option-Spacing: 10px;
  133. --Poll-Option-Text-Color: {color:text};
  134.  
  135. --Poll-Option-HOVER-Border-Color: {color:question and chat background};
  136. --Poll-Option-HOVER-Background-Color: {color:question and chat background};
  137. --Poll-Option-HOVER-Text-Color: {color:question and chat text};
  138. --Poll-Option-HOVER-Speed: 0.4s;
  139. }
  140.  
  141. .poll-see-results {
  142. padding-bottom:0!important;
  143. border-bottom:none!important;
  144. font-size:calc(var(--Poll-Option-Font-Size) - 1px)!important;
  145. text-transform:uppercase;
  146. letter-spacing:0.5px;
  147. }
  148. </style>
  149.  
  150. {block:ifmusicplayer}
  151. <!-- music player #02 -->
  152. <!-- glenthpvs.tumblr.com/player02 -->
  153. <link href="//glenthemes.github.io/-music-/glenplayer02.css" rel="stylesheet">
  154. <script src="//glenthemes.github.io/-music-/glenplayer02.js"></script>
  155. <style element="glenplayer02">
  156. :root {
  157. --MusicPlayer-Position:bottom left;
  158. --MusicPlayer-Edge-Offset:20px;
  159.  
  160. --MusicPlayer-Buttons-Size:calc({select:font size} + 1px);
  161. --MusicPlayer-Buttons-Color:{color:music player color};
  162. --MusicPlayer-Buttons-Fill:yes;
  163.  
  164. --MusicPlayer-Note-Size:calc({select:font size} - 1px);
  165. --MusicPlayer-Note-Color:{color:music player color};
  166.  
  167. --MusicPlayer-Spacing-1:7px;
  168. --MusicPlayer-Spacing-2:9px;
  169.  
  170. --MusicPlayer-Text-Size:calc({select:font size} - 1.5px);
  171. --MusicPlayer-Text-Color:{color:music player color};
  172. }
  173.  
  174. [glenplayer02], [glenplayer02] [song-name]{
  175. font-family:"courier prime";
  176. }
  177.  
  178. [glenplayer02] a {
  179. padding-bottom:1px;
  180. border-bottom:1px solid rgba({RGBcolor:music player color},0.25);
  181. }
  182. </style>
  183. {/block:ifmusicplayer}
  184.  
  185. <!-- npf audio player -->
  186. <!-- glenthemes.tumblr.com/post/722160746171072512 -->
  187. <script src="//tmblr-npf-audio.gitlab.io/s/init.js"></script>
  188. <link href="//tmblr-npf-audio.gitlab.io/s/base.css" rel="stylesheet">
  189. <script>
  190. tumblr_npf_audio({
  191. emptyTitleText: "Untitled track",
  192. emptyArtistText: "Untitled artist",
  193. emptyAlbumText: "Untitled album",
  194.  
  195. titleLabel: "Track:",
  196. artistLabel: "Artist:",
  197. albumLabel: "Album:"
  198. });
  199. </script>
  200. <style edit-npf-audio-player>
  201. .npf-audio-wrapper {
  202. --NPF-Audio-Buttons-Size: {select:font size};
  203. --NPF-Audio-Buttons-Color: {color:post buttons};
  204. --NPF-Audio-Buttons-Padding: 10px;
  205. --NPF-Audio-Buttons-Spacing: calc((var(--NPF-Audio-Buttons-Padding) * 2) + 10px);
  206. --NPF-Audio-Image-Spacing: 0.9rem;
  207. }
  208.  
  209. .npf-audio-background {
  210. margin-left:calc(18px + var(--NPF-Audio-Buttons-Padding));
  211. }
  212.  
  213. .npf-audio-play, .npf-audio-pause {
  214. position:relative;
  215. z-index:0;
  216. }
  217.  
  218. .npf-audio-play:after, .npf-audio-pause:after {
  219. content:"";
  220. position:absolute;
  221. top:0;left:0;
  222. margin-top:calc(0px - var(--NPF-Audio-Buttons-Padding));
  223. margin-left:calc(0px - var(--NPF-Audio-Buttons-Padding));
  224. width:calc(100% + (var(--NPF-Audio-Buttons-Padding) * 2));
  225. height:calc(100% + (var(--NPF-Audio-Buttons-Padding) * 2));
  226. background:{color:post buttons background};
  227. border-radius:100%;
  228. z-index:-1;
  229. }
  230.  
  231. .npf-audio-play svg { margin-left:1px; }
  232. .npf-audio-pause svg { margin-left:0; }
  233.  
  234. .npf-audio-title-label,
  235. .npf-audio-artist-label,
  236. .npf-audio-album-label {
  237. color:{color:bold};
  238. text-transform:uppercase;
  239. }
  240.  
  241. figcaption.audio-caption,
  242. figcaption.audio-caption ~ audio[controls],
  243. figcaption.audio-caption img, .npf-audio-image {
  244. display:none;
  245. }
  246. </style>
  247.  
  248. <script src="//glen-npf.gitlab.io/other/neue.js"></script>
  249. <link href="//glen-npf.gitlab.io/other/neue.css" rel="stylesheet">
  250.  
  251. <!--------------------IMAGES-------------------->
  252. <meta name="image:background image" content="//static.tumblr.com/c0a4e7cc4f5c2882a7779a37b63132bf/2pnwama/1wspebb34/tumblr_static_3rkx4t9bgaqscw04kw440skgw.png"/>
  253. <meta name="image:sidebar icon" content="//static.tumblr.com/7531309b96679fe34f4db4de875800b8/2pnwama/fL6pebawc/tumblr_static_f1ut6aal6hc84ooosssgs0kw.png"/>
  254. <meta name="image:sidebar name little icon" content="//static.tumblr.com/86ccf4411dfb90009e19771e1c0a0706/2pnwama/P05pebbd4/tumblr_static_16s3xjcm6wg04k8kcwg00c8gs.png"/>
  255. <meta name="image:description image" content="//78.media.tumblr.com/35e780f5e9d6cd5e1affad95627090a4/tumblr_pea8x3iPvi1qg2f5co5_r1_400.gif"/>
  256.  
  257. <!--------------------COLORS-------------------->
  258. <meta name="color:background" content="#fff"/>
  259. <meta name="color:music player color" content="#222"/>
  260.  
  261. <meta name="color:sidebar default links background" content="#f5f6f7">
  262. <meta name="color:sidebar default links icon" content="#444">
  263. <meta name="color:sidebar default links background hover" content="#6a6f6d">
  264. <meta name="color:sidebar default links icon hover" content="#fff">
  265. <meta name="color:sidebar icon border" content="#f5f6f7"/>
  266. <meta name="color:sidebar icon background" content="#eaedee"/>
  267. <meta name="color:sidebar name background" content="#f5f6f7"/>
  268. <meta name="color:sidebar name left border" content="#eef2ee"/>
  269. <meta name="color:sidebar name" content="#444"/>
  270. <meta name="color:HP bar label" content="#353736"/>
  271. <meta name="color:HP bars" content="#dfe7e0"/>
  272. <meta name="color:HP bar empty" content="#fafafa"/>
  273. <meta name="color:HP bar borders" content="#d4ded5"/>
  274.  
  275. <meta name="color:custom links background" content="#f5f6f7">
  276. <meta name="color:custom links" content="#444">
  277. <meta name="color:custom links left border" content="#eaefeb">
  278. <meta name="color:custom links background hover" content="#6a6f6d">
  279. <meta name="color:custom links hover" content="#fff">
  280. <meta name="color:custom links left border hover" content="#dfe7e0">
  281.  
  282. <meta name="color:desc title background" content="#f5f6f7"/>
  283. <meta name="color:desc title border 1" content="#c2d1c4"/>
  284. <meta name="color:desc title border 2" content="#d0dcd2"/>
  285. <meta name="color:desc title border 3" content="#dfe7e0"/>
  286. <meta name="color:desc title" content="#444"/>
  287. <meta name="color:desc background" content="#fcfcfc"/>
  288. <meta name="color:desc text" content="#999"/>
  289. <meta name="color:desc bold" content="#b7c9c1"/>
  290. <meta name="color:desc italic" content="#688564"/>
  291. <meta name="color:desc link" content="#a2c796"/>
  292. <meta name="color:desc link hover" content="#333"/>
  293. <meta name="color:desc bottom border" content="#eaefeb"/>
  294.  
  295. <meta name="color:post" content="#fff"/>
  296. <meta name="color:posts bottom border" content="#eaefeb"/>
  297. <meta name="color:text" content="#999"/>
  298. <meta name="color:bold" content="#b7c9c1">
  299. <meta name="color:Italic" content="#99b686">
  300. <meta name="color:Link" content="#c2d1c4">
  301. <meta name="color:Link Hover" content="#666">
  302. <meta name="color:question and chat background" content="#fcfcfc"/>
  303. <meta name="color:question and chat text" content="#858585"/>
  304.  
  305. <meta name="color:tags" content="#aaa">
  306. <meta name="color:tags hover" content="#99b686">
  307.  
  308. <meta name="color:post buttons background" content="#eaefeb">
  309. <meta name="color:post buttons" content="#555">
  310.  
  311. <meta name="color:scrollbar" content="#96b09a"/>
  312. <meta name="color:scrollbar background" content="#fefefe"/>
  313.  
  314. <meta name="color:highlight" content="#f7f7f7"/>
  315. <meta name="color:highlighted text" content="#555"/>
  316.  
  317. <!-----------------DROPDOWN OPTS----------------->
  318. <meta name="select:font size" title="12px" content="12px">
  319. <meta name="select:font size" title="11px" content="11px">
  320. <meta name="select:font size" title="13px" content="13px">
  321. <meta name="select:font size" title="14px" content="14px">
  322. <meta name="select:font size" title="15px" content="15px">
  323. <meta name="select:font size" title="16px" content="16px">
  324.  
  325. <meta name="select:desc height" title="100px" content="100px">
  326. <meta name="select:desc height" title="75px" content="75px">
  327. <meta name="select:desc height" title="125px" content="125px">
  328. <meta name="select:desc height" title="150px" content="150px">
  329. <meta name="select:desc height" title="175px" content="175px">
  330. <meta name="select:desc height" title="200px" content="200px">
  331. <meta name="select:desc height" title="225px" content="225px">
  332. <meta name="select:desc height" title="250px" content="250px">
  333. <meta name="select:desc height" title="275px" content="275px">
  334. <meta name="select:desc height" title="300px" content="300px">
  335.  
  336. <meta name="select:desc padding" title="20px" content="20px">
  337. <meta name="select:desc padding" title="5px" content="5px">
  338. <meta name="select:desc padding" title="10px" content="10px">
  339. <meta name="select:desc padding" title="15px" content="15px">
  340. <meta name="select:desc padding" title="25px" content="25px">
  341. <meta name="select:desc padding" title="30px" content="30px">
  342.  
  343. <meta name="select:center gap" title="80px" content="80px">
  344. <meta name="select:center gap" title="30px" content="30px">
  345. <meta name="select:center gap" title="40px" content="40px">
  346. <meta name="select:center gap" title="50px" content="50px">
  347. <meta name="select:center gap" title="60px" content="60px">
  348. <meta name="select:center gap" title="70px" content="70px">
  349. <meta name="select:center gap" title="90px" content="90px">
  350. <meta name="select:center gap" title="100px" content="100px">
  351. <meta name="select:center gap" title="110px" content="110px">
  352. <meta name="select:center gap" title="120px" content="120px">
  353. <meta name="select:center gap" title="130px" content="130px">
  354.  
  355. <meta name="select:post width" title="500px" content="500px">
  356. <meta name="select:post width" title="300px" content="300px">
  357. <meta name="select:post width" title="350px" content="375px">
  358. <meta name="select:post width" title="400px" content="400px">
  359. <meta name="select:post width" title="450px" content="450px">
  360. <meta name="select:post width" title="540px" content="540px">
  361. <meta name="select:post width" title="600px" content="600px">
  362.  
  363. <meta name="select:post padding" title="20px" content="20px">
  364. <meta name="select:post padding" title="10px" content="10px">
  365. <meta name="select:post padding" title="15px" content="15px">
  366. <meta name="select:post padding" title="25px" content="25px">
  367. <meta name="select:post padding" title="30px" content="30px">
  368.  
  369. <meta name="select:photos spacing" title="4px" content="4px">
  370. <meta name="select:photos spacing" title="0px" content="0px">
  371. <meta name="select:photos spacing" title="2px" content="2px">
  372. <meta name="select:photos spacing" title="6px" content="6px">
  373. <meta name="select:photos spacing" title="8px" content="8px">
  374. <meta name="select:photos spacing" title="10px" content="10px">
  375.  
  376. <meta name="select:post spacing" title="40px" content="40px">
  377. <meta name="select:post spacing" title="20px" content="20px">
  378. <meta name="select:post spacing" title="25px" content="25px">
  379. <meta name="select:post spacing" title="30px" content="30px">
  380. <meta name="select:post spacing" title="35px" content="35px">
  381. <meta name="select:post spacing" title="45px" content="45px">
  382. <meta name="select:post spacing" title="50px" content="50px">
  383. <meta name="select:post spacing" title="55px" content="55px">
  384. <meta name="select:post spacing" title="60px" content="60px">
  385.  
  386. <!------------------TOGGLE OPTS------------------>
  387. <meta name="if:music player" content="1" />
  388.  
  389. <meta name="if:photo fade" content="0" />
  390. <meta name="if:monochrome posts" content="0" />
  391. <meta name="if:show tags on main page" content="1" />
  392.  
  393. <meta name="if:smooth scrolling" content="0" />
  394. <meta name="if:small cursor" content="1" />
  395. <meta name="if:dark tumblr controls" content="0" />
  396.  
  397. <!---------------TEXT FIELDS--------------->
  398. <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">
  399. <meta name="text:music name" content="Forest Kingdom (8-bit)">
  400. <meta name="text:music file URL" content="https://rhizo.gitlab.io/nier/Forest_Kingdom__8-bit_.mp3">
  401. <meta name="text:music volume" content="100%">
  402.  
  403. <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;">
  404.  
  405. <meta name="text:sidebar name" content="I need healing">
  406. <meta name="text:HP bar label" content="199/200">
  407. <meta name="text:1st HP bar fill width" content="100%">
  408. <meta name="text:2nd HP bar fill width" content="100%">
  409. <meta name="text:3rd HP bar fill width" content="100%">
  410. <meta name="text:4th HP bar fill width" content="100%">
  411. <meta name="text:5th HP bar fill width" content="100%">
  412. <meta name="text:6th HP bar fill width" content="100%">
  413. <meta name="text:7th HP bar fill width" content="100%">
  414. <meta name="text:8th HP bar fill width" content="96%">
  415.  
  416. <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;">
  417.  
  418. <meta name="text:desc title" content="">
  419.  
  420. <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;">
  421.  
  422. <meta name="text:Link 1" content="Sample link 1">
  423. <meta name="text:Link 1 URL" content="https://www.youtube.com/watch?v=-qygBCOXWYM">
  424. <meta name="text:Link 2" content="">
  425. <meta name="text:Link 2 URL" content="">
  426. <meta name="text:Link 3" content="">
  427. <meta name="text:Link 3 URL" content="">
  428. <meta name="text:Link 4" content="">
  429. <meta name="text:Link 4 URL" content="">
  430. <meta name="text:Link 5" content="">
  431. <meta name="text:Link 5 URL" content="">
  432. <meta name="text:Link 6" content="">
  433. <meta name="text:Link 6 URL" content="">
  434.  
  435. <!-------------------------------------------------------------------->
  436.  
  437. <style type="text/css">
  438.  
  439. @font-face { font-family: "big noodle"; src: url('//glen-assets.github.io/fonts/big_noodle_titling_oblique.ttf'); }
  440.  
  441. @font-face { font-family: "silkscreen"; src: url('//glen-assets.github.io/fonts/silkscreen.ttf'); }
  442.  
  443.  
  444. /*--------------------TOOLTIPS--------------------*/
  445. #s-m-t-tooltip {
  446. padding: 4px 9px;
  447. margin: 26px 9px 0px 15px;
  448. background-color: {color:desc background};
  449. border-radius:5px;
  450. border:1px solid {color:desc bottom border};
  451. font-family: karla;
  452. font-size: calc({select:font size} - 3px);
  453. letter-spacing: 1px;
  454. text-transform: uppercase;
  455. color: {color:desc text};
  456. z-index:99999999999999999999999999998!important;
  457. max-width: calc({select:post width} * 0.8);
  458. -webkit-transition: all 0.3s ease-in-out;
  459. -moz-transition: all 0.3s ease-in-out;
  460. -o-transition: all 0.3s ease-in-out;
  461. }
  462.  
  463. /*--------------------TUMBLR CONTROLS--------------------*/
  464. iframe#tumblr_controls, .iframe-controls--desktop {
  465. top:5px!important;
  466. right:5px!important;
  467. position:fixed!important;
  468.  
  469. {block:ifdarktumblrcontrols}
  470. filter:invert(100%) hue-rotate(180deg);
  471. -webkit-filter:invert(100%) hue-rotate(180deg);
  472. opacity:1;
  473. {/block:ifdarktumblrcontrols}
  474.  
  475. transform:scale(0.8,0.8);
  476. -webkit-transform:scale(0.8,0.8);
  477.  
  478. transform-origin:100% 0;
  479. z-index:999999!important;
  480. transition:0.3s ease-in-out;
  481. }
  482.  
  483. /*--------------------SCROLLBAR--------------------*/
  484. ::-webkit-scrollbar {
  485. background-color:{color:scrollbar background};
  486. height:13px;
  487. width:13px;
  488. }
  489.  
  490. ::-webkit-scrollbar-thumb {
  491. background-color:{color:scrollbar};
  492. border-top:8px solid {color:scrollbar background};
  493. border-right:6px solid {color:scrollbar background};
  494. border-bottom:8px solid {color:scrollbar background};
  495. border-left:6px solid {color:scrollbar background};
  496. }
  497.  
  498. ::-webkit-scrollbar-track {background-color:{color:scrollbar background};}
  499.  
  500. /*--------------------TEXT HIGHLIGHT--------------------*/
  501. ::selection {
  502. background: {color:highlight};
  503. color:{color:highlighted text};
  504. }
  505.  
  506. ::-moz-selection {
  507. background: {color:highlight};
  508. color:{color:highlighted text};
  509. }
  510.  
  511. /*--------------------BASICS--------------------*/
  512. * {
  513. {block:ifsmallcursor}cursor:url(//78.media.tumblr.com/66991e3a24432876aa22db906d5071de/tumblr_pe9t1ipv6S1qg2f5co6_r1_75sq.png), auto;{/block:ifsmallcursor}
  514. }
  515.  
  516. body {
  517. background:{color:background} url({image:background image});
  518. background-attachment:fixed;
  519. background-repeat:repeat;
  520. color:{color:text};
  521. cursor:normal;
  522. font-family:open sans;
  523. line-height:1.6em;
  524. font-size:{select:font size};
  525. text-align:left;
  526. overflow-x:hidden;
  527. }
  528.  
  529. blockquote {
  530. padding-left:10px;
  531. margin-left:5px;
  532. border-left:1px solid;
  533. border-color:rgba({RGBcolor:text},0.6);
  534. margin:10px;
  535. }
  536.  
  537. b, strong {font-weight:bold;color: {color:Bold};}
  538.  
  539. .non a {
  540. padding-bottom:0px!important;
  541. border-bottom:0px solid transparent!important;
  542. }
  543.  
  544. .nonn a {
  545. border-bottom:0px solid transparent!important;
  546. }
  547.  
  548. i, em, .em {color: {color:Italic};}
  549.  
  550. pre, code {
  551. white-space:pre-wrap;
  552. display:block;
  553. }
  554.  
  555. hr {
  556. width:70%;
  557. border-width:0px;
  558. height:1px;
  559. background-color:rgba({RGBcolor:text},0.3);
  560. }
  561.  
  562. p.npf_quirky, p.npf_quote {font-size:calc({select:font size} + 5px);line-height:1em;}
  563.  
  564. /*--------------------LINKS--------------------*/
  565. a {
  566. color:{color:link};
  567. text-decoration:none;
  568. cursor:normal;
  569. }
  570.  
  571. a, svg {
  572. -webkit-transition: all 0.4s ease-in-out;
  573. -moz-transition: all 0.4s ease-in-out;
  574. -o-transition: all 0.4s ease-in-out;
  575. }
  576.  
  577. a[title]:not([href]):hover {cursor:help;}
  578.  
  579. a:hover {text-decoration:none;}
  580.  
  581. img {opacity:1;text-decoration:none;}
  582.  
  583. h1 {
  584. font-size:calc({select:font size} + 1px);
  585. font-family:quicksand;
  586. text-transform: uppercase;
  587. letter-spacing: 2px;
  588. color:{color:text};
  589. text-align:center;
  590. }
  591.  
  592. .pp p:first-child {margin-top:0px;}
  593.  
  594. /*-----------------CONT-----------------*/
  595.  
  596. #container {
  597. position:absolute;
  598. margin:0 auto;
  599. margin-top:calc({select:post spacing} + 28px);
  600. margin-bottom:calc({select:post spacing} + 28px);
  601. top:0;left:0;right:0;
  602. width:calc(406px + {select:center gap} + {select:post width} + ({select:post padding} * 2));
  603. }
  604.  
  605.  
  606. #nudge {
  607. margin-left:calc(406px + {select:center gap});
  608. }
  609.  
  610. #sidehoe {
  611. position:fixed;
  612. top:50%;transform:translateY(-50%);
  613. margin-left:0px;
  614. /* total post width + gap between posts and sb */
  615. width:406px;
  616. }
  617.  
  618. #sidetopwrap {
  619. display:flex;
  620. }
  621.  
  622. #linkus, #left, #right {
  623. -webkit-align-self:center;
  624. align-self:center;
  625. }
  626.  
  627. /* hexagon code by Mohammad Usman on stackoverflow */
  628. /* //stackoverflow.com/questions/7433454#41396720 */
  629. .hexa-frame {
  630. position:relative;
  631. clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  632. background-color:{color:sidebar icon border};
  633. height:132px;
  634. width:112px;
  635. }
  636.  
  637. .hexagon {
  638. position:absolute;
  639. margin-top:16px;
  640. margin-left:16px;
  641. clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  642. background-color:{color:sidebar icon background};
  643. height:100px;
  644. width:80px;
  645. }
  646.  
  647. .hex-img {
  648. margin-left:-10px;
  649. width:100px;
  650. height:100px;
  651. }
  652.  
  653. #right {
  654. display:table;
  655. margin-left:25px;
  656. }
  657.  
  658. .rmid {
  659. display:table-cell;
  660. vertical-align:middle;
  661. }
  662.  
  663. .bubble {
  664. padding:11px 16px;
  665. background-color:{color:sidebar name background};
  666. border-radius:4px;
  667. font-family:big noodle;
  668. text-transform:uppercase;
  669. font-size:18px;
  670. letter-spacing:2px;
  671. color:{color:sidebar name};
  672. line-height:1em;
  673. display:flex;
  674. transform:skewX(-7deg);
  675. border-left:8px solid {color:sidebar name left border};
  676. }
  677.  
  678. .bubble img {
  679. -webkit-align-self:center;
  680. align-self:center;
  681. {block:ifsidebarname}margin-left:5px;{/block:ifsidebarname}
  682. height:calc(1em - 2px);
  683. }
  684.  
  685. .bar-text {
  686. margin-top:20px;
  687. margin-left:6px;
  688. font-family:big noodle;
  689. text-transform:uppercase;
  690. font-size:22px;
  691. letter-spacing:2px;
  692. color:{color:HP bar label};
  693. }
  694.  
  695. .bar-holder {
  696. margin-top:13px;
  697. margin-left:-2px;
  698. display:flex;
  699. }
  700.  
  701. .bar {
  702. position:relative;
  703. margin-left:4px;
  704. width:20px;
  705. height:37px;
  706. background-color:{color:HP bar empty};
  707. transform:skewX(-12deg);
  708. border-radius:2px;
  709. border:1px solid {color:HP bar borders};
  710. overflow:hidden;
  711. }
  712.  
  713. .bar:first-child {
  714. margin-left:8px;
  715. }
  716.  
  717. .fill {
  718. position:absolute;
  719. width:{text:8th HP bar fill width};
  720. height:inherit;
  721. background-color:{color:HP bars};
  722. }
  723.  
  724. #linkus {
  725. margin-right:25px;
  726. max-width:31px;
  727. }
  728.  
  729. #linkus a {
  730. display:inline-block;
  731. margin-bottom:5px;
  732. }
  733.  
  734. #linkus a:last-child {margin-bottom:0px;}
  735.  
  736. #linkus svg {
  737. width:14px;height:14px;
  738. padding:8px;
  739. background-color:{color:sidebar default links background};
  740. border-radius:3px;
  741. color:{color:sidebar default links icon};
  742. stroke-width:1.5px;
  743. }
  744.  
  745. #linkus a:hover svg {
  746. background-color:{color:sidebar default links background hover};
  747. color:{color:sidebar default links icon hover};
  748. }
  749.  
  750. #custard {
  751. margin-top:26px;
  752. margin-left:56px;
  753. width:calc((406px - 56px) + 8px);
  754. }
  755.  
  756. #custard a {
  757. display:inline-block;
  758. margin:4px;
  759. width:81px;
  760. padding:10px;
  761. background-color:{color:custom links background};
  762. border-left:8px solid {color:custom links left border};
  763. font-family:silkscreen;
  764. text-transform:uppercase;
  765. font-size:9px;
  766. color:{color:custom links};
  767. line-height:1em;
  768. text-align:left;
  769. transform:skewX(-8deg);
  770. border-radius:2px;
  771. }
  772.  
  773. #custard a:hover {
  774. background-color:{color:custom links background hover};
  775. color:{color:custom links hover};
  776. border-left:12px solid {color:custom links left border hover};
  777. padding-right:6px;
  778. }
  779.  
  780. /*--------------------TOP DESC--------------------*/
  781. #desk {
  782. margin-bottom:{select:post spacing};
  783. width:calc({select:post width} + ({select:post padding} * 2));
  784. }
  785.  
  786. #title {
  787. width:100%;
  788. padding:10px 12px;
  789. background-color:{color:desc title background};
  790. font-family:silkscreen;
  791. text-transform:uppercase;
  792. font-size:9px;
  793. line-height:1em;
  794. color:{color:desc title};
  795. }
  796.  
  797. #titleflex, #bordflex {
  798. display:flex;
  799. }
  800.  
  801. .bord1, .bord2, .bord3 {
  802. width:10px;
  803. height:100%;
  804. }
  805.  
  806. .bord1 {
  807. background-color:{color:desc title border 1};
  808. }
  809.  
  810. .bord2 {
  811. background-color:{color:desc title border 2};
  812. }
  813.  
  814. .bord3 {
  815. background-color:{color:desc title border 3};
  816. }
  817.  
  818. #descholder {
  819. margin-top:0px;
  820. width:calc(100% - ({select:desc padding} * 2));
  821. min-height:calc(100px - ({select:desc padding} * 2));
  822. background-color:{color:desc background};
  823. padding:{select:desc padding};
  824. border-bottom:3px solid {color:desc bottom border};
  825. }
  826.  
  827. .desc-ico {
  828. float:left;
  829. margin-right:20px;
  830. width:auto;
  831. height:{select:desc height};
  832. }
  833.  
  834. .desc {
  835. height:{select:desc height};
  836. font-size:12px;
  837. color:{color:desc text};
  838. line-height:1.7em;
  839. overflow:auto;
  840. text-align:justify;
  841. padding-right:10px;
  842. }
  843.  
  844. .desc b {color:{color:desc bold};}
  845.  
  846. .desc i {color:{color:desc italic};}
  847.  
  848. .desc a {
  849. padding-bottom:1px;
  850. border-bottom:1px solid rgba({RGBcolor:desc link},0.4);
  851. color:{color:desc link};
  852. }
  853.  
  854. .desc a:hover {
  855. border-bottom:1px solid rgba({RGBcolor:desc link hover},0.4);
  856. color:{color:desc link hover};
  857. }
  858.  
  859. .desc blockquote {
  860. padding-left:10px;
  861. margin-left:5px;
  862. border-left:1px solid rgba({RGBcolor:desc text},0.6);
  863. margin:10px;
  864. }
  865.  
  866. .desc p:last-child {margin-bottom:0px;}
  867.  
  868. .desc::-webkit-scrollbar {
  869. background-color:{color:desc background};
  870. height:13px;
  871. width:13px;
  872. }
  873.  
  874. .desc::-webkit-scrollbar-thumb {
  875. background-color:rgba({RGBcolor:desc text},0.7);
  876. border:6px solid {color:desc background};
  877. }
  878.  
  879. .desc::-webkit-scrollbar-track {background-color:{color:desc background};}
  880.  
  881.  
  882. /*--------------------POSTS--------------------*/
  883. .posts {
  884. overflow:hidden;
  885.  
  886. {block:PermalinkPage}
  887. margin-bottom:{select:post spacing};
  888. {/block:PermalinkPage}
  889.  
  890. {block:IndexPage}
  891. margin-bottom:calc({select:post spacing} + 28px);
  892. {/block:IndexPage}
  893.  
  894. {/block:PermalinkPage}
  895. width:{select:post width};
  896. padding:{select:post padding};
  897. background-color:{color:post};
  898. border-bottom:3px solid {color:posts bottom border};
  899. }
  900.  
  901. {block:PermalinkPage}
  902. .posts:last-of-type {margin-bottom:0px;}
  903. {/block:PermalinkPage}
  904.  
  905. .posts a {
  906. color:{color:link};
  907. padding-bottom:1px;
  908. border-bottom:0.5px solid rgba({RGBcolor:link},0.4);
  909. }
  910.  
  911. .posts a:hover {
  912. color:{color:link hover};
  913. border-bottom:0.5px solid rgba({RGBcolor:link hover},0.4);
  914. }
  915.  
  916. .photos, .photos img {
  917. position:relative;
  918. overflow:hidden;
  919. width:{select:post width};
  920.  
  921. {block:IndexPage}
  922. {block:ifphotofade}
  923. opacity:0.8;
  924. -webkit-transition: all 0.8s ease-in-out;
  925. -moz-transition: all 0.8s ease-in-out;
  926. -o-transition: all 0.8s ease-in-out;
  927. {/block:ifphotofade}
  928.  
  929. {block:ifmonochromeposts}
  930. -webkit-filter:grayscale(100%);
  931. filter:grayscale(100%);
  932. -webkit-transition: all 0.8s ease-in-out;
  933. -moz-transition: all 0.8s ease-in-out;
  934. -o-transition: all 0.8s ease-in-out;
  935. {/block:ifmonochromeposts}
  936. {/block:IndexPage}
  937. }
  938.  
  939. .posts:hover .photos {
  940. opacity:1;
  941. -webkit-filter:grayscale(0%);
  942. filter:grayscale(0%);
  943. }
  944.  
  945. .posts img {
  946. {block:IndexPage}
  947. {block:ifphotofade}
  948. opacity:0.8;
  949. -webkit-transition: all 0.8s ease-in-out;
  950. -moz-transition: all 0.8s ease-in-out;
  951. -o-transition: all 0.8s ease-in-out;
  952. {/block:ifphotofade}
  953.  
  954. {block:ifmonochromeposts}
  955. -webkit-filter:grayscale(100%);
  956. filter:grayscale(100%);
  957. -webkit-transition: all 0.8s ease-in-out;
  958. -moz-transition: all 0.8s ease-in-out;
  959. -o-transition: all 0.8s ease-in-out;
  960. {/block:ifmonochromeposts}
  961. {/block:IndexPage}
  962. }
  963.  
  964. .posts:hover img {
  965. opacity:1;
  966. -webkit-filter:grayscale(0%);
  967. filter:grayscale(0%);
  968. }
  969.  
  970. .posts img, .posts li, .posts blockquote {max-width:100%;height:auto;}
  971.  
  972. .posts iframe {max-width:100%;}
  973.  
  974. /*--------------------PERMALINK--------------------*/
  975. .permawrap {
  976. margin-top:{select:post padding};
  977. margin-left:-{select:post padding};
  978. padding:{select:post padding} {select:post padding} 0px {select:post padding};
  979. width:100%;
  980. border-top:1px solid rgba({RGBcolor:posts bottom border},0.8);
  981. }
  982.  
  983. .perma {
  984. text-transform:uppercase;
  985. letter-spacing:1px;
  986. font-size:calc({select:font size} - 2.5px);
  987. }
  988.  
  989. .perma a {{color:link};}
  990.  
  991. .tagsin {
  992. margin-top:5px;
  993. margin-right:-3px;
  994. font-family:karla;
  995. text-transform:uppercase;
  996. letter-spacing:1.3px;
  997. line-height:1.5em;
  998. font-size:calc({select:font size} - 3.5px);
  999. text-align:right;
  1000. }
  1001.  
  1002. .tagsin a {
  1003. display:inline-block;
  1004. margin:3px;
  1005. color:{color:tags};
  1006. }
  1007.  
  1008. .tagsin a:hover {color:{color:tags hover};}
  1009.  
  1010. .vinegar {float:right;}
  1011.  
  1012. /*--------------------BOT PERMA--------------------*/
  1013. .botperma {
  1014. position:absolute;
  1015. margin-top:calc(-{select:post spacing} - 28px);
  1016. margin-left:calc(({select:post width} + ({select:post padding} * 2)) - 140px);
  1017. width:140px;
  1018. text-align:right;
  1019. }
  1020.  
  1021. .botperma li {
  1022. position:relative;
  1023. display:inline-block;
  1024. margin:0 3px;
  1025. list-style-type:none;
  1026. }
  1027.  
  1028. .botperma li:first-child {margin-left:0px;}
  1029. .botperma li:last-child {margin-right:0px;}
  1030.  
  1031. .botperma svg {
  1032. width:12px;height:12px;
  1033. padding:6px 8px 8px 8px;
  1034. background-color:{color:post buttons background};
  1035. border-radius:0px 0px 3px 3px;
  1036. color:{color:post buttons};
  1037. stroke-width:1.5px;
  1038. }
  1039.  
  1040. /* -- Like + Reblog buttons (1/2) -- */
  1041. /* -- mikedidthis from StackOverflow: //stackoverflow.com/users/2312574/mikedidthis -- */
  1042. /* -- and tutorial by shythemes: //shythemes.tumblr.com/post/147903463743/custom-like-and-reblog-buttons -- */
  1043. /* -- and help from borntobewildcodes -- */
  1044.  
  1045. .botperma .like .like_button {
  1046. position:absolute;
  1047. width:calc(12px + (8px * 2));
  1048. height:calc(12px + (8px * 2));
  1049. }
  1050.  
  1051. .botperma .like .like_button iframe {
  1052. position:absolute;
  1053. top:0;left:0;bottom:0;right:0;
  1054. width:100%;height:100%;
  1055. z-index:2;
  1056. opacity:0.0000001;
  1057. }
  1058.  
  1059. .botperma .like .liked + svg {color:#ec5a5a;}
  1060.  
  1061. /*--------------------POST NOTES--------------------*/
  1062. ol.notes {
  1063. width:calc({select:post width} + ({select:post padding} * 2));
  1064. padding:0px;
  1065. margin-top:30px;
  1066. list-style-type:none;
  1067. }
  1068.  
  1069. ol.notes li.note {
  1070. padding:10px;
  1071. }
  1072.  
  1073. ol.notes li.note img.avatar {
  1074. vertical-align:-4px;
  1075. margin-right:10px;
  1076. width:16px;
  1077. height:16px;
  1078. }
  1079.  
  1080. ol.notes li.note span.action {
  1081. font-weight:none;
  1082. }
  1083.  
  1084. ol.notes li.note .answer_content {
  1085. font-weight:normal;
  1086. }
  1087.  
  1088. ol.notes li.note blockquote {
  1089. padding:4px 10px;
  1090. margin:10px 0px 0px 25px;
  1091. }
  1092.  
  1093. ol.notes li.note blockquote a {
  1094. text-decoration:none;
  1095. }
  1096.  
  1097. /*---------------------------LIGHTBOXES---------------------------*/
  1098. .vignette, #vignette {
  1099. opacity:0;
  1100. }
  1101. .lightbox-image, #tumblr_lightbox img {
  1102. z-index:99999999999999999999999999999 !important;
  1103. box-shadow:none !important;
  1104. border-radius:0px !important;
  1105. max-width:none;
  1106. padding:{select:post padding} !important;
  1107. background:{color:post} !important;
  1108. border:1px solid rgba({RGBcolor:text},0.15) !important;
  1109. }
  1110.  
  1111. .tmblr-lightbox, #tumblr_lightbox {
  1112. background-color:rgba({RGBcolor:post},0.78) !important;
  1113. z-index:99999999999999999999999999999 !important;
  1114. }
  1115.  
  1116. /*---------------------------QUOTES---------------------------*/
  1117. .daydreamer {
  1118. margin-top:6px;
  1119. margin-bottom:10px;
  1120. text-align:center;
  1121. }
  1122.  
  1123. .daydreamer .sf {
  1124. color:{color:text};
  1125. padding:7px 10px 2px 10px;
  1126. font-size:calc({select:font size} + 5px);
  1127. }
  1128.  
  1129. .daydreamer::before {
  1130. content:"";
  1131. position:absolute;
  1132. margin-top:8px;
  1133. margin-left:calc(-{select:post width} / 4);
  1134. width:calc({select:post width} / 4);
  1135. height:1px;
  1136. background:-webkit-linear-gradient(left, transparent 0%, {color:text} 80%, transparent 100%);
  1137. }
  1138.  
  1139. .daydreamer::after {
  1140. content:"";
  1141. position:absolute;
  1142. margin-top:8px;
  1143. margin-left:0px;
  1144. width:calc({select:post width} / 4);
  1145. height:1px;
  1146. background:-webkit-linear-gradient(right, transparent 0%, {color:text} 80%, transparent 100%);
  1147. }
  1148.  
  1149. .quote {
  1150. font-family:Quicksand;
  1151. text-transform:uppercase;letter-spacing:1px;
  1152. font-size:calc({select:font size} + 1px);
  1153. font-weight:bold;
  1154. text-align:center;
  1155. }
  1156.  
  1157. .quotesource {
  1158. text-align:center;
  1159. margin-top:10px;
  1160. }
  1161.  
  1162. /*---------------------------CHATS---------------------------*/
  1163. .chat {
  1164. line-height:2em;
  1165. list-style:none;
  1166. }
  1167.  
  1168. .line.odd {
  1169. background-color:{color:question and chat background};
  1170. padding:5px;
  1171. list-style:none;
  1172. color:{color:question and chat text};
  1173. }
  1174.  
  1175. .line.even {
  1176. background:{color:post};
  1177. padding:5px;
  1178. list-style:none;
  1179. }
  1180.  
  1181. .label.odd, .label.even {
  1182. padding-right:1px;
  1183. text-transform:uppercase;
  1184. font-weight:bold;
  1185. }
  1186.  
  1187. .label.odd {color:{color:question and chat text};}
  1188. .label.even {color:{color:text};}
  1189.  
  1190. p.npf_chat { font-family:Courier; font-size:{select:font size}; }
  1191.  
  1192. /*---------------------------ASKS---------------------------*/
  1193. .q-wrap {
  1194. padding:10px;
  1195. background-color:{color:question and chat background};
  1196. min-height:64px;
  1197. }
  1198.  
  1199. .question {
  1200. margin-left:75px;
  1201. color:{color:question and chat text};
  1202. }
  1203.  
  1204. .askimg {
  1205. position:absolute;
  1206. width:64px;height:64px;
  1207. }
  1208.  
  1209. .asker, .asker b, .asker a, .answer {
  1210. text-transform:uppercase;color:{color:question and chat text};
  1211. }
  1212.  
  1213. .answer {
  1214. margin:0px auto;
  1215. text-transform:none;
  1216. }
  1217.  
  1218. /*---------------------------AUDIO---------------------------*/
  1219. .playerbutton {
  1220. position:absolute;
  1221. margin-top:18.5px;
  1222. margin-left:18.5px;
  1223. width:27px;
  1224. height:27px;
  1225. overflow:hidden;
  1226. border-radius:100%;
  1227. }
  1228.  
  1229. .trackdetails {
  1230. width:auto;
  1231. display:inline-block;
  1232. margin-left:70px;
  1233. padding:5px;
  1234. line-height:1.7;
  1235. }
  1236.  
  1237. .trackdetails b {
  1238. font-weight:normal;
  1239. }
  1240.  
  1241. .audiowrapper {
  1242. position:relative;
  1243. display:inline;
  1244. height:0px;
  1245. }
  1246.  
  1247. /*---------------------------VIDEO---------------------------*/
  1248. .tumblr_video_container {
  1249. width:{select:post width}!important;
  1250. height:auto!important;
  1251. max-height:540px!important;
  1252. overflow:hidden!important;
  1253. {block:IndexPage}
  1254. {block:ifphotofade}
  1255. opacity:0.8;
  1256. -webkit-transition: all 0.8s ease-in-out;
  1257. -moz-transition: all 0.8s ease-in-out;
  1258. -o-transition: all 0.8s ease-in-out;
  1259. {/block:ifphotofade}
  1260.  
  1261. {block:ifmonochromeposts}
  1262. -webkit-filter:grayscale(100%);
  1263. filter:grayscale(100%);
  1264. -webkit-transition: all 0.8s ease-in-out;
  1265. -moz-transition: all 0.8s ease-in-out;
  1266. -o-transition: all 0.8s ease-in-out;
  1267. {/block:ifmonochromeposts}
  1268. {/block:IndexPage}
  1269. }
  1270.  
  1271. .posts:hover .tumblr_video_container {
  1272. opacity:1;
  1273. -webkit-filter:grayscale(0%);
  1274. filter:grayscale(0%);
  1275. }
  1276. /*------------------------BOT PAGI------------------------*/
  1277. .botpagi {
  1278. width:calc({select:post width} + ({select:post padding} * 2));
  1279. text-align:center;
  1280. padding-top:15px;
  1281. border-top:1px solid rgba({RGBcolor:text},0.15);
  1282. margin-bottom:calc(0px - 10px + {select:post spacing});
  1283. }
  1284.  
  1285. /* 'Current page' number */
  1286. .botpagi span {
  1287. font-size:9px;
  1288. color:{color:Text};
  1289. padding:3px 5px;
  1290. width:9px;
  1291. display:inline-block;
  1292. margin-left:5px;
  1293. text-align:center;
  1294. }
  1295.  
  1296. /* Other page numbers */
  1297. .botpagi a {
  1298. font-size:9px;
  1299. color:{color:text};
  1300. padding:3px 5px;
  1301. width:9px;
  1302. display:inline-block;
  1303. margin-left:2px;
  1304. text-align:center;
  1305. }
  1306.  
  1307. </style>
  1308.  
  1309. </head>
  1310.  
  1311. <body>
  1312.  
  1313. {block:ifmusicplayer}
  1314. <div glenplayer02>
  1315. <div controls></div>
  1316.  
  1317. <i class="aa-line-icons" icon-name="music-2"></i>
  1318.  
  1319. <!-- SONG NAME HERE -->
  1320. {text:music name}
  1321.  
  1322. <!-- HOW TO CHANGE THE MUSIC -->
  1323. <!-- linktr.ee/direct_file_links -->
  1324. <audio src="{text:music file URL}" {block:ifmusicvolume}volume="{text:music volume}"{/block:ifmusicvolume}></audio>
  1325.  
  1326. </div>
  1327. {/block:ifmusicplayer}
  1328.  
  1329. <!---- main shit ---->
  1330. <div id="container">
  1331.  
  1332. <div id="sidehoe">
  1333.  
  1334. <div id="sidetopwrap">
  1335. <div id="linkus">
  1336. <a href="/" title="home"><i data-feather="home"></i></a>
  1337. <a href="/ask" title="message"><i data-feather="mail"></i></a>
  1338. <a href="/archive" title="archive"><i data-feather="calendar"></i></a>
  1339. <!--PLEASE DO NOT REMOVE THE CREDIT, THANK YOU!! :)-->
  1340. <a href="//glenthemes.tumblr.com" title="theme by glenthemes"><i data-feather="code"></i></a>
  1341. </div><!--linkus-->
  1342.  
  1343. <div id="left">
  1344. <div class="hexa-frame">
  1345. <div class="hexagon">
  1346. <img class="hex-img" src="{image:sidebar icon}" ondragstart="return false">
  1347. </div><!--hexagon-->
  1348. </div><!--hexa-frame-->
  1349. </div><!--left-->
  1350.  
  1351. <div id="right">
  1352. <div class="rmid">
  1353. <div class="bubble">
  1354. <div class="bubble-text">{text:sidebar name}</div>
  1355. <img src="{image:sidebar name little icon}">
  1356. </div><!--bubble-->
  1357. <div class="bar-text">{text:HP bar label}</div>
  1358.  
  1359. <div class="bar-holder">
  1360. <div class="bar"><div class="fill" style="width:{text:1st HP bar fill width}"></div></div>
  1361. <div class="bar"><div class="fill" style="width:{text:2nd HP bar fill width}"></div></div>
  1362. <div class="bar"><div class="fill" style="width:{text:3rd HP bar fill width}"></div></div>
  1363. <div class="bar"><div class="fill" style="width:{text:4th HP bar fill width}"></div></div>
  1364. <div class="bar"><div class="fill" style="width:{text:5th HP bar fill width}"></div></div>
  1365. <div class="bar"><div class="fill" style="width:{text:6th HP bar fill width}"></div></div>
  1366. <div class="bar"><div class="fill" style="width:{text:7th HP bar fill width}"></div></div>
  1367. <div class="bar"><div class="fill" style="width:{text:8th HP bar fill width}"></div></div>
  1368.  
  1369. </div><!--bar-holder-->
  1370. </div><!--rmid-->
  1371. </div><!--right-->
  1372. </div><!--sidetopwrap-->
  1373.  
  1374. <div id="custard">
  1375. {block:ifLink1}<a href="{text:Link 1 URL}">{text:Link 1}</a>{/block:ifLink1}
  1376. {block:ifLink2}<a href="{text:Link 2 URL}">{text:Link 2}</a>{/block:ifLink2}
  1377. {block:ifLink3}<a href="{text:Link 3 URL}">{text:Link 3}</a>{/block:ifLink3}
  1378. {block:ifLink4}<a href="{text:Link 4 URL}">{text:Link 4}</a>{/block:ifLink4}
  1379. {block:ifLink5}<a href="{text:Link 5 URL}">{text:Link 5}</a>{/block:ifLink5}
  1380. {block:ifLink6}<a href="{text:Link 6 URL}">{text:Link 6}</a>{/block:ifLink6}
  1381. </div>
  1382.  
  1383. </div><!--sidehoe-->
  1384.  
  1385. <div id="nudge">
  1386.  
  1387. <div id="desk">
  1388. <div id="titleflex">
  1389.  
  1390. <div id="bordflex">
  1391. <div class="bord1"></div>
  1392. <div class="bord2"></div>
  1393. <div class="bord3"></div>
  1394. </div><!--bordflex-->
  1395.  
  1396. <div id="title">
  1397. {block:ifdescriptiontitle}
  1398. {text:desc title}
  1399. {/block:ifdescriptiontitle}
  1400.  
  1401. {block:ifnotdescriptiontitle}
  1402. {Title}
  1403. {/block:ifnotdescriptiontitle}
  1404. </div><!--title-->
  1405.  
  1406. </div><!--titleflex-->
  1407.  
  1408. <div id="descholder">
  1409. <img class="desc-ico" src="{image:description image}">
  1410. <div class="desc">{Description}</div>
  1411. </div><!--descholder-->
  1412. </div><!--desk-->
  1413.  
  1414. {block:Posts inlineMediaWidth="1280" inlineNestedMediaWidth="1280"}
  1415. <div class="posts" id="{PostID}" post-type="{PostType}">
  1416.  
  1417.  
  1418. {block:Text}
  1419. {block:Title}<h1>{Title}</h1>{/block:Title}
  1420. <div class="pp">{Body}</div>
  1421. {/block:Text}
  1422.  
  1423.  
  1424. {block:Photo}
  1425.  
  1426. <div class="photos">
  1427. <div class="non">{LinkOpenTag}<a href="#" onclick="Tumblr.Lightbox.init([{ width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, low_res: '{PhotoURL-500}', high_res: '{PhotoURL-HighRes}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="500"></a>{LinkCloseTag}</div></div>
  1428.  
  1429. {block:Caption}{Caption}{/block:Caption}
  1430. {/block:Photo}
  1431.  
  1432.  
  1433. {block:Photoset}
  1434.  
  1435. <div class="photos">
  1436. <div class="non">
  1437. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><div class="pxu-photo"><img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}"></div><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div>
  1438. </div>
  1439. </div>
  1440.  
  1441. {block:Caption}{Caption}{/block:Caption}
  1442. {/block:Photoset}
  1443.  
  1444.  
  1445. {block:Quote}
  1446. <div class="daydreamer"><span class="sf sf-quotation-mark"></span></div>
  1447. <div class="quote">{Quote}</div>
  1448. {block:Source}<div class="quotesource"> — {Source}</div>
  1449. {/block:Source}{/block:Quote}
  1450.  
  1451.  
  1452. {block:Link}
  1453. <h1><div class="non"><a href="{URL}" {Target}>{Name} »</a></div></h1>
  1454. {block:Description}{Description}{/block:Description}
  1455. {/block:Link}
  1456.  
  1457.  
  1458. {block:Chat}
  1459. {block:Title}<h1>{Title}</h1>{/block:Title} <div class="chat"> {block:Lines} <li class="line {Alt}"> {block:Label} <span class="label {Alt}"> {Label}</span> {/block:Label}{Line}</li> {/block:Lines}</div>
  1460. {/block:Chat}
  1461.  
  1462.  
  1463. {block:Audio}
  1464. {block:AudioPlayer}
  1465. <div class="audiowrapper">
  1466. <div class="playerbutton">{AudioPlayer}</div>
  1467.  
  1468. <div class="trackdetails">
  1469. <b>TRACK:</b> {block:TrackName}{TrackName}{/block:TrackName}<br>
  1470.  
  1471. <b>ARTIST:</b> {block:Artist}{Artist}{/block:Artist}<br>
  1472.  
  1473. <b>PLAYS:</b> {FormattedPlayCount}</div>
  1474. </div><!--audiowrapper-->
  1475. {/block:AudioPlayer}
  1476.  
  1477. {block:Caption}
  1478. <div class="caption">{Caption}</div>
  1479. {/block:Caption}
  1480. {/block:Audio}
  1481.  
  1482.  
  1483. {block:Video}
  1484. <div class="video">{Video-500}</div>
  1485. {block:Caption}{Caption}{/block:Caption}
  1486. {/block:Video}
  1487.  
  1488.  
  1489. {block:Answer}
  1490. <div class="q-wrap">
  1491. <img class="askimg" src="{AskerPortraitURL-64}" ondragstart='return false;'>
  1492. <div class="question">
  1493. <div class="asker"><b>{Asker} asked:</b></div>
  1494. {Question}</div><!--question-->
  1495. </div><!--qwrap-->
  1496. <div class="answer">{Answer}</div><!--answer-->
  1497. {/block:Answer}
  1498.  
  1499.  
  1500. {block:IndexPage}
  1501. {block:ifshowtagsonmainpage}
  1502. {block:Date}
  1503. {block:HasTags}
  1504. <div class="tagsin nonn">
  1505. {block:Tags}
  1506. <a href="{TagURL}">#{Tag}</a>
  1507. {/block:Tags}
  1508. </div><!--tagsin-->
  1509. {/block:HasTags}
  1510. {/block:Date}
  1511. {block:ifshowtagsonmainpage}
  1512. {/block:IndexPage}
  1513.  
  1514. {block:PermalinkPage}
  1515. {block:Date}
  1516. {block:HasTags}
  1517. <div class="tagsin nonn">
  1518. {block:Tags}
  1519. <a href="{TagURL}">#{Tag}</a>
  1520. {/block:Tags}
  1521. </div><!--tagsin-->
  1522. {/block:HasTags}
  1523. {/block:Date}
  1524. {/block:PermalinkPage}
  1525.  
  1526.  
  1527. <!-----------PERMA ON PERMAPAGE----------->
  1528. {block:PermalinkPage}
  1529. {block:Date}
  1530. <div class="permawrap">
  1531. <div class="perma">
  1532. {DayOfMonth}{DayOfMonthSuffix} {Month} {Year} @ {12Hour}:{Minutes}{AMPM} with {NoteCountWithLabel}
  1533.  
  1534. <div class="vinegar nonn">
  1535. {block:RebloggedFrom}
  1536. <a href="{ReblogParentURL}" title="{ReblogParentName}">via</a>
  1537. {block:ContentSource}
  1538. &nbsp;/&nbsp;<a href="{ReblogRootURL}" title="{ReblogRootName}">source</a>
  1539. {/block:ContentSource}
  1540. {/block:RebloggedFrom}
  1541. </div><!--vinegar-->
  1542. </div><!--perma-->
  1543. </div><!--permawrap-->
  1544. {block:Date}
  1545. {block:PermalinkPage}
  1546.  
  1547.  
  1548.  
  1549. </div><!--posts-->
  1550.  
  1551.  
  1552.  
  1553. <!----POST CONTROLS---->
  1554. {block:IndexPage}
  1555. <div class="botperma">
  1556.  
  1557. <li><a href="{Permalink}" title="{TimeAgo}"><i data-feather="bookmark"></i></a></li>
  1558.  
  1559. <li><a href="{Permalink}" title="{NoteCountWithLabel}"><i data-feather="activity"></i></a></li>
  1560.  
  1561. <li><a href="{ReblogURL}" target="_blank" title="reblog"><i data-feather="refresh-cw"></i></a></li>
  1562.  
  1563. <li class="like"><a title="like this post?">{LikeButton}
  1564. <i data-feather="heart"></i>
  1565. </a></li>
  1566. </div><!--botperma-->
  1567. {/block:IndexPage}
  1568.  
  1569.  
  1570. {block:PostNotes}
  1571. {PostNotes}
  1572. {/block:PostNotes}
  1573.  
  1574. {/block:Posts}
  1575.  
  1576.  
  1577.  
  1578. {block:Pagination}
  1579. <div class="botpagi">
  1580. {block:PreviousPage}<a title="Previous Page" href="{PreviousPage}">«</a>{/block:PreviousPage}
  1581. {block:JumpPagination length="6"}
  1582. {block:CurrentPage}<span class="current_page">✗</span>{/block:CurrentPage}
  1583. {block:JumpPage}<a href="{URL}" title="page {PageNumber}">{PageNumber}</a> {/block:JumpPage}
  1584. {/block:JumpPagination}
  1585. {block:NextPage}<a title="Next Page" href="{NextPage}">»</a>{/block:NextPage}
  1586. </div>
  1587. {/block:Pagination}
  1588.  
  1589. </div><!--nudge-->
  1590. </div><!--cont-->
  1591.  
  1592. <script>feather.replace()</script>
  1593.  
  1594. </body>
  1595. </html>
Advertisement
Add Comment
Please, Sign In to add comment