API tools faq
paste
Advertisement
mogimochi

Theme [31] Lachrymose

mogimochi
Apr 25th, 2014
18,192
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 31.81 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!-----------------------------------------------------------------------
  6.  
  7. Theme 31 Lachrymose
  8. by yukoki/s-ekki
  9.  
  10. 1. Light/Heavy CSS editting is allowed.
  11. 2. Do not use as base code.
  12. 3. Do not remove credit.
  13. 4. Do not claim theme as your own.
  14.  
  15. ---------------------------------------------------------- VER 161217 -->
  16.  
  17. <meta name="color:background" content="#ffffff">
  18.  
  19. <meta name="color:scrollbar" content="#ffffff">
  20. <meta name="color:scrollbar background" content="#6b6377">
  21. <meta name="color:tooltips hover text" content="#ffffff">
  22. <meta name="color:tooltips hover background" content="#6a5d80">
  23. <meta name="color:text highlight" content="#e48dbf">
  24.  
  25. <meta name="color:sidebar background" content="#ffffff">
  26. <meta name="color:sidebar border" content="#000000">
  27. <meta name="color:blog title" content="#000000">
  28. <meta name="color:blog title text shadow" content="#ffffff">
  29. <meta name="color:navigation icon" content="#ffffff">
  30. <meta name="color:navigation icon hover" content="#fff472">
  31.  
  32. <meta name="color:sidebar overlay" content="#000000">
  33. <meta name="color:sidebar icon border" content="#ffffff">
  34.  
  35. <meta name="color:description" content="#000000">
  36. <meta name="color:description bold" content="#000000">
  37. <meta name="color:description italic" content="#000000">
  38. <meta name="color:description link" content="#000000">
  39. <meta name="color:description link hover" content="#000000">
  40. <meta name="color:description scrollbar" content="#ffffff">
  41.  
  42. <meta name="color:post background" content="#ffffff">
  43. <meta name="color:post border" content="#dddddd">
  44.  
  45. <meta name="color:body text" content="#999999">
  46. <meta name="color:body bold" content="#ac59a1">
  47. <meta name="color:body italic" content="#d4aadd">
  48. <meta name="color:body links" content="#e48dbf">
  49. <meta name="color:body links hover" content="#cfcfcf">
  50. <meta name="color:blockquote" content="#bbbbbb">
  51.  
  52. <meta name="color:post title" content="#aaaaaa">
  53. <meta name="color:post title underline" content="#f0f0f0">
  54.  
  55. <meta name="color:post quote" content="#939393">
  56. <meta name="color:quote post quotation marks" content="#ede5f3">
  57. <meta name="color:quote post source" content="#aaaaaa">
  58.  
  59. <meta name="color:chat post separators" content="#f5f5f5">
  60. <meta name="color:chat even name" content="#ba9ec1">
  61. <meta name="color:chat even line text" content="#b8b8b8">
  62. <meta name="color:chat odd name" content="#e48dbf">
  63. <meta name="color:chat odd text" content="#777777">
  64.  
  65. <meta name="color:audio album art border" content="#ececec">
  66. <meta name="color:audio post background" content="#f8f8f8">
  67. <meta name="color:audio track name" content="#ac59a1">
  68. <meta name="color:audio information" content="#aaaaaa">
  69.  
  70. <meta name="color:asker portrait border" content="#f8f8f8">
  71. <meta name="color:asker question background" content="#f1f1f1">
  72. <meta name="color:asker question text" content="#888888">
  73.  
  74. <meta name="color:permalink border" content="#e6e6e6">
  75. <meta name="color:permalink note count" content="#ac59a1">
  76. <meta name="color:permalink note count text shadow" content="#ffffff">
  77. <meta name="color:permalink note count hover" content="#999999">
  78. <meta name="color:permalink subinfo" content="#aaaaaa">
  79. <meta name="color:permalink tags" content="#aaaaaa">
  80. <meta name="color:permalink tags hover" content="#ac59a1">
  81.  
  82. <meta name="color:reblog button" content="#666666">
  83. <meta name="color:reblog button hover" content="#8aba87">
  84. <meta name="color:post light border" content="#ececec">
  85.  
  86. <meta name="color:pagination text" content="#555555">
  87. <meta name="color:pagination link" content="#ac59a1">
  88. <meta name="color:pagination link hover" content="#ececec">
  89.  
  90. <meta name="image:background" content="">
  91. <meta name="image:side image" content="http://static.tumblr.com/2icx37z/t0Vp10cuh/def.jpg">
  92. <meta name="image:sidebar icon" content="http://static.tumblr.com/2icx37z/82xp10fsv/deficon.jpg">
  93.  
  94. <meta name="if:dark tumblr controls" content="1">
  95. <meta name="if:400px posts" content="0">
  96. <meta name="if:custom long dash list bullets" content="1">
  97. <meta name="if:show captions" content="1">
  98. <meta name="if:permalink reblog button" content="1">
  99. <meta name="if:lazy load images" content="1">
  100.  
  101. <meta name="text:link 1 name" content="sirius">
  102. <meta name="text:link 1 url" content="/">
  103. <meta name="text:link 2 name" content="atlas">
  104. <meta name="text:link 2 url" content="/">
  105. <meta name="text:link 3 name" content="polaris">
  106. <meta name="text:link 3 url" content="/">
  107. <meta name="text:link 4 name" content="vega">
  108. <meta name="text:link 4 url" content="/">
  109. <meta name="text:link 5 name" content="saiph">
  110. <meta name="text:link 5 url" content="/">
  111. <meta name="text:link 6 name" content="graffias">
  112. <meta name="text:link 6 url" content="/">
  113.  
  114. <title>{title}{block:PostSummary}, {PostSummary}{/block:PostSummary}</title>
  115. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  116. <link rel="shortcut icon" href="{Favicon}" />
  117.  
  118. {block:iflazyloadimages}
  119.  
  120. <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/8mXm7q8vn/jquery.js"></script>
  121. <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/ogWm7q8w1/lazyload.js"></script>
  122. <script type="text/javascript" charset="utf-8">
  123. var $j = jQuery.noConflict();
  124. $j(function() {
  125. if (navigator.platform == "iPad" || navigator.platform == "iPhone") return;
  126. $j("img").lazyload({
  127. placeholder : "http://static.tumblr.com/twte3d7/RSvlio0k5/grey.gif",
  128. effect: "fadeIn",
  129. });
  130. });
  131. </script>
  132.  
  133. {/block:iflazyloadimages}
  134.  
  135. <link rel="stylesheet" href="http://static.tumblr.com/i5s2zks/6kOohwlux/pe-icon-7-stroke.css">
  136.  
  137. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  138. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  139. <script>
  140. (function($){
  141. $(document).ready(function(){
  142. $("a[title]").style_my_tooltips({
  143. tip_follows_cursor:true,
  144. tip_delay_time:0,
  145. tip_fade_speed:0,
  146. attribute:"title"
  147. });
  148. });
  149. })(jQuery);
  150. </script>
  151.  
  152. <!-- JQUERY -->
  153. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  154. <script>
  155. $(document).ready(function(){
  156.  
  157. $("#btn-more").click(function(){
  158. $(".s1").toggleClass("s-more");
  159. $(".s2").toggleClass("s-more");
  160. $(".s3").toggleClass("s-more");
  161. $(".s4").toggleClass("s-more");
  162. $(".s5").toggleClass("s-more");
  163. $(".s6").toggleClass("s-more");
  164. $(".sb-overlay").toggleClass("sb-overlay-more");
  165. $(".sb-icon").toggleClass("sb-icon-more");
  166. $(".sb-desc").toggleClass("sb-desc-more");
  167. $(".sb-customlinks").toggleClass("sb-customlinks-more");
  168. $(".more-btn").toggleClass("more-btn-more");
  169. $(".less-btn").toggleClass("less-btn-more");
  170. });
  171.  
  172. });
  173.  
  174. </script>
  175.  
  176.  
  177. <style type="text/css">
  178.  
  179. ::selection {
  180. color: #fff;
  181. background-color: {color:text highlight};
  182. }
  183.  
  184. ::-moz-selection {
  185. color: #fff;
  186. background-color: {color:text highlight};
  187. }
  188.  
  189. ::-webkit-scrollbar { width: 9px; }
  190. ::-webkit-scrollbar-track-piece { background-color: {color:scrollbar background}; }
  191. ::-webkit-scrollbar-thumb:vertical {
  192. width: 10px;
  193. background-color: {color:scrollbar};
  194. border-top: 6px solid {color:scrollbar background};
  195. border-left: 4px solid {color:scrollbar background};
  196. border-bottom: 6px solid {color:scrollbar background};
  197. border-right: 4px solid {color:scrollbar background};
  198. }
  199.  
  200. .desc::-webkit-scrollbar { width: 5px; }
  201. .desc::-webkit-scrollbar-track-piece { background-color: transparent; }
  202. .desc::-webkit-scrollbar-thumb:vertical {
  203. width: 10px;
  204. background-color: rgba({RGBcolor:description scrollbar},0.1);
  205. border-radius: 100px;
  206. }
  207.  
  208. .tmblr-iframe.tmblr-iframe--desktop-logged-in-controls.iframe-controls--desktop {
  209. top: 4px;
  210. right: 80px;
  211. z-index: 9999;
  212. filter: invert(100%);
  213. }
  214.  
  215. .tctrl {
  216. position: fixed;
  217. top: 20px;
  218. right: 20px;
  219. z-index: 999;
  220. font-size: 16px;
  221. color: #888;
  222. }
  223.  
  224. .tctrl:hover iframe.tmblr-iframe, iframe.tmblr-iframe:hover {
  225. opacity: 0.6!important;
  226. right: 10px!important;
  227. }
  228.  
  229. iframe.tmblr-iframe {
  230. z-index: 1000!important;
  231. top: 0!important;
  232. right: 0px!important;
  233. padding-right: 30px;
  234. opacity: 0;
  235. transition: 0.6s;
  236. {block:ifdarktumblrcontrols}
  237. filter:invert(1);
  238. -webkit-filter:invert(1);
  239. -o-filter:invert(1);
  240. -moz-filter:invert(1);
  241. -ms-filter:invert(1);
  242. {/block:ifdarktumblrcontrols}
  243. }
  244.  
  245. #s-m-t-tooltip {
  246. padding: 2px 5px;
  247. margin: 20px 14px 7px 10px;
  248. font-family: calibri;
  249. font-size: 10px;
  250. line-height: 10px;
  251. letter-spacing: 1px;
  252. z-index: 999;
  253. text-align: center;
  254. background-color: {color:tooltips hover background};
  255. color: {color:tooltips hover text};
  256. font-style: italic;
  257. }
  258.  
  259. body {
  260. background-color: {color:background};
  261. background-image: url({image:background});
  262. background-attachment: fixed;
  263. margin: 0;
  264. word-wrap: break-word;
  265. }
  266. a { text-decoration:none; }
  267.  
  268. #sidebar {
  269. z-index: 100;
  270. position: fixed;
  271. left: 0;
  272. top: 0;
  273. width: 300px;
  274. height: 100%;
  275. overflow: hidden;
  276. }
  277.  
  278. .sideimg {
  279. height: 100%;
  280. width: 300px;
  281. background-image: url({image:side image});
  282. background-size: cover;
  283. background-position: center;
  284. }
  285.  
  286. .sb-overlay {
  287. position: fixed;
  288. left: 40px;
  289. bottom: 40px;
  290. background-color: rgba({RGBcolor:sidebar background},0.4);
  291. width: 180px;
  292. padding: 20px;
  293. border-bottom: 5px solid {color:sidebar border};
  294. z-index: 120;
  295. transition: 1.8s;
  296. transition-delay: 0.8s;
  297. }
  298.  
  299. .sb-overlay-more {
  300. background-color: rgba({RGBcolor:sidebar background},0.8);
  301. bottom: 500px;
  302. border-radius: 10px 10px 0 0;
  303. }
  304.  
  305. .sb-title {
  306. font-family: georgia;
  307. font-size: 20px;
  308. font-style: italic;
  309. letter-spacing: 1px;
  310. color: {color:blog title};
  311. text-shadow: 2px 2px 0 {color:blog title text shadow};
  312. text-align: center;
  313. }
  314.  
  315. .sb-basicnav {
  316. position: absolute;
  317. width: 220px;
  318. margin: 8px 0;
  319. }
  320.  
  321. .bnavicon {
  322. float: left;
  323. margin: 0 7px;
  324. width: 30px;
  325. height: 30px;
  326. font-size: 16px;
  327. text-align: center;
  328. line-height: 35px;
  329. color: {color:navigation icon};
  330. background-color: {color:sidebar border};
  331. border-radius: 2000px;
  332. transition: 0.6s;
  333. }
  334.  
  335. .bnavicon:hover { color: {color:navigation icon hover}; }
  336.  
  337. #btn-more {cursor: pointer;}
  338.  
  339. .more-btn { cursor: pointer; opacity: 1; }
  340. .more-btn-more { display: none; cursor: default; opacity: 0; }
  341. .less-btn { opacity: 0; cursor: default; }
  342. .less-btn-more { opacity: 1; cursor: pointer; }
  343.  
  344. .s1, .s2, .s3, .s4, .s5, .s6 {
  345. background-color: rgba({RGBcolor:sidebar overlay},0.0);
  346. width: 50px;
  347. position: fixed;
  348. top: 0;
  349. z-index: 101;
  350. height: 0;
  351. transition: 1.6s;
  352. }
  353.  
  354. .s1 { left: 0; transition-delay: 0.0s; }
  355. .s2 { left: 50px; transition-delay: 0.2s; }
  356. .s3 { left: 100px; transition-delay: 0.4s; }
  357. .s4 { left: 150px; transition-delay: 0.6s; }
  358. .s5 { left: 200px; transition-delay: 0.8s; }
  359. .s6 { left: 250px; transition-delay: 1s; }
  360. .s-more {
  361. height: 100%;
  362. background-color: rgba({RGBcolor:sidebar overlay},0.5);
  363. }
  364.  
  365. .sb-icon {
  366. background-color: rgba({RGBcolor:sidebar background},0.5);
  367. width: 140px;
  368. height: 140px;
  369. padding: 40px;
  370. position: fixed;
  371. bottom: 260px;
  372. left: 40px;
  373. z-index: 120;
  374. opacity: 0;
  375. transition: 1s;
  376. }
  377.  
  378. .sb-ic {
  379. padding: 15px;
  380. width: 110px;
  381. background-color: rgba({RGBcolor:sidebar icon border},0.5);
  382. border-radius: 10px;
  383. }
  384.  
  385. .sb-icon-more { opacity: 1; transition-delay: 1.8s; bottom: 280px; }
  386.  
  387. .sb-desc {
  388. font-family: calibri;
  389. font-size: 11px;
  390. text-align: justify;
  391. width: 190px;
  392. height: 70px;
  393. padding: 15px 10px 15px 20px;
  394. background-color: rgba({RGBcolor:sidebar background},0.7);
  395. margin-left: 40px;
  396. bottom: 160px;
  397. position: fixed;
  398. z-index: 120;
  399. opacity: 0;
  400. border-radius: 0 0 10px 10px;
  401. transition: 1s;
  402. }
  403.  
  404. .desc {
  405. height: 70px;
  406. overflow: auto;
  407. padding-right: 10px;
  408. color: {color:description};
  409. }
  410.  
  411. .desc b,strong {
  412. font-weight: 400;
  413. color: {color:description bold};
  414. }
  415.  
  416. .desc i,em {
  417. color: {color:description italic};
  418. }
  419.  
  420. .desc a {
  421. color: {color:description link};
  422. transition: 0.6s;
  423. }
  424.  
  425. .desc a:hover {
  426. color: {color:description link hover};
  427. }
  428.  
  429. .sb-desc-more {
  430. opacity: 1;
  431. bottom: 180px;
  432. transition-delay: 1.8s;
  433. }
  434.  
  435. .sb-customlinks {
  436. position: fixed;
  437. margin: 0 40px;
  438. z-index: 120;
  439. width: 220px;
  440. height: 100px;
  441. bottom: 60px;
  442. transition: 1s;
  443. opacity: 0;
  444. }
  445.  
  446. .sb-customlinks-more {
  447. bottom: 80px;
  448. opacity: 1;
  449. transition-delay: 1.8s;
  450. }
  451.  
  452. .linkcon {float: left;}
  453.  
  454. .link-trail {
  455. width: 0;
  456. border-left: 1px dashed #fff472;
  457. transition: 0.8s;
  458. }
  459.  
  460. .link-star {
  461. width: 20px;
  462. height: 20px;
  463. margin-top: -10px;
  464. transition: 0.8s;
  465. }
  466.  
  467. #link1 .linkcon { margin-left: 45px; }
  468. #link1 .link-trail { height: 90px; }
  469. #link1 .link-star { }
  470.  
  471. #link2 .linkcon { margin-left: 5px; }
  472. #link2 .link-trail { height: 40px; }
  473. #link2 .link-star { transform: rotate(45deg); height: 15px; width: 15px; }
  474.  
  475. #link3 .linkcon { margin-left: 10px; }
  476. #link3 .link-trail { height: 70px; }
  477. #link3 .link-star { transform: rotate(15deg); }
  478.  
  479. #link4 .linkcon { margin-left: 10px; }
  480. #link4 .link-trail { height: 120px; }
  481. #link4 .link-star { transform: rotate(-20deg); width: 12px; height: 12px; }
  482.  
  483. #link5 .linkcon { }
  484. #link5 .link-trail { height: 50px; }
  485. #link5 .link-star { transform: rotate(10deg); width: 15px; height: 15px; }
  486.  
  487. #link6 .linkcon { margin-left: 5px; }
  488. #link6 .link-trail { height: 100px; }
  489. #link6 .link-star { transform: rotate(30deg); }
  490.  
  491. #link1 .linkcon:hover .link-trail { height: 100px; }
  492. #link2 .linkcon:hover .link-trail { height: 50px; }
  493. #link3 .linkcon:hover .link-trail { height: 80px; }
  494. #link4 .linkcon:hover .link-trail { height: 130px; }
  495. #link5 .linkcon:hover .link-trail { height: 60px; }
  496. #link6 .linkcon:hover .link-trail { height: 110px; }
  497.  
  498. #link1 .linkcon:hover .link-star { transform: rotate(-90deg); }
  499. #link2 .linkcon:hover .link-star { transform: rotate(135deg); }
  500. #link3 .linkcon:hover .link-star { transform: rotate(105deg); }
  501. #link4 .linkcon:hover .link-star { transform: rotate(-110deg); }
  502. #link5 .linkcon:hover .link-star { transform: rotate(100deg); }
  503. #link6 .linkcon:hover .link-star { transform: rotate(-60deg); }
  504.  
  505.  
  506. /****************************************************************************/
  507.  
  508.  
  509. #content {
  510. width: 650px;
  511. margin-left: 340px;
  512. margin-top: 40px;
  513. }
  514.  
  515. .entry {
  516. background-color: {color:post background};
  517. width: 500px;
  518. padding: 30px;
  519. border: 1px solid {color:post border};
  520. margin-bottom: 40px;
  521. {block:if400pxposts}
  522. width: 400px;
  523. {/block:if400pxposts}
  524. }
  525.  
  526. .entry-title, .entry-link-title {
  527. font-family: georgia;
  528. font-size: 14px;
  529. font-style: italic;
  530. text-align: center;
  531. letter-spacing: 2px;
  532. color: {color:post title};
  533. margin-bottom: 5px;
  534. border-bottom: 1px solid {color:post title underline};
  535. padding: 5px 10px 10px 10px;
  536. }
  537.  
  538. .body {
  539. font-family: calibri;
  540. font-size: 12px;
  541. color: {color:body text};
  542. letter-spacing: 1px;
  543. }
  544.  
  545. .body b,strong { color: {color:body bold}; font-weight: 400; }
  546. .body i,em { color: {color:body italic};}
  547. .body a, .quote-src a, .entry-link-title, .asker-q a, .prinfo a, .applepie a {
  548. color: {color:body links};
  549. transition: 0.6s;
  550. }
  551.  
  552. .body a:hover, .quote-src a:hover, .entry-link-title:hover, .asker-q a:hover, .prinfo a:hover, .applepie a:hover {
  553. color: {color:body links hover};
  554. }
  555.  
  556. .entry blockquote, .applepie blockquote {
  557. border-left: 1px solid {color:blockquote};
  558. margin: 10px 0 10px 20px;
  559. padding: 0 0 0 20px;
  560. }
  561.  
  562. .body ul {
  563. {block:ifcustomlongdashlistbullets}
  564. list-style-image: url('http://static.tumblr.com/2icx37z/wYcoy7lb3/bullet.png');
  565. {/block:ifcustomlongdashlistbullets}
  566. }
  567.  
  568. .body ol {
  569. list-style-type: lower-roman;
  570. }
  571.  
  572. .entry blockquote img {
  573. max-width: 100%;
  574. height: auto!important;
  575. }
  576.  
  577. .photo {
  578. max-width: 500px;
  579. {block:if400pxposts}
  580. max-width: 400px;
  581. {/block:if400pxposts}
  582. }
  583.  
  584. .quote {
  585. font-family: georgia;
  586. font-size: 18px;
  587. text-align: center;
  588. position: relative;
  589. z-index: 2;
  590. color: {color:post quote};
  591.  
  592. }
  593.  
  594. .quote-marks {
  595. position: absolute;
  596. font-size: 100px;
  597. color: {color:quote post quotation marks};
  598. z-index: 1;
  599. margin: -25px -10px;
  600. }
  601.  
  602. .quote-src {
  603. text-align: center;
  604. letter-spacing: 2px;
  605. font-family: calibri;
  606. margin-top: 10px;
  607. font-size: 10px;
  608. text-transform: uppercase;
  609. color: {color:quote post source};
  610. }
  611.  
  612. .line {
  613. font-family: calibri;
  614. letter-spacing: 1px;
  615. font-size: 12px;
  616. border-bottom: 1px solid {color:chat post separators};
  617. }
  618.  
  619. .odd .line {padding: 10px 5px;color: {color:chat odd line};}
  620. .even .line {padding: 10px 5px;color: {color:chat even line};}
  621. .odd .name {color: {color:chat odd name};padding: 3px 5px;}
  622. .even .name {color: {color:chat even name};padding: 3px 5px;}
  623.  
  624. .albumart {
  625. width: 120px;
  626. height: 120px;
  627. padding: 10px;
  628. background-color: {color:audio album art border};
  629. float: left;
  630. }
  631.  
  632. .noart {
  633. height: 30px;
  634. padding: 45px 0;
  635. width: 120px;
  636. background-color: #dedede;
  637. color: #999;
  638. font-family: calibri;
  639. font-size: 11px;
  640. text-transform: uppercase;
  641. letter-spacing: 1px;
  642. font-style: italic;
  643. text-align: center;
  644. position: absolute;
  645. z-index: 1;
  646. }
  647.  
  648. .albumartimg {
  649. width: 120px;
  650. height: 120px;
  651. position: relative;
  652. z-index: 2;
  653. }
  654.  
  655. .audioinfo {
  656. height: 140px;
  657. background-color: {color:audio post background};
  658. }
  659.  
  660. .centrecon {
  661. position: relative;
  662. top: 50%;
  663. transform: translateY(-50%);
  664. }
  665.  
  666. .audioinfo-track {
  667. font-family: georgia;
  668. font-size: 18px;
  669. margin-left: 160px;
  670. font-style: italic;
  671. color: {color:audio track name};
  672. font-weight: 400;
  673. }
  674.  
  675. .audioinfo-minor {
  676. font-family: calibri;
  677. font-size: 11px;
  678. text-transform: uppercase;
  679. letter-spacing: 2px;
  680. color: {color:audio information};
  681. margin-left: 160px;
  682. margin-top: 5px;
  683. }
  684.  
  685. .audioplayercon {
  686. width: 25px;
  687. height: 25px;
  688. background-color: #f2f2f2;
  689. border-radius: 5px;
  690. overflow: hidden;
  691. position: absolute;
  692. z-index: 3;
  693. margin: 60px 60px;
  694. opacity: 0.1;
  695. transition: 0.6s;
  696. }
  697.  
  698. .audioplayer {margin-left: -5px;}
  699. .entry:hover .audioplayercon {opacity: 0.7;}
  700. .entry:hover .audioplayercon:hover {opacity: 1;}
  701.  
  702. .askerportrait {
  703. width: 64px;
  704. height: 64px;
  705. padding: 10px;
  706. background-color: {color:asker portrait border};
  707. position: absolute;
  708. }
  709.  
  710. .askerportraitimg {
  711. width: 64px;
  712. height: 64px;
  713. }
  714.  
  715. .question {
  716. min-height: 44px;
  717. padding: 20px;
  718. margin-left: 94px;
  719. background-color: {color:asker question background};
  720. font-family: calibri;
  721. font-size: 12px;
  722. color: {color:asker question text};
  723. letter-spacing: 1px;
  724. text-align: justify;
  725. margin-bottom: 20px;
  726. }
  727.  
  728. .question-triangle {
  729. color: {color:asker question background};
  730. position: absolute;
  731. margin: 12px -32px;
  732. font-size: 16px;
  733. }
  734.  
  735. .asker-q {
  736. font-family: calibri;
  737. text-transform: uppercase;
  738. margin-bottom: -10px;
  739. font-size: 11px;
  740. letter-spacing: 3px;
  741. }
  742.  
  743. .entry-perma {
  744. padding: 10px 10px;
  745. border-left: 1px solid {color:permalink border};
  746. position: absolute;
  747. margin: 20px 550px;
  748. width: 200px;
  749. {block:if400pxposts}
  750. margin: 20px 450px;
  751. {/block:if400pxposts}
  752. }
  753.  
  754. .prm-notes {
  755. font-size: 18px;
  756. font-style: italic;
  757. color: {color:permalink note count};
  758. text-shadow: 2px 2px 0 {color:permalink note count text shadow};
  759. transition: 0.6s;
  760. }
  761.  
  762. .prm-notes:hover {
  763. color: {color:permalink note count hover};
  764. }
  765.  
  766. .prm-info {
  767. font-family: calibri;
  768. font-size: 10px;
  769. text-transform: uppercase;
  770. letter-spacing: 1px;
  771. color: {color:permalink subinfo};
  772. }
  773.  
  774. .prm-tags {
  775. position: absolute;
  776. margin: 30px -10px ;
  777. padding: 10px;
  778. border-left: 1px solid {color:permalink border};
  779. width: 200px;
  780. font-family: calibri;
  781. font-size: 10px;
  782. text-transform: uppercase;
  783. letter-spacing: 1px;
  784. transition: 0.6s;
  785. opacity: 0;
  786. }
  787.  
  788. .prm-tags a {color: {color:permalink tags};transition: 0.6s;}
  789. .prm-tags a:hover {color: {color:permalink tags hover};}
  790.  
  791. .entry:hover .prm-tags {margin: 40px -10px;opacity:1;}
  792.  
  793. .rbg-btn {
  794. float: left;
  795. font-size: 12px;
  796. color: {color:reblog button};
  797. margin-top: 3px;
  798. transition: 0.6s;
  799. }
  800.  
  801. .rbg-btn-txt {
  802. color: {color:permalink subinfo};
  803. font-family: calibri;
  804. font-size: 10px;
  805. text-transform: uppercase;
  806. letter-spacing: 1px;
  807. margin-left: 7px;
  808. margin-top: 2px;
  809. position: absolute;
  810. }
  811.  
  812. .rbg-btn:hover {
  813. color: {color:reblog button hover};
  814. }
  815.  
  816. .permalinkpage {
  817. margin-top: 20px;
  818. border-top: 1px solid {color:post light border};
  819. color: {color:body text};
  820. padding-top: 20px;
  821. font-family: calibri;
  822. font-size: 10px;
  823. text-transform: uppercase;
  824. letter-spacing: 1px;
  825. line-height: 14px;
  826. }
  827.  
  828. .pricon {
  829. font-size: 16px;
  830. float: left;
  831. margin-top: -1px;
  832. margin-right: 5px;
  833. color: {color:body bold};
  834. }
  835.  
  836. .prinfo {width: 200px;}
  837. .prinfo-stick { float: left; }
  838. .prinfo-sticky { float: left; width: 100px; }
  839. .prinfo-space { width: 200px; }
  840. .prinfo-stuck { margin-top: 10px; width: 500px; }
  841. .prinfo-stack { width: 500px; margin-top: 4px; }
  842. .prinfo-stack a { margin: 0 5px; }
  843.  
  844. .applepie {
  845. font-family: calibri;
  846. font-size: 12px;
  847. text-align: left;
  848. color: {color:body text};
  849. background-color: {color:post background};
  850. width: 500px;
  851. padding: 30px;
  852. border: 1px solid {color:post border};
  853. margin-bottom: 40px;
  854. {block:if400pxposts}
  855. width: 400px;
  856. {/block:if400pxposts}
  857. }
  858.  
  859. .notes li {
  860. width: 500px;
  861. font-family: calibri;
  862. font-size: 12px;
  863. padding: 10px 0 7px 0;
  864. margin-bottom: 5px;
  865. border-top: 1px solid {color:post light border};
  866. margin-left: -40px;
  867. {block:if400pxposts}
  868. width: 400px;
  869. {/block:if400pxposts}
  870. }
  871.  
  872. .notes img {
  873. margin-right: 10px;
  874. float: left;
  875. width: 13px;
  876. height: 13px;
  877. border-radius: 2px;
  878. }
  879.  
  880. ol.notes {
  881. width: 500px;
  882. list-style-type: none;
  883. {block:if400pxposts}
  884. width: 400px;
  885. {/block:if400pxposts}
  886. }
  887.  
  888. .pagin {
  889. width: 500px;
  890. margin-bottom: 40px;
  891. text-align: center;
  892. font-family: calibri;
  893. font-size: 11px;
  894. letter-spacing: 2px;
  895. text-transform: uppercase;
  896. padding: 0 31px;
  897. color: {pagination text};
  898. {block:if400pxposts}
  899. width: 400px;
  900. {/block:if400pxposts}
  901. }
  902.  
  903. .pagin a {
  904. color: {color:pagination link};
  905. transition: 0.6s;
  906. }
  907.  
  908. .pagin a:hover { color: {color:pagination link hover}; }
  909.  
  910. {CustomCSS}
  911.  
  912. </style>
  913. </head>
  914. <body>
  915.  
  916. <div class="s1"></div><div class="s2"></div><div class="s3"></div><div class="s4"></div><div class="s5"></div><div class="s6"></div>
  917.  
  918. <div class="sb-icon"><img class="sb-ic" src="{image:sidebar icon}"></div>
  919.  
  920. <div class="sb-desc"><div class="desc">{Description}</div></div>
  921.  
  922. <div class="sb-customlinks"><center>
  923.  
  924. <div id="link1"><div class="linkcon">
  925. <a title="{text:link 1 name}" href="{text:link 1 url}"><div class="link-trail"></div></a>
  926. <a title="{text:link 1 name}" href="{text:link 1 url}"><img class="link-star" src="http://static.tumblr.com/2icx37z/Marp0yr15/star.png"></a>
  927. </div><!--link--></div>
  928.  
  929. <div id="link2"><div class="linkcon">
  930. <a title="{text:link 2 name}" href="{text:link 2 url}"><div class="link-trail"></div></a>
  931. <a title="{text:link 2 name}" href="{text:link 2 url}"><img class="link-star" src="http://static.tumblr.com/2icx37z/Marp0yr15/star.png"></a>
  932. </div><!--link--></div>
  933.  
  934. <div id="link3"><div class="linkcon">
  935. <a title="{text:link 3 name}" href="{text:link 3 url}"><div class="link-trail"></div></a>
  936. <a title="{text:link 3 name}" href="{text:link 3 url}"><img class="link-star" src="http://static.tumblr.com/2icx37z/Marp0yr15/star.png"></a>
  937. </div><!--link--></div>
  938.  
  939. <div id="link4"><div class="linkcon">
  940. <a title="{text:link 4 name}" href="{text:link 4 url}"><div class="link-trail"></div></a>
  941. <a title="{text:link 4 name}" href="{text:link 4 url}"><img class="link-star" src="http://static.tumblr.com/2icx37z/Marp0yr15/star.png"></a>
  942. </div><!--link--></div>
  943.  
  944. <div id="link5"><div class="linkcon">
  945. <a title="{text:link 5 name}" href="{text:link 5 url}"><div class="link-trail"></div></a>
  946. <a title="{text:link 5 name}" href="{text:link 5 url}"><img class="link-star" src="http://static.tumblr.com/2icx37z/Marp0yr15/star.png"></a>
  947. </div><!--link--></div>
  948.  
  949. <div id="link6"><div class="linkcon">
  950. <a title="{text:link 6 name}" href="{text:link 6 url}"><div class="link-trail"></div></a>
  951. <a title="{text:link 6 name}" href="{text:link 6 url}"><img class="link-star" src="http://static.tumblr.com/2icx37z/Marp0yr15/star.png"></a>
  952. </div><!--link--></div>
  953.  
  954. </center></div><!--sb-customlinks-->
  955.  
  956. <div class="sb-overlay">
  957.  
  958. <div class="sb-title">{Title}</div>
  959. <div class="sb-basicnav">
  960. <a title="refresh" href="/"><div class="bnavicon"><i class="pe-7s-home"></i></div></a>
  961. <a title="whisper" href="/ask"><div class="bnavicon"><i class="pe-7s-mail"></i></div></a>
  962. <a title="memories" href="/archive"><div class="bnavicon"><i class="pe-7s-hourglass"></i></div></a>
  963.  
  964. <div id="btn-more">
  965. <div class="more-btn"><a title="+ more"><div class="bnavicon"><i class="pe-7s-notebook"></i></div></a></div>
  966. <div class="less-btn"><a title="- less"><div class="bnavicon"><i class="pe-7s-bottom-arrow"></i></div></a></div>
  967. </div>
  968.  
  969. </div><!--sb-basicnav-->
  970.  
  971. </div><!--sb-overlay-->
  972.  
  973. <div id="sidebar"><div class="sideimg"></div></div><!--sidebar-->
  974.  
  975. <div id="content">
  976.  
  977. {block:Posts}
  978.  
  979. <div class="entry" id="{PostID}">
  980.  
  981. {Block:Date}{block:indexpage}<div class="entry-perma">
  982. <a href="{Permalink}"><div class="prm-notes">{NoteCountWithLabel}</div></a>
  983. <a href="{Permalink}"><div class="prm-info">— {DayOfWeek} {DayOfMonthWithZero} {ShortMonth} | {24HourWithZero}:{Minutes}</div></a>
  984. {block:ifpermalinkreblogbutton}
  985. <a href="{ReblogURL}"><span class="rbg-btn"><i class="pe-7s-refresh-2"></i></span> <span class="rbg-btn-txt">reblog this ?</span></a>
  986. {/block:ifpermalinkreblogbutton}
  987. {block:HasTags}<div class="prm-tags">
  988. {block:Tags}
  989. <a href="{TagURL}"><i class="pe-7s-ticket"></i> {Tag}</a><br>
  990. {/block:Tags}
  991. </div>{/block:HasTags}
  992. </div><!--entry-perma-->{/block:indexpage}{/Block:Date}
  993.  
  994. {block:Answer}
  995. <div class="askerportrait">
  996. <img class="askerportraitimg" src="{AskerPortraitURL-64}">
  997. </div><!--askerportrait-->
  998. <div class="question"><div class="question-triangle">◀️</div><div class="asker-q">{Asker} whispered:</div> <br>{Question}</div>
  999. <div class="body">{Answer}</div>
  1000. {/block:Answer}
  1001.  
  1002. {block:text}
  1003. {block:Title}<div class="entry-title">{Title}</div>{/block:Title}
  1004. <div class="body">{Body}</div>
  1005. {/block:text}
  1006.  
  1007. {block:Photo}
  1008. <img class="photo" src="{PhotoURL-500}">
  1009. {block:indexpage}
  1010. {block:ifshowcaptions}
  1011. <div class="body">{block:Caption}{Caption}{/block:Caption}</div>
  1012. {/block:ifshowcaptions}
  1013. {/block:indexpage}
  1014. {block:permalinkpage}
  1015. <div class="body">{block:Caption}{Caption}{/block:Caption}</div>
  1016. {/block:permalinkpage}
  1017. {/block:Photo}
  1018.  
  1019. {block:Photoset}
  1020. {block:ifnot400pxposts}
  1021. {Photoset-500}
  1022. {/block:ifnot400pxposts}
  1023. {block:if400pxposts}
  1024. {Photoset-400}
  1025. {/block:if400pxposts}
  1026. {block:indexpage}
  1027. {block:ifshowcaptions}
  1028. <div class="body">{block:Caption}{Caption}{/block:Caption}</div>
  1029. {/block:ifshowcaptions}
  1030. {/block:indexpage}
  1031. {block:permalinkpage}
  1032. <div class="body">{block:Caption}{Caption}{/block:Caption}</div>
  1033. {/block:permalinkpage}
  1034. {/block:Photoset}
  1035.  
  1036. {block:Quote}
  1037. <div class="quote-marks">“</div>
  1038. <div class="quote">{Quote}</div>
  1039. {block:Source}<div class="quote-src">{Source}</div>{/block:Source}
  1040. {/block:Quote}
  1041.  
  1042. {block:Link}
  1043. {block:Thumbnail}<img src="{Thumbnail}">{/block:Thumbnail}
  1044. <a href="{URL}"><div class="entry-link-title"><i class="pe-7s-pin"></i> {Name} <i class="pe-7s-angle-right"></i></div></a>
  1045. {block:Description}<div class="body">{Description}</div>{/block:Description}
  1046. {/block:Link}
  1047.  
  1048. {block:Chat}
  1049. {block:Title}<div class="entry-title">{Title}</div>{/block:Title}
  1050. {block:Lines}<div class="{Alt}">
  1051. <div class="line">{block:Label}<span class="name">{Label}</span>{/block:Label} {Line}<br /></div></div>
  1052. {/block:Lines}
  1053. {/block:Chat}
  1054.  
  1055. {block:Audio}
  1056. {block:AudioPlayer}
  1057. <div class="audioplayercon"><div class="audioplayer">{AudioPlayer}</div></div>
  1058. {/block:AudioPlayer}
  1059. <div class="audioinfo">
  1060. {block:AlbumArt}
  1061. <div class="albumart">
  1062. <div class="noart">album artwork unavailable</div>
  1063. <img class="albumartimg" src="{AlbumArtURL}">
  1064. </div>
  1065. {/block:AlbumArt}
  1066. <div class="centrecon">
  1067. {block:TrackName}<div class="audioinfo-track">{TrackName}</div>{/block:TrackName}
  1068. <div class="audioinfo-minor">
  1069. {block:Artist} {Artist} {/block:Artist}
  1070. {block:Artist} {block:Album} | {/block:Album} {/block:Artist}
  1071. {block:Album} {Album} {/block:Album}
  1072. </div><!--audioinfo-minor-->
  1073. </div><!--centrecon-->
  1074. </div><!--audioinfo-->
  1075. {block:indexpage}
  1076. {block:ifshowcaptions}
  1077. <div class="body">{block:Caption}{Caption}{/block:Caption}</div>
  1078. {/block:ifshowcaptions}
  1079. {/block:indexpage}
  1080. {block:permalinkpage}
  1081. <div class="body">{block:Caption}{Caption}{/block:Caption}</div>
  1082. {/block:permalinkpage}
  1083. {/block:Audio}
  1084.  
  1085. {block:Video}
  1086. {block:ifnot400pxposts}
  1087. {Video-500}
  1088. {/block:ifnot400pxposts}
  1089. {block:if400pxposts}
  1090. {Video-400}
  1091. {/block:if400pxposts}
  1092. {block:indexpage}
  1093. {block:ifshowcaptions}
  1094. <div class="body">{block:Caption}{Caption}{/block:Caption}</div>
  1095. {/block:ifshowcaptions}
  1096. {/block:indexpage}
  1097. {block:permalinkpage}
  1098. <div class="body">{block:Caption}{Caption}{/block:Caption}</div>
  1099. {/block:permalinkpage}
  1100. {/block:Video}
  1101.  
  1102. {block:date}{block:permalinkpage}
  1103. <div class="permalinkpage">
  1104. <div class="prinfo prinfo-stick">
  1105. <div class="pricon"><i class="pe-7s-date"></i></div>
  1106. {DayOfMonth}{DayOfMonthSuffix} {Month} {Year}, {DayOfWeek}
  1107. </div>
  1108. <div class="prinfo prinfo-sticky">
  1109. <div class="pricon"><i class="pe-7s-wristwatch"></i></div>
  1110. {12Hour}.{Minutes}{CapitalAmPm}
  1111. </div>
  1112. <div class="prinfo prinfo-sticky prinfo-space">
  1113. <div class="pricon"><i class="pe-7s-like"></i></div>
  1114. {NoteCountWithLabel}
  1115. </div>
  1116. {block:rebloggedfrom}<p>
  1117. <div class="prinfo prinfo-stuck">
  1118. <div class="pricon"><i class="pe-7s-users"></i></div>
  1119. via <a href="{ReblogParentURL}">{ReblogParentName}</a>, originally <a href="{ReblogRootURL}">{ReblogRootName}</a>
  1120. </div>
  1121. {/block:rebloggedfrom}
  1122. {block:HasTags}
  1123. <div class="prinfo prinfo-stack">
  1124. <div class="pricon"><i class="pe-7s-ticket"></i></div>
  1125. {block:Tags}
  1126. <a href="{TagURL}">{Tag}</a>
  1127. {/block:Tags}
  1128. </div><!--prm-tags-->
  1129. {/block:HasTags}
  1130. </div><!--permalinkpage-->
  1131. {/block:permalinkpage}{/block:date}
  1132.  
  1133. </div><!--entry-->
  1134.  
  1135. {block:date}{block:permalinkpage}
  1136. <div class="applepie">{PostNotes-16}</div>
  1137. {/block:permalinkpage}{/block:date}
  1138.  
  1139. {block:ContentSource}
  1140. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  1141. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  1142. {/block:SourceLogo}
  1143. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  1144. {/block:ContentSource}
  1145. <!--{block:NoRebloggedFrom}{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}{/block:NoRebloggedFrom} -->
  1146.  
  1147. {/block:Posts}
  1148.  
  1149.  
  1150. {block:pagination}
  1151. <div class="pagin">
  1152. {block:PreviousPage}
  1153. <a href="{PreviousPage}">fall back</a> /
  1154. {/block:PreviousPage}
  1155. {CurrentPage} of {TotalPages}
  1156. {block:NextPage}
  1157. / <a href="{NextPage}">delve further</a>
  1158. {/block:NextPage}
  1159. </div><!--pagin-->
  1160. {/block:pagination}
  1161.  
  1162. </div><!--content-->
  1163.  
  1164. <div class="tctrl"><i class="pe-7s-config"></i></div>
  1165.  
  1166. </body>
  1167. </html>
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!