API tools faq
paste
Advertisement
mogimochi

Theme [03] Seizon Senryaku

mogimochi
Jul 7th, 2012
19,672
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 33.09 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!-----------------------------------------------------------------------
  6.  
  7. Theme 03 Seizon Senryaku
  8. by yukoki/yokoris
  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. 5. Do not redistribute.
  15.  
  16. ++ [YUKOKI 2012 THEMES' REVAMPS] ++ [YUKOKI REVAMP PACK #02] ++
  17. This theme is unlikely to be further edited or updated, & its preview will also be moved to a static page. It's similar to being labeled as an 'old theme'. This theme's first title was 'Himari'.
  18.  
  19. --------------------------------------------------- UPDATE VER 120914 -->
  20.  
  21. <meta name="color:background" content="#ebe9e9">
  22.  
  23. <meta name="color:post background" content="#ffffff">
  24.  
  25. <meta name="color:body text" content="#888888">
  26. <meta name="color:body bold" content="#f6625b">
  27. <meta name="color:body italic" content="#ee6f79">
  28. <meta name="color:body links" content="#fc9c81">
  29. <meta name="color:body links hover" content="#f695a4">
  30. <meta name="color:blockquote" content="#f696a5">
  31.  
  32. <meta name="color:post title bg" content="#f7f7f7">
  33. <meta name="color:post title text" content="#8a8787">
  34. <meta name="color:post title text hover" content="#000000">
  35. <meta name="color:post title hover bg" content="#e9e6e6">
  36.  
  37. <meta name="color:audio lines" content="#fce8df">
  38. <meta name="color:audio text" content="#474545">
  39.  
  40. <meta name="color:ask background" content="#f8eacc">
  41. <meta name="color:ask text" content="#7e7d7d">
  42. <meta name="color:asker text" content="#000000">
  43. <meta name="color:asker link" content="#d44024">
  44. <meta name="color:asker link hover" content="#dfdddd">
  45.  
  46. <meta name="color:tags" content="#f57478">
  47. <meta name="color:tags hover" content="#c0bfbf">
  48. <meta name="color:perma page text" content="#757575">
  49.  
  50. <meta name="color:chat even background" content="#f7f7f7" />
  51. <meta name="color:chat even name" content="#ee6f79" />
  52. <meta name="color:chat even text" content="#b8b8b8" />
  53. <meta name="color:chat odd background" content="#ffffff" />
  54. <meta name="color:chat odd name" content="#fc9b80" />
  55. <meta name="color:chat odd text" content="#919191" />
  56.  
  57. <meta name="color:sidebar background" content="#29272c">
  58.  
  59. <meta name="color:scrollbar" content="#f695a4">
  60. <meta name="color:scrollbar bg" content="#fce8e1">
  61. <meta name="color:desc scrollbar" content="#fce7df">
  62. <meta name="color:desc scrollbar bg" content="#fc9c82">
  63.  
  64. <meta name="color:nav links text" content="#ffffff">
  65. <meta name="color:nav links hover text" content="#ffffff">
  66. <meta name="color:nav links hover background" content="#ee6f79">
  67. <meta name="color:nav links hover top" content="#423d42">
  68.  
  69. <meta name="color:blog title" content="#000000">
  70. <meta name="color:desc text" content="#000000">
  71. <meta name="color:desc italic" content="#f6625b">
  72. <meta name="color:desc bold" content="#fc9d83">
  73. <meta name="color:desc links" content="#dc577c">
  74. <meta name="color:desc links hover" content="#686868">
  75.  
  76. <meta name="color:right sidebar background" content="#29272c">
  77. <meta name="color:custom links background" content="#423d42">
  78. <meta name="color:custom links text" content="#bbbbbb">
  79. <meta name="color:custom links hover background" content="#29272c">
  80.  
  81. <meta name="color:pagination background" content="#423d42">
  82. <meta name="color:pagination text" content="#bbbbbb">
  83. <meta name="color:pagination hover background" content="#ffffff">
  84. <meta name="color:pagination hover text" content="#cccccc">
  85.  
  86. <meta name="color:permalink background" content="#5c5857">
  87. <meta name="color:permalink links background" content="#807774">
  88. <meta name="color:permalink links text" content="#d8d4d4">
  89. <meta name="color:permalink links hover background" content="#a8a3a5">
  90. <meta name="color:permalink links hover text" content="#fdfcfc">
  91.  
  92. <meta name="image:sidebar" content="">
  93. <meta name="image:background" content="">
  94.  
  95. <meta name="text:billy music player code" content="" />
  96. <meta name="text:Link 1" content="" />
  97. <meta name="text:Link 1 URL" content="" />
  98. <meta name="text:Link 2" content="" />
  99. <meta name="text:Link 2 URL" content="" />
  100. <meta name="text:Link 3" content="" />
  101. <meta name="text:Link 3 URL" content="" />
  102. <meta name="text:Link 4" content="" />
  103. <meta name="text:Link 4 URL" content="" />
  104. <meta name="text:Link 5" content="" />
  105. <meta name="text:Link 5 URL" content="" />
  106. <meta name="text:Link 6" content="" />
  107. <meta name="text:Link 6 URL" content="" />
  108. <meta name="text:Link 7" content="" />
  109. <meta name="text:Link 7 URL" content="" />
  110. <meta name="text:Link 8" content="" />
  111. <meta name="text:Link 8 URL" content="" />
  112.  
  113. <meta name="if:post type 1" content="1">
  114. <meta name="if:post type 2" content="0">
  115. <meta name="if:post type 3" content="0">
  116. <meta name="if:fading photos" content="1">
  117. <meta name="if:monochrome posts" content="0">
  118. <meta name="if:white audio player" content="0">
  119. <meta name="if:light title background" content="0">
  120. <meta name="if:light desc background" content="0">
  121. <meta name="if:show captions" content="1">
  122.  
  123. <title>{title}{block:PostSummary}, {PostSummary}{/block:PostSummary}</title>
  124. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  125. <link rel="shortcut icon" href="{Favicon}" />
  126.  
  127. <style type="text/css">
  128.  
  129. iframe#tumblr_controls {
  130. right:3px !important; position:fixed !important;opacity: 0.1;
  131. -webkit-transition: all 0.4s ease-in-out;
  132. -moz-transition: all 0.4s ease-in-out;
  133. -o-transition: all 0.4s ease-in-out;
  134. -ms-transition: all 0.4s ease-in-out;
  135. transition: all 0.4s ease-in-out;
  136. }
  137. iframe#tumblr_controls:hover {
  138. opacity: 1;
  139. -webkit-transition: all 0.4s ease-in-out;
  140. -moz-transition: all 0.4s ease-in-out;
  141. -o-transition: all 0.4s ease-in-out;
  142. -ms-transition: all 0.4s ease-in-out;
  143. transition: all 0.4s ease-in-out;
  144. }
  145.  
  146. @font-face { font-family: "silkscreen"; src: url('https://dl.dropboxusercontent.com/s/f2dq1vddn86tmb3/slkscr.ttf'); }
  147.  
  148.  
  149. ::-webkit-scrollbar { width: 7px; }
  150. ::-webkit-scrollbar-track-piece { background-color:{color:scrollbar bg}; }
  151. ::-webkit-scrollbar-thumb:vertical {
  152. width: 20px;
  153. background-color: {color:scrollbar};
  154. }
  155.  
  156. #desc::-webkit-scrollbar { width: 5px; }
  157. #desc::-webkit-scrollbar-track-piece {background-color:{color:desc scrollbar bg}}
  158. #desc::-webkit-scrollbar-thumb:vertical {
  159. width: 10px;
  160. background-color: {color:desc scrollbar};
  161. }
  162.  
  163. body {
  164. background-color: {color:background};
  165. background-image: url({image:background});
  166. background-attachment: fixed;
  167. margin: 0;
  168. word-wrap: break-word;
  169. }
  170. a { text-decoration:none; }
  171.  
  172. #yi {margin-right:auto;margin-left:auto;width: 200px;height:100%;}
  173.  
  174. #sidebar {
  175. z-index: 100000;
  176. width: 200px;
  177. top: 0;
  178. padding-bottom: 10px;
  179. position: fixed;
  180. background-color: {color:sidebar background};
  181. {block:ifposttype1}margin-left: -390px;{/block:ifposttype1}
  182. {block:ifposttype2}margin-left: -340px;{/block:ifposttype2}
  183. {block:ifposttype3}margin-left: -420px;{/block:ifposttype3}
  184. {block:permalinkpage}
  185. {block:ifposttype1}margin-left: -380px;{/block:ifposttype1}
  186. {block:ifposttype2}margin-left: -380px;{/block:ifposttype2}
  187. {block:ifposttype3}margin-left: -380px;{/block:ifposttype3}
  188. {/block:permalinkpage}
  189. }
  190.  
  191. .pic {width: 200px;display: block;}
  192.  
  193. #navigate {
  194. width: 200px;
  195. height: 20px;
  196. }
  197.  
  198. .nl {
  199. font-family: consolas;
  200. background-color: {color:sidebar background};
  201. font-size: 8px;
  202. text-transform: uppercase;
  203. color: {color:nav links text};
  204. float: left;
  205. height: 20px;
  206. width: 50px;
  207. line-height: 20px;
  208. text-align: center;
  209. border-top: 100px solid {color:sidebar background};
  210. transition: 0.6s;
  211. -moz-transition: 0.6s;
  212. -webkit-transition: 0.6s;
  213. -o-transition: 0.6s;
  214. }
  215.  
  216. .nl:hover {
  217. border-top: 100px solid {color:nav links hover top};
  218. background-color:{color:nav links hover background};
  219. color: {color:nav links hover text};
  220. }
  221.  
  222. #blogt {
  223. color: {color:blog title};
  224. position: absolute;
  225. font-family: silkscreen, consolas;
  226. font-size: 9px;
  227. background-color: rgba(0,0,0,0.6);
  228. {block:iflighttitlebackground}
  229. background-color: rgba(255,255,255,0.6);
  230. {/block:iflighttitlebackground}
  231. width: 190px;
  232. margin: -24px 0 0 0;
  233. padding: 3px 5px;
  234. text-align: right;
  235. transition: 0.8s;
  236. -moz-transition: 0.8s;
  237. -webkit-transition: 0.8s;
  238. -o-transition: 0.8s;
  239. }
  240. #desc {
  241. color: {color:desc text};
  242. position: absolute;
  243. font-family: consolas;
  244. font-size: 9px;
  245. background-color: rgba(0,0,0,0.6);
  246. {block:iflightdescbackground}
  247. background-color: rgba(255,255,255,0.6);
  248. {/block:iflightdescbackground}
  249. width: 160px;
  250. height: 80px;
  251. padding: 5px 10px;
  252. overflow: auto;
  253. margin: -115px 0 0 10px;
  254. text-align: justify;
  255. opacity: 0;
  256. transition: 0.8s;
  257. -moz-transition: 0.8s;
  258. -webkit-transition: 0.8s;
  259. -o-transition: 0.8s;
  260. }
  261. #desc b,strong {color: {color:desc bold};font-weight:100;}
  262. #desc i,em {color:{color:desc italic};font-style:none;}
  263. #desc a { color: {color:desc links};
  264. -webkit-transition: all 0.4s ease-in-out;
  265. -moz-transition: all 0.4s ease-in-out;
  266. -o-transition: all 0.4s ease-in-out;
  267. -ms-transition: all 0.4s ease-in-out;
  268. transition: all 0.4s ease-in-out;
  269. }
  270. #desc a:hover { color: {color:desc links hover}; }
  271.  
  272. #sidebar:hover #blogt {margin: -134px 0 0 0;padding-bottom:110px;}
  273. #sidebar:hover #desc {opacity: 1;transition-delay:0.4s;}
  274.  
  275.  
  276. #er {margin-right:auto;margin-left:auto;width:95px;height:100%;}
  277.  
  278. #right {
  279. z-index: 100000;
  280. position: fixed;
  281. bottom: 0;
  282. width: 75px;
  283. background-color: {color:right sidebar background};
  284. padding: 10px;
  285. {block:ifposttype1}margin-left: 330px;{/block:ifposttype1}
  286. {block:ifposttype2}margin-left: 280px;{/block:ifposttype2}
  287. {block:ifposttype3}margin-left: 330px;{/block:ifposttype3}
  288. {block:permalinkpage}
  289. {block:ifposttype1}margin-left: 330px;{/block:ifposttype1}
  290. {block:ifposttype2}margin-left: 330px;{/block:ifposttype2}
  291. {block:ifposttype3}margin-left: 330px;{/block:ifposttype3}
  292. {/block:permalinkpage}
  293. }
  294.  
  295. .icon {width: 75px; height: 75px;display:block;padding-bottom: 5px;}
  296.  
  297. .cl {
  298. background-color: {color:custom links background};
  299. color: {color:custom links text};
  300. width: 65px;
  301. padding: 3px 5px;
  302. font-family: consolas;
  303. font-size: 8px;
  304. text-transform: uppercase;
  305. text-align: center;
  306. margin: 5px 0 0 0;
  307. transition: 0.6s;
  308. -moz-transition: 0.6s;
  309. -webkit-transition: 0.6s;
  310. -o-transition: 0.6s;
  311. }
  312.  
  313. .cl:hover {
  314. background-color: {color:custom links hover background};
  315. color: {color:custom links hover text};
  316. }
  317.  
  318. .pagination {
  319. position: absolute;
  320. margin-left: 90px;
  321. margin-top: 15px;
  322. font-family: consolas;
  323. font-size: 12px;
  324. }
  325.  
  326. .pa {
  327. background-color: {color:pagination background};
  328. color: {color:pagination text};
  329. margin-bottom: 5px;
  330. width: 20px;
  331. height: 20px;
  332. text-align: center;
  333. line-height: 20px;
  334. transition: 0.6s;
  335. -moz-transition: 0.6s;
  336. -webkit-transition: 0.6s;
  337. -o-transition: 0.6s;
  338. }
  339.  
  340. .pa:hover {
  341. background-color: {color:pagination hover background};
  342. color: {color:pagination hover text};
  343. }
  344.  
  345. #content {
  346. margin-top: 10px;
  347. margin-left: auto;
  348. margin-right: auto;
  349. padding: 5px 10px;
  350. {block:ifposttype1}width: 520px;{/block:ifposttype1}
  351. {block:ifposttype2}width: 420px;{/block:ifposttype2}
  352. {block:ifposttype3}width: 600px;{/block:ifposttype3}
  353.  
  354. {block:permalinkpage}
  355. {block:ifposttype2}width: 520px;{/block:ifposttype2}
  356. {block:ifposttype3}width: 530px;{/block:ifposttype3}
  357. {/block:permalinkpage}
  358. }
  359.  
  360. .posts {
  361. float: left;
  362. background-color: {color:post background};
  363. margin: 10px 0;
  364. {block:indexpage}padding: 10px 10px 0 10px;{/block:indexpage}
  365. {block:permalinkpage}padding: 10px;{/block:permalinkpage}
  366. {block:ifposttype1}width: 500px;{/block:ifposttype1}
  367. {block:ifposttype2}width: 400px;{/block:ifposttype2}
  368. {block:ifposttype3}width: 250px;margin: 10px 5px;{/block:ifposttype3}
  369.  
  370. {block:permalinkpage}
  371. {block:ifposttype1}width: 500px;{/block:ifposttype1}
  372. {block:ifposttype2}width: 500px;{/block:ifposttype2}
  373. {block:ifposttype3}width: 500px;{/block:ifposttype3}
  374. {/block:permalinkpage}
  375. }
  376.  
  377. .photo {
  378. {block:iffadingphotos}opacity: 0.8;{/block:iffadingphotos}
  379. {block:ifposttype1}width: 500px;{/block:ifposttype1}
  380. {block:ifposttype2}width: 400px;{/block:ifposttype2}
  381. {block:ifposttype3}width: 250px;{/block:ifposttype3}
  382.  
  383. {block:permalinkpage}
  384. {block:ifposttype1}width: 500px;{/block:ifposttype1}
  385. {block:ifposttype2}width: 500px;{/block:ifposttype2}
  386. {block:ifposttype3}width: 500px;{/block:ifposttype3}
  387. {/block:permalinkpage}
  388. {block:IfMonochromePosts}
  389. filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
  390. filter: gray; /* IE6-9 */
  391. -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
  392. {/block:IfMonochromePosts}
  393. -webkit-transition: all 0.7s linear;
  394. -moz-transition: all 0.7s linear;
  395. -o-transition: all 0.7s linear;
  396. }
  397. .posts:hover .photo {
  398. {block:IfMonochromePosts}
  399. filter: none;
  400. -webkit-filter: grayscale(0%);
  401. {/block:IfMonochromePosts}
  402. {block:iffadingphotos}opacity:1;{/block:iffadingphotos}
  403. {block:iffadingphotosreversed}opacity: 0.6;{/block:iffadingphotosreversed}
  404. }
  405.  
  406. .text {
  407. font-family: calibri;
  408. color: {color:body text};
  409. font-size: 12px;
  410. text-align: justify;
  411. }
  412.  
  413. .text b,strong {color:{color:body bold};}
  414. .text i,em {color:{color:body italic};}
  415.  
  416. .text a, .src a {
  417. color: {color:body links};
  418. transition: 0.4s;
  419. -webkit-ransition: 0.4s;
  420. -moz-ransition: 0.4s;
  421. -o-ransition: 0.4s;
  422. }
  423.  
  424. .text a:hover, .src a:hover {
  425. color: {color:body links hover};
  426. }
  427.  
  428. .text ul { list-style-type: square; }
  429.  
  430. .posts blockquote {
  431. margin: 5px 10px;
  432. border-left: 3px solid {color:blockquote};
  433. padding: 3px 10px;
  434. }
  435.  
  436. .posts img {
  437. {block:ifposttype1}max-width: 500px;{/block:ifposttype1}
  438. {block:ifposttype2}max-width: 400px;{/block:ifposttype2}
  439. {block:ifposttype3}max-width: 250px;{/block:ifposttype3}
  440.  
  441. {block:permalinkpage}
  442. {block:ifposttype1}max-width: 500px;{/block:ifposttype1}
  443. {block:ifposttype2}max-width: 500px;{/block:ifposttype2}
  444. {block:ifposttype3}max-width: 500px;{/block:ifposttype3}
  445. {/block:permalinkpage}
  446. }
  447. .posts blockquote img {max-width: 100%;}
  448.  
  449. .quote {
  450. font-family: georgia;
  451. font-size: 15px;
  452. text-align: right;
  453. color: {color:post title text};
  454. }
  455.  
  456. .src {
  457. font-family: consolas;
  458. font-size: 10px;
  459. text-align: right;
  460. text-transform: uppercase;
  461. }
  462.  
  463. .ltitle, .ptitle {
  464. font-family: georgia;
  465. font-size: 16px;
  466. padding: 5px 0;
  467. text-align: center;
  468. background-color: {color:post title bg};
  469. color: {color:post title text};
  470. -webkit-transition: all 0.4s ease-in-out;
  471. -moz-transition: all 0.4s ease-in-out;
  472. -o-transition: all 0.4s ease-in-out;
  473. -ms-transition: all 0.4s ease-in-out;
  474. transition: all 0.4s ease-in-out;
  475. }
  476.  
  477. .ltitle:hover {
  478. background-color: {color:post title hover bg};
  479. color: {color:post title text hover};
  480. }
  481.  
  482. .odd .line {background-color: {color:chat odd background};padding: 3px 5px;margin-bottom:3px;color:{color:chat odd text};}
  483. .even .line {background-color: {color:chat even background};padding: 3px 5px;margin-bottom:3px;color:{color:chat even text};}
  484. .odd .name {color: {color:chat odd name};padding: 3px 5px;}
  485. .even .name {color: {color:chat even name};padding: 3px 5px;}
  486.  
  487. #album {
  488. width: 150px;
  489. height: 150px;
  490. background-color: #888;
  491. {block:ifposttype1}position: absolute;{/block:ifposttype1}
  492. {block:ifposttype2}position: absolute;{/block:ifposttype2}
  493. {block:ifposttype3}width: 250px;height: 250px;{/block:ifposttype3}
  494.  
  495. {block:permalinkpage}{block:ifposttype3}
  496. position: absolute;
  497. width: 150px;
  498. height: 150px;
  499. {/block:ifposttype3}{/block:permalinkpage}
  500. }
  501. .noalbum {
  502. {block:ifposttype1}width: 150px;height: 150px;{/block:ifposttype1}
  503. {block:ifposttype2}width: 150px;height: 150px;{/block:ifposttype2}
  504. background-color: #888;
  505. z-index: 50;
  506. {block:ifposttype3}width: 250px;height: 250px;{/block:ifposttype3}
  507.  
  508. {block:permalinkpage}
  509. {block:ifposttype3}
  510. width: 150px;
  511. height: 150px;
  512. {/block:ifposttype3}
  513. {/block:permalinkpage}
  514. }
  515. .albumart {
  516. {block:ifposttype1}width: 150px;height: 150px;{/block:ifposttype1}
  517. {block:ifposttype2}width: 150px;height: 150px;{/block:ifposttype2}
  518. z-index: 50;
  519. {block:ifposttype3}max-width: 250px;max-height: 250px;{/block:ifposttype3}
  520.  
  521. {block:permalinkpage}
  522. {block:ifposttype3}width: 150px;height: 150px;
  523. {/block:ifposttype3}
  524. {/block:permalinkpage}
  525. }
  526.  
  527. #audinfo {
  528. width: 340px;
  529. margin-left: 160px;
  530. min-height: 150px;
  531. {block:ifposttype3}
  532. position: absolute;
  533. z-index: 10;
  534. width:250px;
  535. margin-left: 0;
  536. margin-top: -200px;
  537. {/block:ifposttype3}
  538. {block:permalinkpage}
  539. {block:ifposttype3}
  540. position: static;
  541. width: 340px;
  542. margin-left: 160px;
  543. margin-top: 0;
  544. min-height: 150px;
  545. {/block:ifposttype3}{/block:permalinkpage}
  546. }
  547.  
  548. .aud {
  549. height: 27px;
  550. margin-bottom: 5px;
  551. {block:ifwhiteaudioplayer}
  552. background-color: #fff;
  553. {/block:ifwhiteaudioplayer}
  554. {block:ifnotwhiteaudioplayer}
  555. background-color: #000;
  556. {/block:ifnotwhiteaudioplayer}
  557. {block:ifposttype1}width: 340px;{/block:ifposttype1}
  558. {block:ifposttype2}width: 240px;margin-left:-100px;{/block:ifposttype2}
  559. {block:ifposttype3}
  560. opacity: 0.1;
  561. {block:ifposttype3}
  562. {block:permalinkpage}
  563. {block:ifposttype3}width: 340px;opacity: 1;{/block:ifposttype3}
  564. {block:ifposttype2}width: 340px;{/block:ifposttype2}
  565. {/block:permalinkpage}
  566. -webkit-transition: all 0.4s ease-in-out;
  567. -moz-transition: all 0.4s ease-in-out;
  568. -o-transition: all 0.4s ease-in-out;
  569. -ms-transition: all 0.4s ease-in-out;
  570. transition: all 0.4s ease-in-out;
  571. }
  572. .posts:hover .aud, .posts:hover .audline {
  573. {block:ifposttype3}opacity: 0.4;{/block:ifposttype3}
  574. }
  575.  
  576. .audline {
  577. {block:ifposttype1}width: 320px;{/block:ifposttype1}
  578. {block:ifposttype2}width: 220px;margin-left:-100px;{/block:ifposttype2}
  579. {block:ifposttype3}opacity: 0.1;{/block:ifposttype3}
  580. {block:permalinkpage}
  581. {block:ifposttype3}width: 320px;opacity: 1;{/block:ifposttype3}
  582. {/block:permalinkpage}
  583. text-align: left;
  584. height: 26px;
  585. margin-bottom: 5px;
  586. background-color: {color:audio lines};
  587. color: {color:audio text};
  588. padding: 0 10px;
  589. line-height: 27px;
  590. font-family: consolas;
  591. font-size: 10px;
  592. text-transform: uppercase;
  593. -webkit-transition: all 0.4s ease-in-out;
  594. -moz-transition: all 0.4s ease-in-out;
  595. -o-transition: all 0.4s ease-in-out;
  596. -ms-transition: all 0.4s ease-in-out;
  597. transition: all 0.4s ease-in-out;
  598. }
  599.  
  600. .posts:hover .audline:hover, .posts:hover .aud:hover { opacity: 1; }
  601.  
  602. .askerportrait {
  603. {block:ifposttype1}margin-left: -250px;{/block:ifposttype1}
  604. {block:ifposttype2}margin-left: -200px;{/block:ifposttype2}
  605. {block:ifposttype3}margin-left: -125px;{/block:ifposttype3}
  606. max-width: 64px;
  607. max-height: 64px;
  608. position: absolute;
  609. border: 10px solid {color:ask background};
  610. }
  611. .a {
  612. margin-left: 100px;
  613. text-align: justify;
  614. background-color: {color:ask background};
  615. min-height: 64px;
  616. padding: 10px;
  617. font-family: calibri,geneva;
  618. font-size: 13px;
  619. color: {color:ask text};
  620. }
  621. .asker {
  622. color: {color:asker text};
  623. font-family: consolas;
  624. font-size: 10px;
  625. text-transform: uppercase;
  626. }
  627. .asker a {color: {color:asker link};border-bottom: 1px dashed {color:asker link};}
  628. .q {margin-top: 10px;}
  629. .tri {
  630. position: absolute;
  631. font-size: 30px;
  632. margin: 20px 0 0 85px;
  633. color: {color:ask background};
  634. }
  635.  
  636. .tags {
  637. font-size: 10px;
  638. letter-spacing:1px;}
  639. .tags a, #permapg a {color:{color:tags};
  640. -webkit-transition: all 0.4s ease-in-out;
  641. -moz-transition: all 0.4s ease-in-out;
  642. -o-transition: all 0.4s ease-in-out;
  643. -ms-transition: all 0.4s ease-in-out;
  644. transition: all 0.4s ease-in-out;
  645. }
  646. .tags a:hover, #permapg a:hover {color:{color:tags hover};background-color:{color:tags hover bg};}
  647.  
  648. .taag {
  649. width: 500px;
  650. position: absolute;
  651. margin-left: -500px;
  652. margin-top: 50px;
  653. text-align: right;
  654. font-size: 8px;
  655. letter-spacing: 1px;
  656. opacity: 0;
  657. -webkit-transition: all 0.4s ease-in-out;
  658. -moz-transition: all 0.4s ease-in-out;
  659. -o-transition: all 0.4s ease-in-out;
  660. -ms-transition: all 0.4s ease-in-out;
  661. transition: all 0.4s ease-in-out;
  662. }
  663. .taag a {
  664. font-family: consolas;
  665. line-height: 14px;
  666. padding: 1px 5px;
  667. color:{color:tags};
  668. {block:indexpage}
  669. background-color: {color:tags bg};
  670. {/block:indexpage}
  671. border-left: 0 solid {color:tags};
  672. -webkit-transition: all 0.4s ease-in-out;
  673. -moz-transition: all 0.4s ease-in-out;
  674. -o-transition: all 0.4s ease-in-out;
  675. -ms-transition: all 0.4s ease-in-out;
  676. transition: all 0.4s ease-in-out;
  677. }
  678. .taag a:hover {
  679. color:{color:tags hover};
  680. background-color:{color:tags hover bg};
  681. border-left: 10px solid {color:tags};
  682. }
  683. .posts:hover .taag {
  684. opacity: 1;
  685. margin-left: -520px;
  686. }
  687.  
  688. #permapg {
  689. margin-top: 10px;
  690. font-family: consolas;
  691. text-align: center;
  692. color: {color:perma page text};
  693. font-size: 10px;
  694. letter-spacing: 1px;
  695. text-transform: uppercase;
  696. }
  697.  
  698. #notecontainer {
  699. padding: 10px;
  700. text-decoration: none;
  701. width: 500px;
  702. }
  703. ol.notes {
  704. list-style-type: none;
  705. letter-spacing: -1px;
  706. font-size: 11px;
  707. color: {color:body};
  708. font-family: consolas;
  709. text-decoration: none;
  710. margin: 0;
  711. width: 500px;
  712. padding: 5px;
  713. text-align: left;
  714. }
  715. ol.notes a {color: {color:body links};
  716. -webkit-transition: all 0.4s ease-in-out;
  717. -moz-transition: all 0.4s ease-in-out;
  718. -o-transition: all 0.4s ease-in-out;
  719. -ms-transition: all 0.4s ease-in-out;
  720. transition: all 0.4s ease-in-out;}
  721. ol.notes a:hover {color: {color:body links hover};background-color:{color:body links hover bg};}
  722. img.avatar {
  723. margin-right: 5px;
  724. width: 10px;
  725. height: 10px;
  726. float: left;
  727. }
  728.  
  729. .permalink {
  730. height: 15px;
  731. line-height: 10px;
  732. padding-left: 10px;
  733. margin-left: -10px;
  734. margin-top: 10px;
  735. background-color: {color:permalink background};
  736. text-align: right;
  737. {block:ifposttype1}width: 510px;{/block:ifposttype1}
  738. {block:ifposttype2}width: 410px;{/block:ifposttype2}
  739. {block:ifposttype3}width: 260px;{/block:ifposttype3}
  740. }
  741.  
  742. .permalink a {
  743. font-family: silkscreen, consolas;
  744. font-size: 8px;
  745. color: {color:permalink links text};
  746. background-color: {color:permalink links background};
  747. margin: 0 5px;
  748. line-height: 15px;
  749. padding: 0 5px;
  750. display: block;
  751. float: left;
  752. transition: 0.6s;
  753. -moz-transition: 0.6s;
  754. -webkit-transition: 0.6s;
  755. -o-transition: 0.6s;
  756. }
  757.  
  758. .permalink a:hover {
  759. color: {color:permalink links hover text};
  760. background-color: {color:permalink links hover background};
  761. }
  762.  
  763. #ongaku {
  764. width: 25px;
  765. height: 25px;
  766. overflow: hidden;
  767. position: absolute;
  768. background-color: {color:sidebar background};
  769. border: 1px solid {color:nav links hover top};
  770. margin-left: -40px;
  771. margin-top: 10px;
  772. }
  773. .musicgif {
  774. margin: 5px;
  775. -webkit-transition: all 0.4s ease-in-out;
  776. -moz-transition: all 0.4s ease-in-out;
  777. -o-transition: all 0.4s ease-in-out;
  778. -ms-transition: all 0.4s ease-in-out;
  779. transition: all 0.4s ease-in-out;
  780. }
  781. #ongaku:hover .musicgif {
  782. margin-top: -30px;
  783. }
  784.  
  785. #musicpl {
  786. width: 20px;
  787. overflow: hidden;
  788. height: 20px;
  789. padding: 2px 20px 10px 0;
  790. margin-left: -17px;
  791. background-color: {color:sidebar background};
  792. }
  793.  
  794. #warning {
  795. position: fixed;
  796. background-color: #fff;
  797. width: 100%;
  798. height: 100%;
  799. position: fixed;
  800. z-index: -1;
  801. opacity: 0;
  802. top: 0;
  803. left: 0;
  804. padding-top: 200px;
  805. text-align: center;
  806. font-family: silkscreen;
  807. font-size: 16px;
  808. {block:ifposttype1}
  809. {block:ifposttype2}opacity: 1;z-index: 100001;{/block:ifposttype2}
  810. {block:ifposttype3}opacity: 1;z-index: 100001;{/block:ifposttype3}
  811. {/block:ifposttype1}
  812. {block:ifposttype2}
  813. {block:ifposttype3}opacity: 1;z-index: 100001;{/block:ifposttype3}
  814. {/block:ifposttype2}
  815. {block:ifposttype1}{block:ifposttype2}{block:ifposttype3}
  816. opacity: 1;z-index: 100001;
  817. {/block:ifposttype3}{block:ifposttype2}{block:ifposttype1}
  818. {block:ifnotposttype1}{block:ifnotposttype2}{block:ifnotposttype3}
  819. opacity: 1;z-index: 100001;
  820. {/block:ifnotposttype3}{block:ifnotposttype2}{block:ifnotposttype1}
  821. }
  822.  
  823. {CustomCSS}
  824.  
  825. </style>
  826.  
  827. {block:ifposttype3}
  828. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  829.  
  830. <script src="http://static.tumblr.com/6hsqxdt/vmwm2rb4g/infinitescrolling.js"></script><script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>
  831.  
  832. <script>
  833. $(function(){
  834. var $container = $('#content');
  835. $container.imagesLoaded(function(){
  836. $container.masonry({
  837. itemSelector: '.posts',
  838. });
  839. });
  840. $container.infinitescroll({
  841. itemSelector : ".posts",
  842. navSelector : "div.pagination",
  843. nextSelector : ".pagination a#next",
  844. loadingImg : "",
  845. loadingText : "<em></em>",
  846. bufferPx : 10000,
  847. extraScrollPx: 12000,
  848. },
  849. // trigger Masonry as a callback
  850. function( newElements ) {
  851. var $newElems = $( newElements ).css({ opacity: 0 });
  852. // ensure that images load before adding to masonry layout
  853. $newElems.imagesLoaded(function(){
  854. $newElems.animate({ opacity: 1 });
  855. $container.masonry( 'appended', $newElems, true );
  856. });
  857. }
  858. );
  859. });
  860. </script>
  861. {/block:ifposttype3}
  862. {/block:indexpage}
  863.  
  864. </head><body>
  865.  
  866. <div id="warning">Please tick only one post type!!</div>
  867.  
  868. <div id="yi"><div id="sidebar">
  869.  
  870. <div id="ongaku">
  871. <div class="musicgif"><img src="http://media.tumblr.com/tumblr_m7vzknnBik1r6o8v2.gif"/></div>
  872. <div id="musicpl">
  873. {text:billy music player code}
  874. </div>
  875. </div><!--ongaku-->
  876.  
  877. <div id="navigate">
  878. <a href="/"><div class="nl">restart</div></a>
  879. <a href="/ask"><div class="nl">contact</div></a>
  880. <a href="/archive"><div class="nl">memories</div></a>
  881. <a href="http://yukoki.tumblr.com"><div class="nl">credit</div></a>
  882. </div><!--navigate-->
  883. <img class="pic" src="{image:sidebar}">
  884. <div id="blogt">{title}</div>
  885. <div id="desc">{description}</div>
  886. </div></div><!--sidebar--><!--yi-->
  887.  
  888. <div id="er"><div id="right">
  889.  
  890. {block:Pagination}
  891. <div class="pagination">
  892. {block:NextPage}
  893. <a href="{NextPage}"><div class="pa">→</div></a>
  894. {/block:NextPage}
  895. {block:PreviousPage}
  896. <a href="{PreviousPage}"><div class="pa">←</div></a>
  897. {/block:PreviousPage}
  898. </div><!--pagination-->
  899. {/block:Pagination}
  900.  
  901. <img class="icon" src="{PortraitURL-96}">
  902. {block:IfLink1}<a href="{text:Link 1 URL}"><div class="cl">{text:Link 1}</div></a>{/block:IfLink1}
  903. {block:IfLink2}<a href="{text:Link 2 URL}"><div class="cl">{text:Link 2}</div></a>{/block:IfLink2}
  904. {block:IfLink3}<a href="{text:Link 3 URL}"><div class="cl">{text:Link 3}</div></a>{/block:IfLink3}
  905. {block:IfLink4}<a href="{text:Link 4 URL}"><div class="cl">{text:Link 4}</div></a>{/block:IfLink4}
  906. {block:IfLink5}<a href="{text:Link 5 URL}"><div class="cl">{text:Link 5}</div></a>{/block:IfLink5}
  907. {block:IfLink6}<a href="{text:Link 6 URL}"><div class="cl">{text:Link 6}</div></a>{/block:IfLink6}
  908. {block:IfLink7}<a href="{text:Link 7 URL}"><div class="cl">{text:Link 7}</div></a>{/block:IfLink7}
  909. {block:IfLink8}<a href="{text:Link 8 URL}"><div class="cl">{text:Link 8}</div></a>{/block:IfLink8}
  910. </div><!--right--></div><!--er-->
  911.  
  912. <center><div id="content">
  913. {block:posts}
  914. <div class="posts">
  915.  
  916. {block:Quote}
  917. <div class="quote">"{Quote}"</div>
  918. <div class="src">- {Source}</div>
  919. {/block:Quote}
  920.  
  921. {block:Photo}
  922. {LinkOpenTag}
  923. <div class="photo"><img src="{PhotoURL-500}"></div>
  924. {LinkCloseTag}
  925. {block:IfShowCaptions}{block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}
  926. {block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}
  927. <div class="text">{Caption}</div>
  928. {/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}
  929. {/block:Photo}
  930.  
  931. {block:Photoset}
  932. <div class="photo">
  933. {block:indexpage}
  934. {block:ifposttype1}{Photoset-500}{/block:ifposttype1}
  935. {block:ifposttype2}{Photoset-400}{/block:ifposttype2}
  936. {block:ifposttype3}{Photoset-250}{/block:ifposttype3}
  937. {/block:indexpage}
  938. {block:permalinkpage}
  939. {block:ifposttype1}{Photoset-500}{/block:ifposttype1}
  940. {block:ifposttype2}{Photoset-500}{/block:ifposttype2}
  941. {block:ifposttype3}{Photoset-500}{/block:ifposttype3}
  942. {/block:permalinkpage}
  943. </div>
  944. {block:IfShowCaptions}{block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}
  945. {block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}
  946. <div class="text">{Caption}</div>
  947. {/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}
  948. {/block:Photoset}
  949.  
  950. {block:Link}
  951. <a href="{URL}"><div class="ltitle">{Name} →</div></a>
  952. {block:Description}
  953. <div class="text">{description}</div>
  954. {/block:Description}
  955. {/block:Link}
  956.  
  957. {block:Chat}
  958. {block:Title}<div class="ltitle">{Title}</div>{/block:Title}
  959. <div class="text">
  960. {block:Lines}<div class="{Alt}">
  961. <div class="line">{block:Label}<span class="name">{Label}</span>{/block:Label} {Line}<br /></div></div>
  962. {/block:Lines}
  963. </div>
  964. {/block:Chat}
  965.  
  966. {block:Audio}
  967. <div id="album"><div class="noart"></div>{block:AlbumArt}<img class="albumart" src="{AlbumArtURL}">{/block:AlbumArt}</div>
  968. <div id="audinfo">
  969. <div class="aud">{block:ifwhiteaudioplayer}{AudioPlayerWhite}{/block:ifwhiteaudioplayer}{block:ifnotwhiteaudioplayer}{AudioPlayerBlack}{/block:ifnotwhiteaudioplayer}</div>
  970. {block:TrackName}<div class="audline">Track: {TrackName}</div>{/block:TrackName}
  971. {block:Album}<div class="audline">Album: {Album}</div>{/block:Album}
  972. {block:Artist}<div class="audline">Artist: {Artist}</div>{/block:Artist}
  973. <div class="audline">{PlayCountWithLabel}</div>
  974. </div><!--audinfo-->
  975. {block:IfShowCaptions}{block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}
  976. {block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}
  977. <div class="text">{Caption}</div>
  978. {/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}
  979. {/block:Audio}
  980.  
  981. {block:Text}
  982. {block:title}<div class="ptitle">{title}</div>{/block:title}
  983. <div class="text">{body}</div>
  984. {/block:Text}
  985.  
  986. {block:Answer}
  987. <img class="askerportrait" src="{AskerPortraitURL-64}">
  988. <div class="tri">◀</div>
  989. <div class="a">
  990. <span class="asker">{Asker} whispered:</span>
  991. <span class="q">{Question}</span>
  992. </div>
  993. <div class="text">{Answer}</div>
  994. {/block:Answer}
  995.  
  996. {block:Video}
  997. {block:indexpage}
  998. {block:ifposttype1}{Video-500}{/block:ifposttype1}
  999. {block:ifposttype2}{Video-400}{/block:ifposttype2}
  1000. {block:ifposttype3}{Video-250}{/block:ifposttype3}
  1001. {/block:indexpage}
  1002. {block:permalinkpage}
  1003. {block:ifposttype1}{Video-500}{/block:ifposttype1}
  1004. {block:ifposttype2}{Video-500}{/block:ifposttype2}
  1005. {block:ifposttype3}{Video-500}{/block:ifposttype3}
  1006. {/block:permalinkpage}
  1007. {block:IfShowCaptions}{block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}
  1008. {block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}
  1009. <div class="text">{Caption}</div>
  1010. {/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}
  1011. {/block:Video}
  1012.  
  1013. {block:indexpage}{block:date}
  1014. <div class="permalink">
  1015. <a href="{permalink}">{timeago}</a>
  1016. <a href="{permalink}">{NoteCountWithLabel}</a>
  1017. {block:RebloggedFrom}
  1018. <a href="{ReblogParentURL}">via</a>
  1019. <a href="{ReblogRootURL}">{block:ifnotposttype3}originally{/block:ifnotposttype3}{block:ifposttype3}ori{/block:ifposttype3}</a>
  1020. {/block:RebloggedFrom}
  1021. </div><!--permalink-->
  1022. {/block:date}{/block:indexpage}
  1023.  
  1024. {block:permalinkpage}{block:date}
  1025.  
  1026. <div id="permapg">
  1027. Posted on {DayOfMonthWithZero} {Month} {Year}, at {12Hour}.{Minutes}{AmPm} with {NoteCountWithLabel}<br>
  1028. {block:RebloggedFrom}reblogged from <a href="{ReblogParentURL}">{ReblogParentName}</a>, originally by <a href="{ReblogRootURL}">{ReblogRootName}</a>{/block:RebloggedFrom}
  1029. {block:HasTags}<div class="tags">
  1030. filed under: {block:tags}<a href="{tagurl}">#{tag}</a> {/block:tags}
  1031. </div>{/block:HasTags}
  1032. </div><!--permapg-->
  1033.  
  1034. {block:PostNotes}
  1035. <div id="notecontainer">{PostNotes}</div>
  1036. {/block:PostNotes}
  1037.  
  1038. {/block:date}{/block:permalinkpage}
  1039.  
  1040. </div><!--posts-->{/block:posts}
  1041.  
  1042. {block:ContentSource}
  1043. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  1044. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  1045. {/block:SourceLogo}
  1046. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  1047. {/block:ContentSource}
  1048.  
  1049. <!--{block:NoRebloggedFrom}{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}{/block:NoRebloggedFrom} -->
  1050.  
  1051. </div><!--content--></center>
  1052.  
  1053. </body>
  1054. </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!