API tools faq
paste
Advertisement
StarlightAT

Black Rabbit's Theme

StarlightAT
Jul 23rd, 2016
72
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 28.36 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3.  
  4. <!--
  5. Theme 01 revamp - Everlasting
  6. Code by magnusthemes
  7.  
  8. Do not remove this comment and/or the credit c:
  9. or I'll shoot you with a Dominator
  10. -->
  11.  
  12. <head>
  13. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  14. <link rel="stylesheet" href="http://static.tumblr.com/p0knose/gqon7b0lu/hint.css">
  15. <link href="http://static.tumblr.com/p0knose/kfknerqo1/simptip-small.css" rel="stylesheet" type="text/css">
  16.  
  17. <!-- these are the custom fonts -->
  18. <link href='http://fonts.googleapis.com/css?family=Nova+Square' rel='stylesheet' type='text/css'>
  19.  
  20. <title>{Title}</title>
  21.  
  22. <link rel="shortcut icon" href="{Favicon}">
  23.  
  24. <script src="http://static.tumblr.com/p0knose/OtNn6c1tv/modernizr.custom.97074.js"></script>
  25.  
  26. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  27.  
  28. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  29.  
  30. <meta name="color:background" content="#f7f4f5" />
  31. <meta name="color:text" content="#aaaaaa"/>
  32. <meta name="color:bold" content="#666666" />
  33. <meta name="color:italic" content="#888888" />
  34. <meta name="color:links" content="#ff8d8d"/>
  35. <meta name="color:links hover" content="#666666" />
  36.  
  37. <meta name="color:scrollbar" content="#ff8d8d" />
  38. <meta name="color:scrollbar background" content="#f6f6f6" />
  39. <meta name="color:tooltips" content="#fff" />
  40. <meta name="color:tooltips background" content="#ff8d8d" />
  41. <meta name="color:text selection" content="#fff"/>
  42. <meta name="color:text selection background" content="#ff8d8d"/>
  43.  
  44. <meta name="color:posts" content="#fcfcfc"/>
  45. <meta name="color:permalinks and asks" content="#fff1f1" />
  46.  
  47. <meta name="color:borders" content="#eeeeee" />
  48. <meta name="color:content borders" content="#ff8d8d" />
  49.  
  50. <meta name="color:post title" content="#666666" />
  51. <meta name="color:chat odd" content="#ff8d8d" />
  52. <meta name="color:chat even" content="#ff6767" />
  53. <meta name="color:chat label text" content="#ffffff" />
  54.  
  55. <meta name="color:left panel" content="#f8c4ca" />
  56. <meta name="color:sidebar" content="#ffe5e5" />
  57. <meta name="color:sidebar text" content="#999999" />
  58. <meta name="color:sidebar text hover" content="#ffffff" />
  59. <meta name="color:sidebar accent" content="#ff8d8d"/>
  60. <meta name="color:sidebar accent 2" content="#ff6767" />
  61. <meta name="color:sidebar backgrounds" content="#fff6f7" />
  62. <meta name="color:pagination" content="#ff8d8d" />
  63. <meta name="color:pagination border" content="#ff6767" />
  64.  
  65. <meta name="image:background" content=""/>
  66. <meta name="image:sidebar" content="http://static.tumblr.com/5829e77a6e2cfb7237dc92570b8e8cad/p0knose/hfTngxgjc/tumblr_static_e0e0gxz3vi80c8ko8ck8k8o4s.png" />
  67. <meta name="image:right image" content="http://static.tumblr.com/cbf554877f70b20dfa4d7c705557f599/p0knose/NeDngxkst/tumblr_static_cg0niho3p1s80ow4044wwkcow.png" />
  68.  
  69. <meta name="if:infinite scroll" content="0" />
  70. <meta name="if:custom text selection" content="1"/>
  71. <meta name="if:500px posts" content="0" />
  72. <meta name="if:white audio player" content="1" />
  73. <meta name="if:white lightbox" content="1" />
  74. <meta name="if:white controls" content="1" />
  75. <meta name="if:show captions" content="1" />
  76. <meta name="if:show tags" content="1" />
  77. <meta name="if:fading images" content="0" />
  78. <meta name="if:monochrome images" content="0" />
  79. <meta name="if:billy player" content="1" />
  80.  
  81. <meta name="text:font size" content="10" />
  82. <meta name="text:billy code" content="" />
  83. <meta name="text:link 1" content=""/>
  84. <meta name="text:link 1 url" content=""/>
  85. <meta name="text:link 2" content=""/>
  86. <meta name="text:link 2 url" content=""/>
  87. <meta name="text:link 3" content=""/>
  88. <meta name="text:link 3 url" content=""/>
  89. <meta name="text:link 4" content=""/>
  90. <meta name="text:link 4 url" content=""/>
  91. <meta name="text:link 5" content="" />
  92. <meta name="text:link 5 url" content="" />
  93. <meta name="text:link 6" content="" />
  94. <meta name="text:link 6 url" content="" />
  95.  
  96. <style type="text/css">
  97.  
  98. /* CUSTOM THINGIES */
  99.  
  100. ::-webkit-scrollbar {height:5px; width:5px; border-radius:3px;}
  101. ::-webkit-scrollbar-track-piece {
  102. background-color:{color:scrollbar};
  103. border:2px solid {color:scrollbar background};
  104. }
  105.  
  106. ::-webkit-scrollbar-thumb {
  107. width: 5px; height:5px;
  108. background-color:{color:scrollbar};
  109. box-shadow: 0 0 2px rgba(0,0,0,0.6);
  110. border-radius:3px;
  111. border:1px solid {color:scrollbar background};
  112. }
  113.  
  114. {block:ifcustomtextselection}
  115. ::selection {color:{color:text selection}; background:{color:text selection background};}
  116. ::-moz-selection {color:{color:text selection}; background:{color:text selection background};}
  117. ::-webkit-selection {color:{color:text selection}; background:{color:text selection background};}
  118. {/block:ifcustomtextselection}
  119.  
  120. /* this is for the fancy tooltips */
  121.  
  122. #s-m-t-tooltip{
  123. max-width:250px;
  124. z-index:999999999999999999999999999999999999999999999999999;
  125. margin:5px 20px;
  126. padding:2px 5px;
  127. background:{color:tooltips background};
  128. border:0;
  129. line-height:140%;
  130. box-shadow:0px 0px 1px rgba(0, 0, 0, 0.25);
  131. font-size:8px;
  132. letter-spacing:0.5px;
  133. font-family:consolas, monospace;
  134. color:{color:tooltips};
  135. }
  136.  
  137. /* BORING BASICS */
  138.  
  139. body{
  140. {block:ifbackgroundimage}background-image:url({image:background});{/block:ifbackgroundimage}
  141. background-color:{color:background};
  142. background-attachment:fixed;
  143. background-repeat:repeat;
  144. word-wrap:break-word;
  145. overflow:auto;
  146. margin-left:0px;
  147. margin-top:0px;
  148. color:{color:text};
  149. font-family: consolas, monospace;
  150. letter-spacing:0px;
  151. font-size:{text:font size}px;
  152. line-height:150%;
  153. }
  154.  
  155. a{
  156. text-decoration:none;
  157. color:{color:links};
  158. transition:0.2s;
  159. -webkit-transition:0.2s;
  160. -moz-transition:0.2s;
  161. -o-transition:0.2s;
  162. -ms-transition:0.2s;
  163. }
  164.  
  165. a:hover {color:{color:links hover};}
  166.  
  167. i, italic, em{color:{color:italic}; text-transform:italic;}
  168. b, bold, strong{color:{color:bold}; font-weight:600;}
  169.  
  170. img{border:none;}
  171. img:hover {border:none;}
  172. iframe:hover {border:none;}
  173.  
  174. blockquote {
  175. margin:10px 0px;
  176. margin-left:10px;
  177. display:block;
  178. border-left:2px solid {color:content borders};
  179. padding:0px 10px;
  180. }
  181.  
  182. blockquote img {max-width:100%!important;}
  183.  
  184. pre, code {
  185. background:{color:permalinks and asks};
  186. padding:10px;
  187. display:block;
  188. letter-spacing:1px;
  189. }
  190.  
  191. .text a, #quote a, #permapage a, #ask a {border-bottom:1px solid transparent;}
  192. .text a:hover, #quote a:hover, #permapage a:hover, #ask a:hover {border-bottom:1px solid {color:links};}
  193.  
  194. .text {margin-top:20px;}
  195.  
  196. /* these are the tumblr buttons */
  197.  
  198. iframe#tumblr_controls {
  199. right:3px !important;
  200. position:fixed !important;
  201. opacity: 0.25;
  202. {block:ifwhitecontrols}
  203. -webkit-filter:invert(100%);
  204. -moz-filter:invert(100%);
  205. -o-filter:invert(100%);
  206. filter:invert(100%);
  207. {/block:ifwhitecontrols}
  208. transition: all 0.4s ease-in-out;
  209. -webkit-transition: all 0.4s ease-in-out;
  210. -moz-transition: all 0.4s ease-in-out;
  211. -o-transition: all 0.4s ease-in-out;
  212. -ms-transition: all 0.4s ease-in-out;
  213. }
  214.  
  215. iframe#tumblr_controls:hover {opacity: 0.6;}
  216.  
  217. {block:ifwhitelightbox}
  218. #tumblr_lightbox {background:rgba(255, 255, 255, 0.8)!important;}
  219. #tumblr_lightbox img {opacity:0;}
  220. #tumblr_lightbox_center_image, #tumblr_lightbox_left_image, #tumblr_lightbox_right_image {opacity: 1!important;}
  221. {/block:ifwhitelightbox}
  222.  
  223. /* POSTS */
  224.  
  225. #postmargin{
  226. margin:0;
  227. margin-left:300px;
  228. z-index:9999999;
  229. padding:0px;
  230. padding-top:40px;
  231. {block:if500pxposts}width:540px;{/block:if500pxposts}
  232. {block:ifnot500pxposts}width:440px;{/block:ifnot500pxposts}
  233. }
  234.  
  235. .posts{
  236. {block:if500pxposts}width:540px;{/block:if500pxposts}
  237. {block:ifnot500pxposts}width:440px;{/block:ifnot500pxposts}
  238. padding:0px;
  239. box-shadow:0 0 3px rgba(0, 0, 0, 0.15);
  240. margin-bottom:40px;
  241. background:{color:posts};
  242. }
  243.  
  244. .container {padding:20px;}
  245.  
  246. .posts img, .posts iframe {
  247. max-width:100%;
  248. transition:0.6s;
  249. -webkit-transition:0.6s;
  250. -moz-transition:0.6s;
  251. -o-transition:0.6s;
  252. {block:ifmonochromeimages}{block:indexpage}
  253. filter:grayscale(100%);
  254. -webkit-filter:grayscale(100%);
  255. -moz-filter:grayscale(100%);
  256. -o-filter:grayscale(100%);
  257. -ms-filter:grayscale(100%);
  258. }
  259.  
  260. .posts img:hover, .posts iframe:hover {
  261. filter:grayscale(0%);
  262. -webkit-filter:grayscale(0%);
  263. -moz-filter:grayscale(0%);
  264. -o-filter:grayscale(0%);
  265. -ms-filter:grayscale(0%);
  266. {/block:indexpage}{/block:ifmonochromeimages}
  267. }
  268.  
  269. {block:iffadingimages}{block:indexpage}
  270. .posts img, .posts iframe {opacity:0.75;}
  271. .posts img:hover, .posts iframe:hover {opacity:1;}
  272. {/block:indexpage}{/block:iffadingimages}
  273.  
  274. /* quote, text and link posts */
  275.  
  276. #quote{
  277. padding:5px;
  278. font-size:17px;
  279. padding-top:10px;
  280. text-align:center;
  281. letter-spacing:0px;
  282. line-height:150%;
  283. font-family:'nova square', sans-serif;
  284. margin-bottom:15px;
  285. }
  286.  
  287. #link{
  288. text-align:center;
  289. padding:5px;
  290. line-height:130%;
  291. font-size:16px;
  292. font-family:'nova square', sans-serif;
  293. }
  294.  
  295. .jrc {
  296. display:inline;
  297. border-left:0px solid transparent;
  298. transition:0.6s ease-in-out;
  299. -webkit-transition:0.6s ease-in-out;
  300. -moz-transition:0.6s ease-in-out;
  301. -o-transition:0.6s ease-in-out;
  302. }
  303.  
  304. #link:hover .jrc {margin-left:20px; padding-left:10px;}
  305. #ask img {opacity:1;}
  306. #link {border-bottom:1px solid {color:borders};}
  307.  
  308. .link {
  309. transition:0.6s ease-in-out;
  310. -webkit-transition:0.6s ease-in-out;
  311. -moz-transition:0.6s ease-in-out;
  312. -o-transition:0.6s ease-in-out;
  313. }
  314.  
  315. .link:hover {
  316. background:{color:permalinks and asks};
  317. border-bottom:2px solid {color:links};
  318. }
  319.  
  320. /* PERMALINK BAR */
  321.  
  322. #permapage {
  323. background:{color:permalinks and asks};
  324. padding:10px 20px;
  325. text-align:center;
  326. {block:if500pxposts}width:500px;{/block:if500pxposts}
  327. {block:ifnot500pxposts}width:400px;{/block:ifnot500pxposts}
  328. margin-top:10px;
  329. text-transform:uppercase;
  330. font-family:consolas, monospace;
  331. font-size:8px;
  332. letter-spacing:1px;
  333. line-height:200%;
  334. }
  335.  
  336. .perma a {color:{color:text};}
  337. .perma a:hover {color:{color:links hover};}
  338.  
  339. .tags, .tags a {color:{color:links hover};}
  340. .tags a:hover {color:{color:text};}
  341.  
  342. /* MUSIC POSTS */
  343.  
  344. #musicinfo{
  345. margin-left:80px;
  346. line-height:150%;
  347. height:70px;
  348. font-weight:normal;
  349. padding:5px 10px;
  350. overflow:hidden;
  351. background:{color:permalinks and asks};
  352. {block:if500pxposts}width:400px;{/block:if500pxposts}
  353. {block:ifnot500pxposts}width:300px;{/block:ifnot500pxposts}
  354. }
  355.  
  356. .albumart {
  357. position: absolute;
  358. width:70px;
  359. height:70px;
  360. background:url(http://i.imgur.com/tjZqezW.png);
  361. border:5px solid {color:permalinks and asks};
  362. background-size:70px 70px;
  363. background-position:fixed;
  364. background-repeat:no-repeat;
  365. }
  366.  
  367. .albumart img {opacity:1;}
  368.  
  369. .tplayer {
  370. width: 20px;
  371. height: 30px;
  372. overflow: hidden;
  373. position: relative;
  374. z-index: 1;
  375. margin:20px 25px;
  376. transition:0.4s;
  377. -webkit-transition:0.4s;
  378. -moz-transition:0.4s;
  379. -o-transition:0.4s;
  380. -ms-transition:0.4s;
  381. }
  382.  
  383. .playercontainer {
  384. {block:ifnotwhiteaudioplayer}
  385. background-color: #000;
  386. {/block:ifnotwhiteaudioplayer}
  387. {block:ifwhiteaudioplayer}
  388. background-color:#fff;
  389. {/block:ifwhiteaudioplayer}
  390. position: absolute;
  391. opacity:0.25;
  392. z-index: 1;
  393. margin:5px;
  394. padding:0;
  395. transition:0.4s;
  396. -webkit-transition:0.4s;
  397. -moz-transition:0.4s;
  398. -o-transition:0.4s;
  399. }
  400.  
  401. .playercontainer:hover {opacity:0.6;}
  402.  
  403. .label {
  404. padding-left:20px;
  405. padding:6px;
  406. border-bottom:1px solid {color:borders};
  407. margin-top:5px;
  408. line-height:200%;
  409. }
  410.  
  411. .label:nth-of-type(odd) span {background:{color:chat even};}
  412. .label:nth-of-type(even) span {background:{color:chat odd};}
  413. .label span {color:{color:chat label text}; padding:2px 5px; margin-right:5px;}
  414.  
  415. /* ask posts */
  416.  
  417. .askerp, .askerp:hover {
  418. width:60px;
  419. height:60px;
  420. display:inline-block;
  421. border:5px solid {color:permalinks and asks};
  422. position:absolute;
  423. }
  424.  
  425. .question:before {
  426. content:"";
  427. width: 0px;
  428. height: 0px;
  429. border-style: solid;
  430. border-width: 10px 10px 10px 0;
  431. border-color: transparent {color:permalinks and asks} transparent transparent;
  432. display:inline-block;
  433. position:absolute;
  434. margin-left:-25px;
  435. margin-top:12.5px;
  436. }
  437.  
  438. .question {
  439. padding:10px 15px;
  440. display:inline-block;
  441. min-height:50px;
  442. {block:if500pxposts}width:386px;{/block:if500pxposts}
  443. {block:ifnot500pxposts}width:286px;{/block:ifnot500pxposts}
  444. background:{color:permalinks and asks};
  445. margin-left:85px;
  446. }
  447.  
  448. /* NOTES */
  449.  
  450. ol.notes{
  451. {block:if500pxposts}width:500px;{/block:if500pxposts}
  452. {block:ifnot500pxposts}width:400px;{/block:ifnot500pxposts}
  453. max-height:300px;
  454. border:10px solid {color:posts};
  455. margin-top:10px;
  456. padding:10px;
  457. overflow:auto;
  458. list-style-type:none;
  459. box-shadow:0 0 3px rgba(0, 0, 0, 0.15);
  460. font-size:8px;
  461. line-height:10px;
  462. background-color:{color:permalinks and asks};
  463. }
  464.  
  465. ol.notes li.note{
  466. padding:5px;
  467. font-size:8px;
  468. }
  469.  
  470. ol.notes li.note img{
  471. margin:0 8px -5px 0;
  472. width:16px;
  473. height:16px;
  474. border:2px solid {color:captions};
  475. }
  476.  
  477. ol.notes li.note img.avatar{width:16px; height:16px;}
  478. ol.notes li.note.answer_content {font-weight:400;}
  479. ol.notes li.note.blockquote {padding:1px 1px; margin:1px 0px 0px 1px;}
  480. ol.notes li.note.blockquote a {text-decoration:none;}
  481.  
  482. ol.notes::-webkit-scrollbar {width:2px; height:2px;}
  483. ol.notes::-webkit-scrollbar-track-piece {background:transparent;}
  484. ol.notes::-webkit-scrollbar-thumb {box-shadow:0; border:0;}
  485.  
  486. .hint--left:before {border-left-color:{color:tooltips background};}
  487. .hint--left:after {margin-bottom:-10px; margin-right:-2px;}
  488. .hint:after, [data-hint]:after {
  489. content: attr(data-hint);
  490. font-size:8px;
  491. text-transform:uppercase;
  492. background:{color:tooltips background};
  493. color:{color:tooltips};
  494. font-family:consolas, monospace;
  495. position:absolute;
  496. letter-spacing:1px;
  497. z-index:999999999999999;
  498. line-height:150%;
  499. padding:5px;
  500. }
  501.  
  502. [data-tooltip].simptip-position-bottom:after {
  503. text-transform:uppercase;
  504. font-size:8px;
  505. z-index: 99999;
  506. padding:3px 5px;
  507. padding-bottom:0;
  508. font-family:consolas, monospace;
  509. line-height:130%;
  510. background:{color:tooltips background};
  511. color:{color:tooltips};
  512. }
  513.  
  514. [data-tooltip].simptip-position-bottom:before {
  515. border-bottom-color:{color:tooltips background};
  516. }
  517.  
  518. /* IMPORTANT */
  519.  
  520. #jan {
  521. bottom:5px;
  522. right:5px;
  523. position:fixed;
  524. z-index:99999;
  525. border-radius:25px;
  526. padding:1px;
  527. background:rgba(0, 0, 0, 0.15);
  528. }
  529.  
  530. #jan img, #jan a {display:block;}
  531.  
  532. /* extra styling */
  533.  
  534. #render {position:fixed; z-index:-999; max-height:100%; bottom:0; right:0;}
  535.  
  536. /* sidebar */
  537.  
  538. #left {
  539. position:fixed;
  540. height:100%;
  541. width:60px;
  542. top:0; left:0;
  543. background:{color:left panel};
  544. }
  545.  
  546. #sidebar {
  547. width:200px;
  548. position:fixed;
  549. top:0; left:60px;
  550. height:100%;
  551. background:{color:sidebar};
  552. }
  553.  
  554. #stuff {
  555. position:fixed;
  556. top:6%;
  557. left:60px; width:200px;
  558. }
  559.  
  560. #menu {
  561. position:fixed;
  562. left:0px;
  563. margin-top:0px;
  564. width:50px;
  565. padding:5px;
  566. }
  567.  
  568. .menupadding {
  569. position:fixed;
  570. margin-left:-5px;
  571. width:260px;
  572. height:40px;
  573. margin-top:5px;
  574. background:{color:sidebar backgrounds};
  575. }
  576.  
  577. #menu img, #menu img:hover {
  578. width:40px;
  579. height:40px;
  580. border:5px solid {color:sidebar backgrounds};
  581. position:relative;
  582. z-index:999;
  583. display:block;
  584. }
  585.  
  586. .shu, .inori, .gai {
  587. width:10px;
  588. background:{color:sidebar backgrounds};
  589. position:fixed;
  590. display:block;
  591. border-bottom-left-radius:10px;
  592. transition:0.3s ease-in-out;
  593. -webkit-transition:0.3s ease-in-out;
  594. -moz-transition:0.3s ease-in-out;
  595. -o-transition:0.3s ease-in-out;
  596. }
  597.  
  598. .shu {height:120px; margin-left:5px;}
  599. .inori {height:150px; margin-left:20px;}
  600. .gai {height:180px; margin-left:35px;}
  601.  
  602. .void {
  603. position:fixed;
  604. margin-top:-70px;
  605. height:12px;
  606. padding-top:3px;
  607. font-size:10px;
  608. line-height:12px;
  609. width:50px;
  610. opacity:0;
  611. text-align:center;
  612. background:{color:sidebar accent};
  613. color:{color:sidebar backgrounds};
  614. text-transform:uppercase;
  615. z-index:99999;
  616. transition:0.3s ease-in-out;
  617. -webkit-transition:0.3s ease-in-out;
  618. -moz-transition:0.3s ease-in-out;
  619. -o-transition:0.3s ease-in-out;
  620. }
  621.  
  622. #menu a:hover .void {opacity:1;}
  623. #menu a:hover .shu {box-shadow:inset 0 120px 0 {color:sidebar accent};}
  624. #menu a:hover .inori{box-shadow:inset 0 150px 0 {color:sidebar accent};}
  625. #menu a:hover .gai {box-shadow:inset 0 180px 0 {color:sidebar accent};}
  626.  
  627. #title {
  628. margin:5px 10px;
  629. background:{color:sidebar backgrounds};
  630. text-align:center;
  631. padding:5px 10px;
  632. font-family:'nova square', sans-serif;
  633. text-transform:uppercase;
  634. font-size:12px;
  635. line-height:18px;
  636. color:{color:sidebar text};
  637. overflow:hidden;
  638. display:block;
  639. height:15px;
  640. }
  641.  
  642. .image, .image:hover {
  643. display:block;
  644. width:160px;
  645. margin:0 10px;
  646. border:10px solid {color:sidebar backgrounds};
  647. position:relative;
  648. z-index:999;
  649. }
  650.  
  651. #links {
  652. position:absolute;
  653. background:rgba(255, 255, 255, 0.75);
  654. height:24px;
  655. text-align:center;
  656. z-index:10000;
  657. padding:3px 0px;
  658. width:160px;
  659. margin-left:20px;
  660. margin-top:-40px;
  661. transition:0.5s linear;
  662. -webkit-transition:0.5s linear;
  663. -moz-transition:0.5s linear;
  664. -o-transition:0.5s linear;
  665. }
  666.  
  667. #links a {
  668. display:inline-block;
  669. margin:0 -1.5px;
  670. padding:4px 5px;
  671. border-bottom:2.5px solid transparent;
  672. opacity:0.75;
  673. height:16px;
  674. color:#666;
  675. line-height:16px;
  676. font-family:nova square, sans-serif;
  677. font-size:10px;
  678. transition:0.3s linear;
  679. -webkit-transition:0.3s linear;
  680. -moz-transition:0.3s linear;
  681. -o-transition:0.3s linear;
  682. }
  683.  
  684. #links a:hover {background:{color:sidebar accent}; border-bottom:2.5px solid {color:tabs}; opacity:1; color:{color:sidebar text hover};}
  685.  
  686. #desc {
  687. margin:5px 10px;
  688. padding:10px;
  689. font-size:10px;
  690. line-height:140%;
  691. text-align:justify;
  692. display:block;
  693. background:{color:sidebar backgrounds};
  694. color:{color:sidebar text};
  695. }
  696.  
  697. #desc p {margin:0;}
  698. #pagination {text-align:center; padding:10px; display:block; font-family:'nova square', sans-serif;}
  699.  
  700. .jump_page {
  701. padding: 4px 8px;
  702. color:{color:sidebar text};
  703. background: {color:sidebar backgrounds};
  704. border-bottom:2px solid {color:pagination border};
  705. height:12px;
  706. font-size:10px;
  707. text-decoration:none;
  708. line-height:12px;
  709. }
  710.  
  711. .current_page, .jump_page:hover {
  712. padding: 4px 8px;
  713. color:{color:sidebar text hover};
  714. background:{color:pagination};
  715. border-bottom:2px solid {color:sidebar accent};
  716. font-size:10px;
  717. line-height:12px;
  718. height:12px;
  719. text-decoration:none;
  720. }
  721.  
  722. #music {
  723. position:fixed;
  724. left:10px;
  725. margin-top:10px;
  726. width:20px;
  727. height:20px;
  728. overflow:hidden;
  729. padding:10px;
  730. background:rgba(255, 255, 255, 0.6);
  731. transition:0.5s ease-in-out;
  732. -webkit-transition:0.5s ease-in-out;
  733. -moz-transition:0.5s ease-in-out;
  734. -o-transition:0.5s ease-in-out;
  735. }
  736.  
  737. #music:hover {
  738. width:40px;
  739. padding:10px 0px;
  740. background:{color:sidebar backgrounds};
  741. }
  742.  
  743. #music:hover img {margin-left:-30px;}
  744. #music:hover .billy {opacity:1; margin-left:-15px;}
  745.  
  746. #music img {
  747. position:absolute;
  748. z-index:9999999;
  749. margin:3px 2px;
  750. transition:0.5s ease-in-out;
  751. -webkit-transition:0.5s ease-in-out;
  752. -moz-transition:0.5s ease-in-out;
  753. -o-transition:0.5s ease-in-out;
  754. }
  755.  
  756. .billy {
  757. position:absolute;
  758. width:50px;
  759. opacity:0;
  760. height:20px;
  761. margin-left:30px;
  762. overflow:hidden;
  763. transition:0.5s ease-in-out;
  764. -webkit-transition:0.5s ease-in-out;
  765. -moz-transition:0.5s ease-in-out;
  766. -o-transition:0.5s ease-in-out;
  767. }
  768.  
  769. {CustomCSS}
  770. </style>
  771.  
  772. {block:ifinfinitescroll}
  773. <!-- INFINITE SCROLL SCRIPT -->
  774. <script src="http://codysherman.com/tools/infinite-scrolling/code"></script>
  775. {/block:ifinfinitescroll}
  776.  
  777. <!-- STYLE-MY-TOOLTIPS SCRIPTS -->
  778. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  779. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  780.  
  781. <script>
  782. (function($){
  783. $(document).ready(function(){
  784. $("a[title]").style_my_tooltips({
  785. tip_follows_cursor:true,
  786. tip_delay_time:100,
  787. tip_fade_speed:500,
  788. attribute:"title"
  789. });
  790. });
  791. })(jQuery);
  792. </script>
  793.  
  794. </head>
  795. <body>
  796.  
  797. <div id="jan"><a href="http://magnusthemes.tumblr.com" class="hint--left" data-hint="theme by magnusthemes"><img src="http://static.tumblr.com/p0knose/pyanklckv/vers.png" width="25"/></a></div>
  798.  
  799. <img id="render" src="{image:right image}"/>
  800.  
  801. <!-- sidebar -->
  802. <div id="left"></div>
  803.  
  804. <div id="sidebar">
  805. <div id="stuff">
  806. <div id="title">{Title}</div>
  807.  
  808. <div id="menu"><div class="menupadding"></div>
  809. <img src="{PortraitURL-64}"/>
  810. <a href="/"><div class="shu"></div><div class="void">home</div></a>
  811. <a href="/ask"><div class="inori"></div><div class="void">message</div></a>
  812. <a href="/archive"><div class="gai"></div><div class="void">archive</div></a>
  813. </div>
  814.  
  815. {block:ifbillyplayer}<div id="music">
  816. <div class="billy">{text:billy code}</div>
  817. <img src="http://media.tumblr.com/tumblr_m7w2g5xcTH1r6o8v2.gif"/>
  818. </div>{/block:ifbillyplayer}
  819.  
  820. <img class="image" src="{image:sidebar}"/>
  821.  
  822. <div id="links">
  823. {block:iflink1}<a href="{text:link 1 url}" class="custom simptip-position-bottom simptip-movable" data-tooltip="{text:link 1}">01</a>{/block:iflink1}
  824. {block:iflink2}<a href="{text:link 2 url}" class="custom simptip-position-bottom simptip-movable" data-tooltip="{text:link 2}">02</a>{/block:iflink2}
  825. {block:iflink3}<a href="{text:link 3 url}" class="custom simptip-position-bottom simptip-movable" data-tooltip="{text:link 3}">03</a>{/block:iflink3}
  826. {block:iflink4}<a href="{text:link 4 url}" class="custom simptip-position-bottom simptip-movable" data-tooltip="{text:link 4}">04</a>{/block:iflink4}
  827. {block:iflink5}<a href="{text:link 5 url}" class="custom simptip-position-bottom simptip-movable" data-tooltip="{text:link 5}">05</a>{/block:iflink5}
  828. {block:iflink6}<a href="{text:link 6 url}" class="custom simptip-position-bottom simptip-movable" data-tooltip="{text:link 6}">06</a>{/block:iflink6}
  829. </div><!--links-->
  830.  
  831. <div id="desc">{Description}</div>
  832.  
  833. {block:ifnotinfinitescroll}{block:Pagination}<div id="pagination">
  834. {block:PreviousPage}<a href="{PreviousPage}" class="jump_page">&laquo;</a>{/block:PreviousPage}
  835. {block:JumpPagination length="3"}
  836. {block:CurrentPage}<span class="current_page">{PageNumber}</span>{/block:CurrentPage}
  837. {block:JumpPage}<a class="jump_page" href="{URL}">{PageNumber}</a>{/block:JumpPage}{/block:JumpPagination}
  838. {block:NextPage}<a href="{NextPage}" class="jump_page">&raquo;</a>{/block:NextPage}
  839. </div>{/block:Pagination}{/block:ifnotinfinitescroll}
  840.  
  841. </div><!--stuff-->
  842. </div><!--sidebar-->
  843.  
  844. <!-- POSTS -->
  845.  
  846. <div id="postmargin">
  847. <div class="autopagerize_page_element"><!-- FOR INFINITE SCROLLING -->
  848. {block:Posts}
  849. <div class="posts">
  850.  
  851. <div class="container">
  852.  
  853. {block:Text}
  854. {block:Title}
  855. <div id="link">{Title}</div>
  856. {/block:Title}
  857. <div class="text">{Body}</div>
  858. {/block:Text}
  859.  
  860. {block:Photo}
  861. {block:if500pxposts}{LinkOpenTag}<img src="{PhotoURL-1280}" width="500">{LinkCloseTag}{/block:if500pxposts}
  862. {block:ifnot500pxposts}{LinkOpenTag}<img src="{PhotoURL-1280}" width="400">{LinkCloseTag}{/block:ifnot500pxposts}
  863. {block:ifshowcaptions}{block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:ifshowcaptions}
  864. {block:ifnotshowcaptions}{block:permalinkpage}{block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:permalinkpage}{/block:ifnotshowcaptions}
  865. {/block:Photo}
  866.  
  867. {block:Photoset}
  868. {block:if500pxposts}{Photoset-500}{/block:if500pxposts}
  869. {block:ifnot500pxposts}{Photoset-400}{/block:ifnot500pxposts}
  870. {block:ifshowcaptions}{block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:ifshowcaptions}
  871. {block:ifnotshowcaptions}{block:permalinkpage}{block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:permalinkpage}{/block:ifnotshowcaptions}
  872. {/block:Photoset}
  873.  
  874. {block:Quote}
  875. <div id="quote">
  876. <span>“</span>{Quote}<span>”</span>
  877. <div style="margin-top:0px; font-size:8px; font-family:consolas, monospace; text-transform:uppercase; letter-spacing:1px">{block:Source}{Source}{/block:Source}</div>
  878. </div>
  879. {/block:Quote}
  880.  
  881. {block:Link}
  882. <a href="{URL}" {Target}><div id="link" class="link"><div class="jrc">
  883. {Name} &raquo;</div></div></a>
  884. {block:Description}<div class="text">{Description}</div>{/block:Description}
  885. {/block:Link}
  886.  
  887. {block:Chat}
  888. <div id="link">{block:Title}<t>{Title}</t>{/block:Title}</div>
  889. {block:Lines}<div class="label">
  890. {block:Label}<span>{Label}</span>{/block:Label} {Line}<br/></div>
  891. {/block:Lines}
  892. {/block:Chat}
  893.  
  894. {block:Audio}
  895. <div class="playercontainer">
  896. <div class="tplayer">
  897. {block:AudioPlayer}
  898.  
  899. {block:ifnotwhiteaudioplayer}
  900. {AudioPlayerBlack}
  901. {/block:ifnotwhiteaudioplayer}
  902.  
  903. {block:ifwhiteaudioplayer}
  904. {AudioPlayerWhite}
  905. {/block:ifwhiteaudioplayer}
  906.  
  907. {/block:AudioPlayer}
  908. </div>
  909. </div>
  910.  
  911. <div class="albumart">
  912. {block:AlbumArt}
  913. <img src="{AlbumArtURL}">
  914. {/block:AlbumArt}
  915. </div>
  916.  
  917. <div id="musicinfo">
  918. <table style="vertical-align:middle; height:70px;"><tr><td style="vertical-align:middle;">
  919. {block:TrackName}<b>{TrackName}</b><br>{/block:TrackName}
  920. {block:Artist}<i>Artist:</i> {Artist}<br>{/block:Artist}
  921. {block:Album}<i>Album:</i> {Album}{/block:Album}
  922. </td></tr></table>
  923. </div>
  924. {block:ifshowcaptions}{block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:ifshowcaptions}
  925. {block:ifnotshowcaptions}{block:permalinkpage}{block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:permalinkpage}{/block:ifnotshowcaptions}
  926. {/block:Audio}
  927.  
  928. {block:Video}
  929. {block:if500pxposts}{Video-500}{/block:if500pxposts}
  930. {block:ifnot500pxposts}{Video-400}{/block:ifnot500pxposts}
  931. {block:ifshowcaptions}{block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:ifshowcaptions}
  932. {block:ifnotshowcaptions}{block:permalinkpage}{block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:permalinkpage}{/block:ifnotshowcaptions}
  933. {/block:Video}
  934.  
  935. {block:Answer}
  936. <div id="ask">
  937. <img class="askerp" src="{AskerPortraitURL-64}"/>
  938. <div class="question"><b>{Asker} inquired:</b><br>{Question}</div>
  939. <div class="text">{Answer}</div>
  940. </div>
  941. {/block:Answer}
  942. </div><!-- CONTAINER -->
  943.  
  944. <div id="permapage"><span class="perma">
  945. {block:Date}<a href="{Permalink}">{DayOfMonth} {ShortMonth} {Year} {12Hour}:{Minutes} {CapitalAmPm}</a>{/block:Date} {block:NoteCount}| <a href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount} {block:RebloggedFrom}| <a href="{ReblogRootURL}">source: {ReblogRootName}</a> | <a href="{ReblogParentURL}">via {ReblogParentName}</a>{/block:RebloggedFrom} {block:IndexPage} | <a href="{ReblogURL}">Reblog?</a>{/block:IndexPage}</span>
  946. {block:ifnotshowtags}{block:PermalinkPage}{block:HasTags}<span class="tags"><br>{block:Tags} #<a href="{TagURL}">{Tag}</a>{/block:Tags}</span>{/block:HasTags}{/block:PermalinkPage}{/block:ifnotshowtags}
  947. {block:ifshowtags}{block:HasTags}<span class="tags"><br>{block:Tags} #<a href="{TagURL}">{Tag}</a>{/block:Tags}</span>{/block:HasTags}{/block:ifshowtags}
  948. </div>
  949.  
  950. </div><!-- POSTS -->
  951.  
  952. {block:PostNotes}
  953. <div class="notes">
  954. <a name="notes">{PostNotes}</a>
  955. </div><!--notes-->
  956. {/block:PostNotes}
  957. {/block:Posts}
  958.  
  959. </div><!-- AUTOPAGERIZE -->
  960. </div><!-- POSTMARGIN -->
  961. <!-- POSTS -->
  962.  
  963. </body>
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!