API tools faq
paste
kimtys

CLOCKWORK

kimtys
Jun 1st, 2015
6,818
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 33.26 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <!--
  5.  
  6.  
  7. CLOCKWORK THEME BY KIMTYS.TUMBLR.COM
  8.  
  9. edit as much as you want but please don't hide or remove credits!
  10.  
  11. --
  12.  
  13. updated! (160501)
  14.  
  15. photoset: pixelunion (github.com)
  16. video: shythemes.tumblr.com
  17. tumblr controls: ladmilk.tumblr.com
  18. infinitescroll: paulirish (github.com)
  19. smoothscroll: deadpoolkilledzac.tumblr.com
  20.  
  21. -->
  22.  
  23. <head>
  24. <title>{Title}</title>
  25. <link rel="shortcut icon" href="{Favicon}" />
  26. {block:Description}
  27. <meta name="description" content="{MetaDescription}" />
  28. {/block:Description}
  29. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  30.  
  31.  
  32. <meta name="if:sidebar right" content="1" />
  33. <meta name="if:permalink left" content="1" />
  34. <meta name="if:tags" content="1"/>
  35. <meta name="if:captions" content="1"/>
  36. <meta name="if:hover perma" content="1"/>
  37. <meta name="if:hover tags" content="1"/>
  38. <meta name="if:description" content="1"/>
  39. <meta name="if:hover description" content="1"/>
  40. <meta name="if:infinite scroll" content="0" />
  41.  
  42. <meta name="image:sidebar" content=""/>
  43. <meta name="image:background" content=""/>
  44. <meta name="image:render" content=""/>
  45.  
  46. <meta name="select:post size" content="400" title="400px" />
  47. <meta name="select:post size" content="250" title="250px" />
  48. <meta name="select:post size" content="300" title="300px" />
  49. <meta name="select:post size" content="350" title="350px" />
  50. <meta name="select:post size" content="500" title="500px" />
  51.  
  52. <meta name="text:posts top" content="50"/>
  53. <meta name="text:posts left" content="100"/>
  54. <meta name="text:sidebar top" content="0"/>
  55. <meta name="text:sidebar left" content="0"/>
  56. <meta name="text:render left" content="900"/>
  57. <meta name="text:render bottom" content="10"/>
  58. <meta name="text:popup links text" content="links"/>
  59. <meta name="text:link1" content=""/>
  60. <meta name="text:link1 url" content=""/>
  61. <meta name="text:link2" content=""/>
  62. <meta name="text:link2 url" content=""/>
  63. <meta name="text:link3" content=""/>
  64. <meta name="text:link3 url" content=""/>
  65. <meta name="text:link4" content=""/>
  66. <meta name="text:link4 url" content=""/>
  67. <meta name="text:link5" content=""/>
  68. <meta name="text:link5 url" content=""/>
  69. <meta name="text:link6" content=""/>
  70. <meta name="text:link6 url" content=""/>
  71. <meta name="text:link7" content=""/>
  72. <meta name="text:link7 url" content=""/>
  73. <meta name="text:link8" content=""/>
  74. <meta name="text:link8 url" content=""/>
  75.  
  76. <meta name="color:background" content="#f7f7f7"/>
  77. <meta name="color:text" content="#919191"/>
  78. <meta name="color:tags" content="#a8d1cb"/>
  79. <meta name="color:links" content="#5ec3b4"/>
  80. <meta name="color:links hover" content="#000"/>
  81. <meta name="color:borders" content="#e5e5e5"/>
  82. <meta name="color:posts" content="#fff"/>
  83. <meta name="color:sidebar" content="#fff"/>
  84. <meta name="color:popup" content="#fff"/>
  85. <meta name="color:popup links" content="#b0bfd1"/>
  86. <meta name="color:description" content="#f3f3f3"/>
  87. <meta name="color:caption" content="#f5f5f5"/>
  88. <meta name="color:entry borders" content="#f0f0f0"/>
  89. <meta name="color:audio ask title chat" content="#f6f6f6"/>
  90.  
  91.  
  92. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  93. <link href='https://fonts.googleapis.com/css?family=Cousine:300,400,500,700,300italic,400italic,500italic,700italic|Roboto:300,400,500,700,300italic,400italic,500italic,700italic|Montserrat:300,400,500,700,300italic,400italic,500italic,700italic' rel='stylesheet' type='text/css'>
  94.  
  95.  
  96. <style type="text/css">
  97.  
  98.  
  99.  
  100. /* Tumblr Controls */
  101.  
  102.  
  103. .tmblr-iframe--desktop-logged-in-controls, #tumblr_controls {
  104. top:0%;
  105. right:0%;
  106. position:fixed;
  107. z-index:999999999;
  108. opacity:0.3;
  109. -webkit-filter:invert(100%);
  110. -moz-filter:invert(100%);
  111. -o-filter:invert(100%);
  112. -ms-filter:invert(100%);
  113. filter:invert(100%);
  114. }
  115.  
  116.  
  117.  
  118. /* Scrollbar & Selection */
  119.  
  120.  
  121. ::-webkit-scrollbar {
  122. height: 0px;
  123. width: 4px;
  124. background:{color:background};
  125. border: 4px solid transparent transparent transparent transparent;
  126. }
  127.  
  128. ::-webkit-scrollbar-thumb {
  129. background: {color:links};
  130. height: 20px;
  131. width: 9px;
  132. border-radius: 10px;
  133. -moz-border-radius: 8px;
  134. -webkit-border-radius: 8px;
  135. o-border-radius: 8px;
  136. -ms-border-radius: 8px;
  137. }
  138.  
  139. ::-moz-selection { background:{color:links}; color:#fff; }
  140.  
  141. ::selection { background:{color:links}; color:#fff; }
  142.  
  143.  
  144.  
  145. /* Body */
  146.  
  147.  
  148. body {
  149. color: {color:text};
  150. background: {color:background} url('{image:background}') fixed repeat;
  151. font-size: 12px;
  152. line-height: 140%;
  153. font-family: arial;
  154. word-wrap: break-word;
  155. text-align: justify;
  156. margin-bottom: 50px;
  157.  
  158. }
  159.  
  160. a {
  161. color: {color:links};
  162. text-decoration: none;
  163. -webkit-transition: opacity 1s linear;
  164. -webkit-transition: all 0.3s ease;
  165. -moz-transition: all 0.3s ease;
  166. transition: all 0.3s ease;
  167. }
  168.  
  169.  
  170. a:hover {
  171. color: {color:links hover};
  172. text-decoration: underline;
  173. -webkit-transition: opacity 1s linear;
  174. -webkit-transition: all 0.3s ease;
  175. -moz-transition: all 0.3s ease;
  176. transition: all 0.3s ease;
  177. }
  178.  
  179. hr {
  180. border: 0;
  181. height: 2px;
  182. background:{color:borders};
  183. }
  184.  
  185.  
  186. small, sub, sup, code { font-size: 11px !important; }
  187.  
  188.  
  189. big { font-size:13px; }
  190.  
  191.  
  192. pre {
  193. width:100%;
  194. font: 11px cousine, lucida sans, tahoma;
  195. white-space:pre-wrap;
  196. word-wrap:break-word;
  197. }
  198.  
  199.  
  200. b, strong { font-weight:bold; }
  201.  
  202.  
  203. i, em { font-weight:italic; }
  204.  
  205.  
  206. .posts ul, ol { margin:5px 0px 5px 15px; padding:0; }
  207.  
  208.  
  209. .posts ul { margin-left:0; list-style-type:none; }
  210.  
  211.  
  212. .posts ul li { padding:1px 0px 1px 25px; position:relative; text-align:left; }
  213.  
  214.  
  215. .posts ul li:before {
  216. content:'•';
  217. top:2px;
  218. font-size:13px;
  219. left:10px;
  220. color:{color:links};
  221. position:absolute;
  222. display:block;
  223. font-family:sans-serif;
  224. }
  225.  
  226.  
  227.  
  228. /* Tooltip */
  229.  
  230.  
  231.  
  232. #s-m-t-tooltip {
  233. padding-top:7px;
  234. padding-left:9px;
  235. padding-bottom:5px;
  236. padding-right:9px;
  237. height:auto;
  238. font-family:tunga;
  239. display: none;
  240. font-size:9px;
  241. text-align: center;
  242. letter-spacing:1px;
  243. font-weight:bold;
  244. margin-top:15px;
  245. margin-left:20px;
  246. text-transform:uppercase;
  247. margin-bottom:15px;
  248. margin-right:15px;
  249. line-height:8px;
  250. z-index: 999999999999;
  251. color: {color:text};
  252. background:{color:audio ask title chat};
  253. outline: 2px solid {color:borders};
  254. border:3px solid {color:posts};
  255. box-shadow:rgba(0,0,0,0.09) 4px 4px;
  256. }
  257.  
  258.  
  259.  
  260. /* Posts */
  261.  
  262.  
  263.  
  264. #wrapper { width:100%; margin:auto; }
  265.  
  266.  
  267. #content {
  268. {block:IndexPage}
  269. width:calc({select:post size}px + 18px);
  270. {/block:IndexPage}
  271. {block:PermalinkPage}
  272. width:500px;
  273. {/block:PermalinkPage}
  274. margin:auto auto auto {text:posts left}px;
  275. {block:ifnotsidebarright}
  276. margin-left:300px;
  277. {/block:ifnotsidebarright}
  278. }
  279.  
  280. #con {
  281. {block:ifnotsidebarright}
  282. margin:auto auto auto {text:posts left}px;
  283. {block:ifnotsidebarright}
  284. }
  285.  
  286.  
  287. .posts {
  288. {block:IndexPage}
  289. width:{select:post size}px;
  290. {/block:IndexPage}
  291. {block:PermalinkPage}
  292. width: 500px;
  293. {/block:PermalinkPage}
  294. margin-top: {text:posts top}px;
  295. margin-bottom:100px;
  296. padding:7px;
  297. background:{color:posts};
  298. border:2px solid {color:borders};
  299. letter-spacing:.02em;
  300. box-shadow:rgba(0,0,0,0.09) 5px 5px;
  301. -webkit-transition: opacity 1s linear;
  302. -webkit-transition: all 0.5s ease;
  303. -moz-transition: all 0.5s ease;
  304. transition: all 0.5s ease;
  305. }
  306.  
  307.  
  308. .posts:hover {
  309. -webkit-transition: opacity 1s linear;
  310. -webkit-transition: all 0.5s ease;
  311. -moz-transition: all 0.5s ease;
  312. transition: all 0.5s ease;
  313. }
  314.  
  315. .posts a {
  316. color: {color:links};
  317. text-decoration: none;
  318. border-bottom:1px solid transparent;
  319. padding:1px 0px;
  320. -webkit-transition: opacity 1s linear;
  321. -webkit-transition: all 0.3s ease;
  322. -moz-transition: all 0.3s ease;
  323. transition: all 0.3s ease;
  324. }
  325.  
  326. .posts a:hover {
  327. color: {color:links hover};
  328. border-bottom:1px solid {color:links};
  329. -webkit-transition: opacity 1s linear;
  330. -webkit-transition: all 0.3s ease;
  331. -moz-transition: all 0.3s ease;
  332. transition: all 0.3s ease;
  333. }
  334.  
  335. .posts:hover #perma {
  336. opacity:1;
  337. -webkit-transition: opacity 1s linear;
  338. -webkit-transition: all 0.5s ease;
  339. -moz-transition: all 0.5s ease;
  340. transition: all 0.5s ease;
  341. }
  342.  
  343.  
  344. .posts img { max-width:100%;height:auto; }
  345.  
  346.  
  347. #photo img { width:100%; display:block; }
  348.  
  349.  
  350. .title {
  351. padding-bottom:10px;
  352. padding-top:10px;
  353. font-family:arial, helvetica, sans-serif;
  354. font-size:14px;
  355. font-weight:bold;
  356. text-transform: uppercase;
  357. letter-spacing:1px;
  358. border-bottom:2px solid {color:borders};
  359. word-spacing:2px;
  360. margin-bottom:10px;
  361. line-height:14px;
  362. text-align:center;
  363. background-color: {color:audio ask title chat};
  364. }
  365.  
  366.  
  367.  
  368. /* Captions */
  369.  
  370.  
  371.  
  372. blockquote {
  373. padding-left:10px;
  374. margin-top:-5px;
  375. margin-right:0px;
  376. margin-left:7px;
  377. margin-bottom:0px;
  378. border-left:2px solid {color:borders};
  379. }
  380.  
  381.  
  382. blockquote blockquote {
  383. padding-left:10px;
  384. border-left:2px solid {color:borders};
  385. }
  386.  
  387.  
  388. #captions {
  389. background: {color:caption};
  390. outline: 2px solid {color:entry borders};
  391. border: 3px solid {color:posts};
  392. padding:0 10px 0 10px;
  393. margin:8px 1px 1px 1px;
  394. }
  395.  
  396.  
  397. #captions img { max-width:100%; }
  398.  
  399.  
  400. {block:ifnotcaptions}
  401. {block:IndexPage}
  402. #captions { display:none; }
  403. {/block:IndexPage}
  404. {/block:ifnotcaptions}
  405.  
  406.  
  407.  
  408. /* Permalink */
  409.  
  410.  
  411.  
  412. #perma {
  413. float: left;
  414. position:absolute;
  415. padding:5px;
  416. margin-left: -38px;
  417. margin-top: -6px;
  418. opacity:0;
  419. -webkit-transition: opacity 1s linear;
  420. -webkit-transition: all 0.5s ease;
  421. -moz-transition: all 0.5s ease;
  422. transition: all 0.5s ease;
  423. {block:ifpermalinkleft}
  424. float:right;
  425. margin-left:calc({select:post size}px + 20px);
  426. {/block:ifpermalinkleft}
  427. {block:PermalinkPage}
  428. display:none;
  429. {/block:PermalinkPage}
  430. }
  431.  
  432.  
  433. {block:ifnothoverperma}
  434. #perma { opacity:1; }
  435. {/block:ifnothoverperma}
  436.  
  437.  
  438. #perma img {
  439. padding-bottom: 11px;
  440. width:11px;
  441. opacity: 0.2;
  442. -webkit-transition: opacity 1s linear;
  443. -webkit-transition: all 0.5s ease;
  444. -moz-transition: all 0.5s ease;
  445. transition: all 0.5s ease;
  446. }
  447.  
  448.  
  449. #perma img:hover {
  450. opacity: 0.7;
  451. -webkit-transition: opacity 1s linear;
  452. -webkit-transition: all 0.5s ease;
  453. -moz-transition: all 0.5s ease;
  454. transition: all 0.5s ease;
  455. }
  456.  
  457.  
  458. #perma a {
  459. background-color: transparent;
  460. border-bottom:none;
  461. }
  462.  
  463.  
  464. #perma a:hover {
  465. background-color: transparent;
  466. border-bottom:none;
  467. }
  468.  
  469.  
  470.  
  471.  
  472.  
  473.  
  474. /* Tags */
  475.  
  476.  
  477.  
  478. #tags {
  479. width:calc({select:post size}px + 8px);
  480. font-style: normal;
  481. font: normal 9px tunga;
  482. letter-spacing:1px;
  483. text-align: right;
  484. line-height: 16px;
  485. text-transform:uppercase;
  486. font-weight:bold;
  487. position:absolute;
  488. margin-left:-9px;
  489. margin-top: 12px;
  490. padding-right: 5px;
  491. padding-top: 5px;
  492. padding-left: 5px;
  493. padding-bottom: 5px;
  494. opacity:0;
  495. {block:ifpermalinkleft}
  496. text-align:left;
  497. {/block:ifpermalinkleft}
  498. -webkit-transition: all 0.5s ease-in-out;
  499. -moz-transition: all 0.5s ease-in-out;
  500. -o-transition: all 0.5s ease-in-out;
  501. -ms-transition: all 0.5s ease-in-out;
  502. transition: all 0.5s ease-in-out;
  503. {block:PermalinkPage}
  504. display:none;
  505. {/block:PermalinkPage}
  506. {block:ifnottags}
  507. display:none;
  508. {/block:ifnottags}
  509. }
  510.  
  511.  
  512. {block:ifnothovertags}
  513. #tags { opacity:1; }
  514. {/block:ifnothovertags}
  515.  
  516.  
  517. #tags a {
  518. color: {color:tags};
  519. padding: 0px;
  520. margin-right:7px;
  521. padding-left:1px;
  522. padding:right:1px;
  523. text-decoration:none;
  524. font-style:normal;
  525. font-weight:bold;
  526. }
  527.  
  528.  
  529. #tags img {
  530. width:10px;
  531. padding-right:5px;
  532. padding-left:0px;
  533. margin-top:-1px;
  534. float:right;
  535. padding-top:3px;
  536. opacity:0.2;
  537. {block:ifpermalinkleft}
  538. float:left;
  539. margin-top:-2px;
  540. {/block:ifpermalinkleft}
  541. }
  542.  
  543.  
  544. #tags a:hover {
  545. color: {color:links hover};
  546. text-shadow:none;
  547. text-decoration:none;
  548. }
  549.  
  550.  
  551. .posts:hover #tags {
  552. opacity:1;
  553. -webkit-transition: opacity 1s linear;
  554. -webkit-transition: all 0.5s ease;
  555. -moz-transition: all 0.5s ease;
  556. transition: all 0.5s ease;
  557. }
  558.  
  559.  
  560.  
  561. /* Permalink */
  562.  
  563.  
  564. ol.notes {
  565. padding: 0px;
  566. margin: 5px 0px;
  567. list-style-type: none;
  568. border-bottom: solid 1px {color:borders};
  569. list-style-type:none;
  570. font-family:tunga;
  571. font-size:9px;
  572. font-style:normal;
  573. font-weight:bold;
  574. letter-spacing:1px;
  575. text-transform:uppercase;
  576. width: 520px;
  577. padding:10px;
  578. margin-top:10px;
  579. color:{color:text};
  580. margin-left:-10px;
  581. }
  582.  
  583.  
  584. ol.notes li.note {
  585. border-top: solid 1px {color:borders};
  586. padding: 10px;
  587. }
  588.  
  589.  
  590. ol.notes li.note img.avatar {
  591. vertical-align: -4px;
  592. margin-right: 10px;
  593. width: 16px;
  594. height: 16px;
  595. }
  596.  
  597.  
  598.  
  599. /* Sidebar */
  600.  
  601.  
  602.  
  603. .sidebar {
  604. width:130px;
  605. height:auto;
  606. position:fixed;
  607. {block:IndexPage}
  608. margin-left:calc({select:post size}px + 200px);
  609. {/block:IndexPage}
  610. {block:PermalinkPage}
  611. margin-left:calc(500px + 200px);
  612. {/block:PermalinkPage}
  613. }
  614.  
  615.  
  616. {block:ifnotsidebarright}
  617. .sidebar { margin-left:100px; }
  618. {/block:ifnotsidebarright}
  619.  
  620.  
  621. #sidebar {
  622. width:130px;
  623. height:auto;
  624. margin-top:{text:sidebar top}px;
  625. margin-left:{text:sidebar left}px;
  626. position:fixed;
  627. }
  628.  
  629.  
  630. .sidebar_img {
  631. border:2px solid {color:borders};
  632. padding:5px;
  633. background:{color:sidebar};
  634. width:80px;
  635. height:80px;
  636. box-shadow:rgba(0,0,0,0.09) 3px 3px;
  637. -webkit-transition: all 0.5s ease-in-out;
  638. -moz-transition: all 0.5s ease-in-out;
  639. transition: all 0.5s ease-in-out;
  640. }
  641.  
  642.  
  643. .sidebar_img img {
  644. opacity:0.8;
  645. -webkit-transition: all 0.5s ease-in-out;
  646. -moz-transition: all 0.5s ease-in-out;
  647. transition: all 0.5s ease-in-out;
  648. }
  649.  
  650.  
  651. .sidebar:hover .sidebar_desc {
  652. opacity:1;
  653. margin-top:6px;
  654. -webkit-transition: all 0.5s ease-in-out;
  655. -moz-transition: all 0.5s ease-in-out;
  656. transition: all 0.5s ease-in-out;
  657. }
  658.  
  659.  
  660. .sidebar:hover #tri {
  661. opacity:1;
  662. margin-top:10px;
  663. -webkit-transition: all 0.5s ease-in-out;
  664. -moz-transition: all 0.5s ease-in-out;
  665. transition: all 0.5s ease-in-out;
  666. }
  667.  
  668.  
  669. .sidebar:hover .sidebar_img {
  670. box-shadow:none;
  671. opacity:1;
  672. -webkit-transition: all 0.5s ease-in-out;
  673. -moz-transition: all 0.5s ease-in-out;
  674. transition: all 0.5s ease-in-out;
  675. }
  676.  
  677.  
  678. .sidebar:hover .sidebar_img img {
  679. opacity:1;
  680. -webkit-transition: all 0.5s ease-in-out;
  681. -moz-transition: all 0.5s ease-in-out;
  682. transition: all 0.5s ease-in-out;
  683. }
  684.  
  685.  
  686. .sidebar_desc {
  687. background:{color:description};
  688. padding:7px;
  689. opacity:0;
  690. margin-top:0px;
  691. font-family:arial;
  692. font-size:11px;
  693. width:90px;
  694. max-height:45px;
  695. color:{color:text};
  696. line-height:14px;
  697. margin-left:2px;
  698. text-align:justify;
  699. border:5px solid {color:sidebar};
  700. overflow:scroll;
  701. overflow:auto;
  702. outline:2px solid {color:borders};
  703. -webkit-transition: all 0.5s ease-in-out;
  704. -moz-transition: all 0.5s ease-in-out;
  705. transition: all 0.5s ease-in-out;
  706. {block:ifnotdescription}
  707. display:none;
  708. {/block:ifnotdescription}
  709. }
  710.  
  711.  
  712. #tri {
  713. margin:0px 0 0;
  714. margin-bottom:-4px;
  715. margin-left:20px;
  716. width: 0;
  717. height: 0;
  718. opacity:0;
  719. border-style: solid;
  720. border-width: 0px 9px 10px 9px;
  721. border-color: transparent transparent {color:borders};
  722. transparent;
  723. -webkit-transition: all 0.5s ease-in-out;
  724. -moz-transition: all 0.5s ease-in-out;
  725. transition: all 0.5s ease-in-out;
  726. {block:ifnotdescription}
  727. display:none;
  728. {/block:ifnotdescription}
  729. }
  730.  
  731.  
  732. {block:ifnothoverdescription}
  733. .sidebar_desc {
  734. opacity:1;
  735. margin-top:6px;
  736. box-shadow:rgba(0,0,0,0.09) 5px 5px;
  737. }
  738.  
  739.  
  740. #tri { opacity:1; margin-top:10px; }
  741.  
  742.  
  743. .sidebar:hover sidebar_desc { margin-top:5px; }
  744.  
  745.  
  746. .sidebar:hover #tri { margin-top:10px; }
  747.  
  748.  
  749. .sidebar:hover .sidebar_img { box-shadow:rgba(0,0,0,0.09) 3px 3px; }
  750. {/block:ifnothoverdescription}
  751.  
  752.  
  753. #link {
  754. float: left;
  755. padding:5px;
  756. width:70px;
  757. margin-left:55px;
  758. margin-top: -100px;
  759. opacity:1;
  760. -webkit-transition: opacity 1s linear;
  761. -webkit-transition: all 0.5s ease;
  762. -moz-transition: all 0.5s ease;
  763. transition: all 0.5s ease;
  764. }
  765.  
  766.  
  767. #link img {
  768. width:12px;
  769. padding:4px;
  770. opacity: 0.2;
  771. -webkit-transition: opacity 1s linear;
  772. -webkit-transition: all 0.5s ease;
  773. -moz-transition: all 0.5s ease;
  774. transition: all 0.5s ease;
  775. }
  776.  
  777.  
  778. #link img:hover{
  779. opacity: 0.5;
  780. -webkit-transition: opacity 1s linear;
  781. -webkit-transition: all 0.5s ease;
  782. -moz-transition: all 0.5s ease;
  783. transition: all 0.5s ease;
  784. }
  785.  
  786.  
  787. #link ul { list-style-type: none; }
  788.  
  789.  
  790. #link li { display: inline-block; }
  791.  
  792.  
  793.  
  794. /* Pagination */
  795.  
  796.  
  797.  
  798. #pag { text-align:center; }
  799.  
  800.  
  801. .pagination {
  802. margin-bottom:100px;
  803. margin-top:80px;
  804. padding-left:15px;
  805. bottom:200px;
  806. }
  807.  
  808.  
  809. .pagination a {
  810. padding: 8px 12px 5px;
  811. color:{color:text};
  812. font-weight:bold;
  813. font-size:12px;
  814. margin-right:15px;
  815. bottom:200px;
  816. border:2px solid {color:borders};
  817. background:{color:posts};
  818. box-shadow:rgba(0,0,0,0.06) 3px 3px;
  819. -webkit-transition: all 0.4s ease-in-out;
  820. -moz-transition: all 0.4s ease-in-out;
  821. transition: all 0.4s ease-in-out;
  822. }
  823.  
  824.  
  825. .pagination a:hover {
  826. padding: 8px 12px 5px;
  827. color: {color:links};
  828. font-size:12px;
  829. box-shadow:none;
  830. -webkit-transition: all 0.4s ease-in-out;
  831. -moz-transition: all 0.4s ease-in-out;
  832. transition: all 0.4s ease-in-out;
  833. }
  834.  
  835.  
  836. .pagination img {
  837. width:13px;
  838. opacity:0.2;
  839. -webkit-transition: all 0.4s ease-in-out;
  840. -moz-transition: all 0.4s ease-in-out;
  841. transition: all 0.4s ease-in-out;
  842. }
  843.  
  844.  
  845. .pagination img:hover {
  846. opacity:0.7;
  847. -webkit-transition: all 0.4s ease-in-out;
  848. -moz-transition: all 0.4s ease-in-out;
  849. transition: all 0.4s ease-in-out;
  850. }
  851.  
  852.  
  853. {block:IfInfiniteScroll}
  854. .pagination { display:none; }
  855. {/block:IfInfiniteScroll}
  856.  
  857.  
  858.  
  859. /* Quote */
  860.  
  861.  
  862. #quote {
  863. margin-bottom:10px;
  864. padding-left:5px;
  865. padding-right:40px;
  866. padding-top:0px;
  867. font-family:arial, helvetica, sans-serif;
  868. font-size:16px;
  869. font-style:italic;
  870. }
  871.  
  872. #source {
  873. padding-right:5px;
  874. text-align:right;
  875. margin-bottom:5px;
  876. padding-top:7px;
  877. border-top:1px solid {color:borders};
  878. }
  879.  
  880.  
  881.  
  882. /* Ask */
  883.  
  884.  
  885.  
  886. .q img {
  887. width:40px;
  888. margin-top:0px;
  889. margin-left:2px;
  890. padding:3px;
  891. background:{color:posts};
  892. display:block;
  893. float:left;
  894. }
  895.  
  896.  
  897. .q span {
  898. margin-top:2px;
  899. margin-left:1.5px;
  900. margin-right:1.7px;
  901. outline: 2px solid {color:entry borders};
  902. border:3px solid {color:posts};
  903. padding:15px 0px 15px 0px;
  904. padding-left:55px;
  905. background:{color:audio ask title chat};
  906. display:block;
  907. text-align:left;
  908. text-transform:uppercase;
  909. color:{color:text};
  910. font-weight:bold;
  911. letter-spacing:1px;
  912. font-size:10px;
  913. line-height:100%;
  914. }
  915.  
  916.  
  917. .question {
  918. padding:10px;
  919. padding-top:12px;
  920. padding-top:12px;
  921. margin-right:0px;
  922. border:2px solid {color:entry borders};
  923. position:relative;
  924. margin-top:0px;
  925. background:{color:entry borders};
  926. }
  927.  
  928.  
  929. .a { margin-top:10px; margin-bottom:-10px; }
  930.  
  931.  
  932.  
  933. /* Chat */
  934.  
  935.  
  936.  
  937. .lines .line {
  938. background: {color:audio ask title chat};
  939. border:1px solid {color:audio ask title chat};
  940. padding: 5px;
  941. margin-bottom: 0px;
  942. }
  943.  
  944. .lines .line.even {
  945. background-color: transparent;
  946. border:1px solid {color:audio ask title chat};
  947. }
  948.  
  949.  
  950. /* Video */
  951.  
  952.  
  953.  
  954. .video, .video iframe { display:block; overflow:hidden; }
  955.  
  956.  
  957.  
  958. /* Audio */
  959.  
  960.  
  961. #info {
  962. width:calc({select:post size}px - 88px);
  963. {block:PermalinkPage}
  964. width:calc(500px - 88px);
  965. {/block:PermalinkPage}
  966. margin-left:88px;
  967. }
  968.  
  969.  
  970. #infoline {
  971. padding-top:2.5px;
  972. padding-bottom:1px;
  973. padding-left:5px;
  974. padding-right:5px;
  975. background: {color:audio ask title chat};
  976. border-right:2px solid {color:entry borders};
  977. border-bottom:2px solid {color:entry borders};
  978. border-left:2px solid {color:entry borders};
  979. font-family:arial;
  980. font-size:7px;
  981. line-height:14px;
  982. letter-spacing:1px;
  983. text-align:left;
  984. text-transform:uppercase;
  985. }
  986.  
  987.  
  988. #player {
  989. width:calc({select:post size}px - 91px);
  990. {block:PermalinkPage}
  991. width:calc(500px - 91px);
  992. {/block:PermalinkPage}
  993. height:27px;
  994. margin-left:88px;
  995. overflow:hidden;
  996. background-color:#fff;
  997. border:2px solid {color:entry borders};
  998. border-bottom:2px solid {color:entry borders};
  999. border-left:1px solid {color:entry borders};
  1000. }
  1001.  
  1002.  
  1003. #art {
  1004. width:70px;
  1005. height:70px;
  1006. position:absolute;
  1007. padding:8px;
  1008. border:2px solid {color:entry borders};
  1009. background:{color:posts};
  1010. }
  1011.  
  1012.  
  1013. #art img {
  1014. width:70px;
  1015. height:70px;
  1016. }
  1017.  
  1018.  
  1019.  
  1020. /* Popup */
  1021.  
  1022.  
  1023.  
  1024. .popup_block {
  1025. display: none;
  1026. background: transparent;
  1027. padding: 20px;
  1028. float: left;
  1029. position: fixed;
  1030. top: 40%;
  1031. left: 50%;
  1032. z-index: 99999;
  1033. }
  1034.  
  1035.  
  1036. #box {
  1037. background: {color:popup};
  1038. width:300px;
  1039. border: 2px solid {color:entry borders};
  1040. padding: 10px;
  1041. }
  1042.  
  1043.  
  1044. #boxtitle {
  1045. color: #ccc;
  1046. font-family: roboto;
  1047. text-align:center;
  1048. font-weight:bold;
  1049. text-transform: none;
  1050. font-size: 19px;
  1051. line-height: 28px;
  1052. }
  1053.  
  1054.  
  1055. #border {
  1056. background: {color:popup};
  1057. margin-left: 40px;
  1058. width:324px;
  1059. padding: 5px;
  1060. box-shadow:rgba(0,0,0,0.09) 5px 5px;
  1061. }
  1062.  
  1063.  
  1064. #linkx {
  1065. color: #ccc;
  1066. font-family: roboto;
  1067. text-align:center;
  1068. font-weight:bold;
  1069. text-transform: none;
  1070. font-size: 18px;
  1071. line-height: 28px;
  1072. }
  1073.  
  1074.  
  1075. #linkx a { color:{color:popup links}; }
  1076.  
  1077.  
  1078. img.btn_close { float: right; margin: 10px; }
  1079.  
  1080.  
  1081. *html #fade { position: absolute; }
  1082.  
  1083.  
  1084. *html .popup_block { position: absolute; }
  1085.  
  1086.  
  1087. #fade {
  1088. display: none;
  1089. background:{color:background} url('{image:background}') fixed repeat;
  1090. position: fixed;
  1091. left: 0;
  1092. top: 0;
  1093. width: 100%;
  1094. height: 100%;
  1095. opacity: 1;
  1096. z-index: 9999;
  1097. }
  1098.  
  1099.  
  1100.  
  1101. /* Photoset */
  1102.  
  1103.  
  1104.  
  1105.  
  1106. .tmblr-lightbox { background:rgba({RGBcolor:background}, .7)!important; }
  1107.  
  1108.  
  1109. .vignette, .lightbox-caption { opacity:0!important; }
  1110.  
  1111.  
  1112. .lightbox-image {
  1113. border-radius:0px!important;
  1114. -webkit-border-radius:0px!important;
  1115. -moz-border-radius:0px!important;
  1116. box-shadow:none!important;
  1117. -webkit-box-shadow:none!important;
  1118. -moz-box-shadow:none!important;
  1119. }
  1120.  
  1121. .pxu-photo, .photo-data a { border-bottom:none; }
  1122.  
  1123. .pxu-photo, .photo-data a:hover { border-bottom:none; }
  1124.  
  1125.  
  1126. /* Credit */
  1127.  
  1128.  
  1129. #cr {
  1130. bottom:10px;
  1131. right:10px;
  1132. color:#000000;
  1133. font-weight:bold;
  1134. font-size:12px;
  1135. position:fixed;
  1136. font-family:arial;
  1137. background:{color:posts};
  1138. box-shadow:rgba(0,0,0,0.09) 3px 3px;
  1139. border:2px solid {color:borders};
  1140. padding:5px 7px;
  1141. -webkit-transition: all 0.4s ease-in-out;
  1142. -moz-transition: all 0.4s ease-in-out;
  1143. transition: all 0.4s ease-in-out;
  1144. }
  1145.  
  1146.  
  1147. #cr:hover {
  1148. box-shadow:none;
  1149. -webkit-transition: all 0.4s ease-in-out;
  1150. -moz-transition: all 0.4s ease-in-out;
  1151. transition: all 0.4s ease-in-out;
  1152. }
  1153.  
  1154.  
  1155. {CustomCSS}
  1156.  
  1157.  
  1158.  
  1159. </style>
  1160.  
  1161.  
  1162. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  1163. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.1/SmoothScroll.min.js"></script>
  1164. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  1165. <script src="https://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  1166. <script src="https://static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
  1167. {block:IndexPage}{block:ifInfinitescroll}
  1168. <script src="https://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
  1169. {/block:ifInfinitescroll}{/block:IndexPage}
  1170.  
  1171. <script>
  1172. $(document).ready(function(){
  1173. $("[title],a[title],img[title]").style_my_tooltips({
  1174. tip_follows_cursor:true,
  1175. tip_delay_time:10,
  1176. tip_fade_speed:100,
  1177. attribute:"title"
  1178. });
  1179. $(".sidebar_hidden").hide();
  1180. $(".sidebar_click").show();
  1181. $('.sidebar_click').click(function(){
  1182. $(".sidebar_hidden").slideToggle();
  1183. });
  1184. $('.photo-slideshow').pxuPhotoset({
  1185. lightbox: true,
  1186. rounded: false,
  1187. gutter: '5px',
  1188. borderRadius: '0px',
  1189. photoset: '.photo-slideshow',
  1190. photoWrap: '.photo-data',
  1191. photo: '.pxu-photo'
  1192. });
  1193. {block:IndexPage}
  1194. {block:ifInfinitescroll}
  1195. var $container = $('#content');
  1196. $container.infinitescroll({
  1197. itemSelector :".post",
  1198. navSelector : ".pagination",
  1199. nextSelector : ".pagination a#next",
  1200. loadingImg : "",
  1201. loadingText : "<em></em>",
  1202. bufferPx : 2000,
  1203. },
  1204. function(newElements){
  1205. resizeVideos();
  1206. $(newElements).find('.photo-slideshow').pxuPhotoset({
  1207. lightbox: true,
  1208. rounded: false,
  1209. gutter: '5px',
  1210. borderRadius: '0px',
  1211. photoset: '.photo-slideshow',
  1212. photoWrap: '.photo-data',
  1213. photo: '.pxu-photo'
  1214. });
  1215. });
  1216. {/block:ifInfinitescroll}
  1217. {/block:IndexPage}
  1218. $('a.poplight[href^=#]').click(function() {
  1219. var popID = $(this).attr('rel');
  1220. var popURL = $(this).attr('href');
  1221. var query= popURL.split('?');
  1222. var dim= query[1].split('&');
  1223. var popWidth = dim[0].split('=')[1];
  1224. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"></a>');
  1225. var popMargTop = ($('#' + popID).height() + 80) / 2;
  1226. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  1227. $('#' + popID).css({
  1228. 'margin-top' : -popMargTop,
  1229. 'margin-left' : -popMargLeft
  1230. });
  1231. $('body').append('<div id="fade"></div>');
  1232. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
  1233. return false;
  1234. });
  1235. $('a.close, #fade').live('click', function() {
  1236. $('#fade , .popup_block').fadeOut(function() {
  1237. $('#fade, a.close').remove();
  1238. });
  1239. return false;
  1240. });
  1241. });
  1242. </script>
  1243.  
  1244.  
  1245.  
  1246. </head>
  1247. <body>
  1248.  
  1249.  
  1250. <div id="box1" class="popup_block">
  1251. <div id="border">
  1252. <div id="box">
  1253. <div id="boxtitle">{Title}</div>
  1254. <div id="linkx">{block:iflink1}<a href="{text:link1 url}">{text:link1}</a>{/block:iflink1} {block:iflink2}. <a href="{text:link2 url}">{text:link2}</a>{/block:iflink2} {block:iflink3}. <a href="{text:link3 url}">{text:link3}</a>{/block:iflink3} {block:iflink4}. <a href="{text:link4 url}">{text:link4}</a>{/block:iflink4} {block:iflink5}. <a href="{text:link5 url}">{text:link5}</a>{/block:iflink5} {block:iflink6}. <a href="{text:link6 url}">{text:link6}</a>{/block:iflink6} {block:iflink7}. <a href="{text:link7 url}">{text:link7}</a>{/block:iflink7} {block:iflink8}. <a href="{text:link8 url}">{text:link8}</a>{/block:iflink8}</div>
  1255. </div>
  1256. </div>
  1257. </div>
  1258.  
  1259. {block:ifrenderimage}
  1260. <div style="bottom:{text:render bottom}px;position:fixed;left:{text:render left}px;width:400px;"><span style="opacity:;"><img src="{image:render}" width="500px"></div></span>
  1261. {/block:ifrenderimage}
  1262.  
  1263.  
  1264. <div id="wrapper">
  1265.  
  1266.  
  1267. <div class="sidebar"><div id="sidebar">
  1268. <a href="/"><div class="sidebar_img"><img src="{image:sidebar}" style="width:100%;height:100%"></a></div>
  1269. <div id="link"><ul>
  1270. <li><a href="/ask" title="askbox"><img src="https://static.tumblr.com/mqknr8q/8aAno24s8/24.png"></a></li>
  1271. <li><a href="/archive" title="archive"><img src="https://static.tumblr.com/mqknr8q/8gmnodmvb/browser-2x.png" style="width:12px;padding-bottom:3px"></a></li>
  1272. <li><a href="#?w=350" rel="box1" class="poplight" title="{text:popup links text}"><img src="https://static.tumblr.com/mqknr8q/e2Ono3a3i/plus-2x.png" style="width:12px;"></a></li>
  1273. </ul>
  1274. </div>
  1275. <div id="tri"></div>
  1276. <div class="sidebar_desc">
  1277. {Description}
  1278. </div>
  1279. </div></div>
  1280.  
  1281.  
  1282. <div id="cr">
  1283. <a href="https://kimtys.tumblr.com" title="theme by kimtys">k.</a>
  1284. </div>
  1285.  
  1286. <div id="con">
  1287. <div id="content">
  1288.  
  1289.  
  1290. {block:Posts}
  1291. <div class="post">
  1292. <div class="posts">
  1293.  
  1294. {block:IndexPage}
  1295. <div id="perma">
  1296. <a href="{Permalink}" title="{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}"><img src="https://static.tumblr.com/mqknr8q/6tuno1npk/pencil-2x.png"><br /><a href="{ReblogURL}" title="reblog!"><img src="https://static.tumblr.com/mqknr8q/8H1no1mrv/reload-2x.png"></a>
  1297. </div>
  1298. {/block:IndexPage}
  1299.  
  1300.  
  1301.  
  1302. {block:ContentSource}
  1303. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  1304. {/block:SourceLogo}
  1305. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  1306. {/block:ContentSource}
  1307.  
  1308.  
  1309. {block:Photo}
  1310. <div id="photo">
  1311. {block:IndexPage}
  1312. {LinkOpenTag}<img src="{PhotoURL-500}" alt='{PhotoAlt}' />{LinkCloseTag}
  1313. {/block:IndexPage}
  1314. {block:PermalinkPage}
  1315. {LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" />{LinkCloseTag}
  1316. {/block:PermalinkPage}
  1317. </div>
  1318. {/block:Photo}
  1319.  
  1320.  
  1321. {block:Photoset}
  1322. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">
  1323. {block:Photos}
  1324. <div class="photo-data">
  1325. <div class="pxu-photo">
  1326. <img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}">
  1327. </div>
  1328. <a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a>
  1329. </div>
  1330. {/block:Photos}
  1331. </div>
  1332. {/block:Photoset}
  1333.  
  1334. {block:Text}
  1335. {block:Title} <div class="title">{Title}</div> {/block:Title}
  1336. {Body}
  1337. {block:More}
  1338. <a href="{Permalink}">Read More</a>
  1339. {/block:More}
  1340. {/block:Text}
  1341.  
  1342. {block:Answer}
  1343. <div class="q">
  1344. <img src="{AskerPortraitURL-40}"/><span>{Asker} asked:</span></div>
  1345. <div class="question">{Question}</div>
  1346. <div class="a">{Answer}</div>
  1347. {block:More}
  1348. <a href="{Permalink}">Read More</a>
  1349. {/block:More}
  1350. {/block:Answer}
  1351.  
  1352. {block:Chat}
  1353. {block:Title}<div class="title">{Title}</div>{/block:Title}
  1354. <div class="lines">
  1355. {block:Lines}<div class="line {Alt}">{block:Label}<b>{Label}</b> {/block:Label}{Line}</div>{/block:Lines}
  1356. </div>
  1357. {/block:Chat}
  1358.  
  1359. {block:Quote}
  1360. <span style="margin-top:10px;float:right;font-family:arial;font-size:50px;font-weight:bold;color:{color:links}">”</span>
  1361. <div id="quote"><span style="line-height:120%;">{Quote}</div></span>
  1362. {block:Source}<div id="source">{Source}</div>{/block:Source}
  1363. {/block:Quote}
  1364.  
  1365. {block:Audio}
  1366. <table border="0" cellpadding="0" cellspacing="0"><tr><td id="art" valign="top">
  1367. {block:AlbumArt}
  1368. <img src="{AlbumArtURL}"/>
  1369. {/block:AlbumArt}
  1370. </td><td valign="top"><div id="player">{AudioPlayerWhite}</div>
  1371. <div id="info"><div id="infoline"><b>Track:</b> {block:TrackName}{TrackName}{/block:TrackName}</div>
  1372. <div id="infoline"><b>Artist:</b> {block:Artist}{Artist}{/block:Artist}</div>
  1373. <div id="infoline">{block:PlayCount}{PlayCountwithlabel}{/block:PlayCount}</div>
  1374. </div></td></tr></table>
  1375. {/block:Audio}
  1376.  
  1377. {block:Link}
  1378. <div class="title"><a href="{URL}" {Target}>{Name}</a></div>
  1379. {description}
  1380. {/block:Link}
  1381.  
  1382. {block:Video}
  1383. <div class="video">{Video-500}</div>
  1384. {/block:Video}
  1385.  
  1386. {block:Caption}<div id="captions">{Caption}</div>{/block:Caption}
  1387.  
  1388. {block:IndexPage}
  1389. {block:HasTags}
  1390. <div id="tags">{block:Tags}<a href="{TagURL}">{Tag}</a> {/block:Tags} <img src="https://static.tumblr.com/mqknr8q/EFhno36z8/39.png"></div>
  1391. {/block:HasTags}
  1392. {block:IndexPage}
  1393.  
  1394.  
  1395. </div>
  1396.  
  1397.  
  1398. </div>
  1399.  
  1400. {block:PermalinkPage}
  1401. <div id="permalink">
  1402. <div style="font-family: 'Arial', sans-serif; font-size: 10px; line-height: 140%; padding: 10px; letter-spacing: 0px; width: 480px; margin-top:-85px; color:{color:text};margin-left:2px;outline: 2px solid {color:borders};border:7px solid {color:posts};box-shadow:rgba(0,0,0,0.09) 7px 7px;background:{color:caption};text-transform:uppercase;font-weight:bold">{block:Date}{ShortMonth} {DayOfMonthWithZero}, {Year} {/block:Date} {block:NoteCount} ♡ {NoteCountWithLabel}{/block:NoteCount}{block:RebloggedFrom}<br> VIA: <a href="{ReblogParentURL}" title="{ReblogParentTitle}">{ReblogParentName}</a></b> BY: <a href="{ReblogRootURL}" title="{ReblogRootTitle}">{ReblogRootName}</a>
  1403. {/block:RebloggedFrom}{block:HasTags}<br>TAGGED: {block:Tags}<a href="{TagURL}">{Tag}</a><span class="tag-commas">, </span>{/block:Tags}{/block:HasTags}
  1404. </div>
  1405. </div>
  1406.  
  1407. {block:PostNotes}{PostNotes}{/block:PostNotes}
  1408. {/block:PermalinkPage}
  1409.  
  1410. {/block:Posts}
  1411.  
  1412. {block:IndexPage}
  1413. <div id="pag">
  1414. {block:Pagination}<div class="pagination">{block:PreviousPage}<a href="{PreviousPage}"><img src="https://static.tumblr.com/mqknr8q/AWznod2of/arrow-thick-left-2x.png"></a> {/block:PreviousPage}{block:NextPage}<a href="{NextPage}" id="next"><img src="https://static.tumblr.com/mqknr8q/81pnod2q2/arrow-thick-right-2x.png"></a>{/block:NextPage}</div>{/block:Pagination}
  1415. </div>
  1416. {/block:IndexPage}
  1417.  
  1418. </div>
  1419. </div>
  1420. </div>
  1421.  
  1422. </body>
  1423. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!