API tools faq
paste
Advertisement
glenthemes

Theme [23]: Lover's Leap

glenthemes
Apr 12th, 2017 (edited)
10,297
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 32.86 KB | None | 0 0
raw download clone embed print report
  1. <!-----------------------------------------------------------------------
  2. Theme [23]: Lover's Leap
  3. Made by glenthemes
  4.  
  5. Initial release: 2017/04/12
  6. Last updated: 2023/04/30
  7.  
  8. TERMS OF USE:
  9. 1) Do not remove the theme credit.
  10. 2) Do not repost/redistribute my themes.
  11. 3) Do not take parts of the code and use it as your own.
  12. 4) Do not use my themes as a base code.
  13. 5) Do not mix my themes together.
  14. ------------------------------------------------------------------------>
  15.  
  16. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  17. <html xmlns="//www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  18.  
  19. <head>
  20.  
  21. <title>{Title}</title>
  22.  
  23. <link rel="shortcut icon" href="{Favicon}">
  24.  
  25. <link rel="stylesheet" href="//cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  26.  
  27. <!--------------------JAVASCRIPTS-------------------->
  28.  
  29. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  30.  
  31. <script src="//static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  32. <script>
  33. (function($){
  34. $(document).ready(function(){
  35. $("a[title]").style_my_tooltips({
  36. tip_follows_cursor:true,
  37. tip_delay_time:120,
  38. tip_fade_speed:120,
  39. attribute:"title"
  40. });
  41. });
  42. })(jQuery);
  43. </script>
  44.  
  45. <script>
  46. $(document).ready(function() {
  47. $('iframe.tumblr_audio_player').load( function() {
  48. $('iframe.tumblr_audio_player').contents().find("head")
  49. .append($("<style type='text/css'> .audio-player{background:{color:permalink background} !important; padding:5px 10px 5px 0px !important;} </style>"));
  50. $('iframe.tumblr_audio_player').contents().find("head")
  51. .append($("<style type='text/css'> .play-pause{color:{color:permalink link} !important; font-size:15px!important; padding:0 9.5px!important} </style>"));
  52. });
  53. });
  54. </script>
  55.  
  56.  
  57. {block:ifsmoothscrolling}<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.4/SmoothScroll.js"></script>{/block:ifsmoothscrolling}
  58.  
  59. <link rel="stylesheet" href="//static.tumblr.com/2pnwama/WRtoonba6/nozomi.css">
  60.  
  61. <script src="//static.tumblr.com/2pnwama/zaEoonb76/maki.js"></script>
  62.  
  63. <link href="//fonts.googleapis.com/css?family=Karla" rel="stylesheet">
  64.  
  65. <link rel="stylesheet" media="screen" href="//assets.tumblr.com/client/prod/standalone/blog-network-npf/index.build.css">
  66. <!--
  67. NPF images fix v3.0 by @glenthemes [2021]
  68. 💌 git.io/JRBt7
  69. --->
  70. <script src="//npf-images-v3.github.io/script.js"></script>
  71. <link rel="stylesheet" href="//npf-images-v3.github.io/recon.css">
  72. <style tmblr-npf>
  73. :root {
  74. --NPF-Caption-Spacing:1em;
  75. --NPF-Image-Spacing:10px;
  76. }
  77.  
  78. a.post_media_photo_anchor, a.post_media_photo_anchor:hover {
  79. padding-bottom:0!important;
  80. border-bottom:none!important;
  81. }
  82.  
  83. .spotify_audio_player {
  84. height:80px!important;
  85. }
  86. </style>
  87.  
  88. <script>
  89. // minimal soundcloud player @ shythemes.tumblr
  90. // shythemes.tumblr.com/post/114792480648
  91. $(document).ready(function(){
  92. var soundcloud_btn = '{color:link}';
  93. $('.soundcloud_audio_player').each(function(){
  94. $(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%' });
  95. });
  96. });
  97. </script>
  98.  
  99. <!-- unblue polls -->
  100. <!-- glenthemes.tumblr.com/post/708014819571302400 -->
  101. <link href="//static.tumblr.com/gtjt4bo/mXBrpdj0n/unblue-polls.css" rel="stylesheet">
  102. <style>
  103. .poll-post {
  104. --Poll-Question-Font-Size: 11px;
  105.  
  106. --Poll-Option-Background-Color: transparent;
  107. --Poll-Option-Corner-Rounding: 5px;
  108. --Poll-Option-Border-Size: 1px;
  109. --Poll-Option-Border-Color: rgba({RGBcolor:text},0.25);
  110. --Poll-Option-Padding: 10px;
  111. --Poll-Option-Font-Size: 11px;
  112. --Poll-Option-Spacing: 10px;
  113. --Poll-Option-Text-Color: {color:text};
  114.  
  115. --Poll-Option-HOVER-Border-Color: rgba({RGBcolor:text},0.25);
  116. --Poll-Option-HOVER-Background-Color: transparent;
  117. --Poll-Option-HOVER-Text-Color: {color:link};
  118. --Poll-Option-HOVER-Speed: 0.4s;
  119. }
  120. </style>
  121.  
  122. <!--------------------COLORS-------------------->
  123.  
  124. <meta name="color:background" content="#10080a"/>
  125. <meta name="color:post" content="#12030a"/>
  126. <meta name="color:text" content="#baa1af"/>
  127. <meta name="color:bold" content="#eee">
  128. <meta name="color:Italic" content="#e3cebd">
  129. <meta name="color:Link" content="#c884a0">
  130. <meta name="color:Link Hover" content="#fff">
  131. <meta name="color:side title text" content="#fff">
  132. <meta name="color:side title shadow" content="#000">
  133. <meta name="color:permalink background" content="#170a10">
  134. <meta name="color:permalink text" content="#cccccc">
  135. <meta name="color:permalink link" content="#b5a7ba">
  136. <meta name="color:chat odd" content="#170a10">
  137. <meta name="color:chat even" content="#0d0203">
  138. <meta name="color:scrollbar" content="#5b435a">
  139. <meta name="color:scrollbar bg" content="#2a1520"/>
  140. <meta name="color:highlight" content="#52131f">
  141. <meta name="color:highlighted text" content="#c5c5c5">
  142. <meta name="color:music player color" content="#12030a">
  143. <meta name="color:music player background" content="#12030a">
  144. <meta name="color:music player text" content="#baa1af">
  145.  
  146. <!--------------------OPTIONS-------------------->
  147.  
  148. <meta name="select:left corner image" title="top" content="-168px"/>
  149. <meta name="select:left corner image" title="bottom" content="168px"/>
  150. <meta name="select:right corner image" title="top" content="-172px"/>
  151. <meta name="select:right corner image" title="bottom" content="172px"/>
  152.  
  153. <meta name="if:show music player" content="1" />
  154. <meta name="if:sidebar on left" content="0" />
  155. <meta name="if:smooth scrolling" content="0" />
  156. <meta name="if:photo fade" content="0" />
  157. <meta name="if:monochrome posts" content="0" />
  158. <meta name="if:dark tumblr controls" content="0" />
  159. <meta name="if:dark theme credit" content="1" />
  160.  
  161. <!--------------------IMAGES-------------------->
  162.  
  163. <meta name="image:background image" content="//static.tumblr.com/d3abf73adf8482b906afdf07c09da274/gtjt4bo/GMmooaprs/tumblr_static_bv2eufjbysggo48wk0g8ok0og.png"/>
  164. <meta name="image:left corner image" content="//static.tumblr.com/7a637b9bec9d1e360eb8f977d9ecd6d5/gtjt4bo/qxOooaprc/tumblr_static_4qtkjg4orqm88w8kwsskg8o4c.png"/>
  165. <meta name="image:right corner image" content="//static.tumblr.com/c00f3ff677625b1c34c16917becddf05/gtjt4bo/tq6ooaprc/tumblr_static_aug348hnfo8cocosk0koccscw.png"/>
  166. <meta name="image:sidebar image" content="//static.tumblr.com/ba3e1ae62639e8a024599ef803274415/gtjt4bo/ZjPooaprd/tumblr_static_3erhgi78dq04okgowsoggswog.png"/>
  167.  
  168. <!--------------------TITLES-------------------->
  169.  
  170. <meta name="text:music player mp3 URL" content="">
  171. <meta name="text:music player song name" content="">
  172. <meta name="text:side title" content="your title here">
  173. <meta name="text:bottom subtitle" content="your subtitle here">
  174. <meta name="text:Link 1" content="">
  175. <meta name="text:Link 1 URL" content="">
  176. <meta name="text:Link 2" content="">
  177. <meta name="text:Link 2 URL" content="">
  178. <meta name="text:Link 3" content="">
  179. <meta name="text:Link 3 URL" content="">
  180. <meta name="text:Link 4" content="">
  181. <meta name="text:Link 4 URL" content="">
  182. <meta name="text:Link 5" content="">
  183. <meta name="text:Link 5 URL" content="">
  184. <meta name="text:Link 6" content="">
  185. <meta name="text:Link 6 URL" content="">
  186.  
  187. <!-------------------------------------------------------------------->
  188.  
  189. <style type="text/css">
  190.  
  191. @font-face { font-family: "silkscreen"; src: url('//glen-assets.github.io/fonts/silkscreen.ttf'); }
  192.  
  193. @font-face { font-family: "nightingale"; src: url('//glen-assets.github.io/fonts/Nightingale Sample.otf'); }
  194.  
  195. @font-face { font-family: "bitmap"; src: url('//glen-assets.github.io/fonts/BitxMap Font tfb.ttf'); }
  196.  
  197. @font-face { font-family: "tinytots"; src: url('//glen-assets.github.io/fonts/tinytots.ttf'); }
  198.  
  199. /*--------------------TOOLTIPS--------------------*/
  200.  
  201. #s-m-t-tooltip {
  202. padding: 4px 9px;
  203. margin: 26px 9px 0px 15px;
  204. background-color: rgba({RGBcolor:post},0.83);
  205. font-family: silkscreen;
  206. font-size: 8px;
  207. letter-spacing: 0px;
  208. text-transform: uppercase;
  209. color: {color:text};
  210. z-index:9999999!important;
  211. max-width:300px;
  212. }
  213.  
  214. /*--------------------TUMBLR CONTROLS--------------------*/
  215.  
  216. iframe#tumblr_controls, .iframe-controls--desktop {
  217. top:2px!important;
  218. right:2px!important;
  219. position:fixed!important;
  220. z-index:999999!important;
  221. transition:0.5s ease-in-out;
  222. opacity:0.4;
  223. {block:ifdarktumblrcontrols}
  224. filter:invert(100%) hue-rotate(180deg);
  225. -webkit-filter:invert(100%) hue-rotate(180deg);
  226. opacity:1;
  227. {/block:ifdarktumblrcontrols}
  228. z-index:999999!important;
  229. }
  230.  
  231. iframe#tumblr_controls:hover, .iframe-controls--desktop:hover {
  232. opacity:0.6;
  233. }
  234.  
  235. .tmblr-iframe--desktop-logged-in-controls {
  236. font-size:6px;
  237. }
  238.  
  239.  
  240. /*--------------------SCROLLBAR--------------------*/
  241.  
  242. ::-webkit-scrollbar {
  243. width: 4px;
  244. height: 4px;
  245. }
  246.  
  247. ::-webkit-scrollbar-thumb {
  248. border-radius:4px;
  249. background-color: {color:scrollbar};
  250. }
  251.  
  252. ::-webkit-scrollbar-track {
  253. border-radius:4px;
  254. background-color: {color:scrollbar bg};
  255. }
  256.  
  257.  
  258. /*--------------------SCROLLBAR--------------------*/
  259.  
  260. ::selection {
  261. background: {color:highlight};
  262. color:{color:highlighted text};
  263. }
  264.  
  265. ::-moz-selection {
  266. background: {color:highlight};
  267. color:{color:highlighted text};
  268. }
  269.  
  270.  
  271. /*--------------------BASICS--------------------*/
  272.  
  273. body {
  274. background-color:{color:background};
  275. color:{color:text};
  276. cursor:normal;
  277. font-family:bitmap;
  278. line-height:13px;
  279. font-size:10px;
  280. letter-spacing:0px;
  281. text-align:left;
  282. -webkit-font-smoothing:antialiased;
  283. -moz-osx-font-smoothing:grayscale;
  284. }
  285.  
  286. blockquote {
  287. padding-left:7px;
  288. margin-left:7px;
  289. border-left:1px solid;
  290. border-color:{color:link};
  291. margin:7px;
  292. }
  293.  
  294. /*--------------------LINKS--------------------*/
  295.  
  296. a {
  297. color:{color:link};
  298. text-decoration:none;
  299. cursor:normal;
  300. text-decoration:none;
  301. -webkit-transition: all 0.4s ease-in-out;
  302. -moz-transition: all 0.4s ease-in-out;
  303. -o-transition: all 0.4s ease-in-out;
  304. }
  305.  
  306. a:hover {
  307. text-decoration:none;
  308. color: {color:link hover};
  309. }
  310.  
  311. img {
  312. opacity:1;
  313. text-decoration:none;
  314. }
  315.  
  316. h1 {
  317. font-size:10px;
  318. font-family:nightingale;
  319. font-weight:normal;
  320. text-transform:none;
  321. letter-spacing:2px;
  322. text-align:center;
  323. line-height:1.8;
  324. padding:10px;
  325. color:{color:link};
  326. background-color:rgba({RGBcolor:permalink background},0.6);
  327. }
  328.  
  329. .posts b {
  330. font-weight:bold;
  331. color: {color:Bold};
  332. }
  333.  
  334. .posts a {
  335. padding-bottom:1px;
  336. border-bottom:0.5px solid rgba({RGBcolor:text},0.4);
  337. }
  338.  
  339. .non a {
  340. padding-bottom:0px;
  341. border-bottom:0px solid transparent;
  342. }
  343.  
  344. t {
  345. font-size:14px;
  346. }
  347.  
  348. pre, code {
  349. white-space:pre-wrap;
  350. }
  351.  
  352. i, em, .em {
  353. color: {color:Italic};
  354. }
  355.  
  356. /*--------------------BACKGROUND IMAGE--------------------*/
  357.  
  358. #background {
  359. position:fixed;
  360. top:0;
  361. left:0;
  362. width:100%;
  363. height:100vh;
  364. background:{color:background} url({image:background image});
  365. background-attachment:fixed;background-repeat:no-repeat; background-size: cover; background-position:center;
  366. z-index:-100;
  367. }
  368.  
  369. /*--------------------POST CONTAINER--------------------*/
  370. #vh1 {
  371. position:fixed;
  372. top:0;left:0;right:0;
  373. margin:0 auto;
  374. height:100vh;
  375. text-align:center;
  376. }
  377.  
  378. #vh2 {
  379. display:inline-block;
  380. }
  381.  
  382. #vh3 {
  383. height:100vh;
  384. display:table;
  385. }
  386.  
  387. #vh4 {
  388. display:table-cell;
  389. vertical-align:middle;
  390. }
  391.  
  392. #garlic > * {
  393. position:absolute!important;
  394. }
  395.  
  396. #garlic {
  397. position:fixed;
  398. margin-top:5px;
  399. {block:ifsidebaronleft}margin-left:30px;{/block:ifsidebaronleft}
  400. {block:ifnotsidebaronleft}margin-left:-30px;{/block:ifnotsidebaronleft}
  401. }
  402.  
  403. #burrito {
  404. z-index:100;
  405. position:fixed;
  406. overflow-x: none;
  407. overflow-y: auto;
  408. margin-top:-229px;
  409. margin-left:-235px;
  410. width:450px;
  411. height:420px;
  412. background-color:rgba({RGBcolor:post},0.6);
  413. border-top:20px solid rgba({RGBcolor:post},0);
  414. border-right:20px solid rgba({RGBcolor:post},0);
  415. border-bottom:20px solid rgba({RGBcolor:post},0);
  416. display:flex;
  417. justify-content:center;
  418. }
  419.  
  420. #toplinks {
  421. z-index:103;
  422. position:fixed;
  423. margin-left:-237px;
  424. margin-top:-265px;
  425. width:474px;
  426. {block:ifsidebaronleft}text-align:start;{/block:ifsidebaronleft}
  427. {block:ifnotsidebaronleft}text-align:end;{/block:ifnotsidebaronleft}
  428. }
  429.  
  430. #toplinks .lnr {
  431. font-size:15px;
  432. display:inline-block;
  433. margin-left:2px;
  434. margin-right:2px;
  435. padding:12px 11px 9px 11px;
  436. background-color:rgba({RGBcolor:post},0.6);
  437. color:{color:text};
  438. border-radius:10px 10px 0px 0px;
  439. -webkit-transition: all 0.4s ease-in-out;
  440. -moz-transition: all 0.4s ease-in-out;
  441. -o-transition: all 0.4s ease-in-out;
  442. }
  443.  
  444. #toplinks .lnr:hover {
  445. background-color:rgba({RGBcolor:post},0.8);
  446. }
  447.  
  448. #featherleft {
  449. position:fixed;
  450. transform: translate(-50%, -50%);
  451. margin-top:{select:left corner image};
  452. margin-left:-280px;
  453. }
  454.  
  455. #featherleft img {
  456. z-index:101;
  457. width:275px;
  458. }
  459.  
  460. #featherright {
  461. position:fixed;
  462. top:50%; left:50%;
  463. transform: translate(-50%, -50%);
  464. margin-top:{select:right corner image};
  465. margin-left:280px;
  466. }
  467.  
  468. #featherright img {
  469. z-index:101;
  470. width:275px;
  471. }
  472.  
  473. #sidename {
  474. z-index:102;
  475. position:fixed;
  476. top:50%; left:50%;
  477. transform: translate(-50%, -50%);
  478. {block:ifsidebaronleft}margin-left:258px;{/block:ifsidebaronleft}
  479. {block:ifnotsidebaronleft}margin-left:-253px;{/block:ifnotsidebaronleft}
  480. }
  481.  
  482. .sidetext {
  483. width:100vh;
  484. font-family:nightingale;
  485. font-size:27px;
  486. letter-spacing:3px;
  487. color:{color:side title text};
  488. text-align:center;
  489. text-shadow:-3px 5px 8px {color:side title shadow};
  490. {block:ifsidebaronleft}
  491. -webkit-transform: rotate(90deg);
  492. -moz-transform: rotate(90deg);
  493. -ms-transform: rotate(90deg);
  494. -o-transform: rotate(90deg);
  495. filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
  496. {/block:ifsidebaronleft}
  497.  
  498. {block:ifnotsidebaronleft}
  499. -webkit-transform: rotate(-90deg);
  500. -moz-transform: rotate(-90deg);
  501. -ms-transform: rotate(-90deg);
  502. -o-transform: rotate(-90deg);
  503. filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  504. {/block:ifnotsidebaronleft}
  505. }
  506.  
  507. #botquote {
  508. position:fixed;
  509. top:50%; left:50%;
  510. transform: translate(-50%, -50%);
  511. margin-top:242px;
  512. width:470px;
  513. height:25px;
  514. background-color:{color:permalink background};
  515. border-radius:0px 0px 10px 10px;
  516. }
  517.  
  518. .bottext {
  519. {block:ifsidebaronleft}text-align:end;{/block:ifsidebaronleft}
  520. {block:ifnotsidebaronleft}text-align:left;{/block:ifnotsidebaronleft}
  521. font-family:silkscreen;
  522. font-size:8px;
  523. color:{color:permalink text};
  524. padding:5px 15px;
  525. overflow:hidden;
  526. }
  527.  
  528. #container {
  529. flex-shrink:0;
  530. margin-top:-200px;
  531. {block:PermalinkPage}margin-bottom:10px;{/block:PermalinkPage}
  532. }
  533.  
  534.  
  535. .semicontainer {
  536. margin-bottom:0px;
  537. opacity:0.83;
  538. -webkit-transition: all 0.9s ease-in-out;
  539. -moz-transition: all 0.9s ease-in-out;
  540. -o-transition: all 0.9s ease-in-out;
  541. }
  542.  
  543. {block:ifphotofade}
  544. .semicontainer:hover {
  545. {block:PermalinkPage}opacity:1;{/block:PermalinkPage}
  546. }
  547. {/block:ifphotofade}
  548.  
  549. /*--------------------POSTS--------------------*/
  550.  
  551. .posts {
  552. overflow:hidden;
  553. {block:IndexPage}
  554. margin-bottom:50px;
  555. {/block:IndexPage}
  556. {block:PermalinkPage}
  557. margin-bottom:40px;
  558. {/block:PermalinkPage}
  559. width:375px;
  560. padding:10px;
  561. background-color:{color:post};
  562. border:1px solid {color:post};
  563. text-align:left;
  564. }
  565.  
  566. .posts a {
  567. color:{color:link};
  568. }
  569.  
  570. .posts a:hover {
  571. color:{color:link hover};
  572. }
  573.  
  574. .posts img{
  575. max-width:100%;
  576. {block:ifmonochromeposts}
  577. filter: url("data:image/svg+xml;utf8,<svg xmlns=\'//www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
  578. filter: gray; /* IE6-9 */
  579. -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
  580. {/block:ifmonochromeposts}
  581. transition: 0.7s;
  582. -moz-transition: 0.7s;
  583. -webkit-transition: 0.7s;
  584. -o-transition: 0.7s;
  585.  
  586. {block:ifphotofade}
  587. opacity:0.7;
  588. {/block:ifphotofade}
  589. }
  590.  
  591. .posts img:a {
  592. padding-bottom:0px;
  593. border-bottom:0px solid transparent;
  594. }
  595.  
  596. .posts img:hover {
  597. {block:ifmonochromeposts}
  598. filter: url("data:image/svg+xml;utf8,<svg xmlns=\'//www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
  599. filter: gray; /* IE6-9 */
  600. -webkit-filter: grayscale(0%);
  601. {/block:ifmonochromeposts}
  602.  
  603. {block:ifphotofade}
  604. opacity:1;
  605. {/block:ifphotofade}
  606. }
  607.  
  608. .posts iframe{max-width:100%;}
  609.  
  610. .posts img, .posts li, .posts blockquote {max-width:100%;height:auto;}
  611.  
  612. .posts li {
  613. list-style-type:circle;
  614. }
  615.  
  616. #sidebar {
  617. z-index:102;
  618. position:fixed;
  619. margin:0 auto;
  620. top:50%; left:50%;
  621. transform: translate(-50%, -50%);
  622. {block:ifsidebaronleft}margin-left:-380px;{/block:ifsidebaronleft}
  623. {block:ifnotsidebaronleft}margin-left:380px;{/block:ifnotsidebaronleft}
  624. width:250px;height:100vh;
  625. display:table;
  626. }
  627.  
  628. #tilt {
  629. width:220px;
  630. display:table-cell;
  631. vertical-align:middle;
  632. }
  633.  
  634. .descimg {
  635. margin-bottom:10px;
  636. width:250px;
  637. }
  638.  
  639. .desc {
  640. text-align:center;
  641. padding:10px;
  642. background-color:rgba({RGBcolor:post},0.6);
  643. }
  644.  
  645. .cl {
  646. margin-top:7px;
  647. text-align:center;
  648. }
  649.  
  650. .cl a {
  651. font-family:silkscreen;
  652. font-size:8px;
  653. display:inline-block;
  654. width:60px;
  655. padding:4px 7px;
  656. margin:3px;
  657. background-color:rgba({RGBcolor:post},0.8);
  658. color:{color:text};
  659. }
  660.  
  661. .cl a:hover {
  662. background-color:rgba({RGBcolor:post},1);
  663. }
  664.  
  665. /*--------------------PAGINATION--------------------*/
  666. .pagination {
  667. padding-top:2px;
  668. text-align:center;
  669. margin-top:7px;
  670. border-top: 0.5px solid rgba({RGBcolor:text},0.25);
  671. }
  672.  
  673. /* 'Current page' number */
  674. .pagination span {
  675. margin:7px 0;
  676. font-size:9px;
  677. background-color:rgba({RGBcolor:post},0.24);
  678. color:{color:text};
  679. padding:5px;
  680. width:11px;
  681. display:inline-block;
  682. margin-left:1px;
  683. margin-right:1px;
  684. text-align:center;
  685. }
  686.  
  687. /* Other page numbers */
  688. .pagination a {
  689. margin:7px 0;
  690. background-color:rgba({RGBcolor:post},0.75);
  691. font-size:9px;
  692. color:{color:text};
  693. padding:5px;
  694. width:11px;
  695. display:inline-block;
  696. margin-left:1px;
  697. margin-right:1px;
  698. text-align:center;
  699. }
  700.  
  701. .pagination a:hover {
  702. background-color:rgba({RGBcolor:post},0.9);
  703. }
  704.  
  705.  
  706. /*--------------------TAGS--------------------*/
  707.  
  708. .tagsin {
  709. text-transform:uppercase;
  710. letter-spacing:1px;
  711. text-align:right;
  712. font-size:7px;
  713. line-height:1.5;
  714. padding-top:5px;
  715. border-top:0.5px solid 50% rgba({RGBcolor:text},0.8);
  716. }
  717.  
  718. .tagsin a {
  719. margin-right:0px;
  720. color:rgba({RGBcolor:text},0.8);
  721. padding-bottom:0px;
  722. border-bottom:0px solid transparent;
  723. }
  724.  
  725. .tagsin a:hover {
  726. color:rgba({RGBcolor:link},0.8);
  727. }
  728.  
  729. /*--------------------PERMALINK--------------------*/
  730.  
  731. #info {
  732. position: absolute;
  733. margin-left:-11px;
  734. margin-top:11px;
  735. letter-spacing: 0.5px;
  736. padding:5px 13px;
  737. font-family:tinytots;
  738. text-transform:uppercase;
  739. font-size:8px;
  740. width:370px;
  741. height:auto;
  742. border:0.5px solid {color:permalink background};
  743. border-radius:0px 0px 10px 10px;
  744. color:{color:permalink text};
  745. background-color:{color:permalink background};
  746. }
  747.  
  748. #info a {
  749. color:{color:permalink link};
  750. padding-bottom:0px;
  751. border-bottom:0px solid transparent;
  752. }
  753.  
  754. #info a:hover {
  755. color: rgba({RGBcolor:permalink link},0.45);
  756. }
  757.  
  758. #info .fa {
  759. font-size:10px;
  760. color: rgba({RGBcolor:permalink link},0.8);
  761. -webkit-transition: all 0.4s ease-in-out;
  762. -moz-transition: all 0.4s ease-in-out;
  763. -o-transition: all 0.4s ease-in-out;
  764. }
  765.  
  766. #info .fa:hover {
  767. color: rgba({RGBcolor:permalink link},0.25);
  768. }
  769.  
  770. /*--------------------POST NOTES--------------------*/
  771.  
  772. ol.notes {
  773. width:387px;
  774. padding:5px;
  775. margin:50px 0px 0px 0px;
  776. background-color:rgba({RGBcolor:permalink background},0.46);
  777. list-style-type:none;
  778. }
  779.  
  780. ol.notes li.note {
  781. padding:10px;
  782. }
  783.  
  784. ol.notes li.note img.avatar {
  785. vertical-align:-4px;
  786. margin-right:10px;
  787. width:16px;
  788. height:16px;
  789. }
  790.  
  791. ol.notes li.note span.action {
  792. font-weight:none;
  793. }
  794.  
  795. ol.notes li.note .answer_content {
  796. font-weight:normal;
  797. }
  798.  
  799. ol.notes li.note blockquote {
  800. padding:4px 10px;
  801. margin:10px 0px 0px 25px;
  802. }
  803.  
  804. ol.notes li.note blockquote a {
  805. text-decoration:none;
  806. }
  807.  
  808.  
  809.  
  810. /*---------------------------QUOTES---------------------------*/
  811.  
  812. .quote {
  813. font-family:silkscreen;
  814. text-transform:none;
  815. font-size:10px;
  816. letter-spacing:-2px;
  817. font-weight:normal;
  818. text-align:center;
  819. }
  820.  
  821. .quotesource {
  822. text-align:center;
  823. margin-top:10px;
  824. }
  825.  
  826.  
  827. /*---------------------------CHATS---------------------------*/
  828.  
  829. .chat {
  830. line-height:20px;
  831. list-style:none;
  832. }
  833.  
  834. .line.odd {
  835. background:{color:chat odd};
  836. margin-bottom:2px;
  837. padding:5px;
  838. list-style:none;
  839. font-size:10px;
  840. }
  841.  
  842. .line.even {
  843. background:{color:chat even};
  844. margin-bottom:2px;
  845. padding:5px;
  846. list-style:none;
  847. font-size:10px;
  848. }
  849.  
  850. .label {
  851. padding-right:1px;
  852. text-transform:uppercase;
  853. font-weight:bold;
  854. color:{color:link};
  855. }
  856.  
  857. .line.odd, .line.even, .label {
  858. font-size:inherit;
  859. letter-spacing:inherit;
  860. }
  861.  
  862.  
  863. /*---------------------------ASKS---------------------------*/
  864.  
  865. .question {
  866. background-color:{color:permalink background};
  867. padding:7px 10px;
  868. width:282px;
  869. margin-left:74px;
  870. height:50px;
  871. overflow:auto;
  872. }
  873.  
  874. .askimg {
  875. position:fixed;
  876. width:64px;
  877. height:64px;
  878. }
  879.  
  880. .asker {text-transform:uppercase;}
  881.  
  882. .asker b {padding:0px; font-weight:normal;}
  883.  
  884. .answer {
  885. margin-top:-10px;
  886. margin-bottom:-10px;
  887. }
  888.  
  889. /*---------------------------AUDIO---------------------------*/
  890.  
  891. .playerbutton {
  892. position:absolute;
  893. margin-top:18.5px;
  894. margin-left:18.5px;
  895. width:27px;
  896. height:27px;
  897. overflow:hidden;
  898. border-radius:100%;
  899. }
  900.  
  901. .trackdetails {
  902. width:auto;
  903. display:inline-block;
  904. margin-left:70px;
  905. padding:5px;
  906. line-height:1.7;
  907. }
  908.  
  909. .trackdetails b {
  910. font-weight:normal;
  911. }
  912.  
  913. .audiowrapper {
  914. position:relative;
  915. display:inline;
  916. height:0px;
  917. }
  918.  
  919. /*---------------------------VIDEO---------------------------*/
  920. .tumblr_video_container {
  921. width:375px!important;
  922. max-height:540px!important;
  923. overflow:hidden!important;
  924. }
  925.  
  926. {block:ifmonochromeposts}
  927. .html_photoset{-webkit-filter: Grayscale(100%); -webkit-transition-duration: 0.7s; -moz-transition-duration:0.7s; transition-duration:0.7s; -o-transition-duration:0.7s;}
  928.  
  929. .html_photoset:hover{-webkit-filter: Grayscale(0%); -webkit-transition: all 0.7s ease-out; -moz-transition: all 0.7s ease-out; transition: all 0.7s ease-out;}
  930. {/block:ifmonochromeposts}
  931.  
  932. {block:ifphotofade}
  933. .html_photoset{opacity:0.7; -webkit-transition-duration: 0.7s; -moz-transition-duration:0.7s; transition-duration:0.7s; -o-transition-duration:0.7s;}
  934.  
  935. .html_photoset:hover{opacity:1; -webkit-transition-duration: 0.7s; -moz-transition-duration:0.7s; transition-duration:0.7s; -o-transition-duration:0.7s;}
  936. {/block:ifphotofade}
  937.  
  938. {block:ifshowmusicplayer}
  939. /* music player skin by vitanica */
  940. #musicplayer {
  941. position:fixed;
  942. z-index:99;
  943. bottom:12px;left:12px;
  944. display:flex;
  945. -webkit-transition:all .7s ease;
  946. -moz-transition:all .7s ease;
  947. -o-transition:all .7s ease;
  948. transition:all .7s ease;
  949. }
  950.  
  951. #musicplayer > *, .play > * {align-self:center;-webkit-align-self:center}
  952.  
  953. .roundthing {
  954. width:31px;
  955. height:31px;
  956. border-radius:100%;
  957. background:{color:music player color}; /* icon background */
  958. }
  959.  
  960. .roundthing img {
  961. margin:8px;
  962. width:15px;
  963. }
  964.  
  965. .midline {
  966. width:0px;
  967. height:3px;
  968. background:{color:music player color};
  969. -webkit-transition:all .4s ease;
  970. -moz-transition:all .4s ease;
  971. -o-transition:all .4s ease;
  972. transition-delay: .9s;
  973. -webkit-transition-delay: .9s;
  974. }
  975.  
  976. #musicplayer:hover .midline {
  977. width:20px;
  978. transition-delay:0s;
  979. -webkit-transition-delay:0s;
  980. }
  981.  
  982. .play {
  983. display:flex;
  984. height:31px;
  985. text-align: left;
  986. padding:0px 8px;
  987. background: {color:music player background}; /* player background */
  988. border-left: 3px solid {color:music player color}; /* player border */
  989. color:{color:music player text};
  990. opacity: 0;
  991. -webkit-transition: all .4s ease;
  992. -moz-transition: all .4s ease;
  993. -o-transition: all .4s ease;
  994. transition-delay: .4s;
  995. -webkit-transition-delay: .4s;
  996. }
  997.  
  998. .music-controls, .music-controls > * {
  999. user-select:none;
  1000. -webkit-user-select:none;
  1001. width:11px;
  1002. font-size:11px;
  1003. cursor:pointer;
  1004. }
  1005.  
  1006. .pausee {display:none;}
  1007.  
  1008. .playtext {
  1009. margin-left:8px;
  1010. font-family:courier new;
  1011. font-size:9px;
  1012. }
  1013.  
  1014. #musicplayer:hover .play {
  1015. opacity:1;
  1016. transition-delay: .6s;
  1017. -webkit-transition-delay: .6s;
  1018. }
  1019. {/block:ifshowmusicplayer}
  1020.  
  1021. @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  1022. @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  1023. @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  1024.  
  1025.  
  1026. .fade-in {
  1027. opacity:0;
  1028. -webkit-animation:fadeIn ease-in 1;
  1029. -moz-animation:fadeIn ease-in 1;
  1030. animation:fadeIn ease-in 1;
  1031. -webkit-animation-fill-mode:forwards;
  1032. -moz-animation-fill-mode:forwards;
  1033. animation-fill-mode:forwards;
  1034. -webkit-animation-duration:1s;
  1035. -moz-animation-duration:1s; animation-duration:1s; }
  1036.  
  1037. .fade-in.one { -webkit-animation-delay: 1.1s; -moz-animation-delay: 1.1s; animation-delay: 1.1s; }
  1038.  
  1039. .fade-in.two { -webkit-animation-delay: 1.4s; -moz-animation-delay: 1.4s; animation-delay: 1.4s; }
  1040.  
  1041. {block:ifnotdarkthemecredit}
  1042. #dishonoronyourcow {-webkit-filter:invert(100%);filter:invert(100%);}
  1043. {/block:ifnotdarkthemecredit}
  1044.  
  1045. {CustomCSS}
  1046.  
  1047. </style>
  1048.  
  1049. </head>
  1050.  
  1051. <body>
  1052.  
  1053. <div id="background" class="box fade-in one"></div>
  1054.  
  1055. {block:ifshowmusicplayer}
  1056. <div id="musicplayer" class="box fade-in two">
  1057. <div class="roundthing">
  1058. <!--more music player gifs here:-->
  1059. <!--stewlate.tumblr.com/post/28218185078/music-player-gifs-->
  1060. <img src="//68.media.tumblr.com/tumblr_m7w2o3N94I1r6o8v2.gif"></div>
  1061. <div class="midline"></div>
  1062. <div class="play">
  1063. <div class="music-controls">
  1064. <div class="playy">►</div>
  1065. <div class="pausee">❚❚</div>
  1066. </div>
  1067. <div class="playtext">{text:music player song name}</div>
  1068. </div><!--play-->
  1069.  
  1070. <audio id="tune" src="{text:music player mp3 URL}" type="audio"></audio>
  1071. </div><!--musicplayer-->
  1072. {/block:ifshowmusicplayer}
  1073.  
  1074. <div id="vh1">
  1075. <div id="vh2">
  1076. <div id="vh3">
  1077. <div id="vh4">
  1078. <div id="garlic" class="box fade-in two">
  1079.  
  1080. <div id="toplinks">
  1081. <a href="/" title="index"><span class="lnr lnr-home"></span></a>
  1082. <a href="/ask" title="message"><span class="lnr lnr-bubble"></span></a>
  1083. <a href="/archive" title="archive"><span class="lnr lnr-history"></span></a>
  1084.  
  1085. <!--PLEASE DO NOT REMOVE THE THEME CREDIT-->
  1086. <a href="//glenthemes.tumblr.com" title="theme by glenthemes"><span class="lnr lnr-code"></span></a>
  1087. <!--PLEASE DO NOT REMOVE THE THEME CREDIT-->
  1088. </div>
  1089.  
  1090. <div id="featherleft">
  1091. <img src="{image:left corner image}" ondragstart='return false;'>
  1092. </div>
  1093.  
  1094. <div id="featherright">
  1095. <img src="{image:right corner image}" ondragstart='return false;'>
  1096. </div>
  1097.  
  1098. <div id="sidename">
  1099. <div class="sidetext">{text:side title}</div>
  1100. </div>
  1101.  
  1102. <div id="botquote">
  1103. <div class="bottext">{text:bottom subtitle}</div>
  1104. </div>
  1105.  
  1106. <div id="sidebar">
  1107. <div id="tilt">
  1108. <img class="descimg" src="{image:sidebar image}" ondragstart='return false;'>
  1109. <div class="desc">{Description}</div>
  1110. <div class="cl">
  1111. {block:ifLink1}<a href="{text:Link 1 URL}">{text:Link 1}</a>{/block:ifLink1}
  1112. {block:ifLink2}<a href="{text:Link 2 URL}">{text:Link 2}</a>{/block:ifLink2}
  1113. {block:ifLink3}<a href="{text:Link 3 URL}">{text:Link 3}</a>{/block:ifLink3}
  1114. {block:ifLink4}<a href="{text:Link 4 URL}">{text:Link 4}</a>{/block:ifLink4}
  1115. {block:ifLink5}<a href="{text:Link 5 URL}">{text:Link 5}</a>{/block:ifLink5}
  1116. {block:ifLink6}<a href="{text:Link 6 URL}">{text:Link 6}</a>{/block:ifLink6}
  1117. </div>
  1118.  
  1119. {block:Pagination}
  1120. <div class="pagination">
  1121. {block:PreviousPage}<a title="Previous" href="{PreviousPage}">«</a>{/block:PreviousPage}
  1122. {block:JumpPagination length="5"}
  1123. {block:CurrentPage}<span class="current_page">{PageNumber}</span>{/block:CurrentPage}
  1124. {block:JumpPage}<a href="{URL}">{PageNumber}</a> {/block:JumpPage}
  1125. {/block:JumpPagination}
  1126. {block:NextPage}<a title="Next" href="{NextPage}">»</a>{/block:NextPage}
  1127. </div>
  1128. {/block:Pagination}
  1129. </div>
  1130. </div>
  1131.  
  1132. <div id="burrito">
  1133.  
  1134. <div id="container">
  1135.  
  1136. <div class="semicontainer">
  1137.  
  1138. {block:Posts inlineMediaWidth="1280" inlineNestedMediaWidth="1280"}
  1139. <div class="posts" post-type="{PostType}">
  1140.  
  1141. {block:Text}
  1142. {block:Title}<h1>{Title}</h1>{/block:Title}
  1143. {Body}
  1144. {/block:Text}
  1145.  
  1146.  
  1147. {block:Photo}
  1148. {LinkOpenTag}<div class="non"><img src="{PhotoURL-400}"></div>{LinkCloseTag}
  1149. {block:Caption}{Caption}{/block:Caption}
  1150. {/block:Photo}
  1151.  
  1152.  
  1153. {block:Photoset}
  1154. {Photoset-400}
  1155. {block:Caption}{Caption}{/block:Caption}
  1156. {/block:Photoset}
  1157.  
  1158.  
  1159. {block:Quote}
  1160. <div class="quote">"{Quote}"</div>
  1161. {block:Source}<div class="quotesource">— {Source}</div>
  1162. {/block:Source}{/block:Quote}
  1163.  
  1164.  
  1165. {block:Link}
  1166. <h1><div class="non"><a href="{URL}" {Target}>{Name} »</a></div></h1>
  1167. {block:Description}{Description}{/block:Description}
  1168. {/block:Link}
  1169.  
  1170.  
  1171. {block:Chat}
  1172. {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>
  1173. {/block:Chat}
  1174.  
  1175.  
  1176. {block:Audio}
  1177. {block:AudioPlayer}
  1178. <div class="audiowrapper">
  1179. <div class="playerbutton">
  1180. {AudioPlayer}
  1181. </div>
  1182.  
  1183. <div class="trackdetails">
  1184. {block:TrackName}<b>TRACK:</b> {TrackName}{/block:TrackName}<br>
  1185.  
  1186. {block:Artist}<b>ARTIST:</b> {Artist}{/block:Artist}<br>
  1187.  
  1188. <b>PLAYS:</b> {FormattedPlayCount}</div></div>
  1189. {/block:AudioPlayer}
  1190.  
  1191. {block:Caption}
  1192. <div class="caption">{Caption}</div>
  1193. {/block:Caption}
  1194. {/block:Audio}
  1195.  
  1196.  
  1197. {block:Video}
  1198. {Video-500}
  1199. {block:Caption}{Caption}{/block:Caption}
  1200. {/block:Video}
  1201.  
  1202.  
  1203. {block:Answer}
  1204. <img class="askimg" src="{AskerPortraitURL-64}" ondragstart='return false;'>
  1205. <div class="question">
  1206. <div class="asker"><b>{Asker} asked:</b></div>
  1207. {Question}</div><br>
  1208. <div class="answer">
  1209. {Answer}</div>
  1210. {/block:Answer}
  1211.  
  1212. {block:PermalinkPage}
  1213. {block:HasTags}
  1214. <div class="tagsin">
  1215. {block:Tags}
  1216. <a href="{TagURL}">#{Tag} </a>
  1217. {/block:Tags}
  1218. </div>
  1219. {/block:HasTags}
  1220. {/block:PermalinkPage}
  1221.  
  1222. {block:Date}
  1223. {block:IndexPage}
  1224.  
  1225. {block:HasTags}
  1226. <div class="tagsin">
  1227. {block:Tags}
  1228. <a href="{TagURL}">#{Tag} </a>
  1229. {/block:Tags}
  1230. </div>
  1231. {/block:HasTags}
  1232.  
  1233.  
  1234.  
  1235.  
  1236. <div id="info"><a href="{Permalink}" title="{TimeAgo}">{Year}.{MonthNumberWithZero}.{DayOfMonthWithZero} @ {12Hour}:{Minutes}{AmPm}</a>&nbsp;&nbsp;>&nbsp;&nbsp;<a href="{Permalink}" title="{NoteCountWithLabel}">{NoteCount}N&nbsp;&nbsp;>&nbsp;&nbsp;<a href="{ReblogURL}" title="reblog?" target="blank"><span class="fa fa-retweet"></span></a>{/block:IndexPage}</div>
  1237.  
  1238.  
  1239. {/block:IndexPage}
  1240. {/block:Date}
  1241.  
  1242. {block:Date}
  1243. {block:PermalinkPage}<div id="info" style="margin-left:0px; margin-top:-40px;">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}
  1244. </div><!--posts-->
  1245. {/block:Date}
  1246.  
  1247.  
  1248. {block:PostNotes}
  1249. {PostNotes}
  1250. {/block:PostNotes}
  1251.  
  1252. {/block:Posts}
  1253.  
  1254. </div><!--semicontainer-->
  1255. </div><!--container-->
  1256. </div><!--burrito-->
  1257. </div><!--garlic-->
  1258. </div><!--vh-4-->
  1259. </div><!--vh-3-->
  1260. </div><!--vh-2-->
  1261. </div><!--vh-1-->
  1262.  
  1263.  
  1264. <!--DO NOT REMOVE-->
  1265. <div id="dishonoronyourcow" class="fade-in two"><a href="//glenthemes.tumblr.com" title="theme by glenthemes"><img src="//68.media.tumblr.com/avatar_dbde10ce662e_64.png" ondragstart='return false;'></a></div>
  1266.  
  1267.  
  1268.  
  1269. </body>
  1270. </html>
  1271.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!