API tools faq
paste
glenthemes

Theme [04]: Whimsical

glenthemes
Sep 27th, 2018 (edited)
49,872
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 87.49 KB | None | 0 0
raw download clone embed print report
  1. <!----------------------------------------------------
  2. Theme [04]: Whimsical
  3. Made by glenthemes
  4.  
  5. Initial release: 2015/08/??
  6. Rework date: [v1] 2018/09/27 ✧ [v2] 2022/01/28
  7. Last updated: 2025/06/10
  8.  
  9. What's new:
  10. ✱ minor update for npf chats
  11.  
  12. TERMS OF USE:
  13. 1) Do not remove the theme credit.
  14. 2) Do not repost/redistribute my themes.
  15. 3) Do not take parts of the code and use it as your own.
  16. 4) Do not use my themes as a base code.
  17. 5) Do not mix my themes together.
  18.  
  19. THEME GUIDE:
  20. https://docs.google.com/presentation/d/1FVZWJQes4r_UqANvDcTa88uSCWTpFVyZMCTRPO4VMYU/edit?usp=sharing
  21.  
  22. CREDITS:
  23. (ෆ’∀’ෆ) ~ glencredits.tumblr.com/whimsical
  24. ----------------------------------------------------->
  25. <!DOCTYPE html>
  26. <html font="{select:font}" tumblr-controls="{select:tumblr controls color}" bg-type="{select:background image type}" {block:IndexPage}index-page="true"{/block:IndexPage} {block:PermalinkPage}permalink-page="true"{/block:PermalinkPage} post-cols="{select:post columns}" pagi-place="{select:pagination location}">
  27.  
  28. <head>
  29.  
  30. <title>{Title}</title>
  31. <link rel="shortcut icon" href="{Favicon}">
  32.  
  33. {block:Description}
  34. <meta name="description" content="{MetaDescription}">
  35. {/block:Description}
  36.  
  37. <!-------- FONTS -------->
  38. <!-- google fonts -->
  39. <link href="//fonts.googleapis.com/css?family=Work+Sans|Overpass+Mono|Libre+Franklin|Open+Sans|Manrope:500|Karla|Readex+Pro|Sora|Space+Mono" rel="stylesheet">
  40.  
  41. <!-------- ICON FONTS -------->
  42. <!-- phosphor icons -->
  43. <link rel="stylesheet" href="//unpkg.com/[email protected]/src/css/phosphor.css">
  44.  
  45. <!-- cappuccicons -->
  46. <link href="//cappuccicons.gitlab.io/backup/icons.css" rel="stylesheet" crossorigin>
  47.  
  48. <!-- iconsax -->
  49. <script src="//glenthemes.github.io/iconsax/geticons.js"></script>
  50. <link href="//glenthemes.github.io/iconsax/style.css" rel="stylesheet">
  51.  
  52. <!-- ahmed agrma line icons -->
  53. <script src="//glenthemes.github.io/aa-line-icons/script.js"></script>
  54. <link href="//glenthemes.github.io/aa-line-icons/style.css" rel="stylesheet">
  55.  
  56. <!------ PRELOAD ------>
  57. <link rel="preload" href="//glen-assets.github.io/fonts/KaoriGel.ttf" as="font" type="font/ttf" crossorigin>
  58. <link rel="preload" href="//glen-assets.github.io/fonts/Eri Ji.otf" as="font" type="font/otf" crossorigin>
  59. <link rel="preload" href="//glen-assets.github.io/fonts/HatsukoiFriends.otf" as="font" type="font/otf" crossorigin>
  60. <link rel="preload" href="//glen-assets.github.io/fonts/ness.ttf" as="font" type="font/ttf" crossorigin>
  61. <link rel="preload" href="//glen-assets.github.io/fonts/Dreaming Outloud AllCaps.otf" as="font" type="font/otf" crossorigin>
  62.  
  63. <!-------- JQUERY -------->
  64. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  65.  
  66. <!-------- THEME SCRIPTS -------->
  67. <script src="//npf-images-v3.github.io/script.js"></script>
  68. <link rel="stylesheet" href="//npf-images-v3.github.io/recon.css">
  69.  
  70. <link href="//static.tumblr.com/0podkko/oDSpg7y88/photosets.css" rel="stylesheet">
  71.  
  72. <script src="//static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  73.  
  74. <script src="//griddery.github.io/grid.js"></script>
  75. <link href="//griddery.github.io/basics.css" rel="stylesheet">
  76.  
  77. <script src="//static.tumblr.com/gtjt4bo/sgMrymui0/waitforelement.js"></script>
  78. <script src="//glen-themes.gitlab.io/thms/04/always-late-for-the-bus.js"></script>
  79. <script src="//glen-themes.gitlab.io/thms/04/late-again.js"></script>
  80. <script src="//static.tumblr.com/gtjt4bo/5XRr7yhna/if_onlydigits.js"></script>
  81.  
  82. <!-- unblue polls -->
  83. <!-- glenthemes.tumblr.com/post/708014819571302400 -->
  84. <link href="//static.tumblr.com/gtjt4bo/mXBrpdj0n/unblue-polls.css" rel="stylesheet">
  85. <style unblue-polls>
  86. .poll-post {
  87. --Poll-Question-Font-Size: var(--Body-Font-Size);
  88.  
  89. --Poll-Option-Background-Color: {color:post};
  90. --Poll-Option-Corner-Rounding: {text:post corner roundness};
  91. --Poll-Option-Border-Size: 2px;
  92. --Poll-Option-Border-Color: {color:post borders inner};
  93. --Poll-Option-Padding: 8px;
  94. --Poll-Option-Font-Size: var(--Body-Font-Size);
  95. --Poll-Option-Spacing: 10px;
  96. --Poll-Option-Text-Color: {color:text};
  97.  
  98. --Poll-Option-HOVER-Border-Color: {color:special border};
  99. --Poll-Option-HOVER-Background-Color: {color:special background};
  100. --Poll-Option-HOVER-Text-Color: {color:special text};
  101. --Poll-Option-HOVER-Speed: 0.4s;
  102. }
  103.  
  104. .poll-see-results {
  105. padding-bottom:0!important;
  106. border-bottom:none!important;
  107. font-size:calc(var(--Poll-Option-Font-Size) - 1px)!important;
  108. text-transform:uppercase;
  109. letter-spacing:0.5px;
  110. }
  111. </style>
  112.  
  113. <!-- npf audio player -->
  114. <!-- glenthemes.tumblr.com/post/722160746171072512 -->
  115. <script src="//tmblr-npf-audio.gitlab.io/s/init.js"></script>
  116. <link href="//tmblr-npf-audio.gitlab.io/s/base.css" rel="stylesheet">
  117. <script>
  118. tumblr_npf_audio({
  119. emptyTitleText: "Untitled track",
  120. emptyArtistText: "Untitled artist",
  121. emptyAlbumText: "Untitled album",
  122.  
  123. titleLabel: "",
  124. artistLabel: "",
  125. albumLabel: ""
  126. });
  127. </script>
  128. <style edit-npf-audio-player>
  129. .npf-audio-wrapper {
  130. --NPF-Audio-Buttons-Size: var(--Audio-Post-Buttons-Size);
  131. --NPF-Audio-Buttons-Color: var(--Audio-Post-Buttons-Color);
  132. --NPF-Audio-Buttons-Padding: var(--Audio-Post-Buttons-Padding);
  133. --NPF-Audio-Buttons-Spacing: calc(var(--p) + var(--Audio-Post-Album-Right-Gap));
  134. --NPF-Audio-Image-Size: var(--Audio-Post-Album-Size);
  135. --NPF-Audio-Image-Spacing: 0px;
  136.  
  137. --t:calc((var(--NPF-Audio-Buttons-Padding) * 2) + var(--NPF-Audio-Buttons-Size));
  138. --p:calc(var(--NPF-Audio-Buttons-Padding) + ((var(--NPF-Audio-Image-Size) - var(--t)) / 2));
  139. }
  140.  
  141. .npf-audio-wrapper {
  142. position:relative;
  143. background:{color:special background};
  144. z-index:0;
  145. }
  146.  
  147. .npf-audio-background {
  148. margin-left:var(--p);
  149. }
  150.  
  151. .npf-audio-play, .npf-audio-pause {
  152. position:relative;
  153. z-index:0;
  154. }
  155.  
  156. .npf-audio-play:after, .npf-audio-pause:after {
  157. content:"";
  158. position:absolute;
  159. top:0;left:0;
  160. margin-top:calc(0px - var(--NPF-Audio-Buttons-Padding));
  161. margin-left:calc(0px - var(--NPF-Audio-Buttons-Padding));
  162. width:calc(100% + (var(--NPF-Audio-Buttons-Padding) * 2));
  163. height:calc(100% + (var(--NPF-Audio-Buttons-Padding) * 2));
  164. background:var(--Audio-Post-Buttons-Background);
  165. border-radius:100%;
  166. z-index:-1;
  167. }
  168.  
  169. .npf-audio-play svg { margin-left:1px; }
  170. .npf-audio-pause svg { margin-left:0; }
  171.  
  172. figcaption.audio-caption,
  173. figcaption.audio-caption ~ audio[controls]{
  174. display:none;
  175. }
  176.  
  177. .npf-audio-image {
  178. position:absolute;
  179. top:0;left:0;
  180. z-index:-1;
  181. }
  182.  
  183. .npf-audio-details {
  184. line-height:var(--Line-Height);
  185. --flesk:calc((((var(--Body-Font-Size) - 1px) * var(--Line-Height-INT)) - var(--AUD-Font-Size)) / 2);
  186. margin:calc(0px - var(--flesk)) 0;
  187. color:{color:special text};
  188. }
  189.  
  190. .npf-audio-details > * + * {
  191. margin-top:-1px;
  192. }
  193. </style>
  194.  
  195. <script src="//glen-npf.gitlab.io/other/neue.js"></script>
  196. <link href="//glen-npf.gitlab.io/other/neue.css" rel="stylesheet">
  197.  
  198. {block:Hidden}
  199. <!-------- CUSTOMIZE PANEL OPTIONS -------->
  200. <!-- hi if you're reading this click the back arrow to edit! -->
  201. <meta name="image:background image" content="//64.media.tumblr.com/7c88c24dd4501217a38b4e63286fe6dd/05ae38d18ab04189-01/s2048x3072/c93baedfc6fe915a31b7ea2a749e58d056a47f0d.png">
  202. <meta name="image:sidebar image" content="//static.tumblr.com/d4261490526b9e0279b6ce2c0187ef0e/2pnwama/E58pfq59y/tumblr_static_225be2i6dvxck8gkckgk4oow8.gif">
  203.  
  204. <meta name="color:top bar" content="#dae6eb">
  205.  
  206. <meta name="color:background" content="#fcfcfc">
  207.  
  208. <meta name="color:&#x2500;&#x2500;&#x2500;&#x20;&#xFF65;&#x20;&#xFF61;&#xFF9F;&#x2606;&#x3A;&#x20;&#x2A;&#x2E;&#x263D;&#x20;&#x2E;&#x2A;&#x20;&#x3A;&#x2606;&#xFF9F;&#x2E;&#x20;&#x2500;&#x2500;&#x2500;" content="#">
  209.  
  210. <meta name="color:sidebar title" content="#95bdd1">
  211.  
  212. <meta name="color:desc text" content="#96b7c0">
  213. <meta name="color:desc bold" content="#637781">
  214. <meta name="color:desc italic" content="#7bb3b1">
  215. <meta name="color:desc link" content="#89bbc2">
  216.  
  217. <meta name="color:&#x2500;&#x2500;&#x2500;&#x20;&#xFF65;&#x20;&#xFF61;&#xFF9F;&#x2606;&#x3A;&#x20;&#x2A;&#x2E;&#x263D;&#x20;&#x2E;&#x2A;&#x20;&#x3A;&#x2606;&#xFF9F;&#x2E;&#x20;&#x2500;&#x2500;&#x2500;&#x200B;" content="#">
  218.  
  219. <meta name="color:sidebar link 1" content="#deedf2">
  220. <meta name="color:sidebar link 1 hover" content="#dce5e8">
  221. <meta name="color:sidebar link 2" content="#cce2eb">
  222. <meta name="color:sidebar link 2 hover" content="#dce5e8">
  223. <meta name="color:sidebar link 3" content="#b9d8e4">
  224. <meta name="color:sidebar link 3 hover" content="#dce5e8">
  225. <meta name="color:sidebar link 4" content="#afd2e0">
  226. <meta name="color:sidebar link 4 hover" content="#dce5e8">
  227.  
  228. <meta name="color:&#x2500;&#x2500;&#x2500;&#x20;&#xFF65;&#x20;&#xFF61;&#xFF9F;&#x2606;&#x3A;&#x20;&#x2A;&#x2E;&#x263D;&#x20;&#x2E;&#x2A;&#x20;&#x3A;&#x2606;&#xFF9F;&#x2E;&#x20;&#x2500;&#x2500;&#x2500;&#x200B;&#x200B;" content="#">
  229.  
  230. <meta name="color:customlinks number" content="#a5a5a5">
  231. <meta name="color:customlinks line" content="#d5d5d5">
  232. <meta name="color:customlinks text" content="#95bdd1">
  233.  
  234. <meta name="color:customlinks hover number" content="#60656c">
  235. <meta name="color:customlinks hover line" content="#d5d5d5">
  236. <meta name="color:customlinks hover text" content="#60656c">
  237.  
  238. <meta name="color:&#x2500;&#x2500;&#x2500;&#x20;&#xFF65;&#x20;&#xFF61;&#xFF9F;&#x2606;&#x3A;&#x20;&#x2A;&#x2E;&#x263D;&#x20;&#x2E;&#x2A;&#x20;&#x3A;&#x2606;&#xFF9F;&#x2E;&#x20;&#x2500;&#x2500;&#x2500;&#x200B;&#x200B;&#x200B;" content="#">
  239.  
  240. <meta name="color:searchbar border" content="#efefef">
  241. <meta name="color:searchbar bg" content="#fefefe">
  242. <meta name="color:searchbar text" content="#a3a3a3">
  243.  
  244. <meta name="color:searchbar icon border" content="#efefef">
  245. <meta name="color:searchbar icon bg" content="#fefefe">
  246. <meta name="color:searchbar icon" content="#a9a9a9">
  247.  
  248. <meta name="color:&#x2500;&#x2500;&#x2500;&#x20;&#xFF65;&#x20;&#xFF61;&#xFF9F;&#x2606;&#x3A;&#x20;&#x2A;&#x2E;&#x263D;&#x20;&#x2E;&#x2A;&#x20;&#x3A;&#x2606;&#xFF9F;&#x2E;&#x20;&#x2500;&#x2500;&#x2500;&#x200B;&#x200B;&#x200B;&#x200B;" content="#">
  249.  
  250. <meta name="color:pagination border" content="#eaeaea">
  251. <meta name="color:pagination arrows" content="#95bdd1">
  252. <meta name="color:pagination numbers" content="#95bdd1">
  253.  
  254. <meta name="color:&#x2500;&#x2500;&#x2500;&#x20;&#xFF65;&#x20;&#xFF61;&#xFF9F;&#x2606;&#x3A;&#x20;&#x2A;&#x2E;&#x263D;&#x20;&#x2E;&#x2A;&#x20;&#x3A;&#x2606;&#xFF9F;&#x2E;&#x20;&#x2500;&#x2500;&#x2500;&#x200B;&#x200B;&#x200B;&#x200B;&#x200B;" content="#">
  255.  
  256. <meta name="color:musicplayer buttons" content="#60656c">
  257. <meta name="color:musicplayer note" content="#60656c">
  258. <meta name="color:musicplayer text" content="#60656c">
  259. <meta name="color:musicplayer link" content="#9ac1d0">
  260.  
  261. <meta name="color:&#x2500;&#x2500;&#x2500;&#x20;&#xFF65;&#x20;&#xFF61;&#xFF9F;&#x2606;&#x3A;&#x20;&#x2A;&#x2E;&#x263D;&#x20;&#x2E;&#x2A;&#x20;&#x3A;&#x2606;&#xFF9F;&#x2E;&#x20;&#x2500;&#x2500;&#x2500;&#x200B;&#x200B;&#x200B;&#x200B;&#x200B;&#x200B;" content="#">
  262.  
  263. <meta name="color:post" content="#fff">
  264. <meta name="color:text" content="#696969">
  265. <meta name="color:bold" content="#444">
  266. <meta name="color:italic" content="#7bb3b1">
  267. <meta name="color:link" content="#9ac1d0">
  268. <meta name="color:headings" content="#444">
  269.  
  270. <meta name="color:post borders outer" content="#eee">
  271. <meta name="color:post borders inner" content="#f2f2f2">
  272.  
  273. <meta name="color:reblogger line" content="#bdd6e0">
  274. <meta name="color:reblogger" content="#88a7ad">
  275.  
  276. <meta name="color:special border" content="#f0f0f0">
  277. <meta name="color:special background" content="#fafafa">
  278. <meta name="color:special text" content="#444">
  279.  
  280. <meta name="color:permalink border" content="#eee">
  281. <meta name="color:permalink background" content="#fbfbfb">
  282. <meta name="color:permalink text" content="#7d8585">
  283.  
  284. <meta name="color:tags" content="#999">
  285. <meta name="color:post buttons" content="#7d8585">
  286. <meta name="color:like button liked" content="#92c5cd">
  287.  
  288. <meta name="color:&#x2500;&#x2500;&#x2500;&#x20;&#xFF65;&#x20;&#xFF61;&#xFF9F;&#x2606;&#x3A;&#x20;&#x2A;&#x2E;&#x263D;&#x20;&#x2E;&#x2A;&#x20;&#x3A;&#x2606;&#xFF9F;&#x2E;&#x20;&#x2500;&#x2500;&#x2500;&#x200B;&#x200B;&#x200B;&#x200B;&#x200B;&#x200B;&#x200B;" content="#">
  289.  
  290. <meta name="color:scrollbar" content="#ccc">
  291. <meta name="color:scrollbar background" content="#fcfcfc">
  292.  
  293. <meta name="color:text selection background" content="#e7f1f4">
  294. <meta name="color:text selected" content="#444">
  295.  
  296. <meta name="color:label bg" content="#9ac1d0">
  297. <meta name="color:label text" content="#fcfcfc">
  298.  
  299. <meta name="select:tumblr controls color" title="white" content="white">
  300. <meta name="select:tumblr controls color" title="black" content="black">
  301.  
  302. <meta name="select:background image type" title="small" content="repeat">
  303. <meta name="select:background image type" title="large" content="full">
  304.  
  305. <meta name="select:&#x2500;&#x2500;&#x2500;&#x20;&#xFF65;&#x20;&#xFF61;&#xFF9F;&#x2606;&#x3A;&#x20;&#x2A;&#x2E;&#x263D;&#x20;&#x2E;&#x2A;&#x20;&#x3A;&#x2606;&#xFF9F;&#x2E;&#x20;&#x2500;&#x2500;&#x2500;">
  306.  
  307. <meta name="select:sidebar image width" title="80%" content="80%">
  308. <meta name="select:sidebar image width" title="40%" content="40%">
  309. <meta name="select:sidebar image width" title="50%" content="50%">
  310. <meta name="select:sidebar image width" title="60%" content="60%">
  311. <meta name="select:sidebar image width" title="70%" content="70%">
  312. <meta name="select:sidebar image width" title="90%" content="90%">
  313. <meta name="select:sidebar image width" title="100%" content="100%">
  314. <meta name="select:sidebar image width" title="110%" content="110%">
  315. <meta name="select:sidebar image width" title="120%" content="120%">
  316. <meta name="select:sidebar image width" title="130%" content="130%">
  317.  
  318. <meta name="select:sidebar title font" title="Ness" content="ness">
  319. <meta name="select:sidebar title font" title="Dreaming Outloud" content="dreaming outloud">
  320. <meta name="select:sidebar title font" title="Eri Ji" content="eri ji">
  321. <meta name="select:sidebar title font" title="Hatsukoi Friends" content="htskfrnds">
  322.  
  323. <meta name="select:sidebar title size" title="15px" content="15px">
  324. <meta name="select:sidebar title size" title="10px" content="10px">
  325. <meta name="select:sidebar title size" title="11px" content="11px">
  326. <meta name="select:sidebar title size" title="12px" content="12px">
  327. <meta name="select:sidebar title size" title="13px" content="13px">
  328. <meta name="select:sidebar title size" title="14px" content="14px">
  329. <meta name="select:sidebar title size" title="16px" content="16px">
  330. <meta name="select:sidebar title size" title="17px" content="17px">
  331. <meta name="select:sidebar title size" title="18px" content="18px">
  332. <meta name="select:sidebar title size" title="19px" content="19px">
  333. <meta name="select:sidebar title size" title="20px" content="20px">
  334.  
  335. <meta name="select:desc font" title="Manrope" content="Manrope">
  336. <meta name="select:desc font" title="Sora" content="Sora">
  337. <meta name="select:desc font" title="Libre Franklin" content="Libre Franklin">
  338. <meta name="select:desc font" title="Open Sans" content="Open Sans">
  339. <meta name="select:desc font" title="Karla" content="Karla">
  340.  
  341. <meta name="select:desc font size" title="12px" content="12px">
  342. <meta name="select:desc font size" title="10px" content="10px">
  343. <meta name="select:desc font size" title="11px" content="11px">
  344. <meta name="select:desc font size" title="13px" content="13px">
  345. <meta name="select:desc font size" title="14px" content="14px">
  346. <meta name="select:desc font size" title="15px" content="15px">
  347.  
  348. <meta name="select:desc text align" title="center" content="center">
  349. <meta name="select:desc text align" title="left" content="left">
  350. <meta name="select:desc text align" title="right" content="right">
  351. <meta name="select:desc text align" title="justify" content="justify">
  352.  
  353. <meta name="select:customlinks size" title="10px" content="10px">
  354. <meta name="select:customlinks size" title="8px" content="8px">
  355. <meta name="select:customlinks size" title="9px" content="9px">
  356. <meta name="select:customlinks size" title="11px" content="11px">
  357. <meta name="select:customlinks size" title="12px" content="12px">
  358. <meta name="select:customlinks size" title="13px" content="13px">
  359. <meta name="select:customlinks size" title="14px" content="14px">
  360.  
  361. <meta name="select:show searchbar" title="show" content="show">
  362. <meta name="select:show searchbar" title="hide" content="hide">
  363.  
  364. <meta name="select:pagination location" title="sidebar" content="sb">
  365. <meta name="select:pagination location" title="bottom of page" content="bbt">
  366.  
  367. <meta name="select:pagination border" title="show" content="show">
  368. <meta name="select:pagination border" title="hide" content="hide">
  369.  
  370. <!-------- POST OPTIONS -------->
  371. <meta name="select:&#x2500;&#x2500;&#x2500;&#x20;&#xFF65;&#x20;&#xFF61;&#xFF9F;&#x2606;&#x3A;&#x20;&#x2A;&#x2E;&#x263D;&#x20;&#x2E;&#x2A;&#x20;&#x3A;&#x2606;&#xFF9F;&#x2E;&#x20;&#x2500;&#x2500;&#x2500;&#x200B;">
  372.  
  373. <meta name="select:font" title="Sora" content="Sora">
  374. <meta name="select:font" title="Manrope" content="Manrope">
  375. <meta name="select:font" title="Libre Franklin" content="Libre Franklin">
  376. <meta name="select:font" title="Open Sans" content="Open Sans">
  377. <meta name="select:font" title="Karla" content="Karla">
  378.  
  379. <meta name="select:font size" title="12px" content="12px">
  380. <meta name="select:font size" title="10px" content="10px">
  381. <meta name="select:font size" title="11px" content="11px">
  382. <meta name="select:font size" title="13px" content="13px">
  383. <meta name="select:font size" title="14px" content="14px">
  384. <meta name="select:font size" title="15px" content="15px">
  385.  
  386. <meta name="select:post columns" title="2" content="2">
  387. <meta name="select:post columns" title="1" content="1">
  388. <meta name="select:post columns" title="3" content="3">
  389.  
  390. <meta name="select:post padding" title="14px" content="14px">
  391. <meta name="select:post padding" title="10px" content="10px">
  392. <meta name="select:post padding" title="18px" content="18px">
  393. <meta name="select:post padding" title="22px" content="22px">
  394.  
  395. <meta name="select:photoset spacing" title="4px" content="4px">
  396. <meta name="select:photoset spacing" title="2px" content="2px">
  397. <meta name="select:photoset spacing" title="6px" content="6px">
  398. <meta name="select:photoset spacing" title="8px" content="8px">
  399. <meta name="select:photoset spacing" title="10px" content="10px">
  400.  
  401. <meta name="select:grayscale images" title="off" content="off">
  402. <meta name="select:grayscale images" title="on" content="on">
  403.  
  404. <meta name="select:toggle tags" title="yes" content="yes">
  405. <meta name="select:toggle tags" title="no" content="no">
  406.  
  407. <meta name="select:post spacing" title="30px" content="30px">
  408. <meta name="select:post spacing" title="25px" content="25px">
  409. <meta name="select:post spacing" title="35px" content="35px">
  410. <meta name="select:post spacing" title="40px" content="40px">
  411. <meta name="select:post spacing" title="45px" content="45px">
  412. <meta name="select:post spacing" title="50px" content="50px">
  413. <meta name="select:post spacing" title="55px" content="55px">
  414.  
  415. <meta name="select:center gap" title="65px" content="65px">
  416. <meta name="select:center gap" title="30px" content="30px">
  417. <meta name="select:center gap" title="35px" content="35px">
  418. <meta name="select:center gap" title="40px" content="40px">
  419. <meta name="select:center gap" title="45px" content="45px">
  420. <meta name="select:center gap" title="55px" content="55px">
  421. <meta name="select:center gap" title="50px" content="50px">
  422. <meta name="select:center gap" title="55px" content="55px">
  423. <meta name="select:center gap" title="60px" content="60px">
  424. <meta name="select:center gap" title="70px" content="70px">
  425. <meta name="select:center gap" title="75px" content="75px">
  426. <meta name="select:center gap" title="80px" content="80px">
  427. <meta name="select:center gap" title="85px" content="85px">
  428. <meta name="select:center gap" title="90px" content="90px">
  429. <meta name="select:center gap" title="95px" content="95px">
  430.  
  431. <meta name="if:small cursor" content="1">
  432. {/block:Hidden}
  433.  
  434. <!--------- TEXT FIELDS --------->
  435. <meta name="text:top bar height" content="10px">
  436. <meta name="text:screen margin" content="40px">
  437. <meta name="text:sidebar width" content="165px">
  438. <meta name="text:sidebar title" content="WHIMSICAL">
  439.  
  440. <meta name="text:description" content="And may your bones sing&lt;br&gt;&NewLine;No longer with pain&lt;br&gt;&NewLine;But with &lt;a href=&quot;https://devsmaycry.tumblr.com/post/166734190864&quot; title=&quot;Moira Egan, from &lsquo;Vespers&rsquo;&quot;&gt;roses&lt;/a&gt;.">
  441. <meta name="text:searchbar text" content="search...">
  442.  
  443. <meta name="text:&#917536;&#x200B;" content="&#x2500;&#x2500;&#x2500;&#x20;&#xFF65;&#x20;&#xFF61;&#xFF9F;&#x2606;&#x3A;&#x20;&#x2A;&#x2E;&#x263D;&#x20;&#x2E;&#x2A;&#x20;&#x3A;&#x2606;&#xFF9F;&#x2E;&#x20;&#x2500;&#x2500;&#x2500;&NewLine;">
  444.  
  445. <meta name="text:customlink 1 name" content="sample link">
  446. <meta name="text:customlink 1 url" content="https://youtube.com/watch?v=ZkNMZlkrzaU">
  447. <meta name="text:customlink 2 name" content="">
  448. <meta name="text:customlink 2 url" content="">
  449. <meta name="text:customlink 3 name" content="">
  450. <meta name="text:customlink 3 url" content="">
  451. <meta name="text:customlink 4 name" content="">
  452. <meta name="text:customlink 4 url" content="">
  453. <meta name="text:customlink 5 name" content="">
  454. <meta name="text:customlink 5 url" content="">
  455. <meta name="text:customlink 6 name" content="">
  456. <meta name="text:customlink 6 url" content="">
  457.  
  458. <meta name="text:&#917536;&#x200B;&#x200B;" content="&#x2500;&#x2500;&#x2500;&#x20;&#xFF65;&#x20;&#xFF61;&#xFF9F;&#x2606;&#x3A;&#x20;&#x2A;&#x2E;&#x263D;&#x20;&#x2E;&#x2A;&#x20;&#x3A;&#x2606;&#xFF9F;&#x2E;&#x20;&#x2500;&#x2500;&#x2500;&NewLine;">
  459.  
  460. <meta name="text:HOW TO CHANGE THE MUSIC" content="https://linktr.ee/direct_file_links">
  461. <meta name="text:music name" content="Love Like You [&#x200A;&#x3C;a href=&#x22;https://youtube.com/watch?v=aier51lcRfg&#x22; title=&#x22;piano cover by taioo&#x22;&#x3E;x&#x3C;/a&#x3E;&#x200A;]">
  462. <meta name="text:music file" content="https://rhizo.gitlab.io/m/Love_Like_You__Piano_Cover_by_Taioo_.mp3">
  463. <meta name="text:music volume" content="100%">
  464.  
  465. <meta name="text:&#917536;&#x200B;&#x200B;&#x200B;" content="&#x2500;&#x2500;&#x2500;&#x20;&#xFF65;&#x20;&#xFF61;&#xFF9F;&#x2606;&#x3A;&#x20;&#x2A;&#x2E;&#x263D;&#x20;&#x2E;&#x2A;&#x20;&#x3A;&#x2606;&#xFF9F;&#x2E;&#x20;&#x2500;&#x2500;&#x2500;&NewLine;">
  466.  
  467. <meta name="text:post width" content="275px">
  468. <meta name="text:post width large" content="400px">
  469. <meta name="text:post corner roundness" content="5px">
  470.  
  471. <meta name="text:permalink icon A" content="file">
  472. <meta name="text:permalink icon B" content="star">
  473.  
  474. <!--------------------------------------------------->
  475.  
  476. <style type="text/css">
  477.  
  478. @font-face { font-family: "kaori gel"; src: url("//glen-assets.github.io/fonts/KaoriGel.ttf"); }
  479.  
  480. @font-face { font-family: "eri ji"; src: url("//glen-assets.github.io/fonts/Eri Ji.otf"); }
  481.  
  482. @font-face { font-family: "hatsukoi friends"; src: url("//glen-assets.github.io/fonts/HatsukoiFriends.otf"); }
  483.  
  484. @font-face { font-family: "ness"; src: url("//glen-assets.github.io/fonts/ness.ttf"); }
  485.  
  486. @font-face { font-family: "dreaming outloud"; src: url("//glen-assets.github.io/fonts/Dreaming Outloud AllCaps.otf"); }
  487.  
  488. /*-------- TUMBLR CONTROLS --------*/
  489. iframe#tumblr_controls, .iframe-controls--desktop {
  490. top:calc(5px + var(--TopBar-Height))!important;
  491. right:calc(5px + (var(--Scrollbar-Padding) / 2) + 1px)!important;
  492. position:fixed!important;
  493.  
  494. --TC-Resize-Factor:0.69;
  495.  
  496. transform:scale(var(--TC-Resize-Factor),var(--TC-Resize-Factor));
  497. -webkit-transform:scale(var(--TC-Resize-Factor),var(--TC-Resize-Factor));
  498.  
  499. opacity:0.8;
  500.  
  501. transform-origin:100% 0;
  502. z-index:999999!important;
  503. user-select:none;
  504. }
  505.  
  506. .tmblr-iframe--follow-teaser, .follow-teaser, .iframe-controls--phone-mobile, .tmblr-iframe--app-cta-button {
  507. display:none!important;
  508. visibility:hidden!important;
  509. height:0!important;
  510. }
  511.  
  512. [tumblr-controls="black"] iframe#tumblr_controls,
  513. [tumblr-controls="black"] .iframe-controls--desktop {
  514. filter:invert(100%) hue-rotate(180deg)!important;
  515. -webkit-filter:invert(100%) hue-rotate(180deg)!important;
  516. opacity:1;
  517. }
  518.  
  519. /*------- SCROLLBAR --------*/
  520. ::-webkit-scrollbar {
  521. width:var(--Scrollbar-Padding);
  522. height:var(--Scrollbar-Padding);
  523. background-color:{color:scrollbar background};
  524. }
  525.  
  526. ::-webkit-scrollbar-thumb {
  527. background-color:{color:scrollbar};
  528. border:calc((var(--Scrollbar-Padding) - 1px) / 2) solid transparent;
  529. border-top:calc(var(--Scrollbar-Padding) / 2.69) solid transparent;
  530. border-bottom:calc(var(--Scrollbar-Padding) / 2.69) solid transparent;
  531. background-clip:padding-box;
  532. }
  533.  
  534. ::-webkit-scrollbar-corner {
  535. background:transparent;
  536. }
  537.  
  538. /*------- TOOLTIPS --------*/
  539. #s-m-t-tooltip {
  540. padding:6px 9px;
  541. margin:17px;
  542. background-color:{color:label bg};
  543. border-radius:2px;
  544. font-family:var(--SmallCaps-Font-Family);
  545. font-size:calc(var(--SmallCaps-Font-Size) - .5px);
  546. letter-spacing:0.5px;
  547. text-transform:uppercase;
  548. color:{color:label text};
  549. line-height:var(--Line-Height);
  550. z-index:99;
  551. max-width:40vw;
  552. }
  553.  
  554. /*---- GLOBAL FONT SETTINGS ----*/
  555. [font]{
  556. font-family:var(--Body-Font-Family);
  557. font-size:var(--Body-Font-Size);
  558. color:var(--Body-Text-Color);
  559. }
  560.  
  561. [font="Libre Franklin"]{
  562. font-size:calc(var(--Body-Font-Size) - .5px)!important;
  563. letter-spacing:0.1px;
  564. }
  565.  
  566. [font="Manrope"]{
  567. font-size:calc(var(--Body-Font-Size) - 1px)!important;
  568. letter-spacing:0.3px;
  569. }
  570.  
  571. [font="Sora"]{
  572. font-size:calc(var(--Body-Font-Size) - 1px)!important;
  573. letter-spacing:0.1px;
  574. }
  575.  
  576. /*------- TEXT HIGHLIGHT --------*/
  577. ::selection {
  578. background:{color:text selection background};
  579. color:{color:text selected};
  580. }
  581.  
  582. img::selection {background:transparent;}
  583. img::-moz-selection {background:transparent;}
  584.  
  585. ::-moz-selection {
  586. background:{color:text selection background};
  587. color:{color:text selected};
  588. }
  589.  
  590. /*------- BASICS --------*/
  591. {block:ifsmallcursor}
  592. * {
  593. cursor:url("https://78.media.tumblr.com/66991e3a24432876aa22db906d5071de/tumblr_pe9t1ipv6S1qg2f5co6_r1_75sq.png"), auto!important;
  594. }
  595. {/block:ifsmallcursor}
  596.  
  597. body {
  598. margin:0;
  599. background-color:{color:background};
  600. background-image:url('{image:background image}');
  601. background-attachment:fixed;
  602. overflow:hidden;
  603. }
  604.  
  605. [bg-type="repeat"] body {
  606. background-repeat:repeat;
  607. }
  608.  
  609. [bg-type="full"] body {
  610. background-repeat:no-repeat;
  611. background-size:cover;
  612. background-position:center;
  613. }
  614.  
  615. a {
  616. text-decoration:none;
  617. color:var(--Link);
  618. }
  619.  
  620. a[title][class*="smt-current-element"]:not([href]){
  621. cursor:help;
  622. }
  623.  
  624. a[title=""]:not([href]){
  625. cursor:initial;
  626. }
  627.  
  628. p {
  629. margin:var(--Paragraph-Margins) 0;
  630. }
  631.  
  632. blockquote {
  633. margin:var(--Paragraph-Margins);
  634. margin-right:0;
  635. padding-left:var(--Paragraph-Margins);
  636. border-left:1px solid rgba({RGBcolor:text},0.169);
  637. }
  638.  
  639. h1, h2, h3, h4, h5, h6, .linkpost-title {
  640. margin:var(--Heading-Margins) 0;
  641. font-family:var(--Heading-Font-Family);
  642. font-weight:normal;
  643. font-size:var(--Heading-Font-Size);
  644. text-transform:uppercase;
  645. letter-spacing:.3px;
  646. line-height:calc(var(--Line-Height) * 1.1);
  647. -webkit-text-stroke-width:0.3px;
  648. -webkit-text-stroke-color:{color:headings};
  649. color:{color:headings};
  650. }
  651.  
  652. img, iframe {
  653. vertical-align:middle;
  654. max-width:100%;
  655. }
  656.  
  657. figure {
  658. margin:0;
  659. }
  660.  
  661. figure img {
  662. height:auto;
  663. }
  664.  
  665. pre, code {
  666. white-space:pre-wrap;
  667. font-family:overpass mono;
  668. font-size:calc(var(--Body-Font-Size) - 1.5px);
  669. background:{color:special background};
  670. border:1px solid {color:special border};
  671. color:{color:special text};
  672. }
  673.  
  674. pre {
  675. padding:0.8em 1em;
  676. border-radius:3px;
  677. word-break:break-word;
  678. }
  679.  
  680. code {
  681. padding:3px 4px;
  682. }
  683.  
  684. hr {
  685. display:block;
  686. margin:var(--Heading-Margins) auto;
  687. border-width:0px;
  688. width:69%;
  689. height:1px;
  690. background:{color:post borders inner};
  691. }
  692.  
  693. .p-more {
  694. text-align:center;
  695. }
  696.  
  697. a.read_more {
  698. padding-bottom:1.5px!important;
  699. font-family:var(--SmallCaps-Font-Family);
  700. font-size:calc(var(--SmallCaps-Font-Size) + 1px);
  701. text-transform:uppercase;
  702. letter-spacing:.7px;
  703. }
  704.  
  705. ul, ol {
  706. margin:var(--Paragraph-Margins) 0;
  707. margin-left:1.69em;
  708. padding:0;
  709. }
  710.  
  711. ol li {
  712. padding-left:0.420em;
  713. }
  714.  
  715. ul li {
  716. position:relative;
  717. padding-left:0.25em;
  718. margin-left:calc((var(--Body-Font-Size) * 1.420) - 3px);
  719. list-style:none;
  720. }
  721.  
  722. ul li:before {
  723. content:"";
  724. position:absolute;
  725. margin-top:calc(((var(--Body-Font-Size) * var(--Line-Height-INT)) / 2) - 0px);
  726. transform:translateY(-50%);
  727. left:0;margin-left:calc((var(--Body-Font-Size) * -1.420) - 3px);
  728. width:var(--Body-Font-Size);
  729. height:.7px;
  730. background:rgba({RGBcolor:text},0.420);
  731. }
  732.  
  733. .flex {
  734. display:flex!important;
  735. align-items:center;
  736. }
  737.  
  738. :root {
  739. --TopBar-Height:{text:top bar height};
  740. --Screen-Margin:{text:screen margin};
  741. --Main-Content-Shift:-25px;
  742.  
  743. /*--- SIDEBAR SETTINGS ---*/
  744. --Sidebar-Width:{text:sidebar width};
  745.  
  746. --Navlinks-Bar-Height:12px;
  747. --Navlinks-Bar-Roundness:10px;
  748. --Navlinks-Fade-Speed:420ms; /* can be in ms or s! */
  749.  
  750. --CustomLinks-Line-Width:28px;
  751. --CustomLinks-Line-Thickness:1px;
  752. --CustomLinks-Line-Spacing:8px;
  753. --CustomLinks-Fade-Speed:279ms;
  754. --CustomLinks-Row-Spacing:10px;
  755.  
  756. --Searchbar-Text-Padding:5px;
  757. --Searchbar-Icon-Spacing:5px;
  758. --Searchbar-Icon-Size:calc(var(--Body-Font-Size) - 1px);
  759.  
  760. --Pagination-Numbers-Size:calc(var(--Body-Font-Size) - 2px);
  761. --Pagination-Arrows-Size:calc(var(--SmallCaps-Font-Size) + 1px);
  762. --Pagination-Spacing:10px;
  763.  
  764. --Sidebar-Stuff-Spacing:20px;
  765.  
  766. /*--- MUSIC PLAYER SETTINGS ---*/
  767. --MusicPlayer-Corner-Offset:20px;
  768.  
  769. --MusicPlayer-Buttons-Size:12px;
  770.  
  771. --MusicPlayer-Note-Left-Gap:9px;
  772.  
  773. --MusicPlayer-Text-Left-Gap:7px;
  774. --MusicPlayer-Text-Size:calc(var(--SmallCaps-Font-Size));
  775.  
  776. /*--- POST SETTINGS ---*/
  777. --Paragraph-Margins:1em;
  778. --Heading-Margins:1em;
  779.  
  780. --Body-Font-Family:{select:font};
  781. --Body-Font-Size:{select:font size};
  782. --Body-Text-Color:{color:text};
  783.  
  784. --Line-Height:1.7em; /* line-height with suffix */
  785. --Line-Height-INT:1.7; /* line-height without suffix */
  786.  
  787. --Heading-Font-Family:"kaori gel";
  788. --Heading-Font-Size:calc(var(--Body-Font-Size) - 1px);
  789.  
  790. --SmallCaps-Font-Family:"readex pro";
  791. --SmallCaps-Font-Size:calc(var(--Body-Font-Size) - 3px);
  792.  
  793. {block:IndexPage}
  794. --Post-Width:{text:post width};
  795. {/block:IndexPage}
  796.  
  797. {block:PermalinkPage}
  798. --Post-Width:{text:post width large};
  799. {/block:PermalinkPage}
  800.  
  801. --Post-Total-Width:calc(var(--Post-Width) + (var(--Post-Padding) * 2) + 2px);
  802.  
  803. --Post-Padding:{select:post padding};
  804. --Post-Spacing:{select:post spacing};
  805.  
  806. --Post-Columns:{select:post columns};
  807. --Post-Columns-Spacing:{select:post spacing};
  808.  
  809. --Reblogger-Avatar-Gap-Right:8px;
  810. --Reblogger-Username-Line-Width:15px;
  811. --Reblogger-Username-Line-Color:{color:reblogger line};
  812. --Reblogger-Username-Color:{color:reblogger};
  813. --Reblogger-Avatar-Bottom-Gap:12px;
  814.  
  815. --Reblogs-Spacing:15px;
  816. --Reblogs-Border:{color:post borders inner};
  817.  
  818. --Captions-Gap:13px;
  819. --NPF-Caption-Spacing:var(--Captions-Gap);
  820.  
  821. --Photoset-Spacing:{select:photoset spacing};
  822. --NPF-Image-Spacing:var(--Photoset-Spacing);
  823.  
  824. --Grayscale-Settings:grayscale(100%) contrast(110%) brightness(104%);
  825. --Grayscale-Transition-Speed:0.269s;
  826.  
  827. --AskerPortrait-Size:42px;
  828. --AskerPortrait-Padding:6px;
  829.  
  830. --Audio-Post-Album-Size:64px;
  831. --Audio-Post-Album-Right-Gap:13px;
  832. --Audio-Post-Buttons-Size:10px;
  833. --Audio-Post-Buttons-Color:{color:label text};
  834. --Audio-Post-Buttons-Padding:9px;
  835. --Audio-Post-Buttons-Background:{color:label bg};
  836. --Audio-Post-Download-Color:{color:special text};
  837.  
  838. --Link:{color:link};
  839. --Post-Borders-Inner:{color:post borders inner};
  840.  
  841. --Quote-Font-Family:var(--Heading-Font-Family);
  842. --Quote-Font-Size:calc(var(--Body-Font-Size) - 1.3px);
  843.  
  844. /*--- READMORE SETTINGS ---*/
  845. --Shorten-LongPosts:yes;
  846. --LongPosts-Action:expand; /* choose: expand | postlink */
  847. --LongPosts-Expand-Speed:420ms; /* in ms ONLY. */
  848. --LongPosts-Expand-Text:"keep reading"; /* keep between the quotes */
  849.  
  850. /*--- TAGS SETTINGS ---*/
  851. --Tags-Fade-Speed-MS:269; /* fade speed without suffix */
  852. --Tags-Fade-Speed-MS-SFX:269ms; /* fade speed with suffix */
  853. --Tags-Spacing:4px;
  854.  
  855. /*--- PERMALINK SETTINGS ---*/
  856. --Permalink-Padding:15px;
  857. --Permalink-Text-Size:calc(var(--Body-Font-Size) - 3px);
  858.  
  859. /*--- POST BUTTONS SETTINGS ---*/
  860. --Post-Buttons-Size:var(--Body-Font-Size);
  861. --Post-Buttons-Color:{color:post buttons};
  862. --Like-Button-Liked:{color:like button liked};
  863. --Post-Buttons-Spacing:4px;
  864.  
  865. /*--- POST NOTES SETTINGS ---*/
  866. --Notes-Indicator-Size:14px;
  867. --Notes-Indicator-Gap-Right:7px;
  868. --Notes-Row-Spacing:10px;
  869.  
  870. /*--- MISC ---*/
  871. --Center-Gap:{select:center gap};
  872.  
  873. --Pagination-Color:{color:text};
  874.  
  875. --TumblrControls-Color:{select:tumblr controls color};
  876.  
  877. --Scrollbar-Padding:13px;
  878. }
  879.  
  880.  
  881. /*---- TOP BAR ----*/
  882. .topbar {
  883. position:fixed;
  884. top:0;left:0;
  885. width:100%;
  886. height:var(--TopBar-Height);
  887. background:{color:top bar};
  888. z-index:6;
  889. }
  890.  
  891. /*---- BIG CONTAINER ----*/
  892. .vojjg {
  893. position:absolute;
  894. margin:0 auto;
  895. top:0;left:0;right:0;
  896. margin-top:var(--TopBar-Height);
  897. height:calc(100% - var(--TopBar-Height));
  898. text-align:center;
  899. overflow-y:scroll;
  900. overflow-x:hidden;
  901. overscroll-behavior-y:none;
  902. }
  903.  
  904. @-moz-document url-prefix(){
  905. .vojjg {
  906. scrollbar-width:thin; /* firefox only */
  907. }
  908. }
  909.  
  910. .uqune {
  911. display:inline-block;
  912. text-align:initial;
  913. margin-left:var(--Main-Content-Shift);
  914. }
  915.  
  916. /*---- LEFT SIDEBAR ----*/
  917. .jinbar {
  918. position:fixed;
  919. top:0;margin-top:calc(0px - var(--TopBar-Height));
  920. width:var(--Sidebar-Width);
  921. height:calc(100% + var(--TopBar-Height));
  922. display:table;
  923. }
  924.  
  925. .uoooo {
  926. display:table-cell;
  927. vertical-align:middle;
  928. }
  929.  
  930. .uoooo > * + * {
  931. margin-top:var(--Sidebar-Stuff-Spacing);
  932. }
  933.  
  934. /*---- SIDEBAR IMAGE ----*/
  935. .sb-img-cont {
  936. display:flex;
  937. justify-content:center;
  938. }
  939.  
  940. .sb-img-cont img {
  941. width:{select:sidebar image width};
  942. max-width:none;
  943. }
  944.  
  945. /*---- SIDEBAR TITLE ----*/
  946. .sb-title {
  947. font-family:{select:sidebar title font};
  948. font-size:{select:sidebar title size};
  949. color:{color:sidebar title};
  950. text-align:center;
  951. }
  952.  
  953. .sb-title[sbt-font="eri ji"]{
  954. font-family:eri ji;
  955. font-size:calc({select:sidebar title size} + 3px);
  956. -webkit-text-stroke-width:.3px;
  957. -webkit-text-stroke-color:{color:sidebar title};
  958. }
  959.  
  960. .sb-title[sbt-font="htskfrnds"]{
  961. font-family:hatsukoi friends;
  962. }
  963.  
  964. .sb-title[sbt-font="ness"]{
  965. font-family:ness;
  966. letter-spacing:2.5px;
  967. -webkit-text-stroke-width:.3px;
  968. -webkit-text-stroke-color:{color:sidebar title};
  969. }
  970.  
  971. .sb-title[sbt-font="dreaming outloud"]{
  972. font-family:dreaming outloud;
  973. font-size:calc({select:sidebar title size} + 3px);
  974. letter-spacing:.5px;
  975. }
  976.  
  977. /*---- SIDEBAR DESCRIPTION ----*/
  978. .sb-title + .desc {
  979. margin-top:calc(var(--Sidebar-Stuff-Spacing) / 1.69);
  980. }
  981.  
  982. .desc {
  983. font-family:{select:desc font};
  984. font-size:{select:desc font size};
  985. color:{color:desc text};
  986. text-align:{select:desc text align};
  987. line-height:var(--Line-Height);
  988. }
  989.  
  990. .desc[desctf="Libre Franklin"]{
  991. letter-spacing:0.1px;
  992. }
  993.  
  994. .desc[desctf="Manrope"]{
  995. letter-spacing:0.3px;
  996. }
  997.  
  998. .desc b, .desc strong {
  999. font-weight:normal;
  1000. color:{color:desc bold};
  1001. -webkit-text-stroke-width:.3px;
  1002. -webkit-text-stroke-color:{color:desc bold};
  1003. }
  1004.  
  1005. .desc i:not([class]), .desc em:not([class]){
  1006. color:{color:desc italic};
  1007. }
  1008.  
  1009. .dyn {
  1010. --phlesk:calc((({select:desc font size} * var(--Line-Height-INT)) - {select:desc font size}) / 2);
  1011. margin:calc(0px - var(--phlesk)) 0;
  1012. }
  1013.  
  1014. .desc a {
  1015. color:{color:desc link};
  1016. padding-bottom:.5px;
  1017. border-bottom:1px solid rgba({RGBcolor:desc link},0.3);
  1018. }
  1019.  
  1020. /*---- NAVLINKS ----*/
  1021. .navlinks {
  1022. display:flex;
  1023. }
  1024.  
  1025. .navlinks a {
  1026. display:block;
  1027. flex:1;
  1028. height:var(--Navlinks-Bar-Height);
  1029. transition:background var(--Navlinks-Fade-Speed) ease-in-out;
  1030. }
  1031.  
  1032. .navlinks a:first-child {
  1033. border-radius:var(--Navlinks-Bar-Roundness) 0 0 var(--Navlinks-Bar-Roundness);
  1034. background:{color:sidebar link 1};
  1035. }
  1036.  
  1037. .navlinks a:first-child:hover {
  1038. background:{color:sidebar link 1 hover};
  1039. }
  1040.  
  1041. .navlinks a:nth-child(2){
  1042. background:{color:sidebar link 2};
  1043. }
  1044.  
  1045. .navlinks a:nth-child(2):hover {
  1046. background:{color:sidebar link 2 hover};
  1047. }
  1048.  
  1049. .navlinks a:nth-child(3){
  1050. background:{color:sidebar link 3};
  1051. }
  1052.  
  1053. .navlinks a:nth-child(3):hover {
  1054. background:{color:sidebar link 3 hover};
  1055. }
  1056.  
  1057. .navlinks a:last-child {
  1058. border-radius:0 var(--Navlinks-Bar-Roundness) var(--Navlinks-Bar-Roundness) 0;
  1059. background:{color:sidebar link 4};
  1060. }
  1061.  
  1062. .navlinks a:last-child:hover {
  1063. background:{color:sidebar link 4 hover};
  1064. }
  1065.  
  1066. /*---- CUSTOM LINKS ----*/
  1067. .honeydew {
  1068. display:flex;
  1069. line-height:var(--Line-Height);
  1070. --b0rk:calc((({select:customlinks size} * var(--Line-Height-INT)) - {select:customlinks size}) / 2);
  1071. }
  1072.  
  1073. .honeydew + .honeydew {
  1074. margin-top:calc(0px - var(--b0rk));
  1075. padding-top:var(--CustomLinks-Row-Spacing);
  1076. }
  1077.  
  1078. .honeydew * {
  1079. display:block;
  1080. flex-shrink:0;
  1081. line-height:var(--Line-Height);
  1082. transition:color var(--CustomLinks-Fade-Speed) ease-in-out, background var(--CustomLinks-Fade-Speed) ease-in-out;
  1083. }
  1084.  
  1085. .honeydew [num]{
  1086. font-family:space mono;
  1087. font-size:calc({select:customlinks size} + 1px);
  1088. letter-spacing:1px;
  1089. color:{color:customlinks number};
  1090. -webkit-text-stroke-width:.1px;
  1091. -webkit-text-stroke-color:{color:customlinks number};
  1092. }
  1093.  
  1094. .honeydew:hover [num]{
  1095. color:{color:customlinks hover number};
  1096. }
  1097.  
  1098. .honeydew [le-line]{
  1099. margin-top:calc(var(--b0rk) + ({select:customlinks size} / 2) - (var(--CustomLinks-Line-Thickness) / 2));
  1100. margin-left:calc(var(--CustomLinks-Line-Spacing) - 3px);
  1101. margin-right:var(--CustomLinks-Line-Spacing);
  1102. width:var(--CustomLinks-Line-Width);
  1103. height:var(--CustomLinks-Line-Thickness);
  1104. background:{color:customlinks line};
  1105. transform:perspective(0);
  1106. }
  1107.  
  1108. .honeydew:hover [le-line]{
  1109. background:{color:customlinks hover line};
  1110. }
  1111.  
  1112. .honeydew [cltxt]{
  1113. font-family:var(--SmallCaps-Font-Family);
  1114. font-size:{select:customlinks size};
  1115. text-transform:uppercase;
  1116. letter-spacing:.5px;
  1117. color:{color:customlinks text};
  1118. flex:1;
  1119. }
  1120.  
  1121. .honeydew:hover [cltxt]{
  1122. color:{color:customlinks hover text};
  1123. }
  1124.  
  1125. .honeydew:first-child {
  1126. margin-top:calc(0px - var(--b0rk));
  1127. }
  1128.  
  1129. .honeydew:last-child {
  1130. margin-bottom:calc(0px - var(--b0rk));
  1131. }
  1132.  
  1133. /*---- SEARCHBAR ----*/
  1134. .mr-starch[m7="hide"]{
  1135. display:none;
  1136. }
  1137.  
  1138. .mr-starch form {
  1139. display:flex;
  1140. align-items:center;
  1141. }
  1142.  
  1143. .mr-starch form > * {
  1144. flex-shrink:0;
  1145. }
  1146.  
  1147. .mr-starch input {
  1148. display:block;
  1149. flex:1;
  1150. outline:none;
  1151. padding:var(--Searchbar-Text-Padding);
  1152. background:{color:searchbar bg};
  1153. border:1px solid {color:searchbar border};
  1154. border-radius:2px;
  1155. font-family:var(--SmallCaps-Font-Family);
  1156. font-size:var(--SmallCaps-Font-Size);
  1157. text-transform:uppercase;
  1158. letter-spacing:.7px;
  1159. color:{color:searchbar text};
  1160. line-height:1em;
  1161. }
  1162.  
  1163. .mr-starch input::placeholder {
  1164. color:rgba({RGBcolor:searchbar text},0.8);
  1165. }
  1166.  
  1167. .mr-starch button {
  1168. display:block;
  1169. outline:none;
  1170. margin-left:var(--Searchbar-Icon-Spacing);
  1171. align-self:stretch;
  1172. box-sizing:border-box;
  1173. background:{color:searchbar icon bg};
  1174. border:1px solid {color:searchbar icon border};
  1175. border-radius:2px;
  1176. cursor:pointer;
  1177. }
  1178.  
  1179. .mr-starch .aa-line-icons {
  1180. display:block;
  1181. --Line-Icons-Size:var(--Searchbar-Icon-Size);
  1182. --Line-Icons-Color:{color:searchbar icon};
  1183. }
  1184.  
  1185. @-moz-document url-prefix(){
  1186. .mr-starch .aa-line-icons {
  1187. padding:0 1px;
  1188. }
  1189. }
  1190.  
  1191. /*---- PAGINATION ----*/
  1192. .sbpagi {
  1193. display:flex;
  1194. align-items:center;
  1195. justify-content:space-between;
  1196. margin-left:calc(var(--Pagination-Spacing) / -2);
  1197. margin-right:calc(var(--Pagination-Spacing) / -2);
  1198. font-family:space mono;
  1199. font-size:var(--Pagination-Numbers-Size);
  1200. line-height:1em;
  1201. }
  1202.  
  1203. .sbpagi[brd="show"]{
  1204. position:relative;
  1205. padding-top:calc(var(--Sidebar-Stuff-Spacing) - (var(--Pagination-Spacing) / 2));
  1206. }
  1207.  
  1208. .sbpagi[brd="show"]:before {
  1209. content:"";
  1210. position:absolute;
  1211. top:0;left:0;
  1212. margin-top:-1px;
  1213. margin-left:calc(var(--Pagination-Spacing) / 2);
  1214. width:calc(100% - var(--Pagination-Spacing));
  1215. height:1px;
  1216. background:{color:pagination border};
  1217. transform:perspective(0);
  1218. }
  1219.  
  1220. .botpagi[brd="show"]{
  1221. padding-top:calc(var(--Post-Spacing) - (var(--Pagination-Spacing) / 2));
  1222. }
  1223.  
  1224. [pagi-place="bbt"] .jinbar .sbpagi {
  1225. display:none;
  1226. }
  1227.  
  1228. [pagi-place="sb"] .botpagi {
  1229. display:none;
  1230. }
  1231.  
  1232. .botpagi {
  1233. margin-top:var(--Post-Spacing);
  1234. justify-content:center;
  1235. }
  1236.  
  1237. .sbpagi * {
  1238. padding:0 calc(var(--Pagination-Spacing) / 2);
  1239. flex-shrink:0;
  1240. }
  1241.  
  1242. .sbarlynk {
  1243. display:flex;
  1244. align-items:center;
  1245. }
  1246.  
  1247. .sbarlynk i {
  1248. padding:0;
  1249. }
  1250.  
  1251. .sbarlynk i + i {
  1252. margin-left:calc(0px - (var(--Pagination-Arrows-Size) / 2) - 1px);
  1253. }
  1254.  
  1255. .sbarlynk:not([href]){
  1256. visibility:hidden;
  1257. }
  1258.  
  1259. .sbp-mid {
  1260. display:flex;
  1261. align-items:center;
  1262. }
  1263.  
  1264. .botpagi .sbp-mid {
  1265. margin:0 calc(var(--Pagination-Spacing) / 2);
  1266. }
  1267.  
  1268. .curpagi, .othernumz {
  1269. color:{color:pagination numbers};
  1270. }
  1271.  
  1272. .curpagi {
  1273. font-size:calc(var(--Pagination-Numbers-Size) * 1.5);
  1274. cursor:default;
  1275. }
  1276.  
  1277. .sbpagi [class*="ph-"]{
  1278. display:flex;
  1279. font-size:var(--Pagination-Arrows-Size);
  1280. color:{color:pagination arrows};
  1281. }
  1282.  
  1283. /*---- POST CONTAINER ----*/
  1284. .jinbar + .postscont {
  1285. margin-left:calc(var(--Sidebar-Width) + var(--Center-Gap));
  1286. }
  1287.  
  1288. .postscont {
  1289. margin:var(--Screen-Margin) 0;
  1290.  
  1291. {block:IndexPage}
  1292. min-width:calc((var(--Post-Total-Width) * var(--Post-Columns)) + var(--Post-Columns-Spacing) * (var(--Post-Columns) - 1));
  1293. {/block:IndexPage}
  1294.  
  1295. {block:PermalinkPage}
  1296. min-width:var(--Post-Total-Width);
  1297. {/block:PermalinkPage}
  1298. }
  1299.  
  1300. .posts {
  1301. width:calc(var(--Post-Width) + (var(--Post-Padding) * 2) + 2px);
  1302. overflow:hidden;
  1303. }
  1304.  
  1305. .posts + .posts {
  1306. padding-top:var(--Post-Spacing);
  1307. }
  1308.  
  1309. .postscont .col-column {
  1310. width:initial;
  1311. }
  1312.  
  1313. .postscont .col-column + .col-column {
  1314. padding-left:var(--Post-Columns-Spacing);
  1315. }
  1316.  
  1317. [black-and-white="on"] img,
  1318. [black-and-white="on"] iframe,
  1319. [black-and-white="on"] video {
  1320. transition:filter var(--Grayscale-Transition-Speed) ease-in-out;
  1321. filter:var(--Grayscale-Settings);
  1322. }
  1323.  
  1324. [black-and-white="on"] .posts:hover img,
  1325. [black-and-white="on"] .posts:hover iframe,
  1326. [black-and-white="on"] .posts:hover video {
  1327. filter:none;
  1328. }
  1329.  
  1330. /*-----------------------*/
  1331.  
  1332. .postinner {
  1333. position:relative;
  1334. padding:var(--Post-Padding);
  1335. background:{color:post};
  1336. border:1px solid {color:post borders outer};
  1337. line-height:var(--Line-Height);
  1338. border-radius:{text:post corner roundness};
  1339. }
  1340.  
  1341. .postinner.envee {
  1342. overflow:hidden;
  1343.  
  1344. }
  1345.  
  1346. .postinner, .envee {
  1347. transition:height var(--LongPosts-Expand-Speed) ease-in-out;
  1348. }
  1349.  
  1350. .postinner.envee:after {
  1351. content:"";
  1352. position:absolute;
  1353. bottom:0;left:0;
  1354. width:100%;
  1355. height:calc(var(--Post-Padding) + var(--Captions-Gap));
  1356. background:{color:post};
  1357. z-index:1;
  1358. }
  1359.  
  1360. .ensheet {
  1361. position:absolute;
  1362. bottom:0;
  1363. margin-bottom:calc(var(--Post-Padding) + var(--Captions-Gap));
  1364. left:0;
  1365. width:100%;
  1366. height:69px;
  1367. background:linear-gradient(to bottom, transparent, {color:post});
  1368. z-index:1;
  1369. }
  1370.  
  1371. .lynxy {
  1372. position:absolute;
  1373. bottom:0;margin-bottom:calc(var(--Post-Padding) + 4px);
  1374. left:0;
  1375. width:100%;
  1376. display:flex;
  1377. align-items:center;
  1378. justify-content:center;
  1379. z-index:2;
  1380. }
  1381.  
  1382. .lynxy.nyh a {
  1383. cursor:help;
  1384. }
  1385.  
  1386. .lynxy a {
  1387. padding:0.69em 0.8em;
  1388. background:{color:label bg};
  1389. border-radius:3px;
  1390. font-family:var(--SmallCaps-Font-Family);
  1391. font-size:calc(var(--SmallCaps-Font-Size));
  1392. text-transform:uppercase;
  1393. letter-spacing:.5px;
  1394. color:{color:label text};
  1395. line-height:1em;
  1396. }
  1397.  
  1398. [has-date] .postinner {
  1399. border-radius:{text:post corner roundness} {text:post corner roundness} 0 0;
  1400. }
  1401.  
  1402. .postinner a:not(.reblog-url a, .tumblr_blog, .linkpost-title, .single-photo, .post_media_photo_anchor, .post_media_photo_anchor, .inari, .tagsdiv a, .lynxy a), .msgbby a {
  1403. padding-bottom:.5px;
  1404. border-bottom:1px solid rgba({RGBcolor:link},0.420);
  1405. }
  1406.  
  1407. .pinzz {
  1408. position:absolute;
  1409. margin-top:10px;
  1410. margin-left:10px;
  1411. padding:6px 8px;
  1412. background:{color:label bg};
  1413. border-radius:3px;
  1414. font-family:var(--SmallCaps-Font-Family);
  1415. font-size:var(--SmallCaps-Font-Size);
  1416. text-transform:uppercase;
  1417. letter-spacing:.5px;
  1418. color:{color:label text};
  1419. line-height:1em;
  1420. cursor:default;
  1421. transition:opacity .4s ease-in-out;
  1422. }
  1423.  
  1424. .posts:hover .pinzz {
  1425. opacity:0;
  1426. }
  1427.  
  1428. .postinner b, .postinner strong {
  1429. font-weight:normal;
  1430. -webkit-text-stroke-width:.3px;
  1431. -webkit-text-stroke-color:{color:bold};
  1432. color:{color:bold}!important;
  1433. }
  1434.  
  1435. .postinner i:not([class]), .postinner em:not([class]){
  1436. color:{color:italic};
  1437. }
  1438.  
  1439. .postinner b a,
  1440. .postinner strong a,
  1441. .postinner h1 a,
  1442. .postinner h2 a,
  1443. .postinner h3 a,
  1444. .postinner h4 a,
  1445. .postinner h5 a,
  1446. .postinner h6 a {
  1447. -webkit-text-stroke-width:.3px;
  1448. -webkit-text-stroke-color:{color:link};
  1449. }
  1450.  
  1451. /*---- REBLOG HEAD ----*/
  1452. .reblog-wrap {
  1453. margin:0 calc(0px - var(--Post-Padding));
  1454. padding:0 var(--Post-Padding);
  1455. }
  1456.  
  1457. .reblog-wrap + .reblog-wrap {
  1458. margin-top:var(--Reblogs-Spacing);
  1459. padding-top:var(--Reblogs-Spacing);
  1460. border-top:1px solid var(--Reblogs-Border);
  1461. }
  1462.  
  1463. .reblog-head {
  1464. display:flex;
  1465. align-items:center;
  1466. }
  1467.  
  1468. /*------------*/
  1469.  
  1470. .reblog-head [class*="ph-"]{
  1471. font-size:calc(var(--Body-Font-Size) + 2px);
  1472. color:var(--Reblogger-Username-Color);
  1473. }
  1474.  
  1475. .reblog-head [class*="ph-"] + .reblog-url {
  1476. position:relative;
  1477. margin-left:var(--Reblogger-Avatar-Gap-Right);
  1478. padding-left:calc(var(--Reblogger-Username-Line-Width) + var(--Reblogger-Avatar-Gap-Right));
  1479. }
  1480.  
  1481. .reblog-head [class*="ph-"] + .reblog-url:before {
  1482. content:"";
  1483. position:absolute;
  1484. left:0;
  1485. top:50%;transform:translateY(-50%) perspective(0);
  1486. width:var(--Reblogger-Username-Line-Width);
  1487. height:1px;
  1488. background:var(--Reblogger-Username-Line-Color);
  1489. }
  1490.  
  1491. /*------------*/
  1492.  
  1493. .reblog-url, .reblog-url a, [customize-page="true"] .tumblr_blog {
  1494. font-family:var(--SmallCaps-Font-Family);
  1495. font-size:calc(var(--SmallCaps-Font-Size) + .5px);
  1496. text-transform:uppercase;
  1497. letter-spacing:.7px;
  1498. color:var(--Reblogger-Username-Color);
  1499. }
  1500.  
  1501. .reblog-url .deac {
  1502. margin-left:3px;
  1503. color:var(--Body-Text-Color);
  1504. }
  1505.  
  1506. .reblog-head + .reblog-comment {
  1507. margin-top:calc(0px - var(--Paragraph-Margins) + var(--Reblogger-Avatar-Bottom-Gap));
  1508. }
  1509.  
  1510. /*---- NPF... STUFF ----*/
  1511. figure[data-orig-src] + figure[data-orig-src]{
  1512. margin-top:var(--Photoset-Spacing);
  1513. }
  1514.  
  1515. .tmblr-full video {
  1516. cursor:pointer;
  1517. }
  1518.  
  1519. video::-webkit-media-controls-panel {
  1520. position:absolute;
  1521. bottom:0;
  1522. background:transparent!important;
  1523. width:100%;
  1524. box-sizing:border-box;
  1525. opacity:1!important;
  1526. }
  1527.  
  1528. video::-webkit-media-controls-volume-slider, video::-webkit-media-controls-timeline {
  1529. display:none!important;
  1530. }
  1531.  
  1532. * + .npf-link-block {
  1533. margin-top:10px;
  1534. }
  1535.  
  1536. .npf-link-block {
  1537. margin-top:0px;
  1538. margin-bottom:0;
  1539. border-color:{color:special border}!important;
  1540. border-radius:0!important;
  1541. }
  1542.  
  1543. .npf-link-block + * {
  1544. margin-bottom:var(--Paragraph-Margins);
  1545. }
  1546.  
  1547. .npf-link-block a {
  1548. padding:0!important;
  1549. border:none!important;
  1550. }
  1551.  
  1552. .npf-link-block .title {
  1553. font-family:var(--SmallCaps-Font-Family)!important;
  1554. font-size:calc(var(--SmallCaps-Font-Size) + 4px)!important;
  1555. text-transform:uppercase;
  1556. letter-spacing:.5px;
  1557. color:{color:link}!important;
  1558. line-height:1.7em!important;
  1559. text-shadow:1px 1px 1px rgba(0,0,0,0.1);
  1560. }
  1561.  
  1562. .npf-link-block .bottom {
  1563. background:{color:special background}!important;
  1564. }
  1565.  
  1566. .npf-link-block .description {
  1567. font-family:var(--SmallCaps-Font-Family)!important;
  1568. font-size:calc(var(--SmallCaps-Font-Size) + 2px)!important;
  1569. text-transform:uppercase;
  1570. letter-spacing:.5px;
  1571. color:{color:link}!important;
  1572. -webkit-text-stroke-width:.3px;
  1573. -webkit-text-stroke-color:{color:link};
  1574. line-height:1.7em!important;
  1575. }
  1576.  
  1577. .npf-link-block .site-name {
  1578. text-transform:initial!important;
  1579. font-family:var(--Body-Font-Family)!important;
  1580. font-weight:normal!important;
  1581. font-size:var(--Body-Font-Size)!important;
  1582. color:{color:special text}!important;
  1583. }
  1584.  
  1585. .npf-link-block .description + .site-name {
  1586. margin-top:0;
  1587. }
  1588.  
  1589. .npf-link-block.no-poster .title {
  1590. padding:0.8em!important;
  1591. text-shadow:none!important;
  1592. }
  1593.  
  1594. .npf-link-block.no-poster .title + .bottom {
  1595. border-top:1px solid {color:special border};
  1596. }
  1597.  
  1598. /*---- TEXT POSTS (TITLE) ----*/
  1599. .post-title, .linkpost-title {
  1600. margin-top:2px;
  1601. margin-bottom:0;
  1602. padding:0.8em;
  1603. background:{color:special background};
  1604. border:1px solid {color:special border};
  1605. border-radius:3px;
  1606. font-size:var(--Heading-Font-Size);
  1607. color:{color:special text};
  1608. -webkit-text-stroke-width:0.3px;
  1609. -webkit-text-stroke-color:{color:special text}!important;
  1610. text-align:center;
  1611. }
  1612.  
  1613. .post-title + *, .linkpost-title + * {
  1614. margin-top:var(--Heading-Margins);
  1615. }
  1616.  
  1617. /*---- LINK POSTS (TITLE) ----*/
  1618. .linkpost-title {
  1619. display:flex;
  1620. align-items:center;
  1621. justify-content:space-between;
  1622. color:{color:special text};
  1623. text-align:left;
  1624. }
  1625.  
  1626. .linkpost-title span {
  1627. display:block;
  1628. max-width:calc(100% - (var(--Heading-Font-Size) * 1.1) - 10px - 2px);
  1629. }
  1630.  
  1631. span + .linksym {
  1632. margin-left:10px;
  1633. margin-right:2px;
  1634. }
  1635.  
  1636. .linksym {
  1637. width:calc(var(--Heading-Font-Size) * 1.1);
  1638. height:calc(var(--Heading-Font-Size) * 1.1);
  1639. -webkit-mask-size:contain;
  1640. -webkit-mask-repeat:no-repeat;
  1641. -webkit-mask-position:center;
  1642. -webkit-mask-image:var(--ext);
  1643. background:{color:special text};
  1644. }
  1645.  
  1646. .linkpost-title + .link-excerpt {
  1647. margin-top:-1px;
  1648. }
  1649.  
  1650. .link-excerpt {
  1651. padding:0.8em calc(0.8em + 2px);
  1652. border:1px solid {color:post borders inner};
  1653. }
  1654.  
  1655. .link-excerpt + * {
  1656. margin-top:var(--Heading-Margins);
  1657. }
  1658.  
  1659. .le-host {
  1660. font-family:var(--SmallCaps-Font-Family);
  1661. font-size:var(--SmallCaps-Font-Size);
  1662. text-transform:uppercase;
  1663. letter-spacing:.7px;
  1664. }
  1665.  
  1666. /*---- PHOTO POSTS ----*/
  1667. a.single-photo {
  1668. cursor:pointer;
  1669. }
  1670.  
  1671. img.photopic {
  1672. width:100%;
  1673. }
  1674.  
  1675. [photoset-layout] {
  1676. grid-gap:var(--Photoset-Spacing);
  1677. }
  1678.  
  1679. [photoset-layout] div {
  1680. cursor:pointer;
  1681. backface-visibility:hidden;
  1682. }
  1683.  
  1684. .caption {
  1685. margin-top:var(--Captions-Gap);
  1686. }
  1687.  
  1688. /*----- LIGHTBOX BS -----*/
  1689. .tmblr-lightbox, #tumblr_lightbox {
  1690. background-color:rgba({RGBcolor:post},0.69)!important;
  1691. }
  1692.  
  1693. .tmblr-lightbox .vignette {
  1694. background-image:none!important;
  1695. }
  1696.  
  1697. #vignette {display:none!important}
  1698.  
  1699. .lightbox-image, #tumblr_lightbox_left_image, #tumblr_lightbox_center_image, #tumblr_lightbox_right_image {
  1700. margin-top:calc(0px - var(--Post-Padding));
  1701. }
  1702.  
  1703. .tmblr-lightbox img, #tumblr_lightbox img {
  1704. max-width:initial;
  1705. box-shadow:none!important;
  1706. padding:var(--Post-Padding);
  1707. background:{color:post}!important;
  1708. border:1px solid {color:post borders outer}!important;
  1709. border-radius:{text:post corner roundness}!important;
  1710. }
  1711.  
  1712. /*----- QUOTE POSTS -----*/
  1713. .reblog-comment > p:first-child:empty:has(+ .SHAAAA){
  1714. display:none;
  1715. }
  1716.  
  1717. .SHAAAA {
  1718. position:relative;
  1719. display:flex;
  1720. align-items:center;
  1721. justify-content:center;
  1722. margin-bottom:var(--Heading-Margins);
  1723. --oni:calc(var(--Body-Font-Size) * 1.420);
  1724. --onigap:12px;
  1725. --onilyn:50%;
  1726. }
  1727.  
  1728. .SHAAAA:before {
  1729. content:"";
  1730. position:absolute;
  1731. top:0;margin-top:calc(var(--oni) / 2);
  1732. left:0;margin-left:calc(50% - var(--onilyn));
  1733. width:calc(var(--onilyn) - (var(--oni) / 2) - var(--onigap));
  1734. height:1px;
  1735. transform:perspective(0);
  1736. background:linear-gradient(to right, transparent 0%, {color:post borders inner} 80%, transparent 100%);
  1737. }
  1738.  
  1739. .SHAAAA:after {
  1740. content:"";
  1741. position:absolute;
  1742. top:0;margin-top:calc(var(--oni) / 2);
  1743. right:0;margin-right:calc(50% - var(--onilyn));
  1744. width:calc(var(--onilyn) - (var(--oni) / 2) - var(--onigap));
  1745. height:1px;
  1746. transform:perspective(0);
  1747. background:linear-gradient(to left, transparent 0%, {color:post borders inner} 80%, transparent 100%);
  1748. }
  1749.  
  1750. .SHAAAA [class*="ph-"]{
  1751. display:block;
  1752. font-size:var(--oni);
  1753. line-height:1em;
  1754. color:{color:headings};
  1755. }
  1756.  
  1757.  
  1758. .quote-words, .npf_quote {
  1759. padding:0 var(--Post-Padding);
  1760. font-family:var(--Quote-Font-Family)!important;
  1761. font-size:var(--Quote-Font-Size)!important;
  1762. text-transform:uppercase;
  1763. letter-spacing:.3px;
  1764. text-align:center;
  1765. color:{color:headings};
  1766. -webkit-text-stroke-width:.3px;
  1767. -webkit-text-stroke-color:{color:headings};
  1768. line-height:169%;
  1769. }
  1770.  
  1771. .quote-words + .quote-source,
  1772. .npf_quote + p[style*="margin-bottom: 0px;"]{
  1773. margin-top:var(--Paragraph-Margins);
  1774. text-align:center;
  1775. }
  1776.  
  1777. .quote-words + .quote-source ~ *,
  1778. .npf_quote + p[style*="margin-bottom: 0px;"] ~ * {
  1779. text-align:center;
  1780. }
  1781.  
  1782. /*----- VIDEO POSTS -----*/
  1783. .tmblr-video {
  1784. max-width:initial;
  1785. }
  1786.  
  1787. .tumblr_video_container, .tumblr_video_iframe {
  1788. width:100%!important;
  1789. }
  1790.  
  1791. /*---- CHAT POSTS ----*/
  1792. .reblog-comment > p:first-child:empty:has(+ .chatwrap){
  1793. display:none;
  1794. }
  1795.  
  1796. .reblog-comment > .chatwrap:first-child {
  1797. margin-top:var(--Reblogger-Avatar-Bottom-Gap);
  1798. }
  1799.  
  1800. .chatwrap {
  1801. display:table;
  1802. width:100%;
  1803. border:1px solid var(--Post-Borders-Inner);
  1804. box-sizing:border-box;
  1805. }
  1806.  
  1807. .chat_row {
  1808. position:relative;
  1809. display:table-row;
  1810. overflow:hidden;
  1811. }
  1812.  
  1813. .chat_row:not(:has(.chat_label)){
  1814. display:block;
  1815. width:calc(var(--Post-Width) - 2px);
  1816. margin-right:calc(0px - var(--Post-Width) - 2px);
  1817. }
  1818.  
  1819. .chat_row:after {
  1820. content:"";
  1821. position:absolute;
  1822. bottom:0;left:0;
  1823. transform:translateY(-.5px);
  1824. width:100%;
  1825. height:1px;
  1826. background:var(--Post-Borders-Inner);
  1827. }
  1828.  
  1829. .chatwrap .chat_row:last-child:after {
  1830. display:none;
  1831. }
  1832.  
  1833. .chat_row code:only-child {
  1834. display:block;
  1835. padding:0.8em;
  1836. border:none;
  1837. background:transparent;
  1838. }
  1839.  
  1840. .chat_label {
  1841. display:table-cell;
  1842. padding-right:1em;
  1843. font-family:var(--SmallCaps-Font-Family);
  1844. font-size:var(--SmallCaps-Font-Size);
  1845. text-transform:uppercase;
  1846. letter-spacing:1px;
  1847. }
  1848.  
  1849. .chat_label, .chat_content {
  1850. padding:calc(1em - 2px) 1em;
  1851. }
  1852.  
  1853. .chat_content {
  1854. display:table-cell;
  1855. width:100%;
  1856. }
  1857.  
  1858. .chat_label + .chat_content {
  1859. border-left:1px solid var(--Post-Borders-Inner);
  1860. }
  1861.  
  1862. .chat_row .chat_label + .chat_content {
  1863. min-width:calc((var(--Post-Width) - 3px) / 2);
  1864. box-sizing:border-box;
  1865. }
  1866.  
  1867. /*---- AUDIO POSTS ----*/
  1868. .audio-post .npf_inst img {
  1869. width:100%;
  1870. }
  1871.  
  1872. .aud-emb {display:none}
  1873.  
  1874. .audiowrap {
  1875. display:flex;
  1876. align-items:center;
  1877. }
  1878.  
  1879. .albumwrap {
  1880. position:relative;
  1881. width:var(--Audio-Post-Album-Size);
  1882. height:var(--Audio-Post-Album-Size);
  1883. display:flex;
  1884. align-items:center;
  1885. justify-content:center;
  1886. }
  1887.  
  1888. .albumwrap[has-cover] .audplac {display:none}
  1889.  
  1890. .butts {
  1891. width:calc(var(--Audio-Post-Buttons-Size) + (var(--Audio-Post-Buttons-Padding) * 2));
  1892. height:calc(var(--Audio-Post-Buttons-Size) + (var(--Audio-Post-Buttons-Padding) * 2));
  1893. background:var(--Audio-Post-Buttons-Background);
  1894. border-radius:100%;
  1895. display:flex;
  1896. align-items:center;
  1897. justify-content:center;
  1898. cursor:pointer;
  1899. z-index:2;
  1900. }
  1901.  
  1902. .overplay, .overpause {
  1903. width:var(--Audio-Post-Buttons-Size);
  1904. height:var(--Audio-Post-Buttons-Size);
  1905. -webkit-mask-size:contain;
  1906. -webkit-mask-repeat:no-repeat;
  1907. -webkit-mask-position:center;
  1908. background:var(--Audio-Post-Buttons-Color);
  1909. }
  1910.  
  1911. .overplay {
  1912. margin-left:2px;
  1913. -webkit-mask-image:var(--audioplay);
  1914. }
  1915.  
  1916. .overpause {
  1917. display:none;
  1918. -webkit-mask-image:var(--audiopause);
  1919. }
  1920.  
  1921. .ov-y {display:block}
  1922. .ov-z {display:none}
  1923.  
  1924. .audplac {
  1925. position:absolute;
  1926. top:0;left:0;
  1927. width:var(--Audio-Post-Album-Size);
  1928. height:var(--Audio-Post-Album-Size);
  1929. background:var(--Audio-Post-Buttons-Background);
  1930. }
  1931.  
  1932. .albumwrap img {
  1933. position:absolute;
  1934. top:0;left:0;
  1935. width:100%;
  1936. height:100%;
  1937. }
  1938.  
  1939. .audiotxt {
  1940. flex:1;
  1941. height:var(--Audio-Post-Album-Size);
  1942. padding:var(--Audio-Post-Album-Right-Gap);
  1943. background:{color:special background};
  1944. display:flex;
  1945. align-items:center;
  1946. box-sizing:border-box;
  1947. display:flex;
  1948. align-items:center;
  1949. justify-content:space-between;
  1950. --AUD-Font-Size:calc(var(--Body-Font-Size) - 1px);
  1951. font-size:var(--AUD-Font-Size);
  1952. color:{color:special text};
  1953. line-height:var(--Line-Height);
  1954. --flesk:calc(((var(--AUD-Font-Size) * var(--Line-Height-INT)) - var(--AUD-Font-Size)) / 2);
  1955. }
  1956.  
  1957. .odin div {
  1958. margin:calc(0px - var(--flesk)) 0;
  1959. }
  1960.  
  1961. .odin div + div {
  1962. margin-top:3px;
  1963. }
  1964.  
  1965. .aud-song-name, .npf-audio-title {
  1966. font-family:var(--SmallCaps-Font-Family);
  1967. font-size:calc(var(--Body-Font-Size) - 2px);
  1968. text-transform:uppercase;
  1969. letter-spacing:.5px;
  1970. -webkit-text-stroke-width:.3px;
  1971. -webkit-text-stroke-color:{color:special text};
  1972. }
  1973.  
  1974. .aud-song-name[has-name] .untit {
  1975. display:none;
  1976. }
  1977.  
  1978. .aud-artist[has-artist] .unart {
  1979. display:none;
  1980. }
  1981.  
  1982. .inari {
  1983. display:block;
  1984. padding:6px;
  1985. margin-right:-6px;
  1986. cursor:pointer;
  1987. }
  1988.  
  1989. .int-all {
  1990. display:block;
  1991. width:calc(var(--Audio-Post-Buttons-Size) + 4px);
  1992. height:calc(var(--Audio-Post-Buttons-Size) + 4px);
  1993. -webkit-mask-size:contain;
  1994. -webkit-mask-repeat:no-repeat;
  1995. -webkit-mask-position:center;
  1996. -webkit-mask-image:var(--install);
  1997. background:var(--Audio-Post-Download-Color);
  1998. }
  1999.  
  2000. /*---- SPOTIFY ----*/
  2001. iframe[src*='open.spotify.com'][src*='track'], figure[data-npf*='open.spotify.com'][data-npf*='track']{
  2002. height:80px!important;
  2003. }
  2004.  
  2005. .spotify_audio_player {
  2006. width:100%;
  2007. }
  2008.  
  2009. /*---- SOUNDCLOUD ----*/
  2010. .tmblr-video iframe[src*='soundcloud.com']{
  2011. }
  2012.  
  2013. .audio-soundcloud {
  2014. max-height:113px;
  2015. border-radius:4px;
  2016. overflow:hidden;
  2017. }
  2018.  
  2019. .soundcloud_audio_player {
  2020. margin:-1px;
  2021. margin-bottom:0;
  2022. width:calc(100% + 2px);
  2023. max-width:initial;
  2024. }
  2025.  
  2026. /*---- ASK/ANSWER POSTS ----*/
  2027. .une_question {
  2028. display:flex;
  2029. }
  2030.  
  2031. .asker-person {
  2032. align-self:baseline;
  2033. }
  2034.  
  2035. .une_question .reblog-comment {
  2036. flex:1;
  2037. margin-left:12px;
  2038. }
  2039.  
  2040. .askpot {
  2041. padding:var(--AskerPortrait-Padding);
  2042. background:{color:special background};
  2043. border:1px solid {color:special border};
  2044. }
  2045.  
  2046. .asker-person img {
  2047. width:var(--AskerPortrait-Size);
  2048. height:var(--AskerPortrait-Size);
  2049. border-radius:0;
  2050. }
  2051.  
  2052. .une_question .reblog-url {
  2053. margin-top:1px;
  2054. padding:3px 4px;
  2055. background:{color:special background};
  2056. border:1px solid {color:special border};
  2057. border-radius:2px;
  2058. color:{color:special text};
  2059. }
  2060.  
  2061. .question_text > p:first-child {
  2062. margin-top:4px;
  2063. }
  2064.  
  2065. .question_text > p:only-child {
  2066. margin-bottom:0;
  2067. }
  2068.  
  2069. .answerer + * {
  2070. margin-top:var(--Captions-Gap);
  2071. }
  2072.  
  2073. .une_question + .une_reponse {
  2074. margin-top:var(--Paragraph-Margins);
  2075. }
  2076.  
  2077. /*---- TAGS SECTION ----*/
  2078. .tagsdiv {
  2079. margin-top:var(--Captions-Gap);
  2080. }
  2081.  
  2082. .tagsdiv[clicktags="yes"] {
  2083. {block:IndexPage}
  2084. display:none;
  2085. opacity:0;
  2086. transition:opacity var(--Tags-Fade-Speed-MS-SFX) ease-in-out;
  2087. {/block:IndexPage}
  2088. }
  2089.  
  2090. .tagsfade {
  2091. opacity:1!important;
  2092. }
  2093.  
  2094. .tagsin {
  2095. display:flex;
  2096. flex-wrap:wrap;
  2097. justify-content:flex-end;
  2098. margin:calc(0px - var(--Tags-Spacing));
  2099. /*margin-top:calc(var(--Captions-Gap) - var(--Tags-Spacing));*/
  2100. margin-bottom:calc((((var(--SmallCaps-Font-Size) - 1px) * var(--Line-Height-INT)) / 2) * -1);
  2101. }
  2102.  
  2103. .tagsin a {
  2104. position:relative;
  2105. display:block;
  2106. margin:0 var(--Tags-Spacing);
  2107. font-family:var(--SmallCaps-Font-Family);
  2108. font-size:calc(var(--SmallCaps-Font-Size) - 1px);
  2109. text-transform:uppercase;
  2110. letter-spacing:.7px;
  2111. color:{color:tags};
  2112. }
  2113.  
  2114. .tagsin a:before {
  2115. content:"#";
  2116. font-family:work sans;
  2117. margin-right:.5px;
  2118. }
  2119.  
  2120. /*---- PERMALINK BAR ----*/
  2121. .permadiv {
  2122. margin-top:-1px;
  2123. display:flex;
  2124. align-items:center;
  2125. justify-content:space-between;
  2126. padding:calc(var(--Permalink-Padding) - 2px) calc(var(--Post-Padding) + 1px);
  2127. background:{color:permalink background};
  2128. border:1px solid {color:post borders outer};
  2129. border-top:1px solid {color:permalink border};
  2130. border-radius:0 0 {text:post corner roundness} {text:post corner roundness};
  2131.  
  2132. font-family:var(--SmallCaps-Font-Family);
  2133. font-size:var(--Permalink-Text-Size);
  2134. text-transform:uppercase;
  2135. letter-spacing:.5px;
  2136. }
  2137.  
  2138. .permadiv, .permadiv a {
  2139. color:{color:permalink text};
  2140. }
  2141.  
  2142. .permaleft {
  2143. text-transform:uppercase;
  2144. letter-spacing:.7px;
  2145. word-spacing:1px;
  2146. }
  2147.  
  2148. .permaleft a {
  2149. display:flex;
  2150. align-items:center;
  2151. margin:calc(0px - var(--Post-Padding));
  2152. margin-right:0;
  2153. padding:var(--Post-Padding);
  2154. padding-right:2px;
  2155. }
  2156.  
  2157. .permaleft .aa-line-icons {
  2158. display:block;
  2159. align-items:center;
  2160. --Line-Icons-Size:calc(var(--Permalink-Text-Size) + 3px);
  2161. --Line-Icons-Color:{color:permalink text};
  2162. margin-right:7px;
  2163. }
  2164.  
  2165. .pin-ah + .aa-line-icons {
  2166. display:none;
  2167. }
  2168.  
  2169. .permaleft .nc-ah {
  2170. --Line-Icons-Size:var(--Permalink-Text-Size);
  2171. margin-left:3px;
  2172. margin-right:0;
  2173. }
  2174.  
  2175. .permaright {
  2176. display:flex;
  2177. align-items:center;
  2178. justify-content:center;
  2179. }
  2180.  
  2181. .permaright a {
  2182. display:block;
  2183. position:relative;
  2184. {block:IndexPage}
  2185. width:var(--Post-Buttons-Size);
  2186. height:var(--Post-Buttons-Size);
  2187. {/block:IndexPage}
  2188. backface-visibility:hidden;
  2189. }
  2190.  
  2191. .permaright .iconsax {
  2192. display:block;
  2193. --Iconsax-Size:var(--Post-Buttons-Size);
  2194. --Iconsax-Color:var(--Post-Buttons-Color);
  2195. backface-visibility:hidden;
  2196. }
  2197.  
  2198. .permaright .iconsax[icon-name='repeat']{
  2199. transform-origin:center;
  2200. transform:scaleX(1.1);
  2201. }
  2202.  
  2203. .permaright .cp {
  2204. padding-left:1px;
  2205. font-size:var(--Post-Buttons-Size);
  2206. color:var(--Post-Buttons-Color);
  2207. }
  2208.  
  2209. .permaright span {display:block}
  2210.  
  2211. .permaright a + a {
  2212. margin-left:var(--Post-Buttons-Spacing);
  2213. }
  2214.  
  2215. .permaright[clicktags="no"] .clicktags {
  2216. display:none;
  2217. }
  2218.  
  2219. .clicktags {
  2220. cursor:help;
  2221. }
  2222.  
  2223. .like_button {
  2224. position:absolute;
  2225. top:0;left:0;
  2226. width:100%;
  2227. height:100%;
  2228. z-index:2;
  2229. }
  2230.  
  2231. .like_button iframe {
  2232. width:100%;
  2233. height:100%;
  2234. vertical-align:initial;
  2235. opacity:0;
  2236. }
  2237.  
  2238. .like_button.liked + .cp-heart-o {
  2239. color:var(--Like-Button-Liked);
  2240. }
  2241.  
  2242. .permaright a[dash]{
  2243. font-size:calc(var(--SmallCaps-Font-Size) + 1px);
  2244. }
  2245.  
  2246. /*---- POST NOTES ----*/
  2247. .notescont {
  2248. margin-top:var(--Post-Spacing);
  2249. padding:var(--Post-Padding);
  2250. background:{color:post};
  2251. border:1px solid {color:post borders outer};
  2252. border-radius:{text:post corner roundness};
  2253. }
  2254.  
  2255. .notescont h1 {
  2256. margin-top:5px;
  2257. margin-bottom:calc(var(--Heading-Margins) + 2px);
  2258. letter-spacing:1px;
  2259. text-align:center;
  2260. }
  2261.  
  2262. .notescont ol.notes {
  2263. padding:0;
  2264. margin:0;
  2265. }
  2266.  
  2267. .notescont li {
  2268. list-style-type:none;
  2269. padding:0!important;
  2270. line-break:anywhere;
  2271. }
  2272.  
  2273. .notescont li + li {
  2274. margin-top:var(--Notes-Row-Spacing);
  2275. }
  2276.  
  2277. .notescont li:before {
  2278. font-family:phosphor;
  2279. font-size:var(--Notes-Indicator-Size);
  2280. color:{color:text};
  2281. vertical-align:middle;
  2282. }
  2283.  
  2284. .notescont li.like:before {
  2285. content:"\f1ca";
  2286. }
  2287.  
  2288. .notescont li.reblog:before {
  2289. content:"\f2c3";
  2290. }
  2291.  
  2292. .notescont li.reply:before,
  2293. .notescont li.with_commentary:before {
  2294. content:"\f0db"!important;
  2295. }
  2296.  
  2297. .notescont li.original_post:before {
  2298. content:"\f0da";
  2299. }
  2300.  
  2301. .notescont .avatar_frame {
  2302. display:none;
  2303. }
  2304.  
  2305. .notescont .avatar_frame + .action {
  2306. margin-left:var(--Notes-Indicator-Gap-Right);
  2307. }
  2308.  
  2309. .notescont .action a {
  2310. font-family:var(--SmallCaps-Font-Family);
  2311. font-size:calc(var(--SmallCaps-Font-Size) - 0px);
  2312. text-transform:uppercase;
  2313. letter-spacing:.7px;
  2314. color:var(--Reblogger-Username-Color);
  2315. }
  2316.  
  2317. .notescont blockquote {
  2318. margin-left:calc(var(--Notes-Indicator-Size) / 2);
  2319. padding-left:calc((var(--Notes-Indicator-Size) / 2) + var(--Notes-Indicator-Gap-Right));
  2320. }
  2321.  
  2322. .more_notes_link_container {
  2323. margin-top:1em!important;
  2324. margin-bottom:calc(var(--Paragraph-Margins) / 2);
  2325. }
  2326.  
  2327. .more_notes_link, .notes_loading {
  2328. font-family:var(--SmallCaps-Font-Family);
  2329. font-size:calc(var(--SmallCaps-Font-Size) + 1px);
  2330. text-transform:uppercase;
  2331. letter-spacing:.5px;
  2332. color:{color:link};
  2333. }
  2334.  
  2335. /*---- MUSIC PLAYER ----*/
  2336. .m-usicplayer {
  2337. position:fixed;
  2338. bottom:0;margin-bottom:var(--MusicPlayer-Corner-Offset);
  2339. left:0;margin-left:var(--MusicPlayer-Corner-Offset);
  2340. z-index:20;
  2341. }
  2342.  
  2343. .wwwh {
  2344. display:flex;
  2345. align-items:center;
  2346. }
  2347.  
  2348. .m-usicplayer [class*="ph-"]{
  2349. display:block;
  2350. font-size:var(--MusicPlayer-Buttons-Size);
  2351. color:{color:musicplayer buttons};
  2352. line-height:0;
  2353. }
  2354.  
  2355. .pl-c {display:block;}
  2356. .pa-c {display:none;}
  2357.  
  2358. .bhh {display:none;}
  2359. .bhz {display:block;}
  2360.  
  2361. .sngsym {
  2362. height:calc(var(--MusicPlayer-Buttons-Size));
  2363. display:flex;
  2364. align-items:center;
  2365. margin-left:var(--MusicPlayer-Note-Left-Gap);
  2366. --Line-Icons-Size:calc(var(--MusicPlayer-Buttons-Size) - 3px);
  2367. --Line-Icons-Color:{color:musicplayer note};
  2368. }
  2369.  
  2370. .sngtxt {
  2371. margin-left:var(--MusicPlayer-Text-Left-Gap);
  2372. font-family:var(--SmallCaps-Font-Family);
  2373. font-size:var(--MusicPlayer-Text-Size);
  2374. text-transform:uppercase;
  2375. letter-spacing:.3px;
  2376. word-spacing:.7px;
  2377. color:{color:musicplayer text};
  2378. line-height:var(--MusicPlayer-Buttons-Size);
  2379. }
  2380.  
  2381. .sngtxt a {
  2382. color:{color:musicplayer link};
  2383. padding-bottom:.5px;
  2384. border-bottom:1px solid rgba({RGBcolor:musicplayer link},0.420);
  2385. }
  2386.  
  2387. /*---- OTHER ----*/
  2388. .healsdeez {
  2389. position:fixed;
  2390. display:block;
  2391. bottom:0;right:0;
  2392. padding-bottom:8px;
  2393. padding-right:16px;
  2394. z-index:20;
  2395. }
  2396.  
  2397. .healsdeez {
  2398. width:38px;
  2399. filter:hue-rotate(-27deg) brightness(110%) contrast(95%) saturate(80%);
  2400. }
  2401.  
  2402. .msgbby {
  2403. position:fixed;
  2404. top:0;margin-top:calc(var(--TopBar-Height) + 18px);
  2405. left:0;margin-left:18px;
  2406. width:225px;
  2407. padding:10px 12px;
  2408. background:{color:post};
  2409. border:1px solid {color:post borders outer};
  2410. border-radius:{text:post corner roundness};
  2411. box-shadow:3px 3px 14px rgba({RGBcolor:post borders outer},40%);
  2412. animation:wheee 0.69s ease-in-out;
  2413. animation-fill-mode:forwards;
  2414. line-height:169%;
  2415. z-index:20;
  2416. }
  2417.  
  2418. @keyframes wheee {
  2419. 0% {margin-left:-100%;}
  2420. 100% {margin-left:18px;}
  2421. }
  2422.  
  2423. .msgbby {
  2424. visibility:visible;
  2425. }
  2426.  
  2427. {CustomCSS}
  2428. </style>
  2429.  
  2430. </head>
  2431.  
  2432. <!--------------------------------------------------->
  2433.  
  2434. <body>
  2435.  
  2436. <!---- MUSIC PLAYER ---->
  2437. {block:ifmusicfile}
  2438. <div class="m-usicplayer" volume="{text:music volume}">
  2439. <div class="wwwh">
  2440. <div class="cciuq">
  2441. <div class="pl-c">
  2442. <i class="ph-play-bold"></i>
  2443. </div>
  2444.  
  2445. <div class="pa-c">
  2446. <i class="ph-pause-bold"></i>
  2447. </div>
  2448. </div>
  2449.  
  2450. <i class="sngsym aa-line-icons" icon-name="music-2"></i>
  2451.  
  2452. <div class="sngtxt">{text:music name}</div>
  2453.  
  2454. <audio src="{text:music file}"></audio>
  2455. </div>
  2456. </div>
  2457. {/block:ifmusicfile}
  2458.  
  2459.  
  2460. <!---- TOP BAR ---->
  2461. <div class="topbar"></div>
  2462.  
  2463. <!---- MAIN CONTAINER ---->
  2464. <div class="vojjg">
  2465. <div class="uqune">
  2466.  
  2467. <!---- LEFT SIDEBAR ---->
  2468. <div class="jinbar">
  2469. <div class="uoooo">
  2470.  
  2471. <!------ SIDEBAR IMAGE ------>
  2472. <div class="sb-img-cont" deez="{image:sidebar image}">
  2473. <img src="{image:sidebar image}">
  2474. </div>
  2475.  
  2476. <!------ SIDEBAR TITLE ------>
  2477. {block:ifsidebartitle}
  2478. <div class="sb-title" sbt-font="{select:sidebar title font}">
  2479. {text:sidebar title}
  2480. </div>
  2481. {/block:ifsidebartitle}
  2482.  
  2483. <!------ DESCRIPTION (original vs custom) ------>
  2484. {block:ifdescription}
  2485. <div class="desc" desctf="{select:desc font}">
  2486. <div class="dyn">
  2487. {text:description}
  2488. </div>
  2489. </div>
  2490. {/block:ifdescription}
  2491.  
  2492. {block:ifnotdescription}
  2493. {block:Description}
  2494. <div class="desc" desctf="{select:desc font}">
  2495. <div class="dyn">
  2496. {Description}
  2497. </div>
  2498. </div>
  2499. {/block:ifdescription}
  2500. {/block:Description}
  2501. {/block:ifnotdescription}
  2502.  
  2503. <!------ NAVLINKS ------>
  2504. <div class="navlinks">
  2505. <a href="//{Name}.tumblr.com" title="home"></a>
  2506. <a href="//{Name}.tumblr.com/ask" title="askbox"></a>
  2507. <a href="//{Name}.tumblr.com/archive" title="archive"></a>
  2508.  
  2509. <!-- you CAN change the sidebar credit to something else! -->
  2510. <!-- just don't remove the whale credit in the corner! -->
  2511. <!-- only 4 links in total please! -->
  2512. <a href="//glenthemes.tumblr.com" title="&quot;whimsical&quot; theme by glenthemes &#x266A;(^&#x2207;^*)"></a>
  2513. </div><!--end navlinks-->
  2514.  
  2515. <!------ CUSTOM LINKS ------>
  2516. <div class="customlinks">
  2517. {block:ifcustomlink1name}
  2518. <a class="honeydew" href="{text:customlink 1 url}">
  2519. <span num>001.</span>
  2520. <span le-line></span>
  2521. <span cltxt>{text:customlink 1 name}</span>
  2522. </a>
  2523. {/block:ifcustomlink1name}
  2524.  
  2525. {block:ifcustomlink2name}
  2526. <a class="honeydew" href="{text:customlink 2 url}">
  2527. <span num>002.</span>
  2528. <span le-line></span>
  2529. <span cltxt>{text:customlink 2 name}</span>
  2530. </a>
  2531. {/block:ifcustomlink2name}
  2532.  
  2533. {block:ifcustomlink3name}
  2534. <a class="honeydew" href="{text:customlink 3 url}">
  2535. <span num>003.</span>
  2536. <span le-line></span>
  2537. <span cltxt>{text:customlink 3 name}</span>
  2538. </a>
  2539. {/block:ifcustomlink3name}
  2540.  
  2541. {block:ifcustomlink4name}
  2542. <a class="honeydew" href="{text:customlink 4 url}">
  2543. <span num>004.</span>
  2544. <span le-line></span>
  2545. <span cltxt>{text:customlink 4 name}</span>
  2546. </a>
  2547. {/block:ifcustomlink4name}
  2548.  
  2549. {block:ifcustomlink5name}
  2550. <a class="honeydew" href="{text:customlink 5 url}">
  2551. <span num>005.</span>
  2552. <span le-line></span>
  2553. <span cltxt>{text:customlink 5 name}</span>
  2554. </a>
  2555. {/block:ifcustomlink5name}
  2556.  
  2557. {block:ifcustomlink6name}
  2558. <a class="honeydew" href="{text:customlink 6 url}">
  2559. <span num>006.</span>
  2560. <span le-line></span>
  2561. <span cltxt>{text:customlink 6 name}</span>
  2562. </a>
  2563. {/block:ifcustomlink6name}
  2564. </div><!--end customlinks-->
  2565.  
  2566. <!------ SEARCHBAR ------>
  2567. <div class="mr-starch" m7="{select:show searchbar}">
  2568. <form action="/search" method="get">
  2569. <input type="text" name="q" value="{SearchQuery}" placeholder="{text:searchbar text}" autocomplete="off">
  2570.  
  2571. <button class="fetchh" type="submit">
  2572. <i class="aa-line-icons" icon-name="search"></i>
  2573. </button>
  2574. </form>
  2575. </div><!--end searchbar-->
  2576.  
  2577. <!------ PAGINATION (sidebar) ------>
  2578. {block:Pagination}
  2579. <div class="sbpagi" brd="{select:pagination border}">
  2580. <a{block:PreviousPage} href="{PreviousPage}" title="previous page"{/block:PreviousPage} class="sbarlynk">
  2581. <i class="ph-caret-left-bold"></i>
  2582. <i class="ph-caret-left-bold"></i>
  2583. </a>
  2584.  
  2585. <div class="sbp-mid">
  2586. {block:JumpPagination length="6"}
  2587.  
  2588. {block:CurrentPage}
  2589. <a class="curpagi" title="you are here (page {CurrentPage})">&#215;</a>
  2590. {/block:CurrentPage}
  2591.  
  2592. {block:JumpPage}
  2593. <a class="othernumz" href="{URL}">{PageNumber}</a>
  2594. {/block:JumpPage}
  2595.  
  2596. {/block:JumpPagination}
  2597. </div>
  2598.  
  2599. <a{block:NextPage} href="{NextPage}" title="next page"{/block:NextPage} class="sbarlynk">
  2600. <i class="ph-caret-right-bold"></i>
  2601. <i class="ph-caret-right-bold"></i>
  2602. </a>
  2603.  
  2604. </div><!--sbpagi-->
  2605. {/block:Pagination}
  2606.  
  2607. </div><!--end sidebar, part 1/2-->
  2608. </div><!--end sidebar, part 2/2-->
  2609.  
  2610. <!---- POST CONTAINER ---->
  2611. <div class="postscont" black-and-white="{select:grayscale images}">
  2612.  
  2613. {block:Posts inlineMediaWidth="1280" inlineNestedMediaWidth="1280"}
  2614. <div class="posts {PostType}-post" id="{PostID}" post-type="{PostType}" {block:NotReblog}original-post{/block:NotReblog} {block:RebloggedFrom}reblogged-post{/block:RebloggedFrom} {block:Date}has-date{/block:Date} post-url="{ShortURL}">
  2615.  
  2616. <div class="postinner">
  2617.  
  2618. {block:IndexPage}
  2619. {block:PinnedPostLabel}
  2620. <div class="pinzz">&#10023; pinned post &#10023;</div>
  2621. {/block:PinnedPostLabel}
  2622. {/block:IndexPage}
  2623.  
  2624. <!------ POST TITLE ------>
  2625. {block:Title}
  2626. <h1 class="post-title">{Title}</h1>
  2627. {/block:Title}
  2628.  
  2629. <!------ TEXT POSTS ------>
  2630. {block:Text}
  2631. {block:NotReblog}{Body}{/block:NotReblog}
  2632. {block:RebloggedFrom}
  2633. {block:Reblogs}
  2634. <div class="reblog-wrap">
  2635. <div class="reblog-head source-head">
  2636. <i class="ph-user"></i>
  2637. <span class="reblog-url">
  2638. <a href="{Permalink}">{Username}</a>
  2639. </span>
  2640. </div>
  2641. <div class="reblog-comment">{Body}</div>
  2642. </div>
  2643. {/block:Reblogs}
  2644. {/block:RebloggedFrom}
  2645. {/block:Text}
  2646.  
  2647. <!------ SINGLE PHOTO ------>
  2648. {block:Photo}
  2649. <a class="single-photo" onclick="Tumblr.Lightbox.init([{ width:{PhotoWidth-HighRes}, height:{PhotoHeight-HighRes}, low_res:'{PhotoURL-500}', high_res:'{PhotoURL-HighRes}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false"><img class="photopic" src="{PhotoURL-HighRes}" alt="{PhotoAlt}"></a>
  2650. {/block:Photo}
  2651.  
  2652. <!------ PHOTOSETS ------>
  2653. {block:Photoset}<div class="photoset-grid" photoset-layout="{PhotosetLayout}">{block:Photos}<div data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" data-lowres="{PhotoURL-500}" data-highres="{PhotoURL-HighRes}" onclick="lightbox(this)"><img src="{PhotoURL-HighRes}" /></div>{/block:Photos}</div>{/block:Photoset}
  2654.  
  2655. <!------ QUOTE POSTS ------>
  2656. {block:Quote}
  2657. <div class="SHAAAA">
  2658. <i class="ph-quotes"></i>
  2659. </div>
  2660.  
  2661. <div class="quote-words">{Quote}</div>
  2662. {block:Source}
  2663. <div class="quote-source">
  2664. <span mdash>&mdash;</span>
  2665. {Source}
  2666. </div>{/block:Source}
  2667. {/block:Quote}
  2668.  
  2669. <!------ LINK POSTS ------>
  2670. {block:Link}
  2671. <a class="linkpost-title" href="{URL}" {Target}>
  2672. <span>{Name}</span>
  2673. <div class="linksym"></div>
  2674. </a>
  2675.  
  2676. {block:Excerpt}
  2677. <div class="link-excerpt">
  2678. {Excerpt}
  2679. {block:Host}— <a class="le-host" href="{URL}" {Target}>{Host}</a>{/block:Host}
  2680. </div>
  2681. {/block:Excerpt}
  2682.  
  2683. {block:Description}
  2684. <div class="link-description">
  2685. {block:NotReblog}{Description}{/block:NotReblog}
  2686. {block:RebloggedFrom}
  2687. {block:Reblogs}
  2688. <div class="reblog-wrap">
  2689. <div class="reblog-head">
  2690. <i class="ph-user"></i>
  2691. <span class="reblog-url">
  2692. <a href="{Permalink}">{Username}</a>
  2693. </span>
  2694. </div>
  2695. <div class="reblog-comment">{Body}</div>
  2696. </div>
  2697. {/block:Reblogs}
  2698. {/block:RebloggedFrom}
  2699. </div>
  2700. {/block:Description}
  2701. {/block:Link}
  2702.  
  2703. <!------ CHAT POSTS ------>
  2704. {block:Chat}
  2705. <div class="chatwrap">
  2706. {block:Lines}
  2707. <div class="chat_row">
  2708. {block:Label}
  2709. <div class="chat_label">{Label}</div>
  2710. {/block:Label}
  2711.  
  2712. <div class="chat_content">
  2713. {Line}
  2714. </div>
  2715. </div>
  2716. {/block:Lines}
  2717. </div>
  2718. {/block:Chat}
  2719.  
  2720. <!------ AUDIO POSTS ------>
  2721. {block:Audio}
  2722. <div class="audiowrap">
  2723. {block:AudioPlayer}
  2724. <div class="aud-emb">
  2725. {AudioPlayer}
  2726. </div>
  2727. {/block:AudioPlayer}
  2728.  
  2729. <div class="albumwrap" {block:AlbumArt}has-cover{/block:AlbumArt}>
  2730. {block:AlbumArt}
  2731. <img src="{AlbumArtURL}">
  2732. {/block:AlbumArt}
  2733.  
  2734. <div class="audplac"></div>
  2735.  
  2736. <div class="butts">
  2737. <div class="overplay"></div>
  2738. <div class="overpause"></div>
  2739. </div>
  2740. </div>
  2741.  
  2742. <div class="audiotxt">
  2743. <div class="odin">
  2744.  
  2745. <div class="aud-song-name" {block:TrackName}has-name{/block:TrackName}>
  2746. <div class="untit">Untitled track</div>
  2747.  
  2748. {block:TrackName}
  2749. <div class="hastit">{TrackName}</div>
  2750. {/block:TrackName}
  2751. </div>
  2752.  
  2753. {block:Album}
  2754. <div class="aud-album-name">{Album}</div>
  2755. {/block:Album}
  2756.  
  2757. <div class="aud-artist" {block:Artist}has-artist{/block:Artist}>
  2758. <div class="unart">Unknown artist</div>
  2759.  
  2760. {block:Artist}
  2761. <div class="hasart">{Artist}</div>
  2762. {/block:Artist}
  2763. </div>
  2764. </div><!--odin-->
  2765.  
  2766. <a class="inari" title="download" target="_blank">
  2767. <span class="int-all"></span>
  2768. </a>
  2769. </div><!--audiotxt-->
  2770. </div><!--audiowrap-->
  2771. {/block:Audio}
  2772.  
  2773. <!------ VIDEO POSTS ------>
  2774. {block:Video}
  2775. <div class="tmblr-video">{Video-500}</div>
  2776. {/block:Video}
  2777.  
  2778. <!------ ANSWER POSTS ------>
  2779. {block:Answer}
  2780. <!-- who asked? -->
  2781. <div class="reblog-wrap une_question">
  2782. <div class="asker-person reblog-head">
  2783. <div class="askpot">
  2784. <img src="{AskerPortraitURL-64}">
  2785. </div>
  2786.  
  2787. </div>
  2788.  
  2789. <div class="reblog-comment">
  2790. <span class="reblog-url">{Asker} asked:</span>
  2791. <div class="question_text">{Question}</div>
  2792. </div>
  2793. </div>
  2794.  
  2795. <!--------------------------------------->
  2796.  
  2797. <!-- who answered? -->
  2798. {block:Answerer}
  2799. <div class="reblog-wrap une_reponse">
  2800. <div class="answerer reblog-head">
  2801. <i class="ph-user"></i>
  2802. <span class="reblog-url">{Answerer} answered:</span>
  2803. </div>
  2804. <p class="answer_text">{Answer}</p>
  2805. </div>
  2806.  
  2807. <!-- additional reblogs to the ask post -->
  2808. {block:Reblogs}
  2809. <div class="reblog-wrap reply_container">
  2810. <div class="replier reblog-head">
  2811. <i class="ph-user"></i>
  2812. <span class="reblog-url">
  2813. <a href="{Permalink}">{Username}</a>
  2814. </span>
  2815. </div>
  2816. <div class="reply">{Body}</div>
  2817. </div>
  2818. {/block:Reblogs}
  2819. {/block:Answerer}
  2820.  
  2821. <!--------------------------------------->
  2822.  
  2823. <!-- original answer post -->
  2824. {block:NotReblog}
  2825. <div class="reblog-wrap une-reponse">
  2826. <div class="answerer reblog-head">
  2827. <i class="ph-user"></i>
  2828. <span class="reblog-url">
  2829. <a href="{Permalink}">{Name}</a>
  2830. </span>
  2831. </div>
  2832.  
  2833. <div class="answer_text">{Answer}</div>
  2834. </div><!--answer-container-->
  2835. {/block:NotReblog}
  2836. {/block:Answer}
  2837. <!------ END ANSWER ------>
  2838.  
  2839. <!------ 'CAPTION'? ------>
  2840. {block:Caption}
  2841. <div class="caption">
  2842. {block:NotReblog}{Caption}{/block:NotReblog}
  2843. {block:RebloggedFrom}
  2844. {block:Reblogs}
  2845. <div class="reblog-wrap">
  2846. <div class="reblog-head">
  2847. <i class="ph-user"></i>
  2848. <span class="reblog-url">
  2849. <a href="{Permalink}">{Username}</a>
  2850. </span>
  2851. </div><!--reblog-head-->
  2852. <div class="reblog-comment">{Body}</div>
  2853. </div><!--comment-container-->
  2854. {/block:Reblogs}
  2855. {/block:RebloggedFrom}
  2856. </div><!--caption-->
  2857. {/block:Caption}
  2858.  
  2859.  
  2860. <!------ TAGS ------>
  2861. {block:HasTags}
  2862. <div class="tagsdiv" clicktags="{select:toggle tags}">
  2863. <div class="tagsin">
  2864. {block:Tags}
  2865. <a href="{TagURL}">{Tag}</a>
  2866. {/block:Tags}
  2867. </div>
  2868. </div>
  2869. {/block:HasTags}
  2870. </div><!--postinner-->
  2871.  
  2872. <!------ PERMALINK ------>
  2873. {block:Date}
  2874. <div class="permadiv">
  2875. <div class="permaleft">
  2876. <a {block:IndexPage}href="{Permalink}" title="{block:PinnedPostLabel}pinned post&ensp;&#10023;&ensp;{/block:PinnedPostLabel}{TimeAgo}"{/block:IndexPage}>
  2877. {block:PinnedPostLabel}
  2878. <i class="aa-line-icons pin-ah" icon-name="location-pin-1"></i>
  2879. {/block:PinnedPostLabel}
  2880.  
  2881. <!---------------->
  2882.  
  2883. <i class="aa-line-icons" icon-name="{text:permalink icon A}"></i>
  2884.  
  2885. {block:IndexPage}
  2886. {DayOfMonthWithZero} {ShortMonth} '{ShortYear} @ {24HourWithZero}:{Minutes}
  2887. {/block:IndexPage}
  2888.  
  2889. {block:PermalinkPage}
  2890. {DayOfMonthWithZero} {ShortMonth} {Year} @ {24HourWithZero}:{Minutes}&ensp;&#10023;&ensp;{TimeAgo}
  2891. {/block:PermalinkPage}
  2892.  
  2893. <!---------------->
  2894.  
  2895. {block:PermalinkPage}
  2896. {block:PinnedPostLabel}
  2897. &ensp;&#10023;&ensp;pinned post
  2898. {/block:PinnedPostLabel}
  2899. {/block:PermalinkPage}
  2900.  
  2901. <!---------------->
  2902.  
  2903. {block:IndexPage}
  2904. &emsp;{NoteCount}
  2905. <i class="aa-line-icons nc-ah" icon-name="{text:permalink icon B}"></i>
  2906. {/block:IndexPage}
  2907.  
  2908.  
  2909. </a>
  2910. </div>
  2911.  
  2912. <!------------------------------>
  2913. {block:IndexPage}
  2914. <div class="permaright" clicktags="{select:toggle tags}">
  2915. {block:HasTags}
  2916. <a class="clicktags">
  2917. <i class="iconsax" icon-name="hashtag"></i>
  2918. </a>
  2919. {/block:HasTags}
  2920.  
  2921.  
  2922. <a href="{ReblogURL}" title="reblog this post">
  2923. <i class="iconsax" icon-name="repeat"></i>
  2924. </a>
  2925.  
  2926. <a title="like this post">
  2927. {LikeButton}
  2928. <i class="cp cp-heart-o"></i>
  2929. </a>
  2930. </div>
  2931. {/block:IndexPage}
  2932. <!------------------------------>
  2933.  
  2934. {block:PermalinkPage}
  2935. <div class="permaright">
  2936. {block:NotReblog}
  2937. original post
  2938. {/block:NotReblog}
  2939.  
  2940. {block:RebloggedFrom}
  2941. <a href="{ReblogParentURL}" title="{ReblogParentName}">via</a>
  2942. <a dash>/</a>
  2943. <a href="{ReblogRootURL}" title="{ReblogRootName}">source</a>
  2944. {/block:RebloggedFrom}
  2945. </div>
  2946. {/block:PermalinkPage}
  2947.  
  2948. </div><!--permadiv-->
  2949. {/block:Date}
  2950.  
  2951. {block:PostNotes}
  2952. <div class="notescont">
  2953. <h1>{NoteCountWithLabel}</h1>
  2954. {PostNotes}
  2955. </div>
  2956. {/block:PostNotes}
  2957. </div><!--posts-->
  2958.  
  2959. {/block:Posts}
  2960.  
  2961. <!------ PAGINATION ------>
  2962. {block:Pagination}
  2963. <div class="sbpagi botpagi" brd="{select:pagination border}">
  2964. <a{block:PreviousPage} href="{PreviousPage}" title="previous page"{/block:PreviousPage} class="sbarlynk">
  2965. <i class="ph-caret-left-bold"></i>
  2966. <i class="ph-caret-left-bold"></i>
  2967. </a>
  2968.  
  2969. <div class="sbp-mid">
  2970. {block:JumpPagination length="9"}
  2971.  
  2972. {block:CurrentPage}
  2973. <a class="curpagi" title="you are here (page {CurrentPage})">&#215;</a>
  2974. {/block:CurrentPage}
  2975.  
  2976. {block:JumpPage}
  2977. <a class="othernumz" href="{URL}">{PageNumber}</a>
  2978. {/block:JumpPage}
  2979.  
  2980. {/block:JumpPagination}
  2981. </div>
  2982.  
  2983. <a{block:NextPage} href="{NextPage}" title="next page"{/block:NextPage} class="sbarlynk">
  2984. <i class="ph-caret-right-bold"></i>
  2985. <i class="ph-caret-right-bold"></i>
  2986. </a>
  2987. </div><!--sbpagi-->
  2988. {/block:Pagination}
  2989. </div><!--postscont-->
  2990. </div><!--uqune-->
  2991. </div><!--vojjg-->
  2992.  
  2993. <!----THEME CREDIT. PLEASE DO NOT REMOVE, THANK YOU! :)---->
  2994. <!--icon credit goes to GrasshoneyZ on DeviantArt-->
  2995. <!--https://www.deviantart.com/grasshoneyz/art/whale-avatar-110055163-->
  2996. <a class="healsdeez" href="//glenthemes.tumblr.com" title="&quot;whimsical&quot; theme by glenthemes &#x266A;(^&#x2207;^*)"><img src="https://64.media.tumblr.com/d63691ce277e3350c62f2073cc90f407/tumblr_inline_sxnqx1vAm91qf8af3_500.gif"></a>
  2997.  
  2998. <script src="//static.tumblr.com/0podkko/jfMplm3f8/modified_photosets.js"></script>
  2999.  
  3000. </body>
  3001. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!