Advertisement
glenthemes

Theme [23]: Lover's Leap

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