thetruththemes

KH Command Deck

Mar 30th, 2015
6,804
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 55.88 KB | None | 0 0
  1. <html>
  2. <!---------------------------------------------------------------------------
  3. ,,
  4. ,GG,
  5. GIIG
  6. Gl''lG
  7. ;G' 'G;
  8. GP YG
  9. oQ' 'Qo -Cᴏᴍᴍᴀɴᴅ Dᴇᴄᴋ ᴛʜᴇᴍᴇ ʙʏ
  10. *TGGGGGGGGGGGGQQQ, ,QQQGGGGGGGGGGGGP* ɴʏᴄᴛᴏᴛʜᴇᴍᴇs.ᴛᴜᴍʙʟʀ.ᴄᴏᴍ
  11. *TGo, '* *' ,oGP*
  12. *TGo, ɴʏᴄᴛ□ᴛʜᴇᴍᴇs ,oGP* -ᴘʟᴇᴀsᴇ ʀᴇғᴇʀ ᴛᴏ ᴏʀɪɢɪɴᴀʟ
  13. *TGio,, ,,oiGP* ᴘᴏsᴛ ʟɪɴᴋ ғᴏʀ ʀᴜʟᴇs ᴀɴᴅ ɪɴғo
  14. ;GGT' 'TGG:
  15. GG' ii 'GG -ᴅᴏ ɴᴏᴛ ʀᴇᴍᴏᴠᴇ ᴀɴʏ ᴏғ ᴛʜᴇ
  16. GG' ,GG, 'GG ᴄᴏᴅᴇ ᴄʀᴇᴅɪᴛ ᴏʀ ᴍᴏᴠᴇ ɪᴛ ᴛᴏ
  17. GG* oGGGGo. *GG ᴀ ᴘᴀɢᴇ.
  18. oG* oGG* *GGo. *Go
  19. ;GG;oGG* *GGo;GG;
  20. ,GGGT* *TGGG,
  21. ""' '""
  22.  
  23. ---------------------------------------------------------------------------->
  24. <!-- hover text 1/2 -->
  25. <link href="style-my-tooltips.css" rel="stylesheet" type="text/css" />
  26. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script><script type="text/javascript" src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script><script>(function($){$(document).ready(function(){$("[title]").style_my_tooltips();});})(jQuery);</script>
  27.  
  28. <head>
  29.  
  30. {block:Ifcustomfavicon}<link rel="shortcut icon" href="{image:favicon}"/>{/block:Ifcustomfavicon}
  31. {block:IfNotcustomfavicon}<link rel="shortcut icon" href="{favicon}"/>{/block:IfNotcustomfavicon}
  32.  
  33. <link rel="alternate" type="application/rss+xml" href="{RSS}"/>
  34. <title>{Title}</title>
  35. {block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}
  36.  
  37. <!-------------------------------- IMAGES ---------------------------------->
  38. <meta name="image:Background" content="http://static.tumblr.com/59acfa871fd82961ae25b360e8072d39/u5vz4xb/Kjlnlw3qw/tumblr_static_7098e3qd50cgwsgcsk0goscg8.png"/>
  39. <meta name="image:HUD Avatar 134x134" content="http://static.tumblr.com/a30ef5bf9ee5909f6360142263fe1edc/u5vz4xb/ZH1nm1x91/tumblr_static_c0mq5lpcka8skcowgk80wkgcc.png"/>
  40. <meta name="image:Album Art" content="https://68.media.tumblr.com/26a12b635fa21b1c335e22e1cd84e110/tumblr_inline_ni4vz2P0bz1rg1lxe.png"/>
  41. <meta name="image:Custom Cursor" content="https://68.media.tumblr.com/e43960430646d6981614dac781025145/tumblr_inline_n4cu0yOER91rg1lxe.png"/>
  42. <meta name="image:Custom Cursor Links" content="https://68.media.tumblr.com/3cee576847929faa11e2746b544aa1ca/tumblr_inline_n4cu12goiI1rg1lxe.png"/>
  43. <meta name="image:Favicon" content="https://68.media.tumblr.com/682dbba20b472b01eee53db557561283/tumblr_inline_nilprmi9a21rg1lxe.png"/>
  44.  
  45. <!-------------------------------- COLORS ---------------------------------->
  46. <!-- Full Body -->
  47. <meta name="color:Background" content="#0c0c0c"/>
  48. <meta name="color:Scroll BG" content="#0c0c0c"/>
  49. <meta name="color:Scroll Thumb Top Gradient" content="#294485"/>
  50. <meta name="color:Scroll Thumb Bottom Gradient" content="#657cf2"/>
  51. <!-- Sidebar -->
  52. <meta name="color:Description BG" content="#0c0c0c"/>
  53. <meta name="color:Description Text" content="#7b7b7b"/>
  54. <meta name="color:Description Links" content="#35a12f"/>
  55. <meta name="color:Description Links Hover" content="#ffffff"/>
  56. <meta name="color:Magic Bar 1" content="#294485"/>
  57. <meta name="color:Magic Bar 2" content="#657cf2"/>
  58. <meta name="color:Magic Bar 3" content="#DA921E"/>
  59. <meta name="color:Health Bar 1" content="#35a12f"/>
  60. <meta name="color:Health Bar 2" content="#8ECD2A"/>
  61. <!-- Posts -->
  62. <meta name="color:Posts BG" content="#0c0c0c"/>
  63. <meta name="color:Posts 2nd BG" content="#101216"/>
  64. <meta name="color:Posts Title" content="#585a60"/>
  65. <meta name="color:Posts Text" content="#7b7b7b"/>
  66. <meta name="color:Posts Bold" content="#585a60"/>
  67. <meta name="color:Posts Italic" content="#7b7b7b"/>
  68. <meta name="color:Posts Code" content="#5f5f5f"/>
  69. <meta name="color:Posts Code BG" content="#191919"/>
  70. <meta name="color:Posts Links" content="#3dad4c"/>
  71. <meta name="color:Posts Links Hover" content="#8ECD2A"/>
  72. <meta name="color:Posts Blockquote" content="#162457"/>
  73. <meta name="color:Audio Player" content="#5380c3"/>
  74. <!-- Post Endings -->
  75. <meta name="color:Postending Symbols" content="#294485"/>
  76. <meta name="color:Postending Symbols Hover" content="#657cf2"/>
  77. <meta name="color:Postending Text BG" content="#101216"/>
  78. <meta name="color:Postending Text Text" content="#42537b"/>
  79. <meta name="color:Postending Text Links" content="#7a9fc4"/>
  80. <meta name="color:Postending Text Links Hover" content="#ffffff"/>
  81. <!-- Permalink -->
  82. <meta name="color:Permalink Text" content="#3dad4c"/>
  83. <meta name="color:Permalink Links" content="#294485"/>
  84. <meta name="color:Permalink Links Hover" content="#657cf2"/>
  85. <meta name="color:Permalink Blockquote" content="#1c1d1e"/>
  86. <meta name="color:Permalink Scroll Thumb" content="#294485"/>
  87. <!-- Misc. -->
  88. <meta name="color:Link Hover BG" content="#0c0c0c"/>
  89. <meta name="color:Link Hover Text" content="#ffffff"/>
  90. <meta name="color:Selection BG" content="#DA921E"/>
  91. <meta name="color:Selection Text" content="#ffffff"/>
  92. <meta name="color:Selection Links" content="#ffffff"/>
  93.  
  94. <!-------------------------------- OPTIONS --------------------------------->
  95. <meta name="if:LARGER SCREENS larger layout" content="1"/>
  96. <meta name="if:Background as Pattern" content="1"/>
  97. <meta name="if:White Tumblr Controls" content="0"/>
  98. <meta name="if:Small Tumblr Controls" content="1"/>
  99. <meta name="if:Menu HoverClick Sounds" content="1"/>
  100. <meta name="if:Links Command Active" content="1"/>
  101. <meta name="if:Monochrome Photos" content="1"/>
  102. <meta name="if:Fade Photos" content="1"/>
  103. <meta name="if:Postending Symbols for Indexpage" content="1"/>
  104. <meta name="if:Custom Cursor" content="1"/>
  105. <meta name="if:Custom Favicon" content="1"/>
  106. <meta name="if:Dark Audio Player" content="1"/>
  107. <meta name="if:Credit on the Right" content="1"/>
  108.  
  109. <!-------------------------------- TEXTS ----------------------------------->
  110. <meta name="text:Command Deck Customization" content="hue-rotate(0deg) saturate(100%) brightness(100%) contrast(100%) invert(0%)"/>
  111. <meta name="text:Link Deck Customization" content="hue-rotate(245deg) saturate(90%) brightness(100%) contrast(100%) invert(0%)"/>
  112. <meta name="text:Ask Verb" content="asked"/>
  113. <!-- command deck links -->
  114. <meta name="text:Home Title" content="Attack"/>
  115. <meta name="text:Home Symbol" content="key"/>
  116. <meta name="text:Message Title" content="Magic"/>
  117. <meta name="text:Message Symbol" content="magic"/>
  118. <meta name="text:Archive Title" content="Items"/>
  119. <meta name="text:Archive Symbol" content="flask"/>
  120. <meta name="text:Links Title" content="Summon"/>
  121. <meta name="text:Links Symbol" content="star"/>
  122. <meta name="text:Link 1 URL" content="/"/>
  123. <meta name="text:Link 1 Title" content="Link 1"/>
  124. <meta name="text:Link 1 Symbol" content="heart"/>
  125. <meta name="text:Link 2 URL" content="/"/>
  126. <meta name="text:Link 2 Title" content="Link 2"/>
  127. <meta name="text:Link 2 Symbol" content="tag"/>
  128. <meta name="text:Link 3 URL" content="/"/>
  129. <meta name="text:Link 3 Title" content="Link 3"/>
  130. <meta name="text:Link 3 Symbol" content="trophy"/>
  131. <meta name="text:Link 4 URL" content="/"/>
  132. <meta name="text:Link 4 Title" content="Link 4"/>
  133. <meta name="text:Link 4 Symbol" content="shield"/>
  134.  
  135. <!-- custom fonts 1/2 -->
  136. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  137. <link href="https://fonts.googleapis.com/css?family=Coda|Montserrat:400,700" rel="stylesheet">
  138.  
  139. </head>
  140.  
  141. <!----------------------------- JAVASCRIPTS -------------------------------->
  142.  
  143. <!-- links command appearing/disappearing -->
  144. <script type="text/javascript">function unhide(divID) {var item = document.getElementById(divID); if (item) {item.className=(item.className=='hidden')?'unhidden':'hidden';}}</script>
  145.  
  146. <!-- menu hover/click sounds -->
  147. {block:IfMenuHoverClickSounds}
  148. <script>
  149.  
  150. // Mouseover/ Click sound effect- by JavaScript Kit (www.javascriptkit.com)
  151. // Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code
  152.  
  153. //** Usage: Instantiate script by calling: var uniquevar=createsoundbite("soundfile1", "fallbackfile2", "fallebacksound3", etc)
  154. //** Call: uniquevar.playclip() to play sound
  155.  
  156. var html5_audiotypes={ //define list of audio file extensions and their associated audio types. Add to it if your specified audio file isn't on this list:
  157. "mp3": "audio/mpeg",
  158. "mp4": "audio/mp4",
  159. "ogg": "audio/ogg",
  160. "wav": "audio/wav"
  161. }
  162.  
  163. function createsoundbite(sound){
  164. var html5audio=document.createElement('audio')
  165. if (html5audio.canPlayType){ //check support for HTML5 audio
  166. for (var i=0; i<arguments.length; i++){
  167. var sourceel=document.createElement('source')
  168. sourceel.setAttribute('src', arguments[i])
  169. if (arguments[i].match(/\.(\w+)$/i))
  170. sourceel.setAttribute('type', html5_audiotypes[RegExp.$1])
  171. html5audio.appendChild(sourceel)
  172. }
  173. html5audio.load()
  174. html5audio.playclip=function(){
  175. html5audio.pause()
  176. html5audio.currentTime=0
  177. html5audio.play()
  178. }
  179. return html5audio
  180. }
  181. else{
  182. return {playclip:function(){throw new Error("Your browser doesn't support HTML5 audio unfortunately")}}
  183. }
  184. }
  185.  
  186. //Initialize two sound clips with 1 fallback file each:
  187.  
  188. var mouseoversound=createsoundbite("https://www.dropbox.com/s/bede2y30zezq1y2/khnoise%20hover.mp3?dl=1")
  189. var clicksound=createsoundbite("https://www.dropbox.com/s/o58d9b0gdqvrcby/khnoise%20click.mp3?dl=1")
  190.  
  191. </script>
  192. {/block:IfMenuHoverClickSounds}
  193.  
  194. <!-- hover text 2/2 -->
  195. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script><script type="text/javascript" src="http://static.tumblr.7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script><script>(function($){$(document).ready(function(){$("[title]").style_my_tooltips();});})(jQuery);</script>
  196. <style type="text/css">
  197.  
  198. /* custom fonts 3/3 */
  199. @import url('https://fonts.googleapis.com/css?family=Coda|Montserrat:400,700');
  200. @font-face { font-family: "pix"; src: url('https://dl.dropboxusercontent.com/s/68bdyrv4fsayhg8/04B_03__.TTF'); }
  201.  
  202. /* ------------------------------ DECORATION ---------------------------- */
  203.  
  204. /* body */
  205. body {
  206. background:{color:background} url('{image:background}') {block:IfBackgroundAsPattern}fixed{/block:IfBackgroundAsPattern};
  207. {block:IfNotBackgroundAsPattern}background-size:cover; background-attachment:fixed; background-position:center;{/block:IfNotBackgroundAsPattern}
  208. color:{color:Posts Text};
  209. font: normal normal normal 11px/17px 'Montserrat', sans-serif;
  210. text-align:justify;}
  211.  
  212. /*------------------------- CREDIT; DON'T REMOVE --------------------------*/
  213.  
  214. #credit {
  215. z-index:99999; position:fixed;
  216. bottom:10px;
  217. {block:IfNotCreditOnTheRight}left:15px;{/block:IfNotCreditOnTheRight}
  218. {block:IfCreditOnTheRight}right:15px;{/block:IfCreditOnTheRight}
  219. width:15px; height:15px;
  220. border-radius:50%;
  221. background:{color:Postending Symbols};}
  222. #credit::before {
  223. content:"";
  224. position:absolute;
  225. top:-4px; left:-4px;
  226. height:8px; width:9px;
  227. background:{color:Postending Symbols};
  228. border-radius: 60% 40% 60% 40%;}
  229. #credit::after {
  230. content:"";
  231. position:absolute;
  232. top:-4px; left:10px;
  233. height:8px; width:9px;
  234. background:{color:Postending Symbols};
  235. border-radius: 40% 60% 40% 60%;}
  236. #credit, #credit::after, #credit::before {
  237. -webkit-transition: all 0.2s linear;
  238. -moz-transition: all 0.2s linear;
  239. transition: all 0.2s linear;}
  240. #credit:hover {
  241. transform: rotate(10deg);
  242. -moz-transform: rotate(10deg);
  243. -webkit-transform: rotate(10deg);
  244. -o-transform: rotate(10deg);}
  245. #credit:hover, #credit:hover::after, #credit:hover::before {
  246. background:{color:Postending Symbols Hover};}
  247.  
  248. /* ---------------------------- MINOR STUFF ------------------------------ */
  249.  
  250. /* tumblr controls */
  251. .tmblr-iframe {
  252. z-index:9999 !important;
  253. {block:IfWhiteTumblrControls}
  254. -webkit-filter: invert(100%) hue-rotate(180deg) !important;
  255. -moz-filter: invert(100%) hue-rotate(180deg) !important;
  256. -ms-filter: invert(100%) hue-rotate(180deg) !important;
  257. -o-filter: invert(100%) hue-rotate(180deg) !important;
  258. filter: invert(100%) hue-rotate(180deg) !important;
  259. {/block:IfWhiteTumblrControls}
  260. {block:IfSmallTumblrControls}
  261. transform: scale(0.8) !important;
  262. -webkit-transform: scale(0.8) !important;
  263. -moz-transform: scale(0.8) !important;
  264. -o-transform: scale(0.8) !important;
  265. -ms-transform: scale(0.8) !important;
  266. transform-origin:right;
  267. webkit-transform-origin:right;
  268. -moz-transform-origin:right;
  269. -o-transform-origin:right;
  270. -ms-transform-origin:right;
  271. {/block:IfSmallTumblrControls}}
  272.  
  273. /* hover text */
  274. #s-m-t-tooltip {
  275. z-index: 99999; display: block;
  276. margin-left: 20px; margin-top: 5px;
  277. max-width:150px;
  278. padding: 3px 5px 4px 6px;
  279. color: {color:Link Hover Text};
  280. font:normal normal normal 9px/10px Coda;
  281. letter-spacing:.5px;
  282. text-align:center;
  283. background: {color:Link Hover BG};}
  284.  
  285. /* scrollbar */
  286. ::-webkit-scrollbar {
  287. height:14px; width:14px;
  288. background: {color:Scroll BG};}
  289. ::-webkit-scrollbar-thumb {
  290. background:{color:Scroll Thumb Top Gradient};
  291. background: -webkit-linear-gradient({color:Scroll Thumb Top Gradient}, {color:Scroll Thumb Bottom Gradient});
  292. background: -o-linear-gradient({color:Scroll Thumb Top Gradient}, {color:Scroll Thumb Bottom Gradient});
  293. background: -moz-linear-gradient({color:Scroll Thumb Top Gradient}, {color:Scroll Thumb Bottom Gradient});
  294. background: linear-gradient({color:Scroll Thumb Top Gradient}, {color:Scroll Thumb Bottom Gradient});
  295. border:4px solid {color:Scroll BG};
  296. border-radius:5px;}
  297.  
  298. /* drag n' click selection */
  299. ::selection {
  300. background: {color:Selection BG};
  301. color: {color:Selection Text};}
  302. ::-moz-selection {
  303. background: {color:Selection BG};
  304. color: {color:Selection Text};}
  305. a::selection {
  306. background: {color:Selection BG};
  307. color: {color:Selection Links};}
  308. a::-moz-selection {
  309. background: {color:Selection BG};
  310. color: {color:Selection Links};}
  311.  
  312. /* ----------------------------- FONT STUFF ------------------------------ */
  313.  
  314. /* links */
  315. a:link, a:active, a:visited{
  316. text-decoration:none;
  317. color:{color:Posts Links};
  318. -webkit-transition: all 0.5s linear;
  319. -moz-transition: all 0.5s linear;
  320. transition: all 0.5s linear;}
  321. a:hover {
  322. color:{color:Posts Links Hover};
  323. -webkit-transition: all 0.2s linear;
  324. -moz-transition: all 0.2s linear;
  325. transition: all 0.2s linear;}
  326.  
  327. /* main font decorations */
  328. b, strong{color:{color:Posts Bold};}
  329. i, em {color:{color:Posts Italic};}
  330. pre {color:{color:posts code};
  331. max-width:100%;
  332. letter-spacing:1px;
  333. font-family: consolas;
  334. font-size:10px;
  335. text-align:left;
  336. word-break: break-all;
  337. background:{color:posts code BG};
  338. padding:4px 6px;
  339. white-space: pre-wrap;
  340. white-space: -moz-pre-wrap;
  341. white-space: -pre-wrap;
  342. white-space: -o-pre-wrap;
  343. word-wrap: break-word;}
  344. code {color:{color:posts code};
  345. letter-spacing:1px;
  346. font-family: consolas;
  347. font-size:10px;
  348. background:{color:posts code BG};}
  349.  
  350. /* text and link post titles */
  351. h1 {font: normal normal bold 18px/18px Coda;
  352. color:{color:Posts Title};
  353. text-align:center;
  354. letter-spacing:.5px;}
  355. /* quote and ask post titles */
  356. h2 {font: normal normal bold 15px/15px Coda;
  357. color:{color:Posts Bold};
  358. text-align:center;
  359. letter-spacing:0.5px;}
  360. .posts h1:first-child, .posts h2:first-child {margin-top:0px;}
  361.  
  362. /* -------------------------------- HEADSUP ------------------------------ */
  363.  
  364.  
  365. /* magic/health bars */
  366. #magic1 {
  367. z-index:1;
  368. position:fixed;
  369. {block:Iflargerscreenslargerlayout}bottom:159px; left:50%; margin-left:299px;{/block:Iflargerscreenslargerlayout}
  370. {block:IfNotlargerscreenslargerlayout}bottom:425px; left:40%; margin-left:-307px;{block:IfNotlargerscreenslargerlayout}
  371. width:107px; height:106px;
  372. background:{color:Magic Bar 2};
  373. box-shadow: 4px 4px 0px 0px {color:Magic Bar 3} inset, 5px 5px 10px 0px {color:Magic Bar 1} inset;
  374. border-radius:105px 0px 0px 0px;
  375. -webkit-transition: all 0.5s linear;
  376. -moz-transition: all 0.5s linear;
  377. transition: all 0.5s linear;}
  378. #magic2 {
  379. z-index:0;
  380. position:fixed;
  381. {block:Iflargerscreenslargerlayout}bottom:178px; left:50%; margin-left:372px;{/block:Iflargerscreenslargerlayout}
  382. {block:IfNotlargerscreenslargerlayout}bottom:444px; left:40%; margin-left:-234px;{block:IfNotlargerscreenslargerlayout}
  383. width:106px; height:107px;
  384. background:{color:Magic Bar 2};
  385. box-shadow: -5px 4px 10px 0px {color:Magic Bar 1} inset;
  386. border-radius:0px 105px 0px 0px;
  387. transform: rotate(330deg);
  388. -moz-transform: rotate(330deg);
  389. -webkit-transform: rotate(330deg);
  390. -o-transform: rotate(330deg);
  391. -webkit-transition: all 0.5s linear;
  392. -moz-transition: all 0.5s linear;
  393. transition: all 0.5s linear;}
  394. #health1 {
  395. z-index:2;
  396. position:fixed;
  397. {block:Iflargerscreenslargerlayout}bottom:159px; left:50%; margin-left:314px;{/block:Iflargerscreenslargerlayout}
  398. {block:IfNotlargerscreenslargerlayout}bottom:425px; left:40%; margin-left:-292px;{block:IfNotlargerscreenslargerlayout}
  399. width:180px; height:90px;
  400. background:{color:Health Bar 2};
  401. box-shadow: 0px 5px 10px 5px {color:Health Bar 1} inset;
  402. border:1px solid transparent;
  403. border-radius:90px 90px 0px 0px;
  404. -webkit-transition: all 0.5s linear;
  405. -moz-transition: all 0.5s linear;
  406. transition: all 0.5s linear;}
  407. #health2 {
  408. z-index:2;
  409. position:fixed;
  410. {block:Iflargerscreenslargerlayout}bottom:69px; left:50%; margin-left:405px;{/block:Iflargerscreenslargerlayout}
  411. {block:IfNotlargerscreenslargerlayout}bottom:335px; left:40%; margin-left:-201px;{block:IfNotlargerscreenslargerlayout}
  412. width:91px; height:91px;
  413. background:{color:Health Bar 2};
  414. box-shadow: -5px -5px 10px 0px {color:Health Bar 1} inset;
  415. border-radius:0px 0px 90px 0px;
  416. -webkit-transition: all 0.5s linear;
  417. -moz-transition: all 0.5s linear;
  418. transition: all 0.5s linear;}
  419. #healthtail {
  420. z-index:1;
  421. position:fixed;
  422. {block:Iflargerscreenslargerlayout}bottom:69px; left:50%; margin-left:410px;{/block:Iflargerscreenslargerlayout}
  423. {block:IfNotlargerscreenslargerlayout}bottom:335px; left:40%; margin-left:-200px;{block:IfNotlargerscreenslargerlayout}
  424. width:0px; height:16px;
  425. background:{color:Health Bar 2};
  426. box-shadow: 0px -5px 10px 0px {color:Health Bar 1} inset;
  427. -webkit-transition: all 0.6s ease-in-out;
  428. -moz-transition: all 0.6s ease-in-out;
  429. transition: all 0.6s ease-in-out;}
  430. #headsup:hover #healthtail {
  431. {block:Iflargerscreenslargerlayout}margin-left:299px;{/block:Iflargerscreenslargerlayout}
  432. {block:IfNotlargerscreenslargerlayout}margin-left:-307px;{block:IfNotlargerscreenslargerlayout}
  433. width:112px;}
  434. #mphp {
  435. z-index:4; position:fixed;
  436. {block:Iflargerscreenslargerlayout}bottom:144px; left:50%; margin-left:298px;{/block:Iflargerscreenslargerlayout}
  437. {block:IfNotlargerscreenslargerlayout}bottom:410px; left:40%; margin-left:-308px;{block:IfNotlargerscreenslargerlayout}
  438. background:{color:Description BG};
  439. font:normal normal bold 9px/9px Coda;
  440. text-transform:uppercase;
  441. letter-spacing:1px;
  442. padding:4px 1px 2px 2px;
  443. color:{color:magic bar 1};
  444. text-shadow:0px 0px 0px {color:magic bar 1};
  445. -webkit-transition: all 0.5s linear;
  446. -moz-transition: all 0.5s linear;
  447. transition: all 0.5s linear;}
  448. #mphp hp {
  449. color:{color:health bar 1}; padding-left:2px;
  450. text-shadow:0px 0px 0px {color:health bar 1};}
  451.  
  452. /* description circle */
  453. #avatar {
  454. z-index:3;
  455. position:fixed;
  456. {block:Iflargerscreenslargerlayout}bottom:85px; left:50%; margin-left:330px;{/block:Iflargerscreenslargerlayout}
  457. {block:IfNotlargerscreenslargerlayout}bottom:351px; left:40%; margin-left:-276px;{block:IfNotlargerscreenslargerlayout}
  458. width:134px; height:134px;
  459. padding:4px;
  460. background:{color:Background} url('{image:background}') fixed;
  461. border:4px solid {color:Description BG};
  462. border-radius:75px;
  463. -webkit-transition: all 0.5s linear;
  464. -moz-transition: all 0.5s linear;
  465. transition: all 0.5s linear;}
  466. #description {
  467. z-index:4; opacity:0;
  468. position:fixed;
  469. {block:Iflargerscreenslargerlayout}bottom:85px; left:50%; margin-left:330px;{/block:Iflargerscreenslargerlayout}
  470. {block:IfNotlargerscreenslargerlayout}bottom:351px; left:40%; margin-left:-276px;{block:IfNotlargerscreenslargerlayout}
  471. width:132px; height:132px;
  472. font:normal normal normal 9px/12px Coda;
  473. letter-spacing:.5px;
  474. color:{color:Description Text};
  475. text-align:justify;
  476. background:{color:Description BG};
  477. border:9px solid {color:Description BG};
  478. border-radius:75px;
  479. overflow:hidden;
  480. -webkit-transition: all 0.5s linear;
  481. -moz-transition: all 0.5s linear;
  482. transition: all 0.5s linear;}
  483. #headsup:hover #description{opacity:1;}
  484. #description a {color:{color:Description Links};}
  485. #description a:hover {color:{color:Description Links Hover};}
  486. .leftdescspace {float:left; clear:left; height:12px;}
  487. .rightdescspace {float:right; clear:right; height:12px;}
  488.  
  489. /* ------------------------------ COMMAND DECK --------------------------- */
  490.  
  491. /* overall */
  492. #mainlinks, #minorlinks {
  493. color:#808080;
  494. font:normal normal 400 20px/47px Coda;
  495. letter-spacing:1;
  496. text-align:left;
  497. -webkit-transition: all 0.02s linear;
  498. -moz-transition: all 0.02s linear;
  499. transition: all 0.02s linear;}
  500. #mainlinks {
  501. -webkit-filter: {text:Command Deck Customization};
  502. -moz-filter: {text:Command Deck Customization};
  503. -ms-filter: {text:Command Deck Customization};
  504. -o-filter: {text:Command Deck Customization};}
  505. #mainlinks a, #minorlinks a {
  506. position:fixed; display:block;
  507. width:198px; height:47px;
  508. padding-left:30px;
  509. overflow:hidden;
  510. -webkit-filter: contrast(90%);
  511. color:#ffffff;
  512. text-decoration:none;
  513. background-size:100% 100%;
  514. -webkit-transition: all 0.02s linear;
  515. -moz-transition: all 0.02s linear;
  516. transition: all 0.02s linear;}
  517. #mainlinks a:hover, #minorlinks a:hover {
  518. color:#ffffff;
  519. -webkit-filter: contrast(100%);
  520. -webkit-transition: all 0.02s linear;
  521. -moz-transition: all 0.02s linear;
  522. transition: all 0.02s linear;}
  523. #mainlinks a:hover {
  524. z-index:6;
  525. {block:Iflargerscreenslargerlayout}margin-left:-513px;{/block:Iflargerscreenslargerlayout}
  526. {block:IfNotlargerscreenslargerlayout}margin-left:-293px;{block:IfNotlargerscreenslargerlayout}
  527. -webkit-filter: contrast(100%);
  528. background:url(https://68.media.tumblr.com/2f5fcfa8d74c616b21443c5020f8bdfa/tumblr_nls4qwdpJW1s60yyoo5_r4_400.png) no-repeat;
  529. background-size:100% 100%;}
  530. #mainlinks a l, #minorlinks a l {
  531. opacity:0; float:right;
  532. color:#808080;
  533. margin-top:23px; margin-right:20px;
  534. -webkit-transform: translateY(-50%);
  535. -ms-transform: translateY(-50%);
  536. transform: translateY(-50%);
  537. -webkit-transition: all 0.02s linear;
  538. -moz-transition: all 0.02s linear;
  539. transition: all 0.02s linear;}
  540. #mainlinks a:hover l, #minorlinks a:hover l {
  541. opacity:1;}
  542.  
  543. /* specific sections */
  544. #command, #links {
  545. z-index:5;
  546. position:fixed;
  547. display:block;
  548. -webkit-filter: contrast(90%);
  549. width:228px; height:47px;
  550. text-decoration:none;
  551. -webkit-transition: all 0.02s linear;
  552. -moz-transition: all 0.02s linear;
  553. transition: all 0.02s linear;}
  554. #command {
  555. {block:Iflargerscreenslargerlayout}bottom:241px; left:50%; margin-left:-538px;{/block:Iflargerscreenslargerlayout}
  556. {block:IfNotlargerscreenslargerlayout}bottom:241px; left:40%; margin-left:-318px;{block:IfNotlargerscreenslargerlayout}
  557. background:url(https://68.media.tumblr.com/910b06ff83f3fbb075e573418ae2dcb0/tumblr_nls4qwdpJW1s60yyoo4_r3_400.png) no-repeat;
  558. background-size:100% 100%;}
  559. #link1{
  560. z-index:4;
  561. {block:Iflargerscreenslargerlayout}bottom:198px; left:50%; margin-left:-538px;{/block:Iflargerscreenslargerlayout}
  562. {block:IfNotlargerscreenslargerlayout}bottom:198px; left:40%; margin-left:-318px;{block:IfNotlargerscreenslargerlayout}
  563. background:url(https://68.media.tumblr.com/db6b076e6589d0dd35466cfb413cf38f/tumblr_nls4qwdpJW1s60yyoo3_r2_400.png) no-repeat;}
  564. #link2{
  565. z-index:3;
  566. {block:Iflargerscreenslargerlayout}bottom:155px; left:50%; margin-left:-538px;{/block:Iflargerscreenslargerlayout}
  567. {block:IfNotlargerscreenslargerlayout}bottom:155px; left:40%; margin-left:-318px;{block:IfNotlargerscreenslargerlayout}
  568. background:url(https://68.media.tumblr.com/db6b076e6589d0dd35466cfb413cf38f/tumblr_nls4qwdpJW1s60yyoo3_r2_400.png) no-repeat;}
  569. #link3{
  570. z-index:2;
  571. {block:Iflargerscreenslargerlayout}bottom:112px; left:50%; margin-left:-538px;{/block:Iflargerscreenslargerlayout}
  572. {block:IfNotlargerscreenslargerlayout}bottom:112px; left:40%; margin-left:-318px;{block:IfNotlargerscreenslargerlayout}
  573. background:url(https://68.media.tumblr.com/db6b076e6589d0dd35466cfb413cf38f/tumblr_nls4qwdpJW1s60yyoo3_r2_400.png) no-repeat;}
  574. #link4{
  575. z-index:1;
  576. {block:Iflargerscreenslargerlayout}bottom:69px; left:50%; margin-left:-538px;{/block:Iflargerscreenslargerlayout}
  577. {block:IfNotlargerscreenslargerlayout}bottom:69px; left:40%; margin-left:-318px;{block:IfNotlargerscreenslargerlayout}
  578. background: rgba(0,0,0,0) url(https://68.media.tumblr.com/1369dc1b1060a45ed5ec7ebda865bc4b/tumblr_nls4qwdpJW1s60yyoo2_r2_400.png) no-repeat;}
  579. #link4inactive {
  580. z-index:1;
  581. position:fixed;
  582. display:block;
  583. -webkit-filter: contrast(90%);
  584. {block:Iflargerscreenslargerlayout}bottom:69px; left:50%; margin-left:-538px;{/block:Iflargerscreenslargerlayout}
  585. {block:IfNotlargerscreenslargerlayout}bottom:69px; left:40%; margin-left:-318px;{block:IfNotlargerscreenslargerlayout}
  586. width:198px; height:47px;
  587. padding-left:30px;
  588. background: rgba(0,0,0,0) url(https://68.media.tumblr.com/1369dc1b1060a45ed5ec7ebda865bc4b/tumblr_nls4qwdpJW1s60yyoo2_r2_400.png) no-repeat;
  589. background-size:100% 100%;
  590. -webkit-transition: all 0.02s linear;
  591. -moz-transition: all 0.02s linear;
  592. transition: all 0.02s linear;}
  593.  
  594. /* ------------------------------- LINKS DECK --------------------------- */
  595.  
  596. .hidden {display: none;
  597. -webkit-transition: all 0.02s linear;
  598. -moz-transition: all 0.02s linear;
  599. transition: all 0.02s linear;}
  600. .unhidden {display: block;
  601. -webkit-transition: all 0.02s linear;
  602. -moz-transition: all 0.02s linear;
  603. transition: all 0.02s linear;}
  604.  
  605. /* links deck */
  606. #minorlinks {
  607. z-index:7;
  608. -webkit-filter: {text:Link Deck Customization};
  609. -moz-filter: {text:Link Deck Customization};
  610. -ms-filter: {text:Link Deck Customization};
  611. -o-filter: {text:Link Deck Customization};}
  612. #minorlinks a:hover {
  613. z-index:12;
  614. {block:Iflargerscreenslargerlayout}margin-left:-498px;{/block:Iflargerscreenslargerlayout}
  615. {block:IfNotlargerscreenslargerlayout}margin-left:-273px;{block:IfNotlargerscreenslargerlayout}
  616. background:url(https://68.media.tumblr.com/2f5fcfa8d74c616b21443c5020f8bdfa/tumblr_nls4qwdpJW1s60yyoo5_r4_400.png) no-repeat;
  617. background-size:100% 100%;}
  618.  
  619. #links {
  620. z-index:11;
  621. {block:Iflargerscreenslargerlayout}bottom:284px; left:50%; margin-left:-523px;{/block:Iflargerscreenslargerlayout}
  622. {block:IfNotlargerscreenslargerlayout}bottom:284px; left:40%; margin-left:-298px;{block:IfNotlargerscreenslargerlayout}
  623. background:url(https://68.media.tumblr.com/258ac38c02f2be5d7de4e9bc7292a1d7/tumblr_nm07d9ZAfY1tkrh2po1_400.png) no-repeat;
  624. background-size:100% 100%;}
  625. #link5{
  626. z-index:10;
  627. {block:Iflargerscreenslargerlayout}bottom:241px; left:50%; margin-left:-523px;{/block:Iflargerscreenslargerlayout}
  628. {block:IfNotlargerscreenslargerlayout}bottom:241px; left:40%; margin-left:-298px;{block:IfNotlargerscreenslargerlayout}
  629. background:url(https://68.media.tumblr.com/db6b076e6589d0dd35466cfb413cf38f/tumblr_nls4qwdpJW1s60yyoo3_r2_400.png) no-repeat;}
  630. #link6{
  631. z-index:9;
  632. {block:Iflargerscreenslargerlayout}bottom:198px; left:50%; margin-left:-523px;{/block:Iflargerscreenslargerlayout}
  633. {block:IfNotlargerscreenslargerlayout}bottom:198px; left:40%; margin-left:-298px;{block:IfNotlargerscreenslargerlayout}
  634. background:url(https://68.media.tumblr.com/db6b076e6589d0dd35466cfb413cf38f/tumblr_nls4qwdpJW1s60yyoo3_r2_400.png) no-repeat;}
  635. #link7{
  636. z-index:8;
  637. {block:Iflargerscreenslargerlayout}bottom:155px; bottom:155px; left:50%; margin-left:-523px;{/block:Iflargerscreenslargerlayout}
  638. {block:IfNotlargerscreenslargerlayout}bottom:155px; left:40%; margin-left:-298px;{block:IfNotlargerscreenslargerlayout}
  639. background:url(https://68.media.tumblr.com/db6b076e6589d0dd35466cfb413cf38f/tumblr_nls4qwdpJW1s60yyoo3_r2_400.png) no-repeat;}
  640. #link8{
  641. z-index:7;
  642. {block:Iflargerscreenslargerlayout}bottom:112px; left:50%; margin-left:-523px;{/block:Iflargerscreenslargerlayout}
  643. {block:IfNotlargerscreenslargerlayout}bottom:112px; left:40%; margin-left:-298px;{block:IfNotlargerscreenslargerlayout}
  644. background: rgba(0,0,0,0) url(https://68.media.tumblr.com/1369dc1b1060a45ed5ec7ebda865bc4b/tumblr_nls4qwdpJW1s60yyoo2_r2_400.png) no-repeat;}
  645.  
  646. /* ----------------------------- PAGINATION ------------------------------ */
  647.  
  648. #pagination {
  649. position:fixed; z-index:1;
  650. {block:Iflargerscreenslargerlayout}bottom:35px; left:50%; margin-left:-538px;{/block:Iflargerscreenslargerlayout}
  651. {block:IfNotlargerscreenslargerlayout}bottom:35px; left:40%; margin-left:-318px;{block:IfNotlargerscreenslargerlayout}
  652. width:228px;
  653. text-align:center;
  654. font:normal normal bold 11px/12px Coda;
  655. color:{color:Description Text};
  656. letter-spacing:1px;
  657. text-transform:uppercase;
  658. -webkit-transition: all 0.6s ease-in-out;
  659. -moz-transition: all 0.6s ease-in-out;
  660. transition: all 0.6s ease-in-out;}
  661. #pagination a {
  662. color:{color:Description Text};}
  663. #pagination a:hover {
  664. color:{color:Description Links};}
  665. .jump {
  666. padding:5px 2px 5px 4px;
  667. background:{color:Description BG};
  668. -webkit-transition: all 0.6s ease-in-out;
  669. -moz-transition: all 0.6s ease-in-out;
  670. transition: all 0.6s ease-in-out;}
  671. .jump:hover {
  672. margin:0px 2px 0px 2px;
  673. padding:5px 4px 5px 6px;}
  674. .current {
  675. color:{color:Description Links Hover};
  676. padding:5px 2px 5px 4px;
  677. background:{color:Description BG};}
  678. #pagination l {
  679. font-size:14px;
  680. padding:2px;
  681. vertical-align:middle;
  682. background:{color:Description BG};
  683. -webkit-transition: all 0.6s ease-in-out;
  684. -moz-transition: all 0.6s ease-in-out;
  685. transition: all 0.6s ease-in-out;}
  686. #pagination l:hover {
  687. margin:0px 2px 0px 2px;
  688. padding:2px 4px 2px 4px;}
  689.  
  690. /* -------------------------------- POSTS -------------------------------- */
  691.  
  692. /* posts position */
  693. #entries {
  694. margin-top:70px;
  695. width:540px;
  696. {block:Iflargerscreenslargerlayout}margin-left:50%;
  697. -webkit-transform: translateX(-50%);
  698. -ms-transform: translateX(-50%);
  699. transform: translateX(-50%);{/block:Iflargerscreenslargerlayout}
  700. {block:IfNotlargerscreenslargerlayout}margin-left:40%; -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%);{/block:IfNotlargerscreenslargerlayout}
  701. text-align:justify;
  702. -webkit-transition: all 0.5s linear;
  703. -moz-transition: all 0.5s linear;
  704. transition: all 0.5s linear;}
  705.  
  706. /* posts themselves */
  707. .posts {
  708. margin:0 0 70px 0px;
  709. overflow:hidden;
  710. width: 500px; padding:20px;
  711. background: {color:Posts BG} url('');}
  712.  
  713. /* ----------------------------- POST TYPES ------------------------------ */
  714.  
  715. /* text post */
  716. blockquote {
  717. padding:0px;
  718. padding-left:6px;
  719. margin:-3px 0 -1px 6px;
  720. border-left:3px solid {color:posts blockquote};}
  721. hr {display: block;
  722. margin: 30px 80px;
  723. border:1px solid {color:posts blockquote};}
  724.  
  725. /* bullet lists */
  726. ol {margin-left:-8px;
  727. list-style-type:decimal;}
  728. ul {margin-left:-20px;
  729. list-style-type:none;}
  730. ul li::before {
  731. content:"";
  732. margin:0px 10px 2px 0px;
  733. display:inline-block;
  734. height:4px; width:4px;
  735. border-radius:50%;
  736. background:{color:posts blockquote};}
  737. li {margin-bottom:3px;}
  738.  
  739. /* text-images */
  740. .posts img {
  741. vertical-align:middle;
  742. max-width:100%;}
  743. /* the credit below images that are from other people */
  744. .tmblr-full {margin:0;}
  745. .tmblr-attribution {
  746. opacity:.8;
  747. margin-top:0px;
  748. font-family:Calibri;
  749. font-size:8px; line-height:8px;
  750. text-transform:uppercase;
  751. letter-spacing:1px;}
  752. .tmblr-attribution::after {content: " >";}
  753.  
  754. /* link posts */
  755. .link-posts a {
  756. background: {color:Posts Links};
  757. display:inline-block;
  758. width: 480px;
  759. padding:10px;
  760. color:{color:Posts BG};}
  761. .link-posts a:hover {
  762. background: {color:Posts Links Hover}}
  763.  
  764. /* ask posts */
  765. .ask-posts img {
  766. vertical-align:middle;
  767. display:inline-block;
  768. margin-right:7px;
  769. max-width:64px;}
  770. .ask-posts .question {
  771. vertical-align:middle;
  772. display:inline-block;
  773. min-height:44px; width:406px;
  774. padding: 10px;
  775. background: {color:Posts 2nd BG};}
  776. .ask-posts h2 {text-align:left; margin:0px 0px 5px 5px;}
  777.  
  778. /* quote posts */
  779. .quote-posts {
  780. padding:10px 0px;
  781. text-align:center}
  782. .quote {
  783. vertical-align:middle;
  784. width:430px;
  785. display:inline-block;}
  786. .quote-posts .fa {
  787. font-size:20px;
  788. vertical-align:middle;
  789. display:inline-block;
  790. color:{color:Posts Blockquote}}
  791.  
  792. /* chat posts */
  793. .chat {margin:0px; padding:0px; line-height:14px;}
  794. .chat li {text-align:left;}
  795. .chat li::before {display:none;}
  796. .chat li {
  797. padding:5px 8px;
  798. margin-bottom:4px;
  799. background: {color:Posts 2nd BG};}
  800.  
  801. /* photo posts */
  802. .posts img, .posts .html_photoset, .posts #audio-pic {
  803. {block:IfFadePhotos}opacity:0.75;{/block:IfFadePhotos}
  804. {block:IfMonochromePhotos}
  805. -webkit-filter: grayscale(100%);
  806. -moz-filter: grayscale(100%);
  807. -ms-filter: grayscale(100%);
  808. -o-filter: grayscale(100%);
  809. filter: grayscale(100%);{/block:IfMonochromePhotos}
  810. -webkit-transition-duration: 0.5s;
  811. -moz-transition-duration:0.5s;
  812. -o-transition-duration:0.5s;
  813. transition-duration:0.5s;}
  814. .posts:hover img, .posts:hover .html_photoset, .posts:hover #audio-pic {
  815. opacity:1;
  816. -webkit-filter: grayscale(0%);
  817. -moz-filter: grayscale(0%);
  818. -ms-filter: grayscale(0%);
  819. -o-filter: grayscale(0%);
  820. filter: grayscale(0%);
  821. -webkit-transition-duration: 0.5s;
  822. -moz-transition-duration:0.5s;
  823. -o-transition-duration:0.5s;
  824. transition-duration:0.5s;}
  825.  
  826. /* photoset focused image background */
  827. .tmblr-lightbox {
  828. background-color:transparent !important;}
  829. .vignette {
  830. z-index:99998! important;
  831. opacity:.75 !important;
  832. background-color:{color:background} !important;
  833. background-image:none !important;}
  834. .tmblr-lightbox .lightbox-image {
  835. z-index:99999! important;
  836. border-radius:0px !important;
  837. background:{color:background} !important;
  838. box-shadow:0px 0px 0px 30px {color:background} !important;}
  839. .tmblr-lightbox .lightbox-caption {
  840. z-index:99999! important;
  841. font-family:consolas !important;
  842. font-size:10px !important;
  843. font-size: 15px !important;
  844. font-weight: bold !important;
  845. color: {color:posts title} !important;
  846. text-shadow: 0 4px 30px {color:background} !important;}
  847.  
  848. /* video posts */
  849. #youtube_iframe, .tumblr_video_container {
  850. margin-bottom:5px; max-width:100%;}
  851. .caption iframe, .caption #youtube_iframe, .caption .tumblr_video_container {
  852. margin:5px 0px; max-width:100%;}
  853.  
  854. /* audio posts */
  855. #audio-pic {
  856. display:inline-block;
  857. vertical-align:middle;
  858. margin-right:2px;
  859. width:135px; height:135px;
  860. background: url('{image:Default Audio Pic}');
  861. background-size:cover;}
  862. #info-container {
  863. display:inline-block;
  864. vertical-align:middle;
  865. text-align:left;
  866. font-size:8px; line-height:15px;
  867. width:355px;
  868. text-transform:uppercase;
  869. letter-spacing:1px;}
  870. #info-container li {
  871. display:block;
  872. padding:4px 7px;
  873. margin:0px; margin-top:4px;
  874. background:{color:Posts 2nd BG};}
  875. .posts .audio_player {
  876. max-width:355px; max-height:27px;
  877. margin:0px;
  878. background:{color:Audio Player};
  879. {block:IfMonochromePhotos}
  880. -webkit-filter: grayscale(100%);
  881. -moz-filter: grayscale(100%);
  882. -ms-filter: grayscale(100%);
  883. -o-filter: grayscale(100%);
  884. filter: grayscale(100%);{/block:IfMonochromePhotos}
  885. -webkit-transition: all 0.2s linear;
  886. -moz-transition: all 0.2s linear;
  887. transition: all 0.2s linear;}
  888. .posts:hover .audio_player {
  889. {block:IfMonochromePhotos}
  890. -webkit-filter: grayscale(0%);
  891. -moz-filter: grayscale(0%);
  892. -ms-filter: grayscale(0%);
  893. -o-filter: grayscale(0%);
  894. filter: grayscale(0%);{/block:IfMonochromePhotos}}
  895. .tumblr_audio_player {
  896. width:355px; opacity:.66;}
  897.  
  898. /* ----------------------------- POSTS INFO ------------------------------ */
  899.  
  900. /* if symbols */
  901. #postinfo {
  902. margin-top:30px;
  903. position:absolute;
  904. text-align:center;
  905. margin-left:-20px;
  906. width:540px;;}
  907. /* individual circles */
  908. #postinfo a {
  909. margin: 0px 10px;
  910. font-size:18px;
  911. display:inline-block;
  912. color:{color:Postending Symbols};
  913. -webkit-transition: all 0.2s linear;
  914. -moz-transition: all 0.2s linear;
  915. transition: all 0.2s linear;}
  916. #postinfo a:hover {
  917. margin: 0px 15px;
  918. color:{color:Postending Symbols Hover};}
  919.  
  920. /* if no symbols */
  921. #postending {
  922. border-radius:3px;
  923. padding:10px; width:500px;
  924. margin:15px 0px -10px -10px;
  925. background: {color:Postending Text BG};
  926. text-align:center; margin-top:15px;
  927. letter-spacing:1px; font-size:9px;
  928. color: {color:Postending Text Color};}
  929. #postending a {
  930. color:{color:Postending Text Links};}
  931. #postending a:hover {
  932. color:{color:Postending Text Links Hover};}
  933.  
  934.  
  935. /* ----------------------------- PERMALINK ------------------------------- */
  936.  
  937. /* permalink position */
  938. #permalink {
  939. background:;/* if you want the post-notes to have a non-transparent bg */
  940. margin:-70px 0px 0px 0px;
  941. width: 500px; padding: 20px 0px 20px 10px;}
  942.  
  943. /* post notes container */
  944. .notes {
  945. width: 500px; max-height:600px;
  946. overflow: auto; text-align:center;
  947. line-height:0px; font-size:0px;
  948. color:transparent; letter-spacing:0px;}
  949. .notes a {
  950. letter-spacing:1px;
  951. font: normal normal normal 9px/17px 'Montserrat', san-serif;
  952. color:{color:Permalink Links};}
  953. .notes a:hover {
  954. color:{color:Permalink Links Hover};}
  955. .notes blockquote, .notes .answer_content {
  956. font: normal normal normal 9px/17px 'Montserrat', san-serif;
  957. letter-spacing:1px;
  958. max-width:350px;
  959. margin:3px auto; border:none;
  960. color:{color:Permalink Links};
  961. background:{color:Permalink Blockquote};}
  962. .notes blockquote {
  963. display:inline-block;
  964. padding:1px 10px 0px 10px;}
  965. .notes .answer_content {
  966. display:block;
  967. padding:2px 10px 1px 10px;}
  968. .notes img {display:none;}
  969. .notes li {margin-left:-10px;}
  970.  
  971. /* replaced regular sentences with fa symbols */
  972. .notes .like span a::after, .notes .reblog .tumblelog::after, .notes .reblog blockquote::before, .notes .reblog blockquote::after, .notes .answer_content::before, .notes .answer_content::after, .notes .reply .action a::after {
  973. font-weight:normal;
  974. vertical-align:middle;
  975. content:"";
  976. font-family:'FontAwesome';
  977. display:inline-block; margin:0px 5px;
  978. font-size:10px;
  979. color:{color:Permalink Text};}
  980. .notes .like span a::after {content:"\f004";}
  981. .notes .reblog .tumblelog::after {content: "\f079";}
  982. .notes .reblog blockquote::before, .notes .answer_content::before {content: "\f10d"; margin-top:-1px;}
  983. .notes .reblog blockquote::after, .notes .answer_content::after {content: "\f10e"; margin-top:-1px;}
  984. .notes .reply .action a::after {content: "\f063";}
  985.  
  986. /* permalink scrollbar */
  987. #permalink::-webkit-scrollbar {
  988. height:5px; width:5px;
  989. background: transparent;}
  990. #permalink::-webkit-scrollbar-thumb:vertical {
  991. background: {color:Permalink Scroll Thumb};
  992. border:none;
  993. border-radius: 1px;}
  994.  
  995. /* --------------------------- SMALLER SCREENS --------------------------- */
  996.  
  997. @media only screen and (max-width: 1110px), only screen and (max-device-width: 1110px) {
  998. #entries { margin-left:40%; -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%);}
  999.  
  1000. #magic2 { bottom:444px; left:40%; margin-left:-234px;}
  1001. #magic1 { bottom:425px; left:40%; margin-left:-307px;}
  1002. #health1 { bottom:425px; left:40%; margin-left:-292px;}
  1003. #health2 { bottom:335px; left:40%; margin-left:-201px;}
  1004. #healthtail { bottom:335px; left:40%; margin-left:-200px;}
  1005. #headsup:hover #healthtail { margin-left:-307px;}
  1006. #avatar { bottom:351px; left:40%; margin-left:-276px;}
  1007. #description { bottom:351px; left:40%; margin-left:-276px;}
  1008. #mphp { bottom:410px; left:40%; margin-left:-308px;}
  1009.  
  1010. #mainlinks a:hover { margin-left:-293px;}
  1011. #command { left:40%; margin-left:-318px;}
  1012. #link1{ left:40%; margin-left:-318px;}
  1013. #link2{ left:40%; margin-left:-318px;}
  1014. #link3{ left:40%; margin-left:-318px;}
  1015. #link4{ left:40%; margin-left:-318px;}
  1016. #link4inactive { left:40%; margin-left:-318px;}
  1017. #minorlinks a:hover { margin-left:-273px;}
  1018. #links { left:40%; margin-left:-298px;}
  1019. #link5{ left:40%; margin-left:-298px;}
  1020. #link6{ left:40%; margin-left:-298px;}
  1021. #link7{ left:40%; margin-left:-298px;}
  1022. #link8{ left:40%; margin-left:-298px;}
  1023.  
  1024. #pagination { left:40%; margin-left:-318px;} }
  1025.  
  1026. </style>
  1027. <body>
  1028.  
  1029. <!-------------------------------- CURSOR ---------------------------------->
  1030.  
  1031. {block:IfCustomCursor}
  1032. <style type="text/css"> body {cursor: url({image:Custom Cursor}), auto;} a, a:hover{cursor:url({image:Custom Cursor Links}), auto;}
  1033. </style>
  1034. <!-- Custom cursors don't show up on empty spaces, but this fixes that -->
  1035. <div style="position:fixed; background:rgba(0,0,0,0); top:0px; left:0px; width:100%; height:100%; z-index: -99999999999999;"></div>{/block:IfCustomCursor}
  1036.  
  1037. <!-------------------------- CREDIT; DON'T REMOVE -------------------------->
  1038. <a href="http://nyctothemes.tumblr.com/" title="© nyctothemes" id="credit"></a>
  1039.  
  1040. <!-------------------------------- SIDEBAR --------------------------------->
  1041.  
  1042. <div id="headsup">
  1043. <div id="mphp">
  1044. mp<hp>hp</hp>
  1045. </div>
  1046. <div id="magic1"></div><div id="magic2"></div>
  1047. <div id="health1"></div><div id="health2"></div><div id="healthtail"></div>
  1048. <img src="{image:HUD Avatar 134x134}" id="avatar">
  1049.  
  1050. <!-- description -->
  1051. <div id="description">
  1052. <div class="leftdescspace" style="width:63px;"></div>
  1053. <div class="rightdescspace" style="width:63px;"></div>
  1054. <div class="leftdescspace" style="width:27px;"></div>
  1055. <div class="rightdescspace" style="width:27px;"></div>
  1056. <div class="leftdescspace" style="width:14px;"></div>
  1057. <div class="rightdescspace" style="width:14px;"></div>
  1058. <div class="leftdescspace" style="width:8px;"></div>
  1059. <div class="rightdescspace" style="width:8px;"></div>
  1060. <div class="leftdescspace" style="width:3px;"></div>
  1061. <div class="rightdescspace" style="width:3px;"></div>
  1062. <div class="leftdescspace" style="width:3px;"></div>
  1063. <div class="rightdescspace" style="width:3px;"></div>
  1064. <div class="leftdescspace" style="width:3px;"></div>
  1065. <div class="rightdescspace" style="width:3px;"></div>
  1066. <div class="leftdescspace" style="width:8px;"></div>
  1067. <div class="rightdescspace" style="width:8px;"></div>
  1068. <div class="leftdescspace" style="width:14px;"></div>
  1069. <div class="rightdescspace" style="width:14px;"></div>
  1070. <div class="leftdescspace" style="width:23px;"></div>
  1071. <div class="rightdescspace" style="width:23px;"></div>
  1072. <div class="leftdescspace" style="width:43px;"></div>
  1073. <div class="rightdescspace" style="width:43px;"></div>
  1074.  
  1075. {description}
  1076. </div>
  1077. </div>
  1078.  
  1079. <!-- main side links -->
  1080. <div id="mainlinks">
  1081. <div id="command"></div>
  1082. <a href="/" id="link1" onmouseover="mouseoversound.playclip()" onclick="clicksound.playclip()">{text:Home Title}<l class="fa fa-{text:Home Symbol}"></l></a>
  1083. <a href="/ask" id="link2" onmouseover="mouseoversound.playclip()" onclick="clicksound.playclip()">{text:Message Title}<l class="fa fa-{text:Message Symbol}"></l></a>
  1084. <a href="/archive" id="link3" onmouseover="mouseoversound.playclip()" onclick="clicksound.playclip()">{text:Archive Title}<l class="fa fa-{text:Archive Symbol}"></l></a>
  1085. {block:IfLinksCommandActive}<a href="javascript:unhide('minorlinks');" id="link4" onmouseover="mouseoversound.playclip()" onclick="clicksound.playclip()">{text:Links Title}<l class="fa fa-{text:Links Symbol}"></l></a>{/block:IfLinksCommandActive}
  1086. {block:IfNotLinksCommandActive}<div id="link4inactive">{text:Links Title}</div>{/block:IfNotLinksCommandActive}
  1087. </div>
  1088.  
  1089. <!-- minor side links -->
  1090. <div id="minorlinks" class="hidden">
  1091. <div id="links"></div>
  1092. <a href="{text:Link 1 URL}" id="link5" onmouseover="mouseoversound.playclip()" onclick="clicksound.playclip()">{text:Link 1 Title}<l class="fa fa-{text:Link 1 Symbol}"></l></a>
  1093. <a href="{text:Link 2 URL}" id="link6" onmouseover="mouseoversound.playclip()" onclick="clicksound.playclip()">{text:Link 2 Title}<l class="fa fa-{text:Link 2 Symbol}"></l></a>
  1094. <a href="{text:Link 3 URL}" id="link7" onmouseover="mouseoversound.playclip()" onclick="clicksound.playclip()">{text:Link 3 Title}<l class="fa fa-{text:Link 3 Symbol}"></l></a>
  1095. <a href="{text:Link 4 URL}" id="link8" onmouseover="mouseoversound.playclip()" onclick="clicksound.playclip()">{text:LInk 4 Title}<l class="fa fa-{text:Link 4 Symbol}"></l></a>
  1096. </div>
  1097.  
  1098. <!-- pagination -->
  1099. {block:Pagination}<div id="pagination">
  1100. {block:PreviousPage}<a href="{PreviousPage}" onclick="clicksound.playclip()">{/block:PreviousPage}<l class="fa fa-chevron-left"></l>{block:PreviousPage}</a>{/block:PreviousPage}
  1101. {block:JumpPagination length="5"}
  1102. {block:CurrentPage}
  1103. <span class="current">{PageNumber}</span>
  1104. {/block:CurrentPage}
  1105. {block:JumpPage}
  1106. <a class="jump" href="{URL}" onclick="clicksound.playclip()">{PageNumber}</a>
  1107. {/block:JumpPage}
  1108. {/block:JumpPagination}
  1109. {block:NextPage}<a href="{NextPage}" onclick="clicksound.playclip()">{/block:NextPage}<l class="fa fa-chevron-right"></l>{block:NextPage}</a>{/block:NextPage}
  1110. </div>{/block:Pagination}
  1111.  
  1112. <!--------------------------------- POSTS --------------------------------->
  1113. <div id="entries">
  1114.  
  1115. {block:posts}
  1116. <div class="posts">
  1117.  
  1118. <!-- text posts -->
  1119. {block:Text}
  1120. {block:Title}<h1>{Title}</h1>{/block:Title}
  1121. <div class="caption">{Body}</div>
  1122. {/block:Text}
  1123.  
  1124. <!-- link posts -->
  1125. {block:Link}
  1126. {block:Thumbnail}<center>
  1127. <a href="{Thumbnail-HighRes}">
  1128. <img src="{Thumbnail}" class="photo-posts" style="margin-bottom:5px;">
  1129. </a>
  1130. </center>{/block:Thumbnail}
  1131. <div class="link-posts"><h1><a href="{URL}">
  1132. {Name}&nbsp;&nbsp;&#8594;
  1133. </a></h1></div>
  1134. {block:Description}<div class="caption">
  1135. <p>{Description}</p>
  1136. </div>{/block:Description}
  1137. {/block:Link}
  1138.  
  1139. <!-- ask posts -->
  1140. {block:Answer}
  1141. <div class="ask-posts">
  1142. <img src="{AskerPortraitURL-64}">
  1143. <div class="question">
  1144. <h2>{Asker} {text:Ask Verb}:</h2> {Question}
  1145. </div></div><br>
  1146. <div id="caption">{Answer}</div>
  1147. {/block:Answer}
  1148.  
  1149. <!-- quote posts -->
  1150. {block:Quote}
  1151. <h2 class="quote-posts">
  1152. <l class="fa fa-quote-left"></l>
  1153. <div class="quote">{Quote}</div>
  1154. <l class="fa fa-quote-right"></l>
  1155. </h2>
  1156. <div style="text-align:right; margin-right:20px">
  1157. {block:Source}<b>- {Source}</b>{/block:Source}
  1158. </div>
  1159. {/block:Quote}
  1160.  
  1161. <!-- chat posts -->
  1162. {block:Chat}
  1163. {block:Title}<h1>{Title}</h1>{/block:Title}
  1164. <ul class="chat">{block:Lines}
  1165. <li class="user_{UserNumber}">{block:Label}<b>{Label}</b>{/block:Label} {Line}</li>
  1166. {/block:Lines}</ul>
  1167. {/block:Chat}
  1168.  
  1169. <!-- photo posts -->
  1170. {block:Photo}
  1171. <center>
  1172. {block:HighRes}<a href="{PhotoURL-HighRes}" target="_blank">{/block:HighRes}<img src="{PhotoURL-500}" class="photo-posts"/>{block:HighRes}</a>{/block:HighRes}
  1173. </center>
  1174. {block:Caption}<br><div class="caption">{Caption}</div>{/block:Caption}{/block:Photo}
  1175.  
  1176. {block:Photoset}
  1177. <div style="width:540px; margin-left:-20px; text-align:middle">
  1178. {Photoset}
  1179. </div>
  1180. {block:Caption}<br><div class="caption">{Caption}</div>{/block:Caption}{/block:Photoset}
  1181.  
  1182. <!-- video post -->
  1183. {block:Video}
  1184. {Video-500}
  1185. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  1186. {/block:Video}
  1187.  
  1188. <!-- audio posts -->
  1189. {block:Audio}
  1190. <!--image-->
  1191. {block:IndexPage}<a href="{Permalink}">{/block:IndexPage}<div id="audio-pic" {block:AlbumArt}style="background:none"{/block:AlbumArt}>
  1192. {block:AlbumArt}<img src="{AlbumArtURL}">{/block:AlbumArt}
  1193. </div>{block:IndexPage}</a>{/block:IndexPage}
  1194. <div id="info-container">
  1195. <!--player-->
  1196. {block:ifDarkAudioPlayer}{AudioPlayerBlack}{/block:ifDarkAudioPlayer}
  1197. {block:ifNotDarkAudioPlayer}{AudioPlayerWhite}{/block:ifNotDarkAudioPlayer} <!--info-->
  1198. {block:TrackName}<li><b>Track:</b> {TrackName}</li>{/block:TrackName}
  1199. {block:Artist}<li><b>Artist:</b> {Artist}</li>{/block:Artist}
  1200. {block:Album}<li><b>Album:</b> {Album}</li>{/block:Album}
  1201. {block:PlayCount}<li><b>Plays:</b> {FormattedPlayCount}</li>{/block:PlayCount}
  1202. </div>
  1203. {block:Caption}<div class="caption" style="margin-top:5px;">{Caption}</div>{/block:Caption}{/block:Audio}
  1204.  
  1205. <!------------------------------ POST ENDING ------------------------------->
  1206.  
  1207. {block:PermalinkPage}{block:Date}<div id="postending">
  1208.  
  1209. <!-- date posted -->
  1210. <a href="/day/{Year}/{MonthNumberWithZero}/{DayOfMonthWithZero}">{ShortMonth}.{DayOfMonthWithZero}.{ShortYear}</a>
  1211. <!-- notes counter -->
  1212. {block:NoteCount}
  1213. || {NoteCountWithLabel}
  1214. {/block:NoteCount}
  1215. <!-- reblogged from -->
  1216. {block:RebloggedFrom}<br>
  1217. Via: <a href="{ReblogParentURL}">{ReblogParentName}</a>
  1218. {/block:RebloggedFrom}
  1219. <!-- original poster -->
  1220. {block:ContentSource}
  1221. || Source: <a href="{SourceURL}">{SourceTitle}</a>
  1222. {/block:ContentSource}
  1223. <!-- tags -->
  1224. {block:HasTags}<br><div style="padding:0px 20px 0px 20px">
  1225. Tags: {block:Tags}<a href="{TagURL}">{Tag}</a>, {/block:Tags}
  1226. </div>{/block:HasTags}
  1227.  
  1228. </div>{/block:Date}{/block:PermalinkPage}
  1229.  
  1230. <!------------- If Symbols for Index Page ------------->
  1231. {block:IfPostendingSymbolsforIndexpage}
  1232. {block:IndexPage}
  1233. <div id="postinfo">
  1234.  
  1235. <!-- date posted -->
  1236. {block:Date}
  1237. <a href="{Permalink}" title="{ShortMonth}.{DayOfMonthWithZero}.{ShortYear}" onclick="clicksound.playclip()"><l class="fa fa-clock-o"></l></a>
  1238. {/block:Date}
  1239. <!-- notes counter -->
  1240. {block:NoteCount}
  1241. <a href="{Permalink}" title="Notes: {NoteCount}" onclick="clicksound.playclip()"><l class="fa fa-pencil"></l></a>
  1242. {/block:NoteCount}
  1243. <!-- reblogged from -->
  1244. {block:RebloggedFrom}
  1245. <a href="{ReblogParentURL}" title="Via: {ReblogParentName}"onclick="clicksound.playclip()"><l class="fa fa-at"></l></a>
  1246. {/block:RebloggedFrom}
  1247. <!-- original poster -->
  1248. {block:ContentSource}
  1249. <a href="{SourceURL}" title="Source: {SourceTitle}" onclick="clicksound.playclip()"><l class="fa fa-copyright"></l></a>
  1250. {/block:ContentSource}
  1251. <!-- tags -->
  1252. {block:HasTags}
  1253. <a href="{Permalink}" title="Tags: {block:Tags}{Tag}, {/block:Tags}" onclick="clicksound.playclip()"><l class="fa fa-tag"></l></a>
  1254. {/block:HasTags}
  1255. <!-- reblog -->
  1256. <a href="{ReblogURL}" title="Reblog" onclick="clicksound.playclip()"><l class="fa fa-retweet"></l></a>
  1257.  
  1258. </div>
  1259. {/block:IndexPage}
  1260. {/block:IfPostendingSymbolsforIndexpage}
  1261.  
  1262. <!------------- If NO Symbols for Index Page ------------->
  1263. {block:IfNotPostendingSymbolsforIndexpage}
  1264. {block:IndexPage}
  1265. {block:Date}<div id="postending">
  1266.  
  1267. <!-- date posted -->
  1268. <a href="{permalink}">{ShortMonth}.{DayOfMonthWithZero}.{ShortYear}</a>
  1269. <!-- notes counter -->
  1270. {block:NoteCount}
  1271. || {NoteCountWithLabel}
  1272. {/block:NoteCount}
  1273. <!-- reblogged from -->
  1274. {block:RebloggedFrom}<br>
  1275. Via: <a href="{ReblogParentURL}">{ReblogParentName}</a>
  1276. {/block:RebloggedFrom}
  1277. <!-- original poster -->
  1278. {block:ContentSource}
  1279. || Source: <a href="{SourceURL}">{SourceTitle}</a>
  1280. {/block:ContentSource}
  1281. <!-- tags -->
  1282. {block:HasTags}<br><div style="padding:0px 20px 0px 20px">
  1283. Tags: {block:Tags}<a href="{TagURL}">{Tag}</a>, {/block:Tags}
  1284. </div>{/block:HasTags}
  1285.  
  1286. </div>{/block:Date}
  1287. {/block:IndexPage}
  1288. {/block:IfNotPostendingSymbolsforIndexpage}
  1289.  
  1290. </div> <!-- ending div tag for "posts" -->
  1291.  
  1292. {/block:Posts}
  1293.  
  1294. <!------------------------------ PERMALINK ------------------------------->
  1295.  
  1296. {block:PostNotes}
  1297. <div id="permalink">
  1298. <div id="notescontainer">{PostNotes}</div>
  1299. </div>
  1300. {/block:PostNotes}
  1301.  
  1302. </div> <!-- ending div tag for "entries" -->
  1303.  
  1304. <script>
  1305. /* questions? ask oddhour.tumblr.com */
  1306. var updatePhotosetCss = "<style id='updatePhotosetStyle'> .photoset .photoset_row.photoset_row_1 img { max-width: 540px; } .photoset .photoset_row.photoset_row_1 { margin-top:5px; } .photoset .photoset_row.photoset_row_2 img { max-width: 268px; } .photoset .photoset_row.photoset_row_2 { margin-top:5px; } .photoset .photoset_row.photoset_row_3 img { max-width: 177px; } .photoset .photoset_row.photoset_row_3 { margin-top:5px; } .photoset .photoset_row { text-align: center; width: 540px; } .photoset .photoset_row .photoset_photo {margin-left:4px;} .photoset { width: 540px; }</style>";
  1307. function updatePhotoset() {
  1308.  
  1309. $(".photoset").each( function (i, e) {
  1310. if($(this.contentDocument).find("#updatePhotosetStyle").size() <= 0)
  1311. $(this.contentDocument).find("head").append(updatePhotosetCss);
  1312. var photoset = $(this.contentDocument).find(".photoset");
  1313. var photosetRows = photoset.find(".photoset_row");
  1314. photoset.find(".photoset_photo")
  1315. .each(function () {
  1316. var hiResSrc = $(this).attr("href");
  1317. var img = $(this).find('img');
  1318. img.attr("src", hiResSrc );
  1319. img.attr("style", "");
  1320. });
  1321. photosetRows.attr("style", "").css("margin-bottom", "-5px");
  1322. photoset.attr("style","");
  1323.  
  1324. $(this).height($(this.contentDocument.body).height());
  1325. });
  1326. }
  1327.  
  1328. updatePhotoset();
  1329.  
  1330. var photosetTimer = setInterval(updatePhotoset, 1500);
  1331. $(window).on('load', function () { setTimeout(function() {clearInterval(photosetTimer)}, 2000); })
  1332. </script>
  1333.  
  1334. </body>
  1335. </html>
Advertisement
Add Comment
Please, Sign In to add comment