API tools faq
paste
glenthemes

Theme [22]: Moonfall

glenthemes
Feb 7th, 2017 (edited)
19,984
1
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 50.16 KB | None | 1 0
raw download clone embed print report
  1. <!-----------------------------------------------------------------------
  2. Theme [22]: Moonfall
  3. Made by glenthemes
  4.  
  5. Initial release: 2017/02/08
  6. Last updated: 2023/07/28
  7.  
  8. What's new:
  9. ✱ sidebar width options [image, description]
  10. ✱ NPF audio post support
  11. ✱ ⟦ font size ⟧ option now *actually* affects the font size.
  12.  
  13. TERMS OF USE:
  14. 1) Do not remove the theme credit.
  15. 2) Do not repost/redistribute my themes.
  16. 3) Do not take parts of the code and use it as your own.
  17. 4) Do not use my themes as a base code.
  18. 5) Do not mix my themes together.
  19. ------------------------------------------------------------------------>
  20.  
  21. <!DOCTYPE html>
  22. <html>
  23.  
  24. <head>
  25.  
  26. <title>{Title}</title>
  27.  
  28. <link rel="shortcut icon" href="{Favicon}">
  29.  
  30. <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
  31.  
  32. <link rel="stylesheet" href="//cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  33.  
  34. <!--------------------JAVASCRIPTS-------------------->
  35.  
  36. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  37.  
  38. <script src="//static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  39. <script>
  40. (function($){
  41. $(document).ready(function(){
  42. $("a[title]").style_my_tooltips({
  43. tip_follows_cursor:true,
  44. tip_delay_time:120,
  45. tip_fade_speed:120,
  46. attribute:"title"
  47. });
  48. });
  49. })(jQuery);
  50. </script>
  51.  
  52. <script>
  53. $(document).ready(function() {
  54. $('iframe.tumblr_audio_player').load( function() {
  55. $('iframe.tumblr_audio_player').contents().find("head")
  56. .append($("<style type='text/css'> .audio-player{background:{color:bold text background} !important; padding:5px 10px 5px 0px !important;} </style>"));
  57. $('iframe.tumblr_audio_player').contents().find("head")
  58. .append($("<style type='text/css'> .play-pause{color:{color:bold} !important; font-size:15px!important; padding:0 9.5px!important} </style>"));
  59. });
  60. });
  61. </script>
  62.  
  63. <script>
  64. $(document).ready(function(){
  65. $("button").click(function() {
  66. $('html, body').animate({
  67. scrollTop: $("#botbar").offset().top+100
  68. }, 1800);
  69. });});
  70. </script>
  71.  
  72. {block:IndexPage}
  73. {block:ifheadercontent}
  74. <script>
  75. $(function(){
  76. var side = $('#sb').offset().top;
  77. $(window).scroll(function(){
  78. if( $(window).scrollTop() >= side ) {
  79. $('#sb').css({position: 'fixed', top: '110px'});
  80. } else {
  81. $('#sb').css({position: 'absolute', top: '110px'});
  82. }
  83. });
  84. });
  85. </script>
  86. {/block:ifheadercontent}
  87. {/block:IndexPage}
  88.  
  89.  
  90. <script>
  91. $(document).ready(function() {
  92. $('a#clickbutton').click(function() {
  93. $('.t',this).toggle();
  94. $('#updates').fadeToggle();
  95. });
  96.  
  97. });
  98. </script>
  99.  
  100.  
  101. {block:ifsmoothscrolling}
  102. <script src="//cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.4/SmoothScroll.js"></script>
  103. {/block:ifsmoothscrolling}
  104.  
  105. <link href="//fonts.googleapis.com/css?family=Karla" rel="stylesheet">
  106.  
  107. <link rel="stylesheet" media="screen" href="//assets.tumblr.com/client/prod/standalone/blog-network-npf/index.build.css">
  108.  
  109. <script src="//npf-images-v3.github.io/script.js"></script>
  110. <link rel="stylesheet" href="//npf-images-v3.github.io/recon.css">
  111. <style tmblr-npf>
  112. :root {
  113. --NPF-Caption-Spacing:1em;
  114. --NPF-Image-Spacing:{select:photos spacing};
  115. }
  116.  
  117. a.post_media_photo_anchor {
  118. padding-bottom:0!important;
  119. border-bottom:none!important;
  120. }
  121.  
  122. .spotify_audio_player {
  123. height:80px!important;
  124. }
  125. </style>
  126.  
  127. <script>
  128. // minimal soundcloud player @ shythemes.tumblr
  129. // shythemes.tumblr.com/post/114792480648
  130. $(document).ready(function(){
  131. var soundcloud_btn = '{color:link}';
  132. $('.soundcloud_audio_player').each(function(){
  133. $(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%' });
  134. });
  135. });
  136. </script>
  137.  
  138. <!-- unblue polls -->
  139. <!-- glenthemes.tumblr.com/post/708014819571302400 -->
  140. <link href="//static.tumblr.com/gtjt4bo/mXBrpdj0n/unblue-polls.css" rel="stylesheet">
  141. <style unblue-polls>
  142. .poll-post {
  143. --Poll-Question-Font-Size: {select:font size};
  144.  
  145. --Poll-Option-Background-Color: transparent;
  146. --Poll-Option-Corner-Rounding: 4px;
  147. --Poll-Option-Border-Size: 1px;
  148. --Poll-Option-Border-Color: rgba({RGBcolor:text},0.25);
  149. --Poll-Option-Padding: 10px;
  150. --Poll-Option-Font-Size: {select:font size};
  151. --Poll-Option-Spacing: 10px;
  152. --Poll-Option-Text-Color: {color:text};
  153.  
  154. --Poll-Option-HOVER-Border-Color: rgba({RGBcolor:text},0.25);
  155. --Poll-Option-HOVER-Background-Color: transparent;
  156. --Poll-Option-HOVER-Text-Color: {color:link};
  157. --Poll-Option-HOVER-Speed: 0.4s;
  158. }
  159.  
  160. .poll-see-results {
  161. padding-bottom:0!important;
  162. border-bottom:none!important;
  163. font-size:calc(var(--Poll-Option-Font-Size) - 1px)!important;
  164. text-transform:uppercase;
  165. letter-spacing:0.5px;
  166. }
  167. </style>
  168.  
  169. <!-- npf audio player -->
  170. <!-- glenthemes.tumblr.com/post/722160746171072512 -->
  171. <script src="//tmblr-npf-audio.gitlab.io/s/init.js"></script>
  172. <link href="//tmblr-npf-audio.gitlab.io/s/base.css" rel="stylesheet">
  173. <script>
  174. tumblr_npf_audio({
  175. emptyTitleText: "Untitled track",
  176. emptyArtistText: "Untitled artist",
  177. emptyAlbumText: "Untitled album",
  178.  
  179. titleLabel: "Track:",
  180. artistLabel: "Artist:",
  181. albumLabel: "Album:"
  182. });
  183. </script>
  184. <style edit-npf-audio-player>
  185. .npf-audio-wrapper {
  186. --NPF-Audio-Buttons-Size: {select:font size};
  187. --NPF-Audio-Buttons-Color: {color:bold};
  188. --NPF-Audio-Buttons-Padding: 14px;
  189. --NPF-Audio-Buttons-Spacing: calc((var(--NPF-Audio-Buttons-Padding) * 2) + 10px);
  190. --NPF-Audio-Image-Spacing: 0.9rem;
  191. }
  192.  
  193. .npf-audio-background {
  194. margin-left:calc(18px + var(--NPF-Audio-Buttons-Padding));
  195. }
  196.  
  197. .npf-audio-play, .npf-audio-pause {
  198. position:relative;
  199. z-index:0;
  200. }
  201.  
  202. .npf-audio-play:after, .npf-audio-pause:after {
  203. content:"";
  204. position:absolute;
  205. top:0;left:0;
  206. margin-top:calc(0px - var(--NPF-Audio-Buttons-Padding));
  207. margin-left:calc(0px - var(--NPF-Audio-Buttons-Padding));
  208. width:calc(100% + (var(--NPF-Audio-Buttons-Padding) * 2));
  209. height:calc(100% + (var(--NPF-Audio-Buttons-Padding) * 2));
  210. background:{color:bold text background};
  211. border-radius:100%;
  212. z-index:-1;
  213. }
  214.  
  215. .npf-audio-play svg { margin-left:1px; }
  216. .npf-audio-pause svg { margin-left:0; }
  217.  
  218. .npf-audio-title-label,
  219. .npf-audio-artist-label,
  220. .npf-audio-album-label {
  221. color:{color:bold};
  222. text-transform:uppercase;
  223. }
  224.  
  225. figcaption.audio-caption,
  226. figcaption.audio-caption ~ audio[controls],
  227. figcaption.audio-caption img, .npf-audio-image {
  228. display:none;
  229. }
  230. </style>
  231.  
  232. <script src="//glen-npf.gitlab.io/other/neue.js"></script>
  233. <link href="//glen-npf.gitlab.io/other/neue.css" rel="stylesheet">
  234.  
  235. <!--------------------IMAGES-------------------->
  236.  
  237. <meta name="image:background image" content="//static.tumblr.com/18ff7605554871c7c2b4a605be59ce6e/2pnwama/VYJovqk1v/tumblr_static_d7ou6t3s2y8s40804c8go04cg.png"/>
  238. <meta name="image:bottom bar background" content="https://rhizo.gitlab.io/random/images/Ky8nj56.png"/>
  239. <meta name="image:post container background" content="https://static.tumblr.com/2pnwama/tHns1x83h/2b7eg4b.png"/>
  240. <meta name="image:sidebar image" content="https://rhizo.gitlab.io/random/images/WvFi8aC.png"/>
  241.  
  242. <!--------------------COLORS-------------------->
  243.  
  244. <meta name="color:background" content="#10080a"/>
  245. <meta name="color:music player color" content="#0D0203">
  246. <meta name="color:music player background" content="#0D0203">
  247. <meta name="color:music player text" content="#b5a7ba">
  248. <meta name="color:post" content="#0d0203"/>
  249. <meta name="color:text" content="#baa1af"/>
  250. <meta name="color:bold" content="#eee">
  251. <meta name="color:bold text background" content="#170a10">
  252. <meta name="color:Italic" content="#ccc">
  253. <meta name="color:Link" content="#c884a0">
  254. <meta name="color:Link Hover" content="#fff">
  255. <meta name="color:top bar background" content="#170a10">
  256. <meta name="color:top bar text" content="#b5a7ba">
  257. <meta name="color:bot bar background" content="#0d0203"/>
  258. <meta name="color:permalink background" content="#170a10">
  259. <meta name="color:permalink text" content="#cccccc">
  260. <meta name="color:permalink link" content="#b5a7ba">
  261. <meta name="color:question background" content="#170a10">
  262. <meta name="color:chat odd" content="#170a10">
  263. <meta name="color:chat even" content="#0d0203">
  264. <meta name="color:scrollbar" content="#473546">
  265. <meta name="color:scrollbar bg" content="#170a10"/>
  266. <meta name="color:highlight" content="#170a10">
  267. <meta name="color:highlighted text" content="#c5c5c5">
  268.  
  269. <!------------------DROPDOWN OPTS------------------>
  270.  
  271. <meta name="select:font size" title="12px" content="12px">
  272. <meta name="select:font size" title="11px" content="11px">
  273. <meta name="select:font size" title="13px" content="13px">
  274. <meta name="select:font size" title="14px" content="14px">
  275. <meta name="select:font size" title="15px" content="15px">
  276. <meta name="select:font size" title="16px" content="16px">
  277.  
  278. <meta name="select:post width" title="500px" content="500px">
  279. <meta name="select:post width" title="300px" content="300px">
  280. <meta name="select:post width" title="350px" content="375px">
  281. <meta name="select:post width" title="400px" content="400px">
  282. <meta name="select:post width" title="450px" content="450px">
  283. <meta name="select:post width" title="540px" content="540px">
  284. <meta name="select:post width" title="600px" content="600px">
  285.  
  286. <meta name="select:post padding" title="10px" content="10px">
  287. <meta name="select:post padding" title="15px" content="15px">
  288. <meta name="select:post padding" title="20px" content="20px">
  289. <meta name="select:post padding" title="25px" content="25px">
  290.  
  291. <meta name="select:photos spacing" title="10px" content="10px">
  292. <meta name="select:photos spacing" title="0px" content="0px">
  293. <meta name="select:photos spacing" title="2px" content="2px">
  294. <meta name="select:photos spacing" title="4px" content="4px">
  295. <meta name="select:photos spacing" title="6px" content="6px">
  296. <meta name="select:photos spacing" title="8px" content="8px">
  297.  
  298. <meta name="select:post spacing" title="75px" content="75px">
  299. <meta name="select:post spacing" title="40px" content="40px">
  300. <meta name="select:post spacing" title="45px" content="45px">
  301. <meta name="select:post spacing" title="50px" content="50px">
  302. <meta name="select:post spacing" title="55px" content="55px">
  303. <meta name="select:post spacing" title="60px" content="60px">
  304. <meta name="select:post spacing" title="70px" content="70px">
  305. <meta name="select:post spacing" title="80px" content="80px">
  306. <meta name="select:post spacing" title="85px" content="85px">
  307. <meta name="select:post spacing" title="90px" content="90px">
  308. <meta name="select:post spacing" title="95px" content="95px">
  309. <meta name="select:post spacing" title="100px" content="100px">
  310.  
  311. <meta name="select:sidebar left gap" title="70px" content="70px">
  312. <meta name="select:sidebar left gap" title="40px" content="40px">
  313. <meta name="select:sidebar left gap" title="45px" content="45px">
  314. <meta name="select:sidebar left gap" title="50px" content="50px">
  315. <meta name="select:sidebar left gap" title="55px" content="55px">
  316. <meta name="select:sidebar left gap" title="60px" content="60px">
  317. <meta name="select:sidebar left gap" title="65px" content="65px">
  318. <meta name="select:sidebar left gap" title="75px" content="75px">
  319. <meta name="select:sidebar left gap" title="80px" content="80px">
  320. <meta name="select:sidebar left gap" title="85px" content="85px">
  321. <meta name="select:sidebar left gap" title="90px" content="90px">
  322. <meta name="select:sidebar left gap" title="95px" content="95px">
  323. <meta name="select:sidebar left gap" title="100px" content="100px">
  324.  
  325. <meta name="select:sidebar image width" title="150px" content="150px">
  326. <meta name="select:sidebar image width" title="100px" content="100px">
  327. <meta name="select:sidebar image width" title="125px" content="125px">
  328. <meta name="select:sidebar image width" title="175px" content="175px">
  329. <meta name="select:sidebar image width" title="200px" content="200px">
  330. <meta name="select:sidebar image width" title="225px" content="225px">
  331. <meta name="select:sidebar image width" title="250px" content="250px">
  332. <meta name="select:sidebar image width" title="300px" content="300px">
  333.  
  334. <meta name="select:desc width" title="280px" content="280px">
  335. <meta name="select:desc width" title="180px" content="180px">
  336. <meta name="select:desc width" title="200px" content="200px">
  337. <meta name="select:desc width" title="220px" content="220px">
  338. <meta name="select:desc width" title="240px" content="240px">
  339. <meta name="select:desc width" title="260px" content="260px">
  340. <meta name="select:desc width" title="300px" content="300px">
  341. <meta name="select:desc width" title="320px" content="320px">
  342. <meta name="select:desc width" title="340px" content="340px">
  343. <meta name="select:desc width" title="360px" content="360px">
  344. <meta name="select:desc width" title="380px" content="380px">
  345. <meta name="select:desc width" title="400px" content="400px">
  346. <meta name="select:desc width" title="420px" content="420px">
  347.  
  348. <meta name="select:desc text align" title="center" content="center">
  349. <meta name="select:desc text align" title="left" content="left">
  350. <meta name="select:desc text align" title="right" content="right">
  351. <meta name="select:desc text align" title="justify" content="justify">
  352.  
  353. <!------------------TOGGLE OPTS------------------>
  354.  
  355. <meta name="if:show music player" content="1" />
  356. <meta name="if:smooth scrolling" content="0" />
  357. <meta name="if:scroll to top button" content="1" />
  358. <meta name="if:header content" content="1" />
  359. <meta name="if:background gradient" content="0" />
  360. <meta name="if:photo fade" content="0" />
  361. <meta name="if:monochrome posts" content="0" />
  362. <meta name="if:transparent posts" content="1" />
  363. <meta name="if:updates tab" content="0" />
  364. <meta name="if:dark tumblr controls" content="0" />
  365.  
  366. <!--------------------TITLES-------------------->
  367.  
  368. <meta name="text:how to link music" content="linktr.ee/direct_file_links">
  369. <meta name="text:music player mp3 URL" content="https://rhizo.gitlab.io/m/Blood_Moon_Diana.mp3">
  370. <meta name="text:music player song name" content="Blood Moon Diana">
  371.  
  372. <meta name="text:&#917536;&#x200B;" content="&#x263D;&#x2727;&#xA8;&#x2A;&#x3003;&#x2E;&#xB8;&#xB8;&#x2727;&#xB8;&#xB8;&#x2E;&#x3003;&#x2A;&#xA8;&#x2727;&#x263E;&NewLine;">
  373.  
  374. <meta name="text:&#x1F96E;&#x2002;icons list" content="linearicons.com/free#cheat-sheet">
  375. <meta name="text:top bar title icon" content="lnr-moon">
  376. <meta name="text:top bar text 1" content="here's some text">
  377. <meta name="text:top bar text 2" content="here's more text">
  378. <meta name="text:updates box" content="Your updates here">
  379. <meta name="text:bottom bar title" content="here's a title">
  380. <meta name="text:bottom bar text" content="here's some text">
  381.  
  382. <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;">
  383.  
  384. <meta name="text:Link 1" content="Sample link">
  385. <meta name="text:Link 1 URL" content="https://www.youtube.com/watch?v=6opktP4VBN0">
  386. <meta name="text:Link 2" content="">
  387. <meta name="text:Link 2 URL" content="">
  388. <meta name="text:Link 3" content="">
  389. <meta name="text:Link 3 URL" content="">
  390. <meta name="text:Link 4" content="">
  391. <meta name="text:Link 4 URL" content="">
  392. <meta name="text:Link 5" content="">
  393. <meta name="text:Link 5 URL" content="">
  394. <meta name="text:Link 6" content="">
  395. <meta name="text:Link 6 URL" content="">
  396.  
  397. <!-------------------------------------------------------------------->
  398.  
  399. <style type="text/css">
  400.  
  401. @font-face { font-family: "beaufort"; src: url('//glen-assets.github.io/fonts/Beaufort W01 Regular.ttf'); }
  402.  
  403. /*--------------------TOOLTIPS--------------------*/
  404.  
  405. #s-m-t-tooltip {
  406. padding: 4px 9px;
  407. margin: 26px 9px 0px 15px;
  408. background-color: rgba({RGBcolor:top bar background},0.83);
  409. font-family: beaufort;
  410. font-size: 9px;
  411. letter-spacing: 1px;
  412. text-transform: uppercase;
  413. font-weight:bold;
  414. color: {color:top bar text};
  415. z-index:9999999!important;
  416. max-width:400px;
  417. }
  418.  
  419. /*--------------------TUMBLR CONTROLS--------------------*/
  420.  
  421. iframe#tumblr_controls, .iframe-controls--desktop {
  422. top:58px!important;
  423. right:7px!important;
  424. position:fixed!important;
  425. z-index:999999!important;
  426. transform-origin:100% 0;
  427. transform:scale(0.8,0.8);
  428. opacity:0.6;
  429.  
  430. {block:ifdarktumblrcontrols}
  431. filter:invert(100%) hue-rotate(180deg);
  432. -webkit-filter:invert(100%) hue-rotate(180deg);
  433. {/block:ifdarktumblrcontrols}
  434.  
  435. transition:0.3s ease-in-out;
  436. }
  437.  
  438. iframe#tumblr_controls:hover, .iframe-controls--desktop:hover {
  439. opacity:0.8;
  440. }
  441.  
  442.  
  443. /*--------------------SCROLLBAR--------------------*/
  444.  
  445. ::-webkit-scrollbar {
  446. width: 4px;
  447. height: 4px;
  448. }
  449.  
  450. ::-webkit-scrollbar-thumb {
  451. background-color: {color:scrollbar};
  452. }
  453.  
  454. ::-webkit-scrollbar-track {
  455. background-color: {color:scrollbar bg};
  456. }
  457.  
  458.  
  459. /*--------------------SCROLLBAR--------------------*/
  460.  
  461. ::selection {
  462. background: {color:highlight};
  463. color:{color:highlighted text};
  464. }
  465.  
  466. ::-moz-selection {
  467. background: {color:highlight};
  468. color:{color:highlighted text};
  469. }
  470.  
  471.  
  472. /*--------------------BASICS--------------------*/
  473.  
  474. body {
  475. background-color:{color:background};
  476. background-image:url({image:post container background});
  477. background-repeat:repeat;
  478. background-position:center;
  479. background-attachment:fixed;
  480. color:{color:text};
  481. cursor:normal;
  482. font-family:karla;
  483. line-height:1.6em;
  484. font-size:{select:font size};
  485. letter-spacing:0px;
  486. text-align:left;
  487. -webkit-font-smoothing:antialiased;
  488. -moz-osx-font-smoothing:grayscale;
  489. }
  490.  
  491. {block:ifheadercontent}
  492. #background {
  493. will-change:top;
  494. position:absolute;
  495. top:0;
  496. left:0;
  497. width:100%;
  498. height:100vh;
  499. background:{color:background} url({image:background image});
  500. background-attachment:fixed;background-repeat:no-repeat; background-size: cover; background-position:center;
  501. z-index:-7;
  502. }
  503.  
  504. .grad {
  505. position:absolute;
  506. bottom:0;
  507. margin-bottom:0px;
  508. left:0;
  509. background-image:linear-gradient(to bottom, transparent, {color:bot bar background});
  510. width:100%;
  511. padding-top:40%;
  512. {block:ifbackgroundgradient}opacity:1;{/block:ifbackgroundgradient}
  513. {block:ifnotbackgroundgradient}display:none;{/block:ifnotbackgroundgradient}
  514. }
  515.  
  516. #bgb {
  517. position:absolute;
  518. top:0;
  519. left:0;
  520. width:100%;
  521. height:100vh;
  522. background-color:{color:background};
  523. z-index:-8;
  524. }
  525. {/block:ifheadercontent}
  526.  
  527. {block:PermalinkPage}
  528. #background, .grad, #bgb {
  529. display:none;
  530. }
  531. {/block:PermalinkPage}
  532.  
  533. blockquote {
  534. padding-left:10px;
  535. margin-left:5px;
  536. border-left:1px solid;
  537. border-color:{color:link};
  538. margin:10px;
  539. }
  540.  
  541. /*--------------------LINKS--------------------*/
  542.  
  543. a {
  544. color:{color:link};
  545. text-decoration:none;
  546. cursor:normal;
  547. text-decoration:none;
  548. -webkit-transition: all 0.4s ease-in-out;
  549. -moz-transition: all 0.4s ease-in-out;
  550. -o-transition: all 0.4s ease-in-out;
  551. }
  552.  
  553. a:hover {
  554. text-decoration:none;
  555. color: {color:link hover};
  556. }
  557.  
  558. img {
  559. opacity:1;
  560. text-decoration:none;
  561. }
  562.  
  563. h1 {
  564. font-size:13px;
  565. font-family:beaufort;
  566. font-weight:bold;
  567. text-transform:uppercase;
  568. letter-spacing:2px;
  569. text-align:center;
  570. padding:10px;
  571. color:{color:link};
  572. background-color:rgba({RGBcolor:permalink background},0.6);
  573. }
  574.  
  575. /*--------------------BOLDED TEXT--------------------*/
  576.  
  577. .posts b {
  578. color: {color:Bold};
  579. background-color: {color:bold text background};
  580. padding:1px 3px;
  581. }
  582.  
  583. .posts a {
  584. padding-bottom:1px;
  585. border-bottom:0.5px solid rgba({RGBcolor:text},0.4);
  586. }
  587.  
  588. .non a {
  589. padding-bottom:0px;
  590. border-bottom:0px solid transparent;
  591. }
  592.  
  593. t {
  594. font-size:14px;
  595. }
  596.  
  597. pre, code {
  598. white-space:pre-wrap;
  599. }
  600.  
  601. /*--------------------ITALIZED TEXT--------------------*/
  602.  
  603. i, em, .em {
  604. color: {color:Italic};
  605. }
  606.  
  607.  
  608. /*--------------------POST CONTAINER--------------------*/
  609.  
  610. #container {
  611. position:absolute;
  612. margin:0 auto;
  613. {block:ifheadercontent}top:100vh;{/block:ifheadercontent}
  614. {block:ifnotheadercontent}top:0;{/block:ifnotheadercontent}
  615. {block:PermalinkPage}top:0;{/block:PermalinkPage}
  616. padding-top:110px;
  617. left:0;right:0;
  618. width:calc({select:post width} + ({select:post padding} * 2) + {select:sidebar left gap} + {select:desc width});
  619. z-index:-10;
  620. }
  621.  
  622. .semicontainer {
  623. width:calc({select:post width} + ({select:post padding} * 2));
  624. {block:iftransparentposts}opacity:0.83;{/block:iftransparentposts}
  625. {block:ifnottransparentposts}opacity:1;{/block:ifnottransparentposts}
  626. -webkit-transition: all 0.9s ease-in-out;
  627. -moz-transition: all 0.9s ease-in-out;
  628. -o-transition: all 0.9s ease-in-out;
  629. }
  630.  
  631. /*--------------------POSTS--------------------*/
  632.  
  633. .posts {
  634. overflow:hidden;
  635. margin-bottom:{select:post spacing};
  636. width:{select:post width};
  637. padding:{select:post padding};
  638. background-color:{color:post};
  639. font-size:{select:font size};
  640. }
  641.  
  642. .posts a {
  643. color:{color:link};
  644. }
  645.  
  646. .posts a:hover {
  647. color:{color:link hover};
  648. }
  649.  
  650. .photos, .photos img {
  651. position:relative;
  652. overflow:hidden;
  653. width:{select:post width};
  654.  
  655. {block:IndexPage}
  656. {block:ifphotofade}
  657. opacity:0.8;
  658. -webkit-transition: all 0.8s ease-in-out;
  659. -moz-transition: all 0.8s ease-in-out;
  660. -o-transition: all 0.8s ease-in-out;
  661. {/block:ifphotofade}
  662.  
  663. {block:ifmonochromeposts}
  664. -webkit-filter:grayscale(100%);
  665. filter:grayscale(100%);
  666. -webkit-transition: all 0.8s ease-in-out;
  667. -moz-transition: all 0.8s ease-in-out;
  668. -o-transition: all 0.8s ease-in-out;
  669. {/block:ifmonochromeposts}
  670. {/block:IndexPage}
  671. }
  672.  
  673. .posts:hover .photos {
  674. opacity:1;
  675. -webkit-filter:grayscale(0%);
  676. filter:grayscale(0%);
  677. }
  678.  
  679. .posts img {
  680. {block:IndexPage}
  681. {block:ifphotofade}
  682. opacity:0.8;
  683. -webkit-transition: all 0.8s ease-in-out;
  684. -moz-transition: all 0.8s ease-in-out;
  685. -o-transition: all 0.8s ease-in-out;
  686. {/block:ifphotofade}
  687.  
  688. {block:ifmonochromeposts}
  689. -webkit-filter:grayscale(100%);
  690. filter:grayscale(100%);
  691. -webkit-transition: all 0.8s ease-in-out;
  692. -moz-transition: all 0.8s ease-in-out;
  693. -o-transition: all 0.8s ease-in-out;
  694. {/block:ifmonochromeposts}
  695. {/block:IndexPage}
  696. }
  697.  
  698. .posts:hover img {
  699. opacity:1;
  700. -webkit-filter:grayscale(0%);
  701. filter:grayscale(0%);
  702. }
  703.  
  704. .posts img, .posts li, .posts blockquote {max-width:100%;height:auto;}
  705.  
  706. .posts iframe {max-width:100%;}
  707.  
  708. /*--------------------HEADER--------------------*/
  709.  
  710. #topbar {
  711. position:fixed;
  712. margin:0 auto;
  713. top:0;
  714. margin-top:0px;
  715. left:0;
  716. right:0;
  717. height:55px;
  718. width:100%;
  719. background-color:{color:top bar background};
  720. z-index:-4;
  721.  
  722. }
  723.  
  724. #topborder {
  725. margin:0 auto;
  726. top:0;
  727. margin-top:calc(55px - 1.5px);
  728. left:0;
  729. right:0;
  730. height:1.5px;
  731. width:100%;
  732. background-color:rgba({RGBcolor:top bar text},0.22);
  733. }
  734.  
  735. #topicon {
  736. top:0;
  737. margin-top:0px;
  738. left:0;
  739. padding:8px 0px 0px 16px;
  740. }
  741.  
  742. #topicon img {
  743. width:28px;
  744. border-radius:100%;
  745. padding:4.5px;
  746. border:0.7px solid rgba({RGBcolor:top bar text},0.5);
  747. }
  748.  
  749. #topsmall {
  750. top:0;
  751. margin-top:0px;
  752. left:0;
  753. padding:11px 0px 0px 70px;
  754. font-family:beaufort;
  755. text-transform:uppercase;
  756. letter-spacing:2px;
  757. font-weight:bold;
  758. font-size:10px;
  759. color:{color:top bar text};
  760. }
  761.  
  762. #toptits {
  763. top:0;
  764. margin-top:0px;
  765. left:0;
  766. padding:27px 0px 0px 70px;
  767. font-family:beaufort;
  768. text-transform:uppercase;
  769. letter-spacing:2px;
  770. font-weight:bold;
  771. font-size:14px;
  772. color:{color:top bar text};
  773. }
  774.  
  775. #topcenter {
  776. margin:0 auto;
  777. top:0;
  778. margin-top:0px;
  779. left:0;right:0;
  780. padding:19.5px 6px 16.5px 0px;
  781. text-align:center;
  782. font-family:beaufort;
  783. text-transform:uppercase;
  784. font-weight:bold;
  785. font-size:12px;
  786. letter-spacing:1.7px;
  787. color:{color:top bar text};
  788. }
  789.  
  790. #topcenter .lnr {
  791. margin-right:7px;
  792. color:{color:top bar text};
  793. }
  794.  
  795. #topcenter a {
  796. color:rgba({RGBcolor:top bar text},0.74);
  797. letter-spacing:1.3px;
  798. padding:20px 16px 19.5px 16px;
  799. }
  800.  
  801. #topcenter a:hover, #topcenter .alti a:hover {
  802. color:rgba({RGBcolor:top bar text},1);
  803. }
  804.  
  805. #topcenter .alti a {
  806. margin-left:27px;
  807. {block:IndexPage}color:{color:top bar text};{/block:IndexPage}
  808. {block:PermalinkPage}color:rgba({RGBcolor:top bar text},0.74);{/block:PermalinkPage}
  809. {block:IndexPage}border-bottom:1.5px solid {color:top bar text};{/block:IndexPage}
  810. }
  811.  
  812. #topcenter .alti a::before {
  813. content:"";
  814. position:absolute;
  815. margin-top:-12px;
  816. margin-left:-27px;
  817. width:1px;
  818. height:40px;
  819. background:-webkit-linear-gradient(top, transparent, {color:top bar text}, transparent);
  820. }
  821.  
  822. {block:ifupdatestab}
  823. #topright {
  824. top:0;margin-top:0px;
  825. right:0;
  826. padding:19px 21px 21px 19px;
  827. font-family:beaufort;
  828. text-transform:uppercase;
  829. letter-spacing:2px;
  830. font-weight:bold;
  831. font-size:12px;
  832. color:{color:top bar text};
  833. }
  834.  
  835. #topright a {
  836. padding:3px;
  837. margin-right:-3px;
  838. color:{color:top bar text};
  839. }
  840.  
  841. #topright .lnr {
  842. margin-left:5px;
  843. color:{color:top bar text};
  844. }
  845.  
  846. #updates {
  847. display:none;
  848. top:0;margin-top:104px;
  849. right:0;margin-right:12px;
  850. width:210px;
  851. height:auto;
  852. {block:iftransparentposts}background-color:rgba({RGBcolor:top bar background},0.65);{/block:iftransparentposts}
  853. {block:ifnottransparentposts}background-color:rgba({RGBcolor:top bar background},1);{/block:ifnottransparentposts}
  854. padding:10px;
  855. color:{color:top bar text};
  856. font-family:karla;
  857. font-size:{select:font size};
  858. text-transform:none;
  859. {block:iftransparentposts}border-bottom:2px solid rgba({RGBcolor:top bar text},0.65);{/block:iftransparentposts}
  860. {block:ifnottransparentposts}border-bottom:2px solid rgba({RGBcolor:top bar text},1);{/block:ifnottransparentposts}
  861. }
  862. {/block:ifupdatestab}
  863.  
  864. #topborder, #topicon, #topsmall, #toptits, #topcenter, #topright, #updates {
  865. position:fixed;
  866. z-index:-3;
  867. }
  868.  
  869. /*--------------------BOTBAR--------------------*/
  870. {block:IndexPage}
  871. #botbar {
  872. margin:0 auto;
  873. top:calc(100vh - 100px);
  874. left:0;
  875. right:0;
  876. height:100px;
  877. width:100%;
  878. background-color:rgba({RGBcolor:bot bar background},0.83);
  879. background-image:url({image:bottom bar background});
  880. background-repeat:repeat;
  881. background-position:center;
  882. z-index:-6;
  883. }
  884.  
  885. #midbot {
  886. margin:0 auto;
  887. top:calc(100vh - 110px);
  888. left:0;
  889. right:0;
  890. height:120px;
  891. width:430px;
  892. background-color:{color:bot bar background};
  893. z-index:-5;
  894. }
  895.  
  896. #arrup1 {
  897. margin:0 auto;
  898. top:calc(100vh - 154px);
  899. left:0;right:0;
  900. height:0;width:0;
  901. border-bottom:45px solid {color:bot bar background};
  902. border-left:215px solid transparent;
  903. border-right:215px solid transparent;
  904. z-index:-5;
  905. }
  906.  
  907. #arrup2 {
  908. margin:0 auto;
  909. top:calc(100vh + 10px);
  910. left:0;right:0;
  911. height:0;width:0;
  912. border-top:45px solid {color:bot bar background};
  913. border-left:215px solid transparent;
  914. border-right:215px solid transparent;
  915. z-index:-5;
  916. }
  917.  
  918. #chev {
  919. margin:0 auto;
  920. bottom:112px;
  921. margin-bottom:0px;
  922. left:0;right:0;
  923. width:17px;
  924. text-align:center;
  925. z-index:-5;
  926. -webkit-transition: all 1s ease-in-out;
  927. -moz-transition: all 1s ease-in-out;
  928. -o-transition: all 1s ease-in-out;
  929. }
  930.  
  931. #chev .lnr {
  932. font-size:17px;
  933. color:rgba({RGBcolor:top bar text},0.7);
  934. -webkit-transition: all 1s ease-in-out;
  935. -moz-transition: all 1s ease-in-out;
  936. -o-transition: all 1s ease-in-out;
  937. }
  938.  
  939. #chev button {
  940. padding:0px;
  941. background-color:transparent;
  942. border:0px solid transparent;
  943. outline:none;
  944. -webkit-transition: all 0.4s ease-in-out;
  945. -moz-transition: all 0.4s ease-in-out;
  946. -o-transition: all 0.4s ease-in-out;
  947. }
  948.  
  949. #chev button:hover {
  950. -ms-transform: rotate(180deg);
  951. -webkit-transform: rotate(180deg);
  952. transform: rotate(180deg);
  953. -webkit-transition: all 0.4s ease-in-out;
  954. -moz-transition: all 0.4s ease-in-out;
  955. -o-transition: all 0.4s ease-in-out;
  956. }
  957.  
  958. #chev button:hover .lnr {
  959. color:rgba({RGBcolor:top bar text},1);
  960. -webkit-transition: all 0.4s ease-in-out;
  961. -moz-transition: all 0.4s ease-in-out;
  962. -o-transition: all 0.4s ease-in-out;
  963. }
  964.  
  965. #botte {
  966. margin:0 auto;
  967. top:calc(100vh - 110px);
  968. left:0;
  969. right:0;
  970. height:110px;
  971. width:430px;
  972. z-index:-5;
  973. display:table;
  974. }
  975.  
  976. #bottomsup {
  977. display:table-cell;
  978. vertical-align:middle;
  979. }
  980.  
  981. #bottext {
  982. padding:20px;
  983. font-family:beaufort;
  984. text-transform:uppercase;
  985. letter-spacing:3px;
  986. font-size:26px;
  987. color:{color:top bar text};
  988. text-align:center;
  989. }
  990.  
  991. .sub {
  992. {block:ifbottombartext}margin-top:15px;{/block:ifbottombartext}
  993. {block:ifnotbottombartext}margin-top:0px;{/block:ifnotbottombartext}
  994. text-transform:none;
  995. letter-spacing:0.5px;
  996. font-size:12px;
  997. }
  998.  
  999. #botbar, #midbot, #arrup1, #arrup2, #chev, #botte {
  1000. position:absolute;
  1001. }
  1002. {/block:IndexPage}
  1003.  
  1004. {block:PermalinkPage}
  1005. #botbar, #midbot, #arrup1, #arrup2, #chev, #botte {
  1006. display:none;
  1007. }
  1008. {/block:PermalinkPage}
  1009.  
  1010. /*--------------------SIDEBAR--------------------*/
  1011. #sb {
  1012. {block:IndexPage}
  1013. {block:ifheadercontent}
  1014. top:0px;
  1015. position:absolute;
  1016. {/block:ifheadercontent}
  1017. {/block:IndexPage}
  1018.  
  1019. {block:PermalinkPage}position:fixed;{block:PermalinkPage}
  1020. {block:ifnotheadercontent}position:fixed;{block:ifnotheadercontent}
  1021.  
  1022.  
  1023. margin-left:calc(({select:post width} + {select:post padding} * 2) + {select:sidebar left gap});
  1024. width:{select:desc width};
  1025. text-align:{select:desc text align};
  1026. z-index:-10;
  1027. }
  1028.  
  1029. #sbicon, #sbicon img, #desc {
  1030. display:block;
  1031. margin-left:auto;
  1032. margin-right:auto;
  1033. }
  1034.  
  1035. #sbicon img {
  1036. width:{select:sidebar image width};
  1037. height:{select:sidebar image width};
  1038. object-fit:cover;
  1039. border-radius:100%;
  1040. padding:8.5px;
  1041. border:1px solid rgba({RGBcolor:top bar text},0.6);
  1042. background-color:{color:top bar background};
  1043. }
  1044.  
  1045. #desc {
  1046. margin-top:15px;
  1047. padding:10px;
  1048. {block:iftransparentposts}background-color:rgba({RGBcolor:top bar background},0.65);{/block:iftransparentposts}
  1049. {block:ifnottransparentposts}background-color:rgba({RGBcolor:top bar background},1);{/block:ifnottransparentposts}
  1050. font-family:karla;
  1051. font-size:{select:font size};
  1052. {block:iftransparentposts}color:rgba({RGBcolor:top bar text},0.8);{/block:iftransparentposts}
  1053. {block:ifnottransparentposts}color:rgba({RGBcolor:top bar text},1);{/block:ifnottransparentposts}
  1054. text-align:center;
  1055. {block:iftransparentposts}border-bottom:1.5px solid rgba({RGBcolor:top bar text},0.65);{/block:iftransparentposts}
  1056. {block:ifnottransparentposts}border-bottom:1.5px solid rgba({RGBcolor:top bar text},1);{/block:ifnottransparentposts}
  1057. }
  1058.  
  1059. #cl {
  1060. margin-top:10px;
  1061. text-align:center;
  1062. }
  1063.  
  1064. #cl a {
  1065. width:112px;
  1066. height:auto;
  1067. padding:5px 10px;
  1068. {block:iftransparentposts}background-color:rgba({RGBcolor:top bar background},0.65);{/block:iftransparentposts}
  1069. {block:ifnottransparentposts}background-color:rgba({RGBcolor:top bar background},1);{/block:ifnottransparentposts}
  1070. color:{color:top bar text};
  1071. border-bottom:1px solid transparent;
  1072. margin:3px;
  1073. text-transform:uppercase;
  1074. letter-spacing:1px;
  1075. display:inline-block;
  1076. }
  1077.  
  1078. #cl a:hover {
  1079. {block:iftransparentposts}border-bottom:1px solid rgba({RGBcolor:top bar text},0.65);{/block:iftransparentposts}
  1080. {block:ifnottransparentposts}border-bottom:1px solid rgba({RGBcolor:top bar text},1);{/block:ifnottransparentposts}
  1081. }
  1082.  
  1083. /*--------------------PAGINATION--------------------*/
  1084. .pagination {
  1085. padding-top:2px;
  1086. position:absolute;
  1087. width:400px;
  1088. text-align:center;
  1089. margin-top:10px;
  1090. margin-left:60px;
  1091. margin-bottom:20px;
  1092. border-top: 1px solid rgba({RGBcolor:top bar text},0.4);
  1093. }
  1094.  
  1095. /* 'Current page' number */
  1096. .pagination span {
  1097. margin:7px 0;
  1098. font-size:{select:font size};
  1099. background-color:rgba({RGBcolor:top bar background},0.24);
  1100. color:{color:top bar text};
  1101. padding:5px;
  1102. width:9px;
  1103. display:inline-block;
  1104. margin-left:2px;
  1105. text-align:center;
  1106. }
  1107.  
  1108. /* Other page numbers */
  1109. .pagination a {
  1110. margin:7px 0;
  1111. background-color:rgba({RGBcolor:top bar background},1);
  1112. font-size:9px;
  1113. color:{color:top bar text};
  1114. padding:5px;
  1115. width:{select:font size};
  1116. display:inline-block;
  1117. margin-left:2px;
  1118. text-align:center;
  1119. }
  1120.  
  1121. .pagination a:hover {
  1122. background-color:rgba({RGBcolor:top bar background},0.74);
  1123. }
  1124.  
  1125.  
  1126. /*--------------------TAGS--------------------*/
  1127.  
  1128. .tagsin {
  1129. text-transform:uppercase;
  1130. letter-spacing:1px;
  1131. text-align:right;
  1132. font-size:calc({select:font size} - 3px);
  1133. line-height:1.5;
  1134. margin-top:5px;
  1135. margin-right:-5px;
  1136. }
  1137.  
  1138. .tagsin a {
  1139. margin-right:5px;
  1140. color:rgba({RGBcolor:text},0.8);
  1141. padding-bottom:0px;
  1142. border-bottom:0px solid transparent;
  1143. }
  1144.  
  1145. .tagsin a:hover {
  1146. color:rgba({RGBcolor:link},0.8);
  1147. }
  1148.  
  1149. /*--------------------PERMALINK--------------------*/
  1150.  
  1151. #info {
  1152. position:absolute;
  1153. margin-top:{select:post padding};
  1154. margin-left:-{select:post padding};
  1155. width:calc({select:post width} + ({select:post padding} * 2) - 26px);
  1156. padding:8px 13px;
  1157. background-color:{color:permalink background};
  1158. font-family:beaufort;
  1159. text-transform:uppercase;letter-spacing:1px;
  1160. font-size:calc({select:font size} - 2px);
  1161. font-weight:bold;
  1162. border-radius:0px 0px 10px 10px;
  1163. color:{color:permalink text};
  1164. }
  1165.  
  1166. #info a {
  1167. color:{color:permalink link};
  1168. padding-bottom:0px;
  1169. border-bottom:0px solid transparent;
  1170. }
  1171.  
  1172. #info a:hover {
  1173. color: rgba({RGBcolor:permalink link},0.25);
  1174. }
  1175.  
  1176. #info .fa {
  1177. font-size:calc({select:font size} - 2px);
  1178. color: rgba({RGBcolor:permalink link},0.8);
  1179. -webkit-transition: all 0.4s ease-in-out;
  1180. -moz-transition: all 0.4s ease-in-out;
  1181. -o-transition: all 0.4s ease-in-out;
  1182. }
  1183.  
  1184. #info .fa:hover {
  1185. color: rgba({RGBcolor:permalink link},0.25);
  1186. }
  1187.  
  1188. /*--------------------POST NOTES--------------------*/
  1189.  
  1190. ol.notes {
  1191. width:{select:post width};
  1192. padding:{select:post padding};
  1193. margin-bottom:calc({select:post spacing} / 2);
  1194. {block:iftransparentposts}background-color:rgba({RGBcolor:post},0.46);{/block:iftransparentposts}
  1195. {block:ifnottransparentposts}background-color:rgba({RGBcolor:post},1);{/block:ifnottransparentposts}
  1196. list-style-type:none;
  1197. }
  1198.  
  1199. ol.notes li.note {
  1200. padding:10px;
  1201. }
  1202.  
  1203. ol.notes li.note img.avatar {
  1204. vertical-align:-4px;
  1205. margin-right:10px;
  1206. width:16px;
  1207. height:16px;
  1208. }
  1209.  
  1210. ol.notes li.note span.action {
  1211. font-weight:none;
  1212. }
  1213.  
  1214. ol.notes li.note .answer_content {
  1215. font-weight:normal;
  1216. }
  1217.  
  1218. ol.notes li.note blockquote {
  1219. padding:4px 10px;
  1220. margin:10px 0px 0px 25px;
  1221. }
  1222.  
  1223. ol.notes li.note blockquote a {
  1224. text-decoration:none;
  1225. }
  1226.  
  1227. /*---------------------------LIGHTBOXES---------------------------*/
  1228. .vignette, #vignette {
  1229. opacity:0;
  1230. }
  1231. .lightbox-image, #tumblr_lightbox img {
  1232. z-index:99999999999999999999999999999 !important;
  1233. box-shadow:none !important;
  1234. border-radius:0px !important;
  1235. max-width:none;
  1236. margin-top:-{select:post padding} !important;
  1237. padding:{select:post padding} !important;
  1238. background:{color:post} !important;
  1239. border:1px solid rgba({RGBcolor:text},0.15) !important;
  1240. }
  1241.  
  1242. .tmblr-lightbox, #tumblr_lightbox {
  1243. background-color:rgba({RGBcolor:post},0.78) !important;
  1244. z-index:99999999999999999999999999999 !important;
  1245. }
  1246.  
  1247. /*---------------------------QUOTES---------------------------*/
  1248.  
  1249. .quote {
  1250. text-transform:uppercase;
  1251. font-size:12px;
  1252. font-weight:bold;
  1253. text-align:center;
  1254. }
  1255.  
  1256. .quotesource {
  1257. text-align:center;
  1258. margin-top:10px;
  1259. }
  1260.  
  1261.  
  1262. /*---------------------------CHATS---------------------------*/
  1263.  
  1264. .chat {
  1265. line-height:20px;
  1266. list-style:none;
  1267. }
  1268.  
  1269. .line.odd {
  1270. background:{color:chat odd};
  1271. margin-bottom:2px;
  1272. padding:5px;
  1273. list-style:none;
  1274. font-size:inherit;
  1275. }
  1276.  
  1277. .line.even {
  1278. background:{color:chat even};
  1279. margin-bottom:2px;
  1280. padding:5px;
  1281. list-style:none;
  1282. font-size:inherit;
  1283. }
  1284.  
  1285. .label {
  1286. padding-right:1px;
  1287. text-transform:uppercase;
  1288. font-weight:bold;
  1289. color:{color:link};
  1290. }
  1291.  
  1292. .line.odd, .line.even, .label {
  1293. font-size:inherit;
  1294. letter-spacing:inherit;
  1295. }
  1296.  
  1297.  
  1298. /*---------------------------ASKS---------------------------*/
  1299.  
  1300. .question {
  1301. background-color:{color:question background};
  1302. padding:6px;
  1303. }
  1304.  
  1305. .asker {
  1306. text-transform:uppercase;
  1307. }
  1308.  
  1309. .answer {
  1310. padding:5px;
  1311. margin-top:-15px;
  1312. margin-bottom:-15px;
  1313. }
  1314.  
  1315. /*---------------------------AUDIO---------------------------*/
  1316.  
  1317. .playerbutton {
  1318. position:absolute;
  1319. margin-top:18.5px;
  1320. margin-left:18.5px;
  1321. width:27px;
  1322. height:27px;
  1323. overflow:hidden;
  1324. border-radius:100%;
  1325. }
  1326.  
  1327. .trackdetails {
  1328. width:auto;
  1329. display:inline-block;
  1330. margin-left:70px;
  1331. padding:5px;
  1332. line-height:1.8;
  1333. }
  1334.  
  1335. .trackdetails b {
  1336. font-weight:normal;
  1337. }
  1338.  
  1339. .audiowrapper {
  1340. position:relative;
  1341. display:inline;
  1342. height:0px;
  1343. }
  1344.  
  1345. /*---------------------------VIDEO---------------------------*/
  1346. .tumblr_video_container {
  1347. max-height:540px!important;
  1348. overflow:hidden!important;
  1349. }
  1350.  
  1351. video {
  1352. max-width:100%;
  1353. height:auto!important;
  1354. }
  1355.  
  1356. /*------------------------BOT PAGI------------------------*/
  1357. .botpagi {
  1358. margin-bottom:calc({select:post spacing} / 2);
  1359. margin-left:calc(({select:post width} + ({select:post padding} * 2)) * 0.1);
  1360. width:calc(({select:post width} + ({select:post padding} * 2)) * 0.8);
  1361. text-align:center;
  1362. padding-top:8px;
  1363. border-top:1px solid rgba({RGBcolor:top bar text},0.4);
  1364. }
  1365.  
  1366. /* 'Current page' number */
  1367. .botpagi span {
  1368. margin:7px 0;
  1369. font-size:9px;
  1370. color:{color:Text};
  1371. padding:3px 5px;
  1372. width:9px;
  1373. display:inline-block;
  1374. margin-left:5px;
  1375. text-align:center;
  1376. }
  1377.  
  1378. /* Other page numbers */
  1379. .botpagi a {
  1380. margin:7px 0;
  1381. font-size:9px;
  1382. color:{color:text};
  1383. border-bottom:0.5px solid rgba({RGBcolor:text},0.8);
  1384. padding:3px 5px;
  1385. background-color:{color:post};
  1386. width:9px;
  1387. display:inline-block;
  1388. margin-left:2px;
  1389. text-align:center;
  1390. }
  1391.  
  1392. .botpagi a:hover {
  1393. color:{color:text};
  1394. border-bottom:0.5px solid rgba({RGBcolor:text},0.5);
  1395. }
  1396.  
  1397. {block:ifshowmusicplayer}
  1398. /* music player skin by vitanica */
  1399. #musicplayer {
  1400. position:fixed;
  1401. z-index:99;
  1402. bottom:0;margin-bottom:30px;
  1403. left:0;margin-left:20px;
  1404. display:flex;
  1405. -webkit-transition:all .7s ease;
  1406. -moz-transition:all .7s ease;
  1407. -o-transition:all .7s ease;
  1408. transition:all .7s ease;
  1409. }
  1410.  
  1411. #musicplayer > *, .play > * {align-self:center;-webkit-align-self:center}
  1412.  
  1413. .roundthing {
  1414. width:31px;
  1415. height:31px;
  1416. border-radius:100%;
  1417. background:{color:music player color}; /* icon background */
  1418. }
  1419.  
  1420. .roundthing img {
  1421. margin:8px;
  1422. width:15px;
  1423. }
  1424.  
  1425. .midline {
  1426. width:0px;
  1427. height:3px;
  1428. background:{color:music player color};
  1429. -webkit-transition:all .4s ease;
  1430. -moz-transition:all .4s ease;
  1431. -o-transition:all .4s ease;
  1432. transition-delay: .9s;
  1433. -webkit-transition-delay: .9s;
  1434. }
  1435.  
  1436. #musicplayer:hover .midline {
  1437. width:20px;
  1438. transition-delay:0s;
  1439. -webkit-transition-delay:0s;
  1440. }
  1441.  
  1442. .play {
  1443. display:flex;
  1444. min-width:124px;
  1445. height:31px;
  1446. text-align: left;
  1447. padding:0px 10px;
  1448. background: {color:music player background}; /* player background */
  1449. border-left: 3px solid {color:music player color}; /* player border */
  1450. color:{color:music player text};
  1451. opacity: 0;
  1452. -webkit-transition: all .4s ease;
  1453. -moz-transition: all .4s ease;
  1454. -o-transition: all .4s ease;
  1455. transition-delay: .4s;
  1456. -webkit-transition-delay: .4s;
  1457. }
  1458.  
  1459. .music-controls, .music-controls > * {
  1460. user-select:none;
  1461. -webkit-user-select:none;
  1462. width:11px;
  1463. font-size:11px;
  1464. cursor:pointer;
  1465. }
  1466.  
  1467. .pausee {display:none;}
  1468.  
  1469. .playtext {
  1470. margin-left:8px;
  1471. font-family:courier new;
  1472. font-size:9px;
  1473. }
  1474.  
  1475. #musicplayer:hover .play {
  1476. opacity:1;
  1477. transition-delay: .6s;
  1478. -webkit-transition-delay: .6s;
  1479. }
  1480. {/block:ifshowmusicplayer}
  1481.  
  1482. @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  1483. @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  1484. @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  1485.  
  1486.  
  1487. .fade-in {
  1488. opacity:0;
  1489. -webkit-animation:fadeIn ease-in 1;
  1490. -moz-animation:fadeIn ease-in 1;
  1491. animation:fadeIn ease-in 1;
  1492. -webkit-animation-fill-mode:forwards;
  1493. -moz-animation-fill-mode:forwards;
  1494. animation-fill-mode:forwards;
  1495. -webkit-animation-duration:1s;
  1496. -moz-animation-duration:1s; animation-duration:1s; }
  1497.  
  1498. .fade-in.two { -webkit-animation-delay: 1.22s; -moz-animation-delay: 1.22s; animation-delay: 1.22s; }
  1499.  
  1500. /**--**/
  1501.  
  1502. #scrollToTop:link,
  1503. #scrollToTop:visited {
  1504. display: none;
  1505. position: fixed;
  1506. bottom: 25px;
  1507. right: 15px;
  1508. z-index:-1;
  1509. opacity:0.7;
  1510. -webkit-transition: all 1s ease-in-out;
  1511. -moz-transition: all 1s ease-in-out;
  1512. -o-transition: all 1s ease-in-out;
  1513. }
  1514.  
  1515. #scrollToTop .fa {
  1516. font-size:32px;
  1517. color:rgba({RGBcolor:top bar text},0.74);
  1518. }
  1519.  
  1520. #scrollToTop:hover {
  1521. opacity:1;
  1522. color:rgba({RGBcolor:top bar text},1);
  1523. -ms-transform: rotate(360deg);
  1524. -webkit-transform: rotate(360deg);
  1525. transform: rotate(360deg);
  1526. -webkit-transition: all 0.4s ease-in-out;
  1527. -moz-transition: all 0.4s ease-in-out;
  1528. -o-transition: all 0.4s ease-in-out;
  1529. }
  1530.  
  1531. {CustomCSS}
  1532.  
  1533. </style>
  1534. {block:ifscrolltotopbutton}
  1535. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  1536. <script src="//static.tumblr.com/ikeq9mi/DfYl6o46t/scrolltotop.min.js"></script>
  1537. <a href="javascript:;" id="scrollToTop" rel="nofollow" title="Go to Top"><span class="fa fa-arrow-circle-o-up"></span></a>
  1538. {/block:ifscrolltotopbutton}
  1539.  
  1540. <link href="//static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  1541. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  1542. <script src="//static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  1543.  
  1544.  
  1545. <script>
  1546. $(document).ready(function(){
  1547. $('.photo-slideshow').pxuPhotoset({
  1548. lightbox: true,
  1549. rounded: false,
  1550. gutter: '{select:photos spacing}',
  1551. borderRadius: '0px',
  1552. photoset: '.photo-slideshow',
  1553. photoWrap: '.photo-data',
  1554. photo: '.pxu-photo'
  1555. });
  1556. });
  1557. </script>
  1558.  
  1559. <script src="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
  1560.  
  1561. {block:ifshowmusicplayer}
  1562. <script src="//static.tumblr.com/2pnwama/lnLppjutr/gletanica.js"></script>
  1563. {/block:ifshowmusicplayer}
  1564.  
  1565. </head>
  1566.  
  1567. <body>
  1568.  
  1569. <div id="bgb"></div>
  1570. <div id="background" class="box fade-in two">
  1571. <div class="grad"></div>
  1572. </div>
  1573.  
  1574. {block:ifshowmusicplayer}
  1575. <div id="musicplayer" class="box fade-in two">
  1576. <div class="roundthing">
  1577. <!--more music player gifs here:-->
  1578. <!--stewlate.tumblr.com/post/28218185078/music-player-gifs-->
  1579. <img src="//static.tumblr.com/2pnwama/qovp809g1/12-purple.gif"></div>
  1580. <div class="midline"></div>
  1581. <div class="play">
  1582. <div class="music-controls">
  1583. <div class="playy">►</div>
  1584. <div class="pausee">❚❚</div>
  1585. </div>
  1586. <div class="playtext">{text:music player song name}</div>
  1587. </div><!--play-->
  1588.  
  1589. <audio id="tune" src="{text:music player mp3 URL}" type="audio"></audio>
  1590. </div><!--musicplayer-->
  1591. {/block:ifshowmusicplayer}
  1592.  
  1593. <div id="topbar">
  1594. <div id="topborder"></div>
  1595. <div id="topicon"><img src="{PortraitURL-64}"></div>
  1596. <div id="topsmall">{text:top bar text 1}</div>
  1597. <div id="toptits">{text:top bar text 2}</div>
  1598. <div id="topcenter">
  1599. <span class="lnr {text:top bar title icon}"></span>{Name}
  1600. <span class="alti"><a href="/">index</a></span>
  1601. <a href="/ask">message</a>
  1602. <a href="/archive">archive</a>
  1603.  
  1604. <!--PLEASE DO NOT REMOVE THE THEME CREDIT-->
  1605. <a href="//glenthemes.tumblr.com" title="theme by glenthemes">theme</a>
  1606. <!--PLEASE DO NOT REMOVE THE THEME CREDIT-->
  1607. </div>
  1608.  
  1609.  
  1610.  
  1611. {block:ifupdatestab}<div id="topright">
  1612. <a id="clickbutton" class="t" style="cursor:pointer;">
  1613. <span class="t">updates<span class="lnr lnr-menu"></span></span>
  1614. <span class="t" style="display:none">updates<span class="lnr lnr-cross"></span></span></a></div>
  1615. <div id="updates">{text:updates box}
  1616. </div>
  1617. {/block:ifupdatestab}
  1618. </div>
  1619.  
  1620. {block:ifheadercontent}
  1621. <div id="botbar"></div>
  1622. <div id="midbot"></div>
  1623. <div id="arrup1"></div>
  1624. <div id="arrup2"></div>
  1625.  
  1626. <div id="botte">
  1627. <div id="chev"><button type="button" style="cursor:pointer;"><span class="lnr lnr-chevron-up"></span></button>
  1628. </div>
  1629. <div id="bottomsup">
  1630. <div id="bottext">{text:bottom bar title}
  1631. <div class="sub">{text:bottom bar text}</div>
  1632. </div>
  1633. </div>
  1634. </div>
  1635. {/block:ifheadercontent}
  1636.  
  1637. <div id="container" class="box fade-in two">
  1638.  
  1639. <div id="sb">
  1640. <div id="sbicon"><img src="{image:sidebar image}"></div>
  1641. <div id="desc">{Description}</div>
  1642.  
  1643. <div id="cl">
  1644. {block:ifLink1}<a href="{text:Link 1 URL}">{text:Link 1}</a>{/block:ifLink1}
  1645. {block:ifLink2}<a href="{text:Link 2 URL}">{text:Link 2}</a>{/block:ifLink2}
  1646. {block:ifLink3}<a href="{text:Link 3 URL}">{text:Link 3}</a>{/block:ifLink3}
  1647. {block:ifLink4}<a href="{text:Link 4 URL}">{text:Link 4}</a>{/block:ifLink4}
  1648. {block:ifLink5}<a href="{text:Link 5 URL}">{text:Link 5}</a>{/block:ifLink5}
  1649. {block:ifLink6}<a href="{text:Link 6 URL}">{text:Link 6}</a>{/block:ifLink6}
  1650. </div>
  1651.  
  1652. </div>
  1653.  
  1654.  
  1655.  
  1656. <div class="semicontainer">
  1657.  
  1658. {block:Posts inlineMediaWidth="1280" inlineNestedMediaWidth="1280"}
  1659. <div class="posts" post-type="{PostType}">
  1660.  
  1661. {block:Text}
  1662. {block:Title}<h1>{Title}</h1>{/block:Title}
  1663. {Body}
  1664. {/block:Text}
  1665.  
  1666.  
  1667. {block:Photo}
  1668.  
  1669. <div class="photos">
  1670. <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>
  1671.  
  1672. {block:Caption}{Caption}{/block:Caption}
  1673. {/block:Photo}
  1674.  
  1675.  
  1676. {block:Photoset}
  1677.  
  1678. <div class="photos">
  1679. <div class="non">
  1680. <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>
  1681. </div>
  1682. </div>
  1683.  
  1684. {block:Caption}{Caption}{/block:Caption}
  1685. {/block:Photoset}
  1686.  
  1687.  
  1688. {block:Quote}
  1689. <div class="quote">"{Quote}"</div>
  1690. {block:Source}<div class="quotesource"> — {Source}</div>
  1691. {/block:Source}{/block:Quote}
  1692.  
  1693.  
  1694. {block:Link}
  1695. <h1><div class="non"><a href="{URL}" {Target}>{Name} »</a></div></h1>
  1696. {block:Description}{Description}{/block:Description}
  1697. {/block:Link}
  1698.  
  1699.  
  1700. {block:Chat}
  1701. {block:Title}<h1>{Title}</h1>{/block:Title} <div class="chat"> {block:Lines} <li class="line {Alt}"> {block:Label} <span class="label"> {Label}</span> {/block:Label}{Line}</li> {/block:Lines}</div>
  1702. {/block:Chat}
  1703.  
  1704.  
  1705. {block:Audio}
  1706. {block:AudioPlayer}
  1707. <div class="audiowrapper">
  1708. <div class="playerbutton">
  1709. {AudioPlayer}
  1710. </div>
  1711.  
  1712. <div class="trackdetails">
  1713. <b>TRACK:</b> {block:TrackName}{TrackName}{/block:TrackName}<br>
  1714.  
  1715. <b>ARTIST:</b> {block:Artist}{Artist}{/block:Artist}<br>
  1716.  
  1717. <b>PLAYS:</b> {FormattedPlayCount}</div></div>
  1718. {/block:AudioPlayer}
  1719.  
  1720. {block:Caption}
  1721. <div class="caption">{Caption}</div>
  1722. {/block:Caption}
  1723. {/block:Audio}
  1724.  
  1725.  
  1726. {block:Video}
  1727. {Video-500}
  1728. {block:Caption}{Caption}{/block:Caption}
  1729. {/block:Video}
  1730.  
  1731.  
  1732. {block:Answer}
  1733. <div class="question">
  1734. <div class="asker"><b>{Asker} asked:</b></div>
  1735. {Question}</div><br>
  1736. <div class="answer">
  1737. {Answer}</div>
  1738. {/block:Answer}
  1739.  
  1740. {block:PermalinkPage}
  1741. {block:HasTags}
  1742. <div class="tagsin">
  1743. {block:Tags}
  1744. <a href="{TagURL}">#{Tag}</a>
  1745. {/block:Tags}
  1746. </div>
  1747. {/block:HasTags}
  1748. {/block:PermalinkPage}
  1749.  
  1750. {block:Date}
  1751. {block:IndexPage}
  1752.  
  1753. {block:HasTags}
  1754. <div class="tagsin">
  1755. {block:Tags}
  1756. <a href="{TagURL}">#{Tag}</a>
  1757. {/block:Tags}
  1758. </div>
  1759. {/block:HasTags}
  1760.  
  1761.  
  1762.  
  1763.  
  1764. <div id="info">posted on <a href="{Permalink}" title="date">{ShortMonth} {DayOfMonthWithZero}{DayOfMonthSuffix} {Year}</a>&nbsp;&nbsp;•&nbsp;&nbsp;<a href="{Permalink}" title="permalink">{NoteCount} N</a>&nbsp;&nbsp;•&nbsp;&nbsp;<a href="{ReblogURL}" title="reblog?" target="blank"><span class="fa fa-retweet"></span></a>{/block:IndexPage}</div>
  1765.  
  1766.  
  1767. {/block:IndexPage}
  1768. {/block:Date}
  1769.  
  1770. {block:Date}
  1771. {block:PermalinkPage}<div id="info" style="margin-left:0px; margin-top:-{select:post spacing};">posted on <a href="{Permalink}">{ShortMonth} {DayOfMonthWithZero}{DayOfMonthSuffix} '{ShortYear}</a> with <a href="{Permalink}">{NoteCountWithLabel}</a>{block:RebloggedFrom}&nbsp;&nbsp;•&nbsp;&nbsp;<a href="{ReblogParentURL}" title="{ReblogParentName}">via</a>&nbsp;&nbsp;•&nbsp;&nbsp;<a href="{ReblogRootURL}" title="{ReblogRootName}">source</a></div>{/block:RebloggedFrom}{/block:PermalinkPage}
  1772. </div>
  1773. {/block:Date}
  1774.  
  1775.  
  1776. {block:PostNotes}
  1777. {PostNotes}
  1778. {/block:PostNotes}
  1779.  
  1780. {/block:Posts}
  1781.  
  1782.  
  1783. {block:Pagination}
  1784. <div class="botpagi">
  1785. {block:PreviousPage}<a title="Previous Page" href="{PreviousPage}">«</a>{/block:PreviousPage}
  1786. {block:JumpPagination length="8"}
  1787. {block:CurrentPage}<span class="current_page">{PageNumber}</span>{/block:CurrentPage}
  1788. {block:JumpPage}<a href="{URL}" title="page {PageNumber}">{PageNumber}</a> {/block:JumpPage}
  1789. {/block:JumpPagination}
  1790. {block:NextPage}<a title="Next Page" href="{NextPage}">»</a>{/block:NextPage}
  1791. </div>
  1792. {/block:Pagination}
  1793.  
  1794. </div><!--semicontainer-->
  1795. </div><!--cont-->
  1796.  
  1797. </body>
  1798. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!